Gutenberg is de standaard WordPress editor sinds eind 2018. Daarvoor was er alleen een eenvoudige tekst editor beschikbaar; het uiterlijk van je site werd toen volledig bepaald door het gekozen thema, dat gemaakt was door een ervaren developer die verstand moest hebben van PHP, HTML en CSS.
Pas toen rond 2012/2013 de eerste thema’s met een ingebouwde page builder verschenen, zoals Avada en Divi, werd het voor mensen die niet kunnen coderen mogelijk zelf geavanceerdere layouts maken met meerdere rijen en kolommen. Daarnaast bevatten dat soort page builders tal van modules om eenvoudig content toe te voegen, zoals een module voor tekst, afbeeldingen, testimonials, een fotogalerij, een knop, een contactformulier enzovoorts.
Gutenberg bracht eindelijk ook een page builder achtige ervaring naar WordPress zelf. Gutenberg biedt ook de mogelijkheid pagina’s op te maken met meerdere rijen en kolommen,
en bevat een aantal modules (blokken genoemd) om dingen als teksten, afbeeldingen, een fotogalerij en een knop in te voegen.
De mogelijkheden in de standaard versie van Gutenberg zijn echter behoorlijk beperkt. Zo kun je geen achtergrondafbeelding of achtergrondvideo toevoegen, ontbreken geavanceerdere blokken zoals icoontjes, testimonials en contactformulier, en zelfs het toevoegen van basisdingen als margin, padding en randen zijn alleen mogelijk als je het standaard WordPress thema (Twenty Twenty-one of Twenty Twenty-two) gebruikt.
Gutenberg is op zichzelf dan ook zeker geen volwaardig alternatief voor de gevestigde page builders als Divi en Elementor (zie mijn page builder vergelijking), maar het is wel de toekomst van WordPress. Een aantal developers zag dat al snel in en ontwikkelde plugins die de standaard versie van Gutenberg uitbreiden met tal van extra blokken en functionaliteiten. In dit artikel vergelijk ik een aantal populaire blok plugins.
In dit artikel vergelijk ik een aantal populaire Gutenberg add-on plugins op bijna 100 punten, zoals welke blokken ze bieden, welke styling opties, en of ze geavanceerde features als dynamic content, conditionele weergave bieden. Ook wordt gekeken naar de opties voor responsive design en de prijzen van premium versies.
De add-ons die in dit overzicht worden vergeleken zijn Stackable, Kadence, Greenshift, Qubely, Generateblocks en Toolset Blocks.
 |
Stackable |
 |
Kadence |
 |
Greenshift |
 |
Qubely |
 |
GenerateBlocks |
 |
