Guide til Gutenberg i WordPress – sådan bruger du blokeditoren effektivt

Gutenberg er navnet på den blokbaserede editor, som siden WordPress 5.0 har været standardværktøjet til at oprette og redigere indhold. I stedet for at arbejde med ét stort tekstfelt, som i den gamle Classic Editor, bygger Gutenberg indholdet op af separate blokke. Hver blok kan indeholde tekst, billeder, video, gallerier, knapper eller avancerede layoutkomponenter.

For begynderen betyder det, at man hurtigt kan opbygge en side uden at kende til kode, og for den erfarne WordPress bruger giver det nye muligheder for at skabe fleksible og visuelt tiltalende layouts direkte i editoren. Gutenberg er samtidig tæt integreret med moderne temaer og plugins, hvilket gør det muligt at kombinere design, funktionalitet og indhold på en måde, der tidligere krævede langt mere teknisk arbejde.

I denne guide gennemgår vi, hvordan du bruger Gutenberg effektivt – fra de helt basale funktioner til avancerede muligheder. Du lærer at navigere i brugerfladen, arbejde med blokke, optimere dit indhold til SEO og endda tilpasse editoren til dine egne behov.

Hvad er Gutenberg editoren?

Gutenberg er WordPress’ egen blokeditor, som blev introduceret i december 2018 med version 5.0. Formålet var at modernisere redigeringsoplevelsen og give brugerne et værktøj, der kan håndtere alt fra simple blogindlæg til komplekse landingssider uden brug af ekstra sidebyggere.

I stedet for at tænke på indhold som ét samlet dokument, opdeler Gutenberg indholdet i individuelle blokke. En blok kan være alt fra et enkelt afsnit tekst til et billedgalleri eller en hel sektion med flere kolonner. Det giver en modulopbygget tilgang, hvor du kan flytte, tilføje og ændre elementer uden at påvirke resten af siden.

Fordele ved Gutenberg:

• Visuel redigering – du ser, hvordan indholdet vil se ud, mens du arbejder.
• Modulopbygget struktur – gør det let at tilføje eller ændre specifikke dele af en side.
• Fleksibilitet – kombiner tekst, medier og layoutblokke for at skabe unikke designs.
• Integration med temaer og plugins – mange moderne temaer udnytter Gutenberg fuldt ud.
• Fremtidssikret – WordPress udvikler løbende nye funktioner til editoren.

For dig som nybegynder betyder Gutenberg en mere intuitiv måde at arbejde med indhold på. For dig som erfaren udvikler åbner det for avancerede muligheder, som f.eks. at lave dine egne blokke eller integrere dynamiske data fra andre kilder.

Kom godt i gang med Gutenberg

Aktivering af Gutenberg

Siden WordPress 5.0 er Gutenberg som udgangspunkt aktiv i alle installationer. Hvis du har et nyere WordPress site, er blokeditoren allerede standard.
Bruger du stadig den gamle Classic Editor, er det sandsynligvis fordi:

• Du har installeret Classic Editor plugin’et for at beholde den gamle editor.
• Dit tema eller et plugin automatisk har slået Gutenberg fra.

Sådan aktiverer du Gutenberg, hvis den er slået fra:

1. Log ind i WordPress administrationen.
2. Gå til Plugins → Installerede plugins.
3. Find “Classic Editor” (hvis installeret) og deaktiver eller slet det.
4. Opret eller rediger en side/et indlæg – Gutenberg er nu aktiv.

Tip: Har du brug for at køre både Classic Editor og Gutenberg på samme site, kan du konfigurere Classic Editor plugin’et til at tillade begge. Det kan være nyttigt, hvis ældre indhold ikke er konverteret endnu.

Brugerfladen forklaret

Når du åbner Gutenberg, møder du en ren, minimalistisk brugerflade. Den er designet til at holde fokus på indholdet, men rummer stadig en lang række værktøjer.

De vigtigste områder:

1. Indholdsområde (midten)
   • Her opbygger du dit indhold blok for blok.
   • Hver blok har sin egen værktøjslinje, der vises, når du markerer den.
