Naar de inhoud

Kennisbank · Webdevelopment

Wat is de Divi page builder?

Maurits 14 min leestijd
divi

Divi is een paginabouwer voor WordPress, gemaakt door Elegant Themes en op de markt sinds 2013. Je stelt een pagina samen uit kant-en-klare onderdelen en past die aan in de weergave die je bezoeker straks ziet, zonder ook maar één regel code.

Hij bestaat in twee vormen die vaak door elkaar worden gehaald: een thema dat je hele site bepaalt, en een plugin die je op elk ander thema kunt gebruiken. Beide zitten in hetzelfde abonnement.

Welke van de twee je nodig hebt

Het Divi-thema neemt je hele site over: koptekst, voettekst, kleuren, lettertypes en pagina-opbouw. De Divi Builder als plugin doet alleen de inhoud van je pagina's en laat de rest aan het thema dat je al hebt.

De keuze is niet ingewikkeld. Bouw je een nieuwe site en wil je alles binnen één omgeving regelen, neem het thema. Heb je een bestaand thema dat je wilt houden, bijvoorbeeld omdat het door een leverancier wordt onderhouden, neem de plugin.

Wat mensen achteraf vervelend vinden: met het thema zit je huisstijl, je menu en je voettekst ook in Divi. Wil je later van bouwer wisselen, dan wissel je meteen van thema. Dat is een grotere ingreep dan alleen je pagina's opnieuw opbouwen.

Hoe je ermee werkt

Een pagina in Divi bestaat uit secties, daarbinnen rijen, daarbinnen kolommen, en daarin modules. Een module is één ding: een tekst, een knop, een afbeelding, een formulier, een prijstabel.

De visuele bouwer opent je pagina zoals bezoekers hem zien. Je klikt op een tekst en typt eroverheen. Je sleept een module naar een andere plek en ziet meteen wat dat doet. Voor iemand die nooit met WordPress heeft gewerkt is dit de meest directe manier van werken die er is.

Elk element heeft drie tabbladen met instellingen: inhoud, ontwerp en geavanceerd. Onder ontwerp zit vrijwel alles wat je met CSS zou doen, maar dan met schuifjes en kleurkiezers. Onder geavanceerd kun je eigen CSS kwijt en klassen toekennen.

Die uitgebreidheid is de kracht van Divi en tegelijk de reden dat een pagina rommelig wordt. Je kunt per element de marge aan vier kanten anders zetten, en dat gaan mensen ook doen.

De Theme Builder

Sinds Divi 4, uit oktober 2019, bouw je ook de vaste onderdelen van je site met dezelfde editor. Koptekst, voettekst, de weergave van een blogartikel, archiefpagina's en de 404-pagina.

Je maakt een sjabloon en bepaalt waar het geldt: op alle pagina's, op één categorie, op alle producten. Dat is precies wat je nodig hebt als je bijvoorbeeld wilt dat elk artikel dezelfde opbouw krijgt zonder dat je het per keer maakt.

Dit onderdeel maakt het verschil tussen een site waarin je pagina's bouwt en een site die als geheel klopt. Het is ook het onderdeel waar de meeste mensen niet aan toe komen, waardoor ze de koptekst met de hand op elke pagina nabouwen.

Sjablonen, presets en je eigen bibliotheek

Elegant Themes levert meer dan tweehonderd complete lay-outpakketten mee, per branche opgezet, met bij elk pakket meerdere pagina's die op elkaar aansluiten. Je importeert er een en vervangt de teksten en afbeeldingen.

Handig om snel te starten, en let op wat er meekomt. Zo'n pakket brengt zijn eigen kleuren en lettertypes mee. Importeer je er drie op één site, dan heb je drie huisstijlen door elkaar.

Waar de echte tijdwinst zit: presets en globale instellingen. Stel je kleuren en lettertypes één keer centraal in en verwijs daar overal naar. Maak een preset voor je knop en gebruik die overal. Wijzigt je huisstijl, dan pas je één ding aan in plaats van honderd blokken.

