Last Updated on 29. juli 2025 by John Grandt

Komplet Guide til Design af WordPress-sider

WordPress er verdens mest populære CMS (Content Management System), og det er ikke uden grund: det er fleksibelt, brugervenligt og kan tilpasses både begyndere og professionelle designere. Uanset om du laver en simpel blog, en portefølje, en webshop eller en virksomhedsside, giver WordPress dig alle værktøjer til at skabe et professionelt design.

Denne guide hjælper dig gennem hele processen – fra idé til design og færdig hjemmeside.

🧭 1. Planlægning – Før du designer

Inden du går i gang med at klikke og trække elementer rundt, er det vigtigt at planlægge:

🔹 Formål og mål

Hvad skal siden gøre? Er det:

• At sælge produkter?

• Skabe kontakt?

• Vise dit arbejde frem?

• Dele indhold?

🔹 Målgruppe

Hvem designer du til? Din målgruppe bestemmer både stil, struktur og indhold.

🔹 Struktur og indhold

Lav en sitemap over dine sider:

• Forside

• Om os

• Services / Produkter

• Blog / Nyheder

• Kontakt

Skriv udkast til dine vigtigste tekster og saml dine billeder.

🎨 2. Vælg det rigtige tema

Et tema styrer det visuelle layout og grundlæggende funktioner.

🔹 Gratis vs. premium temaer

• Gratis: Findes i WordPress’ egen temaoversigt. Fx: Astra, Neve, OceanWP

• Premium: Har ofte mere funktionalitet, support og designmuligheder. Fx: Divi, Kadence, Kallyas, Hello + Elementor

🔹 Hvad skal du kigge efter?

• Responsivt design (mobilvenligt)

• Hastighed og optimering

• Kompatibilitet med page builders

• SEO-venligt

• Hyppige opdateringer

👉 Installer via Udseende > Temaer

🧱 3. Brug af Page Builders – design uden kode

De fleste moderne WordPress-sider bygges i dag med page builders – træk-og-slip værktøjer, der gør design nemt og visuelt.

Populære page builders:

• Elementor (meget udbredt og brugervenlig)

• Divi Builder (integreret i Divi-temaet)

• Beaver Builder (let og hurtig)

• Gutenberg (WordPress’ egen blok-editor – god til lette sider)

• WP-Bakery (tidligere js_composer)

👉 Med en page builder kan du nemt opbygge sektioner, kolonner, animationer og visuelle effekter – uden kode.

🏗 4. Designprincipper for WordPress-sider

🔹 Hold det enkelt

Overfyldte sider virker forvirrende. Brug hvidt rum og god afstand.

🔹 Brug en ensartet farvepalette

Vælg 2-3 hovedfarver, og brug dem konsekvent. Brug fx Coolors.co til at finde gode kombinationer.

🔹 Typografi betyder alt

Brug maks. to skrifttyper. Sørg for høj læsbarhed – også på mobil.

🔹 Billeder og grafik

Brug billeder i høj kvalitet og optimer dem med f.eks. TinyPNG eller Imagify.

🔹 Mobiloptimering

Tjek dit design på mobil og tablet – 60-80 % af besøgende bruger mobilen.

⚙️ 5. Vigtige plugins til design og funktion

🧪 6. Test og tilpasning

Inden du går live:

• Tjek siden i flere browsere (Chrome, Firefox, Safari)

• Brug Google Mobile-Friendly Test: test på mobil

• Brug GTmetrix til hastighedstest: gtmetrix.com

• Test kontaktformularer og links

🚀 7. Gør din side klar til lancering

🔹 SSL-certifikat

Sørg for at din side bruger HTTPS (ofte gratis hos webhotellet)

🔹 Sitemap og Google Analytics

Installer Google Site Kit eller Rank Math for SEO og Analytics.

🔹 Backup og sikkerhed

Brug plugins som UpdraftPlus og Wordfence for sikkerhed og backup.

✅ 8. Gode tips fra profferne

• Start med en skabelon, og tilpas – det sparer tid

• Design til brugeren – ikke dig selv

• Undgå for meget animation – det kan virke billigt og forstyrre

• Hold navigationen enkel – maks. 5-7 menupunkter

• Indlæs kun det nødvendige – jo færre plugins, desto hurtigere side

🧾 Konklusion: Dit WordPress-design er dit digitale visitkort

WordPress er et kraftfuldt værktøj, men det er designet der gør forskellen. En flot, funktionel og mobiloptimeret hjemmeside kan skabe tillid, engagement og konverteringer.

Husk: Et godt design kræver ikke nødvendigvis dyre temaer eller kodning – men klar planlægning, brugervenlige værktøjer og et øje for detaljen.

🔗 Nyttige links og ressourcer

Temaer & page builders:

• Elementor

• Astra Theme

• Kadence WP

• Divi

• GeneratePress

Designværktøjer:

• Figma

• Canva

• Coolors – farvepaletter

• Google Fonts

Ressourcer og guides:

• WordPress Codex – Officiel dokumentation

• WPBeginner – Tips & tutorials

• Kinsta – Blog om WordPress performance og design