WordPress Gutenberg Blokken: Complete Handleiding voor de Block Editor [2025]

Sinds WordPress 5.0 is Gutenberg de standaard editor. In plaats van één groot tekstveld werk je nu met blokken - individuele elementen die je kunt toevoegen, verplaatsen en aanpassen. In deze uitgebreide handleiding leer je alles over Gutenberg blokken.

Wat is Gutenberg?

Gutenberg is de block-based editor van WordPress, vernoemd naar Johannes Gutenberg, de uitvinder van de drukpers. De editor transformeert hoe je content maakt door alles op te splitsen in herbruikbare blokken.

Waarom Blokken?

Flexibiliteit: Elk element (tekst, afbeelding, video) is een apart blok dat je onafhankelijk kunt bewerken.

Visueel bewerken: Je ziet direct hoe de pagina eruit komt te zien.

Herbruikbaarheid: Maak blokken die je op meerdere pagina's kunt gebruiken.

Geen code nodig: Complexe layouts maken zonder HTML of CSS kennis.

Moderne standaard: Steeds meer thema's en plugins zijn gebouwd rond blokken.

De Basis: Werken met Blokken

Een Blok Toevoegen

Er zijn meerdere manieren om een blok toe te voegen:

1. Plus-knop: Klik op de blauwe + knop
2. Slash commando: Typ / gevolgd door de bloknaam
3. Enter: Na een alinea, druk Enter voor een nieuw blok

Blok Verplaatsen

• Drag & drop: Pak het blok vast en sleep
• Pijltjes: Gebruik de omhoog/omlaag pijlen in de toolbar
• Lijst weergave: Open de lijst weergave (drie horizontale lijnen) voor drag & drop overzicht

Blok Verwijderen

1. Selecteer het blok
2. Klik op de drie puntjes (meer opties)
3. Kies "Verwijderen" of gebruik de Delete toets

Blok Dupliceren

1. Selecteer het blok
2. Drie puntjes → "Dupliceren"
3. Of gebruik Ctrl/Cmd + Shift + D

Essentiële Blokken

Tekst Blokken

Alinea Het basis tekstblok. Features:

• Tekstgrootte aanpassen
• Initieel (drop cap)
• Achtergrondkleur
• Tekstkleur

Kop Voor H1-H6 headings. Tips:

• Gebruik H1 slechts één keer per pagina
• Volg logische hiërarchie (H2, dan H3, etc.)

Lijst Ongeordend (bullets) of geordend (nummers):

• Nested lijsten mogelijk
• Conversie tussen types

Citaat Voor quotes met optionele bronvermelding.

Code Voor code snippets met monospace font.

Media Blokken

Afbeelding

• Upload, mediabibliotheek, of URL
• Alt-tekst voor SEO en toegankelijkheid
• Bijschrift toevoegen
• Link opties
• Diverse stijlen (afgerond, frame)

Galerij Meerdere afbeeldingen in grid:

• Kolommen aanpassen
• Bijsnijden voor uniformiteit
• Linkopties per afbeelding

Video

• Upload of embed (YouTube, Vimeo)
• Autoplay, loop, muted opties
• Poster afbeelding

Audio Voor podcasts of muziek:

• Autoplay optie
• Loop functie

Bestand Download links voor PDF's en andere bestanden.

Layout Blokken

Kolommen Maak multi-kolom layouts:

• Kies vooraf gedefinieerde layouts
• Of custom percentages
• Responsive op mobiel

Groep Groepeer blokken samen:

• Gezamenlijke achtergrondkleur
• Padding en margins
• Handig voor secties

Rij Horizontale layout van blokken:

• Flex-based
• Uitlijning opties
• Wrap gedrag

Stapel Verticale groepering met spacing control.

Cover Afbeelding of video met overlay:

• Tekst over media
• Parallax effect optie
• Overlay kleur en opacity

Widget Blokken

Shortcode Voor legacy shortcodes van plugins.

Aangepaste HTML Voeg raw HTML toe wanneer nodig.

Nieuwste berichten Toon recente posts:

• Lijst of grid
• Uitgelichte afbeelding
• Excerpt
• Auteur en datum

Categorieën Toon categorieën als lijst of dropdown.

Zoeken Zoekformulier toevoegen.

Geavanceerde Blok Features

Block Patterns (Patronen)

Patronen zijn vooraf ontworpen combinaties van blokken die je met één klik kunt invoegen.

Ingebouwde patronen:

1. Klik op + (blok toevoegen)
2. Klik op "Patronen" tab
3. Browse categorieën of zoek
4. Klik om in te voegen

Eigen patronen maken:

1. Maak je layout met blokken
2. Selecteer alle blokken
3. Drie puntjes → "Toevoegen aan patronen"
4. Geef een naam
5. Nu herbruikbaar!

Herbruikbare Blokken

Voor content die op meerdere plekken identiek moet zijn (bijv. call-to-action, contactinfo).

Maken:

1. Selecteer blok(ken)
2. Drie puntjes → "Maak patroon"
3. Kies "Gesynchroniseerd" (wijzigingen gelden overal)
4. Geef een naam

Gebruiken:

1. Zoek op naam in blok inserter
2. Of browse naar "Patronen" → "Mijn patronen"

Let op: Wijzigingen aan gesynchroniseerde patronen gelden op ALLE plekken waar ze gebruikt worden!

Block Styles

Veel blokken hebben meerdere stijlen. Klik op het blok en check de rechterzijbalk voor:

• Stijl variaties
• Kleuropties
• Typografie
• Afmetingen
• Geavanceerd (CSS classes, anker)

Keyboard Shortcuts

Werk sneller met toetsenbord:

• / - Blok zoeken en invoegen
• Ctrl+Shift+D - Dupliceren
• Ctrl+Alt+T - Blok voor invoegen
• Ctrl+Alt+Y - Blok na invoegen
• Shift+Alt+Z - Blok verwijderen
• Ctrl+Shift+, - Instellingen sidebar toggle
• /heading - Snel een kop invoegen
• /image - Snel een afbeelding invoegen

Block Thema's en Full Site Editing

Moderne WordPress thema's (block thema's) gaan verder dan alleen de editor.

Wat is Full Site Editing?

Met block thema's kun je ook bewerken:

• Headers
• Footers
• Sidebars
• Archiefpagina's
• 404 pagina's
• Zoekresultaten

Site Editor Openen

1. Ga naar Weergave → Editor
2. Of klik op "Site bewerken" in de admin bar

Template Parts

Herbruikbare onderdelen zoals header en footer:

1. Weergave → Editor → Patronen
2. Selecteer Template Parts
3. Bewerk of maak nieuwe

Templates

Bepaal de layout voor verschillende pagina types:

• Enkele post
• Pagina
• Archief
• Categorie
• Auteur
• Zoekresultaten

Populaire Block Plugins

Spectra (voorheen UAG)

Gratis blokken van de Flavor makers:

• Container
• Info Box
• Testimonials
• Pricing Table
• Post Grid
• Forms

Kadence Blocks

Uitgebreide gratis collectie:

• Row Layout
• Advanced Gallery
• Tabs
• Accordion
• Icon List
• Testimonials

GenerateBlocks

Minimalistisch en lichtgewicht:

• Container
• Grid
• Headline
• Button

CoBlocks

Van GoDaddy:

• Food & Drinks
• Events
• Pricing
• Services
• Social Profiles

Tips voor Effectief Gebruik

1. Plan Je Layout

Schets eerst je pagina voordat je begint met blokken.

2. Gebruik Patronen

Maak patronen voor veelgebruikte secties. Dit bespaart enorm veel tijd.

3. Groepeer Logisch

Gebruik Groep en Rij blokken om secties samen te houden.

4. Consistent Styling

Stel globale stijlen in via Weergave → Editor → Stijlen voor consistente kleuren en typografie.

5. Mobiel Testen

Check regelmatig de responsive preview (laptop/tablet/telefoon icons).

6. Performance

• Beperk het aantal blokken per pagina
• Optimaliseer afbeeldingen voor gebruik
• Vermijd zware embed blokken

Veelvoorkomende Problemen

Blok Werkt Niet

• Clear je browser cache
• Deactiveer conflicterende plugins
• Update WordPress en plugins

Layout Breekt op Mobiel

• Check kolom instellingen
• Test responsive preview
• Gebruik mobile-first patronen

Trage Editor

• Te veel blokken
• Zware plugins
• Update naar nieuwste WordPress

Meer informatie: WordPress.org documentatie

Veelgestelde vragen

Hoe lang duurt het om dit te implementeren?

De implementatietijd varieert per situatie. Voor eenvoudige configuraties is dit binnen een uur geregeld, complexere setups kunnen enkele uren tot een dag duren.

Wat zijn de kosten?

De kosten zijn afhankelijk van je hosting provider en pakket. Veel basisfuncties zijn gratis inbegrepen, voor geavanceerde functies kunnen extra kosten gelden.

Heb ik technische kennis nodig?

Voor de basis heb je weinig technische kennis nodig. De meeste hosting providers bieden uitgebreide documentatie en support om je te helpen.