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.
 |
Stackable |
 |
Kadence |
 |
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 |
| 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 | |||||
| Timeline blok | |||||
| Table of contents (automatische inhoudsopgave) | |||||
| Facebook berichten embedden | |||||
| Facebook comments |
| 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 | |||||
| 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) | |||||
| Andere content tonen op mobiel en tablet (andere teksten, afbeeldingen enzovoorts) |
| Prijzen | |
|
|
|
|
| Gratis versie beschikbaar | |||||
| Premium versie voor 1 website (prijs per jaar) | $ 49 | $ 69 | $ 39 | $ 39 | $ 69 |
| Premium versie voor 3 websites (prijs per jaar) | $ 99 | $ 69 | $ 59 | $ 69 | $ 149 |
| Premium versie voor een ongelimiteerd aantal websites (prijs per jaar) | $ 149 | $ 69 | $ 99 | $ 99 | $ 299 |
| Levenslange premium licentie voor een ongelimiteerd aantal websites | $ 499 | $ 649 | $ 599 | ||
| download | download | download | download | download |
Stackable
Stackable wint de laatste tijd steeds meer aan populariteit, met zo’n 50.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 200.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.
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 4 blokken toe: een container, een raster blok om kolommen in te voegen, een blok om headings en paragrafen op te maken en een blok om knoppen toe te voegen.
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 🙂
