4 WordPress pagebuilders onderzocht; onze bevindingen

WordPress is het meest gebruikte content management systeem (CMS) om websites mee te maken. Met een vlakke leercurve is het voor niemand lastig om een mooie WordPress website te maken. Toch kan het nóg makkelijker.

WordPress is niet opgebouwd volgens het ‘What You See Is What You Get’ (WYSIWYG) principe; je ziet tijdens het maken niet direct het resultaat. Gelukkig zijn hier diverse plugins voor te vinden.

Met een pagebuilder plugin kun je met handige knoppen in WordPress je pagina opmaken. Niet alleen zie je meteen hoe je pagina eruit komt te zien, je hebt ook veel meer mogelijkheden om je webpagina te maken.

Een website maken in WordPress

Ik raad iedereen die een website maakt om WordPress te proberen. Het is makkelijk te installeren, handig in gebruik en met de vele plugins is er weinig dat je niet kan doen met je website.

Een introductie van het CMS WordPress

WordPress is één van de meest gebruikte contentmanagementsystemen ter wereld.

Als je geen kaas hebt gegeten van websites maken, is het even wennen hoe een CMS als WordPress werkt. Er is namelijk een frontend en een backend. De frontend is de daadwerkelijke website die jouw bezoeker ziet.

De backend, in WordPress noemen we dat het dashboard, is de omgeving achter de schermen waar je als beheerder in werkt.

In het dashboard bewerk je alle losse elementen van je website dat één geheel vormt in de frontend. Je moet dus steeds schakelen tussen backend en frontend om jouw werk te zien op je website.

WordPress heeft van zichzelf weinig design-functies

Naast de keuze uit thema’s, kun je daarna niet heel veel meer aanpassen aan deze voorgebakken layout, tenzij je kennis hebt van HTML en CSS.

Eenvoudige wijzigingen aanbrengen met de WordPress customizer

Je kunt eenvoudige design-wijzigingen aanbrengen met de WordPress customizer.

Een pagina maak je in het dashboard van WordPress. Je kunt hier je tekst schrijven, maar je ziet niet hoe je pagina of bericht er in zijn totaal uitziet. Ook zijn de mogelijkheden wat betreft opmaak beperkt.

Extra mogelijkheden met plugins

Er zijn veel plugins om extra mogelijkheden toe te voegen aan de editor van WordPress. Wil je kolommen gebruiken dan kun je bijvoorbeeld een kolommen plugin installeren en met behulp van shortcodes kolommen maken.

Shortcodes; voordelen en nadelen

De naam geeft al aan wat een shortcode doet. Met een shortcode wordt een grotere hoeveelheid scriptcode vervangen door een korte code tussen vierkante haakjes.

Een shortcode is heel handig. Je hoeft maar een korte code te onthouden om een bepaalde functie of vormgeving toe te passen. Toch zit niet iedereen te wachten op het werken met shortcodes.

Het toevoegen van kolommen in WordPress met shortcodes

Kolommen toevoegen op een pagina in WordPress met gebruik van shortcodes.

Shortcodes worden gegenereerd door plugins of themes. Als je deze verwijdert of vervangt, vervalt ook de verwijzing naar wat de shortcode precies betekent. De lange code wordt dan niet meer uitgevoerd. Daardoor werkt je site niet meer zoals je verwacht.

Wat is een pagebuilder

Een WordPress pagebuilder is meestal een plugin of onderdeel van een theme waarmee je wél direct kunt zien hoe wijzigingen op je website eruit komen te zien.

Met een pagebuilder werkt je niet meer in de backend van jouw site, maar in de frontend. Je ziet daardoor meteen hoe jouw inhoud eruit komt te zien op de website zelf.

Wat zijn WordPress pagebuilders?

Het maken van een website wordt veel eenvoudiger als je een WordPress pagebuilder gebruikt.

Dat is veel makkelijker, want je hoeft dan niet af te wachten hoe je pagina eruitziet en je hoeft niet te schakelen tussen de backend en frontend.

Extra functies in WordPress pagebuilders

