Verschil tussen Gutenberg en WordPress pagebuilders

Regelmatig krijg ik de vraag of Gutenberg een pagebuilder is of wat nou eigenlijk het verschil is tussen beide.

Gutenberg is de standaard WordPress editor sinds versie 5.0. Je kunt er vrij veel mee en je kunt er diverse content layouts mee maken, maar is het nou ook echt net zo krachtig als een pagebuilder?

In dit artikel zal ik Gutenberg vergelijken met andere WordPress pagebuilders. Op deze manier krijg je hopelijk een beter beeld van wat nou precies het verschil is.

Gutenberg en het verschil met pagebuilders

Tijdens een WordPress website maken kom je van alles tegen. Misschien hoor je ook iets over Gutenberg en pagebuilders.

Gutenberg is de naam van de standaard editor in WordPress. Ik heb het dan niet over de oude editor die je erin kunt houden met de classic editor plugin, maar over de echte nieuwe editor.

WordPress Gutenberg editor

Bij Gutenberg kun je blokken gebruiken om aan je berichten en pagina’s content elementen toe te voegen, zodoende noemt WordPress het ook een blok editor.

Doordat je met Gutenberg op een eenvoudige manieren blokken met inhoud kunt toevoegen, het op kunt maken en eenvoudig kunt slepend kunt verplaatsen, wordt het al snel verwarrend en lijkt het ook een pagebuilder.

Dit is echter niet het geval.

Wanneer we het over een pagebuilder hebben, dan hebben we het over een plugin waarmee je echt de complete pagina kunt aanpassen naar jouw wensen. Je kunt elementen slepen en neerzetten op de juiste plekken, zonder ook maar een regel code te hoeven kennen.

WordPress pagebuilders

Populaire pagebuilders zijn Beaver Builder en Elementor. Deze zijn echt stukken krachtiger dan Gutenberg. Zo krijg je vaak templates waar je direct uit kunt kiezen en geven deze plugins een stuk meer flexibiliteit.

Ik snap dat met deze uitleg alleen het verschil nog niet helemaal duidelijk is. Ik zal je daarom hieronder nog een aantal verschillende laten zien tussen Gutenberg en pagebuilders, zodat je het beter kunt begrijpen.

Verschil 1: Live bewerken of in de backend editor

Wanneer je een bericht of pagina bewerkt met de Gutenberg editor, zal je geen live voorbeeld zien van wat je aan het maken bent. Het is een backend editor en laat je daar alles zo goed mogelijk zien, maar je ziet niet hoe het er op je website zelf uitziet.

Backend editor Gutenberg

Pagebuilders plugin laten je live bewerken. Je krijgt een soort live preview te zien van jouw website en wat je aan het maken bent. Zo zie je zonder de pagina op te slaan direct hoe het eruit zal komen te zien op je website, nog voordat je op publiceren klikt.

Live bewerken met een pagebuilder

Verschil 2: Thema afhankelijkheid

Gutenberg is afhankelijk van de opmaak van het WordPress thema waar je gebruik van maakt. Gutenberg voegt wel iets aan CSS (dit is de opmaak code) toe en geeft je ook de mogelijkheid om aangepaste CSS stijlen toe te voegen, maar het zal niet de opmaak van jouw thema overschrijven.

Pagebuilders zijn daarentegen niet afhankelijk van de opmaak waar je gebruik van maakt. Je krijgt de complete controle en kunt alles van het thema overschrijven met hoe je het zelf wilt helpen. Dit is ontzettend waardevol als je volledig aangepaste pagina layouts zou willen maken.

Verschil 3: Ontwikkelaars

Gutenberg is de standaard editor van WordPress en is dus automatisch ingebouwd. Je zal nooit problemen hebben met deze editor en WordPress, want iedere update zal dit grondig getest worden. Externe plugins en thema’s kunnen uiteraard nog wel voor conflicten zorgen.

Pagebuilders plugins worden altijd gemaakt door andere partijen dan WordPress. Hier moet dan ook de ondersteuning vandaan komen.

Verschil 4: Drag & Drop functionaliteiten

Met Gutenberg kun je de blokken die je toevoegt een beetje slepen en verplaatsen, namelijk omhoog en naar beneden. Je hebt echter niet de mogelijkheid om de breedte en hoogte aan te passen, blokken in andere blokken te plaatsen (wel bij kolommen) of ingewikkelde layouts te maken.

Bij pagebuilders heb je de mogelijkheid om alle elementen overal te plaatsen. Links, rechts, in het midden, over de gehele breedte, het maakt allemaal niet uit. Verder kun je ook de hoogte en breedte van elementen aanpassen en kun je elementen in elementen plaatsen.

WordPress beaver builder opties

Verschil 5: Opmaak opties

Blokken in Gutenberg komen met een aantal opmaakopties. Je kunt dus zeker wel iets aanpassen, maar de opties zijn redelijk gelimiteerd. Wanneer je meer wilt bereiken kun je dit alleen met behulp van CSS. Hier moet je dus wel verstand van hebben.

Bij pagebuilders heb je veel meer opmaakopties. Het maakt niet uit welk lettertype en grootte je wilt hebben, of je een achtergrondafbeelding, kleur of gradients wilt gebeuren, het is allemaal in te stellen. Tevens kun je ook iconen gebruiken, regelhoogtes instellen en de breedte en hoogte van elementen aanpassen.

Verschil 6: Blokken en elementen

Wanneer je in Gutenberg bezig bent kun je kiezen uit diverse standaard blokken om inhoud toe te voegen aan de pagina. Afhankelijk van de plugins die je hebt geïnstalleerd heb je wellicht nog een aantal extra opties gekregen.

