Categorie: Divi

Toen Divi in 2013 werd gelanceerd was het één van de eerste drag & drop page builders voor WordPress. In 2016 zorgde de introductie van Divi’s Visual Builder voor een revolutie in hoe page builders werkten, samen met Elementor dat in hetzelfde jaar werd gelanceerd. Voor het eerst kon je werken in de voorkant van je website, zodat je tijdens het bouwen precies kon zien hoe je pagina eruit zou zien voor bezoekers. In 2019 lanceerde Divi de theme builder, waarmee je alle onderdelen van je site in Divi kon bouwen, inclusief headers, footers en templates. In november 2022 kondigde Elegant Themes (het bedrijf achter Divi) aan dat er een compleet nieuwe versie van Divi zou komen, Divi 5 genoemd. 

Wat is er nieuw in Divi 5?

In de oorspronkelijke aankondiging werd gezegd dat Divi 5 aanvankelijk geen nieuwe functies zou bieden. Deze update was erop gericht om Divi helemaal vanaf de grond opnieuw op te bouwen op een nieuwe, toekomstbestendige technische basis. De ontwikkeling van Divi 5 duurde echter veel langer dan verwacht en het zou bijna twee jaar duren voordat gebruikers een alpha versie van Divi 5 hadden om op hun eigen website mee te experimenteren.Hoewel deze versie een wat modernere en snellere interface had bracht het niets nieuws. Sterker nog, er ontbraken nog steeds een flink aantal functies uit Divi 4. Ondertussen bleven de concurrenten van Divi niet stilzitten, waardoor veel gebruikers overstapten op pagebuilders met meer features zoals Greenshift, Bricks en Elementor.

De Divi Feature Swap

Daarom kwam Elegant Themes in januari 2025 de Divi Feature Swap; een aantal minder populaire/belangrijke functies uit Divi 4 zouden worden uitgesteld of geschrapt, en de bespaarde tijd zou worden gebruikt om een aantal veelgevraagde nieuwe functies te ontwikkelen. Nou, ze stellen zeker niet teleur!

Custom breakpoints voor Divi 5

Slechts een paar weken later kondigde Elegant Themes de eerste nieuwe functie aan, en het was een zeer belangrijke: custom breakpoints.

Breakpoints bepalen op welke schermresolutie je bepaalde aanpassingen kunt doen, zoals het mobiele menu tonen in plaats van het desktop menu, en kolommen onder elkaar plaatsen in plaats van naast elkaar.

In Divi 4 waren er slechts 3 breakpoints met een vaste breedte; de eerste was voor desktop, de tweede voor tablet met 980 px en de derde voor mobiel met 767 px.

Dat was erg beperkend; het desktopmenu zag er bijvoorbeeld niet meer goed uit op een tablet in landscape-modus, maar de resolutie daarvan is meestal 1180px of 1024px. Het tablet-breekpunt van Divi 4 heeft echter een vaste resolutie van 980px, waardoor het niet mogelijk was het mobiele menu te tonen op tablets in landscape.

Met de nieuwe aanpasbare breakpoints kun je die 980px eenvoudig wijzigen naar 1024px of 1180px, of een nieuw breakpoint toevoegen; Divi 5 ondersteunt maximaal 7 verschillende breakpoints.

Divi Presets

Presets zijn een belangrijke feature om je styling consistent en onderhoudsvriendelijk te houden. Met een preset kun je een standaard design creëren dat je vervolgens kunt hergebruiken op de rest van je site. Als je een preset aanpast op 1 plek worden je wijzigingen automatisch doorgevoerd op alle andere plaatsen waar je die preset hebt gebruikt.

Geavanceerde webbouwers zullen dit concept herkennen als CSS classes, maar Divi’s preset systeem is wel wat minder uitgebreid dan een echt class systeem zoals builders als Bricks en Greenshift dat hebben. Zo kun je bijvoorbeeld maar 1 preset tegelijk toevoegen aan een module of instelling.

Divi 4 had ook al presets, maar Divi 5 brengt deze naar heel nieuw level met option group presets.

In Divi 4 kon je alleen een preset maken voor de hele module, maar in Divi 5 kun je presets maken voor vrijwel iedere styling optie. Je kunt dus presets maken voor bijvoorbeeld achtergronden, borders, schaduws enzovoorts, en je bent niet meer beperkt tot hetzelfde type module zoals in Divi 4; je kunt presets gebruiken in elke module (of sectie, rij, kolom) die de betreffende styling optie heeft.

Divi kopen of upgraden met 20% korting? Profiteer nu van de Divi Anniversary Sale!

