Divi-zu-Gutenberg-Blockeditor-Migration in 6 einfachen Schritten

Wenn Sie Divi für Ihre WordPress-Website nutzen, haben Sie wahrscheinlich das gestiegene Interesse am Wechsel zum Gutenberg-Blockeditor. Leistungsverbesserungen und die kontinuierliche Optimierung von Gutenberg haben diesen Trend bei Agenturen, Teams und Website-Betreibern ausgelöst. Wir von Seahawk Mediahaben bereits zahlreiche Migrationen von Divi zu Gutenberg erfolgreich durchgeführt. Dieser Leitfaden erklärt Ihnen, warum sich der Wechsel lohnt, was Sie vorbereiten sollten, wie der Prozess abläuft und welche Fehler häufig vorkommen.

Kurz gesagt: Divi zu Gutenberg Block Editor

• Divi 5 hat sich von der Shortcode-Architektur verabschiedet, auf der ältere Divi-Websites basieren, und ist damit für viele Teams ein natürlicher Ausstiegspunkt.

• Gutenberg in Kombination mit einem Block-Theme erzeugt deutlich schlankeren HTML-Code, was sich direkt auf die Core Web Vitals-Werte.

• Mit dem Divi Layout Block können Sie jeweils eine Seite migrieren, sodass Sie nicht die gesamte Website auf einmal neu erstellen müssen.

• Jedes Divi-Modul hat ein natives Gutenberg-Äquivalent, von Kurzbeschreibungen und Schiebereglern bis hin zum Blog-Modul und den Theme Builder-Vorlagen.

• Durch das Beibehalten aller URLs und die Überprüfung des Schemas vor der Live-Schaltung bleiben Ihre Rankings während der Übergangsphase geschützt.

• Eine 20 bis 40-seitige Marketing-Website benötigt in der Regel ein bis drei Wochen, wenn die Migration ordnungsgemäß geplant wird.

Warum wechseln so viele WordPress-Websites von Divi?

Der Zeitpunkt dieser Umstellung ist kein Zufall. Elegant Themes hat Divi so umstrukturiert, dass dies Auswirkungen auf ältere Websites hat, und WordPress ist mittlerweile so ausgereift, dass der Block-Editor die meisten Anforderungen ohne Drittanbieter-Builder abdeckt.

Divi 5 hat seine eigene Architektur eingestellt

Elegant Themes hat Divi 5 mit einem blockbasierten Speicherformat neu entwickelt und das Shortcode-System der Vorgängerversionen abgeschafft. Wenn Sie eine Divi-4-Website betreiben, befinden sich Ihre Inhalte in Shortcode-Markup, das Divi 5 nicht mehr als Grundlage verwendet.

Elegant Themes hat einen Migrationsassistenten entwickelt, um die Umstellung zu ermöglichen, aber schon dieser Schritt bestätigt, dass die alte Architektur schrittweise abgeschafft wird.

Wenn eine Migration ohnehin erforderlich ist, lohnt es sich zu fragen, ob der Wechsel zu nativen Gutenberg-Blöcken langfristig sinnvoller für Ihre Website ist.

Gutenberg hat die Lücke geschlossen

WordPress 6.8 wurde im April 2025 veröffentlicht und brachte bedeutende Verbesserungen am Block-Editor, Version 6.9 ist für Dezember 2025 geplant. Die vollständige Website-Bearbeitung, globale Stile über theme.json, Template-Teile und Query-Loop-Layouts sind nun nativ verfügbar.

Die Funktionslücke, die einst proprietäre Website-Baukästen notwendig machte, hat sich für die meisten Marketing-Websites und inhaltsreichen WordPress-Installationen. Die Argumente für die Beibehaltung eines kostenpflichtigen Drittanbieter-Baukastens sind heute deutlich schwächer als noch vor einigen Jahren.

Was bringt Ihnen der Wechsel zu Gutenberg tatsächlich?

Viele Beiträge zur Migration von Divi zu Gutenberg konzentrieren sich auf den Prozess und lassen das Ergebnis völlig außer Acht.

Unsere Erfahrung bei Seahawk Media zeigt, dass sich Verbesserungen beständig in drei Bereichen ergeben: Leistung, Kosten und langfristige Wartungsfreundlichkeit.

Leistungssteigerungen, die Sie messen können

Divi lädt seine eigenen CSS- und JavaScript-Bundles auf jeder Seite, unabhängig davon, welche Elemente tatsächlich verwendet werden. Dieser Mehraufwand summiert sich schnell, insbesondere auf Seiten, die nur einen Bruchteil der Divi-Modulbibliothek nutzen.

