Gutenberg WordPress: Beginners handleiding

Vandaag laat ik je zien hoe de Gutenberg editor in WordPress werkt.
Toen ik jaren geleden mijn eerste WordPress website maakte zag de editor in WordPress er zo uit:

In 2018 met de update van WordPress 5.0 veranderde dit allemaal. De nieuwe editor, genaamd Gutenberg, werd de nieuwe manier om content te beheren.

Zoals met alle nieuwe dingen was dit erg wennen. Het was echter mogelijk om met een plugin de klassieke editor te gebruiken. Ik begreep de Gutenberg editor destijds niet helemaal en de keuze om de oude vertrouwde editor te gebruiken was dan ook snel gemaakt.

Na verloop van tijd ontwikkelde Gutenberg zich steeds meer en zag ik in dat Gutenberg de toekomst van WordPress is en inmiddels ook al het heden. Ik besloot daarom alsnog gebruik te maken van de nieuwe editor en mij hier in te verdiepen.

Inmiddels gebruik ik Gutenberg op al mijn websites en heb ik ervaren hoe krachtig deze editor is. Achteraf was Gutenberg helemaal niet lastig maar bleef ik te lang vasthouden aan iets vertrouwds.

Na het volgen van deze handleiding ben je in staat om content toe voegen in WordPress en de pagina’s en berichten een mooi design te geven.

Inhoudsopgave

  1. Hoe ziet Gutenberg eruit?
  2. Blokken toevoegen in Gutenberg
  3. Patronen toevoegen in Gutenberg
  4. Werken met blokken in Gutenberg
  5. Meer blokken toevoegen met Gutenberg plugins

1. Hoe ziet Gutenberg eruit?

Eerst zal ik kort toelichten hoe Gutenberg eruit ziet en waar je wat kan instellen. Zodra je een pagina of bericht opent wordt de Gutenberg editor geopend.

Dat ziet er als volgt uit:

  1. Gutenberg werkt met ‘blokken’ (later zal duidelijk worden wat dit precies inhoudt). Door op het plusteken te klikken kan je nieuwe blokken toevoegen.
  2. Hiermee kan je acties ongedaan maken of opnieuw doen.
  3. Hier kan je meer details over de desbetreffende bericht/pagina vinden zoals bijvoorbeeld het aantal woorden waaruit de pagina/bericht bestaat.
  4. Hier kan je de lijstweergave van de blokken vinden. Dit is handig om een gewenst blok te selecteren.
  5. Hier kan je de titel typen.
  6. Hier kan je tekst typen of een blok toevoegen (door op het plusteken te klikken).
  7. Als je een bericht of pagina hebt gemaakt kan je door op ‘voorbeeld’ te klikken zien hoe het is geworden en indien goed online zetten door het te ‘publiceren’.
  8. Door op de 3 puntjes te klikken kan je instellen hoe de editor eruit ziet.
  9. Hier kan je de pagina (of bericht) instellingen doen zoals een categorie bepalen, een uitgelichte afbeelding instellen, reacties aan/uit zetten en meer.
  10. Hier kan je de instellingen doen van een geselecteerd blok. Verschillende blok types hebben verschillende instelmogelijkheden.

2. Blokken toevoegen in Gutenberg

Gutenberg werkt op basis van blokken. Je kan een of meerdere blokken toevoegen aan een pagina.
Door op het plus-teken te klikken voeg je een blok toe:

Daarna opent zich aan de linkerkant een scherm waar je een blok kan uitkiezen.

Hieronder zal ik de blokken toelichten die het meest van pas komen.

Paragraaf

Dit is een eenvoudig blok waar je tekst kan typen. Aan de rechterkant kan je bij de blokinstellingen de grootte van het lettertype bepalen, de tekstkleur en de achtergrondkleur van het blok.

Kolommen

Met behulp van dit blok kan je een blok in meerdere kolommen indelen.

