Divi wordpress thema page builder elegant themes handleiding review

In deze handleiding en review leg ik uit hoe het Divi thema en de Divi page builder werkt. Daarnaast heb ik het Divi thema getest.

Over het Divi thema en page builder

De Divi page builder is onderdeel van het populaire Divi WordPress thema van Elegant themes. Je kunt Divi sinds enige tijd ook installeren als losse plugin op elke andere WordPress site.

De Divi Builder van Elegant Themes is een van de meest gebruikte plug-ins voor webbouwers en beheerders. Mensen vragen me vaak: Wat vind je van Divi? Ik heb er de laatste jaren gemengde gevoelens bij gehad omdat het vaak compatibiliteitsproblemen had met WordPress plug-ins die klanten en cursisten gebruiken. Ik heb daarom de voor- en nadelen van Divi op een rijtje gezet.

Waarom is Divi zo populair? Mijns inziens is dit omdat het affiliate programma veel oplevert voor degenen die Divi promoten. Zij verdienen immers eraan.


Divi thema en page builder handleiding

Hoe werkt Divi? Als Divi eenmaal is geactiveerd, wordt een gigantische paarse knop toegevoegd bovenaan de pagina-editor. Ik vind deze knop onaangenaam groot en redundant, om maar eens een ontwerp term te gebruiken. De knop is enorm groot en paars met als enige reden om overduidelijk aanwezig te zijn. Het leidt af en neemt de vloeibaarheid van de standaard WordPress-interface weg. Wat ik vervolgens nog minder leuk vind dan de knop is de overvloed van kleuren in de page builder zelf:

Divi wordpress thema page builder elegant themes handleiding


Divi thema test

De balken en kleuren, om de afzonderlijke rijen, kolommen en secties te scheiden, nemen heel veel ruimte in in je WordPress interface. Je ziet ook niet gelijk wat je doet.
Afgezien van mijn afkeer van de stylistische keuzes van het design, werkt Divi redelijk goed. De interface is over het algemeen vrij intuïtief, hoewel het behoorlijk zwaar is voor het gebruik van icons en pictogrammen.

Nadat ik een paar lay-outs had gebouwd, heb ik Divi opnieuw getest op compatibiliteitsproblemen en vond vrij snel enkele problemen.

Veel code in het CSS

Ten eerste is de page builder nogal extreem met zijn frontend CSS. Wat wil dit zeggen? Er wordt heel veel CSS code op elke pagina geladen, wat de webpagina’s langzamer maakt. Om dit te testen, heb ik een contactformulier van Contact Form 7 aan de pagina toegevoegd.

Veel van de stijlen en opmaak, zijn niet afkomstig van de plugin maar komen uit het thema Divi. Dat betekent dat Divi Builder zijn CSS toepast op elementen die geen deel uitmaken van de builder. Dit is heel tricky voor de consistentie en voor het beheer van je website. Zoals met alle plug-ins, moet CSS in plug-ins en thema zo worden geschreven dat het alleen van invloed is op elementen waarop het is gericht en niet van invloed op andere elementen.
Dit euvel blijkt met veel meer plugins te gebeuren heb ik gemerkt en getest. Lees hierover meer in mijn test van WordPress thema’s:
Test en overzicht beste gratis en betaalde WordPress thema’s


Handleiding werken met Divi modules

Om te beginnen met Divi Builder, ga naar Pages → Add New. Daar zit een grote nieuwe knop:


gebruik divi bouwer

Door erop te klikken wordt Divi Builder gelanceerd – maar slechts halverwege, bij wijze van spreken. Dit is wat ik bedoel: Als je op de knop klikt, zie je dit:


divi interface

Wat je ziet is een soort van halfweg-interface. Hoewel het de standaard WordPress UI vervangt, en je verschillende paginablokken achter elkaar kunt zetten, zie je eigenlijk niet het eindresultaat van je werk.

Ik denk dat deze manier van werken nuttig kan zijn als je te maken hebt met een zeer lange en gecompliceerde pagina, en je wilt gewoon dingen zien vanuit een vogelperspectief. Echter, voor je dagelijkse paginacreatiebehoefte kun je beter gebruik maken van de ‘volledige’ Divi Builder-ervaring. Om dat te krijgen, klik je op de knop Use Visual Builder. Dit zal je doorverwijzen naar een volledig nieuw paneel dat volledig is wat-je-ziet-wat-je-krijgt.