Twijfel je al even om Divi te kopen of je abonnement om te zetten naar een lifetime licentie?  Dan is dit je kans, want alleen in deze periode geeft Elegant Themes de hoogste korting van dit jaar; maar liefst 20%! Daarnaast profiteer je van kortingen tot 50% op Divi addons in de marketplace. Klik dus direct op de knop hieronder een profiteer ook!

Variabelen, relatieve HSL kleuren en geavanceerde CSS units

De volgende updates waren eveneens gericht op het bouwen van consistente en onderhoudsvriendelijke websites, door gebruik te maken van variabelen en geavanceerde css units als clamp en calc.

Zo kun je bijvoorbeeld een variabele maken met de naam “afgeronde hoeken”, die je overal kunt gebruiken waar je afgeronde hoeken wilt. Op die manier hoef je niet na te denken of op te zoeken welke waarde je ook alweer had gebruikt voor afgeronde hoeken, je hoeft alleen maar een logische naam te onthouden (of te selecteren).

Bovendien geven variabelen je globale controle; als je later besluit dat je hoeken meer of juist minder afgerond wilt hebben pas je de waarde aan op 1 plaats en het wordt overal waar je die variabele gebruikt hebt automatisch aangepast.

Divi zou Divi niet zijn als ze dit niet zo gemakkelijk mogelijk voor je zouden maken, dus ze hebben ook een variable manager gemaakt

Divi gaat echter een stap verder; je kunt niet alleen variabelen instellen voor css attributen, maar je kunt ook globale teksten en links toevoegen voor bijvoorbeeld je telefoonnummer en e-mail adres, en afbeeldingen voor dingen als je logo. Als je telefoonnummer, e-mail adres of logo ooit wijzigt hoef je dat dus alleen maar aan te passen in de variable manager en vervolgens wordt het overal waar je de betreffende variable gebruikt hebt automatisch aangepast.

Divi 5 introduceert ook een heel nieuw kleuren management systeem, eveneens gebaseerd op variabelen (en HSL kleuren).

Bouw elke gewenste layout met nested rows, module groups en flexbox controls

Presets en variabelen zorgen ervoor dat je een onderhoudsvriendelijke website kunnen maken, maar hoe zit het met flexibiliteit?

In Divi 4 kon je slechts kiezen uit 20 rij structuren, en hoewel dit in de meeste gevallen voldoende was is het niet erg flexibel. Bovendien werden alle kolommen vanaf het tablet breakpoint onder elkaar geplaatst, dus een layout met meerdere kolommen op tablet of mobiel was niet mogelijk.

Divi 5 introduceerde allereerst nested rows, waarmee je nieuwe rijen in de kolom van een andere rij kon toevoegen, Daarmee kun je dus veel flexibere layout bouwen.
Maar helaas kun je daarmee nog steeds geen andere kolomstructuur selecteren per breakpoint.

Dat probleem werd een soort van opgelost toen Divi 2 maanden later eindelijk flexbox controls kreeg. Ik zeg “een soort van”, want flexbox werkt helaas niet met Divi’s rij systeem. Als je echter een rij met 1 kolom toevoegt en je alle modules in die kolom toevoegt kun je wel flexbox gebruiken.

Daarnaast heeft Divi 5 een nieuwe group module; een container waarin je meerdere modules kunt groeperen en de layout kunt bepalen met flexbox.

Loop builder

Moderne, onderhoudsvriendelijke websites maken gebruik van dynamische content, wat betekent dat de content vanuit 1 plek beheerd wordt (net zoals variabelen).

Het bekendste voorbeeld van dynamische content in WordPress zijn blog berichten. Je beheert je blog berichten immers in 1 plek – onder “berichten” in de admin omgeving, en deze worden automatisch toegevoegd op je nieuwspagina (en andere pagina’s waar je deze wilt tonen, bijvoorbeeld op de homepage zoals ik doe) met Divi’s blog module. Zo’n grid met berichten noem je een “loop”.

Hetzelfde geldt voor bijvoorbeeld WooCommerce producten; je beheert deze onder het kopje “producten” in de WordPress admin omgeving, en er is een “products” module waarmee je een grid (= loop) met al je producten kunt tonen op je winkelpagina, je productenpagina’s enzovoorts.

In Divi 4 kon je al een custom template bouwen voor individuele berichten en producten met de Theme Builder, maar het blog grid en product grid waren zeer beperkt; je kon enkele elementen in- of uitschakelen en kiezen of je alles onder elkaar of in 3 kolommen wilde weergeven maar dat was het wel zo’n beetje.

