Bob de webbouwer bouwt en verbetert websites 040 848 80 69 bob@bobdewebbouwer.com

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.

Legenda

  
WP Stackable Blocks Gutenberg Stackable
Kadence WP Gutenberg Blocks Kadence
Qubely Gutenberg Blocks Qubely
GenerateBlocks WordPress Gutenberg GenerateBlocks
Toolset Blocks WP Gutenberg 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 WP Stackable Blocks Gutenberg Kadence WP Gutenberg Blocks Qubely Gutenberg Blocks GenerateBlocks WordPress Gutenberg Toolset Blocks WP Gutenberg
Container / secties voor meerdere rijen of blokken
Rijen met meerdere kolom layouts
Blokken WP Stackable Blocks Gutenberg Kadence WP Gutenberg Blocks Qubely Gutenberg Blocks GenerateBlocks WordPress Gutenberg Toolset Blocks WP Gutenberg
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 WP Stackable Blocks Gutenberg Kadence WP Gutenberg Blocks Qubely Gutenberg Blocks GenerateBlocks WordPress Gutenberg Toolset Blocks WP Gutenberg
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 WP Stackable Blocks Gutenberg Kadence WP Gutenberg Blocks Qubely Gutenberg Blocks GenerateBlocks WordPress Gutenberg Toolset Blocks WP Gutenberg
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 WP Stackable Blocks Gutenberg Kadence WP Gutenberg Blocks Qubely Gutenberg Blocks GenerateBlocks WordPress Gutenberg Toolset Blocks WP Gutenberg
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 WP Stackable Blocks Gutenberg Kadence WP Gutenberg Blocks Qubely Gutenberg Blocks GenerateBlocks WordPress Gutenberg Toolset Blocks WP Gutenberg
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 WP Stackable Blocks Gutenberg Kadence WP Gutenberg Blocks Qubely Gutenberg Blocks GenerateBlocks WordPress Gutenberg Toolset Blocks WP Gutenberg
Bibliotheek met standaard designs
Responsive design WP Stackable Blocks Gutenberg Kadence WP Gutenberg Blocks Qubely Gutenberg Blocks GenerateBlocks WordPress Gutenberg Toolset Blocks WP Gutenberg
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 WP Stackable Blocks Gutenberg Kadence WP Gutenberg Blocks Qubely Gutenberg Blocks GenerateBlocks WordPress Gutenberg Toolset Blocks WP Gutenberg
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.

wp stackable

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.

kadence blocks

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.

Qubely gutenberg blocks

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.

Generateblocks

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. 

Toolset Blocks

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.

Vraag direct een vrijblijvende offerte aan

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 🙂

 

Bedrag





Gerelateerde artikelen