WordPress Gutenberg beginnersgids: zo bouw je eenvoudig webpagina’s

Zelf webpagina’s bouwen is een fluitje van een cent in WordPress. Dankzij de ingebouwde Gutenberg-blokeditor voeg je afbeeldingen, indelingen en andere elementen met een druk op de knop toe. Wil je Gutenberg beter leren kennen? Deze gids helpt je op weg.

Wat is een blokeditor?

Met een blokeditor kun je makkelijk extra onderdelen aan een webpagina toevoegen. In plaats van te coderen, kies je jouw onderdeel uit een verzameling kant-en-klare bouwblokken en klik je het op zijn plaats. Het is alsof je met legostenen werkt, maar dan om webpagina’s te bouwen.

WordPress is sinds 2018 standaard uitgerust met een blokeditor (bekend onder de codenaam Gutenberg). Maar WordPress zou WordPress niet zijn, als je geen ruime keuze uit alternatieve mogelijkheden had. De meeste alternatieven voor Gutenberg zijn page builders. Hiermee klik je niet alleen eenvoudig pagina’s in elkaar, maar kun je ook de rest van je site volledig naar je hand zetten. Hierover later iets meer.

Aan de slag met Gutenberg

Als jouw WordPress up-to-date is, en je geen page builder of thema met gekoppelde page builder geïnstalleerd hebt, start Gutenberg zodra je een nieuw bericht (of nieuwe pagina) toevoegt. Klik je op Berichten | Bericht toevoegen en verschijnt er groot ‘Titel toevoegen’ in beeld (gevolgd door ‘Typ / om een blok te kiezen’), dan werk je met Gutenberg. 

Werkt Gutenberg niet? 

Staat het witte kader van de klassieke editor op je te wachten? Dan is er iets niet in orde. Controleer of jouw WordPress up-to-date is (op zijn minst versie 5.0 of hoger). 

Is dit het geval? Kijk dan bij Plugins of je de ‘Classic Editor’ hebt geïnstalleerd (en zet deze vervolgens uit). 

Helpt dit ook niet? Dan kan een verouderd thema het probleem veroorzaken. Ga naar Weergave | Thema’s en activeer Twenty Twenty-Five. 

Block Toolbar bovenaan zetten 

Gutenberg heeft net als de klassieke editor een gereedschapsbalk met handige functies. Standaard wordt deze verstopt als je naar beneden beweegt. Klik op de drie puntjes rechtsboven in beeld en klik op ‘Bovenste toolbar’ om deze handige werkbalk altijd in beeld te houden. Als je de optie één keer aanvinkt, blijft het actief tot je het zelf weer uitzet. 

Eerste blogpost maken met Gutenberg

Als je toch al op Bericht toevoegen hebt geklikt om Gutenberg te bekijken, kun je direct een eerste blogpost met Gutenberg gaan maken. Dat kan in het begin even wennen zijn. In plaats van één doorlopende tekst te schrijven (alsof je in Word werkt), werk je nu met blokken. Iedere alinea krijgt een eigen blok. Andere elementen (zoals afbeeldingen) staan ook in eigen blokken. 

Werken met blokken

Werken met blokken klinkt omslachtig, maar in de praktijk valt dat reuze mee. Als je tekst wilt invoeren, ga je gewoon typen bij ‘Typ / om een blok te kiezen’. Gutenberg maakt automatisch een Paragraaf van het blok waarin je jouw tekst typt. Druk je op Enter en typ je door, dan voegt de blokeditor gewoon een nieuw Paragraaf-blok voor je toe. 

Andere elementen toevoegen

Wil je een ander element zoals een afbeelding of een tussenkop toevoegen, dan kun je op de + naast een nieuw blok klikken of gewoon de / indrukken. Je krijgt dan een menu met de meest gebruikte standaardblokken te zien. 

Klik je op ‘Alles bekijken’ onderin dit menu, dan krijg je links in beeld een overzicht van alle blokken die je ter beschikking hebt. Afhankelijk van je thema zijn dat er in een standaard WordPress-installatie tussen de 35 en 45.

Naast tekst en afbeeldingen vind je onder meer blokken om lijsten, lijnen en widgets toe te voegen. Daarnaast zijn er blokken om delen van externe sites zoals YouTube, Reddit, TikTok of Bluesky in jouw pagina in te sluiten. 

Blokken opmaken 

Met een blokeditor kun je blokken individueel opmaken. Rechts in beeld zie je een kader met twee tabbladen. Het tabblad Bericht laat je de gedeelde eigenschappen van het bericht waar je mee werkt zien. Blok geeft je toegang tot de eigenschappen van het tekstblok dat je op dat moment bewerkt. Zie je rechts in beeld geen kader? Klik dan rechtsboven, links van de knop Publiceren op het vierkant met een streep aan de rechterkant. 

Onder het tabblad Blok vind je meer tabbladen. Standaard staat hier een tandwiel voor instellingen en een zwart-witte cirkel voor vormgevingsopties. Omdat je per blok instellingen kunt maken, is het heel makkelijk om stukken tekst van kleur te veranderen, afbeeldingen iets anders weer te geven of andere bijzondere aanpassingen voor één blok te maken. 

