Der neue Divi 5 CSS Grid Editor macht komplexe Layouts endlich greifbar
Divi 5 unterstützt schon länger CSS Grid, eine der mächtigsten Layout-Techniken im modernen Webdesign. Bisher musste man die Grid-Einstellungen aber über abstrakte Zahlenfelder im Einstellungsbereich konfigurieren – wer schon einmal versucht hat, ein Raster-Layout nur über Zahlen zu verstehen, weiß, wie unübersichtlich das werden kann. Mit dem neuen CSS Grid Editor, den Elegant Themes am 9. Juli 2026 präsentiert hat, bekommt Divi 5 jetzt eine visuelle Oberfläche dafür. Bevor ich das neue Werkzeug im Detail vorstelle, lohnt sich ein kurzer Blick darauf, was ein CSS Grid überhaupt ist und warum es von Hand so mühsam zu verwalten ist.
Was ist eigentlich ein CSS Grid?
Ein CSS Grid ist eine Technik, mit der Webbrowser Inhalte in einem Raster aus Zeilen und Spalten anordnen – ähnlich wie eine Tabelle, nur deutlich flexibler. Statt Elemente einfach untereinander oder nebeneinander zu stapeln, kannst Du mit einem Grid genau festlegen, wo ein Element im Raster sitzt, wie viele Zeilen und Spalten es einnimmt und wie groß die Abstände zwischen den Feldern sind. Damit lassen sich Layouts umsetzen, die mit einfacheren Mitteln kaum möglich sind: zum Beispiel ein magazinartiges Raster, bei dem ein großes Bild über zwei Spalten und drei Zeilen reicht, während daneben kleinere Textblöcke im Raster verteilt sind.
Warum CSS Grid von Hand so unangenehm ist
Das Problem: Ein Grid per Code oder über reine Zahlenfelder zu konfigurieren, erfordert, mehrere Eigenschaften gleichzeitig im Kopf zu behalten – etwa die Anzahl der Spalten und Zeilen, ihre Breite und Höhe, die Abstände zwischen den Feldern sowie zusätzliche Regeln dafür, welches Element wo genau sitzen soll. Verändert man einen Wert, wirkt sich das oft auf das gesamte Raster aus, ohne dass man das vorher sehen kann – man muss speichern, die Vorschau laden, wieder zurück, anpassen, erneut prüfen. Gerade bei komplexeren Layouts mit vielen Elementen wird das schnell zur Geduldsprobe, selbst für erfahrene Webdesigner.
Divi 5 und CSS Grid: Die Ausgangslage
Divi 5 hat CSS Grid als Layout-Option bereits integriert und liefert dafür vorgefertigte Grid-Vorlagen sowie umfangreiche Einstellungsmöglichkeiten. Bislang erfolgte die Feinjustierung – also das genaue Platzieren, Vergrößern oder Verschieben einzelner Elemente im Raster – aber über Einstellungsfelder mit Zahlenwerten. Das funktioniert, ist für die meisten Nutzer jedoch wenig intuitiv, weil man sich das Ergebnis im Kopf vorstellen muss, statt es direkt zu sehen.
Der neue Divi 5 CSS Grid Editor im Detail
Mit dem neuen Divi Grid Editor können Grid-Layouts jetzt direkt visuell bearbeitet werden. Sobald Du einem Container das Layout „Grid“ zuweist, öffnet sich über die Schaltfläche „Grid-Editor öffnen“ (englisch „Open Grid Editor“) eine Oberfläche, die das Raster Deines Containers sichtbar macht.
Grids per Drag & Drop aufbauen
Im Divi 5 CSS Grid Editor lassen sich Elemente direkt anfassen: An den vier Ecken jedes Elements erscheinen Anfasspunkte, mit denen Du seine Größe über mehrere Zeilen und Spalten hinweg veränderst. Elemente lassen sich außerdem per Drag & Drop von einem Rasterfeld in ein anderes verschieben. Auch die Abstände zwischen den Feldern (horizontal wie vertikal) sowie die Breite und Höhe einzelner Spalten und Zeilen kannst Du direkt im Divi Grid Editor ziehen oder als Zahl eingeben. Du kannst sogar zusätzliche Rasterfelder einfügen, um lange, komplexe Layouts zu planen – auch wenn der Container noch gar keine Inhalte enthält.
Bestehende Layouts verstehen und anpassen
Ein großer Vorteil des neuen Divi 5 CSS Grid Editor zeigt sich bei bereits bestehenden Layouts: Statt sich durch verschachtelte Zahlenfelder zu klicken, siehst Du auf einen Blick, welche sogenannte Offset-Regel (eine Regel, die festlegt, wie ein Element vom regulären Rasterfluss abweicht) welches Element betrifft. Das gilt auch für Divis vorgefertigte Grid-Vorlagen: Du kannst eine davon auswählen und anschließend im Divi Grid Editor an Deine Bedürfnisse anpassen.
Grids, die zuverlässig mit Loops funktionieren
Technisch bemerkenswert: Divis Grid-Layouts werden auf Ebene des Containers gespeichert und wirken über sogenannte Pseudoklassen auf die enthaltenen Elemente – das Raster ist also unabhängig von den konkreten Kindelementen. In der Praxis bedeutet das: Wenn Du Elemente hinzufügst, löschst, duplizierst oder über eine Loop-Funktion (also dynamisch wiederholte Inhalte, etwa eine Liste von Blogbeiträgen) ausgibst, ordnet sich alles automatisch korrekt im Raster ein, ohne dass Du jedes einzelne Element manuell nachjustieren musst.
Für wen lohnt sich der neue Divi Grid Editor?
Das neue Werkzeug richtet sich in erster Linie an alle, die aktiv mit dem Divi-Builder gestalten – also Webdesigner, Agenturen und auch technisch interessierte Website-Betreiber, die Ihre Seite selbst bauen. Für sie bedeutet der visuelle Editor vor allem eines: deutlich weniger Zeit für Layouts, die vorher mühsames Ausprobieren erforderten. Betreibst Du Deine Website über eine Agentur oder einen Freelancer und gestaltest nicht selbst mit Divi, merkst Du von diesem Update direkt wenig – der Nutzen kommt bei Dir eher indirekt an, etwa dadurch, dass Layoutwünsche künftig schneller und zuverlässiger umgesetzt werden können.
Was bedeutet das konkret für Dich?
Baust Du Deine Website selbst mit Divi 5 und hast Dich schon einmal mit CSS Grid herumgeärgert, lohnt sich ein Blick in den neuen Divi 5 CSS Grid Editor – Du findest ihn beim Anlegen eines Containers über die Option „Eigenes Grid erstellen“ oder über die Schaltfläche „Grid-Editor öffnen“, sobald ein Element auf das Layout „Grid“ gestellt ist. In den Nutzerkommentaren zum Feature berichten einzelne Anwender von kleineren Bugs, wie es bei frisch veröffentlichten Divi-5-Funktionen öfter vorkommt – wer produktiv arbeitet, testet das Feature also am besten zunächst auf einer Staging-Version, bevor er es auf der Live-Seite einsetzt. Nutzt Du Divi nicht selbst oder lässt Deine Website von Dritten betreuen, musst du nichts weiter tun.
Und jetzt?
Wenn Du experimentierfreudig bist, probier den Divi Grid Editor bei Deinem nächsten Layout einfach aus – gerade bei mehrspaltigen oder magazinartigen Seitenbereichen macht er den Unterschied schnell spürbar.
