Na met diverse WordPress thema’s gewerkt te hebben, heb ik in 2016 het thema Divi van Elegant Themes ontdekt. Ik was al snel onder de indruk van de mogelijkheden en maak inmiddels alleen nog maar websites met Divi.
Waarom zou je kiezen voor Divi?
Het thema Divi is vooral heel erg flexibel. Waar je bij de meeste thema’s te maken hebt met een vaste opmaak van de pagina en vaak alleen zaken als kleur en lettertypes kunt aanpassen, kun je met Divi pagina’s helemaal indelen zoals jij wilt. Je kunt zelfs je berichten van opmaak voorzien!
Simpel gezegd maak je pagina’s en berichten op door diverse blokken (zogenaamde modules) naast en onder elkaar te plaatsen. Denk aan modules om teksten, afbeeldingen en fotogalerijen te plaatsen, maar ook modules om een Google Map, contactformulier of jouw sociale media buttons in te voegen. Je kunt dus alle kanten op met je website-ontwerp.
Aan de slag met Divi
Bij deze uitleg ga ik uit van een WordPress website, waarbij Divi al geïnstalleerd en geactiveerd is. Wanneer je een pagina of bericht gaat bewerken, zie je boven aan de pagina een grote paarse button met de tekst Gebruik de Divi Builder.
Voordat je hier op klikt, is het belangrijk om te weten dat Divi alle reeds aanwezige content uit het tekstvak naar een module verhuist. Uit voorzorg raad ik je daarom aan eerst een kopie te maken van de pagina en daarna pas de Divi Builder te activeren. Dan heb je in ieder geval altijd je origineel nog.
Andersom, van de Divi Builder terugkeren naar de standaard WordPress tekstbewerker, is geen aanrader. Alles wat je met de Divi Builder hebt gemaakt, raak je na het omzetten weer kwijt. Bedenk dus goed wat je met de opmaak van je pagina wilt, voordat je terugkeert naar de gewone editor.
In deze tutorial ga ik er vanuit dat je een nieuwe pagina of nieuw bericht aanmaakt. Nadat je op de paarse knop geklikt hebt, kom je in de Divi Builder terecht.
Soms zie je even de blauwe en mintgroene bolletjes draaien, wacht even geduldig tot deze uit beeld verdwijnen.
De Divi Builder
De Divi Builder toont, wanneer je deze voor het eerst op een pagina laadt, drie kolommen:
- Build from scratch
- Layout kiezen
- Bouwen met AI
Als je kiest voor build from scratch krijg je een lege pagina waar je zelf elementen aan kan toevoegen. Bij layout kiezen heb je de keuze uit diverse ontwerpen, zogenaamde layouts. Hiermee kun je een snelle start maken door een bestaand ontwerp aan te passen naar je wensen. Nog sneller, in theorie, is kiezen voor bouw met AI. Op het moment van schrijven staat deze functie echter nog in de kinderschoenen en werkt die niet zo goed.
Pagina-opbouw in de Divi Builder
Pagina’s worden in de Divi Builder opgebouwd uit secties, rijen en kolommen:
Secties
Een pagina is over het algemeen uit meerdere secties opgebouwd. Secties hebben de breedte van het volledige scherm. Door meerdere secties te gebruiken op je pagina, kun je bijvoorbeeld de delen van je pagina verschillende achtergrondkleuren geven en zo visualiseren welke informatie bij elkaar hoort.
Rijen
Binnen de secties plaats je vervolgens rijen. Je kunt zelf kiezen hoeveel rijen je toevoegt aan een sectie.
Kolommen
Per rij kun je tenslotte instellen uit hoeveel kolommen deze moet bestaan en hoe breed je de verschillende kolommen wilt hebben. Wil je bijvoorbeeld een tekst met ernaast een foto op je pagina, dan kies je voor twee kolommen in die rij. Afhankelijk van hoe breed je de tekst wilt en hoe breed de foto, kun je kiezen voor een gelijke verdeling van de kolommen (50/50), of voor een ongelijke verdeling (bijvoorbeeld 67/33 of 75/25). Je kunt maximaal 6 kolommen aan een rij toevoegen.
De volgende stap is het toevoegen van elementen, zogenaamde modules, aan de verschillende kolommen. Wil je weten hoe dat in z’n werk gaat? Lees dan verder in deel 2 van deze tutorial.