Förstå källan till en sidas styling
Senast uppdaterad: februari 10, 2025
Tillgänglig med något av följande abonnemang, om inte annat anges:
|
Det finns flera ställen där innehållsstyling kan läggas till i HubSpot, och den tillämpas i en specifik ordning baserat på var den läggs till. Nedan kan du läsa om hur styling tillämpas, hur du hittar styling på en live-sida och hur du får hjälp med designredigeringar.
Förstå hur styling tillämpas
CSS-styling i HubSpot tillämpas i ordning baserat på var den är inställd i HubSpot, enligt listan nedan. Till exempel åsidosätts styling som anges i en global stilmall av styling som anges på en specifik sida.
- Anpassad modul CSS
- Stylesheets som är kopplade till en modul.
- CSS som läggs till i CSS-avsnittet i en modul.
- CSS inuti HubL-stilsättningen av modulen inom ett require_css-block
- Stylesheets som läggs till i en mall via require_css-blocket
- HubSpots standardformatmallar (t.ex. layout.css)
- Stylesheets som bifogas mallen
- Stylesheets som bifogas på inställningsfliken på din sida
- Stylesheets bifogade i dina inställningar för alla domäner
- Stylesheets bifogade i dina inställningar för en specifik domän
- CSS som läggs till inom <style>-taggar. Till exempel head-HTML i webbplatsinställningarna, sidinställningarna eller mallen.
- Annonser som läggs till via sidredigeraren. HubSpot kommer också att lägga till ! important-taggar till dessa stilar. Läs mer om !important-taggar och hur de påverkar styling.
Hitta styling på en förhandsgranskning eller live-sida
Du kan använda utvecklarverktygen i din webbläsare för att undersöka de stilar som används på din webbplats eller på en förhandsgranskningssida. Varje webbläsare varierar något i hur man felsöker styling.
För att hitta styling i Google Chrome:
- Högerklicka på det element som du vill undersöka på förhandsgransknings- eller live-sidan och välj sedan Inspektera.
- I rutan Element till vänster ser du sidans HTML. Du kan antingen klicka på elementen för att visa deras stilar eller använda markörsymbolen längst upp till vänster i fönstret för att klicka på sidans element.
- I panelen Stilar till höger ser du alla stilar som tillämpas på det elementet. Du kan markera och avmarkera kryssrutorna bredvid varje stil för att ta bort och tillämpa stilen. Detta hjälper dig att begränsa vilken stilregel som ska ändras.
- Till höger om CSS-reglerna ser du källans namn för den stylingen, vilket talar om var stylingen kommer ifrån. Håll muspekaren över källans namn för att se det fullständiga namnet:
- När stylingen kommer från en formatmall visas namnet på formatmallen bredvid CSS-deklarationen i inspektören. Du kan sedan navigera till din designhanterare, hitta stilmallen och göra ändringar efter behov.
- Om källnamnet börjar med module kommer stylingen troligen från CSS i en modul. Håll muspekaren över källnamnet för att visa modulens fullständiga namn.
- Om källnamnet är User agent stylesheet , är CSS en del av webbläsarens standardstyling . Du kommer oftast att se detta för allmän HTML-taggstyling som <p>, <h1>, <h2>, <span>, <div>, etc. Denna styling tillämpas när webbläsaren inte kan hitta allmänna stylingregler för elementet, men den kan skrivas över genom att lägga till dina egna stilar till det elementet.
- Om källnamnet är sidans URL kommer CSS:en från <style>-taggarna på sidan. Stylingen kan till exempel ställas in i sidans eller mallens huvud-HTML.
- Om källnamnet är sidans URL och stylingen är inriktad på #hs_cos_wrapper_module_number, ställs stylingen sannolikt in på fliken Styles i sidredigeraren. HubSpot kommer att lägga till ! important-taggar till dessa stilar. Läs mer om !important-taggar och hur de påverkar styling.
- Om källnamnet är <style> inkluderas troligen stylingen automatiskt med elementet. Ofta beror detta på styling som ställts in i redigeraren för en inbäddningsbar HubSpot-tillgång, till exempel en CTA- eller möteswidget.
- Om element.style visas bredvid deklarationen i inspektören har CSS ställts in inline. Inline-stil är stil som läggs till direkt i HTML-källkoden på en sida eller i Inline-stylingfälten i en mall. Inline-stil i källkoden skulle till exempel se ut som <p style="background:purple;">Hello world</p>.
- När stylingen kommer från en formatmall visas namnet på formatmallen bredvid CSS-deklarationen i inspektören. Du kan sedan navigera till din designhanterare, hitta stilmallen och göra ändringar efter behov.
Mer information om hur du inspekterar en sida finns i hjälpdokumentationen för din webbläsare:
Få hjälp med designändringar
Den bästa resursen för att göra ändringar i dina HubSpot-mallar eller stylesheets är den ursprungliga malldesignern. Det finns dock en mängd olika resurser för att få ytterligare hjälp med innehållsstyling, beroende på din komfortnivå med felsökning av HTML och CSS.
- Om du känner dig bekväm med att använda inspektionsverktygen för att felsöka designproblem på din mall:
-
- Sök och skriv inlägg på CMS Development Forum på Community för att få tips, råd eller felsökning av din kod.
- Se CMS-referensdokumentationen för handledning, guider och en översikt över CMS-ramverket.
- Få 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 köpts från Asset Marketplace kan du kontakta mallens designer om du har frågor om utformningen av din sida.