Forstå kilden til en sides styling

Det er flere steder hvor innholdsstyling kan legges til i HubSpot, og den brukes i en bestemt rekkefølge basert på hvor den legges til. I denne artikkelen lærer du hvordan styling brukes, hvordan du finner styling på en live side og hvordan du får hjelp med designredigeringer.

Forstå hvordan stiler brukes

Stiler brukes i en bestemt rekkefølge basert på hvor de legges til i HubSpot. For eksempel overstyres stiler som er lagt til i et globalt stilark av stiler som er lagt til på en bestemt side. 

Bruk denne listen til å forstå kilden til stilen på en side, med stiler som brukes først og stiler som brukes sist.

1. Tilpasset modul CSS
   • Stilark knyttet til en modul i layoutredigereren.

• • CSS lagt til i module.css-delen av en modul i modulredigereren.

1. • CSS inne i HubL-markeringen av modulen i en require_css-blokk.
2. Stilark lagt til en mal gjennom require_css-blokken i kodeditoren.
3. HubSpots standard stilark (f.eks. layout.css) i designbehandleren.
4. Stilark som er knyttet til malen i layoutredigereren.

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

6. Stilark knyttet til innstillingene dine for alle domener
7. Stilark knyttet til innstillingene for et bestemt domene
8. CSS lagt til i <style>-tagger. For eksempel HTML-hodet i innstillingene for nettstedet, sideinnstillingene eller malen.

9. Stiler lagt til gjennom sideeditoren. HubSpot vil også legge til !important-koder til disse stilene. Lær mer om !important-koder og hvordan de påvirker stilen.

Finn styling på en forhåndsvisning eller live-side

Bruk utviklerverktøy i nettleseren din for å finne stilene som brukes på den aktive nettsiden eller forhåndsvisningssiden. Hver nettleser varierer litt i hvordan du feilsøker stiler. I det følgende eksemplet brukes Google Chrome.

1. Naviger til innholdet ditt:
   • Gå til Innhold > Nettstedssider i HubSpot-kontoen din.
   • Gå til Innhold > Landingssider i HubSpot-kontoen din.
2. Klikk på navnet på siden din.
3. I innholdsredigereren klikker du på Forhåndsvisning øverst til høyre.
4. På forhåndsvisningssiden klikker du på Åpne i ny fane.
5. I forhåndsvisningen høyreklikker du på elementet du vil undersøke, og velger deretterInspiser.
6. Ielementruten ser du HTML-koden for siden. Klikk på elementene for å se stilene deres.
7. I ruten Stiler kan du se CSS-reglene som er brukt på det elementet. Merk av og fjern merket i avmerkingsboksene ved siden av hver stil for å midlertidig fjerne eller legge til stiler. Dette vil hjelpe deg med å identifisere hvilken regel som påvirker elementet.

8. Til høyre for CSS-reglene ser du kildenavnet for den stilen. Dette bekrefter hvor kilden til stilen befinner seg. Hold musepekeren over kildenavnet for å se hele navnet:
   • Hvis stilen kommer fra en CSS-fil, vises navnet på stilarket ved siden av CSS-erklæringen. Naviger til designbehandleren, finn stilarket og gjør endringer etter behov.

• • Hvis kildenavnet starter med modul, kommer stilen fra CSS-en til en modul. Hold musepekeren over kildenavnet for å se hele navnet på modulen.

• • Hvis kildenavnet er Brukeragent-stylesheet , er stilen en del av nettleserens standardstil.
    • Vanligvis vil du se dette for HTML-tag-styling (f.eks. <p>, <h1>, <span> osv.), når nettleseren ikke finner stylingregler for elementet. 
    • Brukeragentstilsett kan overstyres ved å legge til dine egne stiler til det elementet.

• • Hvis kildenavnet er sidens URL, kommer stilen fra <style> -tagger på siden. Stilen kan for eksempel angis i HTML-koden for siden eller malen.

• • Hvis kildenavnet er sidens URL og stilen er rettet mot #hs_cos_wrapper_module_number, legges stilen til i fanen Stiler i sideeditoren. HubSpot vil legge til !important -koder til disse stilene. Lær mer om !important-koder og hvordan de påvirker stilen.

• • Hvis kildenavnet er <style>, blir stilen automatisk inkludert i elementet. Dette skyldes ofte at stilen er angitt i redigeringsprogrammet for en innebygd HubSpot-ressurs, for eksempel en CTA eller møtewidget.

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

For mer informasjon om hvordan du inspiserer en side, kan du se hjelpedokumentasjonen for nettleseren din:

• Chrome
• Firefox
• Microsoft Edge
• Safari

Få hjelp med designendringer

Den beste ressursen for å gjøre endringer i HubSpot-malene eller stilarkene dine er den opprinnelige malutvikleren. Det finnes imidlertid en rekke ressurser for å få ekstra hjelp med innholdsstyling, avhengig av hvor komfortabel du er med feilsøking av HTML og CSS.

• Hvis du er komfortabel med å bruke inspeksjonsverktøyene til å feilsøke designproblemer i malen din:

• • Søk og legg ut innlegg på CMS-utviklingsforumet i fellesskapet for å få tips, råd eller feilsøking av koden din.
  • Se CMS-referansedokumentasjonen for veiledninger, guider og en oversikt over CMS-rammeverket.
  • Ta kontakt med HubSpots produktteam og andre utviklere som jobber i HubSpot på CMS Developer Community Slack.

• Hvis du ikke er komfortabel med å lese eller redigere HTML og CSS i malene dine:

• • Ta kontakt med en sertifisert HubSpot-partner med ekspertise innen nettstedsdesign for å få hjelp til å tilpasse malene dine.
  • Bruk en temamal for å redigere sidestiler uten å skrive kode.
  • Hvis du bruker en mal kjøpt fra Asset Marketplace,kan du kontakte malens designerhvis du har spørsmål om utformingen av siden din.