Secties die terugkomen zet je in de Divi-bibliotheek en maak je globaal. Een globale sectie die je op twintig pagina's gebruikt, pas je op één plek aan. Wie dat niet doet, zit later een middag hetzelfde blok te bewerken.

Waar Divi je pagina's bewaart

Dit is het belangrijkste dat je vooraf wilt weten, want achteraf is het duur.

Divi slaat de opmaak op als shortcodes in de tekst van je bericht of pagina. Dat zijn stukjes tussen blokhaken, zoals de codes die een sectie, een rij of een tekstblok markeren. Je hele ontwerp zit dus in het inhoudsveld van WordPress, verweven met je tekst.

Het voordeel: alles staat op één plek en verhuist mee als je de database kopieert. Het nadeel is groter, en daar gaat de volgende sectie over.

Wat er gebeurt als je Divi uitzet

Zet je Divi uit, dan verdwijnt de opmaak en houd je een pagina over vol codes tussen blokhaken in plaats van leesbare tekst. Voor een bezoeker is dat onbruikbaar, en voor jou is het handwerk om er weer tekst uit te halen.

Zo werkt niet elke bouwer. Bij Beaver Builder blijft je tekst als gewone inhoud staan, omdat de opmaak apart wordt bewaard. Bij Divi is dat niet zo, en dat betekent dat overstappen neerkomt op alles opnieuw opbouwen.

Elegant Themes werkt al een aantal jaren aan Divi 5, een herbouw waarin de opslag niet meer op shortcodes leunt. Wat de stand daarvan is en wat het voor bestaande sites betekent, kun je het beste op hun eigen site nakijken, want dat verandert.

Mijn advies: kies Divi met open ogen. Als je van plan bent hier de komende jaren mee te werken, is het geen probleem. Denk je over drie jaar misschien iets anders te willen, weeg dit dan zwaar mee. Ik zeg dit er altijd bij, want ik heb het te vaak achteraf moeten uitleggen.

Snelheid

Divi laadt van zichzelf behoorlijk wat CSS en JavaScript. Dat is de prijs van een bouwer die zo veel kan: alle mogelijkheden moeten ergens vandaan komen.

Sinds 2021 zitten er instellingen in om dat te beperken. Onder de prestatie-instellingen kun je dynamisch laden van CSS aanzetten, zodat alleen de stijlen worden geladen die een pagina echt gebruikt, en hetzelfde voor de modules. Er is een optie voor kritieke CSS en een om jQuery uit te stellen. Zet ze aan, want een deel staat standaard uit.

Divi bewaart de opgebouwde CSS als bestand in een cachemap. Verander je iets aan je opmaak en zie je het niet terug, dan is dat bijna altijd die cache. Er zit een knop om hem leeg te maken.

Verwacht geen wonderen van de instellingen alleen. De grootste snelheidswinst zit bij elke bouwer op dezelfde plek: je afbeeldingen. Comprimeren en op het juiste formaat aanleveren scheelt meer dan alle andere maatregelen samen, en hoe dat werkt staat in het artikel over Shortpixel en kleine afbeeldingen.

Let daarnaast op je hosting. Een bouwer met veel modules vraagt meer van PHP dan een kaal thema. Op het goedkoopste gedeelde pakket merk je dat in de editor voordat je het op de site merkt.

Vindbaarheid

Divi doet zelf niets aan SEO, en dat is geen verwijt. Je hebt er gewoon een SEO-plugin naast nodig, zoals Yoast, Rank Math of SEOPress, voor je titels, omschrijvingen en sitemap.

Waar Divi wel invloed heeft, is de opbouw van je koppen. In elke tekstmodule kies je zelf het kopniveau, en mensen kiezen dat op grootte in plaats van op betekenis. Zo krijg je pagina's met vier keer h1 of met een h4 boven een h2. Zoekmachines lezen die volgorde als structuur, dus houd één h1 per pagina aan en werk netjes af.

Let ook op de alt-teksten van afbeeldingen. Sleep je een afbeelding in een module, dan neemt Divi de alt-tekst uit je mediabibliotheek over als die er is. Staat daar niets, dan blijft het leeg en merk je dat nooit.

De inhoud die Divi produceert is gewone HTML, dus zoekmachines kunnen er prima bij. Dat het veel HTML is telt vooral mee via de laadtijd.

