Wat is de Beaver Builder page builder?

Beaver Builder is een paginabouwer voor WordPress. Je sleept blokken op een pagina en past ze aan terwijl je ziet wat er gebeurt, zonder dat je code hoeft te schrijven.

Hij bestaat sinds 2014 en heeft de reputatie stabiel en netjes te zijn. Dat is in deze hoek geen vanzelfsprekendheid.

Ik bouw zelf websites met WordPress en Beaver Builder, dus wat hieronder staat komt uit dagelijks gebruik. Inclusief de dingen die eraan mankeren.

Hoe hij werkt

Je opent een pagina in de bouwer en werkt in de echte weergave van je site. Wat je ziet is wat de bezoeker straks ziet, met hetzelfde lettertype, dezelfde kleuren en dezelfde breedte.

De opbouw is eenvoudig. Een pagina bestaat uit rijen. In een rij zitten kolommen. In een kolom zitten modules. Een module is een tekstblok, een kop, een knop, een afbeelding, een formulier of een galerij.

De instellingen van een module zijn steeds op dezelfde manier ingedeeld: de inhoud zelf, de vormgeving, en een geavanceerd tabblad met marges, zichtbaarheid per apparaat en een eigen CSS-klasse. Zodra je die indeling doorhebt, kun je ook een module bedienen die je nog nooit hebt gebruikt.

Onderin het instelvenster staat een schakelaar voor bureaublad, tablet en telefoon. Veel velden kun je per apparaat apart zetten, zodat een kop van 64 pixels op een telefoon niet drie regels wordt. Dat is de instelling die het vaakst wordt overgeslagen en waar de meeste mobiele problemen vandaan komen. Hoe je die problemen opspoort staat in het artikel over mobiele optimalisatie.

Sjablonen, globale rijen en hergebruik

Je kunt rijen, kolommen en modules opslaan en opnieuw gebruiken. Dat gaat op twee manieren, en het verschil ertussen is groot genoeg om te snappen voordat je begint.

Sla je iets op als gewoon sjabloon, dan krijg je een kopie. Pas je die later aan, dan verandert alleen die ene kopie.

Sla je iets op als globaal, dan staat overal dezelfde versie. Pas je hem op één plek aan, dan verandert hij op alle pagina's tegelijk. Voor een balk met contactgegevens, een blok met beoordelingen of een oproep onderaan elke dienstpagina is dat het verschil tussen een half uur en een middag.

Mijn vuistregel: alles wat op meer dan drie pagina's terugkomt maak ik globaal, ook als ik denk dat het nooit hoeft te veranderen. Het moment dat een telefoonnummer wijzigt komt altijd.

Daarnaast levert Beaver Builder kant en klare sjablonen voor complete pagina's. Die gebruik ik zelden ongewijzigd, maar ze zijn nuttig om een indeling te lenen als je vastzit.

Beaver Themer, het onderdeel dat het verschil maakt

Met de bouwer alleen maak je pagina's. Je koptekst, je voettekst, je blogoverzicht en de weergave van een los artikel komen dan nog steeds uit je thema.

Beaver Themer is een aparte uitbreiding die dat opentrekt. Je bouwt een koptekst als gewone Beaver Builder-indeling en bepaalt zelf waar hij verschijnt: op de hele site, alleen op de blogpagina's, of alleen op één categorie. Hetzelfde geldt voor de voettekst en voor de weergave van een archief.

Het tweede dat Themer toevoegt is de veldkoppeling. In plaats van een vaste tekst zet je in een module een verwijzing naar een veld, bijvoorbeeld de titel van het artikel of een eigen veld uit Advanced Custom Fields. Zo bouw je één artikelweergave die voor elk artikel de juiste inhoud toont.

Wil je een webshop, dan kun je met Themer ook de productpagina en het overzicht van WooCommerce inrichten. Dat is wel het punt waarop je moet weten wat je doet, want een productpagina heeft meer bewegende delen dan een dienstpagina.

Themer heeft een klassiek WordPress-thema nodig, een thema dat de gebruikelijke haken gebruikt om zijn kop en voet te plaatsen. Bij een blokthema komt de koptekst uit de site-editor van WordPress en zit Themer in de weg.

Waar Beaver Builder je pagina's bewaart

Dit klinkt technisch en het bespaart je een keer een ramp, dus lees het even mee.

