Generationenwechsel: Was bringt Divi 5 – und wie funktioniert das Upgrade?

Vor ziemlich genau drei Jahren kündigten die Entwickler Divi 5 an. Dabei stellten sie klar, dass der beliebte WordPress Page Builder nicht einfach ein paar weitere Features erhält, sondern von Grund auf neu entwickelt wird. Nun ist endlich die erste Beta-Version verfügbar. In diesem Artikel geht es um die grundsätzlichen Unterschiede zwischen der alten und der neuen Version – und darum, wie man bestehende Divi-Websites auf Divi 5 umstellen kann.

Die Probleme von Divi 4

Divi gehört zu den populärsten Page Builders für WordPress. Auch Metoki hat diverse Websites auf dieser Plattform entwickelt. Allerdings wurde in den letzten Jahren immer deutlicher, dass Divi nicht mehr auf dem neusten Stand der Technik ist. Folgende Probleme stehen im Vordergrund:

• Performance: Grössere Divi-Websites werden schnell träge. Das schadet nicht nur der User Experience und dem Google-Ranking, sondern es macht vor allem die Arbeit der Content Managers zu einer Geduldsprobe.
• Effizienz: Im Divi Builder sind die Einstellmöglichkeiten für die einzelnen Abschnitte, Zeilen und Module in Dialogboxen untergebracht, die wiederum in zahlreiche Tabs und Akkordeons unterteilt sind. Das macht zwar die Benutzeroberfläche übersichtlicher, aber die Arbeit umständlicher, denn es sind oft sehr viele Klicks nötig, um einen einzigen Parameter anzupassen.
• Layout-Optionen: Als Divi auf den Markt kam, arbeitete man in WordPress noch mit dem Classic Editor. Wer komplexere Layouts erstellen wollte, musste damals noch tief in die Trickkiste greifen. Im Vergleich dazu war der Divi Builder mit seinen Spalten-Rastern sehr fortschrittlich und benutzerfreundlich. Wer allerdings weiss, was heute mit CSS Flexbox und CSS Grid möglich ist, vermisst inzwischen bei Divi zahlreiche Möglichkeiten des modernen Webdesigns.
• CSS-Unterstützung: Der Divi Builder ist auf Personen ausgerichtet, die sich nicht mit CSS beschäftigen möchten. Zwar kann man auch in Divi CSS-IDs bzw. CSS-Klassen vergeben und eigenen CSS-Code hinterlegen. Aber diese Arbeitsweise wird nur rudimentär unterstützt und eignet sich deshalb nur für Einzelfälle. Als Entwickler eine Website von Grund auf zu erstellen ist deshalb mit Divi wenig attraktiv.

Gerade im Vergleich mit der Konkurrenz wurden diese Probleme immer offensichtlicher: Moderne Page Builders wie beispielsweise Bricks liessen Divi wortwörtlich alt aussehen. Dies blieb auch den Entwicklern von Elegant Themes nicht verborgen, und so entschlossen sie sich 2022 zu eine ungewöhnlichen Schritt: Sie kündigten an, die Weiterentwicklung von Divi 4 weitgehend einzustellen und stattdessen Divi 5 zu entwickeln – das aber keine neuen Features, sondern eine neue technische Grundlage und eine neue Benutzeroberfläche erhalten sollte.

Für Divi-Kunden war das eine bittersüsse Nachricht: Zwar konnten sie auf einen moderneren Page Builder hoffen, mussten aber damit rechnen, ihre vertraute Arbeitsumgebung zu verlieren. Zudem brauchten sie Geduld: Die erste Beta-Version von Divi 5 wurde für 2023, die finale Version eher für 2024 in Aussicht gestellt.

Es sollte zwei ganze Jahre länger dauern, bis im Oktober 2025 endlich die erste Beta-Version von Divi 5 veröffentlicht wurde. Das ist eine lange Zeit, gerade in der Internet-Welt, und viele dürften Divi deshalb abgeschrieben oder zumindest vergessen haben. Ein erster Blick auf Divi 5 zeigt aber schon jetzt: Das lange Warten hat sich gelohnt, und man wird auch in Zukunft mit Divi rechnen müssen.