Het was bijvoorbeeld niet mogelijk de volgorde van elementen aan te passen (bijvoorbeeld de berichttitel boven de uitgelichte afbeelding weergeven), laat staan dat je extra elementen zoals custom velden kon toevoegen.

De nieuwe loop builder in Divi 5 brengt daar verandering in. Nu kun je je loops (grids) bouwen zoals je wilt, met elke module die je wilt.

Bovendien kun je nu ook custom velden toevoegen. Zo kan ik nu bijvoorbeeld een custom post type toevoegen voor mijn portfolio met de gratis Advanced Custom Fields plugin. Daarmee kan ik custom velden toevoegen voor dingen als de website link, beschrijving en klantnaam, en deze allemaal weergeven in mijn portfolio grid.

Interactions

Interactions was een verrassing die in eerste instantie niet was aangekondigd, maar wel behoorlijk krachtig is. Met interactions kun je een element manipuleren op basis van wat een gebruiker doet.

Voor elke interactie kun je een trigger en een actie instellen. Op de afbeelding rechts heb ik bijvoorbeeld een “click” trigger ingesteld, en de actie is om een sectie te tonen die in eerste instantie verborgen was. Op die manier kun je eindelijk een popup maken in Divi!

Andere triggers zijn “mouse enter” en “mouse exit” waarmee je hover effecten kunt creeren, en “viewport enter” en “viewport exit” waarmee je scroll interacties kunt maken. Tenslotte is er ook een “on load” trigger.

De acties die je kunt toevoegen zijn het tonen of verbergen van een element, het toevoegen of verwijderen van een preset, en, voor geavanceerde gebruikers, het toevoegen of verwijderen van custom attributes en cookies. Verder kun je nog scrollen naar een ander element en “mirror mouse movements” voor interactieve effecten die reageren op de muisbeweging.

Waarom is Divi zo populair?

Divi 5 heeft dus een hoop nieuwe, broodnodige features toegevoegd de Divi weer terug in het spel brengen. Maar Divi vormt al jaren de basis voor miljoenen websites. Wat maakt Divi zo populair? 

Zoals ik al schreef in het begin van dit artikel is de Divi Builder is een enorm krachtige drag & drop front-end page builder waarmee je alles live op de voorkant van je site aanpast zodat je direct het effect van je aanpassingen ziet.

Dus als je dingen als kleuren, randen, achtergronden, marge / padding, animaties enzovoorts aanpast zie je de pagina in real time veranderen, en je ziet het exact zoals bezoekers van je website het ook zien. Het aanpassen van teksten is een kwestie van klikken en typen.

 

De Divi Theme Builder

Als ik zeg dat je met de Divi Builder alles kunt aanpassen bedoel ik ook echt alles;
sinds de lancering van Divi 4 kun je met de Divi Builder ook je header, footer en allerlei templates aanpassen. Zo kun je helemaal zelf bepalen hoe je berichten template, archieven, WooCommerce product pagina, 404 pagina enzovoorts eruit komen te zien. Dat maakt van Divi een complete theme builder in plaats van alleen een page builder.

Het belangrijkste onderdeel van elke template builder is dynamische content.
Dat betekent dat je data niet per pagina handmatig invoert, maar die data automatisch uit de database haalt. 

Als je bijvoorbeeld je blog template aan het bouwen bent kun je een afbeelding module invoegen, en automatisch de uitgelichte afbeelding van een bericht daar invoegen. Daarnaast kun je een tekst module plaatsen waarin je automatisch de bericht titel laadt, en datzelfde geldt voor de auteur, publicatiedatum, categorieën etc.

En als je een WooCommerce product pagina maakt kun je bijvoorbeeld de prijs, product info, reviews, gerelateerde producten, reviews enzovoorts plaatsen waar je maar wilt.

Je kunt zoveel templates maken als je maar wilt, dus je kunt bijvoorbeeld een aparte template maken voor je homepage met een andere header dan de rest van de site, een ander uiterlijk voor je blog berichten of zelfs een compleet eigen layout voor een bepaalde pagina, bijvoorbeeld een landingspagina of je contactpagina.

Het bouwen van een template werkt precies hetzelfde als het bouwen van een normale pagina, dus je kunt alle Divi modules en hun styling opties gebruiken
(ook in de header en footer). Dat geeft je dus heel veel design vrijheid!

Ruim 40 Divi modules

Divi heeft standaard meer dan 40 modules. Dit zijn content elementen; zo typ ik deze tekst in een tekst module, de afbeelding hiernaast staat in een afbeelding module etc.

Er is onder andere een video module, een galerij module, een Google Maps module, een contactformulier module, een e-mail opt-in module om meer inschrijvingen op je nieuwsbrief te krijgen, een countdown timer module, een geanimeerde nummer module, een afbeeldings-, berichten en video slider, een accordeon module, een referenties module, prijstabellen enzovoorts.