Als je bijvoorbeeld op 50/50 klikt krijg je 2 kolommen. Door op het plusje binnen het kolom te klikken, kan je een blok aan de gemaakte kolom toevoegen:

Zodra je het blok met kolommen selecteert kan je de instellingen van de kolommen aan de rechterkant aanpassen, bijvoorbeeld door het aantal kolommen te veranderen.

Je kan een blok gewoon zo proberen te selecteren door erop te klikken. Zelf maak ik graag gebruik van de lijstweergave:

Zodra je het blok met de kolommen selecteert, kan je aan de rechterkant de instellingen van het blok bepalen.

Als je 1 kolom selecteert (dat kan ook weer via de lijstweergave) dan kan je de instellingen van dat specifieke kolom bepalen, bijvoorbeeld de breedte aanpassen:


Kop

Met het blok kop kan je koppen toevoegen aan je teksten.
Het is belangrijk voor de leesbaarheid voor zowel de bezoekers van je website als zoekmachines zoals Google om gebruik te maken van koppen.

Dit werkt het zelfde als bijvoorbeeld in Word. Je kan kiezen uit H1 t/m H6.
De titel van je pagina is een H1 kop. Het is aan te raden om maar 1 H1 kop per pagina te gebruiken.

Aan de rechterkant kan je vervolgens de typografie- en kleurinstellingen doen.

Afbeelding

Met het blok afbeelding kan je een afbeelding toevoegen. Om een nieuwe afbeelding up te loaden vanaf je computer klik je op ‘uploaden’. Als je dat al eens eerder heb gedaan kan je de afbeelding opzoeken in de mediabibliotheek.

Galerij

Het is met de Galerij blok erg eenvoudig om een mooie galerij te maken in WordPress.

Nadat je een aantal foto’s hebt upgeload of geselecteert in de mediabibliotheek klik je op ‘Een nieuwe galerij aanmaken’.

Daarna kan je eventueel de volgorde aanpassen door de afbeelding te verslepen. Klik vervolgens rechtsonder op ‘Galerij invoegen’.

Als je het blok selecteert kan je daarna bij de blokinstellingen instellen hoeveel kolommen je wilt, waar de afbeeldingen naar moeten linken als je erop klikt en de grootte van de afbeeldingen bepalen.

Knoppen

Met dit blok kan je eenvoudige knoppen toevoegen aan je website.

Bij de blokinstellingen kan je daarna de stijl van de knop bepalen,

Door op onderstaande knop te klikken kan je instellen naar welke pagina de knop moet doorlinken:

Lijst

Met het blok lijst kan je eenvoudig een opsomming aan je tekst toevoegen.

Media & tekst

Met dit blok kan je eenvoudig een een afbeelding naast een tekst weergeven.

Door in de lijstweergave ‘Media & tekst’ te selecteren kan je de instellingen van het blok aanpassen. Wil je bijvoorbeeld de grootte van het lettertype aanpassen, dan moet je in de lijstweergave op ‘Paragraaf’ klikken:

Tabel

Met Gutenberg kan je eenvoudig een tabel maken in WordPress zonder dat je een plugin hoeft te gebruiken.

Klassiek

Als je de oude editor toch prettiger vond werken dan kan je dit ook als blok toevoegen. Zo kan je alsnog de klassieke editor te gebruiken wanneer je dat wilt en tegelijkertijd alle voordelen van Gutenberg benutten.

Video

Met het video blok kan je eenvoudig video’s uploaden naar je eigen website en deze vervolgens tonen in het blok.

Youtube video’s

Met dit blok kan je video’s die op Youtube zijn upgeload eenvoudig weergeven.

Citeren

Met het ‘citeren’ blok kan je citaten weergeven maar je kan het ook gebruiken om een bepaalde tekst uit te lichten.

Pull quote

Dit werkt het zelfde als citeren, maar legt nog wat meer nadruk om je citaat.

Omslagafbeelding