Erste Erfahrungen: Test-Migration mit Divi 5

Im Video, mit dem die Public Beta vorgestellt wurde, wird unter anderem die Migration einer bestehenden Website von Divi 4 auf Divi 5 gezeigt. Mit dem Divi 5 Migrator, der nach der Installation von Divi 5 im WordPress Backend erscheint, geht dies quasi vollautomatisch von statten – zumindest in der Theorie.

Wir haben diesen Prozess anhand einer unserer Kunden-Websites getestet. Es handelt sich um eine ziemlich durchschnittliche, zweisprachige Website mit rund 130 Seiten und 100 Beiträgen. Abgesehen von einigen HubSpot-Formularen und einer eingebetteten Landkarte hat diese Website wenige offensichtliche Besonderheiten. Allerdings haben sich im Verlaufe von rund sieben Jahren seit der Erstellung rund 45 Plug-ins angesammelt – viel Material für potenzielle Kompatibilitätsprobleme also.

Unseren Test haben wir selbstverständlich nicht auf dem Live-System, sondern auf einer Kopie gemacht. Wie im Video beschrieben haben wir dazu die aktuelle Divi 5 Public Beta aus unserem Konto bei Elegant Themes herunter- und in unsere Test-Installation hochgeladen. Divi 5 erkennt Divi 4 als seinen Vorgänger und fragt wie gewohnt, ob die alte Version ersetzt werden soll:

Bestätigt man dies und schaut sich dann das Frontend seiner Website an, dann hat sich dort noch nichts verändert. Die folgende Meldung im Admin-Bar erklärt auch, warum dies so ist: Solange Divi noch Divi-4-Module auf der Seite findet, wird der Kompatibilitäts-Modus aktiviert und die Seite bleibt unverändert.

Erst wenn man eine solche Seite im Divi Builder öffnet, wird sie automatisch in das Divi-5-Format konvertiert. Das geht extrem schnell und ohne einen entsprechenden Hinweis, sodass man es leicht verpasst. Sobald man die Seite dann erstmals speichert, ist sie dauerhaft konvertiert. Vorsichtige Naturen können also kritische Seiten einzeln konvertieren und die Umstellung auf Divi 5 schrittweise vollziehen.

Im Normalfall wird man allerdings nicht Seite für Seite konvertieren, sondern die gesamte Website. Hierfür gibt es den Divi 5 Migrator, der zuerst die gesamte Website auf mögliche Kompatibilätsprobleme prüft und einen entsprechenden Bericht ausgibt. In unserem Fall listete der Bericht einige wenige Probleme auf, die uns aber nicht daran hinderten, die Migration durchzuführen.

Die eigentliche Migration vollzieht sich dann automatisch und dauerte in unserem Fall keine fünf Minuten. Erwartungsfroh wechselten wir anschliessend ins Website-Frontend – und waren ziemlich konsterniert: Unsere gesamte Website bestand nur noch aus Header und Footer, während alle Seiteninhalte verschwunden waren!

Glücklicherweise ist der Divi 5 Migrator auf solche Fälle vorbereitet und bietet die Möglichkeit, die konvertierten Seiten zurückzusetzen (Button «Restore Divi 4 Content»). Auch dies geht automatisch und dauert nur Minuten – und hat in unserem Fall reibungslos funktioniert.

Für unsere weiteren Tests haben wir deshalb wie oben beschrieben nur einzelne Seiten konvertiert. In diesem Fall blieben die Seiteninhalte erhalten, und auch das Design wurde meist einwandfrei übernommen. Gelegentlich gingen allerdings durch die Konvertierung Abstände verloren, und teilweise wurden auch Inhaltselemente verschoben. Ob das an den Besonderheiten unserer Website oder an Divi 5 liegt, konnten wir noch nicht eruieren. Bei einer ersten Beta-Version sind solche Probleme allerdings auch nicht ganz überraschend.