Ook heeft een pagebuilder allerlei extra opmaak mogelijkheden om een mooie website te maken. Niet langer heb je meerdere plugins nodig voor extra opties, maar kan je met de opties van een pagebuilder je pagina indelen en opmaken.

PageBuilders zijn niet alleen voor beginners

Webdesigners weten alles van code. Je zou daarom denken dat een pagebuilder niet voor hen is bedoeld. Maar ook als designer kun je er voor kiezen om een WordPress pagebuilder te gebruiken.

De pagebuilder zorgt niet alleen voor uitgebreide opmaak mogelijkheden voor een pagina, het zorgt er ook voor dat je de gemaakte website makkelijk kunt overdragen.

Webdesigners spreken vaak af dat hun klant na oplevering de website zelf gaat onderhouden. Met een pagebuilder zadel je jouw klant niet op met moeilijke code.

Het bijhouden van de website is zo eenvoudiger voor je klant.

Zelf de website bijhouden

Met behulp van een pagebuilder kan de klant zelf gemakkelijk zijn website bijhouden. Het scheelt voor beide partijen veel tijd en moeite, de klant kan zelf aan de slag en hoeft daarom niet voor elk wissewasje contact op te nemen met de designer.

Het is bij sommige pagebuilders zelfs mogelijk om de klant te beschermen tegen de vrijheid van de vele opties. Je kunt als webmaster aangeven welke modules wel of niet beschikbaar zijn. Hiermee voorkom je dat een klant een bonte kermis maakt van zijn webpagina.

Pagebuilders in thema’s

WordPress is niet voor niets het meest gebruikte CMS ter wereld. Het is een prettig systeem dat door steeds meer mensen wordt omarmd. Ook door mensen die van origine geen webbouwers zijn.

Sommige thema makers springen hierop in door aan hun thema een pagebuilder toe te voegen. Bekende thema’s als Avada en Enfold hebben een eigen pagebuilder geïntegreerd in hun thema.

Avada WordPress theme

Avada theme is een voorbeeld van een thema waarin de pagebuilder is ingebouwd.

Bij Avada is dat Fusion builder en Enfold heeft Avia Layout Builder. Ik heb deze builders niet meegenomen in deze test, maar me gericht op de pagebuilder plugins. Een thema met veel ingebouwde plugins heeft namelijk een aantal belangrijke nadelen.

Nadelen pagebuilders in themes

Die nadelen zijn geen kleinigheden. Als er bijvoorbeeld een lek in één van deze plugins zit, moet je vaak lang op een update van het complete thema wachten voordat dit probleem is opgelost.

Daarnaast zijn de builders van Avada en Enfold geen echte frontend pagebuilders. Je blijft in het dashboard werken om de pagina op te maken.

Voordelen en nadelen van WordPress pagebuilders

Een pagebuilder geeft je veel voordelen bij het maken van jouw website. De vrijheid in opmaak is misschien wel het belangrijkste voordeel. Daarnaast zie je meteen hoe jouw website eruit komt te zien, zonder steeds een preview van je pagina te moeten bekijken.

Toch kleven er ook wel nadelen aan het gebruik van een pagebuilder plugin. Zodra je in WordPress een pagebuilder gebruikt, kan je niet meer zonder. Schakel je de plugin uit, dan verlies je ook de opmaak van je pagina.

Pagebuilders gijzelen je content

Bij veel pagebuilders gaat ook de content van je site verloren als je de plugin uitschakelt. Niet alleen tekst en afbeeldingen, maar ook kolommen, icoontjes en andere leuke toevoegingen verdwijnen als sneeuw voor de zon.

Hetzelfde gebeurt als je wil overschakelen van de ene pagebuilder naar de andere. Dan moet je jouw pagina’s helemaal opnieuw opmaken.

Kosten van pagebuilders

Een premium PageBuilder kost geld. Voor sommige betaal je een eenmalig bedrag. Andere plugins vragen een jaarlijks bedrag voor doorlopende support en updates. Hierdoor lopen de kosten van je website op.

Dat geeft je ook de zekerheid dat er aan de pagebuilder blijvend ontwikkeld wordt, dus het is ook weer een voordeel. Investeren in je website is overigens nooit een nadeel, maar als je net begint moet je voor jezelf afwegen of je direct kosten wil maken.

