Forstå kilden til en sides styling

Der er flere steder, hvor indholdsstyling kan tilføjes i HubSpot, og den anvendes i en bestemt rækkefølge baseret på, hvor den er tilføjet. Nedenfor kan du se, hvordan styling anvendes, hvordan du finder styling på en live-side, og hvordan du får hjælp til designredigeringer.

Forstå, hvordan styling anvendes

CSS-styling i HubSpot anvendes i rækkefølge baseret på, hvor den er indstillet i HubSpot, som vist nedenfor. F.eks. tilsidesættes styling, der er indstillet i et globalt stilark, af styling, der er indstillet på en bestemt side.

1. Brugerdefineret modul-CSS
   1. Stylesheets knyttet til et modul.
   2. CSS tilføjet til CSS-sektionen i et modul.
   3. CSS inde i modulets HubL-markup i en require_css-blok
2. Stylesheets tilføjet til en skabelon gennem require_css-blokken
3. HubSpots standard stylesheets (f.eks. layout.css)
4. Stylesheets knyttet til skabelonen
   
   
   
   
5. Stylesheets, der er vedhæftet på fanen indstillinger på din side
   
   
   
   
6. Stylesheets vedhæftet i dine indstillinger for alle domæner
7. Stylesheets, der er vedhæftet i dine indstillinger for et bestemt domæne
8. CSS tilføjet i <style>-tags. For eksempel hoved-HTML'en i dine hjemmesideindstillinger, sideindstillinger eller skabelon.
   
   
   
   
9. Stilarter tilføjet via sideeditoren. HubSpot tilføjer også !important-tags til disse stilarter. Læs mere om !important-tags, og hvordan de påvirker stylingen.

Find styling på en preview- eller live-side

Du kan bruge udviklerværktøjer i din browser til at undersøge de stilarter, der anvendes på dit live-website eller en preview-side. Det er lidt forskelligt fra browser til browser, hvordan man fejlfinder styling.

Sådan finder du styling i Google Chrome:

• På din preview- eller live-side skal du højreklikke på det element, du vil undersøge, og derefter vælge Inspect.
• I elementruden til venstre kan du se sidens HTML. Du kan enten klikke på elementerne for at se deres stilarter, eller du kan bruge markørikonet øverst til venstre i ruden til at klikke på elementer på siden.

  

• I ruden Stilarter til højre kan du se alle de stilarter, der er anvendt på det pågældende element. Du kan markere og fjerne markeringen i afkrydsningsfelterne ved siden af hver stilart for at fjerne og anvende stilarten. Dette hjælper med at indsnævre, hvilken stilregel der skal ændres.
  
  
  
  
• Til højre for CSS-reglerne kan du se kildenavnet for den pågældende styling, som fortæller dig, hvor stylingen kommer fra. Hold musen over kildenavnet for at se det fulde navn:
  • Når stylingen kommer fra et stilark, vises stilarkets navn ved siden af CSS-deklarationen i inspektøren. Du kan derefter navigere til din designmanager, finde stilarket og foretage ændringer efter behov.
    
    
    
    
  • Hvis kildenavnet starter med module, kommer stylingen sandsynligvis fra CSS'en i et modul. Hold musen over kildenavnet for at se det fulde navn på modulet.
    
    
    
    
  • Hvis kildenavnet er User agent stylesheet , er CSS'en en del af browserens standardstyling . Du vil oftest se dette i forbindelse med generel HTML-tag-styling som <p>, <h1>, <h2>, <span>, <div> osv. Denne styling anvendes, når browseren ikke kan finde generelle stylingregler for elementet, men den kan overskrives ved at tilføje dine egne styles til det pågældende element.
    
    
    
    
  • Hvis kildenavnet er sidens URL, kommer CSS'en fra <style>-tags på siden. Stylingen kan f.eks. indstilles i sidens eller skabelonens hoved-HTML.
    
    
    
    
  • Hvis kildenavnet er sidens URL, og stylingen er rettet mod #hs_cos_wrapper_module_number, bliver stylingen sandsynligvis indstillet i fanen Styles i sideeditoren. HubSpot tilføjer ! important-tags til disse stilarter. Få mere at vide om !important-tags, og hvordan de påvirker stylingen.
    
    
    
  • Hvis kildenavnet er <style>, bliver stylingen sandsynligvis automatisk inkluderet i elementet. Det skyldes ofte styling, der er indstillet i editoren for et HubSpot-aktiv, der kan indlejres, f.eks. en CTA- eller mødewidget.
    
    
    
    
  • Hviselement.stylevises ved siden af erklæringen i inspektøren, er CSS'en blevet sat inline. Inline-styling er styling, der tilføjes direkte til HTML-kildekoden på en side eller tilInline-styling-felterne i en skabelon. For eksempel vil inline-styling i kildekoden se ud som <p style="background:purple;">Hello world</p>.
    
    

Du kan få flere oplysninger om, hvordan du inspicerer en side, i hjælpedokumentationen til din webbrowser:

• Chrome
• Firefox
• Microsoft Edge
• Safari

Få hjælp til designændringer

Den bedste ressource til at foretage ændringer i dine HubSpot-skabeloner eller stylesheets er den oprindelige skabelondesigner. Der er dog en række ressourcer til at få yderligere hjælp til indholdsstyling, afhængigt af dit komfortniveau med fejlfinding af HTML og CSS.

• Hvis du er fortrolig med at bruge inspektørværktøjerne til at fejlfinde designproblemer i din skabelon:

• • Søg og skriv indlæg på CMS Development Forum på Community for at få tips, råd eller fejlfinding af din kode.
  • Se CMS-referencedokumentationen for selvstudier, vejledninger og en oversigt over CMS-frameworket.
  • Kom i kontakt med HubSpots produktteam og andre udviklere, der arbejder med HubSpot, på CMS Developer Community Slack.

• Hvis du ikke er tryg ved at læse eller redigere HTML og CSS i dine skabeloner:

• • Tag kontakt til en certificeret HubSpot-partner med ekspertise i webdesign, som kan hjælpe dig med at tilpasse dine skabeloner.
  • Brug en temaskabelon til at redigere sideformater uden at skrive kode.
  • Hvis du bruger en skabelon, der er købt på Asset Marketplace, skal du kontakte skabelonens designer for at få svar på spørgsmål om designet af din side.