In 2018 is Gutenberg blokken geïntroduceerd als standaard editor voor WordPress. Het betekende niet dat de klassieke editor verdwenen is, je kunt het nog steeds gebruiken. Maar de vervanger van de klassieke editor biedt vele mogelijkheden en is met zijn blokken meer dan alleen een teksteditor, het is de standaard pagebuilder voor WordPress.
De Gutenberg blokken
In het begin was het erg wennen aan de Gutenberg blokken. Maar alles wat nieuw is is natuurlijk wennen. Zelf was ik andere pagebuilders als WP bakery en Elementor gewend, maar vond na een tijdje dat het nodig was me erin te verdiepen. Ook omdat veel klanten het eerder al hadden gebruikt en dus moesten er ook websites worden gebouwd in met Gutenberg.
Waarom Gutenberg gebruiken?
Het gebruik van de Gutenberg Blocks in WordPress biedt meerdere voordelen ten opzichte van de klassieke editor en externe paginabouwers zoals Elementor. Hier zijn enkele redenen waarom je Gutenberg zou overwegen:
Voordelen Gutenberg blokken
- Blokken/elementen voor je pagina opbouw
- Makkelijk uit te breiden met add-ons
- Gebruiksvriendelijk
- Responsive blokken
- Relatief weinig codes dus snelle laadtijden
- Volledige sitebewerking (dus ook header en footer)
Hoe werkt Gutenberg blokken?
Gutenberg blocks is het beste te vergelijken met Elementor. Je maakt een container, verdeeld het eventueel in kolommen en voegt er inhoud door middel van bijvoorbeeld tekstblokken er aan toe. Al is Gutenberg wel meer dan alleen maar een paginabouwer. Je kunt de elementen ook gebruiken voor je header, footer en voor je wigdets die je gebruikt voor je sidebar. Hier een aantal voorbeelden wat je met Gutenberg blokken kunt doen.
Veel gebruikte Gutenberg blokken
Kolommen toevoegen aan je pagina
Kolommen gebruik je vaak om je content in een pagina te ordenen, in bijvoorbeeld een “grid”. Meerdere kokommen maken in Gutenberg is redelijk eenvoudig. Dit zijn de stappen die je kunt volgen;
De stappen
- Klik op het + icoon
- Zoek met het zoekveldje naar kolommen
- Voeg het blok toe
- Kies de indeling die je wilt gebruiken
- Voeg inhoud toe aan elke kolom
Voorbeeld van de kolommen verdeling
Content toevoegen met een tekstblok
Voorbeeld van een tekstblok in Gutenberg
Het toevoegen van content in Gutenberg doe je met de tekstblok. Deze voeg je toe op dezelfde wijze als de andere blokken, Wanneer je eenmaal een tekstblok hebt toegevoegd kun je de content erin plaatsen. Hierin kun je layout wijzigen met de teksteditor van dit blok, zoals lettergroottes enachtergrond. De editor vind je aan de rechterkant, wanneer je bezig bent met bewerken in dit tekstblok.
Koptekst toevoegen
Eem koptekst, ook wel “heading” genoemd is vaak een titel van een pagina of alinea. Gutenberg heeft ook hier een een element voor gemaakt die je weer op dezelfde manier toevoegt als andere elementen. Je sleept het blok boven het stukje tekst en kiest vervolgens welke koptekst je wilt. Zo bouw je structuur in je pagina en leest is het voor de lezer makkelijker om te scannen.
Hiërarchische volgorde van kopteksten
- h1 (titels van de pagina)
- h2 (subtitel 2)
- h3 (subtitel 3)
- h4 (subtitel 4)
- h5 (subtitel 5)
- h6 (subtitel 6)
Voorbeeld van het koptekstblok
Knop maken met Gutenberg
Voorbeeld van een call to action button
Wanneer je tevreden bent met je tekst in je pagina wil je je bezoekers misschien ook verwijzen naar bijvoorbeeld je contant pagina. Dit noemt men een call to action button. Dit kan bepalend zijn voor de bezoeker om een drempel te passeren. Zorg dus voor goed en duidelijke call to cations. Met het knop element kun jij je button toevoegen aan bijvoorbeeld een kolom. Aan de rechterkant kun je het bewerken, zoals het toevoegen van een link of achtergrondkleur.
Fotogalerij toevoegen aan je pagina
Wanneer je een fotogalerij wilt maken zoek je onder het plusje naar een “galerij blok”. Met deze blok kun je eenvoudig een foto-galerij maken. Je kunt je afbeeldingen uploaden vanuit je media bibliotheek of vanaf je computer.
Opties voor je foto galerij
- Aantal kolommen
- Afbeeldingen bijsnijden (aan/uit)
- Links: geen, mediabestand of bijlagepagina
- Alternatieven tekst (seo)
- Rechthoekige of ronde hoeken
Voorbeeld fotogalerij in Gutenberg
Add-ons voor je foto galerij
Wil je een meer geavanceerde fotogalerij voor je WordPress website? Dan is het mogelijk add-ons te gebruiken. Hier zijn een aantal goede toevoegingen om een perfecte fotogalerij te maken.
Bekijk hoe je een fotogalerij maakt in de video
Gutenberg features
Wanneer je meer geavanceerde blokken wilt toevoegen voor bijvoorbeeld je fotogalerij, sliders en grids kun je kijken naar goede addons voor je paginabouwer Gutenberg. Zo kun jij je website layout en functionaliteiten helemaal naar je hand zetten.
Enkele bekende add-ons voor Gutenberg
Gutenberg samengevat
Voor degene die nog maar kort met Gutenberg werkt is het even wennen. Maar Gutenberg werkt snel, effectief en het SEO en mobiel vriendelijk. Dus meer dan genoeg redenen om je er meer in te verdiepen. Al zijn er natuurlijk altijd nog pagebuilders die erg populair zijn zoals Elementor en WP bakery die je zeker niet hoeft te negeren wanneer je er veel mee werkt. Maar minder plugins scheelt betekent ook minder technisch onderhoud van je WordPress website. Leer meer met mijn elearning over WordPress en Gutenberg
Gutenberg blokken samengevat in deze video
Klassieke editor gebruiken
Wil je na het lezen van deze blog om wat voor redenen nog steeds je klassieke WordPress editor gebruiken? Dat kan natuurlijk. Je kunt dit eenvoudig instellen met bijvoorbeeld de gratis plugin disable gutenberg.
