Sidst opdateret: marts 11, 2024
Gælder for:
Alle produkter og abonnementer
|
CSS-filer (Cascading Style Sheets) er kodede filer, der udvælger elementer på din side og styrer deres præsentation. CSS-filer kan ikke vedhæftes til e-mails eller e-mail-skabeloner.
Denne artikel gennemgår oprettelse, publicering og vedhæftning af en CSS-fil i HubSpot. Du kan lære, hvordan du foretager enkle designændringer på en bestemt side. Hvis du bruger en temaskabelon, kan du lære, hvordan du redigerer dine temaindstillinger.
Opret en ny CSS-fil
- På din HubSpot-konto skal du navigere til Indhold > Design Manager.
- Klik på mappeikonet i øverste venstre hjørne for at udvide menuen i sidepanelet. Klik derefter på Filer > Ny fil.
- Klik på CSS-stilark i dialogboksen. Indtast derefter et navn til dit CSS-stilark, og klik på Opret.
Rediger CSS-filen
Når du har oprettet eller åbnet en eksisterende CSS-fil, kan du foretage dine redigeringer i kodeeditoren. Ud over standard-CSS understøtter kodeeditoren HubL-variabler og makroer for at gøre det lettere at vedligeholde din CSS. Hvis du vil se et eksempel på, hvordan din HubL vil blive gengivet, skal du klikke på knappenVis output øverst i editoren. Der åbnes et panel til højre med et eksempel på gengivelsen.
Hvis du vil se en liste over standard CSS-selektorer til HubSpot-skabeloner, kan du tjekke Boilerplate CSS.
Før du publicerer, skal du tjekke din kode for HubL-fejl. Der er tre steder at finde HubL-fejl eller -advarsler i et brugerdefineret modul eller en kodet fil:
- I fejlkonsollen i bunden af kodeeditoren.
- I fejlrenden langs venstre side af kodeeditoren.
- I rullepanelet i højre side af editoren.
Fejl, der forhindrer dig i at publicere, vises med rødt, mens generelle advarsler vises med gult. I bunden af kodeeditoren kan du klikke på Vis detaljer for at se flere oplysninger om fejlene i fejlkonsollen og Skjul detaljer for at skjule fejlkonsollen.
I fejlkonsollen vil der være links til de steder, hvor der er HubL-fejl eller advarsler i din kode eller dit brugerdefinerede modul. Hold musen over de røde fejlindikatorer i venstre side af kodeeditoren for at se fejlen eller advarslen i din kode. Hvis du klikker på fejlen, flyttes markøren til alle fejl eller advarsler på den pågældende linje. Hvis du klikker på en scrollbar-annotation, kommer du til den del af filen.
Du kan også klikke på et linjenummer i kodeeditoren og få filens URL opdateret i overensstemmelse hermed. Det giver dig mulighed for at dele et link til din kode med andre og lede dem hen til præcis det sted i filen, hvor du arbejder.
Når du har redigeret filen, skal du klikke på Publish changes øverst til højre. Hvis du gerne vil kalde dette stilark i en anden kodet skabelon, skal du kopiere arkets URL ved at klikke på Handlinger > Kopier offentlig URL i menuen i venstre side.
Vedhæft til skabelon
I HubSpot kan du vedhæfte stylesheets til dit indhold på et par forskellige måder. Nedenfor kan du se, i hvilken rækkefølge vedhæftede stylesheets bliver linket på din hjemmeside:
- public_common.css*: et stylesheet, der primært bruges af HubSpots app, men også til visse funktioner på websitet.
- Header HTML i indstillinger under Website > Pages: link tags tilføjet til den globale <head> på webstedet.
- Layout.css **: standard responsiv CSS-fil, der er knyttet til alle træk-og-slip-skabelonlayouts.
- Vedhæftede stylesheets i indstillingerne under Website > Pages: stylesheets, der er knyttet til hele din side.
- Vedhæftede stylesheets i indstillingerne under Website > Blog: stylesheets, der er vedhæftet din blog (tilsidesætter sidens globale sheets).
- Tilknyttede stylesheets***: stylesheets, der er vedhæftet i skabelonlayoutet.
- Ekstra <head>-markup i skabelonen: Linktags tilføjet til <head> i et bestemt skabelonlayout.
- Sidespecifikke stylesheets: stylesheets, der er knyttet til en sides indstillinger.
- Page head HTML: linktags tilføjet til <head> på en bestemt side i sidens indstillinger.
* Påkrævet
** Påkrævet til træk og slip-layouts
*** Anbefalet metode til vedhæftning af stilark til skabelonlayouts
For at vedhæfte stilark til en skabelon skal du åbne skabelonen i din designmanager. I menuen i højre side under Head and Body Options skal du vælge en fil fra dropdown-menuen Add ved siden af Linked stylesheets.
Du kan redigere eller fjerne et stilark, der allerede er vedhæftet, ved at holde musen over det og klikke på Rediger for at foretage ændringer eller X for at fjerne det.
Når du har tilføjet et stilark, skal du klikke på Publicer ændringer i øverste højre hjørne for at anvende dine ændringer på de live sider, der bruger skabelonen.
Vedhæft eller fjern stylesheets på en bestemt side( kunMarketing Hub Professional og Enterprise )
Bemærk: Denne mulighed er ikke tilgængelig for temaskabeloner. Lær, hvordan du redigerer dine temaindstillinger.
Sådan tilføjer eller fjerner du et sidespecifikt stilark fra indstillingssektionen i sideeditoren:
-
Naviger til dit indhold:
- Hjemmeside-sider: På din HubSpot-konto skal du navigere til Indhold > Websider.
- Landingssider: På din HubSpot-konto skal du navigere til Indhold > Landingssider.
- Hold musen over din side, og klik på Rediger.
- Klik på menuen Indstillinger i indholdseditoren, og vælg Avanceret.
- Klik på rullemenuen Vedhæft et stilark i dialogboksens sektion Sideformater , og vælg et stilark . Hvis du vil fjerne et stilark, skal du klikke på X ud fordet pågældende stilark.
- Hvis du vil deaktivere stilark, der er arvet fra skabelonen eller domænet, skal du klikke på rullemenuen ved siden af stilarket og vælge Deaktiveret.
Vedhæft eller fjern domæne-stylesheets( kunMarketing Hub Professional og Enterprise )
Bemærk: Temaskabeloner skal indeholde annotationen enableDomainStylesheets: true for atkunne bruge stylesheets på domæneniveau. Læs mere om skabelon-annotationer.
Sådan tilføjer eller fjerner du et stilark fra alt indhold på et domæne:
- På din HubSpot-konto skal du klikke på indstillingsikonet på den øverste navigationslinje.
- Klik på Website > Sider i menuen i sidepanelet.
- Klik på dropdown-menuen for at vælge det domæne , du vil opdatere indstillingerne for.
- Rul til CSS & Stylesheets på fanen Templates. Klik på + Tilføj stilark for at tilføje et stilark. Klik på X ved siden af et vedhæftet stilark for at fjerne det.
- Klik på Gem.
Bemærk: Når du nedgraderer til HubSpots Starter- eller gratisværktøjer, vil vedhæftede stylesheets på domæneniveau forblive aktive, indtil du fjerner dem. Når alle stylesheets er fjernet, kan du ikke længere vedhæfte stylesheets på domæneniveau. Læs mere om nedgradering af et abonnement.
