Global Styles i Elementor: Ensartet design på 30 minutter

Når en B2B-hjemmeside skal holde i flere år, er ensartet design ikke et “nice to have”. Det er et driftskrav. I praksis betyder det, at I skal kunne justere farver, typografi og knapper uden at være nervøse for, om der ligger 40 særregler spredt ud på tværs af sider.

Global Styles i Elementor (i praksis: Site Settings, Design System og Theme Style) er den del, der giver jer ro. I sætter standarderne ét sted, og bygger resten ovenpå.

Det er også den del, der gør den daglige marketinghverdag mere stabil, når I skal opdatere kampagner, lave nye landingssider eller rette på brandet.

Hvad “Global Styles” dækker i Elementor

Elementor har flere lag af indstillinger, som tilsammen udgør jeres globale design. Det er vigtigt at kende forskellen, så I ikke kommer til at style alt manuelt inde i hver widget.

• Design System (Global Colors og Global Fonts): jeres farvepalet og skrifter som genbrugelige valg i editoren.
• Theme Style: Standardudseende for typografi, knapper, formularfelter, billeder m.m. (det der “fanger” de elementer, hvor I ikke selv vælger Global Colors/Fonts).
• Layout: Indholdsbredde, mellemrum og padding, så siderne får samme rytme og linjeføring.

Et enkelt princip er værd at holde fast i: Hvis noget skal være ens på tværs af hele hjemmesiden, skal det defineres globalt.

Hvorfor det giver mening for jer som marketingansvarlige i B2B

Når en kunde møder jer første gang, vurderer de jer på sekunder. Ikke kun på budskabet, men på helhedsindtrykket. Uens knapper og tilfældige overskrifter skaber støj, og støj skaber tvivl.

Det gode ved Global Styles er, at det reducerer antallet af beslutninger, I skal træffe, hver gang I laver en ny side. I får et fast sæt “byggesten”, som alle i teamet kan bruge på samme måde.

Efter en kort opsætning får I typisk:

• Ens typografi på tværs af sider, indlæg og skabeloner
• Farver, der følger brandet konsekvent
• Knapper og formularer, der ser ens ud (også når flere redigerer)
• Hurtigere opdateringer, når noget ændrer sig i brandguiden

Og vigtigst: I minimerer risikoen for, at hjemmesiden langsomt “driver” i forskellige retninger over tid.

Et hurtigt overblik: Hvad styres hvor?

Tabellen her er god at have ved hånden, når I skal forklare internt, hvad I kan ændre centralt, og hvad der hører hjemme på den enkelte side.

Før du går i gang (5 minutter, der senere sparer jer meget)

Hvis I allerede har en brandguide, så brug den. Hvis ikke, så lav en mini-version, før I åbner Elementor.

Det skal ikke være stort. I skal bare kunne svare på: “Hvilke farver må vi bruge, og hvordan ser teksthierarkiet ud?”

Sørg for, at I har:

• En primær farve og en accentfarve (med hex-koder)
• En tekstfarve, der er læsbar på hvid baggrund
• 1 til 2 skrifttyper (og en klar aftale om, hvad der er overskrift og brødtekst)
• Beslutning om formen på knapper (skarpe hjørner eller afrunding) og knapstørrelse

Hvis I gør det som marketing, bliver det også lettere at holde tråden, når flere i organisationen er inde over indhold og godkendelser.

Opsætning på cirka 30 minutter (trin for trin)

Nedenfor er en praktisk rækkefølge, der passer godt, når målet er et stabilt fundament. Tiderne er vejledende, men rækkefølgen er vigtig.

Start med at åbne en vilkårlig side og klik Rediger med Elementor. Klik derefter på Elementor-ikonet øverst (venstre side) og vælg Site Settings.

Trin 1: Global Colors (ca. 8 minutter)

Gå til Design System → Global Colors.

Sæt minimum disse:

• Primær (jeres brandfarve)
• Sekundær (en støttefarve, ofte mørkere eller mere neutral)
• Tekst (til brødtekst og basis)
• Accent (til markeringer, badges, links eller CTA-detaljer)

Brug gerne tydelige navne, hvis I tilføjer flere farver. “Blå 1” er svær at styre om seks måneder. “Brand blå” og “CTA grøn” er lettere at vælge rigtigt.

Når en knap eller overskrift er sat til “Primær”, kan I skifte farven ét sted senere, uden at redigere alle sider.

Trin 2: Global Fonts (ca. 8 minutter)

Gå til Design System → Global Fonts.

Hold det enkelt. Mange B2B-hjemmesider klarer sig bedst med:

• Én skrifttype til overskrifter
• Én skrifttype til brødtekst (den kan godt være den samme)

