Gutenberg block editor: complete gids voor WordPress

De Gutenberg block editor is de standaard editor van WordPress waarmee je pagina’s en berichten opbouwt uit losse contentblokken, zoals koppen, tekst, afbeeldingen, knoppen en kolommen. Je werkt daardoor visueel en modulair, zonder voor iedere wijziging code nodig te hebben. Voor de meeste zakelijke websites is Gutenberg geschikt wanneer de basisstructuur, stijlen en herbruikbare onderdelen vooraf goed zijn ingericht.

Gutenberg is de oorspronkelijke projectnaam; in WordPress heet de omgeving doorgaans de Block Editor. De editor is sinds WordPress 5.0 de standaardmanier om content te maken en te beheren.

Wat is de Gutenberg block editor?

In de klassieke WordPress-editor schreef je een pagina vooral in één groot tekstveld. Gutenberg deelt een pagina op in afzonderlijke blokken. Elk blok heeft een eigen functie en instellingen. Denk aan een paragraaf, afbeelding, lijst, quote, knop, video of scheiding.

Die opbouw maakt content beter beheersbaar, mits je website een duidelijke blokbibliotheek en vaste opmaak heeft. Een marketeer kan dan een landingspagina samenstellen binnen vooraf bepaalde kaders, terwijl een developer de technische basis beheert.

Gutenberg betekent niet dat iedere medewerker onbeperkt ontwerpvrijheid moet krijgen. Juist voor zakelijke websites werkt de editor het best wanneer je werkt met een beperkt aantal goed ontworpen secties, duidelijke contentrichtlijnen en vaste CTA-varianten. Dat sluit aan op de aanpak van strategisch en creatief webdesign: content, structuur en conversie moeten samenkomen.

Gutenberg, Block Editor, Site Editor en Full Site Editing: het verschil

Onderdeel	Waarvoor gebruik je het?	Wie werkt ermee?	Praktisch voorbeeld
Gutenberg of Block Editor	Content binnen pagina’s en berichten maken	Contentbeheerders, marketeers	Een dienstenpagina met tekst, afbeeldingen en CTA’s
Blok	Eén inhoudelijk of visueel onderdeel	Contentbeheerders	Een Heading-, Image- of Buttons-blok
Block pattern	Een vooraf samengestelde sectie hergebruiken	Contentbeheerders, marketeers	Een intro met titel, tekst en knop
Synchroon patroon	Dezelfde inhoud op meerdere plekken centraal bijwerken	Beheerders	Een vaste CTA-sectie onder kennisbankartikelen
Site Editor en Full Site Editing	Sitebrede templates, header, footer en stijlen beheren	Webdesigner, developer	De lay-out van een archiefpagina aanpassen

De Block Editor richt zich dus vooral op de inhoud van individuele pagina’s en berichten. De Site Editor gaat over sitebrede onderdelen en werkt alleen wanneer het gekozen thema dat ondersteunt. Houd die verantwoordelijkheden apart: zo voorkom je dat een contentwijziging onverwacht invloed heeft op de hele website.

Voor wie is Gutenberg geschikt?

Gutenberg past goed bij organisaties die zelf regelmatig pagina’s, artikelen, vacatures, cases of landingspagina’s publiceren. De editor is vooral praktisch als je team behoefte heeft aan snelheid én consistente opmaak.

Gutenberg is meestal een goede keuze wanneer

• je team zelfstandig teksten, afbeeldingen en CTA’s wil beheren;
• je terugkerende secties gebruikt, zoals USP’s, contactblokken en klantbewijs;
• je een beheersbare, onderhoudbare WordPress-basis wilt;
• je ontwerpregels vooraf wilt vastleggen in blokken en patronen;
• je content wilt structureren voor leesbaarheid, SEO en conversie.

Gutenberg vraagt om extra aandacht wanneer

• je veel uitzonderlijke, interactieve of datagedreven paginaonderdelen nodig hebt;
• meerdere systemen of complexe formulieren moeten koppelen;
• medewerkers zonder richtlijnen volledige vrijheid krijgen over spacing, kleuren en kolommen;
• de bestaande website afhankelijk is van een page builder of veel losse block-plugins.