Gutenberg, in Kombination mit einem korrekt konfigurierten Block-Theme, entfernt diese unnötige Datenmenge. Die Ausgabe ist schlanker, was Largest Contentful Paint), Cumulative Layout Shift (CLS) und Interaction to Next Paint (IBN) direkt verbessert.

Dies sind die wichtigsten Web Vitals , die sowohl die Nutzererfahrung als auch das Suchmaschinenranking beeinflussen. Bei jeder Divi-zu-Gutenberg-Migration, die wir bei Seahawk Media durchgeführt haben, waren die Leistungsverbesserungen durchweg messbar.

Keine Lizenzkosten oder Vertragsbindung

Divi benötigt eine aktive Mitgliedschaft bei Elegant Themes für Updates und die weitere Nutzung. Gutenberg ist Teil des WordPress-Kerns, daher fallen keine Lizenzkosten an und es besteht keine Abhängigkeit von den Preisentscheidungen einer kommerziellen Plattform.

Die Umstellung auf native Blöcke bedeutet auch, dass Ihre Inhalte nicht mehr an ein proprietäres Format gebunden sind.

Sollten Sie jemals das Theme ändern oder das Entwicklerteam wechseln müssen, bleiben Ihre Inhalte erhalten und funktionieren mit jeder Standard -WordPress-Konfiguration.

Was Sie klären sollten, bevor Sie auch nur eine Seite anfassen?

In der Vorbereitungsphase entscheidet sich, ob Divi-Migrationen gelingen oder ob es zu ernsthaften Problemen kommt.

Teams, die sich vorschnell an die Überarbeitung von Seiten machen, bevor sie die Grundlagen geschaffen haben, sehen sich mit Verzögerungen, Designinkonsistenzen und SEO-Problemen konfrontiert, die völlig vermeidbar sind.

Bei Seahawk Media betrachten wir das Vorab-Migrations-Audit als unverzichtbaren Bestandteil jedes Projekts.

Sichern Sie Ihre Website und erstellen Sie eine Testumgebung

Klonen Sie die gesamte Live-Website, einschließlich Dateien und Datenbank, in eine Testumgebung, bevor Sie mit der Migration beginnen. Die Testumgebung muss eine vollständige, funktionsfähige Kopie der Live-Website sein.

Vergewissern Sie sich, dass Ihr Rollback-Prozess tatsächlich funktioniert, bevor Sie mit den Änderungen beginnen, und nicht erst, nachdem etwas schiefgegangen ist.

Führen Sie eine Divi-zu-Gutenberg-Migration niemals direkt auf Ihrer Live-Website durch. Das Risiko ist es einfach nicht wert, egal wie unkompliziert das Projekt auch erscheinen mag.

Überprüfen Sie jedes Layout, jede Vorlage und jedes Modul, das verwendet wird

Gehen Sie jede Seite, jeden Beitrag, jeden benutzerdefinierten Beitragstypund jede Taxonomie der Website durch. Dokumentieren Sie alle Divi Theme Builder-Vorlagen, einschließlich Header, Footer, Archiv-Layouts und Einzelbeitragsvorlagen, da diese besondere Aufmerksamkeit erfordern und bei der ersten Planung oft übersehen werden.

Notieren Sie sich jedes WooCommerce-Template, jedes globale Modul, jeden Slider, jedes Kontaktformular und jeden eingebetteten Shortcode. Je vollständiger Ihre Bestandsaufnahme ist, desto weniger Überraschungen erleben Sie während des Projekts.

Projekte, die mit einer gründlichen Prüfung beginnen, benötigen deutlich weniger Zeit als solche, bei denen der Umfang erst im Laufe der Arbeiten klar wird.

Bevor Sie irgendetwas neu erstellen, ziehen Sie Ihr Designsystem zu Rate

Bevor Sie auch nur eine Seite bearbeiten, dokumentieren Sie Ihre aktuelle Farbpalette, Typografie, Abstände und Schaltflächenstile. Diese werden direkt in die theme.json-Einstellungen übernommen, wodurch Gutenberg globalen Zugriff auf Ihre Design-Tokens für alle Vorlagen und Muster erhält.

Wenn Sie diesen Schritt vor Beginn der Seitenbearbeitung durchführen, wird Ihre neu erstellte Website von der ersten bis zur letzten migrierten Seite optisch einheitlich sein.

Wird dieser Schritt übersprungen, führt dies zu Inkonsistenzen, deren Behebung mühsam ist, nachdem bereits Dutzende von Seiten neu erstellt wurden.

Divi-Module und ihre Gutenberg-Ersatzmodule

Eine Sorge, die oft vor den meisten Divi-zu-Gutenberg-Migrationen auftaucht, ist die Frage, ob der native Blockeditor die Funktionalität von Divi nachbilden kann.

