Als je vroeger een WordPress site maakte had je een tekstvlak in de admin omgeving waarin je teksten kon invoeren. Je kon dan een tekst dik drukken, schuin zetten, een kleurtje geven en zelfs een afbeelding invoegen, maar daar hield het wel mee op. De rest van het uiterlijk van je site werd volledig bepaald door een thema, en je moest echt verstand van PHP, HTML en CSS hebben om daar invloed op te hebben.
Rond 2012 / 2013 verschenen de eerste thema’s met een ingebouwde page builder op de markt, zoals Avada en Divi. Met deze WordPress page builders kon de gewone gebruiker ook zelf een pagina verdelen in meerdere rijen en kolommen, en beschikken over verschillende modules om bijvoorbeeld een afbeelding, tekst of een slider toe te voegen. Toen in 2016 Elementor gelanceerd werd, en later dat jaar Divi 3.0 met hun Visual Builder, werd het zelfs mogelijk om je aanpassingen live aan de voorkant van je website te doen, zodat je direct het effect van je aanpassingen ziet zoals je bezoekers dat zien!
Op 6 december 2018 kregen alle WordPress gebruikers een cadeau van Sinterklaas in de vorm van Gutenberg, een visuele page builder die vanaf dan de standaard manier werd om pagina’s in WordPress aan te passen. Maar daar was – en is – niet iedereen even blij mee; de Classic Editor plugin waarmee je Gutenberg kunt uitschakelen is inmiddels meer dan
5 miljoen keer geรฏnstalleerd.
In dit artikel gaan we enkele populaire WordPress page builders vergelijken: Elementor, Divi, Thrive Theme Builder, new kid on the block Brizy en de standaard page builder van WordPress zelf, Gutenberg. We kijken alleen naar de features die in de page builder zelf zitten, dus niet naar wat er met plugins van externe partijen mogelijk is.
Divi | |
Elementor | |
Brizy | |
Thrive Theme Builder | |
Gutenberg | |
Inbegrepen in de gratis versie | |
Inbegrepen in de premium (betaalde) versie | |
Niet inbegrepen | |
D | Divi |
E | Elementor |
B | Brizy |
T | Thrive Architect |
G | Gutenberg |
Basis | |||||
Drag & drop editor | |||||
Front-end editor (aanpassingen live aan de voorkant van je site doen) |
Layout | |||||
Meerdere kolommen | |||||
Kolommen slepen naar de gewenste breedte | |||||
Padding en margin instellen | |||||
Padding en margin instellen door te slepen | |||||
Max-width, max-height en min-height instellen |
Styling | |||||
Basis styling opties (kleuren, uitlijning, font grootte) | |||||
Geavanceerde styling opties (randen, regelhoogte, schaduw) | |||||
Achtergrond afbeeldingen en videos | |||||
Shape dividers | |||||
Animaties | |||||
Filters / blend mode | |||||
Hover effecten | |||||
Transformatie effecten | |||||
Scroll effects | |||||
Google Fonts integratie | |||||
Custom Fonts (eigen lettertypes uploaden) | |||||
Font Awesome integratie (icons) |
Modules | |||||
Slider module | |||||
Contactformulier module | |||||
Nieuwsbrief inschrijf module (voor MailChimp en andere providers) | |||||
Social media knoppen die linken naar je profielen | |||||
Social media deel knoppen | |||||
Facebook berichten embedden | |||||
Facebook comments | |||||
Font Awesome integratie (icoontjes) |
Geavanceerde features | |||||
Popup builder | |||||
Conditionele weergave | |||||
Mega menu | |||||
A/B test mogelijkheid | |||||
API (daarmee kunnen externe ontwikkelaars extra modules maken) |
Theme builder | |||||
Header en footer builder | |||||
Sticky header (header blijft in beeld als je scrollt) | |||||
Templates maken voor pagina's, berichten, archiefpagina's, 404 pagina enzovoorts | |||||
Dynamische content (teksten, afbeeldingen en andere data ophalen uit de database) | |||||
Eigen WooCommerce pagina's vormgeven |
Workflow | |||||
Laatste wijziging(en) ongedaan maken of opnieuw doen | |||||
Secties, rijen en modules / widgets kopieren en plakken | |||||
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) | |||||
Wireframe / layer view |
Bibliotheek | |||||
Bibliotheek met standaard designs | |||||
Eigen designs opslaan in de bibliotheek voor hergebruik elders op de site | |||||
Global designs (aanpassingen worden automatisch overal op de site doorgevoerd) | |||||
Opgeslagen designs exporteren voor hergebruik op een andere site |
Responsive design | |||||
Bekijken hoe je design eruit ziet op tablet en mobiel | |||||
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) | $ 89 | $ 49 | $ 45 | $ 228 | |
Premium versie voor 25 websites (prijs per jaar) | $ 89 | $ 199 | $ 89 | $ 228 | |
Premium versie voor een ongelimiteerd aantal websites (prijs per jaar) | $ 89 | $ 999 | $ 179 | ||
Levenslange premium licentie voor een ongelimiteerd aantal websites | $ 249 | $ 349 | |||
ย | download | download | download | download | ย |
Bob’s favoriet: Divi
Divi is al jaren mijn persoonlijke favoriet. Zoals je kunt zien in de bovenstaande tabel is de Divi Builder รฉรฉn van de meest complete page builders voor WordPress, met enorm veel features. Divi is ook volop in ontwikkeling, waardoor er steeds weer nieuwe features bij komen.ย
Het grote aantal features in Divi zorgde er vroeger voor dat Divi behoorlijk zwaar was (en daardoor traag), maar sinds augustus 2021 wordt uitsluitend de code geladen voor modules en effecten die daadwerkelijk op een pagina gebruikt worden.
Divi biedt ook heel veel styling opties, die bovendien voor elke module, rij en sectie beschikbaar zijn (dat is bij andere builders weleens anders).
Daarnaast vind ik de user interface van Divi het meest gebruiksvriendelijk van allemaal. Dat komt door de visuele weergave van alles. Als je in Divi bijvoorbeeld een schaduw wilt instellen kun je eerst kiezen uit een aantal presets, die je daarna kunt fine-tunen.
Andere builders zoals Elementor bieden geen presets, daar moet je de schaduw zelf naar wens zien te krijgen (zie het screenshot hiernaast).ย
Daarin zie je ook het verschil bij het toevoegen van shape dividers; waar je in Elementor en andere builders alleen de naam van de vorm ziet (bergen, golven, wolken) zie je in Divi gewoon een afbeelding van de betreffende shape divider zodat je direct ziet hoe het eruit ziet. Daarnaast wordt Divi geleverd met honderden voorbeeld sites, die allemaal bestaan uit meerdere pagina’s. Elke week wordt er weer een nieuwe voorbeeld site in een bepaalde niche toegevoegd, die je vervolgens gratis kunt downloaden.
Ook Divi Presets is een ongeรซvenaarde feature. Dit is een gebruiksvriendelijke versie van CSS classes. Hiermee kun je bijvoorbeeld een preset maken voor een knop met een blauwe achtergrond en witte letters, die je “knop blauw” noemt. Vervolgens kun je een nieuwe preset maken voor diezelfde knop, maar dan met een gele achtergrond en zwarte letters die je “knop geel” noemt. Je kunt dan de blauwe preset instellen als standaard voor alle nieuwe knoppen, maar ook eenvoudig een andere preset selecteren waardoor de betreffende knop alle styling kenmerken van de betreffende preset krijgt (niet alleen kleuren, maar ook padding, fonts, schaduws enzovoorts).
Verder biedt Divi als enige responsive content. Bij de meeste builders kun je elementen verbergen op bepaalde apparaten, en meestal kun je ook wel dingen als de lettergrootte aanpassen per resolutie, maar alleen bij Divi kun je ook de content zelf aanpassen per resolutie. Je kunt dus een knop maken met “vraag direct een vrijblijvende offerte aan”, maar op mobiel de tekst aanpassen naar “offerte aanvragen”.
Tenslotte is ook de licentie van Divi erg gunstig voor webbouwers: voor een eenmalige investering van $ 249 heb je een levenslange licentie, waarmee je zonder extra kosten levenslang recht hebt op updates en (uitstekende) support. Als je liever per jaar betaalt kan dat ook, de kosten bedragen in dat geval $ 89 per jaar.
Als je maar 1 website hebt is Divi wat prijziger dan de andere builders in dit artikel, maar ook dan zeker de moeite waard!
Elementor : Bobs keuze voor een gratis page builder
Elementor is actief op meer dan 5 miljoen websites en is daarmee veruit de populairste page builder voor WordPress. Dat is ongetwijfeld te danken aan het feit dat Elementor de eerste gratis page builder was waarvan de gratis versie zich kan meten met de betaalde versie van andere pagebuilders.
De gratis versie van Elementor biedt zelfs zoveel features dat ik me in het begin af vroeg wat de betaalde pro versie nog zou kunnen toevoegen, maar ook daar wist het Elementor team nog flink wat waarde toegevoegd te hebben.
Zo kun je met de gratis versie van Elementor alleen de inhoud van de pagina zelf aanpassen, maar niet de header, footer, blog template, WooCommerce templates enzovoorts. Met de theme builder van Elementor Pro kun je al deze onderdelen wel aanpassen.
Ook kun je in de gratis versie van Elementor alleen complete secties als globaal element opslaan in de bibliotheek. Als je een element als globaal opslaat worden wijzigingen overal op de website automatisch doorgevoerd. Dus als je bijvoorbeeld de achtergrondkleur van een knop aanpast wordt de achtergrondkleur van alle andere globale knoppen op de site ook automatisch aangepast.
In de gratis versie van Elementor kun je echter geen losse knop opslaan in de bibliotheek, dat kan alleen in de pro versie.
Verder bevat de pro versie onder andere een popup builder, een formulier widget, diverse social media widgets (social share buttons, een facebook comment box, een facebook embed widget en een click to tweet box), een prijstabel widget, een prijslijst widget, een flipbox widget, een animated headline widget, scroll effects enzovoorts. Daarnaast krijg je met de pro versie van Elementor toegang tot flink wat extra voorbeeld sites en secties (al zitten er ook al een aantal in de gratis versie).
Elementor kan gebruikt worden met vrijwel ieder thema, en vanwege de populariteit wordt het ook vrijwel altijd ondersteund. Er zijn ook veel plugins van derden beschikbaar.
Voor mensen die maar 1 website hebben is Elementor ook behoorlijk gunstig geprijsd: voor slechts $ 49 per jaar heb je toegang tot de volledige versie van Elementor Pro.
Voor webbouwers en andere mensen die meerdere websites beheren loopt de prijs echter snel op, tot wel $ 999 per jaar als je meer dan 100 websites beheert.
Als je gaat kijken naar de prijs per website valt dat natuurlijk best mee, maar toch… Divi doet echt niet onder voor Elementor en daar heb je een levenslange licentie voor een onbeperkt aantal websites voor slechts $ 249,00.
Brizy
Brizy is gelanceerd in 2018 en dus nog een vrij jonge page builder. Desondanks hebben ze inmiddels al zo’n 90.000 actieve installaties. Dat komt omdat de gratis versie van Brizy nรณg uitgebreider is dan die van Elementor.
Zo bevat de gratis versie van Brizy o.a. een contactformulier widget, diverse WooCommerce widgets, diverse social media widgets enzovoorts.
Uiteraard heeft Brizy ook een pro versie, waarin features als een theme builder (voor het aanpassen van header, footer en andere templates), een WooCommerce builder en een popup builder te vinden zijn.ย
Brizy onderscheidt zich echter vooral door de manier waarop je de styling opties instelt. In plaats van het openen van deze opties in een sidebar zoals bij de meeste andere builders verschijnt er bij Brizy een subtiele toolbar boven het element wat je op dat moment wilt bewerken, met alleen de opties die je op dat moment nodig hebt.
Dat zorgt er wel voor dat het allemaal vrij compact is, en er wordt dan ook veel gewerkt met icoontjes om ruimte te besparen. Dat is even wennen natuurlijk. Geavanceerdere opties openen overigens wel in een sidebar.
Een andere leuke feature van Brizy is “block conditions”, waarmee je kunt instellen dat je een element wilt tonen of verbergen voor bepaalde gebruikersrollen (dat noemen ze “membership”) of op bepaalde pagina’s. Dat is echter een stuk minder uitgebreid dan de conditionele weergave van Divi, waarbij je er ook voor kunt kiezen een element alleen te tonen op bepaalde dagen, of als er bepaalde producten in de winkelwagen zitten, of als er een bepaalde pagina bezocht is enzovoorts.
Ook voor andere features geldt vaak dat Brizy de betreffende feature wel heeft, maar dat de (instel) mogelijkheden vrij beperkt zijn. Aan de andere kant zijn er ook dingen die Brizy juist heel goed doet; zo kun je bijvoorbeeld elke gewenste module toevoegen aan een popup, het mega menu of de tabs module. Ook de kwaliteit van de designs van de voorbeeld sites is bovengemiddeld goed.
De pro versie van Brizy kost ongeveer hetzelfde als die van Elementor, wat op zich prima is. Elementor biedt wel wat meer waarde in de pro versie, maar Brizy is natuurlijk nog een jonge builder. Dat zorgt er ook voor dat er nog vrijwel geen plugins van derden voor Brizy te vinden zijn.
De prijzen voor webbouwers en andere mensen die meerdere websites beheren zijn een stuk gunstiger dan die van Elementor, maar wel wat hoger dan die van Divi. Divi biedt daarbij ook nog eens een stuk meer features, dus mijn keuze tussen die twee gaat voorlopig echt uit naar Divi.
Desalniettemin is Brizy ook een erg leuke builder die je zeker moet proberen om te zien of het wat voor je is. En ook interessant: Brizy heeft ook een cloud versie, vergelijkbaar met Wix of Jimbo. Daarbij hoef je jezelf dus geen zorgen te maken over dingen als hosting en updates, want dat is bij Brizy Cloud allemaal inbegrepen.
Thrive Theme Builder
Thrive is een beetje een vreemde eend in de bijt. Thrive Themes, het bedrijf dat de Thrive Theme Builder maakt, heeft namelijk nog een aantal andere plugins.
Eรฉn daarvan is bijvoorbeeld Thrive Optimize, waarmee je hele uitgebreide A/B tests kunt doen. Een tweede is Thrive Leads, waarmee je inschrijvingen voor je nieuwsbrief kan verzamelen op allerlei manieren.ย
Ook een quiz builder en een learning management systeem (LMS) genaamd Thrive Apprentice maken onderdeel uit van het aanbod.
En met hun nieuwste plugin, Thrive Automator, kun je processen automatiseren zoals het toevoegen van een gebruiker die net iets heeft gekocht in je webshop aan je mailinglist, of het starten van een countdown timer met een aanbod voor een cursus als een gebruiker een bepaald resultaat heeft behaald in een quiz.
Met de producten van Thrive is weinig mis, maar de prijzen zijn echter wel aan de hoge kant. Vroeger viel dat reuze mee; een levenslange licentie voor 1 van hun producten kostte toen $ 59, en voor het dubbele had je 15 licenties. Maar sinds februari 2021 biedt Thrive alleen nog een lidmaatschap (Thrive Suite genaamd) aan waarmee je al hun producten op maximaal 25 sites mag gebruiken voor $ 228,00 per jaar ($ 19 per maand).
Persoonlijk vind ik dat dus vrij prijzig, maar je krijgt er wel prima producten voor terug en ik ken geen andere aanbieder die zo’n uitgebreid productaanbod heeft in deze prijsklasse.
Gutenberg
Gutenberg is de standaard blok editor van WordPress zelf. En hoewel Gutenberg steeds beter wordt is het toch echt nog niet te vergelijken met de page builders hierboven, zoals ook wel blijkt uit het enorme aantal rode kruisjes.
Er komen wel steeds meer blokken (= modules / widgets) bij, en vanaf 2022 wordt Gutenberg zelfs een heuse theme builder waarmee je ook je header, footer en templates kunt bouwen, maar met name het vrijwel totale gebrek aan styling mogelijkheden – je kunt nog net de kleuren aanpassen maar daar houdt het wel zo’n beetje mee op – maakt Gutenberg naar mijn mening leuk voor het schrijven van blog posts, maar zeker niet geschikt om echt een website mee te bouwen.
Echter, juist omdat het de standaard page builder van WordPress is zijn er wel steeds meer plugins zoals Qubely, Kadence Blocks en Stackable die extra functionaliteit toevoegen aan Gutenberg. Bekijk hier mijn Gutenberg Blocks plugin vergelijking.
Hoewel dit soort plugins enorm veel mogelijkheden toevoegen aan Gutenberg blijft het voorlopig toch een backend builder die geen goed beeld geeft van hoe de website er voor bezoekers uit ziet.
Maar goed, het is wel de toekomst van WordPress… en met een goed thema kom je al een heel eind ๐
Ben je benieuwd naar een eigenschap die nog niet in de tabel hierboven staan? Laat dan gerust een reactie achter hieronder, dan zoek ik het voor je uit!
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 ๐
Hi, heb je enig ervaring met Shopify? Vind ze beide op elkaar lijken, maar het verschil is nog best groot.
Ik heb helaas geen ervaring met Shopify, maar zoals je hier kunt zien is Shopify de grote concurrent van WooCommerce.
Shopify is wel wat duurder dan WooCommerce (daarbij betaal je in principe alleen de hostingkosten en dat kan een stuk goedkoper dan de $29,00 van Shopify), maar het feit dat je er verder niet veel aan hoeft te doen spreekt blijkbaar heel veel mensen aan.
Groeten van Bob
Ziet er interessant uit. Ben aan het kijken of ik dit wil gaan gebruiken in de toekomst.
(Heb ik nog even een off topic vraagje. Ik las op een andere pagina dat jij met een css code ervoor gezorgt heb dat je blogberichten allemaal de zelfde hoogte hebben. Heb overal zitten zoeken maar kan nergens iets vinden hierover. Zou je deze kennis misschien willen delen:) Bedankt)
Hoi Ingwer,
Welke CSS code je nodig hebt verschilt per thema of page builder, daar is geen standaard code voor.
Groeten van Bob
Snelle reactie:) ik maak op dit moment nog gebruik van WP Bakery page builder. Met Corpus thema. Kun je hier wat mee?
Bedankt voor de moeite.
Nee dan zou ik echt de code van de website moeten bekijken, maar het schrijven van custom CSS code is niet iets waar ik hier aan ga beginnen… dan ben ik straks de hele dag gratis code aan het schrijven ๐
Groeten van Bob
Bedankt voor het overzichtelijke schema, en met welke versie werk jij zelf het meeste?
Hoi Thijs,
Ik werk zelf het meest met Divi.
Groeten van Bob
Wellicht leuk om te vermelden: bij de levenslange premium licentie van Brizy krijg je ook een White Label licentie. Dat kan voor sommige website bouwers interessant zijn. Je eigen naam of merk hangen aan de functionaliteit die Brizy biedt.
Klopt inderdaad Ronald, bedankt voor je aanvulling ๐
Groeten van Bob
Hey Bob,
Thx voor t mooie overzicht, heel leerzaam!
Heb je de Beaver Builder ook wel eens bekeken, verbaast me dat die er niet tussen staat en ben wel benieuwd naar die vergelijking, zeker met Divi vs Beaver ๐
Hoi Boris,
Heb je mijn Divi review ook gelezen? Daar staat onderaan een kopje Divi vs Beaver Builder ๐
In het kort vind ik dat Beaver Builder te weinig features biedt tegen een te hoge prijs.
Groeten van Bob
Nee nog niet, thx, ga ik gelijk even naar kijken! ๐
Geweldig overzicht! Divi blijft mijn favoriet vanwege de complete set aan features en de gebruiksvriendelijke interface.
Dank je Fien, maar het is al wel een behoorlijk oud artikel ๐
Met name Elementor heeft intussen flinke sprongen gemaakt, en met de (op)komst van FSE (Full Site Editing) biedt Gutenberg inmiddels ook wat meer mogelijkheden (met name onder theme builder). Divi heeft daarentegen vrijwel geen nieuwe features gekregen vanwege de ontwikkeling van Divi 5.
Persoonlijk ben ik voorlopig geswitched van Divi naar Greenshift, een Gutenberg addon. Lees hier waarom.
Groeten van Bob