Elementor und Divi zusammen nutzen: Was funktioniert, was nicht

Ja, Sie können Elementor und Divi in derselben WordPress-Installation betreiben – aber mit einer entscheidenden Einschränkung: Nicht auf ein und derselben Seite. Jede Seite gehört genau einem Builder. Das klingt nach einer Kleinigkeit, entscheidet aber darüber, ob Sie sauber arbeiten oder sich Ladezeit- und Style-Probleme einhandeln. Dieser Beitrag zeigt die saubere Einrichtung Schritt für Schritt, die vier typischen Konfliktquellen samt Lösung und wann sich der Doppelbetrieb wirklich lohnt.

Zuerst klären: Divi ist Theme UND Builder

Der häufigste Denkfehler entsteht, weil “Divi” zwei verschiedene Dinge bezeichnet:

• Das Divi-Theme von Elegant Themes – ein komplettes WordPress-Theme mit integriertem Divi Builder.
• Das Divi-Builder-Plugin – derselbe Builder als eigenständiges Plugin, das Sie mit jedem beliebigen Theme kombinieren können.

Elementor dagegen ist immer nur ein Plugin und stellt kein Theme. Für die Kombination bedeutet das zwei Ausgangslagen:

1. Divi-Theme aktiv + Elementor-Plugin installiert. Das ist der Normalfall und funktioniert. Elementor baut einzelne Seiten, das Divi-Theme liefert Header, Footer und den Rahmen.
2. Ein neutrales Theme (z. B. ein Block-Theme) + Divi-Builder-Plugin + Elementor-Plugin. Auch möglich, aber Sie haben dann zwei Builder-Plugins parallel aktiv – doppelt so viel potenzieller Ballast.

Für die meisten Websites ist Variante 1 der sinnvolle Weg.

So kombinieren Sie beide sauber (Schritt für Schritt)

Angenommen, Ihre Website läuft auf dem Divi-Theme, und Sie möchten eine einzelne Landingpage mit Elementor bauen, weil Sie dort ein bestimmtes Widget brauchen:

1. Installieren Sie Elementor unter Plugins → Installieren und aktivieren Sie es. Divi bleibt aktiviert.
2. Legen Sie unter Seiten → Erstellen eine neue Seite an. Klicken Sie nicht auf “Use The Divi Builder”.
3. Klicken Sie stattdessen auf “Mit Elementor bearbeiten”. Die Seite öffnet sich im Elementor-Editor.
4. Damit das Divi-Theme dieser Seite keinen unpassenden Rahmen aufzwingt, wählen Sie ein passendes Seiten-Template. In den Seiteneinstellungen von Elementor (Zahnrad unten links) unter Seitenlayout haben Sie die Optionen “Elementor Canvas” (ganz ohne Theme-Header/-Footer) oder “Elementor Full Width” (mit Divi-Header/-Footer, aber ohne seitliche Container-Begrenzung).

Umgekehrt gilt dasselbe: Seiten, die Sie mit dem Divi Builder gebaut haben, lassen Sie einfach in Ruhe – Elementor rührt sie nicht an, solange Sie dort nicht “Mit Elementor bearbeiten” anklicken.

Der wichtigste Grundsatz: ein Builder pro Seite

Beide Builder beanspruchen denselben Bereich – den Beitragsinhalt. Sobald Sie den Divi Builder auf einer Seite aktivieren, übernimmt er die Kontrolle über diesen Inhalt; Elementor kann dort nicht zusätzlich eingreifen und umgekehrt. Es gibt keinen “Misch-Modus”.

Technisch liegt das daran, wie die Builder ihre Inhalte speichern:

• Divi legt seine Module als Shortcodes im Beitragsinhalt ab ([et_pb_section]…).
• Elementor speichert seine Struktur separat als Meta-Daten und rendert die Seite über einen eigenen Mechanismus.

Diese unterschiedliche Speicherung ist auch der Grund, warum ein späterer Wechsel Handarbeit bedeutet: Deaktivieren Sie Divi, erscheinen auf allen Divi-Seiten die rohen Shortcodes im Text. Deaktivieren Sie Elementor, sehen Besucher auf Elementor-Seiten nur den nackten HTML-Grundinhalt. Wer die Konsequenzen einer Kündigung im Detail wissen will, findet sie in unserem Beitrag zu was passiert, wenn Sie Elementor kündigen.

Typische Konflikte – und wie Sie sie lösen

1. Doppelte Assets, langsamere Ladezeit. Sind beide Builder aktiv, laden sie tendenziell jeweils ihre eigenen CSS- und JavaScript-Dateien sowie oft dieselben Bibliotheken doppelt – etwa Font Awesome oder Google Fonts. Auf einer reinen Elementor-Seite brauchen Sie die Divi-Skripte nicht und umgekehrt.