2. Topværktøjslinjen
   • Indeholder knapper til at tilføje nye blokke, fortryde/genskabe, gemme kladder og se forhåndsvisning.
   • Knappen “+” åbner blokvælgeren.
3. Sidebaren (højre side)
   • Har to faner: Blok og Side/Indlæg.
   • Under Blok fanen kan du ændre indstillinger for den valgte blok, f.eks. skrifttype, farver eller layout.
   • Under Side/Indlæg fanen finder du generelle indstillinger som fremhævet billede, kategorier, tags og diskussion.
4. Statuslinjen nederst
   • Viser dokumentets struktur, så du kan navigere mellem blokke.

Navigation og tilføjelse af blokke

For at tilføje en blok kan du:

• Klikke på “+” ikonet øverst til venstre eller mellem eksisterende blokke.
• Skrive / efterfulgt af bloknavnet (f.eks. /billede) for hurtig tilføjelse.

Når du har indsat en blok, kan du trække den til en ny placering eller bruge pilene i blokværktøjslinjen til at flytte den op eller ned.

Forstå blokke i Gutenberg

Gutenberg er bygget op omkring ét grundprincip: alt er en blok.
En blok kan være et simpelt afsnit tekst eller et avanceret layoutmodul med dynamisk indhold. Når du forstår, hvordan blokke fungerer, bliver det langt lettere at bygge komplekse sider uden at røre en eneste kodelinje.

Standardblokke

WordPress leverer en række blokke som standard. De er opdelt i kategorier, så du hurtigt kan finde det, du har brug for:

1. Tekstblokke

• Afsnit: Standardblokken til almindelig brødtekst.
• Overskrift: Bruges til H2, H3 osv. for at strukturere indholdet.
• Citat: Fremhæver et udsagn med særlig styling.
• Liste: Nummererede og punktlister.
• Kode: Til visning af kode med monospace skrifttype.

2. Medieblokke

• Billede: Indsæt enkeltbilleder med mulighed for billedtekst.
• Galleri: Flere billeder i et grid layout.
• Video: Indsæt en video fra dit mediebibliotek eller fra eksterne kilder.
• Fil: Til upload og download af dokumenter.

3. Layoutblokke

• Kolonner: Opdel indhold i 2, 3 eller flere kolonner.
• Gruppe: Saml flere blokke i én container for lettere styring.
• Separator og mellemrum: Bruges til at skabe visuel luft i layoutet.

4. Widget og embed blokke

• Seneste indlæg: Viser en liste over dine seneste blogindlæg.
• Sociale ikoner: Links til dine sociale profiler.
• Embed: Indsæt indhold fra YouTube, Facebook, Instagram m.fl. ved blot at indsætte URL’en.

Genanvendelige blokke

En af Gutenbergs stærkeste funktioner er muligheden for at gemme blokke som genanvendelige.
Det betyder, at du kan oprette et element én gang og bruge det på tværs af hele sitet. Ændrer du i blokken ét sted, opdateres den automatisk alle andre steder, hvor den bruges.

Sådan opretter du en genanvendelig blok:

1. Markér den blok eller de blokke, du vil gemme.
2. Klik på de tre prikker i værktøjslinjen.
3. Vælg “Tilføj til genanvendelige blokke” og giv den et navn.

Eksempel: Et standardiseret call-to-action afsnit, et firmalogo eller en kontaktknap.

Blokmønstre og layouts

Blokmønstre er færdiglavede kombinationer af blokke, der danner et design, du kan indsætte med ét klik.
Det kan være alt fra en “Om os” sektion med billede og tekst, til en hel prissektion med kolonner og knapper.

Fordele ved blokmønstre:

• Hurtig opbygning af komplekse sektioner.
• Ensartet design på tværs af hele sitet.
• Mulighed for at tilpasse mønstret efter indsættelse.

Tip: Mange temaer og blokplugins leverer deres egne blokmønstre, som kan spare dig for meget tid.

Arbejde med avancerede blokke

