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

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.

Legenda

  
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). 

divi visual

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.

elementor

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.

brizy interface

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.

brizy interface

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.

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!

brizy interface

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