Wechsel von Divi zu Elementor in 10 Schritten

Warum ich von Divi zu Elementor gewechselt habe

Vor ein paar Jahren habe ich noch uneingeschränkt Divi empfohlen. 

Das Divi Theme* ist nach wie vor eines der besten WordPress-Themes am Markt (hier geht’s zu einem Vergleich mehrerer Page Builder für WordPress) und ermöglicht es rasch und einfach eine ansprechende WordPress Website zu erstellen. Der Preis ist fair, der Funktionsumfang großartig und die Lernkurve relativ flach.

Auch ich habe meine professionelle WordPress-Karriere mit dem Divi Theme begonnen.

Schon bald haben mich aber einige Bugs und Fehler von Divi genervt:

• Das Newsletter-Signup-Modul stellt ab und zu, aus unerfindlichen Gründen, die Funktion ein. Erst ein erneutes Speichern im Visual Builder hilft. Das ist absolut nicht verlässlich!
• Der lang erwartete Divi Theme Builder lädt für manche Vorlagen einfach nicht mehr. Ich habe einige Zeit damit verbracht den Fehler zu suchen und auch den “Support” von Elegant Themes bemüht. Leider ohne Lösung, es gibt einen ominösen Bug, der verhindert, dass ich meine Templates bearbeiten kann. Das ist nervig, weil ich die Website so nicht weiterentwickeln kann.
• Noch viel spannender: mit Gutenberg erstellte Blog Posts lassen sich nicht mehr bearbeiten. Ich erhalte einfach einen Server Error 500, dem ich auch noch nicht auf die Spur gekommen bin. Drehe ich Divi ab, dann klappt es wieder einwandfrei.
• Neben diesen großen Bugs gibt es viele Kleinigkeiten, die einfach lästig sind und kein professionelles und verlässliches Arbeiten ermöglichen. 

Und dann kam Elementor*. Als Programmierer war ich schon beim ersten Kunden-Projekt von der einfachen Erweiterbarkeit angetan, die bei Divi nicht gegeben ist. Sold!

Nach vielen weiteren Kundenprojekten kann ich mittlerweile sagen:

• Elementor ist einfacher zu erweitern. Es gibt eine einfache, gut dokumentierte API, die sich sehr einfach verwenden lässt.
• Elementor ist schneller als Divi. Der Builder lädt schneller und läuft stabiler als der von Divi, es gibt Komfortfunktionen (Cmd+E!) und auch die Website selbst lädt schneller.
• Die Elementor Templates sind flexibler und logischer aufgebaut, als der Divi Theme Builder und die Divi Bibliothek.

(Übrigens, hier findest du einen detaillierten Vergleich zwischen Divi und Elementor und auf dem WordCamp Vienna habe ich einen Vortrag über Elementor gehalten.)

In Summe lässt sich sagen, dass ich die flexible Erweiterbarkeit und Stabilität von Elementor sehr schätze. So erstelle ich eigene Skins für Blog Posts, andere Beiträge oder eigene Elementor Module, um in Kundenprojekten speziellere Funktionen umzusetzen.

Aber wie habe ich als Elementor-Programmierer den Wechsel von Divi zu Elementor Pro durchgeführt?

Von Divi zu Elementor: Bestandsaufnahme

Der erste Schritt war eine kurze Bestandsaufnahme, was es alles zu migrieren gibt. 

Meine Divi-Website besteht aus:

• ca. 50 Seiten, aufgebaut mit Divi
• ca. 60 Beiträgen, aufgebaut mit Divi (würde ich heute nicht mehr so machen, mehr dazu gleich)
• ca. 20 Projekten (ein Divi Custom Post Type, mehr dazu weiter unten), ebenso aufgebaut mit Divi
• 10 Caldera-Formularen
• ca. 10 (nicht öffentlichen) LearnDash-Kursen für meine Kunden
• 11 weiteren Websites im WordPress-Netzwerk [LINK]

Für die Migration habe ich eine Kombination von einer Kopie (zum Testen) und der Migration direkt auf der Live-Seite gewählt.

Dadurch habe ich sichergestellt, dass 

• die Inhalte der Live-Website und der Kopie nicht auseinander laufen (z.B. durch Kommentare oder neue Inhalte, die ich in die Kundenkurse eingestellt habe)
• das WordPress-Netzwerk (mbaierl.com ist die Haupt-Domain davon) keinen Schaden nimmt

Gleichzeitig habe ich die Umstellung zum Anlass genommen, das in die Jahre gekommene Design abzulösen und mir selbst ein neues Branding zu verpassen.

Hier kannst du das alte und das neue Design selbst vergleichen:

So, jetzt aber Schritt für Schritt:

1.) Erstelle ein Backup

Bevor du mit einer großen Umstellung wie dieser beginnst, erstelle unbedingt ein Backup deiner Website. 

Manche der beschriebenen Schritte können auch länger dauern. Ich habe zum Beispiel pro Tag nur 2-3 Blog-Beiträge umgestellt, der ganze Prozess hat also ein paar Wochen gedauert. 

2.) Umstellen aller Blog-Beiträge auf den Gutenberg-Editor

Mit Divi habe ich den Kardinal-Fehler begangen und alle Blog-Beiträge mit dem Divi-Builder erstellt. Ebenso habe ich den Divi Theme Builder nicht verwendet, was schlicht dem Alter der Website geschuldet ist.

Im ersten Schritt habe ich für alle Beiträge mit dem Schlagwort “Builder” im Divi Theme-Builder eine neue Vorlage erstellt:

In den folgenden Wochen erfolgte der Wechsel der Blog-Beiträge vom Divi-Builder zu Gutenberg. Das geht für 90% der Inhalte erstaunlich schnell und ist eine stupide Kopier-Tätigkeit:

1. Das Schlagwort “Builder” zum Beitrag hinzufügen
2. Die Inhalte vom bestehenden Beitrag kopieren
3. Zum Standard-WordPress-Editor wechseln
4. Die Inhalte einfügen. Gutenberg erkennt alle Bilder und Formatierungen automatisch
5. Gegebenenfalls nacharbeiten von Bildgrößen oder speziellen Elementen.

Wie du siehst dauert das ein paar Minuten pro Blog-Beitrag und funktioniert im Live-Betrieb ohne Ausfall oder dass Website-Besucher etwas davon mitbekommen.

Beim LMS-System LearnDash habe ich zum Glück von Haus aus auf Gutenberg gesetzt. Hier waren also keine Anpassungen des Inhalts notwendig.

3.) Umstellen der Divi “Projekte”

Verwendest du die Divi “Projekte”? Das ist ein “Custom Post Type”, eine eigene Sammlung im WordPress Backend:

Diese Projekte lassen sich für dein Portfolio verwenden. Leider ergeben sich aber zwei Probleme:

1. Die Projekte sind ein Teil des Divi Themes und nicht mehr verfügbar, wenn du Divi nicht mehr verwendest.
2. Die Projekte selbst sind eventuell mit dem Divi Builder gestaltet.
   

Um das erste Problem zu lösen habe ich ein Plugin erstellt, welches den Custom Post Type “Projekte” auch ohne Divi wieder verfügbar macht:

Installiere dir also dieses Plugin aus dem WordPress Plugin Repository und aktiviere es. Sind Divi oder der Divi Builder aktiv hat das keine Auswirkungen. Deaktivierst du aber Divi kannst du nach wie vor die Projekte bearbeiten.

Das zweite Problem lösen wir später in Schritt 9. Die Umstellung von Projekten, die du mit dem Divi Builder erstellt hast erfolgt genau gleich wie bei den Seiten.

Elementor Pro um bis zu 20% günstiger!

Ein spezielles Angebot für dich – hole dir Elementor Pro unschlagbar günstig mit dem folgenden Rabatt-Gutschein:

Jetzt Rabatt sichern

4.) Aktiviere und konfiguriere Elementor Pro

Nach diesen Vorarbeiten im Hintergrund wird es jetzt ernst. Installiere Elementor & Elementor Pro* und aktiviere die Plugins. Das hat keine visuellen Auswirkungen auf deine Website und du kannst in aller Ruhe Elementor konfigurieren:

• Stelle deine gewünschten Schriften ein
• Leg deine Standard-Farben in Elementor fest
• Definiere die Schriftgrößen und -stile für Überschriften, Links etc. 

Optional versetze deine Website mit Elementor in den Wartungsmodus. Denn im nächsten Schritt wird es wild :-)

5.) Deaktiviere das Divi Theme und aktiviere das Divi Builder Plugin

Jetzt wäre noch einmal ein guter Zeitpunkt, um ein weiteres Backup deiner Website anzulegen. Sicher ist sicher.

Aktiviere dann das Hello Theme (oder das Theme, welches du gemeinsam mit Elementor Pro verwenden möchtest). Das deaktiviert automatisch das Divi Theme.

Logge dich in deinen Elegant Themes Account ein und lade dir das Divi Builder Plugin herunter.

Installiere das Plugin wie gewohnt und aktiviere es anschließend:

Du siehst im WordPress Backend wieder die gewohnten Einstellungen von Divi:

Mach dir keinen Kopf, wenn du deine Website checkst – meine sah danach so aus:

Das ist aber gar nicht so schlecht und passt vollkommen, denn der pinke Header entspricht den Standard-Farben vom Hello-Theme. Falls du Astra oder GeneratePress verwendest, kann dies anders aussehen.

Solltest du schon den Divi Theme Builder verwenden, werden auch Header und Footer korrekt dargestellt.

Und der Inhalt sieht schon “fast richtig” aus, er ist nur zu „schmal“.

6.) Stelle alle Seiten auf “full width” um

Damit der (mit dem Divi Builder) erstellte Inhalt korrekt angezeigt wird, musst du das Template jeder einzelnen Seite umstellen.

Öffne daher die Seiten in WordPress und stelle von “Standard-Template” auf “Elementor Volle Breite” um:

Der Inhalt der Website (im Screenshot oben der blaue Balken) sollten jetzt wie bisher aussehen und über die volle Breite angezeigt werden.

Da mir das händische Umstellen von 50 Seiten und 20 Projekten zu mühsam war, habe ich mir als Fleißaufgabe ein Script geschrieben, welches das Template aller Seiten und Projekte automatisch umstellt ;-)

7.) Erstelle einen neuen Header und Footer mit Elementor

Der Inhalt sollte jetzt korrekt dargestellt werden.

Als nächstes deaktiviere den globalen (Divi) Header und Footer im Divi Theme Builder (Divi > Theme-Builder), falls du diesen verwendest.

Jetzt kannst du den Header und Footer deiner Website mit Elementor gestalten (Templates > Theme Builder).

Weise diesen Header und Footer der gesamten Website zu.

8.) Erstelle weitere Elementor-Templates (z.B. für den Blog)

Im nächsten Schritt geht es darum, alle weiteren Templates, welche du mit dem Divi Theme Builder erstellt hast, durch Elementor zu ersetzen.

Welche das sind hängt von deiner Website und dem Aufbau ab.

Bei mir waren es Templates für

• alle einzelnen Blog-Beiträge
• das Blog-Archiv
• alle einzelnen Projekte
• die Übersicht über alle Projekte (Projekte Archivseite)
• die LearnDash Kurs-Übersicht

Du findest deine erstellten Templates unter Divi > Theme Builder.

Erstelle im Elementor Theme Builder (Templates > Theme Builder) neue Templates und weise die entsprechenden Bedingungen zu:

Wichtig: damit deine Website auch die korrekte Vorlage anzeigt, musst du die Divi-Vorlagen deaktivieren:

Erstelle so Schritt für Schritt neue Templates für deine Website.

