Sidst opdateret: maj 23, 2024
Gælder for:
Alle produkter og abonnementer
|
CSS-filer (Cascading Style Sheets) er kodede filer, der vælger elementer på din side og styrer deres præsentation. CSS-filer kan ikke vedhæftes e-mails eller e-mail-skabeloner.
Denne artikel gennemgår oprettelse, udgivelse 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 sidepanelets menu. 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 ændringer i kodeeditoren. Ud over standard-CSS understøtter kodeeditoren HubL-variabler og -makroer for at gøre det nemmere at vedligeholde din CSS. For at se, hvordan din HubL vil blive gengivet, skal du klikke for at slåVis output til øverst i editoren. Et panel åbnes til højre med en forhåndsvisning af gengivelsen.
Hvis du vil se en liste over standard CSS-selektorer til HubSpot-skabeloner, kan du tjekke Boilerplate CSS.
Før du udgiver, skal du tjekke din kode for HubL-fejl. Der er tre steder, hvor man kan finde HubL-fejl eller -advarsler i et brugerdefineret modul eller en kodet fil:
- I fejlkonsollen i bunden af kodeeditoren.
- I fejllinjen i venstre side af kodeeditoren.
- I rullepanelet i højre side af editoren.
Fejl, der forhindrer dig i at udgive, vil være røde, mens generelle advarsler vil være gule. Nederst i 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 markøren over de røde fejlindikatorer i venstre side af kodeeditoren for at se fejlen eller advarslen i din kode. Hvis du klikker på fejlen, skifter markøren til alle fejl eller advarsler på den pågældende linje. Hvis du klikker på en scrollbar-annotation, kommer du til den pågældende del af filen.
Du kan også klikke på et linjenummer i kodeeditoren og få URL'en til filen 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å Udgiv ændringer ø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.
Fastgør til skabelon
I HubSpot kan du vedhæfte stylesheets til dit indhold på et par forskellige måder. Nedenfor ses den rækkefølge, som vedhæftede stylesheets linkes i på dit website:
- public_common.css*: et stilark, der primært bruges af HubSpots app, men også til visse funktioner på websitet.
- Header HTML i indstillingerne under Website > Pages: link-tags tilføjet til den globale <head> på websitet.
- 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 dit site.
- Vedhæftede stylesheets i indstillingerne under Website > Blog: stylesheets, der er knyttet til din blog (tilsidesætter sidens globale sheets).
- Linked stylesheets***: stylesheets, der er vedhæftet i skabelonlayoutet.
- Yderligere <head>-markup i skabelonen: link-tags tilføjet til <head> i et bestemt skabelonlayout.
- Sidespecifikke stylesheets: stylesheets, der er knyttet til en sides indstillinger.
- Sidehoved-HTML: Link-tags, der tilføjes til <hovedet> på en bestemt side i sidens indstillinger.
* Påkrævet
** Kræves til træk og slip-layout
*** Anbefalet metode til vedhæftning af stilark til skabelonlayout
Hvis du vil knytte 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 i rullemenuen 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 på X for at fjerne det.
Når du har tilføjet et stilark, skal du klikke på Udgiv ændringer i øverste højre hjørne for at anvende dine ændringer på de levende 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 indstillingsafsnittet i sideeditoren:
-
Naviger til dit indhold:
- Hjemmesider: På din HubSpot-konto skal du navigere til Indhold > Websider.
- Landingssider: På din HubSpot-konto skal du navigere til Indhold > Landingssider.
- Klik på navnet på din side.
- Klik på menuen Indstillinger i indholdseditoren, og vælg Avanceret.
- Klik på rullemenuen Vedhæft et typografiark i afsnittet Sideformater i dialogboksen, og vælg et typografiark . Hvis du vil fjerne et stilark, skal du klikke påX vedsiden af stilarket.
- Hvis du vil slå stilark fra, som er nedarvet fra skabelonen eller domænet, skal du klikke på rullemenuen ved siden af stilarket og vælge Deaktiveret.
Vedhæft eller fjern domænestylesheets (kunMarketing Hub Professional og Enterprise)
Bemærk: Temaskabeloner skal indeholde annotationen enableDomainStylesheets: true for atkunne bruge stylesheets på domæneniveau. Få mere at vide om skabelon-annotationer.
For at tilføje eller fjerne et typografiark 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 sidemenuen.
- Klik på rullemenuen for at vælge det domæne , du vil opdatere indstillingerne for.
- Rul til CSS & Stylesheets på fanen Skabeloner. 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 stilark 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. Få mere at vide om nedgradering af et abonnement.
