Divi 5 stapt af van de traditionele manier van ontwerpen en introduceert krachtige systemen waarmee je een website veel sneller en consistenter opbouwt. De twee belangrijkste bouwstenen hiervoor zijn Presets en Variabelen.
Presets vs. Variabelen: Het verschil uitgelegd:
Het verschil is het makkelijkst te begrijpen met een alledaagse vergelijking:
- Variabelen = Je ingrediënten (De Basis)
Een variabele is één losse instelling die je een naam geeft en hergebruikt. Denk aan jouw specifieke merkkleur (bijv. #FF5733 noem je --hoofdkleur) of een standaard lettergrootte. Verander je later de waarde van de variabele --hoofdkleur van oranje naar blauw? Dan verandert alles op je website wat die variabele gebruikt meteen mee. - Presets = Je kant-en-klare recept (Het Totaalplaatje)
Een preset is een verzameling van meerdere instellingen voor één specifiek element (zoals een knop, een titel of een sectie). In een preset leg je vast: lettertype X, achtergrondkleur Y, schaduw Z en een marge van 20px. Pas je deze preset toe op een knop, dan overkoepelt de preset al die instellingen in één klik.
Hoe werken ze samen?
Stel je voor dat je een Primair Knop Preset maakt.
- In die preset stel je in dat de knop een ronde hoek heeft, tekst in hoofdletters gebruikt en padding heeft.
- Voor de achtergrondkleur van die knop kies je de variabele --merk-primaire-kleur.
Als je volgend jaar de merkkleur verandert van groen naar paars, hoef je alleen de variabele --merk-primaire-kleur aan te passen. Alle knoppen die de preset gebruiken, veranderen direct mee!