Dan kan een gerichte plugin, maatwerkblok of technische herinrichting beter passen dan steeds meer losse blokken toevoegen. Bekijk ook de bredere mogelijkheden van webdesign, WordPress, SEO en conversie bij LYNX Media.

Zo werk je met de Gutenberg editor

Een goede pagina ontstaat niet door zomaar blokken toe te voegen. Volg deze werkwijze om vandaag een pagina op te bouwen.

1. Bepaal het doel van de pagina. Kies één hoofdactie, zoals contact opnemen, een offerte aanvragen of een dienst bekijken. Schrijf vervolgens op welke vragen een bezoeker beantwoord wil zien.
2. Maak eerst de inhoudelijke structuur. Begin met een duidelijke titel, intro en tussenkoppen. Voeg pas daarna visuele blokken toe. Zo blijft de pagina logisch, ook op mobiel.
3. Open de block inserter. Klik op het pluspictogram om een blok te zoeken en toe te voegen. Typ je in een leeg blok een schuine streep, dan kun je via een slash command snel naar een blok zoeken.
4. Gebruik List View voor overzicht. In de lijstweergave zie je de hiërarchie van alle blokken. Dit is handig om lange pagina’s te ordenen, geneste groepen te controleren en blokken snel te verplaatsen.
5. Groepeer samenhangende inhoud. Plaats bijvoorbeeld een kop, tekst en knop in een Group-blok. Daarmee houd je secties bij elkaar en voorkom je onlogische verschuivingen in de opmaak.
6. Werk met patronen voor terugkerende secties. Kies een goedgekeurd pattern voor een CTA, voordelenrij, testimonialsectie of contactblok. Zo blijft de vormgeving consistent en hoef je niet telkens vanaf nul te ontwerpen.
7. Controleer elk blok in de zijbalk. Daar pas je blokspecifieke instellingen aan, zoals alt-tekst, link, uitlijning, kleur of zichtbaarheid. Gebruik alleen instellingen die binnen jullie ontwerpafspraken passen.
8. Bekijk de pagina vóór publicatie. Controleer de desktop- en mobiele weergave, links, formulieren, knoppen en de leesvolgorde. Gebruik revisies om een eerdere versie terug te zetten als een wijziging niet goed uitpakt.

Belangrijke Gutenberg-blokken voor zakelijke websites

WordPress biedt een brede lijst met core blocks. Voor de meeste mkb-websites vormen onderstaande blokken de praktische basis.

Blok	Gebruik het voor	Let hierop
Heading	Een logische contenthiërarchie	Gebruik kopniveaus in een inhoudelijke volgorde, niet om tekst groter te maken.
Paragraph	Leesbare toelichting en argumentatie	Houd alinea’s overzichtelijk en gebruik duidelijke tussentitels.
Image	Producten, mensen, processen en bewijs	Vul een passende alt-tekst in wanneer de afbeelding inhoudelijke betekenis heeft.
Buttons	Een primaire vervolgstap	Gebruik een concrete actietekst, bijvoorbeeld ‘Plan een gesprek’ in plaats van ‘Klik hier’.
Group	Een sectie als één geheel opmaken	Gebruik groepen bewust; te veel geneste groepen maken beheer onnodig ingewikkeld.
Columns	Content naast elkaar tonen	Beperk complexe kolomopzetten en controleer altijd de mobiele weergave.
List	Stappen, voordelen en voorwaarden	Gebruik een lijst alleen als de onderdelen inhoudelijk bij elkaar horen.
Query Loop	Een dynamisch overzicht van berichten tonen	Laat de technische configuratie zorgvuldig inrichten zodat het overzicht relevant blijft.
Embed	Externe media insluiten	Beoordeel eerst of de externe inhoud nodig is en geen onnodige belasting veroorzaakt.

Patterns en synchrone patronen slim inzetten

Een block pattern is een vooraf samengestelde combinatie van blokken. Het voordeel is niet alleen snelheid, maar vooral consistentie. Maak bijvoorbeeld patronen voor een hero-sectie, een voordelenblok, een CTA, een contactsectie en een afsluitend blok met gerelateerde content.

Een normaal pattern voeg je in en pas je vervolgens per pagina aan. Een synchroon patroon gebruik je voor inhoud die op meerdere plekken identiek moet blijven. Verander je de inhoud van een synchroon patroon, dan verandert die overal waar het patroon is geplaatst.

