Handleiding WordPress Gutenberg (de nieuwe editor in WordPress 5)

WordPress Gutenberg (ook bekend als WordPress 5) is de naam van de grootste en meest ingrijpende update van WordPress in hun geschiedenis.

WordPress 5 is verschenen op 7 december 2018 en bevat de Gutenberg editor. Met de introductie van de Gutenberg editor is de manier waarop je pagina’s maakt compleet veranderd. De WordPress Gutenberg editor vervangt de oude editor die inmiddels alweer meer dan 15 jaar oud is.

Bekijk de onderstaande video voor een eerste kennismaking met WordPress Gutenberg:

Gerelateerd artikel:
Update een bestaande website niet zomaar naar WordPress Gutenberg!
Zo voorkom je problemen »

De oude (klassieke) editor

Waar hebben we het eigenlijk over? Wat bedoelen ze als het over een "editor" gaat?

Met de editor maak je en bewerk je de pagina’s en (blog-)berichten binnen WordPress. In de oude (klassiek) editor staat alles bij elkaar in één invulscherm en bovenaan dat scherm vind je de knoppen om de inhoud te bewerken en de knop om afbeeldingen in te voegen.

In deze video maak ik een eenvoudige pagina met de klassieke editor:

De nieuwe (Gutenberg) editor

Met de WordPress Gutenberg editor bouw je je pagina’s op in blokken. Er zijn blokken voor titels, tekst, afbeeldingen en knoppen.

In de volgende video zie je hoe ik een eenvoudige pagina maak met de WordPress Gutenberg editor:

De Gutenberg editor instellen

Als je de klassieke WordPress editor gewend bent, dan is de Gutenberg editor wel even wennen. Elke afzonderlijke paragraaf, opsommingslijst en afbeelding worden getoond als blok.

Als je het op het blok klikt, dan vind je de bewerkingsknoppen bovenin het blok:

Daarnaast vind je in de rechterkolom vaak nog extra blokinstellingen. Zoals bijvoorbeeld de lettergrootte:

Hoe je een blok afsluit is niet heel duidelijk. Ik klik meestal in de lege linker of rechterkantlijn om het blok te sluiten voor een overzichtelijker beeld. In dat kader vind je rechtsboven ook een tandwielicoon waarmee je de rechterkolom tijdelijk kunt verbergen.

Je kunt er ook voor kiezen om de knoppen niet in het betreffende blok, maar altijd bovenaan de pagina te tonen. Misschien vind je dat overzichtelijker. Dat stel je in door helemaal rechtsboven in het scherm op de drie puntjes te klikken en te kiezen voor de "Top toolbar" (in de video hieronder zie je nog de oude naam"Uniforme toolbar").

Een andere optie voor meer duidelijkheid is de "Spotlight modus". Als je die inschakelt dan is het blok waarin je werkt het duidelijkst zichtbaar en worden alle andere blokken lichter van kleur.

wordpress gutenberg editor instellingen

In de onderstaande video demonstreer ik deze WordPress Gutenberg scherminstellingen:

Kun je zomaar upgraden naar WordPress Gutenberg?

Als je een nieuwe website gaat maken, dan kun je zonder voorzorgsmaatregelen aan de slag met WordPress Gutenberg.

Een bestaande website updaten naar WordPress Gutenberg kan (grote) problemen opleveren. Lees hier welke voorzorgsmaatregelen je kunt nemen »

Hoe ik WordPress Gutenberg gebruik

WordPress Gutenberg is te gebruiken in combinatie met andere methoden (plugins) om pagina's in te delen.

WordPress Gutenberg gebruik ik voor de gewone pagina’s zoals bijvoorbeeld een contactpagina, een "over ons" pagina en Gutenberg gebruik ik voor (blog)berichten. Dus de pagina’s waarin ik niet meer nodig heb dan een titel, een paar paragrafen en enkele afbeelding.

Complexere layouts, zoals bijvoorbeeld een homepage en andere landingspagina’s, maak ik met de Site Origin Page Builder (bekijk hier de instructievideo). Je kunt daarmee eenvoudig je pagina indelen met rijen en kolommen en die vullen met widgets voor teksten, afbeeldingen, knoppen en lijnen.

WordPress Gutenberg en de Site Origin Page Builder plugin

De makers van mijn favoriete gratis page builder plugin hebben hun plugin geschikt gemaakt voor WordPress Gutenberg. De Site Origin Page Builder geeft je veel extra mogelijkheden om een pagina in te delen en is als block beschikbaar in de WordPress Gutenberg Editor.

SiteOrigin werkt ook aan een migratietool waarmee je reeds gemaakte pagina’s kunt overzetten van de Classic Editor naar de Gutenberg Editor. Vooralsnog heb je de Classic Editor plugin nog nodig om bestaande Site Origin Pagebuilder pagina’s te kunnen bewerken.

Tijd besparen?

Geen zin om te verdwalen in het doolhof van thema's, plugins, editors en instellingen? Dan is de 1-daagse cursus WordPress een slimme oplossing. We beginnen bij de basis en aan het eind van de dag ken je alle onderdelen die nodig zijn om zonder technisch gedoe een professionele website te bouwen. Deze intensieve dag geeft je een positief gevoel, want je ziet direct resultaat en het bespaart je een hoop tijd.

Bekijk de cursus WordPress »
Reageer jij als eerste?

Geef een reactie