Het omslag blok kan je gebruiken om een afbeelding weer te geven, bijvoorbeeld een header, met een tekst er overheen. Ook is het mogelijk om in plaats van een afbeelding een achtergrondkleur te gebruiken.

Je kan aan de onderkant eenvoudig de grootte van de omslag aanpassen door de omslag te verslepen of door bij de blokinstellingen de minimumhoogte aan te passen.

Shortcode

Met dit blok kan je eenvoudig shortcodes aan je pagina toevoegen. Als je bijvoorbeeld een contactformulier hebt gemaakt met een plugin genereert WordPress een shortcode om het contactformulier op een gewenste pagina weer te geven. Die shortcode kan je dan dus via dit blok weergeven.

HTML

In dit blok kan je eigen HTML schrijven.

Scheidingslijn

Hiermee voeg je een scheidingslijn tussen 2 alinea’s, dat ziet er als volgt uit:

Vulelement

Als blokken te dicht op elkaar staan, bijvoorbeeld een blok met tekst en een afbeelding, dan kan je daar een vulelement aan toevoegen.

Je kan de hoogte van het vulelement eenvoudig verslepen aan de onderkant of bij de blokinstellingen de hoogte in pixels aanpassen.

Voor deze handleiding (tot nu toe) is alleen gebruikt gemaakt van de blokken ‘Koppen’, ‘Paragraaf’, ‘Afbeelding’ en ‘Vulelement’.

3. Patronen toevoegen in Gutenberg

In Gutenberg kan je ook gebruik maken van patronen. Dit zijn soort vooraf ingestelde blokken.

Stel je wilt een tekst weergeven in twee kolommen. Dan kan je eerst het blok met kolommen toevoegen en daarna in de kolommen een blok met paragraaf.

Een andere manier is om op het plusteken te klikken en te kiezen voor het tabblad patronen.

Je hebt dan de keuze uit een aantal opties, in dit geval kies je dus voor ‘Kolommen’.

Daarna hoef je alleen nog het patroon te kiezen die je mooi vindt. Op deze manier kan je snel een pagina met een mooi lay-out maken.

Op dit moment is de keuze wat betreft patronen nog wel beperkt. Tijdens het schrijven van deze handleiding is de functie van patronen nog niet zo lang beschikbaar, dus ik ga er vanuit dat er in de toekomst wel meer patronen beschikbaar worden.

4. Werken met blokken in Gutenberg

Je weet nu wat voor soort blokken er zoal allemaal te gebruiken zijn met Gutenberg. Nu ga je leren hoe je met deze blokken kan gaan werken.

Nieuwe blokken toevoegen

Er zijn een aantal manieren om een blok toe te voegen aan je pagina.

De eerste manier is om op 1 van onderstaande plustekens te klikken:

Een andere manier is door / te typen gevolgd door het blok dat je wilt toevoegen.

Stel je hebt een pagina gemaakt bestaande uit een blok met tekst (paragraaf) en een blok met een afbeelding. Je besluit dat je een blok tussen het blok met tekst en de blok met de afbeelding wilt plaatsen.

Je selecteert dan de bovenste blok en klikt op het plusje dat verschijnt tussen de twee blokken.

Je kan dan vervolgens een blok naar keuze tussen de tekst en de afbeelding plaatsen, bijvoorbeeld een vulelement als je de afbeelding te dicht op de tekst vindt staan. Wil je een blok onder de afbeelding plaatsen, dan klik je gewoon op het plusje rechtsonderin.

Blokken verplaatsen

Als je pagina uit meerdere blokken bestaat is het ook erg eenvoudig om de blokken van volgorde te veranderen.
Selecteer eerst het gewenste blok en klik daarna op de 6 puntjes (zie afbeelding hieronder) en versleep de blok naar een andere plek.

Je kan ook de pijltjes ernaast gebruiken om een blok naar beneden/boven te verplaatsen.

Blokken verwijderen

Om een blok te verwijderen selecteer je het blok en klik je daarna op de 3 puntjes. Klik vervolgens op ‘verwijder blok’:

Blokken dupliceren

Het is ook mogelijk om een blok te dupliceren. Dit doe je door het blok te selecteren en weer op de 3 puntjes te klikken en daarna op ‘Dupliceren’.

Ik gebruik dit zelf vaak om tijd te besparen. Als ik bijvoorbeeld in een kolom meerdere blokken wil weergeven die op dezelfde manier zijn opgemaakt, dan maak ik 1 blok en dupliceer deze vervolgens om daarna alleen de inhoud te hoeven veranderen.

Blokken hergebruiken

Naast dupliceren is het ook mogelijk om blokken her te gebruiken op andere pagina’s.

Stel je hebt een bepaald blok gemaakt met informatie die je op meerdere pagina’s wilt gebruiken. In plaats van het blok steeds opnieuw te maken kan je het ook aan herbruikbare blokken toevoegen (door het blok te selecteren en op de 3 puntjes te klikken).

Als je vervolgens een nieuw blok wilt toevoegen (door op het plusje te klikken) is er het tabblad ‘Herbruikbaar’ bij gekomen:

Je kan vervolgens het opgemaakte blok gelijk toevoegen zonder dit opnieuw te hoeven opmaken.

Als je vervolgens de inhoud van het ‘hergebruikte blok’ aanpast, zal dit op iedere pagina worden bijgewerkt waar je dit blok hebt geplaatst.

Als dat niet de bedoeling is, dan kan je het blok op de desbetreffende pagina omzetten in een regulier blok. Het blok zal dan nog wel het zelfde eruit zien, maar als je er dingen aan veranderd zal dit alleen veranderen op de pagina waarin je aanpassingen hebt gedaan. Het werkt dan in feite als een gewoon blok, behalve dat je dus begint met een ‘opgemaakt’ blok.

De lay-out kopiëren naar een andere pagina

Het is eenvoudig om de lay-out van een pagina gemaakt met blokken te kopiëren naar een nieuwe pagina.
Klik rechtsboven op de 3 puntjes en klik daarna op ‘Kopieer alle inhoud’:

Je kan vervolgens de inhoud van de pagina op een nieuwe pagina plakken (CTRL + V).

Het is zelfs mogelijk om de inhoud van een pagina naar een pagina op een compleet andere website te kopiëren. Het is daarbij wel belangrijk dat beide websites dezelfde blokken gebruiken.

Dat kan je controleren door op de 3 puntjes te klikken en daarna naar ‘Blokbeheerder’ te gaan.

Het is dan belangrijk dat op beide website dezelfde blokken staan aangevinkt die gebruikt worden op de pagina die je kopieert.

De klassieke editor converteren naar blokken

Als je een website hebt waarin je nog gebruik maakt van de klassieke editor, net zoals ik vroeger deed, dan kan je dit eenvoudig om zetten in blokken.

Je hebt bijvoorbeeld een pagina met tekst en een afbeelding.

Als je dit laten converteren naar blokken krijg je een blok met paragraaf en een blok met de afbeelding

En vanaf dan kan je voortaan je website ook opmaken op basis van blokken.

5. Meer blokken toevoegen met Gutenberg plugins

Standaard zit in WordPress de blokken die we hebben behandeld zoals paragraaf, afbeelding, kolommen, tabel, etc.
Je kan hier mooie pagina’s mee opmaken. Wil je echter je hele website met blokken maken, dan biedt dit wellicht wat weinig mogelijkheden.

Gelukkig zijn er veel gratis (en betaalde) plugins waarmee je het aantal blokken kan vergroten en ook de instelmogelijkheden.

Ik maak zelf al een lange tijd alleen gebruik van de plugin GenerateBlocks. Met deze gratis plugin maak ik al mijn websites en kan ik dan ook oprecht aanraden. De overige plugins die ik hieronder in willekeurige volgorde ga behandelen heb ik enkel kort uitgeprobeerd voor het schrijven van deze handleiding en ik heb de websites van de ontwikkelaars van deze plugins gelezen.

