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.

Skapa, redigera och bifoga CSS-filer för att utforma din webbplats

Senast uppdaterad: november 3, 2023

Tillgänglig med något av följande abonnemang, om inte annat anges:

Alla produkter och planer

CSS-filer (Cascading Style Sheets) är kodade filer som väljer element på din sida och styr deras presentation. Tänk på din anpassade malls HTML som skelettet på din webbplats och CSS som huden på din webbplats.

Den här artikeln går igenom 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 kan du lära dig 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å mappikonen folder i det övre vänstra hörnet för att expandera sidomenyn. Klicka sedan på Arkiv > Ny fil.
New coded file
  • Klicka på CSS-stilmall i dialogrutan. Ange sedan ett namn för CSS-stilmallen och klicka på Skapa.

Redigera CSS-filen

När du har skapat eller öppnat en befintlig CSS-fil kan du göra dina ändringar i kodredigeraren. Förutom standard-CSS stöder kodredigeraren HubL-variabler och makron för att göra det enklare att underhålla din CSS. För att förhandsgranska hur din HubL kommer att renderas, klicka för att slåShow output längst upp i editorn. En panel öppnas till höger med den renderade förhandsgranskningen.


design-manager-show-output-toggle

För att se en lista över standard CSS-selektorer för HubSpot-mallar, kolla in Boilerplate CSS.

Innan du publicerar, kontrollera din kod för HubL-fel. 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 ned i kodredigeraren.
  • I felrännan längs den vänstra sidan av kodredigeraren.
  • I rullningslisten på höger sida av editorn.

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 dölja felkonsolen.

I felkonsolen kommer det att finnas länkar till varhelst det finns HubL-fel eller varningar i din kod eller anpassade modul. Håll muspekaren över de röda felindikatorerna på vänster sida i kodredigeraren för att se felet eller varningen i din kod. Om du klickar på felet flyttas markören till alla fel eller varningar på den raden. Om du klickar på en anteckning i rullningslisten kommer du till den delen av filen.

Du kan också klicka på ett radnummer i kodredigeraren och få filens URL att uppdateras i enlighet med detta. På så sätt kan du dela en länk till din kod med andra och hänvisa dem till exakt var du arbetar i filen.

När du har redigerat filen klickar du på Publicera ändringar längst upp till höger. Om du vill använda formatmallen i en annan kodad mall kopierar du mallens URL genom att klicka på Åtgärder > Kopiera offentlig URL i den vänstra sidomenyn.

Edit CSS

Fäst på mall

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*: en stilmall som främst används av HubSpots app, men även för vissa funktioner på webbplatsen.
  2. Header HTML i inställningarna under Webbplats > Sidor: länktaggar har lagts till i den globala <head> på webbplatsen.
  3. Layout.css **: standard responsiv CSS-fil som bifogas alla drag-och-släpp-malllayouter.
  4. Bifogade formatmallar i inställningarna under Webbplats > Sidor: formatmallar som är bifogade till hela webbplatsen.
  5. Bifogade formatmallar i inställningarna under Webbplats > Blogg: formatmallar bifogade till din blogg (åsidosätter webbplatsens globala formatmallar).
  6. Länkade formatmallar***: formatmallar som bifogas i mallens layout.
  7. Ytterligare <head>-markering i mallen: länktaggar som lagts till i <head> för en viss mallayout.
  8. Sidspecifika formatmallar: formatmallar som bifogas i en sidas inställningar.
  9. Page head HTML: länktaggar som läggs till i <head> på en viss sida i sidans inställningar.

* Obligatoriskt

** Krävs för dra och släpp-layouter

*** Rekommenderad metod för att bifoga stilmallar för malllayouter

Om du vill bifoga formatmallar till en mall öppnar du mallen i designhanteraren. I menyn på höger sida under Alternativ för huvud och brödtext väljer du en fil i rullgardinsmenyn Lägg till bredvid Länkade formatmallar.

Du kan redigera eller ta bort en formatmall som redan är bifogad genom att hålla muspekaren över den och klicka på Redigera för att göra ändringar i den eller på X för att ta bort den.

När du har lagt till en formatmall klickar du på Publicera ändringar i det övre högra hörnet för att tillämpa ändringarna på den sida som använder mallen.

HubSpot Help article screenshot

Bifoga eller ta bort formatmallar på en specifik sida( endastMarketing Hub Professional och Enterprise )

Observera: det här alternativet är inte tillgängligt för temamallar. Lär dig hur du redigerar dina temainställningar.

Lägga till eller ta bort en sidspecifik formatmall från inställningsavsnittet i sidredigeraren:

  • Navigera till ditt innehåll:

    • Sidor på webbplatsen: I ditt HubSpot-konto, navigera till Marknadsföring > Webbsida > Sidor på webbplatsen.
    • Landningssidor: I ditt HubSpot-konto, navigera till Marknadsföring > Landningssidor.
  • Håll muspekaren över sidan och klicka på Redigera.
  • I innehållsredigeraren klickar du på menyn Inställningar och väljer Avancerat.
  • I avsnittet Sidformatmallar i dialogrutan klickar du på rullgardinsmenyn Bifoga en formatmall och väljer en formatmall. Om du vill ta bort en formatmall klickar du påX bredvid formatmallen.
  • Om du vill inaktivera formatmallar som ärvs från mallen eller domänen klickar du på rullgardinsmenyn bredvid formatmallen och väljer Inaktiverad.

remove-or-turn-off-stylesheets-1

Bifoga eller ta bort domänformatmallar( endastMarketing Hub Professional och Enterprise )

Observera: temamallar måste innehålla annotationen enableDomainStylesheets: true för att kunna använda formatmallar på domännivå. Läs mer om mallkommentarer.

Lägga till eller ta bort en formatmall från allt innehåll på en domän:

  • I ditt HubSpot-konto, klicka på settings inställningsikonen i huvudnavigationsfältet.
  • I sidomenyn klickar du på Webbplats > Sidor.
  • Klicka på rullgardinsmenyn för att välja den domän du vill uppdatera inställningarna för.
  • flikenMallar bläddrar du till CSS och formatmallar. Lägg till en formatmall genom att klicka på + Lägg till formatmall. Klicka på X bredvid en bifogad formatmall för att ta bort den.
  • Klicka på Spara.

Observera: När du nedgraderar till HubSpots Starter- eller gratisverktyg kommer bifogade formatmallar på domännivå att förbli 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.

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

Hjälpte artikeln?
Detta formulär används endast för dokumentationsfeedback. Få reda på hur du får hjälp med HubSpot.