Gutenberg en Elementor (Pro) – Een Vergelijk

Een verzoeknummertje voor mijn trouwe lezers?

In de afgelopen weken heb ik een aantal keren over Gutenberg en over Elementor als aparte onderwerpen geschreven. In de afgelopen weken heb ik echter van een aantal trouwe lezers vragen ontvangen over wat nu precies wijsheid is. Want is Elementor eigenlijk niet een ‘Page Editor’ net zoals Gutenberg ook is? Kunnen we dan niet beter bij de WordPress standaard blijven?

Kortom talloze vragen die ik ga proberen in deze blogpost te beantwoorden. En mocht je na deze blogpost nog vragen over hebben, stel ze rustig in het commentaar onder dit blogartikel.

Gutenberg, wat is dat eigenlijk?

Het eerste wat we ons af willen vragen, is wat Gutenberg nu eigenlijk is. Want het presenteert zich als een ‘Editor’, een ‘blok georiënteerde tekstverwerker’ om ‘Pages’ en ‘Posts’ binnen WordPress te bewerken. Wat Gutenberg niet beweert te zijn is een page builder. Producten als Elementor, WP Bakery, Beaver Builder, and Site Origin’s Page Builder beweren dit nadrukkelijk wel te zijn. Wat is het verschil hiertussen? Nu zullen Merriam-Webster en de Dikke van Dale ons hier niet verder helpen. Maar laten we nu eens letterlijk naar het woord ‘Page Builder’ kijken. Behalve dat het een omschrijving is, houdt het ook een belofte in: Je kan je pagina met dit product ‘bouwen’.

Er is niet zoiets als ‘Page Builders’.

En daar schieten vrijwel alle ‘Page Builders’ direct te kort. Want laten we eerlijk zijn. Een paar uitzonderingen daargelaten: Met jouw ‘Page Builder’ bouw je geen pagina, maar bouw je de content van je pagina visueel op. Zaken als sidebar, header en footer blijven ‘des themas’. (Een uitzondering is hier de ‘Theme Builder’ die onderdeel uitmaakt van Elementor Pro, hierover later meer).

Maar ook al beperken al deze ‘builders’ zich tot de content en niet tot de gehele pagina, je mag verwachten, dat he voor dat beperkte onderdeel van de pagina dan wel volwaardig functioneert. Ik mag bijvoorbeeld verwachten, dat ik op de achtergrond van zo’n pagina, op binnen een sectie op zo’n pagina afbeeldingen of kleur verlopen kan gebruiken. Ik mag verwachten, dat ik een sectie in kolommen kan verdelen, dat ik achtergrond- en fontkleuren in kan stellen en dat ik lettertype en lettergrootte kan wijzigen.

De fout in!

En dit is dus het eerste punt waar Gutenberg ‘in de fout’ gaat. Nu moet ik hierbij wel direct zeggen, dat ik verwacht, dat dit een kwestie van tijd is. Maar op dit moment zijn de blokken die beschikbaar zijn voor Gutenberg een zooitje ongeregeld. Ik kan bijvoorbeeld voor een tekstparagraaf wel een achtergrondkleur instellen, maar voor een koptekst niet. Bij een lijstweergave heb ik ook de mogelijkheid niet om makkelijk kleuren in te stellen…

Font familie en fontgrootte op punt- of pixel niveau instellen is ook geheel onmogelijk in de meeste Gutenberg blokken (er zijn een paar thirds party blokken, waarbij dit wel kan).

En de breedte van het gebied waarover ik de kleur in kan stellen is beperkt tot de breedte van de content. Zo’n moderne homepage met gekleurde banen… dat gaat me met de Gutenberg editor echt niet lukken!

Herbruikbare blokken.

Maar… Gutenberg heeft herbruikbare blokken! Je kan een blok wat je eenmaal hebt aangemaakt als ‘herbruikbaar’ definiëren (zie de gratis Gutenberg cursus van WordXPression) en op het moment dat je dit gedaan hebt, onbeperkt blijven gebruiken. Leuk! Maar wanneer we dit vergelijken met de ‘Blokken’ zoals we deze beschikbaar hebben in een volwaardige page builder als Elementor, dan valt de Gutenberg ‘herbruikbare blokken’ functie wel vies tegen.

Het probleem is namelijk, dat je Gutenberg blokken op dit moment nog niet kan groeperen tot één herbruikbaar blok. Wanneer ik bijvoorbeeld een ‘Ons Team’ blok zou willen samenstellen, bestaat dit bijvoorbeeld uit drie kolommen met in iedere kolom de naam, functie, foto en een korte omschrijving van een team lid. Dit wil ik graag instellen en opnieuw gebruiken. De enige optie die Gutenberg mij op dit moment biedt, is dit element voor element (blok voor blok) aan te maken en blok voor blok weer in te lezen.