Rechtsboven is de Divi Builder-interface geconstrueerd op een manier die je door de stappen leidt die nodig zijn om een goed uitziende pagina te bouwen.Ten eerste, Divi Builder geeft je drie keuzes: Bouw vanaf nul, kies een vooraf gemaakte layout of kloon een bestaande pagina. Dit is een vriendelijke helper, en zal je eerste interactie met de bouwer verbeteren.

divi builder keuze

Als u aan een pagina werkt vanuit het niets, kunt u kiezen wat voor soort rij u op de pagina wilt zetten, en vervolgens welke modules u in die rij wilt opnemen.

divi lege pagina

Dit alles is bijna net zo gemakkelijk te begrijpen als bijvoorbeeld de Beaver builder. Natuurlijk realiseer ik me dat veel van dit alles neerkomt op persoonlijke voorkeur, maar de interface van Divi Builder lijkt een beetje verwarrender. Om te zien wat ik bedoel, kijk eens naar deze screenshot:


divi builder vreemde knoppen

Wat je ziet zijn er drie aparte ‘+’ knoppen, en elke knop doet iets anders. Eén is voor secties, één is voor rijen, en de laatste is voor inhoudsmodules.
Om een Divi Builder-pagina te bouwen, moet je eerst secties maken, dan rijen in die secties plaatsen, en tenslotte individuele inhoudselementen binnen de rijen plaatsen.

Als het gaat om het bewerken van de inhoud zelf, is het allemaal erg intuïtief. Klik gewoon op het element dat u wilt bewerken, en doe wat u wilt doen – of het nu gaat om het typen of het aanpassen van andere parameters.


Divi gebruik demo

Over het algemeen is Divi Builder gemakkelijk te gebruiken op een alledaagse basis, maar een beetje moeilijker om mee aan de slag te gaan in het begin.
Als je thema niet met een ‘blanco’ paginasjabloon komt dan zul je niet in staat zijn om een echte full-screen layout te bouwen met Divi Builder. Divi Builder zelf komt niet met zo’n paginasjabloon, dus je bent beperkt door het beschikbare functie van je WordPress thema.


Overzicht Divi modules (A-C)

De structuur van een Divi pagina wordt opgebouwd uit secties, rijen en kolommen. Aan die kolommen kun je vervolgens onderdelen toevoegen d.m.v modules. Divi wordt geleverd met ongeveer 40 modules welke ik hieronder zal laten zien.

De meest gebruikte module is de tekst module. Hiermee kun je gewoon tekst toevoegen. Net als in de standaard WordPress editor kun je hierin ook afbeeldingen en andere media toevoegen, links invoegen en tekst aanpassen.

In Divi zitten standaard de volgende modules:

  • Aanbevelingen  in Divi

    Hiermee kun je referenties en reviews op je site plaatsen, met o.a. een foto en de naam van degene die de referentie geeft. Ik vind het zelf beter om dit in berichten te plaatsen en met een eenvoudige WordPress plugin op een pagina of bericht te verzamelen. Dit leg ik uit tijdens een WordPress cursus

  • Accordeon in Divi

    Deze module is mooi voor FAQ, want hiermee kun je alleen de vraag tonen en het antwoord pas weergeven als er op de vraag geklikt wordt. Dat maakt zo’n pagina overzichtelijker.

  • Afbeelding

    Hiermee kun je uiteraard een afbeelding invoegen.

  • Afteltimer

    Deze module is goed voor onder constructie pagina’s, of om af te tellen naar een evenement. Je kunt een datum en tijd ingeven. Er wordt dan een timer weergegeven die laat zien hoeveel dagen, uren, minuten en seconden het nog duurt tot deze bereikt is.

  • Audio in Divi

    Hiermee kun je een audio toevoegen met een volumeregelaar. Je kunt audio voorzien van titel, artiest en album en albumcover.

  • Berichtengalerij in Divi

    Een slider met je berichten (posts), waarbij je zaken kunt instellen zoals formaat afbeelding en hoeveelheid tekst.

  • Berichtennavigatie in Divi

    Hiermee kun je links invoegen naar het vorige en volgende bericht op je blog, indien gewenst alleen uit dezelfde categorie als het huidige bericht. Hierdoor houd je bezoekers waarschijnlijk langer op je website.

  • Blogmodule in Divi

    Hiermee kun je berichten tonen op een pagina. Je kunt dit o.a. beperken tot categorieen en je kunt instellen of je elementen als de auteur, datum, categorieën en een lees meer button wilt tonen. Daarnaast kun je kiezen tussen een lijstweergave of een grid weergave. Ik gebruik hier zelf liever een andere plugin voor.

  • Blurb in Divi

    Dit is eigenlijk een tekstmodule. Je kunt er een icoontje aan toevoegen. De tekst standaard gecentreerd weergegeven.

  • Cirkelteller in Divi

    Hiermee krijg je een cirkel waarin een percentage getoond wordt. Als de cirkelteller in beeld komt loopt deze op van 0 naar het ingestelde percentage.

  • Code in Divi

    Met de code module kun je HTML, CSS en javascript code toevoegen.  Ook handig voor shortcodes van andere plugins.

  • Contactformulier in Divi

    Voor het maken van een contactformulier waarbij je veel velden kan toevoegen als je wilt. Je kunt kiezen uit tekstvelden, checkboxes en dropdown selecties.
    Ik gebruik zelf liever een andere plugin:
    Formcraft WordPress formulieren plugin

