Forstå kilden til en sides styling

Der er flere steder, hvor indholdsformatering kan tilføjes i HubSpot, og den anvendes i en bestemt rækkefølge baseret på, hvor den tilføjes. I denne artikel kan du lære, hvordan formatering anvendes, hvordan du finder formatering på en live-side, og hvordan du får hjælp til designredigeringer.

Forstå, hvordan stilarter anvendes

Stilarter anvendes i en bestemt rækkefølge baseret på, hvor de tilføjes i HubSpot. For eksempel overskrives stilarter, der tilføjes i et globalt stilark, af stilarter, der tilføjes på en bestemt side. 

Brug denne liste til at forstå kilden til en sides styling, startende med de stilarter, der anvendes først, og sluttende med de stilarter, der anvendes sidst.

1. Brugerdefineret modul CSS
   • Stylesheets knyttet til et modul i layouteditor en.

• • CSS tilføjet til modulets module.css -sektion i modulredigeringsprogrammet.

1. • CSS inde i HubL-markeringen af modulet i en require_css-blok.
2. Stylesheets tilføjet til en skabelon via require_css-blokken i kodeditoren.
3. HubSpots standardstylesheets (f.eks. layout.css) i designadministratoren.
4. Stylesheets, der er vedhæftet skabelonen i layouteditoren.

5. Stylesheets vedhæftet på fanen Indstillinger på din side.

6. Stylesheets vedhæftet i dine indstillinger for alle domæner
7. Stylesheets, der er vedhæftet i dine indstillinger for et bestemt domæne
8. CSS tilføjet inden for <style>-tags. For eksempel head-HTML i dine webstedsindstillinger, sideindstillinger eller skabelon.

9. Stilarter tilføjet via sideeditoren. HubSpot tilføjer også !important-tags til disse stilarter. Få mere at vide om !important-tags og hvordan de påvirker stilen.

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

Brug udviklerværktøjer i din browser til at finde de stilarter, der anvendes på din live-hjemmeside eller en forhåndsvisningsside. Hver browser varierer lidt i, hvordan man fejlfinder styling. I det følgende eksempel bruges Google Chrome.

1. Naviger til dit indhold:
   • På din HubSpot-konto skal du navigere til Indhold > Websider.
   • På din HubSpot-konto skal du navigere til Indhold > Landingssider.
2. Klik på navnet på din side.
3. I indholdsredigeringsprogrammet skal du klikke på Vis eksempel øverst til højre.
4. Klik på Åbn i en ny fane på forhåndsvisningssiden.
5. Højreklik på det element, du vil undersøge, i forhåndsvisningen, og vælg derefterInspicer.
6. I rudenElementer kan du se sidens HTML-kode. Klik på elementerne for at se deres stilarter.
7. I panelet Stilarter kan du se de CSS-regler, der er anvendt på det pågældende element. Marker og fjern markeringen i afkrydsningsfelterne ud for hver stil for midlertidigt at fjerne eller tilføje stilarter. Dette hjælper med at identificere, hvilken regel der påvirker elementet.

8. Til højre for CSS-reglerne kan du se kildenavnet for den pågældende stil. Dette bekræfter, hvor kilden til stilen er placeret. Hold markøren over kildenavnet for at se det fulde navn:
   • Hvis stilen kommer fra en CSS-fil, vises navnet på stylesheetet ved siden af CSS-deklarationen. Gå til designadministratoren, find stylesheetet, og foretag de nødvendige ændringer.

• • Hvis kildenavnet starter med modul, stammer stilen fra modulets CSS. Hold musen over kildenavnet for at se modulets fulde navn.

• • Hvis kildenavnet er Brugeragent-stylesheet , er stilen en del af browserens standardstil.
    • Generelt vil du se dette for HTML-tag-styling (f.eks. <p>, <h1>, <span> osv.), når browseren ikke kan finde stylingregler for elementet. 
    • Brugeragent-stylesheet kan tilsidesættes ved at tilføje dine egne stilarter til det pågældende element.

• • Hvis kildenavnet er sidens URL, kommer stilen fra <style> -tags på siden. Stilen kan f.eks. være angivet i sidens eller skabelonens HTML-hoved.

• • Hvis kildenavnet er sidens URL, og stilen er målrettet mod #hs_cos_wrapper_module_number, tilføjes stilen i fanen Stilarter i sideeditoren. HubSpot tilføjer !important -tags til disse stilarter. Få mere at vide om !important-tags, og hvordan de påvirker stilen.

• • Hvis kildenavnet er <style>, inkluderes stilen automatisk med elementet. Dette skyldes ofte, at stilen er angivet i editoren for et indlejret HubSpot-aktiv, f.eks. en CTA eller en møde-widget.

• • Hvis element.style vises ved siden af deklarationen i inspektøren, er CSS blevet indstillet inline. Inline-styling er styling, der tilføjes direkte til HTML-kildekoden på en side eller til felterne forinline-styling i en skabelon. For eksempel vil inline-styling i kildekoden se således ud <p style="background:purple;">Hello world</p>.

For flere detaljer om, hvordan du inspicerer en side, kan du læse hjælpedokumentationen til din webbrowser:

• Chrome
• Firefox
• Microsoft Edge
• Safari

Få hjælp til designredigeringer

Den bedste ressource til at foretage ændringer i dine HubSpot-skabeloner eller stylesheets er den originale skabelondesigner. Der findes dog en række forskellige ressourcer, hvor du kan få yderligere hjælp til indholdsstyling, afhængigt af dit kendskab til fejlfinding i HTML og CSS.

• Hvis du er fortrolig med at bruge inspektorværktøjerne til at løse designproblemer i din skabelon:

• • Søg og skriv på CMS Development Forum i Community for at få tips, råd eller hjælp til fejlfinding i din kode.
  • Se CMS-referencedokumentationen for tutorials, vejledninger og en oversigt over CMS-rammen.
  • Få kontakt med HubSpots produktteam og andre udviklere, der arbejder i HubSpot, på CMS Developer Community Slack.

• Hvis du ikke er fortrolig med at læse eller redigere HTML og CSS i dine skabeloner:

• • Få kontakt med en certificeret HubSpot-partner med ekspertise inden for webstedsdesign, der kan hjælpe dig med at tilpasse dine skabeloner.
  • Brug en temaskabelon til at redigere sidestilarter uden at skrive kode.
  • Hvis du bruger en skabelon, der er købt fra Asset Marketplace,skal du kontakte skabelonens designer, hvis du har spørgsmål om designet af din side.