Sæt også gerne størrelser og vægte på de globale typografier, så I undgår små variationer.

Et praktisk pejlemærke er, at I altid skal kunne se forskel på H2 og brødtekst uden at zoome. Det lyder banalt, men det er ofte der, konsistensen knækker.

Trin 3: Layout (ca. 5 minutter)

Gå til Settings → Layout.

Her får I styr på den “usynlige” del af designet: rytme, bredde og luft.

Sæt:

• Content width (en fast standard, så siderne får samme linjelængde)
• Default padding (så sektioner ikke rammer kanterne)
• Gaps/spacing (så afstande mellem elementer ikke varierer fra side til side)

Når layoutet er fast, bliver det også nemmere at samarbejde med kolleger. Alle bygger på samme grid, og det kan ses.

Trin 4: Theme Style for typografi, knapper og formularer (ca. 7 minutter)

Gå til Theme Style og tag det i denne rækkefølge:

1. Typography: Sæt standard for body og H1-H6. Vælg gerne jeres globale farver og globale fonte her, så default og design system peger samme vej.
2. Buttons: Definér standardknappen. Her skal I være konsekvente med:

• Normal og hover (farver)
• Padding (størrelse)
• Border radius (hjørner)
• Typografi (samme stil på tværs)

1. Form Fields: Kontaktformularer og felter er ofte der, en hjemmeside ser “plugin-agtig” ud. Sæt farver, kanter og fokus-state, så det matcher resten.

Det her er et godt sted at tænke brand-sammenhæng: En formular er også en del af jeres identitet, ikke bare et teknisk felt.

Trin 5: Slå Elementors default fonts og colors fra (ca. 2 minutter)

Hvis I vil være sikre på, at de globale valg styrer, så gå i WordPress admin:

Elementor → Editor → Indstillinger

Sæt flueben ved:

• Disable Default Colors (på dansk ”Deaktiver standard farver“)
• Disable Default Fonts (på dansk ”Deaktiver Standard skrifttyper“)

Det reducerer risikoen for, at en widget bruger en “Elementor-standard”, som ikke passer til jeres brand.

En lille arbejdsaftale, der gør det lettere at holde styr på designet

Når I har Global Styles på plads, skal I også have en enkel intern regel: Når nogen bygger en ny sektion, så vælges globale farver og globale fonte, og man undgår at sætte tilfældige hex-koder direkte på elementet.

Det er her, konsistensen bliver holdt i live i praksis.

En måde at gøre det tydeligt på i teamet er at være konkrete om, hvad I forventer, at folk bruger:

• Primær: CTA-knapper, vigtige highlights
• Tekst: alt brødtekst og standardindhold
• Accent: små markeringer, badges, ikonfarver
• Sekundær: baggrunde, sekundære knapper eller sektioner

Typiske problemer og rolige løsninger

Selv med en god opsætning kan I støde på elementer, der ikke følger de globale regler. Det er næsten altid et spørgsmål om, at noget er sat lokalt med højere prioritet.

Her er de mest almindelige situationer, jeg ser, og hvad I kan gøre ved dem:

• Elementer ændrer sig ikke, når I opdaterer globale farver: Tjek om farven er sat manuelt på widgetten (ikke som global farve).
• Overskrifter ser forskellige ud på tværs af sider: Tjek om nogen har ændret typografien direkte på en overskrift, eller om H2/H3 er brugt forskelligt.
• Knapper matcher ikke standarden: Tjek om knappen er stylet lokalt (padding, radius, farver), eller om den kommer fra et plugin.
• Formularer ignorerer jeres stil: Formular-plugin kan have egne styles. Start med Theme Style, og brug kun ekstra CSS hvis det er nødvendigt.
• Gamle sider har “historiske” farver: Gennemgå de vigtigste sider og nulstil lokale farver, så de arver de globale.

Hvis I er i tvivl om, hvor en stil kommer fra, så er en god vane at åbne den konkrete widget og kigge efter felter, hvor der står en specifik værdi (fx en hex-kode) i stedet for en global reference.

Når I har sat det op: Sådan bruger I det i det daglige

Global Styles gør ikke arbejdet for jer, men det gør det nemmere at være konsekvente, når hverdagen går stærkt.

Når I laver nye landingssider, så byg først med struktur og budskab, og brug de globale valg hele vejen. Det giver færre korrekturrunder og mindre “designsnak” internt, fordi udtrykket allerede er besluttet.

Og hvis jeres brand skifter en farve eller justerer typografien, så har I et trygt sted at gøre det: I ændrer det globalt, tester et par centrale sider, og I er videre uden at skulle gennemgå alt manuelt.

Det er den type stabilitet, der gør en hjemmeside til et værktøj, I kan arbejde roligt med, også når flere personer bidrager over tid.