Gebruik synchrone patronen daarom alleen voor echt centrale inhoud, zoals een vaste disclaimer, een algemene contact-CTA of een campagneblok. Gebruik ze niet voor secties die per pagina een eigen zoekintentie, propositie of CTA nodig hebben.

Gutenberg en SEO: wat moet je goed doen?

Gutenberg maakt een pagina niet automatisch vindbaar. De kwaliteit van structuur, inhoud, techniek en interne links blijft bepalend. De editor helpt wel om semantische onderdelen bewuster te gebruiken.

• Gebruik koppen voor structuur. Start met één duidelijke paginatitel en bouw daarna een logische hiërarchie met tussenkoppen op.
• Maak interne links inhoudelijk. Link alleen wanneer de vervolgpagina de lezer echt verder helpt. Controleer links ook na het aanpassen of verwijderen van pagina’s. Onze gids over 404- en soft-404-fouten helpt je om kapotte en misleidende URL’s te herkennen.
• Optimaliseer afbeeldingen. Kies passende bestanden, voeg betekenisvolle alt-tekst toe waar nodig en voorkom dat zware media de pagina onnodig belasten.
• Houd de broncode en blokstructuur beheersbaar. Te veel plugins en diep geneste layoutblokken maken een pagina lastiger te onderhouden.
• Gebruik een SEO-plugin als aanvulling. Een plugin kan helpen bij metadata en technische instellingen, maar vervangt geen inhoudelijke keuzes.

Gutenberg en conversie

De Block Editor is ook een hulpmiddel voor conversieoptimalisatie, mits je hem gebruikt om een duidelijke beslisroute te bouwen. Zet niet alleen aantrekkelijke blokken onder elkaar, maar beantwoord de vragen die een potentiële klant heeft.

Een werkbare volgorde voor een zakelijke dienstenpagina is: heldere belofte, korte toelichting, herkenbaar probleem, aanpak of dienst, bewijs en onderbouwing, veelgestelde vragen en een concrete vervolgstap. Plaats CTA’s op logische momenten en laat elke knop aansluiten op de inhoud erboven.

Maak hierbij verschil tussen een primaire CTA, zoals een aanvraag, en een zachtere vervolgstap, zoals een relevante gids lezen. Een pagina met veel knoppen maar zonder duidelijke prioriteit zorgt eerder voor twijfel dan voor actie.

Gutenberg versus Elementor en andere page builders

Gutenberg en page builders lossen deels hetzelfde probleem op: content en layouts bouwen zonder handmatig te coderen. Het verschil zit vooral in de manier waarop je website wordt ingericht en beheerd.

Keuze	Past vaak bij	Sterk punt	Aandachtspunt
Core Gutenberg-blokken	Websites met overzichtelijke contentbehoeften	Sluit aan op de standaard WordPress-editor	Complexere onderdelen vragen soms om ontwikkeling
Gutenberg met patterns	Teams die vaak vergelijkbare pagina’s maken	Consistente opmaak met ruimte voor eigen inhoud	Vraagt vooraf een goed ontwerp- en contentmodel
Extra block-plugin	Een specifieke ontbrekende functionaliteit	Kan gericht uitbreiden	Beperk overlap en beoordeel onderhoud en kwaliteit
Page builder	Websites die al op die builder draaien of specifieke visuele vrijheid nodig hebben	Veel layoutopties binnen één omgeving	Kan afhankelijkheid en complexiteit vergroten
Custom blocks	Organisaties met terugkerende, bedrijfsspecifieke contentonderdelen	Exact afgestemd op proces, ontwerp en invoervelden	Vraagt ontwikkeling, documentatie en onderhoud

De beste keuze is niet automatisch de meest uitgebreide editor. Kies de oplossing waarmee je team betrouwbare pagina’s kan beheren zonder de technische basis en merkconsistentie te ondermijnen.

Wanneer zijn custom Gutenberg-blokken nodig?

Custom blocks zijn nuttig wanneer een standaardblok of pattern niet voldoende houvast biedt. Bijvoorbeeld bij een vaste dienstencard met verplichte velden, een calculator, een complexe tabel, een dynamisch aanbod of een koppeling met data uit een ander systeem.