Als je een webshop met WooCommerce hebt krijg je daar nog eens 16 modules bij.

Er is een zoekfunctie aanwezig waarmee je de gewenste module snel kunt vinden, en hoewel de modules er standaard al prima uit zien zijn er een hele hoop styling opties beschikbaar om ze exact zo vorm te geven als je wilt.

Styling opties

Divi biedt waarschijnlijk de meeste styling opties van alle page builders die ik geprobeerd heb. Enkele dingen die je kunt aanpassen in de styling opties zijn:

• Kleuren (waarbij je standaard kleuren en globale kleuren kunt instellen)
• Achtergronden (ook verloopkleuren, afbeelding of een video achtergrond)
• Lettertypes en grootte
• Box en tekst schaduw
• Uitlijning
• Minimale en maximale breedte en hoogte
• Randen (inclusief shape dividers)
• Kleurenfilters
• Transformatie opties, waarmee je elementen kunt schuin trekken, roteren en meer
• Animaties (zowel entry animaties als scroll animaties)

• Enzovoorts 

Bovendien zijn die styling opties veel visueler weergegeven dan bij andere builders, wat Divi erg gebruiksvriendelijk maakt. 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 hierboven). 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.

Responsive content

Deze styling opties zijn beschikbaar voor vrijwel elk element in Divi: je vindt ze bij elke module, maar ook bij kolommen, rijen, secties…
en je kunt zelfs aparte stijlen instellen voor verschillende apparaten. In het eerste screenshot op deze pagina zie je hoe dat werkt: bij heel veel elementen zie je een telefoon icoontje als je er met de muis overheen gaat. Als je op dat icoontje klikt zie je 3 tabbladen: desktop, tablet en telefoon. 

Als je bijvoorbeeld bij de font grootte op dat icoontje klikt kun je een H2 kop 26px groot maken op desktop, 22px op tablet en 18px op een smartphone. Zo kun je ook de uitlijning, (achtergrond)kleur, rand, animaties, transformaties enzovoorts aanpassen. Natuurlijk kun je er ook voor kiezen om een module, kolom, rij of sectie helemaal te verbergen op mobiel, tablet of desktop.

Maar wat Divi echt uniek maakt is wat ze responsive content noemen: zo kun je niet alleen de font grootte en kleur van een tekst aanpassen op mobiel, je kunt zelfs een hele andere tekst (of afbeelding, video enzovoorts) voor mobiel invoeren! Dus als je koptekst te lang is voor op een smartphone kun je deze gewoon aanpassen naar een kortere tekst voor mobiel, terwijl de desktop versie blijft zoals die was. Wow!

Overigens kun je al deze dingen ook instellen voor hover, dus als je er met de muis overheen gaat.

Divi heeft ook een ingebouwde simulator zodat je snel kan zien hoe je pagina eruit ziet op een tablet of smartphone.

Divi presets, de Divi Library en meer

Je bent een flinke tijd bezig geweest om die ene referentie exact zo te krijgen als je wilt, en nu wil je datzelfde design ook gebruiken voor alle andere referenties.

Geen probleem, Divi heeft enkele handige features waardoor je niet iedere module handmatig hoeft te gaan stylen 🙂

Om te beginnen kun je simpelweg de styling van een module kopiëren en plakken in de volgende module. Je kunt ook alleen een bepaalde styling optie kopiëren, zoals bijvoorbeeld de H2 koptekst kleur.

Je kunt ook de styling instellingen uitbreiden naar alle andere modules op dezelfde pagina, of alleen naar de modules in dezelfde rij of sectie. Dat scheelt een hoop tijd, want zo hoef je ze niet steeds handmatig te plakken in elke module.

Maar wat als je nu op iedere pagina referenties hebt staan, en je wilt dat al deze referenties dezelfde stijl krijgen? Dat is waar Divi’s Presets van pas komen.

Met Divi Presets kun je de styling niet alleen kopiëren en plakken, maar ook opslaan als standaard instelling. Zo kun je instellen dat alle referenties een blauwe koptekst hebben en een zwart-wit foto. Als je dan op een gegeven moment besluit dat je toch liever een rode koptekst wilt hoef je dat maar op 1 plek aan te passen, en alle referenties die dezelfde preset gebruiken worden automatisch mee aangepast.