Je indeling staat niet in het gewone inhoudsveld van WordPress. Beaver Builder bewaart hem als apart veld bij het bericht, in een opgeslagen dataformaat waarin de lengte van elk stukje tekst is meegeteld.

Dat laatste heeft één gevolg dat er echt toe doet. Verhuis je een site naar een ander domein en vervang je de oude URL door de nieuwe met een rechtstreekse opdracht op de database, dan kloppen die lengtes niet meer en verdwijnen je indelingen. Gebruik daarvoor altijd WP-CLI of een verhuisplugin die hiermee omgaat. Dit is de meest voorkomende manier waarop mensen een Beaver Builder-site slopen.

Bij het opslaan schrijft Beaver Builder daarnaast een uitgeklede versie van je tekst naar het gewone inhoudsveld. Daardoor vindt de zoekfunctie van je site je teksten terug, kan je SEO-plugin ze lezen en blijft er iets leesbaars staan als de bouwer ooit uit gaat.

De opmaak zelf komt uit twee bestanden per pagina die in je uploadmap worden weggeschreven. Zie je na een wijziging niets veranderen, dan is dat bijna altijd deze cache. Onder de instellingen van Beaver Builder zit een tabblad met hulpmiddelen waar je hem leegt.

Wat er gebeurt als je hem uitzet

Dit is voor mij het belangrijkste argument en het wordt zelden genoemd.

Zet je Beaver Builder uit, dan blijft je tekst als gewone inhoud staan. Je verliest de vormgeving en de indeling, en je houdt leesbare koppen en alinea's over. Een site die je daarna opnieuw opbouwt begint niet bij nul.

Bij bouwers die met shortcodes werken gaat dat anders. Daar houd je een pagina over vol codes tussen blokhaken, waar geen mens doorheen komt. Bij Elementor blijft je inhoud in de database staan, maar de editor toont een lege of verouderde pagina, want de opgemaakte versie zit in een apart veld dat zonder de plugin niet wordt uitgelezen.

Voor wie een site bouwt die tien jaar mee moet, weegt dat zwaar. Met een bouwer kies je namelijk ook hoe makkelijk je er ooit weer vanaf komt.

Beaver Builder naast Elementor en Divi

De eerlijke vergelijking, want dit is de vraag die iedereen stelt.

Elementor heeft meer mogelijkheden en meer instellingen per element. Groter aanbod aan uitbreidingen en sjablonen, veel meer gebruikers en dus veel meer video's op internet waarin iemand precies jouw vraag beantwoordt.

Beaver Builder produceert schonere code en laadt lichter. Hij heeft minder knoppen, wat je in het begin beperkend vindt en na een jaar prettig. Hij gaat ook minder vaak stuk bij een update, en dat is de reden dat ik hem gebruik voor sites waar ik jaren verantwoordelijk voor blijf.

Divi zit ertussenin qua mogelijkheden en wordt verkocht als abonnement op een heel pakket. De klassieke Divi-versies bewaren de indeling als shortcodes in je inhoud, met alle rommel van dien als je stopt.

Wat je niet moet doen is twee paginabouwers naast elkaar gebruiken. Dat gebeurt vaker dan je denkt, meestal omdat een gekocht sjabloon een andere bouwer meebrengt. Je laadt dan twee keer alle opmaak en je zit voor altijd aan beide vast.

Beaver Builder naast de blokkeneditor van WordPress

WordPress heeft sinds versie 5.0, uit december 2018, een eigen blokkeneditor. Sinds versie 5.9 uit januari 2022 kun je met een blokthema ook je koptekst, voettekst en sjablonen in WordPress zelf bouwen.

Die blokkeneditor is de afgelopen jaren flink beter geworden. Voor een eenvoudige site met tekst, afbeeldingen en een paar knoppen heb je vandaag geen paginabouwer meer nodig, en dat was vijf jaar geleden anders.

Waar Beaver Builder nog steeds wint: de bediening is voor iemand zonder technische achtergrond veel makkelijker uit te leggen. Ik kan een klant in twintig minuten leren zijn eigen tekst en foto's aan te passen. Bij de blokkeneditor duurt dat langer en gaat er meer stuk.

Waar de blokkeneditor wint: hij zit in WordPress, dus je hoeft niets te betalen en niets te onderhouden. En je bent nergens aan vast.