Meer modules in Divi (E-Z)

In Divi zitten standaard ook de volgende modules:

  • E-mail opt-in in Divi

    Toont een venster waarmee mensen zich kunnen inschrijven op je nieuwsbrief. Er is echter geen nieuwsbrief systeem in Divi ingebouwd, dus daar heb je een andere plugin zoals MailPoet of MailChimp voor nodig.

  • Filterbaar portfolio in Divi

    Divi heeft een extra post type naast pagina’s en berichten, namelijk “projecten”. Je vindt dit onderdeel in het WordPress admin menu links.  Dit zijn eigenlijk gewoon berichten die met deze module getoond kunnen worden. Net als gewone berichten kun je ook projecten verdelen in categorieen, en met deze module kun je die categorieen boven de berichten tonen. Als een bezoeker op een categorie klikt worden alleen projecten uit die categorie getoond.

  • Galerij in Divi

    Hiermee kun je een fotogalerij invoegen. Deze module maakt gebruik van de standaard WordPress galerij. Ik gebruik zelf liever deze plugin:
    Justified Image Grid WordPress plugin

  • Kaart in Divi

    Hiermee kun je een Google Maps kaartje invoegen. Je moet eerst een API key aanmaken bij Google Maps voordat dit werkt.

  • Knop in Divi

    Hiermee kun je een knop toevoegen, waarvan je zelf kunt instellen welke tekst erop moet komen en waar deze naartoe linkt.

  • Log in in Divi

    Heb je een members site, webshop of een andere site waar bezoekers moeten kunnen inloggen? Met deze module geef je een inlogvenster weer.

  • Nummerteller in Divi

    Hetzelfde als de cirkelteller, maar dan zonder cirkel.

  • Call to action in Divi

    Hetzelfde als de knop module, maar nu met een achtergrond. Bedoeld om een opvallende call to action button te maken.

  • Persoon in Divi

    Deze module wordt vaak gebruikt om teamleden weer te geven. Je kunt o.a. een naam, functie, foto en social media profielen toevoegen.

  • Portfolio in Divi

    Zie filterbaar portfolio hierboven, maar dan zonder de mogelijkheid om te filteren op categorieen.

  • Reacties in Divi

    Standaard wordt de reactiemogelijkheid alleen onderaan een bericht getoond, maar met deze module kun je ze ook op een andere plek tonen. Zul je zelden nodig hebben.

  • Schakelen in Divi

    Hetzelfde als de accordeon module, maar bij de accordeon module kun je meerdere vragen en antwoorden invullen en bij deze module maar één. Je zet hierbij dus iedere vraag met bijbehorend antwoord in een eigen module.

  • Shop in Divi

    Met deze module kun je WooCommerce producten toevoegen op elke pagina. Je kunt bijvoorbeeld de meest recente producten, de meest verkochte producten of alleen producten uit een of meerdere categorieen tonen, instellen hoeveel kolommen er getoond moeten worden en de standaard sortering instellen. Ook qua styling biedt deze module veel mogelijkheden.

  • Slider in Divi

    Hiermee kun je een eenvoudige foto of videoslider toevoegen. Je kunt voor iedere slide een knop en een link toevoegen. Ik gebruik liever de:
    Revolution Slider WordPress plugin

  • Social Media volgen in Divi

    Voegt knoppen toe om je kunnen volgen op social media. Je kunt zelf de achtergrondkleur van de button kiezen.

  • Tabbladen in Divi

    Hiermee kun je content verdelen onder meerdere tabbladen, net zoals de tabbladen bij een WooCommerce product. Handig.

  • Tabellen prijsstelling in Divi

    Met deze module kun je een vergelijkingstabel maken. Je kunt 1 of meerdere opties uitlichten waardoor deze optie een extra opvallend uiterlijk krijgt.

  • Titel bericht in Divi

    Hiermee kun je de titel van het huidige bericht weergeven, en kiezen welke elementen daarbij getoond worden zoals de uitgelichte afbeelding, auteur, datum en categorie. Zit ook in de onderstaande plugin:
    Ultimate Shortcodes WordPress plugin

  • Verdeler in Divi

    Hiermee kun je een horizontale scheidingslijn toevoegen, waarvan je o.a. de kleur, hoogte en stijl kunt instellen.

  • Video in Divi

    Hiermee kun je een video uploaden en insluiten op je pagina. Je kunt video’s van YouTube, Vimeo of Facebook toevoegen.

  • Videoslider in Divi

    Lijkt op de vorige alleen dan als een slider voor videos.

  • Voortgangsbalk in Divi

    Hetzelfde als de cirkelteller, maar dan met een balk in plaats van een cirkel.

  • Zijbalk in Divi

    Hiermee kun je een widgetarea plaatsen op elke plek. Het zou makkelijker zijn als je elke widget gewoon rechtstreeks kan invoegen op een pagina maar dat is helaas (nog) niet mogelijk in Divi. Dit kan wel met de standaard Gutenberg editor.

  • Zoeken in Divi

    Voegt een zoekvenster toe waarmee een bezoeker je site kan doorzoeken.