Lösung: Laden Sie Builder-Assets nur dort, wo sie gebraucht werden. Ein Werkzeug wie Perfmatters (Script Manager) oder Asset CleanUp erlaubt es, Elementor-Dateien auf Divi-Seiten zu deaktivieren und umgekehrt – pro Seite oder per Regel. Zusätzlich hilft ein Caching-Plugin wie WP Rocket.

2. Style-Vererbung aus dem Divi-Theme. Die globalen Typografie- und Farbeinstellungen des Divi-Themes (“Divi → Theme-Optionen”) können in Elementor-Seiten “durchsickern”. Lösung: Das Template Elementor Canvas entfernt den Theme-Rahmen komplett und ist die sauberste Basis für eigenständige Landingpages.

3. Header und Footer. Beim Divi-Theme stammen Header und Footer immer von Divi. Wollen Sie diese mit dem Theme Builder von Elementor Pro ersetzen, kollidiert das mit Divis eigenem Header/Footer – Sie müssen Divis Kopf- und Fußbereich für die betreffenden Seiten zuerst abschalten. Dafür gibt es zwei offizielle Wege (Stand: Juli 2026): Für eine einzelne Seite wählen Sie in den Seiteneinstellungen unter Vorlage die “Leere Seite” (Blank Page) – das entfernt Theme-Header und -Footer und zeigt nur den Seiteninhalt. Site-weit oder für bestimmte Seitengruppen erstellen Sie im Divi Theme Builder (Divi → Theme Builder) eine Vorlage, klicken im Header- bzw. Footer-Bereich auf das Drei-Punkte-Menü, wählen “Disable Global” und blenden den nun individuellen Bereich über das Augen-Symbol (“Hide On Front End”) aus. Für einzelne Landingpages genügt in der Regel aber schon das Elementor-Canvas-Template – dann brauchen Sie den Elementor-Theme-Builder gar nicht.

4. Lock-in beim späteren Wechsel. Je mehr Seiten Sie auf zwei Systeme verteilen, desto aufwendiger wird eine spätere Konsolidierung. Planen Sie deshalb von Anfang an, welcher Builder langfristig bleiben soll.

Wann sich der Doppelbetrieb lohnt – und wann nicht

Sinnvoll ist die Kombination vor allem in drei Fällen:

• Migration. Sie ziehen eine bestehende Divi-Website schrittweise nach Elementor um und wollen nicht alle Seiten auf einmal neu bauen. Beide parallel laufen zu lassen, überbrückt die Übergangszeit.
• Ein spezifisches Feature. Eine einzelne Kampagnenseite braucht ein Elementor-Widget oder ein Add-on, das es für Divi nicht gibt.
• Team-Realität. Verschiedene Personen arbeiten mit unterschiedlichen Werkzeugen, und ein sofortiger Umstieg ist nicht praktikabel.

Wenig sinnvoll ist es dagegen, dauerhaft beide Builder für eine neue Website ohne konkreten Grund parallel einzusetzen. Sie zahlen zwei Lizenzen (Divi und Elementor Pro sind beide kostenpflichtig), pflegen zwei Systeme und riskieren mehr Ballast. In der Praxis fahren die meisten Projekte besser, wenn sie sich für einen Builder entscheiden und diesen konsequent nutzen. Die konkreten Schwächen von Elementor haben wir in Was ist der Nachteil der Verwendung von Elementor? zusammengetragen; wenn Sie Divi favorisieren, ist auch die Lizenzfrage über mehrere Websites hinweg relevant.

FAQ

Kann ich Elementor und Divi auf derselben Seite mischen? Nein. Jede einzelne Seite wird von genau einem Builder verwaltet. Sie können pro Seite entscheiden, ob Sie den Divi Builder oder Elementor verwenden, aber nicht beide gleichzeitig im selben Inhaltsbereich.

Brauche ich Elementor Pro, wenn ich das Divi-Theme nutze? Für einzelne Seiten reicht das kostenlose Elementor völlig – inklusive Canvas-Template. Elementor Pro brauchen Sie erst, wenn Sie Header, Footer oder Archivvorlagen mit dem Elementor-Theme-Builder gestalten wollen, und genau dort entstehen die Reibungen mit dem Divi-Theme.

Verschlechtert der Parallelbetrieb mein SEO? Nicht direkt durch die reine Präsenz beider Plugins. Der reale Effekt läuft über die Ladezeit: Werden auf einer Seite Assets beider Builder geladen, sinkt die Performance, und das kann sich indirekt auf Ranking und Nutzererlebnis auswirken. Wer die Assets sauber pro Seite trennt, hält diesen Effekt klein.

Brauchen Sie Unterstützung rund um WordPress? Ypsilon.dev ist Ihre Webagentur aus Regensburg – jetzt kostenlose Erstberatung anfragen.