Divi 5 ist das größte Update in der Geschichte von Elegant Themes. Der neue Visual Builder basiert auf einem komplett neu entwickelten React-Frontend und einem JSON-Dateiformat — ein Paradigmenwechsel gegenüber dem Shortcode-System von Divi 4. Dieses Tutorial erklärt, was neu ist, was sich verändert hat und wie du mit KI Tools wie anipage.io Divi 5 Seiten in Minuten erstellen kannst.
Was ist neu in Divi 5?
Divi 5 ist kein inkrementelles Update — es ist eine komplette Neuentwicklung. Das auffälligste Merkmal: Das Shortcode-System wurde vollständig durch ein JSON-basiertes Dateiformat ersetzt. Statt langer verschachtelter `[et_pb_section]`-Shortcodes speichert Divi 5 alle Seiteninhalte als strukturierte JSON-Objekte. Das neue Frontend basiert auf React und Virtual DOM, was zu deutlich schnelleren Builder-Ladezeiten und flüssigerer Interaktion führt. Das Theme-System wurde ebenfalls überarbeitet: Divi 5 bringt ein modulares Global-Styles-System, in dem Typografie, Farben und Abstände zentral definiert und konsistent auf alle Module angewendet werden. Neue Module ergänzen das Repertoire, und bestehende Module wurden mit erweiterten Styling-Optionen versehen. Der Site Builder (Full Site Editing) ist tiefer integriert als in Divi 4, was Header- und Footer-Verwaltung direkt im Visual Builder ermöglicht.
Divi 5 vs. Divi 4 — die wichtigsten Unterschiede
Dateiformat
Divi 4 speichert Inhalte als WordPress-Shortcodes direkt im `post_content`-Feld der Datenbank. Diese Shortcodes sind für Menschen schwer lesbar und erzeugen bei deaktiviertem Divi unlesbaren Code auf der Seite. Divi 5 wechselt zu einem JSON-Format, das in einem separaten Custom-Field gespeichert wird. Das JSON-Markup ist strukturiert, maschinenlesbar und von KI-Tools wie anipage.io direkt generierbar. Im Gegensatz zu Shortcodes hinterlässt Divi 5 beim Deaktivieren des Plugins sauberen Post-Content ohne unlesbaren Code.
Performance
Divi 4 wurde häufig für langsame Frontend-Performance kritisiert: zu viel DOM, viele globale Styles, blockierendes JavaScript. Divi 5 adressiert diese Probleme mit optimiertem CSS-Output, Code-Splitting und verbessertem Asset-Management. Erste unabhängige Performance-Tests zeigen deutliche Verbesserungen bei Core Web Vitals — insbesondere bei Largest Contentful Paint (LCP) und Total Blocking Time (TBT). Der Builder selbst lädt schneller und reagiert flüssiger, was die Arbeit im Visual Builder angenehmer macht.
Kompatibilität
Die meisten Divi 4 Module sind in Divi 5 verfügbar, jedoch mit angepasster JSON-Syntax statt Shortcode-Parametern. Drittanbieter-Erweiterungen (Divi Add-Ons, Divi-Plugins von DiviBooster, Divi Extended etc.) müssen von ihren Entwicklern für Divi 5 aktualisiert werden — nicht alle sind zum Launch kompatibel. Child Themes für Divi 4 funktionieren in Divi 5 möglicherweise nicht vollständig, da sich das Theme-System geändert hat. Elegant Themes empfiehlt, bestehende Sites vor dem Upgrade sorgfältig zu prüfen und kritische Add-Ons auf Divi 5-Kompatibilität zu verifizieren.
Erste Schritte mit dem Divi 5 Visual Builder
Nach der Installation von Divi 5 (über das Elegant Themes Dashboard unter Themes → Theme-Installation) aktivierst du Divi als Theme und findest unter Divi → Theme Optionen die neuen Global-Styles-Einstellungen. Erstelle eine neue Seite und klicke auf "Mit Divi Visual Builder bearbeiten". Die neue Oberfläche präsentiert sich mit einer überarbeiteten linken Panel-Navigation: Module, Sektionen, Globale Styles und Templates sind klar getrennt. Module fügst du per Drag-and-Drop oder per Klick auf das Plus-Symbol in jede Zeile ein. Das neue Styling-Panel auf der rechten Seite zeigt alle Optionen kontextsensitiv — du klickst ein Modul an und siehst sofort alle Styling-Optionen ohne Suchen. Globale Stile werden unter Divi → Globale Styles definiert und automatisch auf alle Module angewendet. Für Anfänger empfehlen sich die eingebauten Starter Templates als Ausgangspunkt.
Divi 5 mit KI erstellen — anipage.io
anipage.io unterstützt Divi 5 nativ: Die KI generiert vollständiges Divi 5 JSON-Markup aus einer Textbeschreibung. Du beschreibst deine Seite — Produkt, Zielgruppe, gewünschte Sektionen — und anipage.io produziert eine WordPress-importierbare ZIP-Datei mit fertigem Divi 5 JSON. Gegenüber dem manuellen Aufbau im Visual Builder spart das 2–4 Stunden pro Seite. Besonders wertvoll für Agenturen, die viele Divi-Sites bauen: statt jede Seite von null aufzubauen, generiert anipage.io eine professionelle Basis, die dann im Visual Builder verfeinert wird. Das Ergebnis ist ein vollständig strukturiertes Divi 5 Layout mit allen üblichen Sektionen (Hero, Features, Testimonials, Preise, FAQ, Footer) inklusive KI-generierter Bilder und fertigem Copytext.
Wann sollte ich von Divi 4 auf Divi 5 upgraden?
Für neue Projekte ist die Empfehlung klar: direkt mit Divi 5 starten. Du profitierst sofort von der besseren Performance, dem saubereren JSON-Format und dem neuen Styling-System — ohne Migrationsaufwand. Für bestehende Divi 4 Sites gilt: nicht überstürzen. Prüfe zunächst, ob alle verwendeten Divi-Add-Ons und Child Themes Divi 5-kompatibel sind. Teste das Upgrade auf einer Staging-Umgebung, bevor du die Live-Site umstellst. Elegant Themes stellt ein offizielles Migrations-Tool bereit, das einfache Layouts automatisch konvertiert — komplexe Shortcode-Strukturen mit vielen verschachtelten Custom-Klassen können jedoch manuelle Nacharbeit erfordern. Für Agenturen mit vielen bestehenden Divi-Projekten empfiehlt sich eine schrittweise Migration: neue Projekte in Divi 5, bestehende Sites zunächst in Divi 4 belassen und nach Bedarf migrieren.