Der neue Page Builder von Divi 5

Sprechen wir noch kurz über den Page Builder von Divi 5. Mit dem, was man von Divi 4 kennt, hat dieser nur noch wenig zu tun – was aber durchaus positiv zu verstehen ist. Das beginnt bereits beim Öffnen des Builders: Er wird nun blitzschnell geladen und läuft auch sonst erfreulich flüssig.

Das neue Interface erinnert mehr an Elementor oder Bricks als an das bisherige Divi. In der linken Spalte kann man nun einen Strukturbaum einblenden, den es in ähnlicher Form auch im «Gutenberg» Block-Editor gibt – Divi bot bisher nur die etwas sperrige Wireframe-Ansicht. (Wem diese gefallen hat: Es gibt sie weiterhin.) In der rechten Spalte können die Eigenschaften des gerade angeklickten Seitenelements bearbeitet werden. Die Panels sind allerdings frei in den beiden Randspalten positionierbar, falls man es lieber umgekehrt hätte, und selbst schwebende Panels wie bei Divi 4 sind möglich.

Eine wesentliche Neuerung ist auch, dass Container-Elemente (also Sections, Rows und Columns) nun wahlweise als Block, Flex oder Grid definiert werden können. Während Block dem bisherige Verhalten entspricht (untergeordnete Elemente belegen immer die gesamte Breite des Containers), kann man mit Flex oder Grid beliebig komplexe Layouts gestalten. Wem dies zu kompliziert ist, der kann aber weiterhin auf die bekannten Spaltenraster zurückgreifen.

Ebenfalls neu ist die Möglichkeit, CSS-Variablen zu definieren und diese dann in den Einstellungen der einzelnen Elemente zu nutzen. Wenn man konsequent mit diesen Global Variables arbeitet, erhält man nicht nur ein einheitlicheres Design, sondern kann auch nachträgliche Anpassungen sehr einfach implementieren.

Ähnlich wie in anderen Page Builders lassen sich in Divi 5 die Breakpoints für das Responsive Webdesign frei definieren. Zudem gelten Einstellungen immer für jenen Breakpoint, den man sich gerade anzeigen lässt. Durch diese beiden Änderungen ist es nun wesentlich einfach, eine Divi-Website für alle Bildschirmgrössen zu optimieren.

Trotz dieser deutlichen Unterschiede dürfte den meisten Benutzer:innen von Divi 4 der Umstieg auf Divi 5 leicht fallen. Viele Dinge funktionieren sehr ähnlich wie in jedem anderen Webseiten-Editor und sind schnell gelernt. Trotzdem sind viele Elemente, die für Divi typisch waren, weiterhin vorhanden. Man kann sich also Schritt für Schritt an die neuen Möglichkeiten herantasten.

Fazit: Eine gelungene Modernisierung

Divi 5 ist zweifellos ein vielversprechender Neuanfang. Der neue Page Builder löst viele Probleme von Divi 4 und bricht trotzdem nicht völlig mit der Vergangenheit. Die Migration bestehender Divi-Websites ist konzeptionell gut gelöst, auch wenn sie in unserem Test mit der allerersten Beta-Version noch nicht reibungslos funktioniert hat.

Wenn wir die eingangs erwähnten Hauptkritikpunkte von Divi 4 anschauen, dann überzeugt Divi 5 sowohl bezüglich Performance als auch bezüglich Effizienz und Layout-Optionen. Einzig die CSS-Unterstützung bleibt bescheiden, auch wenn die neuen Global Variables ein Fortschritt sind. Divi bleibt auch in der neuen Version primär ein Page Builder für Leute, die ihre Website über einen visuellen Editor erstellen und sich nicht mit CSS befassen wollen. Entwickler hingegen sind mit Bricks (oder in naher Zukunft auch Etch) deutlich besser bedient.