Förstå källan till en sidas styling

Det finns flera ställen där innehållsformatering kan läggas till i HubSpot, och den tillämpas i en specifik ordning baserat på var den läggs till. I den här artikeln lär du dig hur formatering tillämpas, hur du hittar formatering på en live-sida och hur du får hjälp med designredigeringar.

Förstå hur stilar tillämpas

Stilar tillämpas i en specifik ordning baserat på var de läggs till i HubSpot. Till exempel åsidosätts stilar som läggs till i ett globalt stilark av stilar som läggs till på en specifik sida. 

Använd den här listan för att förstå källan till en sidas stil, med början med stilar som tillämpas först och slut med stilar som tillämpas sist.

1. Anpassad modul CSS
   • Stilmallar som är kopplade till en modul i layoutredigeraren.

• • CSS som lagts till i avsnittetmodule.css i en modul i modulredigeraren.

1. • CSS inuti HubL-markeringen för modulen i ett require_css-block.
2. Stilmallar som läggs till i en mall via require_css-blocket i kodred igeraren.
3. HubSpots standardstilmallar (t.ex. layout.css) i designhanteraren.
4. Stilmallar som bifogas mallen i layoutredigeraren.

5. Stilmallar som bifogats på fliken Inställningar på din sida.

6. Stilmallar som är bifogade i dina inställningar för alla domäner
7. Stilmallar som är bifogade i dina inställningar för en specifik domän
8. CSS som lagts till inom <style>-taggar. Till exempel HTML-koden i head-delen av dina webbplatsinställningar, sidinställningar eller mall.

9. Stilar som läggs till via sidredigeraren. HubSpot lägger också till !important-taggar till dessa stilar. Läs mer om !important-taggar och hur de påverkar stilen.

Hitta stilar på en förhandsgranskningssida eller live-sida

Använd utvecklarverktyg i din webbläsare för att hitta de stilar som tillämpas på din livewebbplats eller en förhandsgranskningssida. Varje webbläsare skiljer sig något åt när det gäller felsökning av stilar. I följande exempel används Google Chrome.

1. Navigera till ditt innehåll:
   • I ditt HubSpot-konto navigerar du till Innehåll > Webbplatssidor.
   • I ditt HubSpot-konto navigerar du till Innehåll > Landningssidor.
2. Klicka på namnet på din sida.
3. I innehållsredigeraren klickar du på Förhandsgranska längst upp till höger.
4. På förhandsgranskningssidan klickar du på Öppna i en ny flik.
5. Högerklicka på det element du vill undersöka i förhandsgranskningen och välj sedanInspektera.
6. I fönstretElement visas sidans HTML-kod. Klicka på elementen för att visa deras stilar.
7. I panelen Stilar granskar du de CSS-regler som tillämpas på det elementet. Markera och avmarkera kryssrutorna bredvid varje stil för att tillfälligt ta bort eller lägga till stilar. Detta hjälper dig att identifiera vilken regel som påverkar elementet.

8. Till höger om CSS-reglerna ser du källnamnet för den stilen. Detta bekräftar var källan till stilen finns. Håll muspekaren över källnamnet för att visa hela namnet:
   • Om stilen kommer från en CSS-fil visas namnet på stilmallen bredvid CSS-deklarationen. Gå till designhanteraren, leta reda på stilmallen och gör ändringar efter behov.

• • Om källnamnet börjar med modul, kommer stilen från CSS i en modul. Håll muspekaren över källnamnet för att se modulens fullständiga namn.

• • Om källnamnet är Användaragentens stilmall är stilen en del av webbläsarens standardstil .
    • Vanligtvis ser du detta för HTML-taggstyling (t.ex. <p>, <h1>, <span> etc.), när webbläsaren inte kan hitta stylingregler för elementet. 
    • Användaragentens stilmall kan åsidosättas genom att du lägger till dina egna stilar till det elementet.

• • Om källnamnet är sidans URL kommer stilen från <style> -taggar på sidan. Stilen kan till exempel anges i sidans eller mallens HTML-huvud.

• • Om källnamnet är sidans URL och stilen är riktad mot #hs_cos_wrapper_module_number, läggs stilen till i fliken Stilar i sidredigeraren. HubSpot lägger till !important -taggar till dessa stilar. Läs mer om !important-taggar och hur de påverkar stilen.

• • Om källnamnet är <style> inkluderas stilen automatiskt i elementet. Ofta beror detta på att stilen finns i redigeraren för en inbäddningsbar HubSpot-resurs, till exempel en CTA eller möteswidget.

• • Om element.style visas bredvid deklarationen i inspektören har CSS ställts in inline. Inline-styling är styling som läggs till direkt i HTML-källkoden för en sida eller i fältenför inline-styling i en mall. Inline-styling i källkoden skulle till exempel se ut så här <p style="background:purple;">Hello world</p>.

För mer information om hur du inspekterar en sida, se hjälpdokumentationen för din webbläsare:

• Chrome
• Firefox
• Microsoft Edge
• Safari

Få hjälp med designredigeringar

Den bästa resursen för att göra ändringar i dina HubSpot-mallar eller stilmallar är den ursprungliga malldesignern. Det finns dock en mängd olika resurser för att få ytterligare hjälp med innehållsstyling, beroende på hur bekväm du är med felsökning av HTML och CSS.

• Om du är bekväm med att använda inspektionsverktygen för att felsöka designproblem i din mall:

• • Sök och skriv inlägg på CMS-utvecklingsforumet i communityn för att få tips, råd eller felsökning av din kod.
  • Se CMS-referensdokumentationen för handledningar, guider och en översikt över CMS-ramverket.
  • Ta kontakt med HubSpots produktteam och andra utvecklare som arbetar i HubSpot på CMS Developer Community Slack.

• Om du inte är bekväm med att läsa eller redigera HTML och CSS i dina mallar:

• • Ta kontakt med en certifierad HubSpot-partner med expertis inom webbdesign som kan hjälpa dig att anpassa dina mallar.
  • Använd en temamall för att redigera sidstilar utan att skriva någon kod.
  • Om du använder en mall som du har köpt från Asset Marketplacekan du kontakta mallens designerom du har frågor om utformningen av din sida.