Na met diverse WordPress themes gewerkt te hebben, heb ik vorig jaar het Divi theme 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 het Divi theme?
© Elegant Themes, Inc.
Het Divi theme is vooral heel erg flexibel. Waar je bij de meeste themes 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 het Divi theme
Bij deze uitleg ga ik uit van een WordPress website, waarbij het Divi theme 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 De Divi opbouwfunctie gebruiken.
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 opbouwfunctie te activeren. Dan heb je in ieder geval altijd je origineel nog.
Andersom, van de Divi opbouwfunctie terugkeren naar de standaard WordPress tekstbewerker, is overigens geen aanrader. Alles wat je met de Divi Opbouwfunctie 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, zie je de Divi opbouwfunctie verschijnen:
De Divi opbouwfunctie
De Divi opbouwfunctie bevat, wanneer je met een nieuwe pagina start, drie kaders:
- een grijs kader met een blauw menu,
- een wit kader met een mintgroen menu,
- en een kader met een donkere rand met daarin de tekst kolom(men) invoegen.
Secties
Het kader met het blauwe menu heet in Divi een sectie. Een pagina is over het algemeen uit meerdere secties opgebouwd. Onder het blauwe menu zie je het plusteken, waarmee je secties kunt toevoegen. Secties van een standaardbreedte, zoals in het voorbeeld, maar ook secties die paginabreed zijn of secties met een bijzondere indeling.
Rijen
Binnen de sectie is een kader met een mintgroen menu. Dit onderdeel heet een rij. Ook hier kun je met het plusteken rijen toevoegen. Je sectie bestaat dan uit meerdere rijen.
Kolommen
Wanneer je vervolgens op kolom(men) invoegen klikt, kun je per rij instellen uit hoeveel kolommen deze moet bestaan en hoe breed je de verschillende kolommen wilt hebben:
Wanneer je een aantal rijen met verschillende kolombreedtes heb toegevoegd, ziet dat er bijvoorbeeld zo uit:
De volgende stap is het toevoegen en vormgeven van de modules. Wil je weten hoe dat in z’n werk gaat? Lees dan verder in deel 2 van deze tutorial.