Toolset Blocks |
| Inbegrepen in de gratis versie | |
| Inbegrepen in de premium (betaalde) versie | |
| Niet inbegrepen | |
| D | Divi |
| E | Elementor |
| B | Brizy |
| T | Thrive Architect |
| G | Gutenberg |
| Structuur blokken | |
|
|
|
|
|
| Container / secties voor meerdere rijen of blokken | ||||||
| Rijen met meerdere kolom layouts | ||||||
| CSS Grid |
| Blokken | |
|
|
|
|
|
| Tekst blok (geavanceerd) | ||||||
| Button blok (geavanceerd, bijv met icon) | ||||||
| Contactformulier blok | ||||||
| Nieuwsbrief inschrijf module (voor MailChimp en andere providers) | ||||||
| Social media deel knoppen | ||||||
| Fotogalerij blok (geavanceerd) | ||||||
| Foto slider / carrousel blok | ||||||
| Icon blok | ||||||
| Icon list blok (lijst met icoontjes) | ||||||
| Accordeon blok | ||||||
| Counter / percentage blok | ||||||
| Countdown blok | ||||||
| Testimonials blok | ||||||
| Teamlid / persoon blok | ||||||
| Tabbladen blok | ||||||
| Google Maps blok | ||||||
| Geanimeerde headline blok (bijv getypte tekst effect) | ||||||
| Image comparison (2 afbeeldingen vergelijken met slider) | ||||||
| Tekst divider | ||||||
| Icon divider | ||||||
| Star rating (aantal sterren) | ||||||
| Post grid blok (berichten weergeven in een grid) | ||||||
| Berichten weergeven in een carrousel / slider | ||||||
| Paginatie (voor berichten, producten etc) | ||||||
| Paginatie met infinite scroll | ||||||
| Popup blok | ||||||
| Off canvas / Slide in blok | ||||||
| Timeline blok | ||||||
| Table of contents (automatische inhoudsopgave) | ||||||
| Facebook berichten embedden | ||||||
| Facebook comments | ||||||
| Grafiek blok (cirkeldiagram, lijngrafieken) |
| WooCommerce blokken | |
|
|
|
|
|
| Gevanceerd productoverzicht blok | ||||||
| Productoverzicht query bewerken (zelf bepalen welke velden getoond worden) | ||||||
| Toevoegen aan winkelwagen knop | ||||||
| Productafbeeldingen blok | ||||||
| Prijs blok | ||||||
| Productmeta blok | ||||||
| Producteigenschappen blok | ||||||
| WooCommerce tabbladen blok | ||||||
| Gerelateerde producten blok | ||||||
| Product reviews blok | ||||||
| Product rating blok (gemiddeld aantal sterren) | ||||||
| WooCommerce breadcrumbs blok | ||||||
| Producteigenschappen blok | ||||||
| Product voorraadstatus blok | ||||||
| WooCommerce meldingen blok |
| Styling opties | |
|
|
|
|
|
| Custom kolombreedte (ipv alleen vaste kolomstructuren) | ||||||
| Padding en margin instellen | ||||||
| Max-width, max-height en min-height instellen | ||||||
| Keuze uit meerdere eenheden zoals px, (r)em, %, vw, vh | ||||||
| Basis styling opties (kleuren, uitlijning, font grootte) | ||||||
| Geavanceerde styling opties (randen, regelhoogte, schaduw) | ||||||
| Achtergrond afbeeldingen | ||||||
| Achtergrond video | ||||||
| Achtergrond slider | ||||||
| Shape dividers | ||||||
| Image shape mask (afbeelding in een vorm weergeven) | ||||||
| Animaties | ||||||
| Filters / blend mode | ||||||
| Transformatie effecten | ||||||
| Scroll effects | ||||||
| Google Fonts integratie | ||||||
| Custom Fonts (eigen lettertypes uploaden) | ||||||
| Font Awesome integratie (icons) |
| Geavanceerde features | |
|
|
|
|
|
| Conditionele weergave | ||||||
| Dynamische content (teksten, afbeeldingen en andere data ophalen uit de database) | ||||||
| Ondersteuning voor custom fields / ACF | ||||||
| Ondersteuning voor custom post types | ||||||
| Link toevoegen aan volledig blok / container |
| Workflow | |
|
|
|
|
|
| Stijlen kopieren en plakken op dezelfde pagina | ||||||
| Standaard stijl instellen voor een sectie, rij of module op de hele site | ||||||
| Meerdere standaard stijlen instellen (classes / presets) | ||||||
| Globale kleuren (als je een kleur op 1 plek aanpast wordt deze overal aangepast) |
| Templates | |
|
|
|
|
|
| Bibliotheek met standaard designs |
| Responsive design | |
|
|
|
|
|
| Onderdelen verbergen op desktop, tablet of mobiel | ||||||
| Bepaalde eigenschappen aanpassen voor mobiel en tablet (padding, margin, font size) | ||||||
| Blokken als carrousel weergeven op mobiel in plaats van onder elkaar | ||||||
| Andere content tonen op mobiel en tablet (andere teksten, afbeeldingen enzovoorts) | ||||||
| Breakpoints aanpassen | ||||||
| Fluid Typography (lettergrootte past zich automatisch aan op schermgrootte) |
| Prijzen | |
|
|
|
|
|
| Gratis versie beschikbaar | ||||||
| Premium versie voor 1 website (prijs per jaar) | $ 49 | $ 69 | $ 60 | $ 39 | $ 39 | $ 69 |
| Premium versie voor 3 websites (prijs per jaar) | $ 99 | $ 69 | $ 90 | $ 59 | $ 69 | $ 149 |
| Premium versie voor een ongelimiteerd aantal websites (prijs per jaar) | $ 149 | $ 69 | $ 99 | $ 99 | $ 99 | $ 299 |
| Levenslange premium licentie voor een ongelimiteerd aantal websites | $ 499 | $ 649 | $ 400 | $ 599 | ||
| download | download | download | download | download | download |
Stackable
Stackable wint de laatste tijd steeds meer aan populariteit, met zo’n 70.000 actieve installaties op het moment van schrijven. Stackable bevat weliswaar niet enorm veel blokken, maar wel de meeste styling opties van allemaal.
De premium versie biedt een aantal geavanceerde functies zoals (scroll)animaties, CSS transformaties, conditionele weergave en dynamische content.
Daarnaast beschikt Stackable over een design library, een bibliotheek met zo’n 400 standaard designs (waarvan 75% alleen beschikbaar zijn in de premium versie).
Ook de standaard templates van het populaire Blocksy thema maken gebruik van Stackable blocks.
Kadence Blocks
Kadence Blocks is met ruim 300.000 actieve installaties op het moment van schrijven veruit de meest populaire Gutenberg Blocks plugin.
Qua features is Kadence echter middelmatig; er zijn niet enorm veel blokken beschikbaar en enkele geavanceerde functies zoals filters, CSS transformaties en conditionele weergave ontbreken.
De premium versie van Kadence biedt wel een nieuwsbrief inschrijf module, een berichten carrousel, en – als enige – een popup blok. Ook dynamische content ontbreekt hier niet.
Verder biedt de gratis versie van Kadence handige workflow features zoals het kopiëren en plakken van stijlen en het instellen van een standaard stijl voor elk blok.
Net als Stackable beschikt ook Kadence over een design library met een behoorlijk aantal standaard designs, maar waar Stackable alleen designs voor individuele blokken biedt heeft Kadence ook een aantal complete website designs bestaande uit meerdere pagina’s.
Greenshift
Greenshift is een vrij jonge Gutenberg blocks addon, met op dit moment zo’n 10.000 actieve installaties, maar ik zie langzaam maar zeker een soort van hype rondom deze plugin ontstaan, o.a. in de Facebook groepen waar ik lid van ben.
Greenshift heeft een sterke focus op performance, bijvoorbeeld door zoveel mogelijk gebruik te maken van standaard Gutenberg functies; om die reden heeft Greenshift bijvoorbeeld geen eigen gallery blok, MAAR je kunt het standaard Gutenberg gallery blok wel eenvoudig omvormen tot een slider. Ook wordt alleen de code geladen van de blokken die daadwerkelijk op een pagina gebruikt worden.
Naast performance ligt de focus ook zeker op responsive design, met 4 aanpasbare breakpoints, CSS grid en flexbox layouts, fluid typography en de mogelijkheid blokken op mobiel naast elkaar in een carrousel weer te geven in plaats van onder elkaar.
Hoewel er een vinkje bij “Font Awesome Integratie” staat heeft Greenshift dit niet geintegreerd. Je kunt echter wel iedere gewenste SVG code gebruiken,
en de SVG code van Font Awesome icoontjes is eenvoudig te kopieren op hun site.
De premium functionaliteiten van Greenshift zijn onderverdeeld in diverse pakketten. Zo is er de animation addon, waarmee je naast de entrance animations in de gratis versie ook scroll animations krijgt, en zeer gevanceerde animaties kunt maken met de GSAP animatie bibliotheek die de populaire motion.page plugin ook gebruikt.
De tweede addon is de SEO en Marketing addon, waarmee je een aantal blokken krijgt die met name handig zijn voor affiliate sites.
Persoonlijk vind ik de Query Dynamic Addon een stuk interessanter, aangezien je daarmee dynamische content kunt toevoegen aan je blokken zoals de post title en uitgelichte afbeelding, maar ook WooCommerce velden en custom fields die met plugins als ACF en Toolset zijn gemaakt. Daarnaast bevat deze addon een advanced query builder waarmee je bijvoorbeeld een custom overzicht van je posts of producten kunt maken, en een visibility conditions blok, een container blok waarmee je de blokken daarbinnen kunt verbergen of weergeven op basis van bepaalde condities (wel of niet ingelogd, bepaalde gebruikersrol, alleen bij bepaalde post, op een bepaalde datum enzovoorts).
De hierboven genoemde prijzen zijn overigens voor het all-in pakket waarmee je toegang krijgt tot alle addons.
Qubely
Qubely is met slechts 10.000 installaties naar mijn mening behoorlijk ondergewaardeerd. Deze plugin biedt veruit de meeste blokken van allemaal,
die er ook nog eens allemaal fantastisch uit zien.
Net als Kadence heeft ook Qubely een uitgebreide bibliotheek met standaard designs, zowel voor individuele blokken als complete starter sites die bestaan uit meerdere volledig opgemaakte pagina’s.
Ook qua styling opties doet Qubely niet onder voor de rest, maar dynamische content wordt helaas nog niet ondersteund.
Dat komt waarschijnlijk omdat de ontwikkeling van Qubely een hele tijd stil heeft gelegen; de ontwikkelaars achter Qubely hebben meerdere producten en hebben de afgelopen tijd vooral de focus gelegd op Tutor LMS waardoor Qubely een beetje verwaarloosd is.
Eind 2021 is er echter weer een update uitgebracht met een aantal bugfixes, en de developers hebben beloofd Qubely weer actiever te gaan ontwikkelen.
Ik heb dan ook goede hoop voor de toekomst van deze mooie plugin!
GenerateBlocks
Als je op zoek bent naar een Gutenberg Blocks plugin met veel blokken en styling opties is GenerateBlocks niet de juiste keuze. Deze plugin voegt slechts 6 blokken toe: een container, een raster blok om kolommen in te voegen, een blok om headings en paragrafen op te maken, een image blok, een blok om knoppen toe te voegen en een query loop blok voor het weergeven van posts.
Ook qua design opties is GenerateBlocks vrij beperkt. De plugin is er echt op gericht om zo weinig mogelijk “bloat” toe te voegen aan WordPress zelf en echt alleen die dingen te bieden die noodzakelijk zijn om met Gutenberg een volwaardige website te bouwen.
Hoewel het zeker mogelijk is om met GenerateBlocks een mooie pagina te maken gaat mijn voorkeur uit naar een plugin die wat meer mogelijkheden biedt.
Toolset Blocks
Toolset Blocks zul je niet snel tegenkomen in een Gutenberg Blocks plugins vergelijking – behalve in deze dan. Dat komt omdat Toolset Blocks niet verkrijgbaar is als losse blocks plugin; Toolset is namelijk een custom post types plugin en Toolset Blocks is alleen ontwikkeld om layouts te kunnen bouwen voor die custom post types.
Net als GenerateBlocks biedt ook Toolset Blocks niet heel veel blokken, en ook niet heel veel styling opties. Geen animaties, geen scroll effecten, geen shape dividers…
en desondanks is Toolset Blocks toch de blocks plugin die ik het vaakst gebruik.
Hoewel Toolset in bovenstaande vergelijking niet zo heel krachtig lijkt te zijn is dat in de praktijk wel het geval. Met het container blok en CSS grid blok bouw je eenvoudig een responsive layout, maar Toolset blinkt vooral uit op het gebied van dynamische content.
Zo heeft Toolset bijvoorbeeld geen testimonials blok, maar een testimonials blok is in principe alleen een afbeelding met daaronder een paar tekst blokken.
Dat kun je ook met GenerateBlocks of Toolset Blocks maken natuurlijk. Maar met Toolset kun je ook een custom post type “Testimonials” maken met een aantal custom fields zoals een veld “naam”, “functie”, “afbeelding” enzovoorts. Vervolgens heb je een extra kopje “testimonials” in de admin, bijvoorbeeld onder pagina’s en berichten, waar je al je testimonials kunt toevoegen.
Daarna kun je 1 of meerdere layouts maken om die testimonials te tonen, precies zoals je ze wilt hebben; meerdere naast elkaar, in een masonry layout, als slider enzovoorts,
en met conditionele weergave en filters kun je precies bepalen welke testimonials waar getoond worden.
Dat geldt niet alleen voor custom post types; ook voor pagina’s, berichten en WooCommerce producten kun je volledig custom layouts maken, waarbij je precies kunt bepalen welke velden je wel en niet wilt weergeven. Wil je een berichtenoverzicht met een custom lees meer knop, waarbij de categorieën boven de uitgelichte afbeelding zijn weergegeven? Dat kan.
Wil je op je shop pagina de maten van je producten weergeven? Kan. Wil je zelf velden toevoegen aan een WooCommerce product en deze weergeven op de product pagina? Kan ook.
Als je een WooCommerce webshop hebt is Toolset sowieso een logische keuze, aangezien deze op dit moment als enige de mogelijkheid biedt om je shop en categorie pagina’s helemaal naar wens vorm te geven met losse WooCommerce blokken voor elementen als de prijs, add to cart button, reviews enzovoorts.
Toolset is wel bedoeld voor wat geavanceerdere gebruikers, maar biedt hen dan ook ongekende mogelijkheden in Gutenberg.
Hulp nodig met je website?
Dit artikel is geschreven door Bob de webbouwer, een allround website expert die regelmatig blogt over allerlei onderwerpen die je helpen bij (het bouwen van) jouw website. Heb je hulp nodig? Huur Bob de webbouwer dan in om een website voor je te bouwen, jouw website te verbeteren of een training over dit onderwerp te verzorgen.
Dit artikel bevat affiliate links. Dat wil zeggen dat ik een vergoeding krijg als je een betaalde page builder koopt via een link op deze pagina. Dat kost jou verder niets extra’s, maar zorgt er wel voor dat ik jou kan blijven helpen met dit soort gratis artikelen. Dus als je zelf een page builder wilt aanschaffen stel ik het zeer op prijs als je dat via deze pagina doet 😉
Ga je voor Gutenberg of de gratis versie van Elementor of Brizy? Dan kun je eventueel ook een kleine eenmalige donatie doen via de button hiernaast 🙂