Når du har styr på standardblokkene, kan Gutenberg udvides med et væld af avancerede blokke, der giver mere kontrol over design, funktionalitet og dynamisk indhold. Disse blokke leveres typisk af tredjepartsplugins eller udvikles specielt til dit website.

Tredjeparts blokplugins

WordPress’ indbyggede blokke dækker de mest basale behov, men med tredjeparts plugins får du adgang til langt mere fleksible muligheder.

Populære blok plugins:

• GenerateBlocks – godt og lille plugin til præcise layouts, ideel til hastighedsoptimerede websites. (denne bruges på kim-tetzlaff.dk)
• Kadence Blocks – mange designmuligheder, inkl. avancerede knapper, faner, akkordeoner og prissektioner. (denne bruges på kim-tetzlaff.dk)
• Spectra (tidl. Ultimate Addons for Gutenberg) – et bredt udvalg af designblokke, som fungerer godt til landingssider.
• Stackable – fokuserer på moderne, responsive layouts og animationsmuligheder.

Fordele ved tredjeparts blokke:

• Større designfrihed uden behov for CSS.
• Indbyggede skabeloner, der kan tilpasses.
• Mulighed for at skabe avancerede brugeroplevelser direkte i editoren.

Dynamisk indhold

En af de mest spændende ting ved Gutenberg er, at blokke kan hente data dynamisk.
Det betyder, at indholdet ændrer sig automatisk, afhængigt af hvad der sker på dit site.

Eksempler på dynamisk indhold:

• Automatisk visning af seneste indlæg eller produkter.
• Lister over events, som trækker data fra en kalender.
• Profiloplysninger for en bruger, hentet fra brugerdata.

Integration med ACF (Advanced Custom Fields)

For udviklere og avancerede brugere er integrationen mellem Gutenberg og ACF en gamechanger.
Med ACF kan du oprette dine egne felter – f.eks. “Pris”, “Bedømmelse” eller “Lokation” – og derefter bygge Gutenberg blokke, der viser disse felter direkte i layoutet.

Fordele ved ACF + Gutenberg:

• Struktur og design kan holdes fuldstændig adskilt fra data.
• Redaktionelle brugere får et simpelt inputfelt, mens designet styres automatisk.
• Perfekt til specialudviklede websites, hvor der er brug for fleksible, men ensartede layouts.

Query Loop blokken

En af Gutenbergs nyere og mest avancerede blokke er Query Loop.
Den fungerer som en miniudgave af en WordPress loop og kan vise dynamiske lister over indhold baseret på dine kriterier.

Eksempler:

• Vise alle blogindlæg fra en bestemt kategori.
• Liste over produkter på tilbud.
• Oversigt over events sorteret efter dato.

Du kan kombinere Query Loop med skabeloner og tilpasse hvert element, så det passer præcis til dit design.

Tips til effektiv brug af Gutenberg

Selvom Gutenberg er intuitiv, kan man spare meget tid ved at kende de rigtige genveje og arbejdsgange. Disse tips kan hjælpe dig med at arbejde mere effektivt, reducere klik og få et bedre flow, når du bygger sider og indlæg.

Tastaturgenveje

Gutenberg har en række indbyggede genveje, der kan spare dig for mange museklik.

Nyttige genveje (Windows / Mac):

• Ctrl + Z / Cmd + Z – Fortryd seneste handling.
• Ctrl + Shift + Z / Cmd + Shift + Z – Genskab en fortrudt handling.
• / (skriv skråstreg) – Åbn blokvælgeren direkte i indholdet.
• Alt + Shift + O – Åbn indholdsoversigten for hurtig navigation mellem blokke.
• Alt + Shift + D – Dupliker den valgte blok.
• Alt + Shift + Z – Fjern den valgte blok.

Tip: Du kan se en komplet liste ved at trykke Shift + Alt + H (Windows) eller Option + Control + H (Mac).

Brugen af “slash” kommandoen

En af de hurtigste måder at indsætte en blok på er ved at skrive / i en ny linje.
Efter skråstregen skriver du navnet på blokken, f.eks.:

• /billede for at indsætte et billede.
• /kolonner for at oprette et kolonnelayout.
• /citat for at tilføje et citatfelt.

Denne metode er markant hurtigere end at lede efter blokken i menuen.

Mobilredigering

Gutenberg fungerer også på mobil og tablet via WordPress app’en eller browser.
Her er et par ting at være opmærksom på:

• Mobilvisningen viser typisk én blok ad gangen, så scroll er uundgåelig.
• Træk og slip er mere besværligt på mobil – brug pilene i værktøjslinjen til at flytte blokke.
• Hvis du arbejder meget på farten, kan det være en fordel at gemme genanvendelige blokke, så du kan indsætte færdige sektioner uden for meget redigering.

Redigér uden forstyrrelser

Hvis du vil fokusere helt på indholdet, kan du aktivere Fuldskærmstilstand eller Spotlight tilstand via de tre prikker i øverste højre hjørne.

• Fuldskærmstilstand skjuler WordPress’ venstremenu.
• Spotlight tilstand fremhæver kun den blok, du arbejder på.

SEO og Gutenberg – optimering af indhold

Gutenberg gør det nemt at bygge flotte sider, men SEO kræver mere end pænt design. Med de rigtige vaner kan du sikre, at dine indlæg og sider ikke bare ser gode ud – de bliver også fundet i søgeresultaterne.

Brug korrekt overskriftsstruktur

En af de mest almindelige SEO fejl er forkert brug af overskrifter.

• H1 – Bruges kun én gang pr. side/indlæg (normalt sidens titel).
• H2 – Bruges til hovedafsnit.
• H3 – Bruges til underafsnit under H2’erne.
• H4-H6 – Bruges sjældent, men kan være relevante til dybere hierarki.

Tip: Gutenberg gør det nemt at ændre overskriftniveau direkte i blokindstillingerne, så du altid kan holde strukturen logisk.

Optimer billeder og medier

Billeder er vigtige for brugeroplevelsen, men de kan også trække hastigheden ned, hvis de ikke er optimeret.

• ALT tekster: Beskriv billedet kort og præcist med relevante nøgleord.
• Komprimering: Brug plugins som Imagify eller Smush for at reducere filstørrelsen.
• Filnavne: Brug beskrivende filnavne, fx gutenberg-guide-billede.jpg i stedet for IMG_1234.jpg.
• Responsive billeder: Gutenberg understøtter automatisk srcset, så billeder vises i passende størrelse til skærmen.

Skriv SEO venlig tekst

• Hold afsnit korte og letlæselige (2-4 linjer).
• Brug punktopstillinger for at bryde teksten op.
• Indsæt interne links til relaterede sider og indlæg.
• Brug dine vigtigste nøgleord naturligt i teksten – undgå keyword stuffing.

Brug SEO plugins sammen med Gutenberg

Plugins som Yoast SEO og Rank Math integrerer direkte i Gutenberg og giver live feedback, mens du skriver.
Her kan du bl.a.:

• Angive meta titel og meta beskrivelse.
• Se læsbarheds score.
• Få forslag til interne links.

Udnyt blokke til bedre SEO

• Brug Seneste indlæg blokken til at oprette interne links automatisk.
• Brug Citat blokken til at fremhæve vigtige pointer, som kan blive udvalgte snippets i Google.
• Brug Liste blokken til at lave overskuelige punktopstillinger, som Google ofte viser i søgeresultaterne.

Core Web Vitals og performance

Google bruger Core Web Vitals som en del af rangeringen, og Gutenberg giver gode muligheder for at optimere:

• Hold antallet af tunge blokke (fx sliders) nede.
• Indlæs kun nødvendige scripts fra blokplugins.
• Brug lette blokplugins fremfor store sidebyggere, når muligt.

Avancerede muligheder for udviklere

For den erfarne WordPress bruger eller udvikler er Gutenberg ikke bare en editor – det er et fleksibelt udviklingsmiljø. Med blokke, React komponenter og WordPress’ blok API kan man bygge funktionalitet, der er skræddersyet til et projekts behov.

Opret dine egne Gutenberg blokke

