Sist oppdatert: mars 11, 2024
Gjelder for:
Alle produkter og planer
|
CSS-filer (Cascading Style Sheets) er kodede filer som velger elementer på siden din og styrer presentasjonen av dem. CSS-filer kan ikke legges ved e-poster eller e-postmaler.
Denne artikkelen går gjennom hvordan du oppretter, publiserer og legger ved en CSS-fil i HubSpot. Du kan lære hvordan du gjør enkle designendringer på en bestemt side. Hvis du bruker en temamal, kan du lære hvordan du redigerer temainnstillingene.
Opprett en ny CSS-fil
- Gå til Innhold > Design Manager i HubSpot-kontoen din.
- Klikk på mappeikonet øverst i venstre hjørne for å utvide sidemenyen. Klikk deretter på Fil > Ny fil.
- Klikk på CSS-stilark i dialogboksen. Skriv deretter inn et navn på CSS-stilarket og klikk på Opprett.
Rediger CSS-filen
Når du har opprettet eller åpnet en eksisterende CSS-fil, kan du gjøre endringer i kodeditoren. I tillegg til standard CSS støtter kodeditoren HubL-variabler og -makroer for å gjøre det enklere å vedlikeholde CSS. Hvis du vil se en forhåndsvisning av hvordan HubL-filen din vil bli gjengitt, klikker du på bryterenVis utdata øverst i redigeringsprogrammet. Et panel åpnes til høyre med forhåndsvisning av gjengivelsen.
Hvis du vil se en liste over standard CSS-velgere for HubSpot-maler, kan du se Boilerplate CSS.
Før du publiserer, bør du sjekke om det er HubL-feil i koden. Det er tre steder du kan finne HubL-feil eller advarsler i en tilpasset modul eller kodet fil:
- I feilkonsollen nederst i kodeditoren.
- I feilruten langs venstre side av kodeditoren.
- I rullefeltet på høyre side av redigeringsverktøyet.
Feil som hindrer deg i å publisere, vises i rødt, mens generelle advarsler vises i gult. Nederst i kodeditoren klikker du på Vis detaljer for å se mer informasjon om feilene i feilkonsollen og Skjul detaljer for å skjule feilkonsollen.
I feilkonsollen vil det være lenker til HubL-feil eller advarsler i koden eller den egendefinerte modulen. Hold musepekeren over de røde feilindikatorene på venstre side av kodeditoren for å se feilen eller advarselen i koden. Hvis du klikker på feilen, flyttes markøren til alle feil eller advarsler på den aktuelle linjen. Hvis du klikker på en merknad i rullefeltet, kommer du til den delen av filen.
Du kan også klikke på et linjenummer i kodeditoren og få URL-adressen til filen oppdatert tilsvarende. Dermed kan du dele en lenke til koden din med andre og vise dem nøyaktig hvor i filen du arbeider.
Når du har redigert filen, klikker du på Publiser endringer øverst til høyre. Hvis du vil bruke dette stilarket i en annen kodet mal, kan du kopiere arkets URL ved å klikke på Handlinger > Kopier offentlig URL i menyen til venstre.
Festes til malen
I HubSpot kan du knytte stilark til innholdet ditt på flere forskjellige måter. Nedenfor ser du i hvilken rekkefølge vedlagte stilark lenkes til på nettstedet ditt:
- public_common.css*: et stilark som først og fremst brukes av HubSpots app, men også for visse funksjoner på nettstedet.
- Header HTML i innstillingene under Website > Pages: lenketagger lagt til i den globale <head> på nettstedet.
- Layout.css **: standard responsiv CSS-fil som er knyttet til alle dra-og-slipp-maloppsett.
- Vedlagte stilark i innstillingene under Nettsted > Sider: stilark knyttet til hele nettstedet.
- Vedlagte stilark i innstillingene under Nettsted > Blogg: stilark knyttet til bloggen din (overstyrer nettstedets globale ark).
- Lenkede stilark***: stilark som er vedlagt i maloppsettet.
- Ekstra <head>-markering i malen: lenketagger lagt til i <head> i et bestemt maloppsett.
- Sidespesifikke stilark: stilark som er knyttet til en sides innstillinger.
- Sidehode-HTML: lenketagger som er lagt til i <head> på en bestemt side i sidens innstillinger.
* Påkrevd
** Nødvendig for dra og slipp-layouter
*** Anbefalt metode for vedlegg av stilark for maloppsett
Hvis du vil legge til stilark i en mal, åpner du malen i designadministratoren. Velg en fil fra rullegardinmenyen Legg til ved siden av Tilknyttede stilark i menyen til høyre under Alternativer for hode og brødtekst.
Du kan redigere eller fjerne et stilark som allerede er vedlagt, ved å holde musepekeren over det og klikke på Rediger for å gjøre endringer eller X for å fjerne det.
Når du har lagt til et stilark, klikker du på Publiser endringer øverst til høyre for å bruke endringene på de aktuelle sidene som bruker malen.
Legge ved eller fjerne stilark på en bestemt side( kunMarketing Hub Professional og Enterprise )
Merk: Dette alternativet er ikke tilgjengelig for temamaler. Finn ut hvordan du redigerer temainnstillingene.
Slik legger du til eller fjerner et sidespesifikt stilark fra innstillingsdelen i sideredigeringsprogrammet:
-
Naviger til innholdet ditt:
- Nettstedets sider: Gå til Innhold > Nettstedssider i HubSpot-kontoen din.
- Landingssider: Gå til Innhold > Landingssider i HubSpot-kontoen din.
- Hold musepekeren over siden og klikk på Rediger.
- I innholdsredigeringsprogrammet klikker du på Innstillinger-menyen og velger Avansert.
- I delen Sideformatark i dialogboksen klikker du på rullegardinmenyen Legg ved et formatark og velger et formatark . Hvis du vil fjerne et stilark, klikker du påX ved siden av det aktuellestilarket.
- Hvis du vil deaktivere stilark som arves fra malen eller domenet, klikker du på rullegardinmenyen ved siden av stilarket og velger Deaktivert.
Legg ved eller fjern stilark for domener( kunMarketing Hub Professional og Enterprise )
Merk: temamaler må inneholde merk naden enableDomainStylesheets: true for å kunne bruke stilark på domenenivå. Finn ut mer om malkommentarer.
Slik legger du til eller fjerner et stilark fra alt innhold på et domene:
- I HubSpot-kontoen din klikker du på innstillinger-ikonet i den øverste navigasjonslinjen.
- Klikk på Nettsted > Sider i sidemenyen.
- Klikk på rullegardinmenyen for å velge domenet du vil oppdatere innstillingene for.
- I kategorienMaler blar du til CSS og stilark. Klikk på + Legg til stilark for å legge til et stilark. Klikk på X ved siden av et vedlagt stilark for å fjerne det.
- Klikk på Lagre.
Merk: Når du nedgraderer til HubSpots Starter- eller gratisverktøy, forblir vedlagte stilark på domenenivå aktive helt til du fjerner dem. Når alle stilark er fjernet, kan du ikke lenger legge til stilark på domenenivå. Finn ut mer om hvordan du nedgraderer et abonnement.
