Der neue Grid Editor macht CSS Grid richtig visuell
Du willst ein Grid-Layout bauen, tippst aber am Ende nur Zahlen in irgendwelche Felder, ohne wirklich zu sehen, was gerade passiert. Genau dieses Problem löst Divi 5.9.0 mit einem neuen Feature: dem Grid Editor.
CSS Grid gibt es in Divi 5 schon länger. Bisher liefen aber alle Einstellungen über die Panels im Design-Tab – Spaltenanzahl, Gaps, Offset-Regeln, alles über Dropdowns und Zahlenfelder. Mit 5.9.0 bekommst du dafür jetzt eine echte visuelle Arbeitsfläche direkt im Builder.
Was der Grid Editor kann
Sobald du einem Container ein Grid-Layout zuweist, taucht im Einstellungspanel ein neuer Button auf: „Open Grid Editor“.
Darin kannst du:
● Elemente per Drag & Drop in andere Zellen verschieben
● Größen an den Eckpunkten ziehen und über mehrere Zellen spannen
● Spalten- und Zeilenbreiten direkt visuell festlegen
● Gaps anpassen, ohne ins Zahlenfeld zu tippen
● Offset-Regeln direkt im Editor sehen und bearbeiten – inklusive neuer Number Variables
● Platzhalter-Elemente einfügen, um dein Layout zu planen, auch ohne passende Kind-Elemente
Auch beim Erstellen eines neuen Containers gibt es jetzt direkt die Option „Build Custom Grid“ – als Alternative zu den vorgefertigten Struktur-Templates, falls du von Anfang an frei bauen willst.
Wie schnell das geht, zeigt ein Beispiel aus der offiziellen Ankündigung: Aus einem einfachen zweispaltigen Grid wird durch Hochsetzen auf vier Spalten und ein paar Drag-Bewegungen an den Ecken einzelner Elemente in kürzester Zeit ein vollwertiges Masonry-Layout – ganz ohne eine einzige Einstellung im klassischen Panel zu öffnen.
Auch praktisch: Bestehende Layouts verstehen
Ein Nutzen, der im Alltag oft unterschätzt wird: Der Grid Editor hilft dir nicht nur beim Neu-Bauen, sondern auch beim Verstehen von Layouts, die du schon hast. Gerade bei komplexen Structure Templates mit mehreren Offset-Regeln verlierst du im klassischen Einstellungspanel schnell den Überblick, welche Regel welches Element betrifft. Öffnest du stattdessen den Grid Editor, siehst du auf einen Blick, was jede Regel bewirkt, und kannst sie direkt dort anpassen. Praktisch, wenn du ein fremdes Layout übernimmst oder ein älteres Projekt von dir selbst wieder aufmachst.
Der Clou für alle, die den Loop Builder nutzen
Technisch spannend: Das Grid-Layout wird komplett im Container selbst gespeichert und arbeitet mit Pseudoklassen, um einzelne Positionen im Grid anzusteuern. Deine Kind-Elemente selbst werden beim Verschieben oder Skalieren nicht verändert.
In der Praxis heißt das: Arbeitest du mit dem Loop Builder, fügen sich neue, gelöschte oder duplizierte Loop-Items automatisch korrekt ins bestehende Grid ein. Kein manuelles Nachjustieren mehr, wenn sich dein Blog- oder Produkt-Feed ändert.
Was du sonst noch wissen solltest
Neben dem Grid Editor bringt 5.9.0 auch einige wichtige Fixes mit: Der WooCommerce-Checkout zeigt jetzt zuverlässig ein einheitliches Formular statt mehrerer konkurrierender Varianten, und ein Sicherheitsfix verhindert, dass die Visual-Builder-REST-API Instagram-Tokens offenlegt. Beides solltest du mit dem nächsten Update ohnehin mitnehmen.
Für wen lohnt sich das Update?
● Du baust Blog- oder Produkt-Grids mit dem Loop Builder → weniger Nachjustieren bei neuen Beiträgen
● Du willst asymmetrische Layouts (z. B. jedes 4. Element breiter) → Offset-Regeln direkt im Editor statt im Einstellungs-Dschungel
● Du experimentierst gern visuell statt mit Zahlenwerten zu arbeiten → der Grid Editor ist genau dafür gemacht
Wenn du bereits mit CSS Grid in Divi 5 arbeitest, probiere den neuen Editor gleich bei deinem nächsten Projekt aus. Er ersetzt die bestehenden Einstellungen nicht, sondern ergänzt sie um eine deutlich schnellere, visuelle Arbeitsweise.
Mein Fazit
5.9.0 ist ein richtig irres Update. Viele davor waren auch schon irre, aber das jetzt…wow!
Ich habe selbst mit dem CSS-Grid gehadert…als es rauskam und danach. Mit dem Grid-Editor wird das Element endlich klarer verständlich.
Wie immer gilt: Backup vor dem Update, und wer auf einer Produktivwebsite arbeitet, testet vorher auf Staging. Wenn du Fragen hast oder Unterstützung beim Update brauchst, melde dich gerne – ich helfe dir dabei.
Quellen
Elegant-Themes Blog
09.07.2026 – Introducing the CSS Grid Editor for Divi 5 (Blog)
09.07.2026 – Introducing the CSS Grid Editor for Divi 5 (YouTube)
Dieser Beitrag wurde mit KI-Unterstützung erstellt.
0 Kommentare