Ben je te perfectionistisch? Bedenk dan dat de mogelijkheden van een pagebuilder zo uitgebreid zijn, dat je er uren mee kunt fröbelen. Het kan dan gebeuren dat je jezelf verliest op onderdelen van je site en het grotere plaatje niet meer ziet.

Een pagebuilder maakt je leven makkelijker, maar door de vele opties kun je ook allerlei leuke foefjes toevoegen zoals bewegende tellers, slideshows en voortgangsbalkjes. Probeer dit te voorkomen en houd ook je website simpel. Met deze toevoegingen wordt jouw website een bonte verzameling, wat niet professioneel oogt.

Vier pagebuilders getest

Met zoveel beschikbare WordPress pagebuilder plugins rijst al snel de vraag: “welke is de beste?”. Dat is een lastige vraag om te beantwoorden. Voor dit artikel heb ik vier pagebuilders uitgeprobeerd: Elementor, Live Composer, Beaver Builder en Divi.

Dit zijn stuk voor stuk bekende en zeer goed ontvangen plugins. Voorop gesteld, je kan met geen enkele plugin de mist in gaan. Alle vier werken naar behoren en je kan er mooie webpagina’s mee maken. In grote lijnen werken ze allemaal hetzelfde.

Aparte instellingen voor mobiele websites

Het is bij elke van deze plugins mogelijk om aan te geven of een onderdeel getoond moet worden op een mobiel apparaat. Hierdoor is het mogelijk om van je mobiele site een beknopte versie te maken van je desktop site.

WordPress pagebuilders onderzocht

WordPress pagebuilders onderzocht; mobiele instellingen zijn beschikbaar in alle pagebuilders.

Met een pagebuilder is het mogelijk om je pagina te voorzien van allerlei fratsen, zoals tabbladen, accordeons, sliders. Maar op een kleiner apparaat als een telefoon wordt deze informatie allemaal onder elkaar geplaatst.

Daardoor krijg je ellenlange pagina’s. Door bepaalde onderdelen niet te tonen op een mobiel apparaat, hoeft je bezoeker minder te scrollen.

Modules beschikbaar in pagebuilders

Alle geteste plugins hebben de mogelijkheid om bepaalde modules wel of niet te tonen. Erg handig als je als designer de site gaat opleveren of als je met meerdere mensen aan een site wil werken.

Je kunt modules verbergen voor bepaalde gebruikers en daarmee voorkomen dat zij een pagina kunnen maken met onderdelen die niet nodig zijn.

Ook hebben deze vier pagebuilders eigen templates in huis. Hiermee kun je op basis van een sjabloon je pagina opmaken. Jouw eigen ontwerp kun je dan weer toevoegen aan die templates om op een andere pagina ook te gebruiken.

Elementor pagebuilder

De eerste plugin die ik onder de loep neem is Elementor. De grote plus is dat het een gratis plugin is.
Elementor WordPress pagebuilder

De eerste WordPress pagebuilder die ik onderzocht; Elementor.

Een ander voordeel van Elementor is dat je zonder instructies al meteen aan de slag kunt. De plugin is vertaald naar het Nederlands, waardoor je direct en zonder uitleg kunt beginnen met het maken van een leuke pagina.

Het menu van Elementor

Elementor verschijnt in een zijbalk en heeft een strakke moderne look. Er zijn heel veel opties om je pagina mee te maken. Het indelen van je pagina werkt op een overzichtelijke manier in deze gratis plugin.

Wat is uniek in Elementor

Voordat je een pagina kunt oproepen in Elementor, moet je in het dashboard de pagina aanklikken en op de knop “bewerk met Elementor” klikken. Dit hoef je maar één keer te doen, daarna kan je meteen vanuit het paginaoverzicht de pagina openen in Elementor.

In vergelijking met andere pagebuilders voor WordPress bewerk je de inhoud in Elementor niet rechtstreeks op je pagina. Wijzigingen breng je aan in de Elementor zijbalk.

De titel bewerken in Elementor pagebuilder