Werken met groepen

Met blokken kun je leuke dingen bouwen, maar Gutenberg komt pas echt tot zijn recht als je die blokken gaat groeperen. Je kunt dan grotere, samengestelde bouwblokken vormgeven. Dat geeft extra mogelijkheden om pagina-elementen op te bouwen. De mooiste groepen kun je op andere pagina’s gaan hergebruiken. 

Overzicht kwijt? Gebruik de Lijstweergave

Kun je een specifiek blok niet vinden? Klik dan linksboven op het pictogram met drie verspringende lijnen. Je ziet dan links in beeld een Lijstweergave van alle blokken in de volgorde waarop ze op de pagina staan. Om de volgorde te veranderen, sleep je onderdelen gewoon naar de juiste plaats en laat je ze los. Gutenberg doet de rest.

Vormgeven met groepen

Gutenberg maakt het eenvoudig om unieke indelingen op een pagina te maken. Je kunt blokken groeperen en ze op in onderlinge samenhang weergeven. Dit maakt het onder meer mogelijk om met kolommen te werken of kaders toe te voegen. 

Een groep maak je door in de Lijstweergave, met shift ingedrukt, meerdere blokken te selecteren. 

Wil je bijvoorbeeld twee kolommen tekst naast elkaar zetten? Selecteer dan twee paragrafen en kies vervolgens in de werkbalk bovenin voor Rij (het pictogram dat lijkt op een omgekeerde c naast een c). De paragrafen staan nu als twee kolommen in één rij naast elkaar. Je kunt hier zelf vrij mee spelen. Combineer bijvoorbeeld een afbeelding met een paragraaf om eenvoudig tekst naast een afbeelding te plaatsen.

Groepen groeperen 

Je kunt groepen ook groeperen. Selecteer de groep met paragrafen uit het voorbeeld hierboven en een afbeelding en kies vervolgens voor Stapelen. De nieuwe groep die je zo maakt, bestaat uit een afbeelding met daaronder twee kolommen tekst. Je deze groep als geheel vormgeven met de opties in het rechterkader, en je kunt individuele blokken aanpassen door ze los te selecteren.  

Groepen opheffen of vergrendelen

Als je een groepering wilt opheffen, klik je in Lijstweergave op de drie puntjes achter die groep en kies je voor ‘Groeperen opheffen’. In datzelfde menu staat ook de optie ‘Vergrendelen’. Hiermee voorkom je dat je die groep (of onderdelen daarvan) per ongeluk versleept. 

Groepen vaker gebruiken

Heb je een mooie indeling met groepen gemaakt en wil je die vaker gebruiken? Maak er dan een patroon van. Klik op de drie stippen naast de groep en kies ‘Patroon aanmaken’. Geef dit patroon een naam en voeg eventueel tags toe om het vindbaarder te maken. 

Wil je het nieuwe patroon overal eenvoudig kunnen aanpassen? Laat dan het vinkje voor gesynchroniseerd staan. Als je op één plek iets in dit patroon wijzigt, dan voert Gutenberg die verandering overal door. Dat is handig als je een standaard blok zoals een contactblok maakt. 

Ga je de groep gebruiken als vormgevingselement? Bijvoorbeeld om tekstkaders vorm te geven? Synchroniseer dan niet, anders staat in al je kaders de tekst die je in je laatste bericht hebt getypt. 

Patronen gebruiken

Patronen vind je op hun eigen tabblad. Dit staat naast het overzicht van standaardblokken. Behalve eigen patronen, kun je hier ook standaardpatronen van jouw thema vinden en andere patronen van internet ophalen. 

Overstappen op een page builder

Gutenberg kan veel, maar het blijft een blokeditor. Wil je meer controle over de vormgeving van jouw website? Stap dan over op een page builder. Daarmee kun je elementen toevoegen aan pagina’s én de vormgeving en lay-out van je thema aanpassen. De drie meest gebruikte page builders zijn Elementor, WPBakery en Divi.

Elementor

Meer dan 12 miljoen websites gebruiken Elementor. Dit succes steunt onder meer op de eenvoudige bediening en een zeer complete, gratis versie. Met Elementor boek je snel resultaat, maar kun je ook geavanceerde websites bouwen. 

WPBakery Page Builder

WPBakery is één van de oudste en bekendste page builders voor WordPress. Veel premium WordPress thema’s, vooral van ThemeForest, gebruiken WPBakery. Alhoewel deze Page Builder wat op de concurrentie achterloopt, gebruiken veel (oudere) sites hem nog steeds. 

Divi

Divi is niet alleen een page builder, het bevat ook een grote selectie thema’s. Met één alles-in-één abonnement bouw je snel mooie websites. Vooral minder technische gebruikers kiezen voor Divi omdat ze zo twee grote beslissingen (thema en page builder) in één keer kunnen nemen.

Wat doet jouw website met blokken en groepen?

Gebruik jij al blokken en groepen om je website nog mooier te maken? Met Gutenberg zet je WordPress moeiteloos naar je hand. Het enige dat je nodig hebt is een goed idee, een up-to-date installatie én een uitstekende WordPress-host. Die eerste twee factoren heb je zelf in de hand; de beste WordPress host vind je hier.