Je kunt ze naast elkaar gebruiken. Per pagina kies je of je hem in de bouwer opent of in de gewone editor. Ik doe dat ook zo: dienstpagina's in Beaver Builder, kennisbankartikelen gewoon in de editor van WordPress. Wat WordPress zelf is en waarom de gehoste variant een ander verhaal is, staat bij het verschil tussen WordPress.com en WordPress.org.

Snelheid

Een paginabouwer maakt je site niet vanzelf snel. Wat je erin stopt bepaalt dat. Vier lettertypes, acht ongecomprimeerde foto's en drie animaties zijn ook in Beaver Builder traag.

De bouwer zelf voegt een beperkte hoeveelheid opmaak en code toe, en die wordt per pagina gebundeld. Dat is netter dan bij bouwers die op elke pagina alles laden.

Waar je op let, op volgorde van opbrengst:

• Comprimeer je afbeeldingen. Verreweg de grootste winst, ongeacht welke bouwer je gebruikt. Zet ze bovendien om naar een modern formaat; hoe dat werkt staat bij webp-afbeeldingen.
• Zet modules uit die je niet gebruikt. In de instellingen kun je per module aangeven of hij beschikbaar is. Hetzelfde geldt voor de pictogramsets: laad je er drie terwijl je er één gebruikt, dan betaalt je bezoeker daarvoor.
• Let op verborgen rijen. Een rij die je op mobiel verbergt wordt nog steeds opgehaald, hij wordt alleen niet getoond. Weglaten is beter dan verbergen.
• Zet caching aan en leeg zowel die cache als die van Beaver Builder na een wijziging. Anders zie je je eigen aanpassing niet en ga je zoeken naar een probleem dat er niet is.
• Kijk naar je hosting. Duurt het al een seconde voordat de server iets terugstuurt, dan is alles wat je aan de voorkant doet dweilen. Meer daarover bij webhosting.

Vindbaarheid

Beaver Builder is niet goed of slecht voor SEO. Hij levert gewone HTML op en Google leest die zonder problemen.

Wat je zelf moet bewaken is de koppenstructuur. De kopmodule laat je vrij kiezen tussen H1 en H6, en de bouwer waarschuwt je nergens. Eén H1 per pagina, daaronder H2's, en geen H4 omdat die toevallig de goede grootte had. Kies het niveau op betekenis en zet de grootte apart.

Verder gelden dezelfde dingen als op elke pagina: een alt-tekst bij elke afbeelding die iets betekent, een fatsoenlijke paginatitel en tekst die ergens over gaat. De basis daarvan staat in het artikel over zoekmachineoptimalisatie.

Eén valkuil die met paginabouwers samenhangt: tekst in een afbeelding. Een mooi vormgegeven blok waarin de tekst onderdeel van de foto is, leest Google niet en een schermlezer ook niet.

Wat het kost en hoe de licentie werkt

Er is een gratis versie in de pluginmap van WordPress met een handvol basismodules. Die is bedoeld om te proberen en niet om een site mee af te bouwen.

De betaalde versies zijn een jaarlicentie waarmee je de bouwer op onbeperkt veel sites mag gebruiken. Het verschil tussen de varianten zit vooral in wat er nog meer bij zit: het eigen thema, gebruik op een multisite-netwerk en de mogelijkheid om de naam van de bouwer te vervangen door die van jezelf. Beaver Themer is een aparte aanschaf. Kijk voor de actuele bedragen op hun eigen site, want die veranderen.

Belangrijk detail: als je licentie afloopt blijft je site gewoon werken. Je krijgt alleen geen updates en geen ondersteuning meer. Dat is netter dan bij partijen waar je site na afloop dichtvalt, en het is wel een reden om te verlengen, want een plugin die niet meer wordt bijgewerkt wordt op termijn een beveiligingsprobleem.

Wat er misgaat en wat je eraan doet

Vier problemen kom ik steeds tegen.

De bouwer blijft laden. Bijna altijd een botsing met een andere plugin, meestal eentje die je code samenperst of je site versnelt. Zet je optimalisatieplugin tijdelijk uit en probeer opnieuw. Helpt dat niet, schakel dan tijdelijk over op een standaardthema om te zien of het daar vandaan komt.

Opslaan lukt niet bij een lange pagina. Dit komt door een limiet in PHP op het aantal velden dat in één keer verstuurd mag worden. Je hoster kan die verhogen. Het gebeurt vooral bij pagina's met tientallen modules, en het is een reden om lange pagina's op te knippen in globale rijen.

