Les 4: De Blok Editor — zo werkt Gutenberg

Sinds 2018 werkt WordPress met de zogenaamde Blok Editor, ook wel Gutenberg genoemd. In het begin was er veel gemor over: “het was vroeger makkelijker”. En eerlijk gezegd hadden de criticasters een punt. De eerste versies waren ruw. Maar inmiddels is de Blok Editor volwassen geworden en het is gewoon de manier waarop WordPress werkt.

Dus: leer hem goed kennen. Het loont.

Het idee achter blokken

Vroeger was de WordPress editor één grote tekstvlak — vergelijkbaar met Word. Alles in één rij, alles achter elkaar.

De Blok Editor werkt anders: elke alinea, elke afbeelding, elke kop en elke knop is een apart blok. Je kunt blokken:

• Toevoegen met de + knop
• Verslepen naar een andere positie
• Individueel opmaken (kleur, grootte, uitlijning)
• Kopiëren, dupliceren of verwijderen

Het resultaat is dat je veel meer visuele controle hebt over je pagina, zonder dat je één regel code hoeft te schrijven.

De interface

Als je een pagina of bericht opent in de editor, zie je het volgende:

• Linksboven: de + knop om nieuwe blokken toe te voegen, en navigatieknoppen
• Midden: je inhoud — dit is wat de bezoeker ook ziet
• Rechterzijbalk: instellingen voor het geselecteerde blok of de hele pagina
• Rechtsboven: de Publiceren/Opslaan knop

De meest gebruikte blokken

Alinea

Het standaardblok. Als je begint te typen na een lege regel, maak je automatisch een nieuw alinea-blok. Je kunt tekst vetgedrukt, cursief of als link opmaken via de zwevende werkbalk die verschijnt als je tekst selecteert.

Kop (Heading)

Gebruik koppen (H2, H3, H4) om je tekst structuur te geven. H1 is de paginatitel — die gebruik je maar één keer en WordPress vult die automatisch in vanuit de titelbalk. Begin je inhoudskoppen dus bij H2.

Afbeelding

Upload een afbeelding of kies er een uit je mediabibliotheek. In de rechterzijbalk kun je de alt-tekst invullen (altijd doen!) en de uitlijning instellen.

Lijst

Voor opsommingen — zowel met bolletjes als genummerd. Gebruik ze voor instructies of voordelen, maar overdrijf het niet: een pagina vol lijstjes leest moeilijk.

Knop (Button)

Een klikbare knop om bezoekers ergens naartoe te sturen. Handig op een homepagina of dienstenpagina. Je kunt de kleur, tekst en het doeladres instellen.

Kolommen

Verdeel je pagina in twee of meer kolommen. Elk kolom is zelf een container waar je andere blokken in kunt plaatsen. Zo maak je bijvoorbeeld een lay-out met een afbeelding links en tekst rechts.

Handige snelkoppelingen

De editor heeft een aantal snelkoppelingen die je flink wat tijd besparen:

• Enter — nieuw alinea-blok
• Shift + Enter — nieuwe regel binnen hetzelfde blok
• / aan het begin van een leeg blok — snel een bloktype zoeken
• Ctrl + Z — ongedaan maken
• Ctrl + Shift + Z — opnieuw

Patroonblokken en herbruikbare blokken

Heb je een lay-out die je vaker wilt gebruiken — bijvoorbeeld een call-to-action met een knop en een stukje tekst? Sla het op als patroon. Dan kun je het met één klik op elke pagina opnieuw invoegen.

Dit is een van de krachtigste functies van de moderne Blok Editor. Gebruik hem.

En page builders dan?

Je hebt misschien gehoord van tools als Elementor of Divi. Dit zijn zogenaamde page builders — plugins die de standaard editor vervangen met een nog uitgebreidere drag-and-drop interface.

Voor beginners zijn ze verleidelijk, maar er zijn serieuze nadelen:

• Ze maken je site zwaarder en langzamer
• Je content raakt gebonden aan die specifieke builder
• Updates kunnen soms voor problemen zorgen

Advies: Leer eerst de standaard Blok Editor goed kennen. Die is inmiddels krachtig genoeg voor de meeste sites. Een page builder is voor later — als je echt iets nodig hebt wat de standaard editor niet kan.

Opdracht

Open de pagina die je in de vorige les hebt gemaakt (“Over mij” of “Diensten”) en bouw hem verder uit. Gebruik minimaal:

• Twee koppen (H2 en H3)
• Eén afbeelding
• Eén knop die linkt naar je contactpagina
• Een kolommenblok met tekst naast een afbeelding

Sla op en bekijk het resultaat op je live site. Zo ziet een echte pagina eruit.