Divi Pagina Sjablonen en tamplates

Sjablonen kunnen ongelofelijk handig zijn als je geen tijd hebt om je pagina vanaf nul te bouwen, of als je gewoon een bestaand ontwerp wilt aanpassen door dit of dat te veranderen.
Divi Builder biedt een overvloed aan sjablonen. Op het moment van schrijven kon je kiezen uit 390 lay-outs! Deze lay-outs zijn gegroepeerd in 50 doelgerichte lay-outpakketten. Er is bijvoorbeeld een restaurantpakket, een coffeeshoppakket, een agentschapspakket, enzovoort.

Als je dan een van de pakketten binnenkomt, zie je alle lay-outs mooi gepresenteerd in een raster. Het feit dat de lay-outs niet allemaal op één hoop zijn gegooid, betekent dat het veel gebruiksvriendelijker is om een beslissing te nemen over welke te gebruiken. Ik moet toegeven, het organiseren van de sjablonen in pakketten is een geweldig idee. Alles in het pakket maakt deel uit van hetzelfde ontwerpconcept. Dit betekent dat, zolang je pagina’s maakt op basis van een enkel pakket, je er zeker van kunt zijn dat alles goed in elkaar past. Behalve de packs zijn ook alle templates gecategoriseerd, wat een meer algemene manier is om ze op een of andere manier te groeperen.

Als het gaat om de kwaliteit van de sjablonen zelf, zijn ze goed. Alle ontwerpen zijn modern, geoptimaliseerd en zien er mooi uit. U zult hier geen ouderwetse ontwerpen van vroeger vinden.


Conclusie Divi thema

Divi is niet helemaal compatibel naar mijn mening met andere WordPress plugins. Daarnaast is Divi langzaam omdat er heel veel code wordt geladen op iedere webpagina. Het allerbelangrijkste is waarschijnlijk dit: als je Divi uitzet, laat Divi een spoor van code achter die je allemaal weer handmatig moet verwijderen, mocht je verder willen gaan met een andere WordPress thema of page builder. Er zijn enkele page builder die dit niet hebben en je webpagina’s keurig netjes achterlaten nadat je ze uitzet.

Los van de layout vind ik dit enkele redenen om nooit een website met Divi te bouwen. Er zijn andere thema’s en page builders die beter en meer ‘smooth’ werken. Daarnaast zitten veel van de modules al standaard in de Gutenberg editor van WordPress wat Divi overbodig maakt.


Beoordeling Divi thema

Hierbij mijn beoordeling voor de Divi page builder. Twee geleden gaf ik het nog een 6. Het is wel verbeterd. Nu in 2020 geef ik een:
7


Meer handleidingen over thema’s en page builders


Cursus of WordPress training Divi volgen?

Tijdens een WordPress cursus of training leg ik uit hoe Divi werkt of wat je beter kan gebruiken in plaats van Divi met alle bijbehorende modules: