Divi 5: Variablen lassen sich jetzt verschachteln, berechnen und kombinieren

Elegant Themes hat am 27. Oktober 2026 drei Erweiterungen für die globalen Variablen in Divi 5 vorgestellt: Variablen lassen sich jetzt ineinander verschachteln, direkt mit Rechenoperationen verknüpfen und zu neuen Variablen kombinieren. Angekündigt war das schon bei Divi 5.15 Mitte Oktober, jetzt ist es da — und es verändert, wie ich ein Divi-Theme-System aufbaue.

Was ist passiert?

Bisher war eine Divi-Variable ein fester Wert: eine Farbe, ein Abstand in Pixeln, eine Schriftgröße. Wollte ich mehrere zusammenhängende Werte abbilden — etwa einen Grundabstand und davon abgeleitete größere und kleinere Abstände —, musste ich jeden einzeln als eigene Variable anlegen und von Hand pflegen. Mit der neuen Funktion kann eine Variable jetzt auf eine andere verweisen (verschachtelte Variablen), eine Rechnung enthalten, etwa Grundabstand mal zwei oder Grundfarbe minus Helligkeit (Variablen-Mathematik), oder mehrere Variablen zu einer kombinierten Variable zusammenführen, etwa Farbe und Deckkraft zu einer fertigen Hover-Farbe (Variablen-Kombination).

Technisch ist das dasselbe Prinzip wie bei calc() und verschachtelten var()-Aufrufen in CSS — nur dass Divi es im visuellen Variablen-Manager anbietet, ohne dass ich eine Zeile Code schreiben muss.

Was bedeutet das für Ihre Website?

Für die meisten kleineren Websites ändert sich erst einmal nichts: Bestehende Variablen funktionieren unverändert weiter, die Funktion ist eine Ergänzung, kein Umbau. Interessant wird sie bei Projekten mit einem durchdachten Design-System — mehreren Vorlagen, wiederkehrenden Abstandsrastern, einer Farbskala mit Varianten für Hover- und Fokuszustände. Dort reduziert sich die Zahl der Variablen, die ich von Hand pflegen muss, und das Risiko sinkt, dass eine Variable bei einer späteren Anpassung vergessen wird, weil abgeleitete Werte sich automatisch mitändern.

Ein Beispiel aus der Praxis: Lege ich eine Variable „Abstand-Basis“ mit 16 Pixel an, kann ich „Abstand-Groß“ als Abstand-Basis mal 2 definieren und „Abstand-Klein“ als Abstand-Basis geteilt durch 2. Ändere ich später den Grundabstand auf 20 Pixel, wandern Groß und Klein automatisch mit — ohne dass ich jede Vorlage einzeln durchgehen muss.

Die Kombination zeigt ihren Nutzen bei Zuständen wie Hover oder Fokus. Bisher legte ich für einen abgedunkelten Hover-Ton meist eine zweite, feste Farbvariable an, die ich bei jeder Farbänderung der Hauptfarbe separat nachziehen musste. Jetzt kombiniere ich die bestehende Farbvariable mit einer Deckkraft- oder Helligkeitsvariable zu einer neuen, abgeleiteten Variable — ändert sich die Hauptfarbe, zieht der Hover-Ton automatisch nach. Bei einer Website mit mehreren Buttons, Links und Karten in derselben Farbfamilie spart das nicht nur Pflegearbeit, es verhindert auch, dass einzelne Elemente nach einer Farbanpassung übersehen werden und farblich auseinanderlaufen.

Was ist jetzt zu tun — und was nicht?

Ein Pflichtupdate ist das nicht. Wer Divi 5 bereits aktualisiert, bekommt die Funktion automatisch im Variablen-Manager zu sehen; genutzt wird sie nur dort, wo ich sie bewusst einsetze. Bevor ich an bestehenden Variablen etwas verschachtle oder in eine Rechnung umwandle, exportiere ich die aktuellen Theme-Builder-Einstellungen als Sicherung, weil eine Variable an vielen Stellen gleichzeitig wirkt — ein Tippfehler in einer Rechnung zeigt sich sonst sofort auf der ganzen Website statt nur an einer Stelle. Auf einer Staging-Kopie teste ich neue verschachtelte Variablen zuerst, bevor sie live gehen.

Wer noch mit einzelnen, unabhängigen Variablen arbeitet, muss nichts nachrüsten. Der Umstieg lohnt sich vor allem, wenn ohnehin eine Überarbeitung des Variablen-Systems ansteht, etwa im Rahmen eines Relaunchs oder wenn ich für einen Kunden ein größeres Baukastensystem aus wiederverwendbaren Components und Slots aufbaue, wie ich es seit Divi 5.15 mache. Beide Funktionen ergänzen sich: Components bündeln Aufbau und Gestaltung eines Elements, Variablen sorgen dafür, dass die Werte dahinter zentral und widerspruchsfrei bleiben.

Technisch verändert sich an der laufenden Website durch das Update nichts von selbst — die Variablen-Mathematik greift erst, wenn ich im Variablen-Manager eine bestehende Variable bewusst auf „Verschachtelt“ oder „Berechnet“ umstelle. Bis dahin bleibt jede Variable ein einfacher, fester Wert wie bisher.

• Verschachtelte Variablen: eine Variable verweist auf eine andere, Änderungen wandern durch.
• Variablen-Mathematik: Rechenoperationen direkt im Variablenwert, etwa Multiplikation oder Division.
• Variablen-Kombination: mehrere Variablen ergeben eine neue, zusammengesetzte Variable.

Quellen

Elegant Themes: Nested Variables, Variable Math & Variable Combinations for Divi 5

Kurz beantwortet

Muss ich meine Divi-Website jetzt umbauen?

Nein. Bestehende Variablen funktionieren unverändert weiter, die neuen Möglichkeiten sind eine Ergänzung.

Für wen lohnt sich die Umstellung auf verschachtelte Variablen?

Vor allem für Websites mit einem größeren Design-System aus mehreren Vorlagen und wiederkehrenden Abstands- oder Farbwerten.

Worauf sollte ich vor der Nutzung achten?

Theme-Builder-Einstellungen vorher sichern und neue Rechnungen zuerst auf einer Staging-Kopie testen, da eine Variable oft an vielen Stellen gleichzeitig wirkt.

Sie möchten das Thema für Ihr Unternehmen umsetzen? Mehr zu unseren Leistungen: Webdesign, SEO, GEO & AEO.