Het mooiste is echter dat je ook meerdere variaties kunt opslaan. Je kunt dus de eerste referentie een blauwe koptekst geven, de tweede referentie een rode en de derde referentie een groene. Die sla je op als “referentie blauw”, “referentie rood” en “referentie groen”, en bij een nieuwe referentie kies je gewoon welke stijl je wilt toepassen. Als je CSS beheerst ken je deze manier van werken als CSS classes.

Je kunt je design ook opslaan in de Divi Library, wat te vergelijken is met de WordPress media bibliotheek, maar dan voor Divi elementen. Je kunt elk element opslaan in de Divi Library – van een knop tot een tekstblok en van een rij tot een complete pagina layout, inclusief alle styling en content.  

Vanuit de library kun je die elementen overal op de website importeren, en je kunt ze zelfs exporteren om ze in een andere Divi website te gebruiken.

Je kunt elk element ook opslaan als global element, wat erg fijn is voor dingen als knoppen. Als je de kleur van een global knop aanpast zal die automatisch ook worden aangepast op elke andere plek op je website waar die knop gebruikt wordt.

Het verschil tussen presets en de library is dat in de library ook alle content (teksten, afbeeldingen enzovoorts) gesynchroniseerd wordt, terwijl dat bij presets alleen de styling is.

 

Layout packs

Naast je eigen designs vind je ook een hele hoop layout packs in de Divi Library.

Layout packs zijn professioneel ontworpen templates die standaard bij Divi geleverd worden. Alle layout packs bestaan uit meerdere templates in dezelfde stijl; zo is er een layout pack voor een restaurant, met een template voor de homepage, een template voor de contactpagina, een template voor het menu enzovoorts.

Er wordt elke week een nieuw layout pack toegevoegd, dus als je Divi koopt krijg je niet slechts 1 thema maar eigenlijk honderden thema’s in 1!

Bekijk alle Divi Layout packs.

Nog steeds niet overtuigd? Hier zijn nog een aantal redenen waarom ik fan ben van Divi 🙂

• Divi heeft een zeer actief ontwikkelingsteam, waardoor er zeer regelmatig nieuwe functies aan Divi worden toegevoegd.
• Als je serieus bezig bent met conversie optimalisatie is Divi Leads een hele waardevolle – en unieke – toevoeging. Daarmee kan ik bijvoorbeeld de button hieronder testen in meerdere varianten en kijken welke variant het beste presteert. Ik zou dus een button met een gele en een groene achtergrond kunnen maken, waarbij Divi aan de ene bezoeker de gele button toont en aan de andere bezoeker de groene. Vervolgens zie ik op welke button het meest wordt geklikt, en dus welke variant het beste werkt.
• Divi heeft een ingebouwde role editor, waarmee je voor iedere gebruikersrol kunt instellen wat deze wel en niet mag doen. De meeste andere builders bieden ook wel een role editor, maar die zijn vaak beperkt tot 2 of 3 presets; een gebruikersrol kan of alle elementen in de builder gebruiken, of de builder helemaal niet gebruiken. Sommige builders bieden nog een derde optie waarbij de gebruiker alleen teksten en afbeeldingen kan aanpassen. In Divi kun je echter veel gedetailleerder instellen wat een gebruiker wel en niet kan doen; wil je bijvoorbeeld dat je klant wel achtergrondkleuren kan aanpassen, maar niet de kolomindeling? Dan kun je dat gewoon zo instellen.
• Naast het Divi thema en de losse Divi builder plugin krijg je er ook enkele leuke plugins bij waarvan de Monarch social sharing plugin en de Bloom e-mail opt-in plugin zeker de moeite waard zijn.
• Divi wordt uitstekend ondersteund. Er is een uitgebreide helpfunctie met video tutorials, zowel op de website als in Divi zelf, en er worden vele tutorials gepubliceerd over allerlei onderwerpen. Daarnaast is het support team bereikbaar via chat en niet te beroerd om een stukje maatwerk code te schrijven om je wensen te realiseren.
• Last but not least: de licentie van Divi is zeer gunstig voor webbouwers, grafisch ontwerpers en andere mensen die regelmatig een website bouwen. Voor een eenmalige investering van een dikke 200 euro mag je alles van Elegant Themes gebruiken op zoveel websites als je maar wilt, en heb je ook nog eens recht op levenslange updates en support. De meeste premium thema’s en plugin licenties gelden slechts voor 1 website, en/of rekenen een jaarlijks bedrag voor updates en support. 

Wat kost Divi?

Divi kost $ 89,00 per jaar, maar als je Divi koopt via onderstaande knop krijg je 10% korting.

Je mag dan alle thema’s en plugins van Elegant Themes gebruiken op zoveel sites als je maar wilt.
Als je na een jaar besluit je lidmaatschap te stoppen mag je Divi gewoon blijven gebruiken, maar je ontvangt dan geen updates en support meer.