Je wijziging is onzichtbaar. Cache. Die van je site, die van Beaver Builder, of die van je browser. Leeg ze in die volgorde.

Na een verhuizing staat alles door elkaar. Meestal doordat de oude domeinnaam nog in de opgeslagen indeling staat, of doordat er bij het vervangen iets is stukgegaan. Terugzetten van een reservekopie en het opnieuw doen met het juiste gereedschap is sneller dan repareren.

Wat in alle vier de gevallen helpt: werk niet rechtstreeks op je live site. Een testomgeving kost een half uur om op te zetten en scheelt je een keer een middag paniek.

Voor gevorderde gebruikers

Onder de eenvoudige buitenkant zit meer dan je denkt.

Er is een module waarin je gewoon HTML kwijt kunt, en per pagina en per site een venster voor eigen CSS. Elke rij en module kun je een eigen klasse geven, zodat je die CSS gericht kunt schrijven in plaats van met brede regels die overal doorheen slaan.

Beaver Builder heeft daarnaast een uitgebreide set haken in PHP waarmee je in de uitvoer kunt ingrijpen. Je kunt eigen modules schrijven die zich net zo gedragen als de ingebouwde. Dat is echt werk voor een ontwikkelaar en het is wel de reden dat je zelden vastloopt.

Formulieren doe je meestal met een aparte formulierplugin die je via een korte code in een module zet. De ingebouwde contactmodule is voor een simpel contactformulier voldoende, maar zodra je voorwaarden, meerdere ontvangers of bijlagen nodig hebt, pak je iets zwaarders. Waar je bij een formulier op let staat in het artikel over contactformulieren.

Ondersteuning en documentatie

De documentatie is goed en dekkend, en dat is voor een plugin geen vanzelfsprekendheid. Zoek daar eerst, want de meeste vragen staan er letterlijk in.

Met een geldige licentie kun je terecht op hun eigen ondersteuningsforum. De antwoorden komen van mensen die het product kennen en niet uit een standaardlijstje.

Daarnaast is er een grote onafhankelijke gebruikersgroep op Facebook waar bouwers elkaar helpen. Dat is de plek waar je hoort of iets een bekende bug is of dat jij iets fout doet.

Er bestaan twee bekende uitbreidingspakketten met extra modules, die je aanschaft als je iets mist. Kijk eerst of je het echt nodig hebt: elke extra set modules is extra code op je site en extra onderhoud.

Voor wie hij geschikt is

Voor mensen die zelf hun site willen kunnen aanpassen zonder code, en voor bouwers die snel iets willen neerzetten dat te onderhouden blijft.

Minder geschikt als je maximale controle over elke pixel wilt zonder eigen CSS te schrijven. Dan is Elementor logischer, of gewoon een eigen thema.

Ook minder geschikt voor een site van drie pagina's zonder toekomstplannen. Daar is de blokkeneditor van WordPress genoeg en scheelt het je een licentie.

Waar hij wat mij betreft op zijn best is: een zakelijke site van tien tot honderd pagina's die door de eigenaar zelf wordt bijgehouden en die over vijf jaar nog moet werken. Dat is precies de situatie waarin de dingen die Beaver Builder saai maken opeens waarde krijgen.

Veelgestelde vragen over Beaver Builder

Kan ik Beaver Builder gebruiken met mijn bestaande WordPress-thema?

Ja. Beaver Builder werkt met vrijwel elk klassiek thema en neemt de pagina over binnen de contentruimte die je thema biedt. Je koptekst en voettekst blijven van het thema, tenzij je Beaver Themer gebruikt.

Bij een blokthema wordt het lastiger. De bouwer werkt dan meestal nog wel op losse pagina's, maar Themer botst met de site-editor van WordPress.

Is Beaver Builder geschikt voor beginners?

Ja, en dat is zijn sterkste kant. De bediening kent weinig knoppen en de logica van rijen, kolommen en modules is in een half uur uit te leggen.

Verwacht wel dat je de eerste keer iets stukmaakt. Maak een reservekopie voordat je op een bestaande site begint.

Wat gebeurt er met mijn pagina's als ik Beaver Builder uitzet?

De opmaak en de kolommen zijn weg, je teksten en koppen niet. Die worden bij elk opslaan ook naar het gewone inhoudsveld van WordPress geschreven, dus je houdt een leesbare pagina over.