Gutenberg blokken

Naast deze blokken kun je ook blokken opslaan als herbruikbaar blok, zodat je niet iedere keer alles opnieuw hoeft in te stellen.

Voor Gutenberg is een API beschikbaar waardoor plugin ontwikkelaars ook blokken kunnen toevoegen aan de editor. De populairste WordPress plugins en thema’s zijn hier al op ingesprongen en hebben eigen Gutenberg blokken gecreëerd waar jij gebruik van kunt maken.

Pagebuilders hebben nog een stuk meer blokken, modules en widgets die je kunt toevoegen aan je pagina. Daarnaast zijn deze elementen vaak ook een stuk geavanceerder dan in Gutenberg. Zo kun je sliders, call to action knoppen, contactformulieren, countdown timers en nog allerlei andere dingen toevoegen.

Beaver Builder elementen en blokken

Je hebt net als bij Gutenberg de mogelijkheid om elementen op te slaan, zodat je deze kunt hergebruiken. Je hebt daarnaast ook de mogelijkheid complete rijen of de gehele pagina op te slaan en te hergebruiken.

Populaire pagebuilders hebben ook een eigen API, waardoor andere ontwikkelaars extensies kunnen maken om extra elementen toe te voegen. Voor Beaver Builder heb je bijvoorbeeld de Ultimate Addons for Beaver Builder.

Wanneer gebruik je Gutenberg en wanneer een pagebuilder?

Gutenberg is er voor de moderne schrijver die lekker wilt schrijven en ‘eenvoudige’ pagina’s wilt maken. Gutenberg is geschikt voor iedereen. Het maakt dus niet uit of je een blogger, bedrijf of fotograaf bent.

Op deze website maak ik ook heel veel gebruik van Gutenberg. Zo is dit artikel ook in de Gutenberg editor gemaakt. Hetzelfde geldt voor alle blogartikelen op Webtalis sinds de editor is uitgebracht in WordPress.

Pagebuilders laten je direct visueel zien hoe alles eruit komt te zien op je website. Dit in combinatie met de drag and drop functiolaliteit en vele opmaakmogelijkheden, kun je echt schitterende pagina’s maken.

Pagebuilders kunnen gebruikt worden als je een pagina speciaal wilt opmaken. Zo heb ik Beaver Builder gebruikt op de WordPress hosting pagina van deze website en daarnaast op nog een aantal belangrijke pagina’s.

Pagebuilder kun je met name gebruiken wanneer je pagina’s anders wilt designen of gebruike dan hoe het op de rest van de website is. Je ziet dan ook vaak dat dit door bedrijven, designers, WordPress agencies en webshops gebruikt wordt.

Zelf zou ik het als volgt bekijken: Gutenberg helpt jou om pagina’s te maken waar het volledig draait om de inhoud. Ideaal voor artikelen. Pagebuilders helpen je om landingspagina’s te maken waar je een specifiek doel mee hebt. Bijvoorbeeld om je verkopen en leads te verhogen, een product te showcasen en dat soort dingen.

Zal Gutenberg pagebuilders vervangen?

Nee, hoe ik het bekijk zal Gutenberg dit niet doen. De focus bij Gutenberg is om je een fijne ervaring te geven bij het schrijven van content, met hier en daar extra mogelijkheden en toevoegingen.

Het is een betere editor dan wat WordPress hiervoor had. Ja, ik durf dit te zeggen, ondanks dat veel mensen nog altijd bij de klassieke editor blijven hangen. Het is een kwestie van wennen als je overstapt.

Gutenberg is verder geen vervanging voor een pagebuilder. Hiervoor zijn de functionaliteiten simpelweg te beperkt. Pagebuilders zijn een stuk visueler en hebben veel uitgebreidere mogelijkheden.

WordPress voegt wel steeds meer mogelijkheden toe aan de Gutenberg Editor. De focus blijft op het eenvoudig maken van content toevoegen, niet om een pagina compleet om te bouwen naar jou wensen.

Ik hoop dat dit artikel je geholpen heeft om het verschil tussen Gutenberg en pagebuilders duidelijk te maken. Ik gebruik beide op mijn website, voor verschillende doeleinde en het geeft geen conflicten met elkaar.

Mocht je interesse hebben in een pagebuilder, bekijk dan zeker de Beaver Builder handleiding. Dit is de pagebuilder waar ik zelf altijd gebruik van maak.

  1. Een kleine waarschuwing is wel op zijn plek met pagebuilders. Zodra je er eenmaal aan begint kom je er amper vanaf. De code van de pagebuilders zit vaak diep in de in content van je pagina. Ik merk dit nu zelf. Ondanks dat DIVI theme een prachtig thema is en de DIVI builder een heel mooi product wil ik toch van DIVI af. Het kost heel veel tijd en moeite om al die toegevoegde code te verwijderen. Grotendeels heb ik dit wel met een script kunnen doen maar toch zat er op bijna iedere pagina nog wel een stukje handwerk in. Ik verwacht dat dit probleem met Gutenberg lang niet zo dramatisch zal zijn mocht ik ooit willen overstappen.

    • Dit vind ik meer een Divi ding, wat een alles in 1 thema is. Ik vind dit niet een pagebuilder probleem. Bij Beaver Builder is dit namelijk niet het geval en kun je switchen naar Gutenberg, waarna alle tekst in Gutenberg wordt gezet. Uiteraard moet je het nog wel beter opmaken, wat logisch is als je overstapt. Uiteindelijk zal iedere overstap werk met zich meebrengen.

Geef een reactie

Early Black Friday deals: Profiteer nu al van diverse WordPress deals!