Senast uppdaterad: maj 23, 2024
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. CSS-filer kan inte bifogas till e-postmeddelanden eller e-postmallar.
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. 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 navigerar du till Innehåll > Design Manager.
- Klicka på mappikonen i det övre vänstra hörnet för att expandera menyn i sidofältet. Klicka sedan på Arkiv > Ny fil.
- Klicka på CSS-stilmall i dialogrutan. Ange sedan ett namn på din CSS-stilmall 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å på knappenVisa utdata längst upp i redigeraren. En panel öppnas till höger med en förhandsgranskning av renderingen.
Om du vill se en lista över standard CSS-selektorer för HubSpot-mallar kan du 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 ner i kodredigeraren.
- I felrännan längs den vänstra sidan av kodredigeraren.
- I rullningslisten på höger sida av redigeringsverktyget.
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 av kodredigeraren för att se felet eller varningen i din kod. Klicka på felet för att flytta markören till alla fel eller varningar på den raden. Om du klickar på en annotation i rullningslisten kommer du till den delen av filen.
Du kan också klicka på ett radnummer i kodredigeraren och få filens URL uppdaterad i enlighet med detta. Detta gör att du kan dela en länk till din kod med andra och leda 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 anropa den här formatmallen i en annan kodad mall kopierar du formatmallens URL genom att klicka på Åtgärder > Kopiera publik URL i menyn i vänster sidofält.
Bifoga till mallen
I HubSpot kan du bifoga formatmallar till ditt innehåll på några olika sätt. Nedan visas den ordning i vilken bifogade formatmallar länkas på din webbplats:
- public_common.css*: en stilmall som främst används av HubSpots app, men även för vissa funktioner på webbplatsen.
- HTML i sidhuvudet i inställningarna under Webbplats > Sidor: länktaggar har lagts till i webbplatsens globala <head>.
- Layout.css **: standard responsiv CSS-fil som bifogas alla drag-och-släpp-mallayouter.
- Bifogade formatmallar i inställningarna under Webbplats > Sidor: formatmallar som är bifogade till hela webbplatsen.
- Bifogade formatmallar i inställningarna under Webbplats > Blogg: formatmallar som är bifogade till din blogg (åsidosätter webbplatsens globala formatmallar).
- Länkade formatmallar***: formatmallar som bifogas i mallayouten.
- Ytterligare <head>-markup i mallen: länktaggar som läggs till i <head> i en viss mallayout.
- Sidspecifika formatmallar: formatmallar som bifogas i inställningarna för en sida.
- 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 dra-och-släpp-layouter
*** Rekommenderad metod för bifogande av stilmallar för malllayouter
Om du vill bifoga formatmallar till en mall öppnar du mallen i din designhanterare. I menyn i höger sidofält under Alternativ för huvud och kropp väljer du en fil i rullgardinsmenyn Lägg till bredvid Länkade formatmallar.
Du kan redigera eller ta bort en redan bifogad formatmall genom att hålla muspekaren över den och klicka på Redigera för att göra ändringar 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 dina ändringar på den live-sida som använder mallen.
Bifoga eller ta bort stylesheets på en specifik sida (endastMarketing Hub Professional och Enterprise )
Observera : det här alternativet är inte tillgängligt för temamallar. Läs mer om hur du redigerar dina temainställningar.
Så här lägger du till eller tar bort en sidspecifik formatmall från inställningsavsnittet i sidredigeraren:
-
Navigera till ditt innehåll:
- Webbplatsens sidor: I ditt HubSpot-konto navigerar du till Innehåll > Webbplatssidor.
- Landningssidor: I ditt HubSpot-konto navigerar du till Innehåll > Landningssidor.
- Klicka på namnet på din sida.
- I innehållsredigeraren klickar du på menyn Inställningar och väljer Avancerat.
- I dialogrutans avsnitt Sidformatmallar klickar du på rullgardinsmenyn Bifoga en formatmall och väljer en formatmall . Om du vill ta bort en formatmall klickar du påX bredvid den formatmallen.
- Om du vill inaktivera formatmallar som ärvs från mallen eller domänen klickar du på rullgardinsmenyn bredvid formatmallen och väljer Inaktiverad.
Bifoga eller ta bort domänformatmallar (endastMarketing Hub Professional och Enterprise)
Observera: Temamallar måste innehålla annotationen enableDomainStylesheets: true för attkunna använda stylesheets på domännivå. Läs mer om mallannotationer.
Så här lägger du till eller tar bort en formatmall från allt innehåll på en domän:
- I ditt HubSpot-konto klickar du på inställningsikonen i det övre navigeringsfältet.
- Klicka på Webbplats > Sidor i menyn i sidofältet.
- Klicka på rullgardinsmenyn för att välja den domän som du vill uppdatera inställningarna för.
- På flikenMallar bläddrar du till CSS & Stilmallar. Om du vill lägga till en formatmall klickar du 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 hur du nedgraderar en prenumeration.