Zet je de plugin weer aan, dan staat alles terug zoals het was. De indeling wordt niet gewist door hem uit te schakelen.

Wat is het verschil tussen Beaver Builder en Beaver Themer?

Beaver Builder bouwt de inhoud van losse pagina's. Beaver Themer bouwt de onderdelen daaromheen: koptekst, voettekst, blogoverzicht, artikelweergave en de foutpagina.

Themer is een aparte aanschaf en heeft de bouwer nodig om te werken. Voor een site van vijf pagina's heb je hem niet nodig.

Heb ik het Beaver Builder-thema nodig?

Nee. Het eigen thema zit bij sommige licenties in, en je bent vrij om elk ander thema te gebruiken. Ik gebruik het zelden, omdat een licht thema van een derde partij of een eigen thema meestal beter aansluit.

Is Beaver Builder sneller dan Elementor?

In de praktijk levert Beaver Builder iets minder code op en dat scheelt merkbaar op een langzame verbinding. Het verschil tussen de twee bouwers is alleen kleiner dan het verschil tussen een site met gecomprimeerde afbeeldingen en een site zonder.

Begin dus bij je afbeeldingen, je lettertypes en je hosting. Daarna pas bij de keuze van je bouwer.

Kan ik Beaver Builder en de blokkeneditor door elkaar gebruiken?

Ja. Per pagina en per bericht kies je met welke van de twee je werkt. Ik zet dienstpagina's in de bouwer en artikelen in de gewone editor, omdat een artikel geen indeling nodig heeft.

Wat je niet moet doen is dezelfde pagina in beide bewerken. Dan wint de bouwer en raak je in de war over waar je tekst nou staat.

Blijft mijn website werken als mijn licentie afloopt?

Ja. De bouwer blijft doen wat hij deed en je pagina's blijven staan. Wat vervalt is het recht op updates en op hulp bij problemen.

Op termijn is dat wel een risico. Een plugin die niet meer wordt bijgewerkt loopt uit de pas met nieuwe PHP-versies en met WordPress zelf.

Op hoeveel websites mag ik één licentie gebruiken?

Bij de betaalde varianten op onbeperkt veel sites. Dat is voor bouwers de reden dat ze bij Beaver Builder blijven hangen, want per site betalen loopt bij twintig klanten hard op.

Waarom zie ik mijn wijziging niet terug op de website?

Bijna altijd cache. Leeg eerst de cache van je site of je hostingpakket, daarna die van Beaver Builder onder de hulpmiddelen in de instellingen, en ververs dan je pagina zonder cache in je browser.

Gebruik je Cloudflare of iets vergelijkbaars, dan zit daar nog een laag overheen die je apart moet leegmaken.

Waarom blijft de bouwer hangen op het laadscherm?

Meestal een botsing met een andere plugin. Zet plugins die je code samenpersen of je site versnellen tijdelijk uit, want die grijpen in op precies de bestanden die de bouwer nodig heeft.

Werkt dat niet, schakel dan tijdelijk over op een standaardthema. Blijft het probleem, dan zet je plugins één voor één uit tot je de veroorzaker hebt.

Kan ik met Beaver Builder een webshop bouwen?

Ja, in combinatie met WooCommerce. Je winkelwagen en het afrekenen komen van WooCommerce zelf, en met Beaver Themer kun je de productpagina en de overzichten naar eigen inzicht inrichten.

Voor een eenvoudige shop is dat prima. Bij een grote catalogus loont het om een thema te nemen dat speciaal voor WooCommerce is gemaakt.

Hoe verhuis ik een Beaver Builder-site naar een ander domein?

Met WP-CLI of met een verhuisplugin die met opgeslagen datavelden overweg kan. Vervang de oude domeinnaam nooit met een SQL-opdracht rechtstreeks op de database, want dan raken de meegeschreven tekstlengtes uit de pas en verdwijnen je pagina's.

Leeg na de verhuizing de cache van Beaver Builder, anders wijzen de opmaakbestanden nog naar het oude adres.

Kan ik overstappen van Elementor naar Beaver Builder?

Niet automatisch. De twee bouwers bewaren hun indelingen op hun eigen manier en er is geen omzetting die dat netjes overneemt.

In de praktijk bouw je de pagina's opnieuw en neem je de teksten en afbeeldingen mee. Dat is minder werk dan het klinkt, en het is meteen een goed moment om pagina's die niemand bezoekt weg te laten.