Les 3: Het Design System — globale stijlen beheren

Het Design System is de grootste verbetering van Divi 5 ten opzichte van Divi 4. In plaats van globale stijlen verspreid over meerdere locaties, beheert Divi 5 alles op één centrale plek. Zet je huisstijl één keer correct in, en hij werkt consistent door de hele site.

Het Design System openen

Ga in het Divi dashboard naar Divi → Design System. Je ziet een overzicht van alle globale stijlen die je kunt beheren.

Kleurenpalet

Voeg je merkkleur toe als globale kleur. Geef hem een naam (bijv. “Primaire kleur”) en een hexcode. Je kunt maximaal 24 globale kleuren toevoegen.

Alle kleurkiezers in de editor tonen je globale kleuren bovenaan. Als je de globale kleur later aanpast, verandert elke plek waar hij wordt gebruikt automatisch mee. Dit is het grote voordeel ten opzichte van handmatig kleuren instellen per module.

Typografie

Stel per kopniveau (H1 t/m H6) en voor de bodytekst in:

• Lettertype (kies uit Google Fonts of upload eigen fonts)
• Lettergrootte (met aparte waarden voor desktop, tablet en mobiel)
• Regelhoogte (line-height)
• Letterafstand (letter-spacing)
• Gewicht (font-weight)

Kies hier één keer je typografie-systeem en het werkt overal consistent. Geen handmatig instellen meer per module.

Spacing tokens

Nieuw in Divi 5: spacing tokens. Dit zijn benoemde witruimte-waarden die je hergebruikt door de hele site. Stel bijv. een “Section Padding” token in op 80px voor desktop en 40px voor mobiel. Wijs die token toe aan al je secties. Wil je de witruimte later aanpassen? Verander de token en het werkt overal door.

Knoppen

Stel de standaard knopstijl in: kleur, hover-kleur, border-radius, lettertype, grootte en afstand. Alle knoppen die de global knopstijl gebruiken, passen automatisch mee als je hem aanpast.

Design System vs. Divi 4 Thema-aanpasser

In Divi 4 waren globale stijlen verspreid over: Thema-aanpasser, Thema-opties, en de module-instellingen zelf. In Divi 5 zit alles in het Design System. Dat is niet alleen overzichtelijker — het maakt de stijlen ook betrouwbaarder en consistenter.

Opdracht

Open het Design System. Stel je primaire en secundaire merkkleur in. Stel je koplettertype en bodytekstlettertype in. Maak een spacing token voor sectie-padding. Controleer daarna of de kleuren en lettertypen automatisch worden toegepast op bestaande pagina’s.