Aktualisiert am 29.10.2026: Mit Divi 5.18.1 schließt Elegant Themes eine weitere Rechtelücke im Theme Builder. Die Details findest du im Abschnitt zu den Fixes.
Du hast dir mit Design Variables ein sauberes System aus Abständen, Schriftgrößen und Textbausteinen aufgebaut. Und trotzdem tippst du an manchen Stellen wieder feste Werte ein: den negativen Abstand für ein Bild, das über den Rand ragen soll, die halbe Lücke zwischen kleinen Karten oder den Firmennamen in der Copyright-Zeile.
Mit Divi 5.18 vom 27. Oktober 2026 fallen genau diese Lücken weg. Variablen lassen sich jetzt ineinander verschachteln, im Feld verrechnen und mit dynamischen Inhalten und eigenem Text kombinieren.
Rechnen mit Variablen
In unterstützten Zahlenfeldern kannst du eine Variable jetzt direkt mit einer Rechnung verbinden: Addition, Subtraktion, Multiplikation und Division sind möglich. Das Beispiel von Elegant Themes zeigt gut, wofür das gut ist. Der Innenabstand einer Section hängt an einer Abstandsvariable. Ein Bild soll über den Rand dieser Section hinausragen. Statt einen festen negativen Wert einzutragen, setzt du dieselbe Variable ein und multiplizierst sie mit -1. Änderst du später den Abstand der Section, wandert der negative Abstand automatisch mit.
Weitere typische Fälle: doppelter Innenabstand für große Karten, ein halber Abstand für engere Lücken oder eine Breite, von der ein gemeinsamer Gutter abgezogen wird. Meine Faustregel: Brauchst du eine Rechnung nur einmal, bleibt sie im Element. Taucht sie immer wieder auf, lohnt sich eine eigene Variable dafür.
Variablen aus Variablen bauen
Neu ist auch, dass Zahlen- und Textvariablen andere Variablen enthalten dürfen. Du öffnest dazu wie gewohnt den Variable Manager in der Seitenleiste, bearbeitest eine Zahlen- oder Textvariable und fügst im Wertfeld andere Variablen ein.
Fluide Schriftgrößen mit festen Grenzen
Divi unterstützt über die Advanced Units Funktionen wie clamp(). Ab 5.18 kannst du darin Variablen verwenden. Du legst zum Beispiel eine Variable für die kleinste und eine für die größte Überschriftengröße an und setzt beide in eine Variable „Fluid Heading“ mit clamp() ein. Der mittlere Wert sorgt für die Skalierung je nach Bildschirmbreite, die beiden Variablen bestimmen die Grenzen. Wünscht sich deine Kundin größere Überschriften, änderst du nur noch den Maximalwert und alles passt sich an. calc(), min() und max() funktionieren genauso.
Wiederverwendbare Textbausteine
Textvariablen kannst du jetzt aus anderen Textvariablen und festem Text zusammensetzen. Aus einer Variable für den Firmennamen und einer für das Jahr wird so eine fertige Copyright-Zeile für den Footer. Das gleiche Prinzip funktioniert für Kontaktdaten oder Preise: E-Mail-Adresse und Telefonnummer pflegst du einmal und nutzt sie in Sätzen wie „Schreib mir an …“ auf mehreren Seiten.
Variablen, dynamische Inhalte und Text in einem Feld
Auch normale Textfelder und Rich-Text-Felder sind flexibler geworden. Du kannst darin mehrere Variablen, dynamische Inhalte und eigenen Text mischen. Ein Beispiel ist die Beitragsinfo im Blog: Du schreibst „Von“, fügst den Autor als dynamischen Inhalt ein, dann das Veröffentlichungsdatum und die Anzahl der Kommentare, jeweils mit deinen eigenen Trennzeichen. Im Rich-Text-Feld bleibt die Formatierung erhalten, der Name kann also fett und das Datum kursiv sein. Das funktioniert auch im Loop Builder, sodass jeder Beitrag in der Liste seine eigenen Daten zeigt.
Chips und das Kürzel {{
Damit das übersichtlich bleibt, erscheint jede Variable und jede dynamische Quelle im Feld als eigener Chip. Klickst du einen Chip an, bekommst du Optionen nur für genau diesen Eintrag:
• Chip ersetzen, entfernen oder lösen, ohne den Text drumherum anzufassen
• Chips in einfachen Textfeldern per Drag & Drop verschieben
• Text markieren und durch eine Variable oder einen dynamischen Inhalt ersetzen
• Mit der Maus über einen Chip fahren, um den Wert oder die verschachtelte Formel zu sehen
Für alle, die lieber tippen als klicken: Gib in einem unterstützten Text-, URL- oder CSS-Zahlenfeld zwei geschweifte Klammern {{ ein. Die Variablenauswahl öffnet sich an der Cursorposition, und nach dem Einfügen schreibst du einfach weiter. Die Suche im Variablen-Fenster findet außerdem auch Variablen, die in anderen verwendet werden. Und beim Export kommen alle abhängigen Variablen automatisch mit, damit auf der nächsten Website nichts fehlt.
Wichtige Fixes, die du kennen solltest
Neben den Variablen schließt 5.18 acht Lücken bei Sicherheit und Benutzerrechten. Die wichtigsten:
• Im Tabs-Modul wurde HTML in den Tab-Titeln ungefiltert ausgegeben (Stored XSS). Das ist behoben.
• Besucher konnten veröffentlichte Divi-Library-Layouts aufrufen, die nicht öffentlich gedacht waren.
• Der Divi 5 Migrator konnte Beiträge umwandeln oder zurücksetzen, die der Nutzer gar nicht bearbeiten darf.
• Mitarbeiter konnten die Standard-Farbpalette ändern, und passwortgeschützte Inhalte ließen sich ohne Passwort in andere Beiträge kopieren.
Außerdem behalten importierte Option-Group-Presets jetzt ihre Zuweisungen, Contact-Form-Layouts landen nach der Migration auf Divi 5 nicht mehr im Kompatibilitätsmodus, und ACF-Felder aus Optionsseiten erscheinen über Dynamic Content wieder im Frontend. Für WooCommerce-Shops wichtig: keine doppelten Produktbilder mehr mit Image-Swap-Plugins, und im Katalog versteckte Produkte tauchen nicht mehr im Loop Builder auf.
Nachtrag: Divi 5.18.1
Ein Tag später hat Elegant Themes mit Divi 5.18.1 nachgelegt. Neue Funktionen gibt es darin nicht, dafür eine weitere wichtige Korrektur bei den Benutzerrechten: Wer Beiträge bearbeiten durfte, konnte aus dem Visual Builder heraus ein Theme-Builder-Layout veröffentlichen und damit Header, Footer und Body der ganzen Website ersetzen. In WordPress haben dieses Recht nicht nur Redakteure, sondern auch Autoren und Mitarbeiter.
Außerdem behebt 5.18.1 unter anderem:
• einen Fatal Error, wenn Theme-Builder-Vorlagen ACF-Felder anzeigen, die es im aktuellen Beitrag nicht gibt
• ein leeres Layout im Visual Builder, wenn eine mit Divi gebaute Seite als WooCommerce-Shopseite eingestellt ist
• Sale-Badges von WooCommerce, die über dem mobilen Menü eines globalen Headers lagen
• Videos im Group Carousel, die fehlten, verzerrt waren oder sich nicht abspielen ließen
• Hintergrundbilder, die verschwanden, wenn ein globaler Verlauf darüber lag
• geerbte Zahlenvariablen aus Presets, die bei Außen- und Innenabstand fälschlich als aktiv angezeigt wurden
Was du jetzt tun solltest
Spiel direkt Divi 5.18.1 ein, auch wenn du noch auf einer älteren Version bist. Wie immer gilt: zuerst auf einer Staging-Seite oder mit frischem Backup. Wegen der Sicherheits-Fixes lohnt sich ein zügiges Update besonders, wenn auf deiner Website mehrere Personen mit unterschiedlichen Rollen arbeiten. Nutzt du ACF-Felder in Theme-Builder-Vorlagen, wirf nach dem Update einen kurzen Blick auf ein paar Beiträge im Frontend. Danach kannst du die neuen Möglichkeiten ausprobieren: Schau dir deine Abstände und Schriftgrößen an und überlege, welche Werte sich aus wenigen Basisvariablen ableiten lassen. Ein guter Einstieg ist die fluide Überschrift mit clamp().Fazit
Mit Divi 5.18 werden Variablen vom Wertespeicher zum echten Design-System. Abstände rechnen mit, Schriftgrößen skalieren innerhalb deiner Grenzen, und Texte setzen sich aus Bausteinen zusammen, die du an einer Stelle pflegst. Ich bin gespannt, welche Variable du als Erstes verschachtelst. Erzähl es mir in der Community.Quellen
Elegant Themes Blog (Englisch) 27.10.2026 Nested Variables, Variable Math & Variable Combinations for Divi 5Dieser Beitrag wurde mit KI-Unterstützung erstellt.
0 Kommentare