Sinds een aantal jaar werkt WordPress standaard met de block-editor, ook wel Gutenberg genoemd. Voor wie gewend was aan de oude, vertrouwde tekstverwerker voelt de Gutenberg block-editor in het begin onwennig, maar zodra je de logica doorhebt, bouw je er verrassend snel en flexibel mee. In dit artikel laten we zien hoe de block-editor werkt en hoe je er slim mee aan de slag gaat.
Wat is de block-editor en hoe verschilt hij van de klassieke editor
De klassieke editor van WordPress was in feite één groot tekstvak, vergelijkbaar met Word. Alles, van tekst tot afbeeldingen, plaatste je in dezelfde stroom. De block-editor pakt het anders aan: elk element op je pagina is een apart “blok”. Een alinea is een blok, een afbeelding is een blok, een knop is een blok.
Dat klinkt als een klein verschil, maar het geeft je veel meer controle. Je verplaatst, dupliceert of verwijdert blokken los van elkaar en je past per blok de opmaak aan. Zo bouw je gestructureerde pagina’s zonder dat je code hoeft te kennen.
Blokken uitgelegd
Een blok voeg je toe met de plusknop, linksboven of op de plek waar je staat. WordPress toont dan een lijst met beschikbare blokken, opgedeeld in categorieën. Heb je een blok geplaatst, dan verschijnt er een werkbalk om het te bewerken en rechts een zijbalk met instellingen zoals kleur, uitlijning en marges.
De handigste truc: typ een schuine streep (“/”) gevolgd door de naam van het blok, bijvoorbeeld “/afbeelding” of “/knop”. Zo voeg je razendsnel het juiste blok toe zonder door de lijst te scrollen.
Veelgebruikte blokken
- Alinea: het standaardblok voor tekst.
- Kop: voor tussenkoppen (H2, H3) die je structuur en SEO ten goede komen.
- Afbeelding en galerij: voor losse beelden of een verzameling foto’s.
- Knop: voor duidelijke call-to-actions.
- Lijst: voor opsommingen zoals deze.
- Kolommen: om content naast elkaar te zetten.
Met deze handvol blokken kom je voor de meeste pagina’s al een heel eind.
Kolommen en lay-out zonder pagebuilder
Vroeger had je voor een nette lay-out met tekst naast een afbeelding vaak een aparte pagebuilder-plugin nodig. Met het kolommenblok regel je dat nu binnen WordPress zelf. Je kiest het aantal kolommen, sleept er blokken in en bepaalt per kolom de breedte.
Wil je een aantal blokken samen als geheel behandelen, dan gebruik je het groep-blok. Daarmee geef je bijvoorbeeld een hele sectie een achtergrondkleur of zet je een blok inhoud met één klik op een andere plek. Zo bouw je opgeruimde, professioneel ogende pagina’s zonder extra plugins die je site vertragen.
Patterns en herbruikbare blokken
Twee functies besparen je veel tijd. Patterns zijn kant-en-klare combinaties van blokken, bijvoorbeeld een complete “over ons”-sectie of een prijzenoverzicht. Je plaatst ze in één keer en past de inhoud aan naar wens.
Herbruikbare blokken (in nieuwere versies “synced patterns”) gebruik je voor elementen die op meerdere pagina’s identiek moeten zijn, zoals een aanbiedingsblok of een contactoproep. Pas je het op één plek aan, dan verandert het overal mee. Ideaal voor consistentie en onderhoud.
Full site editing in het kort
Met moderne, zogeheten blokthema’s gaat de block-editor nog een stap verder: full site editing. Daarmee bewerk je niet alleen je pagina’s, maar ook je header, footer en sjablonen met dezelfde blokkenlogica. Je hoeft dus niet meer in themabestanden te duiken om je menu of voettekst aan te passen.
Voor veel ondernemers is dit een uitkomst, omdat je het uiterlijk van je hele site beheert vanuit één vertrouwde omgeving. Wel vraagt het even wennen, want je hebt nu veel meer in eigen hand.
Tips en sneltoetsen
- Gebruik “/” om snel een blok toe te voegen.
- Sleep blokken met de zes-stippen-greep, of verplaats ze met de pijltjes in de werkbalk.
- Druk op Ctrl/Cmd + Z om een actie ongedaan te maken.
- Klik op de drie puntjes van een blok om het te dupliceren of als herbruikbaar blok op te slaan.
- Schakel met het “lijstweergave”-icoon linksboven over naar een overzicht van alle blokken op je pagina, handig bij complexe lay-outs.
Een eenvoudige pagina opbouwen, stap voor stap
Stel je bouwt een nieuwe “diensten”-pagina. Zo pak je dat met de block-editor aan:
- Begin met een kop-blok op H2-niveau met de titel van je sectie.
- Voeg een alinea-blok toe met een korte introductie van wat je aanbiedt.
- Plaats een kolommenblok met drie kolommen, en zet in elke kolom een kop, een korte tekst en eventueel een pictogram of afbeelding voor je drie diensten.
- Sluit af met een knop-blok dat naar je contactpagina linkt, als duidelijke call-to-action.
- Groepeer het geheel in een groep-blok en geef het een rustige achtergrondkleur om de sectie te laten opvallen.
In een kwartier staat er zo een verzorgde, gestructureerde pagina, zonder ook maar één regel code.
Veelgemaakte fouten in de block-editor
Wie net overstapt, loopt vaak tegen dezelfde dingen aan:
- Koppen voor opmaak gebruiken. Maak iets geen H2 omdat het “groot moet zijn”, maar omdat het echt een kop is. Verkeerd gebruik schaadt je structuur en je SEO.
- Per ongeluk in het verkeerde blok typen. Houd de lijstweergave bij de hand om te zien waar je staat in complexe pagina’s.
- Te veel losse plugins installeren voor dingen die de editor zelf al kan, zoals kolommen of knoppen. Dat vertraagt onnodig je site.
- Een herbruikbaar blok bewerken zonder te beseffen dat het overal verandert. Wil je een eenmalige aanpassing, zet het blok dan eerst om naar een gewoon blok.
- Vergeten op te slaan of de voorvertoning niet checken voordat je publiceert.
Liever een expert aan het stuur? Wij helpen je een WordPress-website laten maken.
Wanneer je toch maatwerk nodig hebt
De block-editor is krachtig, maar kent grenzen. Voor complexe functionaliteiten, een geheel eigen design of een geavanceerde webshop loop je er soms tegenaan. Dan is maatwerk, met een op maat gebouwd thema of speciaal ontwikkelde blokken, een betere keuze dan eindeloos plugins stapelen.
Wil je het maximale uit de Gutenberg block-editor halen, of heb je behoefte aan een site die net even verder gaat dan de standaardblokken? Neem contact op met HakHak, dan kijken we samen wat het beste bij jouw wensen past.
