Sist oppdatert: mai 23, 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 sidefeltmenyen. Klikk deretter på Fil > Ny fil.
- I dialogboksen klikker du på CSS-stilark. 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 koderedigeringsprogrammet HubL-variabler og -makroer for å gjøre det enklere å vedlikeholde CSS-en din. Hvis du vil forhåndsvise hvordan HubL-filen din vil bli gjengitt, klikker du påVis utdata øverst i redigeringsprogrammet. Et panel åpnes til høyre med en forhåndsvisning av gjengivelsen.
Hvis du vil se en liste over standard CSS-velgere for HubSpot-maler, kan du sjekke ut Boilerplate CSS.
Før du publiserer, sjekk koden din for HubL-feil. Det er tre steder du kan finne HubL-feil eller advarsler i en egendefinert modul eller kodet fil:
- I feilkonsollen nederst i koderedigeringsprogrammet.
- I feilrenner 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 kan du klikke 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 alle steder der det er HubL-feil eller advarsler i koden eller den egendefinerte modulen din. Hold musepekeren over de røde feilindikatorene på venstre side av kodeditoren for å se feilen eller advarselen i koden din. Hvis du klikker på feilen, vil markøren rulle til alle feil eller advarsler på den aktuelle linjen. Hvis du klikker på en rullefeltkommentar, kommer du til den aktuelle delen av filen.
Du kan også klikke på et linjenummer i koderedigeringsprogrammet, slik at URL-adressen til filen oppdateres tilsvarende. På denne måten kan du dele en kobling til koden din med andre og vise dem nøyaktig hvor du arbeider i filen.
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-adresse ved å klikke på Handlinger > Kopier offentlig URL i menyen i venstre sidefelt.
Fest til mal
I HubSpot kan du knytte stilark til innholdet ditt på flere forskjellige måter. Nedenfor ser du i hvilken rekkefølge vedlagte stilark lenkes på nettstedet ditt:
- public_common.css*: et stilark som først og fremst brukes av HubSpots app, men også for enkelte funksjoner på nettstedet.
- HTML for topptekst i innstillingene under Nettsted > Sider: lenkekoder 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 som er knyttet til hele nettstedet.
- Vedlagte stilark i innstillingene under Nettsted > Blogg: stilark som er knyttet til bloggen din (overstyrer nettstedets globale ark).
- Lenkede stilark***: stilark som er vedlagt i maloppsettet.
- Ekstra <head>-markup i malen: lenketagger som er lagt til i <head> i et bestemt maloppsett.
- Sidespesifikke stilark: stilark som er lagt til i innstillingene for en side.
- HTML for sidehode: lenkekoder som legges til i <head> på en bestemt side i sidens innstillinger.
* Påkrevd
** Nødvendig for dra-og-slipp-oppsett
*** Anbefalt metode for å legge ved stilark for maloppsett
Hvis du vil knytte stilark til en mal, åpner du malen i designbehandleren. I menyen i høyre sidefelt under Head and Body Options velger du en fil fra rullegardinmenyen Legg til ved siden av Koblede stilark.
Du kan redigere eller fjerne et stilark som allerede er vedlagt, ved å holde musepekeren over det og klikke på Rediger for å gjøre endringer i det, eller på X for å fjerne det.
Når du har lagt til et stilark, klikker du på Publiser endringer i øvre høyre hjørne for å bruke endringene på de aktive sidene som bruker malen.
Legg til eller fjern stilark på en bestemt side (kunMarketing Hub Professional og Enterprise )
Merk: Dette alternativet er ikke tilgjengelig for temamaler. Lær hvordan du redigerer temainnstillingene dine.
Slik legger du til eller fjerner et sidespesifikt stilark fra innstillingsdelen i sideredigeringsprogrammet:
-
Naviger til innholdet ditt:
- Nettsider: Gå til Innhold > Nettstedssider i HubSpot-kontoen din.
- Landingssider: Gå til Innhold > Landingssider i HubSpot-kontoen din.
- Klikk på navnet på siden din.
- I innholdsredigeringsprogrammet klikker du på Innstillinger-menyen og velger Avansert.
- I dialogboksen Sidestilark klikker du på rullegardinmenyen Legg ved et stilark og velger et stilark . Hvis du vil fjerne et stilark, klikker du påX vedsiden avdet aktuelle stilarket.
- Hvis du vil slå av stilark som er arvet fra malen eller domenet, klikker du på rullegardinmenyen ved siden av stilarket og velger Deaktivert.
Legg ved eller fjern domenets stilark (kunMarketing Hub Professional og Enterprise)
Merk: Temamaler må inneholde annotasjonen enableDomainStylesheets: true for å kunnebruke stilark på domenenivå. Finn ut mer om malannotasjoner.
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 sidefeltmenyen.
- Klikk på rullegardinmenyen for å velge domenet du vil oppdatere innstillingene for.
- Bla til CSS og stilark i kategorienMaler. 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, vil stilark på domenenivå forbli aktive helt til du fjerner dem. Når alle stilark er fjernet, kan du ikke lenger legge til stilark på domenenivå. Finn utmer om hvordan du nedgraderer et abonnement.
