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.
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:
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.
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:
* 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.
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:
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:
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.