Eenvoudig een titel bewerken in de Elementor pagebuilder voor WordPress.

Het verschijnt wel meteen op de pagina, dus je ziet meteen hoe je tekst er uit komt te zien.

Handige functies in Elementor

Wat Elementor ook goed doet zijn de social media buttons. Standaard krijgen deze de officiële kleur. Je hoeft dan niet zelf een kleur te kiezen (hoewel dat wel kan), maar krijgt meteen de herkenbare kleur van het logo.

In de instellingen van Elementor kun je aangeven wat voor soort pagina’s er bewerkt kunnen worden met Elementor. Gebruik je WooCommerce op jouw website? Dan kun je in de settings meteen aangeven of je die ook met Elementor wilt opmaken.

Heb je een thema of plugin die extra onderdelen toevoegt aan het dashboard waarmee je inhoud kan toevoegen, dan zijn deze onderdelen ook te bewerken met Elementor.

Geen shortcodes

Besluit je om Elementor niet meer te gebruiken en deactiveer je de plugin? Dan blijft de inhoud van je pagina bestaan. Alle tekst komt onder elkaar te staan en is vrij van opmaak. Je blijft dus niet met nietszeggende shortcodes zitten.

Live Composer pagebuilder

Live Composer is eveneens een gratis plugin voor WordPress. Er is geen premium versie beschikbaar, maar voor sommige extensies en templates moet je wel betalen. Heb je die nodig? Dan lopen de kosten al snel op. Extensies kosten soms 9 dollar en kant-en-klare designs 19 dollar.

Live Composer pagebuilder voor WordPress

Live Composer pagebuilder voor WordPress

Live Composer; eerste indruk

Zodra je Live Composer installeert en activeert, krijg je in het WordPress dashboard meteen een aantal extra menu items. Een praktijk waar niet iedereen van gediend zal zijn.

Deze extra menu items kun je gebruiken in combinatie met de Page Builder, maar daarmee loop ik vooruit op de zaken.

Vanaf het pagina overzicht kun je meteen de pagina openen in Live Composer. Je hoeft de pagina niet eerst te openen in de standaard pagina editor van WordPress om via een knop door te gaan naar de pagebuilder. Dat scheelt elke keer toch weer een klik.

Het menu van Live Composer

De pagina opent in de front end, zodat je meteen ziet hoe de pagina eruit komt te zien. Live Composer heeft haar menu onderaan de pagina in een verticale rij staan.

Wat meteen opvalt is dat Live Composer niet vertaald is vanuit het Engels. Het menu van Live Composer is kleurrijk. Knoppen en balken hebben allemaal een andere kleur.

Het bewerk-menu van Live Composer

Live Composer heeft een menu aan de onderkant van het scherm.

Als je geen premium add-on hebt geïnstalleerd, wordt onder de knoppenbalk reclame getoond. Live Composer heeft veel opties, zoveel zelfs dat je verticaal moet scrollen. Dat is niet ideaal en je moet er behoorlijk aan wennen.

Het is wel mogelijk om het knoppenmenu op te delen. Toch blijft horizontaal scrollen zoals bij de andere pagebuilders veel fijner.

De verschillende kleuren die Live Composer gebruikt zorgt ervoor dat je de verschillende onderdelen makkelijk uit elkaar kan houden. De kleurtjes maken het geheel echter wel wat bont en minder strak als andere pagebuilders.

Net als de andere pagebuilders kan je per onderdeel aangeven of deze op een mobiel apparaat zichtbaar moet zijn of niet. Zo kun je een compleet andere mobiele website maken dan de desktop versie.

Wat is uniek in Live Composer

Live Composer voegt enkele onderdelen toe aan het dashboard van WordPress zoals Downloads, Galeries, Partners, Projects, Staff en Testimonials. Je kunt via het dashboard, buiten de pagebuilder om, hier informatie plaatsen die je dan oproept via de pagebuilder.

Erg handig is dit niet. Je moet de pagebuilder verlaten om de inhoud toe te voegen. Het zijn weer extra clicks die je eigenlijk niet wil maken. Ook maak je bij deze extra onderdelen geen gebruik van een pagebuilder, je bewerkt deze in de normale WordPress editor.