Niet erg praktisch dus. In Elementor hoef ik alleen maar een ‘Section’ aan te klikken, de zeggen, dat ik de sectie als template in wil stellen en de hele sectie met alles erop en eraan wordt beschikbaar gesteld voor hergebruik.

Dynamische content

Wat Elementor (Pro) echter enorm aantrekkelijk maakt is de mogelijkheid om dynamische content aan te maken. Kijk bijvoorbeeld nog eens naar mijn korte ‘knutselen met Elementor Pro’ blogpost van iets meer dan een maand terug. Wat je hier ziet is dat ik dynamisch gegevens uit de database kan laten halen door ‘gewone’ tekstvelden. Dat is iets wat Gutenberg (en bovendien weinig van de andere pagebuilders die er op dit moment beschikbaar zijn) zullen bieden.

Dit zal veranderen. In de gratis Gutenberg ‘mini cursus’ zie je hoe je bijvoorbeeld dynamisch producten uit je webwinkel op je pagina kan tonen met behulp van Gutenberg. Het grote verschil tussen Elementor Pro en Gutenberg is echter, dat deze ‘data koppeling’ voor vrijwel iedere Elementor Pro widgets is ‘ingebouwd.’ Op het moment dat ik een tekst heb die ik aan kan passen, kan ik deze ook koppelen aan database gegevens.

Nog eens op een rijtje.

Laten we het allemaal nog eens op een rijtje zetten. Eén belangrijk verschil is dat we het in het geval van Elementor hebben over Widgets (niet te verwarren met sidebar Widgets) en in het geval van Gutenberg over blokken. In Elementor wordt ook de term ‘blokken’ gebruikt, maar dit is een ‘Section’ waarop meerdere widgets zijn geplaatst.

De verschillen tussen Elementor (Pro) en Gutenberg

• Opmaak opties: Bij Gutenberg zijn de diverse opties die je hebt  om de blokken op te maken sterk onderling verschillend bij de verschillende blokken. Bij de kopteksten heb je bijvoorbeeld vrijwel geen opmaak opties, voor de paragrafen heb je dit weer wel, en het ontbreekt weer bij de lijst weergaven. Elementor (Pro) heeft een consistente interface voor de opmaak opties van de verschillende widgets die er beschikbaar zijn.
• Hergebruik: Bij Gutenberg is ‘hergebruik’ mogelijk op basis van enkelvoudige blokken. Je kan een blok met al zijn instellingen opslaan als een ‘herbruikbaar’ blok. In Elementor Pro kan alles binnen een sectie (dat is dus eigenlijk alles) als herbruikbaar blok worden opgeslagen. Dit is vooral tijdbesparend wanneer je complexe layouts exporteert als ’template’.
• Muisafhankelijkheid: Gutenberg is vooral een editor. Je kan heel veel ’toetsenbord gestuurd’ doen. Elementor is vooral een page builder. Je bent vooral bezig met het slepen en plaatsen van blokken, klikken op veldjes om deze in te stellen etc.
• Databinding: Wanneer ik een Gutenberg blok maak (dat kan ik alleen als programmeur), dan moet ik op dat moment bepalen met wel type ‘data’ ik dat blok wil verbinden. Bijvoorbeeld met een WooCommerce product. Met Elementor kan ik verbinding maken met data die op het moment, dat de widgets werden gemaakt nog niet bestond. Een aardig voorbeeld is mijn artikel over de Resource Items. Ik ‘verzin’ de resource items zelf, en kan probleemloos via standaard widgets informatie uit deze data structuur (custom post type) halen.

Conclusie

Wanneer je Gutenberg bekijkt als een page builder, dan zal je al snel teleurgesteld raken. Wat je niet moet vergeten echter, is dat door de makers zelf Gutenberg ook absoluut niet als zodanig wordt gepresenteerd. Het is een blok georiënteerde tekst editor. Niet meer, maar beslist ook niet minder.

Wanneer ik zelf een blogpost moet schrijven, dan ga ik absoluut niet aan de slag met Elementor. Voor een dergelijke ’tekst en plaatje alleen’ functie is Elementor een veel te uitgebreid pakket en het schrijven van een complete blogpost via Elementor (of welke andere page builder dan ook) lijkt mij een nachtmerrie.

Het aardige van Gutenberg is dat het een beetje de ‘best of both worlds’ wil bieden. Je kan dus makkelijk je blogpost of je vooral tekstgeorienteerde pagina intikken, maar wanneer je een fimpje, een actieknop of iets anders in de pagina in wilt voegen, dan kan dat, zonder dag je ingewikkeld met shortcodes hoeft te doen.

Wil je meer weten over de Gutenberg Editor? Bekijk dan de gratis online minicursus.