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.
Design Manager

Skapa, redigera och bifoga CSS-filer för att skapa stil på din webbplats

Senast uppdaterad: november 2, 2021

Gäller för:

Marknadsföring Hub Professional, Enterprise
CMS Hub Starter, Professional, Enterprise
Tidigare Marketing Hub Basic

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 mappen i det övre vänstra hörnet för att utöka sidomenyn. Klicka sedan på File > New file.
New coded 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 lättare 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.


design-manager-show-output-toggle

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 bör 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.

Edit CSS

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:

  1. public_common.css * - ett formatmallblad som främst används av HubSpot-appen, men även för vissa webbplatsfunktioner.
  2. HTML-huvudet i inställningarna under Website > Pages - länktaggar läggs till i webbplatsens globala <head>.
  3. Layout.css ** -standard CSS-fil som är anpassad till alla drag-och-släpp-malllayouter.
  4. Bifogade formatmallar i inställningar under Webbplats > Sidor - formatmallar som bifogas hela webbplatsen.
  5. Bifogade formatmallar i inställningar under Webbplats > Blogg - formatmallar som är bifogade till din blogg (åsidosätter globala formatmallar för webbplatsen).
  6. Länkade formatmallar***- formatmallar som bifogas i malllayouten.
  7. Ytterligare <head>-markering i mallen - länktaggar som läggs till i <head> för en viss malllayout .
  8. Sidspecifika formatmallar - formatmallar som bifogas i sidans inställningar.
  9. HTML för sidhuvud - länktaggar som läggs till i <head> på 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.

HubSpot Help article screenshot

Bifoga eller ta bort formatmallar på en specifik sida

Observeraatt 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 Enterprise)

Observera:Temamallar måste innehålla anteckningen enableDomainStylesheets: true för att använda formatmallar på domännivå. Läs mer om anteckningar om mallar.

Om du vill lägga till eller ta bort ett formatmallblad från allt innehåll på en domän:

  • I ditt HubSpot-konto, klicka på inställningsikonen inställningar i huvudnavigeringsfältet.
  • Klicka på Website > Pages i sidofältets meny.
  • Klicka på rullgardinsmenyn för att välja den domän ydu 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.

Use HubSpot tools on your WordPress website and connect the two platforms  without dealing with code. Click here to learn more.