Indien gewenst wil ik wel aparte uitgebreide handleidingen schrijven per plugin. Hiervoor zal ik dan wel voor een langere periode de desbetreffende plugin uit moeten proberen. Ik hoor graag of hier behoefte naar is.

Ik ga er vanuit dat je weet hoe je een nieuwe plugin moet installeren (zo niet, lees dan deze handleiding). Nadat je een of meerdere van de onderstaande plugins hebt geïnstalleerd verschijnen deze als optie nadat je op het plusje hebt geklikt om een nieuw blok toe te voegen.

GenerateBlocks

GenerateBlocks is de plugin die ik zelf gebruik. Het is een hele minimalistische plugin die slechts 4 blokken toevoegd: contrainer, grid, headline en buttons.

Met enkel deze 4 blokken kan je echter complete websites maken. Het werkt verder perfect samen met mijn favoriete WordPress thema, GeneratePress, omdat het door dezelfde makers is ontwikkeld. Binnenkort zal ik een handleiding over deze plugin schrijven.

Prijs: gratis

Genesis Blocks

Een van mijn eerste premium thema’s kocht ik van StudioPress. Zij maken kwalitatief erg goede thema’s dus toen ik zag dat zij ook een Gutenberg plugin hadden gemaakt wou ik die meteen uitproberen.

Hun plugin heet Genesis Blocks en heeft zowel een gratis als betaalde versie.
De gratis versie kan je eenvoudig downloaden in je dashboard en biedt ongelooflijk veel functies.

Na het installeren van deze plugin komen er bijvoorbeeld 14 nieuwe blokken bij:

Het mooiste van deze plugin vind ik de layouts. Dit zijn soort ‘voor gestylde’ blokken.
Zo zijn er in de gratis versie 21 ‘sections’:

Wil je bijvoorbeeld een pagina met daarop je personeel maken, dan kies je een sectie uit en je pagina krijgt een door hun opgemaakt blok toegevoegd.

Dit blok is gemaakt met hun ‘Advanced Colomn’ blok, die je zelf ook had kunnen kiezen als je op het plusje had geklikt. Het bespaart echter veel tijd op deze manier en je kan eenvoudig de tekst en afbeeldingen veranderen en eventueel de blokinstellingen aanpassen.

Naast ‘sections’ zijn er ook 9 ‘layouts’. Dit zijn complete pagina’s bestaande uit meerdere opgemaakte blokken:

Ik denk dat de gratis versie voor de meeste mensen ideaal is. Ze hebben echter ook een betaalde versie: Genesis Blocks Pro.
Je krijgt bij de betaalde versie nog meer blokken en meer ‘sections’ en ‘layouts’. Daarnaast krijg je ook toegang tot hun premium WordPress thema’s.

Prijs: er is een gratis versie en een betaalde versie ($360 per jaar)

Kadence blocks

Een andere populaire plugin is Kadence Blocks. Deze plugin is wat uitgebreider dan de vorige 2 opties. Zo biedt het 12 extra blokken toe:

Verder heeft deze plugin ook een ‘pre built library’ met 32 mooie opgemaakte blokken en 1 ‘starterpack’ waarin een gehele pagina is opgemaakt:

Zo kan je met 1 klik een prachtige header importeren en deze vervolgens eenvoudig aanpassen naar wens.

Prijs: Gratis en er is een betaalde versie (Kadence Blocks Pro) voor $59 per jaar waarmee je toegang tot extra blokken krijgt.

Kioken

Kioken biedt een uitgebreid aantal blokken toe aan Gutenberg (19) en meerdere ‘pre built block templates’.

Je kan met deze blokken, zonder technische kennis, heel snel mooie websites maken. Zo heb je bijvoorbeeld met de gratis versie met 1 klik onderstaande header als blok toegevoegd. Daarna kan je de tekst (en eventueel de afbeelding) heel eenvoudig veranderen en bij de blokinstellingen aanpassen indien nodig.

