Der neue Variablen-Generator – dein Turbo für konsistentes Design
Du kennst das: Du baust eine Website, willst alles schön konsistent halten, und irgendwann verlierst du den Überblick über deine Abstände, Schriftgrößen und Farben. Und spätestens wenn der Kunde die Primärfarbe ändern will, fängst du an zu schwitzen. Genau da setzt der neue Variablen-Generator an.
Divi 5 arbeitet schon länger mit einem variablen- und preset-basierten Design-System. Was bisher gefehlt hat: ein schneller Einstieg. Denn clamp() für fluid Sizing zu lernen kostet Zeit, und ein durchdachtes Farbsystem von Grund auf aufzubauen auch. Genau das übernimmt der Generator jetzt für dich.
Fluid Sizing – und du musst kein CSS-Profi sein
Der erste Teil des Generators ist mächtig: das Fluid Sizing System. Hover im Variablen-Manager über die Zahlengruppe, klick auf „Generate Fluid Sizing Variables“ – und wähl aus, welches System du aufbauen willst:
• Font Size – Schriftgrößen, die sich mit der Bildschirmgröße skalieren
• Spacing – Abstände für Margin und Padding, die mitwachsen
• Gap – Abstände für Flex-Container
• Radius – abgerundete Ecken, die sich proportional anpassen
• Border Width – Rahmenbreiten, die mit dem Viewport skalieren
• Clamp (Generisch) – für alle anderen Anwendungsfälle
Für Einsteiger gilt: einfach die gewünschte Variablenanzahl wählen, auf „Add Variables To My Site“ klicken – fertig. Divi erledigt den Rest mit clamp()-Werten, die zwischen einem Minimum und Maximum fluid skalieren. Du brauchst dafür keinerlei CSS-Kenntnisse.
Für Profis gibt es eine Anpassungs-Sidebar mit vollständiger Kontrolle:
Skalierungsfunktion, Website-Breiten für die clamp-Berechnung, manuelle Einzelanpassungen, statische (nicht-fluid) Varianten und sogar Präfixe und Suffixe für die Variablennamen.
Und weil es nicht nur beim Generator bleibt: Die Variablen-Auswahl hat jetzt eine Suchfunktion und alphabetische Sortierung bekommen, und das Rendering im Variablen-Manager läuft spürbar flüssiger.
Farb-Palette auf Knopfdruck
Im Variablen-Manager hover einfach über die Farbgruppe – und du siehst den neuen Button „Generate Color Palette Variables“. Divi nimmt deine bestehende Primärfarbe und generiert daraus automatisch ein relatives Farbsystem: abgestimmte Sekundärfarbe, eine Palette von hell bis dunkel, transparente Varianten – alles mathematisch sauber über HSL berechnet.
Das Besondere: Jede generierte Farbe ist relativ zur Primärfarbe. Wenn du die Primärfarbe später änderst, passt sich die gesamte Palette automatisch an. Du änderst eine Variable, und das komplette Farbschema deiner Website folgt. Für Soloselbstständige, die Kundenprojekte betreuen, ist das ein echter Gamechanger.
Für uns Webdesigner entsteht eine zusätzliche Herausforderung: Wir erhalten gerne mal Design-/Branding-Kits, bei denen mehrere Farben schon definiert sind. Vielleicht wird es dazu später noch eine Anpassung geben…lassen wir uns überraschen!
Breadcrumbs-Modul – endlich nativ in Divi
Wer SEO ernst nimmt, weiß: Breadcrumbs sind Gold wert. Sie helfen Suchmaschinen dabei, die Struktur deiner Website zu verstehen, und geben Besuchern eine einfache Navigation. Bisher musstest du das entweder über Plugins lösen oder selbst basteln.
Mit Divi 5.4 ist das Vergangenheit. Das neue Breadcrumbs-Modul ist vollständig in den Visual Builder integriert, zeigt dir eine Live-Vorschau direkt im Builder und nutzt die native WordPress-Seitenhierarchie. Du kannst es stylen wie jedes andere Divi-Modul – Farben, Schrift, Abstände, alles über die gewohnten Design-Optionen.
Der KI-Agent wächst weiter
Der Divi AI Agent bekommt in Version 5.4 gleich mehrere handfeste Upgrades. Das größte ist wohl der neue Chat-Verlauf: Du siehst jetzt alle deine bisherigen Gespräche mit dem Agenten, kannst zwischen ihnen wechseln, Chats umbenennen, löschen, anpinnen und sie sind sogar zeitbasiert gruppiert. Das macht das Arbeiten mit dem KI-Agenten deutlich übersichtlicher.
Darüber hinaus kann der Agent jetzt Presets lesen und verwalten – er kann Presets auflisten, erstellen, bearbeiten, klonen und löschen. Außerdem wurden neue Tools ergänzt, mit denen der Agent Module klonen, sperren und entsperren kann. Kurz gesagt: Der KI-Agent versteht dein Divi-Setup jetzt viel besser und kann tiefer in deinen Workflow eingreifen.
Performance & Builder-Verbesserungen
Ein Update wäre kein echtes Divi-Update ohne spürbare Performance-Verbesserungen – und auch hier liefert 5.4. Die Wireframe-Ansicht wurde bei großen Layouts beschleunigt, das Ziehen und Skalieren von Modals ist flüssiger geworden, und auch die CSS-Ausgabe im Frontend wurde optimiert: Unnötige CSS-Variablen werden jetzt nicht mehr ausgegeben, was die Ladezeiten weiter reduziert.
Für alle, die viel mit dem Theme-Editor arbeiten: Ein nerviger Bug beim Bearbeiten großer CSS-Dateien in den Theme Options ist jetzt Geschichte – der Cursor springt nicht mehr beim Tippen.
WooCommerce-Fixes
Wer Divi für Shops nutzt, freut sich über mehrere gezielte Bugfixes: Die verwandten Produkte filtern jetzt korrekt nach Kategorien, die Cart-Totals-Felder zeigen endlich das konfigurierte Focus-Styling an, und Checkout-Felder wenden die eingestellten Schriftstärken konsistent an. Klingt nach Details – macht im Live-Shop aber einen echten Unterschied.
Fazit
Divi 5.4 ist kein großes Schaufenster-Update, sondern ein sehr durchdachtes Release, das genau dort ansetzt, wo Webdesigner in der täglichen Arbeit Zeit verlieren: beim Aufbau konsistenter Design-Systeme, bei der Navigation auf der Website und bei der Zusammenarbeit mit dem KI-Agenten.
Vor allem der Variablen-Generator und das Breadcrumbs-Modul sind Features, die sofort praktischen Nutzen bringen. Update ist empfohlen – und natürlich erst mal auf einer Staging-Umgebung testen, wie immer.
Quellen
Blog-Beitrag Elegant Themes (Englisch)
30.04.2026 Divi 5 Sizing System & Color Palette Variable Generator
0 Kommentare