Hoppa till innehåll
Observera: Översättningen av denna artikel är endast avsedd att underlätta för dig. Översättningen har skapats automatiskt med hjälp av en översättningsprogramvara och har eventuellt inte korrekturlästs. Den engelska versionen av denna artikel bör därför betraktas som den gällande versionen med den senaste informationen. Du kan komma åt den här.

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:

Alla produkter och planer

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.

  1. Anpassad modul CSS
    1. Stylesheets som är kopplade till en modul.
    2. CSS som läggs till i CSS-avsnittet i en modul.
    3. CSS inuti HubL-stilsättningen av modulen inom ett require_css-block
  2. Stylesheets som läggs till i en mall via require_css-blocket
  3. HubSpots standardformatmallar (t.ex. layout.css)
  4. Stylesheets som bifogas mallen

    design-manager-linked-stylesheet

  5. Stylesheets som bifogas på inställningsfliken på din sida

    page-editor-attach-stylesheet

  6. Stylesheets bifogade i dina inställningar för alla domäner
  7. Stylesheets bifogade i dina inställningar för en specifik domän
  8. CSS som läggs till inom <style>-taggar. Till exempel head-HTML i webbplatsinställningarna, sidinställningarna eller mallen.

    page-editor-head-html

  9. 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.

page-editor-styles-tab

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.

    inspect-live-page-cursor

  • 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.

    inspect-live-page

  • 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.

      inspect-css-stylesheet-name

    • 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.

      inspect-css-module-name

    • 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.

      inspect-css-user-agent

    • 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.

      inspect-css-page-url

    • 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.


      inspect-css-styles-tab
    • 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.

      page-styling-style-tag0

    • 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>.

      inspect-css-element-style

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:
  • 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.
Hjälpte artikeln?
Detta formulär används endast för dokumentationsfeedback. Få reda på hur du får hjälp med HubSpot.