Ik vind hun templates mooi maar persoonlijk hou ik wat meer van een meer minimalistische stijl .

Prijs: Gratis en een betaalde versie met meer ‘pre built templates’ voor $29,99 per jaar.

Stackable

Stackable is nog weer wat uitgebreider dan de vorige opties. Deze plugin voegt 27 exta blokken toe aan Gutenberg:

Verder heeft deze plugin een nog uitgebreidere design liberary. Bij de gratis versie heb je keuze uit 89 opgemaakte blokken en bij de premium versie komen daar nog 264 blokken bij.

Het is eenvoudig om blokken te importeren en deze daarna aan te passen:

Prijs: Gratis en er is een betaalde versie die $49 per jaar kost.

Nog meer blokken

In deze handleiding heb ik 5 plugins behandeld die ik goed vind, maar er zijn er nog veel meer.
Als je bij ‘nieuwe plugins’ op Gutenberg zoekt vind je genoeg opties.

Ik raad aan om met een gratis plugin te beginnen. Voor de meeste mensen zal dat voldoende zijn en eventueel kan je later altijd nog een premium versie nemen.

Let ook goed op de reviews als je een plugin uitzoekt.

Welke plugin voor jou het meest geschikt is hangt volledig af van je voorkeuren. Ik gebruik zelf graag GenerateBlocks omdat ik daar genoeg aan heb en het een lichtgewicht plugin is. Het duurt niet lang tot je deze plugin onder de knie hebt.

Als je echter niet precies weet wat je wilt gaan bouwen, dan kan een plugin met ‘pre built templates’ een betere optie zijn. Dan is het gewoon een kwestie van een blok importeren en deze wat aanpassen. In dat geval gaat mijn voorkeur uit naar Genesis Blocks, omdat ik het mooie en eenvoudige designs vind.

De overige opties die ik heb behandeld vind ik zelf te uitgebreid en bieden allerlei functies die ik nooit nodig heb. Als je meer opties en designs wilt zijn Kandece Blocks, Kioken en Stackable wellicht meer geschikt voor jou.

Je hoeft natuurlijk geen plugin te installeren. Als Gutenberg zelf al genoeg heeft te bieden voor jou dan is dat natuurlijk helemaal prima.
Maar mocht je behoefte hebben aan meer blokken, dan raad ik je aan om gewoon een aantal gratis plugins uit te proberen. Kijk welke je fijn vindt werken en welke designs je het mooiste vindt.

Einde van de handleiding

Ik heb geprobeerd alles te behandelen en tegelijkertijd het niet te ingewikkeld te maken. Probeer Gutenberg eens uit en laat het mij weten mocht je ergens tegen aanlopen dat nog ontbreekt in deze handleiding.

De Klassieke editor plugin, waarmee je terug gaat naar de oude editor waarmee ik deze handleiding begon, is 1 van de populairste plugins met meer dan 5 miljoen actieve installaties.

Ik denk echt dat dit komt omdat veel mensen Gutenberg niet fijn vinden werken. Ik was daar ook ooit 1 van, maar ik ben nu volledig overtuigd van dat Gutenberg de toekomst (en het heden) van WordPress is en dat het alleen nog maar beter wordt.

Een andere populaire plugin met meer dan 5 miljoen installaties is Elementor Website Builder. Dit is een pagebuilder waarmee je pagina’s kan maken. Ook deze plugin heb ik ooit uitgeprobeerd toen de klassieke editor mij niet goed opties gaf en ik nog niet over wou gaan op Gutenberg. Maar Gutenberg is zo veel flexibeler en maakt je website sneller en toekomstbestendiger dan welke pagebuilder dan ook.

Ik hoop dat ik met deze handleiding je heb overtuigd om Gutenberg eens uit te proberen.
Mocht je nog vragen hebben dan kan je dat hieronder laten weten.

Plaats een reactie