Toegankelijkheid en wat de Europese regels vragen

Een paginabouwer maakt het makkelijk om ontoegankelijke pagina's te maken. Lichtgrijze tekst op wit, teksten in afbeeldingen, sliders die vanzelf doorspringen, formuliervelden zonder label.

Sinds 28 juni 2025 is dat ook een juridische vraag geworden. De Europese toegankelijkheidsrichtlijn geldt vanaf die datum, in Nederland via de implementatiewet toegankelijkheidsvoorschriften producten en diensten. Die stelt eisen aan onder meer webwinkels, bankdiensten, vervoersdiensten en e-boeken. Bedrijven met minder dan tien medewerkers en een omzet onder de twee miljoen euro zijn voor diensten uitgezonderd.

Voor overheidssites geldt al langer een eigen regeling, met een verplichte toegankelijkheidsverklaring en de eisen uit WCAG op niveau AA. Bouw je voor een gemeente of een zorginstelling, dan is dat het kader waar je aan moet voldoen.

Praktisch betekent dit: zorg voor genoeg contrast, geef elk formulierveld een zichtbaar label, gebruik koppen in de juiste volgorde, en controleer of je site met alleen het toetsenbord te bedienen is. Divi kan dat allemaal, en het gaat niet vanzelf.

Formulieren, lettertypes en de AVG

Divi heeft een eigen contactformuliermodule met een simpele rekensom tegen spam. Voor een eenvoudig formulier voldoet dat. Wil je meer velden, voorwaardelijke logica of een koppeling met je administratie, dan pak je een echte formulierplugin. Waar een goed formulier aan voldoet staat in het artikel over een goed contactformulier.

Twee dingen om te controleren voordat je live gaat. Ten eerste je lettertypes: Divi haalt die standaard bij Google op, waardoor het IP-adres van je bezoeker naar een Amerikaanse server gaat voordat er toestemming is gevraagd. Een rechtbank in München oordeelde in januari 2022 dat dit in strijd is met de AVG, en sindsdien hosten veel Nederlandse en Duitse sites hun lettertypes zelf. In de thema-instellingen kun je Google Fonts uitzetten en eigen lettertypebestanden uploaden.

Ten tweede: alles wat je in een module van buitenaf laadt, van een kaart tot een videospeler, zet gegevens van je bezoeker door naar die partij. Dat hoort achter je toestemmingsvenster, niet ervoor.

De licentie en wat je ervoor krijgt

Er zijn twee vormen: per jaar betalen, of één keer afrekenen voor levenslang gebruik. Allebei gelden ze voor onbeperkt veel websites, en het hele huis komt mee: het Divi-thema, de Divi Builder, het Extra-thema en hun plugins voor nieuwsbriefaanmeldingen en deelknoppen. De bedragen wisselen, dus die zoek je op bij Elegant Themes zelf.

Voor iemand die meerdere sites beheert rekent dat gunstig uit, want je betaalt niet per site. Voor één website is het een andere afweging.

Divi valt onder de GPL. Je licentiesleutel is nodig voor updates en ondersteuning, niet om de software te mogen gebruiken. Verloopt je abonnement, dan blijft je site werken en krijg je geen updates meer, en dat is op termijn een beveiligingsrisico.

Daarnaast is er een marktplaats met uitbreidingen van anderen, en zijn er losse diensten voor het bewaren van je bibliotheek in de cloud en voor teams. Nuttig als je met meerdere mensen aan meerdere sites werkt, overbodig voor één ondernemer met één site.

Divi naast de anderen

Elementor is vergelijkbaar in mogelijkheden, heeft een groter aanbod aan uitbreidingen van derden en een grotere gebruikersgroep. Ook Elementor houdt je pagina's in zijn eigen structuur vast, al staat die niet als shortcode in je tekst.

Beaver Builder kan minder, levert schonere code en laat je tekst staan als je stopt. Wij werken zelf met Beaver Builder, precies om die reden, en ik zeg er meteen bij dat Divi op ontwerpvrijheid wint.

