Senast uppdaterad: januari 20, 2023
CSS (Cascading Style Sheets) är kodade filer som väljer ut element på din sida och styr deras presentation. Tänk på din anpassade malls HTML som benet på din webbplats och CSS som huden på din webbplats.
Den här artikeln visar hur du skapar, publicerar och bifogar en CSS-fil i HubSpot. Du kan lära dig hur du gör enkla designändringar på en viss sida här. Om du använder en temamall får du veta hur du redigerar dina temainställningar.
Skapa en ny CSS-fil
- I ditt HubSpot-konto, navigera till Marknadsföring > Filer och mallar > Designverktyg.
- Klicka påikonen för mappen i det övre vänstra hörnet för att utöka sidomenyn. Klicka sedan på File > New file.
- I dialogrutan klickar du på CSS stylesheet. Ange sedan ett namn för CSS-formatmallen och klicka på Skapa.
Redigera CSS-filen
När du har skapat eller öppnat en befintlig CSS-fil gör du dina ändringar i kodredigeraren. Förutom standard-CSS har kodredigeraren stöd för HubL-variabler och makron för att göra det enklare att underhålla din CSS. Om du vill förhandsgranska hur din HubL kommer att återges klickar du för att aktivera växelnVisa utdata högst upp i redigeraren. En panel öppnas till höger med en förhandsgranskning av den renderade texten.
Om du vill se en lista över standard CSS-selektorer för HubSpot-mallar kan du gå in på Boilerplate CSS.
Innan du publicerar koden ska du kontrollera om den innehåller fel i HubL. Det finns tre ställen där du kan hitta HubL-fel eller varningar i en anpassad modul eller kodad fil:
- I felkonsolen längst ner i kodredigeraren.
- I felrutan till vänster i kodredigeraren.
- I rullgardinsfältet till höger i redigeringsfönstret.
Fel som hindrar dig från att publicera visas i rött, medan allmänna varningar visas i gult. Längst ner i kodredigeraren klickar du på Visa detaljer för att se mer information om felen i felkonsolen och Dölj detaljer för att fälla felkonsolen.
I felkonsolen finns länkar till varhelst det finns HubL-fel eller varningar i din kod eller anpassade modul. Håll muspekaren över de röda felindikatorerna till vänster i kodredigeraren för att se felet eller varningen i din kod. Om du klickar på felet kommer din markör att gå till alla fel eller varningar på den linjen. Om du klickar på en rullebordsannotation kommer du till den delen av filen.
Du kan också klicka på ett radnummer i kodredigeraren så att filens URL uppdateras i enlighet med detta. På så sätt kan du dela en länk till din kod med andra och visa dem exakt var du arbetar i filen.
När du har redigerat filen klickar du på Publicera ändringar uppe till höger. Om du vill använda det här formatmallen i en annan kodad mall kopierar du formatmallens URL genom att klicka på Åtgärder > Kopiera offentlig URL i menyn i vänster sidofält.
Fäst på mallen
I HubSpot kan du bifoga formatmallar till ditt innehåll på några olika sätt. Nedan visas i vilken ordning bifogade formatmallar länkas på din webbplats:
- public_common.css*: ett formatmallblad som främst används av HubSpot-appen, men även för vissa webbplatsfunktioner.
- HTML-huvudet i inställningar under Webbplats > Sidor: länktaggar har lagts till i webbplatsens globala <head>.
- Layout.css **:standard CSS-fil som är anpassad till alla drag-och-släpp-malllayouter.
- Bifogade formatmallar i inställningar under Webbplats > Sidor: formatmallar som bifogas hela webbplatsen.
- Bifogade formatmallar i inställningar under Webbplats > Blogg: formatmallar som är bifogade till din blogg (åsidosätter globala formatmallar för webbplatsen).
- Länkade formatmallar***: formatmallar som bifogas i malllayouten.
- Ytterligare <head>-markering i mallen: Länktaggar som läggs till i <head> för en viss malllayout .
- Sidspecifika formatmallar: formatmallar som bifogas i sidans inställningar.
- HTML för sidhuvud: Länktaggar som läggs till i <head> för en viss sida i sidans inställningar.
* Krävs
** Krävs för layouter som kan dras och släppas
*** Rekommenderad metod för bifogade formatmallar för malllayouter
Om du vill bifoga formatmallar till en mall öppnar du mallen i designhanteraren. I menyn i höger sidofält under Head and Body Options väljer du en fil i rullgardinsmenyn Add bredvid Linked stylesheets.
Du kan redigera eller ta bort ett formatmallblad som redan är bifogat genom att hålla muspekaren över det och klicka på Edit för att göra ändringar i det eller på X för att ta bort det.
När du har lagt till ett formatmallblad klickar du på Publicera ändringar i det övre högra hörnet för att tillämpa ändringarna på de levande sidorna som använder mallen.
Bifoga eller ta bort formatmallar på en specifik sida (endastMarketing Hub Professional och Enterprise )
Observera att det här alternativet inte är tillgängligt för temamallar. Läs mer om hur du redigerar dina temainställningar.
Lägg till eller ta bort en sidspecifik formatmall från inställningsavsnittet i sidredigeraren:
- Navigeratill webbsidor eller landningssidor.
- Håll muspekaren över sidan och klicka på Redigera.
- I sidredigeraren klickar du på Inställningar längst upp.
- Rulla ner och klicka på Avancerade alternativ.
- Under Page Stylesheets klickar du på Attach a stylesheet rullgardinsmenyn och väljer det ark du vill bifoga. Klicka på X bredvid det formatblad du vill ta bort.
- Klicka på Spara och publicera i det övre högra hörnet.
Du kan också inaktivera formatmallar som ärvs av sidan från mallen eller domänen. När de är inaktiverade tillämpas dessa formatmallar inte på sidan:
- Under samma flik Settings i sidredigeraren väljer duDisabled från rullgardinsmenyn bredvid de inkluderade formatmallarna.
- Klicka på Save och Publish i det övre högra hörnet.
Bifoga eller ta bort formatmallar på domännivå (endastMarketing Hub Professional och Enterprise )
Observera: temamallar måste innehålla anteckningen enableDomainStylesheets: true för attanvända formatmallar på domännivå. Läs mer om anteckningar om mallar.
Lägg till eller ta bort ett formatmallblad från allt innehåll på en domän:
- I ditt HubSpot-konto, klicka på inställningsikonen i huvudnavigeringsfältet.
- Klicka på Website > Pages i sidofältets meny.
- Klicka på rullgardinsmenyn för att välja den domän somdu vill uppdatera inställningarna för .
- På flikenTemplates bläddrar du till CSS & Stylesheets. Om du vill lägga till ett formatmallblad klickar du på + Lägg till formatmallblad. Klicka på X bredvid ett bifogat formatblad för att ta bort det.
- Klicka på Spara.
Observera att när du nedgraderar till HubSpot Starter- eller gratisverktyg förblir bifogade formatmallar på domännivå aktiva tills du tar bort dem. När alla formatmallar har tagits bort kan du inte längre bifoga formatmallar på domännivå. Läs mer om att nedgradera en prenumeration.