Een custom block is vooral waardevol als het een terugkerend bedrijfsprobleem oplost. Een los ontwerpidee dat maar één keer voorkomt, is vaak beter als pattern op te lossen. WordPress biedt ontwikkelaars hiervoor een eigen Block Editor Handbook en tools voor block development.

Veelgemaakte fouten in Gutenberg

• Te veel kolommen gebruiken. Een fraaie desktoplay-out kan op mobiel onrustig of moeilijk leesbaar worden.
• Handmatig ruimte creëren met lege regels. Gebruik daarvoor de afgesproken spacing-instellingen of een bewust ingezet Spacer-blok.
• Koppen kiezen op uiterlijk. Een kopniveau is een structuurkeuze, geen opmaakknop.
• Iedere pagina opnieuw ontwerpen. Gebruik patronen om herkenbaarheid en snelheid te behouden.
• Voor elk probleem een plugin installeren. Dat maakt het beheer ingewikkelder en vergroot de afhankelijkheid van externe code.
• Een pagina publiceren zonder mobiele controle. Blokken, kolommen, afbeeldingen en CTA’s moeten ook op een kleiner scherm logisch blijven.
• Oude links laten staan. Controleer na contentonderhoud of interne en externe links nog naar de juiste bestemming wijzen.

Publicatiechecklist voor Gutenberg-pagina’s

Controlepunt	Praktische controle	Actie bij twijfel
Doel en CTA	Is duidelijk wat de bezoeker na het lezen kan doen?	Schrap concurrerende knoppen en maak de hoofdactie concreet.
Headingstructuur	Volgen koppen de inhoudelijke volgorde?	Pas de kopniveaus aan, niet alleen de lettergrootte.
Patterns	Zijn vaste secties volgens de actuele merkstijl gebruikt?	Vervang losse improvisaties door een goedgekeurd pattern.
Mobiele weergave	Zijn tekst, kolommen en CTA’s goed scanbaar?	Vereenvoudig complexe lay-outs.
Afbeeldingen	Zijn beeld, bestandsformaat en alt-tekst passend?	Vervang onnodig zware of betekenisloze media.
Links	Werken interne links, downloads en knoppen?	Test de bestemming en herstel foutieve URL’s.
Revisie	Is de nieuwe versie inhoudelijk gecontroleerd?	Vergelijk met een eerdere revisie vóór je publiceert.

Veelgestelde vragen

Is Gutenberg hetzelfde als de WordPress Block Editor?

In de praktijk wel. Gutenberg is de bekende projectnaam; Block Editor is de benaming die WordPress gebruikt voor de editor waarin je met blokken werkt.

Kan ik de klassieke editor nog gebruiken?

Dat kan via een plugin, maar voor nieuwe WordPress-projecten is het verstandig eerst te beoordelen of de Block Editor beter aansluit op toekomstig contentbeheer. De klassieke editor biedt minder mogelijkheden om content modulair en visueel op te bouwen.

Is Gutenberg geschikt voor SEO?

Ja, mits je de editor gebruikt voor een logische inhoudsstructuur, toegankelijke content, goed beeldgebruik en relevante interne links. Gutenberg vervangt geen SEO-strategie, technische optimalisatie of inhoudelijke expertise.

Heb ik altijd een block-plugin nodig?

Nee. Begin met de core blocks en patterns die je werkelijk nodig hebt. Voeg pas een plugin toe als deze een duidelijke, blijvende behoefte invult die je niet goed met de standaardfunctionaliteit of maatwerk oplost.

Wanneer schakel ik een WordPress-developer in?

Schakel hulp in wanneer je vaste bedrijfsprocessen, complexe data, eigen invoervelden, koppelingen of herbruikbare maatwerkcomponenten nodig hebt. Ook wanneer de editor rommelig is geworden door losse plugins en uitzonderingen, kan een herinrichting veel opleveren.

Gutenberg goed inrichten begint bij een duidelijke basis

Gutenberg geeft je team de middelen om content zelfstandig te beheren. Het echte verschil zit in de inrichting: een doordachte paginastructuur, beperkte maar bruikbare blokkeuzes, consistente patterns en duidelijke regels voor inhoud en vormgeving.

Wil je een WordPress-website waarin marketing zelfstandig kan werken zonder grip op kwaliteit, design en conversie te verliezen? Bespreek je website of online groeikansen met LYNX Media.