De blokeditor van WordPress zelf is de laatste jaren volwassen geworden en kan voor een eenvoudige site genoeg zijn, zonder extra plugin. Bouw je met Divi, dan zet die de blokeditor opzij op de pagina's die je met Divi maakt.

De keuze hangt vooral af van twee vragen: hoeveel ontwerpvrijheid wil je, en hoe belangrijk vind je dat je later kunt wisselen. Divi scoort hoog op de eerste en laag op de tweede.

Wat er misgaat en wat je eraan doet

Elke pagina net iets anders. Zonder afspraken vooraf krijg je twintig pagina's met twintig verschillende knopkleuren. Leg je stijl vast in globale kleuren en presets voordat je gaat bouwen.

Te diep genest. Secties in rijen in kolommen in rijen. Dat wordt traag, onoverzichtelijk en op mobiel onvoorspelbaar. Houd het plat.

Alles per element instellen. Als je marges en lettergroottes per blok kiest, ben je bij elke wijziging een middag kwijt.

De editor wordt traag. Bij lange pagina's met veel modules merk je dat de bouwer stroperig wordt. Splits de pagina op, of werk in het wireframe-overzicht in plaats van in de visuele weergave.

Mobiel als sluitpost. Divi laat je per apparaat andere waardes instellen. Prettig, en het verleidt mensen ertoe om pas aan het eind naar het kleine scherm te kijken. Controleer elk blok terwijl je bouwt, zoals ook in het artikel over optimaliseren voor mobiel aan de orde komt.

Uitbreidingen van derden. Ze breken soms bij een grote Divi-update. Houd het aantal beperkt en zet updates niet blind op automatisch bij een site die geld verdient.

Ondersteuning en wat je erover kunt vinden

Elegant Themes levert ondersteuning via chat en heeft een uitgebreide documentatie met video's per module. De hoeveelheid materiaal is een van de sterkste kanten van Divi.

Daarnaast is er een grote gebruikersgroep. Voor bijna elke vraag bestaat een uitleg van iemand anders, en er zijn Nederlandse groepen waar je terecht kunt. Bij een minder populaire bouwer zoek je langer.

Wat je in die groepen ook tegenkomt: veel adviezen om een stukje CSS in het veld voor eigen code te plakken. Dat werkt, en houd bij wat je waar plakt. Anders zit er over twee jaar code in je site waarvan niemand meer weet waar hij vandaan komt.

Voor wie Divi geschikt is

Divi past goed bij iemand die zelf wil ontwerpen en daar tijd in wil steken. De vrijheid is echt groot, en met discipline maak je er nette sites mee.

Hij past ook goed bij een bureau of ondernemer met meerdere websites, omdat één licentie voor alles geldt en je je eigen bibliotheek over sites heen kunt hergebruiken.

Hij past minder goed als je een site wilt die je over een paar jaar makkelijk aan iemand anders overdraagt, of als je met een simpele brochuresite genoeg hebt. In dat laatste geval is de blokeditor met een goed thema minder gedoe en sneller.

En hij past niet bij iemand die de site één keer wil laten bouwen en er daarna nooit meer aan wil komen. Dan betaal je voor mogelijkheden die je niet gebruikt en zit je wel vast aan de opslagvorm.

Veelgestelde vragen over Divi

Wat is Divi precies?

Een paginabouwer voor WordPress van Elegant Themes, waarmee je pagina's visueel opbouwt uit secties, rijen en modules. Hij komt in twee vormen: een compleet thema en een plugin die op elk thema werkt.

Is Divi geschikt voor beginners?

Ja, het werken zelf is snel te leren omdat je direct ziet wat je doet. De valkuil is de hoeveelheid instellingen. Zonder afspraken over kleuren en lettertypes vooraf maak je een site die er per pagina anders uitziet.

Wat is het verschil tussen het Divi-thema en de Divi Builder?

Het thema bepaalt je hele site, inclusief koptekst, voettekst en huisstijl. De plugin bouwt alleen de inhoud van je pagina's en laat de rest aan het thema dat je al gebruikt. Beide zitten in hetzelfde abonnement.

Wat gebeurt er als ik Divi uitschakel?