In fast allen Fällen lautet die Antwort: Ja. Die Alternativen funktionieren zwar anders, decken aber denselben Bereich ab. Hier finden Sie eine kurze Übersicht der gängigsten Divi-Elemente und ihrer Gutenberg-Pendants.

Divi Element	Gutenberg-Ersatz	Anmerkungen
Abschnitt / Zeile / Spalte	Gruppe / Spalten / Stapel	Verwenden Sie Layout-Steuerelemente und Abstandseinstellungen innerhalb von Gruppen- und Spaltenblöcken
Klappentext	Medien und Text oder Gruppenblock	Einmal als wiederverwendbares Blockmuster erstellen
Taste	Schaltflächenblock	Stile den Schaltflächenvoreinstellungen in theme.json zuordnen
Bildergalerie	Bildergalerie	Alternativtext beibehalten und natives Lazy Loading aktivieren
Schieberegler	Mit Mustern abdecken oder ein leichtes Slider-Plugin verwenden	Vermeiden Sie nach Möglichkeit ressourcenintensive JavaScript-Slider
Kontaktformular	Ein verwaltetes Formular-Plugin mit Blockunterstützung	Bestätigungen, DSGVO-Hinweise und Spamschutz migrieren
Blog-Modul	Abfrageschleifenblock	Erstellen Sie Kartenlayouts mithilfe von Abfrageschleifen-Vorlagenvarianten neu
Theme-Builder-Kopf- und Fußzeile	Teile der Block-Themenvorlage	Navigieren Sie mithilfe von Mustern zu Vorlagen- und Teileverzeichnissen

Wie kann man die Migration von Divi zu Gutenberg durchführen, ohne die Website zu beschädigen?

Durch die Einhaltung eines strukturierten Prozesses bleibt die Migration in jeder Phase vorhersehbar und umkehrbar.

Hier ist der Ablauf einer Divi-zu-Gutenberg-Migration bei Seahawk Media vom Start bis zum Go-Live.

Schritt 1: Inhalte einfrieren und Staging-Bereich absichern

Bevor Sie eine einzelne Seite migrieren, frieren Sie die Inhaltsaktualisierungen auf der Live-Website ein und verlagern Sie alle Arbeiten auf die Staging-Umgebung.

Wenn Redakteure während der Migration auf der Staging-Umgebung weiterhin auf der Live-Website veröffentlichen, entsteht eine Versionslücke, die sich beim Livegang nur schwer beheben lässt. Aktivieren Sie den Wartungsmodus auf der Staging-Umgebung, um versehentliches Crawling während des Build-Prozesses zu verhindern.

Schritt 2: Notieren Sie Ihre Ausgangswerte, bevor Sie irgendetwas berühren

Führen Sie Lighthouse- und Core Web Vitals -Berichte für Ihre wichtigsten Landingpages und speichern Sie die Ergebnisse. Diese Werte dienen als Vergleichsmaßstab nach der Migration, um die Leistungsverbesserung zu bestätigen.

Ohne eine Basislinie tappen Sie im Dunkeln. Notieren Sie sich daher auch die wichtigsten Konversionspfade und Nutzerabläufe, damit Sie diese während der Qualitätssicherung überprüfen können.

Schritt 3: Block-Theme und theme.json konfigurieren

Vergewissern Sie sich, dass Sie WordPress 6.8 oder höher verwenden. Installieren Sie ein Block-Theme und ordnen Sie die extrahierten Design-Tokens der Datei theme.json zu, bevor Sie irgendetwas neu erstellen.

Farben, Schriftarten, Zeilenabstand und Schaltflächenstile sollten hier global definiert werden. Diese Grundlage sorgt für ein einheitliches Erscheinungsbild der neu gestalteten Website und erleichtert zukünftige Bearbeitungen erheblich.

Schritt 4: Zuerst auf Seiten mit geringem Risiko testen

Wählen Sie zwei oder drei Seiten aus, die keinen signifikanten Traffic generieren, und wenden Sie Ihren gewählten Migrationsansatz zunächst auf diese an, sei es der Divi Layout Block oder ein vollständiger manueller Neuaufbau.

Prüfen Sie die Ausgabequalität sorgfältig, bevor Sie die Änderungen auf die gesamte Website übertragen. Probleme, die auf Testseiten auftreten, lassen sich wesentlich leichter beheben als Probleme, die erst nach der Überarbeitung von fünfzig Seiten entdeckt werden.

Schritt 5: Vorlagenteile und Muster neu erstellen

