Les 1 van 5

Les 1: Divi installeren en de Visual Builder begrijpen

Divi is een betaald product van Elegant Themes. Je kunt het aanschaffen via elegantthemes.com — een jaarlicensie geeft je toegang tot het Divi-thema, de Divi Builder plugin, alle andere Elegant Themes-producten en onbeperkte site-installaties. Dat maakt Divi voor professionals die meerdere sites bouwen een uitstekende investering.

Installatie: thema of plugin?

Divi heeft twee verschijningsvormen:

  • Divi als thema — het volledige Divi-pakket inclusief het thema zelf. Activeer dit als je een Divi-site wilt bouwen die volledig op het Divi-framework draait.
  • Divi Builder als plugin — alleen de page builder, te gebruiken met elk ander thema. Handig als je een specifiek thema wilt combineren met de Divi-editor.

Voor de meeste Divi-projecten kies je het thema. Download de ZIP via je Elegant Themes-account en upload hem via Weergave → Thema’s → Nieuw thema toevoegen → Uploaden.

De Visual Builder starten

Na activatie verschijnt op elke pagina de knop “Bewerken met Divi Builder” in het WordPress dashboard, én een blauwe “Enable Visual Builder”-balk bovenaan de live pagina.

Er zijn twee werkmodi in Divi 4:

  • Backend Builder: Bewerken vanuit het WordPress dashboard. Je ziet een schematisch overzicht van secties, rijen en modules — snel voor structuurwijzigingen.
  • Visual Builder (frontend): Bewerken direct op de live pagina. Je ziet exact hoe het eruitziet voor bezoekers. Krachtigste manier om te werken.

De basisstructuur: secties, rijen en modules

Divi werkt in drie lagen, van buiten naar binnen:

  1. Sectie (blauw): De buitenste container. Bepaalt de achtergrond en breedte. Elk onderdeel van je pagina — hero, diensten, testimonials, CTA — is een sectie.
  2. Rij (groen): Binnen een sectie verdeel je de ruimte in kolommen. Kies uit 1 t/m 4 kolommen in uiteenlopende verhoudingen.
  3. Module (grijs): Het eigenlijke element — tekst, afbeelding, knop, video, contactformulier, enzovoort. Modules sleep je in een kolom.

Een module toevoegen

Klik op het grijze plus-icoon in een kolom. Divi opent de modulebibliotheek met alle beschikbare modules. Klik op een module om hem toe te voegen. Klik daarna op het tandwiel-icoon om de module-instellingen te openen.

Elke module heeft drie tabbladen: Inhoud, Ontwerp en Geavanceerd. Inhoud bepaalt wat er staat, Ontwerp hoe het eruitziet, Geavanceerd voor CSS-klassen en animaties.

Opslaan

Klik rechtsonder op de paarse cirkelknop → “Sla op”. In de Visual Builder is er ook een auto-save die elke 60 seconden een revisie opslaat. Via de revisiegeschiedenis kun je altijd terug naar een eerdere versie.

Opdracht

Activeer Divi en open een lege pagina in de Visual Builder. Voeg een sectie toe met een twee-kolomsrij. Plaats links een Tekst-module met een koptekst en alinea, rechts een Afbeelding-module. Sla op en bekijk het resultaat.