Om die reden heb ik zelf gekozen voor de lifetime licentie, die $ 224,00 kost via onderstaande knop (wederom met 10% korting).

Dat is een flink bedrag, maar daarvoor krijg je wel levenslang support en updates zonder verdere (jaarlijks) terugkerende kosten. Je hebt de investering voor een lifetime licentie
dus in 3 jaar tijd terugverdiend, en aangezien je op de langere termijn eigenlijk niet zonder updates kunt raad ik je aan hiervoor te kiezen (als je kunt missen natuurlijk).

Divi lifetime licentie kopen met iDeal of BanContact

Je kunt bij Elegant Themes (het bedrijf achter Divi) alleen een lifetime licentie aanschaffen met een creditcard, maar lang niet iedereen in Nederland en Belgie heeft een creditcard. 

Heb jij ook geen creditcard maar wil je toch een Divi lifetime licentie aanschaffen?
Dan kun je deze via het formulier hiernaast via mijn website betalen met iDeal of Bancontact. 

Ik koop vervolgens met mijn creditcard een persoonlijke Divi licentie voor je. Je krijgt dus gewoon een eigen account bij Elegant Themes, en een eigen licentie met levenslange updates die je op een onbeperkt aantal websites kunt gebruiken. Je kunt ook gewoon gebruik maken van de support van Elegant Themes.

Waarom ik dit aanbied? Omdat ik die licentie aanschaf via mijn affiliate account. Elegant Themes betaalt mij vervolgens een percentage van de aanschafprijs als commissie. Dat kost jou verder helemaal niets, maar maakt het voor mij wel de moeite waard.

 

 

Zelf je website bouwen, maar dan wel met wat hulp van een expert?

Kies dan voor Bobs Website in 1 dag pakket! Met dit pakket gaan we samen een hele dag achter de computer zitten (kan eventueel ook online via Zoom) en is aan het einde van de dag (de basis van) je nieuwe website klaar!

Van tevoren regelt Bob alle technische zaken zoals het instellen van WordPress en het installeren van alle benodigde plugins, zodat we die dag meteen aan de slag kunnen met het leukste gedeelte; het ontwerpen en vullen van de website 🙂 .

Doordat we de website samen bouwen leer je precies hoe WordPress werkt en hoe je alles kunt aanpassen.

En kom je er toch even niet uit? Dan mag je Bob altijd even bellen of mailen, want je krijgt 3 maanden support!

Bekijk alle details van Bobs Website in 1 dag pakket

Heeft Divi ook nog nadelen?

Uiteraard, ook Divi is niet perfect. Enkele nadelen zijn:

• Toch die prijs. Zoals ik al schreef is die zeer gunstig voor mensen die regelmatig websites bouwen, maar als je maar 1 of 2 websites wilt maken is Divi wat duurder dan de concurrentie.
• De leercurve. Divi is een zeer uitgebreide tool en het kost flink wat tijd om alle mogelijkheden te ontdekken. Hoe gebruiksvriendelijk Divi ook is, je zal er even aan moeten wennen. Zoals ik al zei aan het begin van dit artikel, ook voor mij was het geen liefde op het eerste gezicht 😉
• Hoewel Divi dus regelmatig wordt uitgebreid met nieuwe features gaat de ontwikkeling wat minder snel dan bij sommige concurrenten. Zo hadden sommige andere page builders al een jaar eerder belangrijke features zoals de theme builder en het zelf kunnen bouwen van WooCommerce pagina’s.

Welke alternatieven voor Divi zijn er?

Lees mijn uitgebreide WordPress page builder vergelijking : Divi vs Elementor, Brizy, Thrive Architect en Gutenberg

Divi vs Elementor

Elementor is geen compleet thema maar een losse page builder die je met vrijwel elke WordPress thema kunt gebruiken, net als bij de Divi builder plugin dus.

Elementor is de enige page builder waar ik als Divi gebruiker wel eens jaloers op ben.

Ook Elementor is namelijk volop in ontwikkeling, en er komt dan ook regelmatig een Facebook post voorbij waarin weer een nieuwe gave feature wordt aangekondigd die nog niet in Divi zit waarvan ik denk “dat wil ik ook!”.

Zo had Elementor al maanden voor Divi shape dividers, een zeer uitgebreide formulier module, een theme builder waarmee je de header en footer van je thema kunt aanpassen, een WooCommerce pagina builder, een popup builder enzovoorts.
 