Deine Website sollte jetzt wieder korrekt funktionieren. Ich habe noch ein paar Anpassungen via CSS vorgenommen und meine Website zu diesem Zeitpunkt wieder online gestellt. Ja, es ist eine Vermischung zwischen altem Design (alle Seiten) und neuem Design (alle Beiträge und mit Templates gestalteten Custom Post Types), den Besuchern ist das jedoch nicht wirklich aufgefallen.

Es bleibt also dir überlassen, ob du jetzt schon den Elementor Wartungsmodus wieder deaktivierst.

Wasserdichte Angebote schreiben in nur 10 Minuten?

Hol dir die ultimative Angebotsvorlage für Webdesigner, Web-Programmierer und Online-Marketer.

Mehr erfahren

9.) Stelle alle Seiten und Projekte auf Elementor um

Du verwendest an diesem Punkt den Divi Builder sowie Elementor Pro parallel – nicht gerade optimal vom Design und auch der Performance her betrachtet. Aber es gibt dir Zeit, jede einzelne Seite in Ruhe von Divi auf Elementor Pro (oder auch Gutenberg!) umzustellen.

Das ist aufwendig, mühsam, teilweise langweilig – weil eine reine Copy-Paste-Übung wie auch schon bei den Beiträgen (Punkt 2).

So bin ich bei der Umstellung vorgegangen:

1. Öffnen der (Divi)-Seite in einem Browser-Fenster
2. Bearbeite die Seite in WordPress
3. Aktiviere den WordPress Standard-Editor
4. Aktualisiere die Seite
5. Bearbeite die Seite mit Elementor
6. Baue die Seite in Elementor nach; die Texte kannst du von der Divi-Website kopieren

Hier siehst du das ganze in einem Video (19 Sekunden lang!):

Ich habe jeden Tag 2-3 Seiten umgestellt, am Wochenende auch mal mehr. Nach rund 14 Tagen war ich fertig.

10.) Deaktiviere das Divi Builder Plugin

Hast du alle Seiten und weiteren Custom Post Types vom Divi Builder auf Elementor umgestellt und auch alle Divi Vorlagen in Elementor nachgebaut, kannst du das Divi Builder Plugin deaktivieren. 

Das Projekte Plugin übernimmt dann automatisch die Aufgabe, dass die “Divi Projekte” nach wie vor vorhanden sind. 

Kontrolliere noch einmal deine Website und deaktiviere anschließend den Elementor Wartungsmodus, falls du das nicht schon vor der Umstellung der einzelnen Seiten getan hast.

Herzliche Gratulation, deine Website läuft jetzt mit Elementor Pro und nicht mehr mit Divi!

Umstellung von Divi zu Elementor Pro: war es den Aufwand wert?

Ja, für mich auf jeden Fall! Ich habe die Gelegenheit genutzt, um meine Corporate Identity zu ändern und das Design komplett umzukrempeln.

Die Vorteile des Wechsels von Divi zu Elementor liegen für mich darin:

• Ich habe fast nur mehr Elementor im Einsatz und muss daher weniger oft umdenken
• Ich kann Elementor flexibel erweitern – was mit Divi nicht so einfach möglich war
• Die Website lädt gefühlt schneller – leider habe ich vergessen die Geschwindigkeit vorher und nachher zu messen, um das auch belegen zu können
• Nervige Divi Bugs, wie die fehlerhafte Newsletter-Anmeldung, betreffen mich nicht mehr
• Ich habe Freude an der neuen CI, die sich durchzieht und frischer sowie moderner wirkt.

Die gesamte Umstellung hat mehrere Wochen gedauert, da ich wie oben beschrieben schrittweise die Blog-Beiträge und nach der Umstellung auch die einzelnen Seiten geändert habe. Für mich war das neben allen Kundenprojekten die entspanntere Variante – vielleicht stellst du aber auch in einer Hau-Ruck-Aktion an nur einem Wochenende alles um.

Hast du noch Fragen zur Umstellung von Divi zu Elementor?
Ich freue mich auf deinen Kommentar!

Lass uns einfach Websites bauen,

Michael