Een bijzondere keus aangezien je de rest van je site in de frontend aan het maken bent.

Handige functies in Live Composer

Pagina’s zijn na installatie van de plugin meteen te bewerken via het pagina overzicht. Er komt een link te staan om de pagina direct te openen in de pagebuilder.

Om pagina’s te hergebruiken is het mogelijk om deze op te slaan. Wil je onderdelen hergebruiken dan kan je alleen die betreffende code exporteren en importeren.

Gratis is beperkt

Live Composer is een gratis plugin, maar het verdienmodel zit in de add-ons die je kunt bestellen. Denk dan aan extra templates of extra functionaliteit.

Wil je bijvoorbeeld WooCommerce producten bewerken, dan heb je hier een extra module voor nodig. Die je moet kopen.

Zodra je Live Composer niet meer wilt gebruiken en de plugin deactiveert, verdwijnt meteen ook alle inhoud van je pagina. Dit is een groot nadeel. Er staat dan helemaal niets meer op de pagina en je bent jouw content dus kwijt.

WP Beaver Builder pagebuilder

Beaver Builder heeft, net als Elementor, een gratis versie en een pro versie. De gratis versie van Beaver Builder is beperkt, maar geeft wel een goed beeld van wat er mogelijk is. Voor deze test heb ik de Pro versie gebruikt.

BeaverBuilder WordPress pagebuilder

WP Beaver Builder is een gebruiksvriendelijke WordPress pagebuilder.

Het menu van Beaver Builder

Beaver Builder heeft een prettige en moderne layout. In een zijbalk moet je eerst selecteren wat voor type onderdeel je wil toevoegen. Daarna klapt er een menu uit waar je de onderdelen kan kiezen.

Het bewerken van de modules gebeurt standaard in het midden van het scherm. Het bewerkscherm zweeft dan voor de module die je aan het bewerken bent, waardoor je niet realtime ziet hoe je aanpassingen eruit komen te zien.

Je kunt het bewerkscherm wel verplaatsen of beeldvullend maken. Er is wel een handig knopje beschikbaar om direct de pagina te bekijken zonder het menu van Beaver Builder.

Net als Elementor is de plugin vertaald naar het Nederlands.

Uniek in Beaver Builder

Bij het activeren van Beaver Builder kom je eerst bij de instellingen terecht. Hier kun je allerlei algemene opties bewerken. Dit komt overeen met de instellingen van de andere page builders.

Beaver Builder opent direct het instellingen venster

Beaver Builder opent direct het instellingen venster.

In deze plugin start je ermee, zodat je het niet kan vergeten. Bij de andere pagebuilders zijn deze opties ook aanwezig, maar moet je wel specifiek naar de instellingen gaan zoeken.

De kans is groot dat je dit vergeet als je snel aan de slag wil met het bewerken van pagina’s.

Ondersteuning voor WooCommerce

Bij de instellingen kun je ook meteen aangeven voor welke soorten pagina’s je de pagebuilder wilt inschakelen. Zo kun je diverse pagina-types kiezen, waaronder het bewerken van WooCommerce productpagina’s.

Vanuit het pagina overzicht is er meteen een optie om de pagina te openen in Beaver Builder, aangeduid met de optie ‘pagebuilder’.

Handige extra’s

Beaver Builder lijkt sterk op Elementor. Er zijn een veel functies hetzelfde; zoals de voortgangsbalk en de accordeon-functie. Toch heeft Beaver Builder enkele modules die zeer aantrekkelijk zijn.

In Beaver Builder kun je diverse modules gebruiken

In Beaver Builder kun je diverse modules gebruiken

Erg handig is bijvoorbeeld de countdown optie. Hiermee kun je aftellen naar een bepaalde datum. Normaal zou je hiervoor een aparte plugin moeten installeren, maar dit is bij Beaver Builder inbegrepen.

Minpuntje is de social-share module. Daar kun je maar drie platformen toevoegen; Facebook (like knop), Twitter en Google.