Konvertieren Sie Ihre Divi Theme Builder-Vorlagen für Header, Footer und Archiv in Block-Theme-Vorlagenteile. Überprüfen Sie, ob Navigation, Website-Logo, Suche und dynamische Inhalte korrekt dargestellt werden.

Die Template-Elemente müssen stabil sein, bevor Seiteninhalte migriert werden, da alles andere von ihrer zuverlässigen Darstellung abhängt.

Schritt 6: SEO-Parität vor der Veröffentlichung prüfen

Alle URLs müssen exakt so beibehalten werden, wie sie auf der Divi-Website erscheinen. Sollte sich ein Slug aus irgendeinem Grund ändern, muss umgehend eine 301-Weiterleitung . Canonical-Tags, Open-Graph-Metadaten und strukturierte Schema-Markup-Informationen müssen je nach Template-Typ überprüft werden.

Führen Sie nach dem Neuaufbau den Rich Results Test von Google auf einer Stichprobe von Seiten durch und vergleichen Sie Ihre Lighthouse-Ergebnisse mit dem Ausgangswert, bevor Sie die Live-Umschaltung planen.

Fehler, die eine Divi-Migration verlangsamen

Bei unserer Arbeit bei Seahawk Media zeigt sich, dass Migrationen, die auf Probleme stoßen, ein ähnliches Muster aufweisen. Die Probleme sind fast immer vermeidbar und lassen sich auf Entscheidungen zurückführen, die zu Beginn des Projekts getroffen wurden.

• Das Auslassen der Inhaltsprüfung ist der häufigste Fehler. Teams, die mit dem Neuaufbau von Seiten beginnen, bevor sie eine vollständige Bestandsaufnahme aller Vorlagen, Module und Shortcodes , stoßen mitten im Projekt immer wieder auf unerwartete Probleme. Die Prüfung mag anfangs zeitaufwendig erscheinen, spart aber deutlich mehr Zeit, als sie kostet.

• Die Annahme, das Migrations-Plugin decke alles ab, ist ein weiteres häufiges Problem. Das Plugin von Automattic ist zwar nützlich, deckt aber nicht alle Divi-Module ab.

• Die Ausgabe komplexer Seiten erfordert oft eine umfangreiche Nachbearbeitung. Teams, die das Plugin ausführen, die Ergebnisse kurz überfliegen und die Arbeit dann für erledigt betrachten, erhalten häufig Seiten, die Reste von Divi-Markup enthalten und später Frontend-Probleme verursachen.

Wenn vor der Migration keine Leistungsbasisdaten erfasst werden, lässt sich nicht nachweisen, dass die Maßnahmen Verbesserungen gebracht haben. Stakeholder und Kunden erwarten Belege für Verbesserungen. Ohne Ausgangswerte können diese nicht geliefert werden.

Wie lange dauert eine Migration von Divi zu Gutenberg tatsächlich?

Für eine Standard-Marketing-Website mit 20 bis 40 Seiten sollten Sie mit 1 bis 3 Wochen rechnen, inklusive Einrichtung des Designsystems, Seitenüberarbeitung, Qualitätssicherung und SEO-Verifizierung.

Websites mit WooCommerce-Integrationen, benutzerdefinierten Beitragstypen oder Hunderten von Seiten benötigen in der Regel vier bis acht Wochen, abhängig von der Komplexität der Vorlage und der Anzahl der individuellen Layouts.

Der größte Zeitfaktor ist die Qualität des Vorab-Audits. Websites, die mit einem vollständigen Inhaltsinventar und gut dokumentierten Divi-Vorlagen zu uns kommen, werden schneller migriert als Projekte, bei denen der Umfang erst während der laufenden Arbeiten klar wird. Die Investition in dieses Audit im Vorfeld verkürzt die Gesamtlaufzeit wie kaum etwas anderes.

Bereit, Divi zu verlassen? Dann machen wir es richtig!

Die Migration von Divi zu Gutenberg ist eine jener Entscheidungen, die sich bei guter Planung schnell auszahlen.

Schnellere Ladezeiten, saubereres Markup, kein Lizenzaufwand und eine Codebasis, die auf den WordPress-Kern abgestimmt bleibt, sind allesamt reale, messbare Ergebnisse.

Bei Seahawk Media übernehmen wir den gesamten Prozess von des Designsystems und der Einrichtung der Blockthemen bis hin zu Qualitätssicherung und SEO-Maßnahmen, damit nichts übersehen wird und nichts kaputt geht.

Wenn Sie bereit für den Wechsel sind, setzen Sie sich noch heute mit unserem Team in Verbindung und lassen Sie uns Ihnen eine schlankere, schnellere und langlebigere WordPress-Website erstellen.

Häufig gestellte Fragen zu Divi und Guntenberg