Elementor werkt volledig aan de voorkant van je site zodat je direct ziet welk effect een aanpassing heeft, net zoals dat bij Divi mogelijk is. Net als in Divi kun je de padding en margin instellen door deze simpelweg naar de gewenste breedte te slepen, maar bij Elementor kun je zelfs de breedte van de kolom zelf op die manier instellen. Wat ook erg mooi is bij Elementor is dat je ook widgets die door andere plugins worden aangemaakt kunt toevoegen op een pagina. Dat kan met Divi ook, maar bij Elementor is het makkelijker en flexibeler.

Net als bij Divi wordt ook bij Elementor een aantal professioneel ontworpen designs standaard meegeleverd, al zijn die zowel qua aantal als qua kwaliteit minder dan die van Divi.

Elementor is qua mogelijkheden en gebruiksgemak zeer gewaagd aan Divi, maar dan met 1 groot voordeel : Elementor is helemaal gratis! 

Dat wil zeggen, de (zeer uitgebreide) basisversie dan. Er is ook een pro versie met nog veel meer mogelijkheden en modules. Zo heb je in de basisversie geen (contact)formulieren,  sliders, portfolio module of prijstabellen, dingen die in Divi wel standaard aanwezig zijn. Ook de theme builder, WooCommerce pagina builder, popup builder en nog een aantal andere features zijn alleen in de pro versie beschikbaar.  De pro versie is met een prijs van $ 49,00 per jaar niet heel goedkoop, maar zeker ook niet te duur.

Voor dat bedrag mag je Elementor Pro wel maar op 1 site installeren. Elementor heeft ook diverse licenties waarmee je Elementor Pro op meerdere sites mag installeren, maar de prijzen daarvoor lopen snel op; voor $ 199 heb je een 25 sites licentie, wil je Elementor Pro op 100 sites gebruiken betaal je $ 499 en voor 1.000 sites betaal je $ 999 per jaar.
Dat maakt Divi dus een stuk interessanter voor mensen die regelmatig een website bouwen (zoals webbouwers).

Lees mijn Elementor review

Divi vs Brizy

Brizy is, net als Elementor, een losse page builder die aan de voorkant van je website werkt, en net als Elementor heeft ook Brizy een hele uitgebreide gratis versie. Ook Brizy is volop in ontwikkeling, maar waar Divi en Elementor al echt volwassen page builders zijn staat Brizy nog echt in de kinderschoenen; Brizy werd namelijk pas in mei 2018 gelanceerd. Brizy is echter inmiddels al wel op zo’n 70.000 WordPress sites geinstalleerd, dus dat belooft wel wat… 

Brizy onderscheidt zich door een gebruiksvriendelijke interface met een toolbar die verschijnt boven het element dat je wilt bewerken, zodat je de meeste instellingen direct op die plek kunt bewerken. Bij Divi en Elementor doe je alle instellingen in een popup of sidebar. Dat lijkt misschien minder gebruiksvriendelijk, maar ik vind het wel wat overzichtelijker. Al moet ik zeggen dat ik ook snel gewend was aan de Brizy manier. 

Op het moment van schrijven bevat Brizy zo’n 20 “design elements” (Divi noemt dat modules). Dat is wat aan de magere kant, Divi heeft er bijvoorbeeld 37 en Elementor zelfs nog meer. Brizy beschikt natuurlijk wel over de standaard dingen zoals rijen, kolommen, tekst blokken, afbeeldingen, knoppen en zelfs een contactformulier, maar enkele geavanceerde modules zoals testimonials en prijstabellen ontbreken op dit moment nog. 

Er is echter wel een flink aantal voorbeeld blokken (secties in Divi) beschikbaar, met o.a. meerdere prijstabel templates en testimonial templates. Deze kun je dus eenvoudig invoegen en aanpassen aan je eigen wensen. 

Uiteraard moet er ook bij Brizy geld verdiend worden, en dus is er ook Brizy Pro. De pro versie bevat o.a. een theme builder (headers, footers en templates) die erg fijn werkt, een WooCommerce builder, een popup buider, mega menu, dynamic content, shape dividers, filters en premium designs, en ook A/B testing staat op de planning.

 

Divi vs Avada

Als je op zoek bent naar een “multi purpose” thema ben je ook Avada vast al eens tegengekomen.

Ook Avada beschikt over een eigen page builder, de Fusion Builder. Deze werkt in de basis hetzelfde als de Divi builder (ook op basis van shortcodes), sinds kort zelfs met een front-end builder zoals Divi’s Visual Builder.
En ook met Avada kun je zelf templates bouwen voor je pagina’s en berichten, header, footer, WooCommerce enz.

Een van de beste onderdelen van Avada zijn de zeer uitgebreide thema opties, waar je letterlijk honderden dingen kunt instellen. Gelukkig beschikken die thema opties over een krachtige zoekfunctie waardoor je heel snel de gewenste optie vind. Sinds Avada 6.0 zijn ook die thema opties verplaatst naar de front-end zodat je direct het effect van je aanpassingen ziet.
 

Net als bij Divi kun je ook bij Avada ieder element opslaan in een bibliotheek, zodat je die weer kan hergebruiken elders op de site of op een andere Avada site. En ook Avada wordt standaard geleverd met een stuk of 80 “demo sites”, te vergelijken met Divi’s layout packs. 

De design opties van Avada zijn wel (veel) minder uitgebreid dan die van Divi (of Elementor) ; zo vind je in Avada geen kleurenfilters, shape dividers, transform opties enzovoorts, en hoewel je wel hover opties en animaties in kunt stellen zijn die wel behoorlijk beperkt.

De documentatie van Avada is redelijk, maar wat minder uitgebreid dan die van Divi. De support is wel prima, maar beperkt tot 6 maanden na aankoop. 

Tenslotte is Avada een stuk goedkoper dan Divi; een licentie kost maar $ 60,00 inclusief levenslange updates. Je hebt echter wel voor iedere website een nieuwe licentie nodig.
Als je maar 1 website wilt bouwen is Avada dus erg aantrekkelijk, maar als je meerdere websites wilt maken is Divi al snel goedkoper.

Lees mijn Avada review

Divi vs WP Bakery Page Builder / Virtual Composer

Als je wel eens op ThemeForest komt ken je de WP Bakery Page Builder ongetwijfeld, al dan niet onder zijn oude naam Visual Composer. Hoewel enkele populaire thema’s als Avada en Enfold een eigen page builder hebben ontwikkeld gebruiken de meeste thema’s van ThemeForest deze page builder.

Net als Divi beschikt de WP Bakery page builder ook over zowel een backend als een frontend editor, en ook hier heb je enkele geavanceerde design opties zoals animaties, borders, (parallax) achtergronden en zelfs kleurenfilters. Dingen als schaduw effecten en shape dividers ontbreken hier echter, en de dingen die wel aanwezig zijn kun je een stuk minder customizen dan die van Divi.

Dat is op zich nog niet zo’n ramp, maar de manier waarop WP Bakery werkt is een stuk minder prettig dan hoe Divi en Elementor werken. Als je bij Divi of Elementor iets aanpast zie je direct het effect van die aanpassing, dus als je bijvoorbeeld een achtergrondkleur aanpast zie je meteen – live op de pagina terwijl je het aanpast – hoe dat eruit ziet.

Bij de WP Bakery page builder krijg je – net als bij Divi – een popup waarin je je aanpassingen maakt. Maar waar je bij Divi direct het effect van een aanpassing ziet moet je bij WP Bakery de aanpassingen eerst opslaan en de popup sluiten voordat de wijzigingen zichtbaar worden op je site. Bevalt de gekozen kleur niet? Dan moet je de popup weer openen, een andere kleur kiezen, opslaan, sluiten…

Dat is dus gewoon een backend editor die op de voorkant van je site opent, absoluut niet te vergelijken met de live frontend editors van Divi en Elementor. Ook dingen als padding en margin, die je bij Divi en Elementor gewoon naar de gewenste breedte sleept, moet je hier op de gok instellen en hopen dat het goed is, omdat je anders weer naar die popup moet…

De WP Bakery page builder heeft wel een flink aantal modules en er zijn veel (al dan niet betaalde) addons verkrijgbaar, en met een prijs van $ 45,00 voor 1 site, maar inclusief lifetime updates is de WP Bakery page builder niet heel duur. Maar ook niet heel goed dus, naar mijn mening.

Divi vs Beaver Builder

Beaver builder is net als Elementor een gebruiksvriendelijke losse page builder plugin die je met vrijwel ieder WordPress thema kunt gebruiken. Net als Elementor werkt Beaver Builder op de voorkant van je site, en er is ook een gratis basisversie beschikbaar. Maar waar de gratis basisversie van Elementor zich kan meten met premium page builders als Divi en Avada is de gratis versie van Beaver builder zeer beperkt. De pro versie van Beaver builder is vrij prijzig en vergelijkbaar met Avada, een stuk minder uitgebreid dan Elementor of Divi dus.

Desondanks – of misschien wel juist daardoor – is Beaver Builder zeer populair onder WordPress ontwikkelaars.

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 link doet 😉

Ga je voor Elementor of een andere gratis oplossing? Dan kun je eventueel ook een
kleine eenmalige donatie doen via de button hiernaast 🙂