Belangrijk voordeel is dat de inhoud op je pagina’s blijft staan als je Beaver Builder deactiveert. Net als bij Elementor staat al je tekst onder elkaar zonder opmaak.

Divi pagebuilder

Divi is een premium plugin. Je moet dus betalen om de plugin te mogen gebruiken. Er is geen gratis variant. Divi Builder bestaat uit twee editors; een theme-editor en een pagebuilder.

Dive WordPress pagebuilder

De Divi Builder van Elegant Themes.

Voor dit artikel heb ik alleen de pagebuilder beoordeeld.

Met Divi kun je de pagina al meteen in het dashboard opmaken. Dit lijkt op de manier zoals de pagebuilders van Avada en Enfold doen. Het is ook mogelijk om de editor aan de frontpage te gebruiken zoals de andere pagebuilders.

Deze keuze moet je elke keer maken als je de pagina wil bewerken. Divi is dan ook de enige pagebuilder waarbij je vanuit het pagina overzicht niet direct naar de builder kan gaan.

Het menu van Divi Builder

De pagina opmaken in het dashboard zorgt ervoor dat je een veel kleinere ruimte hebt om de pagina te bewerken. Schermen vallen zo over elkaar heen en je ziet niet meteen hoe de pagina er echt uit komt te zien.

De frontend builder zorgt ervoor dat je een beter overzicht hebt en geeft een echte WYSIWYG-ervaring.

Net als Live Composer maakt Divi gebruik van allerlei verschillende kleuren om de verschillende onderdelen te onderscheiden. Divi heeft geen apart menu. De pagina die je wil bewerken heeft plusjes en als je daar op klikt kun je keuzes maken.

In Divi is het toevoegen van elementen wat omslachtiger

In Divi is het toevoegen van elementen wat omslachtiger.

Het is niet mijn favoriete manier van werken. Een menu is een stuk duidelijker om aan te geven welke opties er zijn. Het is nu een beetje gokken hoe je aan de slag kan.

Uniek in Divi Builder

Divi heeft ontzettend veel opties om modules aan te passen. Bij elk stukje tekst in de module kun je aangeven wat de kleur, lettergrootte, spatiëring en hoogte moet zijn.

Zo kun je gelijke modules er toch heel anders uit laten zien. Zo uitgebreid een module aanpassen is bij de andere pagebuilders niet mogelijk.

Divi is de enige pagebuilder waarbij de rechtsmuis knop een speciaal menu laat zien. Andere pagebuilders tonen hier het standaard browser menu. Zo kun je hiermee blokken op slot zetten, zodat een ander deze niet kan bewerken.

Dit ligt in het verlengde van de optie om slechts enkele modules aan te zetten voor gebruikers, zodat je zeker weet dat er niets gewijzigd kan worden wat niet gewijzigd hoort te worden.

Shortcodes

Zodra je de divi plugin verwijdert blijft je inhoud achter met allerlei shortcodes. Je moet al deze shortcodes weghalen zodat de tekst weer leesbaar wordt. Je houdt daarna net als bij Elementor en Beaver Builder platte tekst over.

Conclusie: kleine verschillen

Van de vier onderzochte pagebuilders is er geen enkele waarmee je slecht af bent.

Elk van deze pagebuilders komt het best tot zijn recht in een theme met een pagina-template dat je over de gehele breedte laat werken. Ik heb getest met Twenty Sixteen, en dit thema heeft niet zo’n full-width pagina template.

Je kunt op zoek naar een theme dat die optie wel heeft, of zelf een full width template maken.

De pagebuilders verschillen op kleine punten van elkaar, maar ze zorgen er allemaal voor dat je veel opmaakmogelijkheden krijgt, waardoor je website er dynamischer uit zal zien.

Bepaal wat voor jou werkt

Uiteindelijk komt het neer op de gebruiksvriendelijkheid van de pagebuilder en dat kan per persoon verschillen. Zitten voor jou de knoppen en functies op een logische plek.

Wat dat betreft vind ik Elementor de fijnste plugin om mee te werken. Deze heeft een heldere layout en logische plaatsing van knoppen en invoervelden. Het is natuurlijk ook mooi meegenomen dat deze WordPress pagebuilder gratis is.