Je pagina's tonen dan de shortcodes waarin de opmaak is opgeslagen, in plaats van leesbare tekst. Je inhoud is niet weg, en hij is zonder handwerk niet bruikbaar. Dit is de belangrijkste reden om vooraf goed na te denken over deze keuze.

Is Divi SEO-vriendelijk?

Divi doet zelf niets aan SEO en werkt prima samen met Yoast, Rank Math of SEOPress. Let zelf op je kopstructuur en je alt-teksten, want daar kan een bouwer je makkelijk laten afdwalen. De laadtijd is het punt waar je aandacht aan moet geven.

Maakt Divi mijn website traag?

Divi laadt meer dan een kaal thema. Met de prestatie-instellingen voor dynamisch laden van CSS en modules is dat grotendeels op te vangen. Comprimeer daarnaast je afbeeldingen, want daar zit bij vrijwel elke site de grootste winst.

Is Divi responsief?

Ja, en je kunt per apparaat andere waardes instellen voor lettergrootte, marges en zichtbaarheid. Dat werkt goed en je moet het wel controleren terwijl je bouwt. Wat er technisch achter zit staat in het artikel over responsive webdesign.

Geldt mijn Divi-licentie voor meerdere websites?

Ja, voor onbeperkt veel. Dat maakt Divi aantrekkelijk voor wie een handvol sites beheert, want je betaalt niet per stuk. De actuele voorwaarden en bedragen staan bij Elegant Themes.

Wat gebeurt er als mijn licentie verloopt?

Je site blijft draaien, want Divi valt onder de GPL. Wat wegvalt zijn de updates en de ondersteuning. Een bouwer die jaren niet wordt bijgewerkt is op termijn een risico, dus laat het niet te lang liggen.

Kan ik van Divi overstappen naar een andere bouwer?

Technisch kan het, en in de praktijk komt het neer op opnieuw opbouwen. Je teksten kun je met wat werk uit de shortcodes vissen, je opmaak niet. Reken op een verbouwing, niet op een export.

Wat is de Divi Theme Builder?

Het onderdeel waarmee je ook je koptekst, voettekst, blogartikelen en archiefpagina's met dezelfde editor bouwt, en per sjabloon bepaalt waar het geldt. Het zit sinds Divi 4 uit oktober 2019 in het pakket.

Kan ik Divi combineren met WooCommerce?

Ja. Er zijn modules voor productoverzichten, prijzen en de winkelwagen, en met de Theme Builder maak je een eigen sjabloon voor je productpagina's. Test het afrekenproces daarna helemaal door, want dat is het deel waar je geld aan verdient.

Heeft Divi ingebouwde splittests?

Ja. Je kunt twee varianten van een blok tonen en laten meten welke beter presteert. Dat zit bij de meeste concurrenten niet standaard in het pakket. Bruikbaar is het pas bij genoeg bezoekers, want anders zegt de uitkomst niets.

Werkt Divi samen met de blokeditor van WordPress?

Op pagina's die je met Divi bouwt neemt Divi het over van de blokeditor. Op andere pagina's en berichten kun je gewoon de blokeditor blijven gebruiken. Door elkaar heen werken op dezelfde pagina gaat niet.

Moet ik een childthema gebruiken bij Divi?

Alleen als je code toevoegt aan de themabestanden. Voor eigen CSS en kleine aanpassingen zijn de velden in de thema-instellingen genoeg, en die blijven bij een update gewoon staan. Ga je functies aanpassen, maak dan wel een childthema.

Dit artikel hoort bij Webdevelopment. Daar vind je meer uitleg over hetzelfde onderwerp.

Een vraag over dit onderwerp?

Vertel waar je tegenaan loopt.

Maurits denkt met je mee en geeft je een praktisch antwoord.

reactie dezelfde werkdag
Maurits van Platform Pro

Vertel kort waar je aan denkt

Nu gesloten, ik reageer de volgende werkdag

Maurits leest je bericht en neemt persoonlijk contact met je op.

Dit veld is bedoeld voor validatiedoeleinden en moet niet worden gewijzigd.
Dit veld is verborgen bij het bekijken van het formulier