Les 2: De Divi 5 editor — nieuwe interface en workflow

De Divi 5 editor is gebouwd in React en voelt sneller en vloeiender aan dan Divi 4. De basisstructuur — secties, rijen, modules — is hetzelfde gebleven, maar de manier waarop je ermee werkt is veranderd.

De nieuwe editor-interface

Rechts in de editor zit het Settings Panel. Dit paneel toont altijd de instellingen van het geselecteerde element. Klik je op een sectie, dan zie je sectie-instellingen. Klik je op een module, dan zie je module-instellingen. Geen aparte pop-upvensters meer — alles in één consistent zijpaneel.

Bovenaan het Settings Panel zijn drie tabbladen:

• Content: De inhoud van het element — tekst, afbeelding, URL
• Design: Stijlinstellingen — typografie, kleuren, achtergronden, randen
• Advanced: CSS-klassen, custom CSS, animaties, conditionele zichtbaarheid

Elementen toevoegen

Klik op het plus-icoon (+) om een element toe te voegen. Divi 5 biedt drie soorten toe te voegen elementen:

• Sectie: Voeg een nieuwe sectie toe (regulier, fullwidth of speciale sectie)
• Rij: Voeg een rij toe binnen een sectie
• Module: Voeg een module toe in een kolom

De module-bibliotheek is hetzelfde als in Divi 4 maar doorzoekbaar — typ de naam van de module die je zoekt en hij verschijnt direct.

Navigator

Klik op het lagen-icoon linksboven om de Navigator te openen. De Navigator toont een boomstructuur van alle elementen op de pagina — handig op pagina’s met veel secties. Klik op een element in de Navigator om het te selecteren in de editor.

Stijlen kopiëren en plakken

Divi 5 heeft een verbeterde “Kopieer/Plak stijlen”-functie. Klik met rechts op een element → “Kopieer stijlen”. Klik met rechts op een ander element van hetzelfde type → “Plak stijlen”. Alle Design-instellingen worden overgenomen. Enorm tijdbesparend als je consistentie wilt tussen meerdere modules.

Revisiegeschiedenis

Divi 5 heeft een uitgebreide revisiegeschiedenis. Klik op het klokje-icoon in de toolbar om de geschiedenis te openen. Je ziet een tijdlijn van alle opgeslagen versies. Klik op een versie om terug te gaan naar die staat van de pagina. Divi bewaart de laatste 50 revisies.

Opdracht

Bouw in Divi 5 een eenvoudige dienstenpagina: een hero-sectie, een drie-kolomsrij met blurb-modules en een CTA-sectie. Gebruik de Navigator om de structuur te controleren. Kopieer de stijlen van de eerste blurb naar de andere twee.