Gå til innhold
Merk:: Denne artikkelen er oversatt av praktiske årsaker. Oversettelsen opprettes automatisk ved hjelp av oversettingsprogramvare, og det er ikke sikkert at den er korrekturlest. Den engelske versjonen av denne artikkelen skal regnes som den regjerende versjonen med den nyeste informasjonen. Du finner den her.

Forstå kilden til utformingen av en side

Sist oppdatert: februar 10, 2025

Tilgjengelig med et av følgende abonnementer, unntatt der det er angitt:

Alle produkter og planer

Det er flere steder der innholdsstyling kan legges til i HubSpot, og den brukes i en bestemt rekkefølge basert på hvor den er lagt til. Nedenfor finner du informasjon om hvordan styling brukes, hvordan du finner styling på en direkteside, og hvordan du får hjelp med designredigeringer.

Forstå hvordan styling brukes

CSS-styling i HubSpot brukes i rekkefølge basert på hvor den er angitt i HubSpot, som oppført nedenfor. Stilsett i et globalt stilark overstyres for eksempel av stilsett på en bestemt side. 

  1. Tilpasset modul CSS
    1. Stilark knyttet til en modul.
    2. CSS lagt til i CSS-delen av en modul.
    3. CSS inne i HubL-koden til modulen i en require_css-blokk
  2. Stilark lagt til i en mal gjennom require_css-blokken
  3. HubSpot standard stilark (for eksempel layout.css)
  4. Stilark knyttet til malen



  5. Stilark som er vedlagt på innstillingsfanen på siden din



  6. Stilark som er vedlagt i innstillingene for alle domener
  7. Stilark som er vedlagt i innstillingene for et bestemt domene
  8. CSS lagt til i <style> -koder. For eksempel hoved-HTML for nettstedinnstillingene, sideinnstillingene eller malen.



  9. Stiler lagt til gjennom sideditoren. HubSpot vil også legge til!viktige koder til disse stilene. Lær mer om!viktige tagger og hvordan de påvirker stylingen.

Finn styling på en forhåndsvisning eller direkteside

Du kan bruke utviklerverktøy i nettleseren til å undersøke stilene som brukes på nettstedet ditt i sanntid eller en forhåndsvisningsside. Hver nettleser varierer litt i hvordan du feilsøker styling.

Slik finner du styling i Google Chrome:

  • Høyreklikk på elementet du vil undersøke på forhåndsvisnings- eller direktesiden, og velg deretter Inspiser.
  • I Element-panelet til venstre ser du HTML-koden til siden. Du kan enten klikke på elementene for å se stilene deres, eller du kan bruke markørikonet øverst til venstre i ruten for å klikke på sideelementer.

  • I ruten Stiler til høyre ser du alle stilene som brukes på elementet. Du kan merke av og fjerne merket i avmerkingsboksene ved siden av hver stil for å fjerne og bruke stilen. Dette vil bidra til å begrense hvilken stilregel som skal endres.



  • Til høyre for CSS-reglene ser du kildenavn for den stylingen, som forteller deg hvor stylingen kommer fra. Hold pekeren over kildenavn for å se hele navnet:
    • Når stylingen kommer fra et stilark, vises navnet på stilarket ved siden av CSS-deklarasjonen i inspektøren. Deretter kan du navigere til designadministratoren, finne stilarket og gjøre endringer etter behov.



    • Hvis kildenavnet starter med modulen, kommer stylingen sannsynligvis fra CSS-en til en modul. Hold musepekeren over kildenavnet for å vise modulens fulle navn.



    • Hvis kildenavnet er stilarket User agent, er CSS en del av nettleserens standardutforming. Du vil se dette oftest for generell HTML-kode styling som <p>, <h1>, <h2>, <span>, <div>, etc. Denne stilen brukes når nettleseren ikke finner generelle stilregler for elementet, men den kan overskrives ved å legge til dine egne stiler i elementet.



    • Hvis kildenavnet er nettadressen til siden, kommer CSS-en fra <style> -koder på siden. Stilen kan for eksempel angis i HTML-koden for side- eller malhodet.



    • Hvis kildenavnet er nettadressen til siden og stylingen er rettet mot #hs_cos_wrapper_module_number, angis sannsynligvis stylingen i kategorien Stiler i sideditoren. HubSpot vil legge til!viktige tagger til disse stilene. Lær mer om!viktige tagger og hvordan de påvirker stylingen.
       
       

    • Hvis kildenavnet er <stil>, inkluderes sannsynligvis stylingen automatisk i elementet. Dette skyldes ofte styling i redigeringsprogrammet for en innebyggbar HubSpot-ressurs, for eksempel en CTA- eller møtewidget.



    • Hvis element.style vises ved siden av erklæringen i inspektøren, har CSS blitt satt på linje. Innebygd styling er styling som legges direkte til HTML-kildekoden på en side, eller feltene forinnebygd styling i en mal. For eksempel vil innebygd styling i kildekoden vises som <p style="background:purple;">Hello world</p>.

Hvis du vil ha mer informasjon om hvordan du inspiserer en side, kan du se i hjelpedokumentasjonen for nettleseren:

Få hjelp med designredigeringer

Den beste ressursen for å gjøre endringer i HubSpot-maler eller stilark er den opprinnelige maldesigneren. Det finnes imidlertid en rekke ressurser for å få ekstra hjelp med innholdsstyling, avhengig av komfortnivået ditt med feilsøking av HTML og CSS.

  • Hvis du er komfortabel med å bruke inspektørverktøyene til å feilsøke designproblemer i malen din:
  • Hvis du ikke er komfortabel med å lese eller redigere HTML og CSS i malene dine:
Var denne artikkelen nyttig?
Dette skjemaet brukes kun for tilbakemeldinger om dokumentasjon. Se hvordan du kan få hjelp med HubSpot.
Innholdsfortegnelse /no/design-manager/understand-the-source-of-a-page-s-styling

Relatert innhold