Egne blokke er nyttige, når standardblokkene eller tredjeparts plugins ikke giver præcis det, du har brug for.
De kan bygges på to måder:

1. Manuel udvikling med React og WordPress’ blok API – fuld kontrol, men kræver JavaScript og React viden.
2. Via ACF Blocks – hurtigere oprettelse af blokke, hvor PHP bruges til at definere felter og layout.

Fordele ved egne blokke:

• Du styrer HTML output fuldstændigt.
• Ingen unødvendig kode fra tredjeparts plugins.
• Fuldt integreret med temaets design og funktion

Udvidelse af eksisterende blokke

Du behøver ikke starte fra bunden – WordPress tillader, at man ændrer på eksisterende blokke.
Dette kan gøres med:

• Filter hooks – fx blocks.registerBlockType til at ændre indstillinger.
• Inspector Controls – tilføj ekstra felter i sidens højre indstillingspanel.
• Block variations – lav alternative versioner af eksisterende blokke med egne standardindstillinger.

Eksempel: Du kan tage Knappen blokken og tilføje et felt til et ikon eller lave en foruddefineret farvekombination.

Dynamisk indhold i custom blokke

Med PHP renderede blokke kan du hente dynamiske data fra WordPress eller eksterne kilder.
Eksempler:

• En blok, der viser vejrudsigten fra en API.
• En blok, der automatisk viser brugerens seneste aktiviteter.
• En blok, der viser indhold fra en bestemt kategori eller brugerrolle.

Bedste praksis ved udvikling af blokke

• Hold dem lette: Undgå store biblioteker, hvis en enkel løsning findes.
• Test performance: Store scripts kan gøre editoren langsom.
• Gør dem fleksible: Tilpasningsmuligheder gør blokken mere genanvendelig.
• Tænk SEO: Sørg for, at HTML output følger semantiske standarder.

Hastighedsfordele ved Gutenberg frem for tunge sidebyggere

En af de mest oversete fordele ved Gutenberg er, hvor meget hurtigere en side kan blive, når man bruger den frem for tunge sidebyggere som Elementor, Divi eller WPBakery.

Hvorfor?

• Mindre kode output: Gutenberg genererer renere og mere semantisk HTML uden overflødige div lag.
• Færre scripts og styles: En Elementor side kan indlæse adskillige CSS og JS filer, selv hvis du kun bruger få widgets. Gutenberg indlæser kun det nødvendige.
• Bedre Core Web Vitals: Mindre kode og færre ressourcer giver hurtigere LCP (Largest Contentful Paint) og lavere CLS (Cumulative Layout Shift).
• Bedre caching og optimering: Fordi Gutenberg følger WordPress’ standarder, fungerer caching plugins og optimeringsværktøjer mere effektivt.

Eksempel:
En typisk Elementor side kan have en sidestørrelse på 1,5–2 MB og over 100 HTTP forespørgsler. En tilsvarende side bygget i Gutenberg kan ligge på under 500 KB og under 40 forespørgsler – ofte uden at man behøver ekstra optimering.

For dig som ønsker et hurtigt, SEO venligt og fremtidssikret site, er Gutenberg derfor et oplagt valg.

Min anbefaling

Som udvikler med fokus på hastighedsoptimering har jeg gennem årene testet utallige content editorer og sidebyggere. Min erfaring er klar: Gutenberg editoren er i langt de fleste tilfælde den bedste løsning, hvis du vil kombinere designfrihed med høj ydeevne.

Hvor mange page builders tilføjer unødvendig kompleksitet og tunge scripts, holder Gutenberg sig til en let, standardiseret kodebase. Det betyder, at dine sider loader hurtigere, scorer bedre i Core Web Vitals og giver en bedre oplevelse for både brugere og søgemaskiner.

Mit råd er enkelt: Brug Gutenberg som dit primære værktøj til at opbygge indhold i WordPress – og supplér kun med små blokplugins, når du har brug for ekstra funktioner. Det giver dig et site, der ikke bare ser godt ud, men også leverer hastighed i topklasse.