Divi oder Elementor Pro – der ultimative Vergleich

Divi vs. Elementor – Vergleicht man da nicht Äpfel mit Birnen?

Kennst du dich schon mit WordPress aus? Dann ist dir auch der Unterschied zwischen Themes und Plugins klar (falls nicht – hier erkläre ich alle WordPress Grundlagen).

Divi ist ein Theme.

Elementor (Pro) ist ein Plugin. 

Aber wieso kann man diese beiden Produkte dann überhaupt vergleichen?

Weil sie dieselbe Funktion übernehmen. Beide sind Page Builder für WordPress und erlauben dir, deine Website visuell zu gestalten. Ohne Programmierung, einfach per Drag’n’Drop.

Divi hat den Ansatz eines Themes gewählt, Elementor erweitert bestehende Themes um die selbe Funktionalität. Keiner der beiden Ansätze ist besser oder schlechter, aber jeder hat seine Vor- und Nachteile.

Du siehst also – der Vergleich zwischen Divi und Elementor ist legitim.

Elementor oder doch Elementor Pro?

Elementor gibt es in zwei Ausführungen. Einmal in der kostenlosen Variante, die im WordPress Plugin Repository verfügbar ist. Und andererseits die kostenpflichtige “Pro”-Variante*.

Erst die kostenpflichtige Pro Variante von Elementor enthält auch den Theme Builder, mit dem du Vorlagen, Popups und Landingpages gestalten kannst, daher beschränke ich mich hier auf den Vergleich zwischen Divi und Elementor Pro. Auch wenn ich von “Elementor” spreche, dann meine ich immer die Pro-Version.

Empfohlene Themes für Elementor Pro

Da Elementor Pro “nur” ein Plugin ist, benötigst du noch ein Theme. Du könntest theoretisch Divi dafür verwenden, aber das würde die Seite sehr langsam machen und hätte keinen wirklichen Vorteil.

Meine Empfehlungen für Themes, die sehr gut mit Elementor Pro zusammenarbeiten:

• Hello ist ein kostenloses Theme von Elementor selbst. Das Theme ist sehr schlank und arbeitet optimal mit Elementor zusammen. Das Hello Theme bietet kaum Komfort-Funktionen (z.B. vorgefertigte Header oder Layouts), ist aber trotzdem meine Empfehlung. Denn Header und Footer erstellst du doch sowieso direkt mit Elementor, daher ist ein möglichst schlankes Theme wie Hello von Vorteil.
• Astra bringt schon in der kostenlosen Variante viele Einstellungen für die Zusammenarbeit mit Elementor mit. Du startest nicht von Null, wie mit Hello, und musst nicht jedes Detail selbst umsetzen. Optional gibt es noch Astra Pro, welches weitere Vorlagen, Layouts und Einstellmöglichkeiten bietet.
• GeneratePress ist ebenso in einer kostenlosen und einer kostenpflichtigen Variante verfügbar, schlank und auf Performance ausgerichtet. 

Der Gewinner ist…

In dieser Disziplin gibt es – meiner Meinung nach – ein klares Unentschieden. Keiner der Ansätze ist besser oder schlechter. Die Flexibilität von Elementor Pro wird durch etwas mehr Komplexität erkauft. Die Einfachheit von Divi (in diesem Bereich ;-) ) tauschst du gegen eine geringere Flexibilität ein.

Hol dir Divi bis zu 20% günstiger!

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

Jetzt Rabatt sichern

Unterschiede in der Bedienung zwischen Divi und Elementor

Das wichtigste Kriterium für visuelle Page Builder ist und bleibt das User Interface. Wie einfach ist es, damit eine Webseite zu erstellen? 

Das Positive gleich vorweg – beide Kontrahenten unterstützen Drag’n’Drop und erlauben dir, deine Website “zusammenzuklicken” ohne zu programmieren. Das geht ganz einfach und in den meisten Fällen sieht die Seite auch im Editor so aus, wie sie deinen Besuchern angezeigt wird. 

Vorbei sind also die Zeiten, in denen du speichern und neu laden musstest, um deine Änderungen zu sehen.

Eine weitere Komfortfunktion: Kopieren und Wiedereinfügen von Elementen ist möglich – beide Page Builder unterstützen den Rechtsklick sowie Shortcuts, um deinen Arbeitsablauf zu erleichtern.

Nun aber zu den Unterschieden:

Divi

Divi zeigt dir alle Optionen in einem Overlay direkt auf der Seite an. Dort wählst du in verschiedenen Tabs die Einstellungen aus, Änderungen werden sofort und live auf der Seite im Hintergrund angezeigt.

Neue Elemente (Abschnitte, Zeilen oder Module) fügst du hinzu, indem du ein bestehendes Element auswählst und das erscheinende “+” drückst.

Am unteren Bildschirmrand findest du weitere, globale Optionen und Funktionen.

Divi ist verspielter und benötigt mehr Platz für die Elemente.

Elementor Pro

In Elementor und Elementor Pro werden alle Module wie auch die Optionen in einem links angeordneten Bereich angezeigt. So hast du immer die ganze Seite im Blick, dafür aber nicht mehr die gesamte Bildschirmbreite für deine Website zur Verfügung.

Neue Elemente (Flexbox-Container, Grid oder Elemente) kannst du per Drag’n’Drop aus der linken Spalte hinzufügen.

Das UI ist weniger verspielt, reagiert flotter und nutzt den vorhandenen Platz besser aus.

And the winner is….

Beide Page Builder haben unterschiedliche Konzepte, um dasselbe Ziel zu erreichen. Der Gewinner ist für mich ganz klar Elementor, da die Bedienung flotter von der Hand geht und mehr Informationen am Bildschirm dargestellt werden.

Bei Divi merkt man die veraltete technische Grundlage, welche sich in mehr Trägheit auswirkt. Um rasch und professionell zu arbeiten leider ein No-Go. Vielleicht ändert sich das ja mit Divi 5, aber das wird noch dauern…

Verfügbare Module in Divi und in Elementor

Beide Page Builder bringen von Haus aus viele “Standardfunktionen” eines Page Builders mit.

Divi setzt auf Abschnitte, Zeilen und Spalten, Elementor hingegen auf modere Container (Stichwort “CSS Flexbox” und “CSS Grid”), mit denen sich flexiblere Layouts erstellen lassen. Divi hinkt hier hinterher.

Akkordion, Tabs, Icons, Videos und so weiter zählen bei beiden Pagebuildern zur Standardausstattung. 

Fehlt einem der beiden Page Builder ein Modul, dann gibt es Erweiterungen von einem Drittanbietern, welche die Funktion zur Verfügung stellt.

Beachte: die Anzahl der Module ändert sich ständig. Die reine Anzahl ist daher nur bedingt aussagekräftig!

Divi

Divi bietet aktuell 38+ verschiedene Module.

Das ist leider relativ wenig und für viele Basis-Funktionen musst du ein extra Plugin installieren.

Elementor Pro

Elementor Pro bringt aktuell 56+ Module mit, wobei einige davon nur in der kostenpflichtigen Pro-Version enthalten sind.

Module, Abschnitte und Spalten können in der “Bibliothek” (Divi) oder als “Template” (Elementor Pro) gespeichert werden. Das erlaubt dir, deine eigenen Elemente in deinem Design abzuspeichern und wiederzuverwenden. Dieses Speichern ist nicht nur auf deine Website beschränkt – du kannst Module auch auf deinem Computer abspeichern und in einer anderen Website wieder importieren.

Beide Page Builder erlauben dir auch Elemente “global” einzufügen. Änderst du auf einer Seite ein globales Element, dann ändert es sich auf allen Seiten automatisch mit. Diese Funktion ist zum Beispiel für Call To Actions, wiederkehrende Adressen oder ähnliches sinnvoll und ergänzt den Theme Builder.

Wie oben schon erwähnt gibt es für beide Page Builder unzählige Erweiterungen, welche weitere Module hinzufügen oder fehlende Funktionen nachreichen.

Der Gewinner ist…

Elementor Pro. Weil ohne zusätzliche Plugins mehr und bessere Module mitgeliefert werden und FlexBox Container eingesetzt werden, was moderne Layouts ermöglicht.

Divi ist hier nicht mehr auf dem aktuellen Stand der Dinge und fällt leider immer weiter zurück.

Elementor & Divi: Vorlagen

Beide Page Builder bieten dir fertige Vorlagen an. Diese kannst du importieren, beliebig abändern und damit rasch deine eigene Website gestalten.

Divi

Divi bietet mittlerweile über 160 Layout Packs an – mit insgesamt fast 1.200 einzelnen Seitenvorlagen.

Die Qualität schwankt leider stark und nur eine Handvoll Vorlagen sind mit dem Theme Builder von Divi 4 umgesetzt.

Üblicherweise ist aber für jeden Geschmack etwas dabei.

Zu den Vorlagen

Elementor Pro

Elementor bietet bei weitem nicht so viele Vorlagen an. Wobei die Qualität aber durchwegs höher ist.

Alternativ bietet auch das Astra Theme fertige Website-Vorlagen für Elementor an und auch bei Themeforest* wirst du fündig.

Zu den Vorlagen von Elementor

Zu den Vorlagen von Astra

Der Gewinner ist…

Wie schon bei den Modulen ist auch die Anzahl der Vorlagen kein guter Vergleichswert. Es kommen ständig neue hinzu. Elementor hat hier in den letzten Jahren stark aufgeholt, daher gibt es aktuell ein Unentschieden.

Wasserdichte Angebote schreiben in nur 10 Minuten?

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

Mehr erfahren

Erweiterbarkeit von Divi und Elementor

Für mich als WordPress-Entwickler ist die Erweiterbarkeit und Flexibilität der Page Builder wichtig. Aber auch wenn du “nur” eine einfache Website erstellst, möchtest du den Page Builder verwenden, der sich flexibel an deine Anforderungen anpassen lässt.

Divi

Eigenes CSS lässt sich in Divi recht einfach einfügen. Dabei sind aber die Elemente, die du erweitern darfst, vorgegeben.

Das ist für Anfänger einfacher zu erlernen. Es schränkt aber ein, wenn du etwas umsetzen willst, das so nicht vorgesehen ist.

Um Erweiterungen und eigene Module mit Divi zu programmieren, benötigst du viele moderne Tools. Du musst dich mit React und JSX sowie Node auskennen.

Die Dokumentation ist mangelhaft, ein offizielles Entwickler-Forum gibt es nicht.

Der offizielle Divi-Support ist meiner Erfahrung nach technisch nicht fit.

Divi bietet relativ wenige Möglichkeiten zur Erweiterung von bestehenden Modulen. Diese bieten keine oder wenige Hooks und Filter an.

Elementor Pro

Bei Elementor Pro musst du etwas versierter im Umgang mit CSS sein, kannst dafür aber auch mit Media Queries arbeiten und jedes beliebige Element ansprechen und umgestalten.

Willst du Elementor oder Elementor Pro erweitern, findest du ausführliche Informationen in der sehr guten Dokumentation. Du benötigst nur PHP & JS Basis-Wissen und keinen komplexen Toolstack.

Elementor betreibt auch aktiv ein Github-Projekt, wo sich Entwickler effizient austauschen können.

Elementor Pro bietet für jede erdenkliche Möglichkeit gut dokumentierte Hooks und Filter an und lässt sich somit sehr einfach erweitern.

Der Gewinner ist…

… ganz klar Elementor (Pro). Es gibt ein Github-Repo, Elementor ist mit Hooks und Filtern erweiterbar und die Hürde für den Einstieg ist niedriger.

Elementor bietet auch viele Komfortfunktionen an, welche das professionelle Arbeiten erleichtern. So erlaubt der immer und überall verfügbare “Finder” (Cmd+E bzw. Strg.+E) den raschen Wechsel zwischen Seiten und Templates. 

Elementor weist auch darauf hin, wenn ein anderer Benutzer die selbe Seite bearbeiten will. Bei Divi kommt es hingegen vor, dass man sich gegenseitig die Änderungen überschreibt… lästig und heutzutage nicht mehr notwendig.

Elementor & Divi: die Theme Builder im Vergleich

Mit den Theme-Buildern lassen sich Vorlagen für Seiten, Beiträge, Custom Post Types, 404-Seiten oder ähnliches gestalten. Die Grundfunktionen sind sehr ähnlich, die Bedienung etwas anders. 

So lassen sich bei beiden Theme Buildern die Kopfzeile, der Footer und der Inhaltsbereich festlegen und Templates verschiedensten Bereichen deiner Website zuordnen.

In dieser Kategorie gibt es daher ein Unentschieden.

Elementor & Divi: erweiterte Funktionen und weitere Unterschiede

Responsive Design mit Divi & Elementor

Beide Page Builder bieten dir die Möglichkeit, deine Seite an Tablets sowie Mobilgeräte anzupassen. Die Bedienung ist wieder unterschiedlich, du kommst aber mit beiden Tools ans Ziel.

Divi

Elementor Pro

Flexibilität beim Layout

Divi bietet dir das reguläre Layout (nur Spalten), ein spezielles Seitenlayout sowie das vollbreite Layout an. Diese Fülle an Möglichkeiten reicht nur für einfache Layouts aus.

Elementor Pro bietet hingegen “Flexbox-Container” und auch “CSS Grids” an. Diese lassen sich beliebig verschachteln und konfigurieren. So kannst du beliebige Layouts erstellen.

Container sind weit flexibler und bieten mehr Möglichkeiten als das alte, starre System aus “Abschnitt-Zeile-Spalte”, wie es Divi nach wie vor verwendet.

Hier gewinnt wieder ganz klar Elementor. Die Entwickler gehen mit der Zeit und verwenden moderne Funktionen (wie auch CSS Variablen) um deinen Entwicklungsdrang nicht einzuschränken.

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

Globale Stile mit Divi und Elementor Pro

Divi bietet für Module die “Standardeinstellungen” an. Diese Funktion ist leider etwas versteckt, daher auch recht unbekannt. Damit lassen sich Einstellungen für alle Module auf deiner Seite an einer Stelle festlegen.

Perfekt und unbedingt notwendig, um ein konsistentes Design erstellen zu können.

Elementor Pro hingegen hinkt hier ein wenig hinterher. Die kürzlich eingeführte Funktion “Theme-Stil” sowie die Standardeinstellungen sind ein Schritt in die richtige Richtung. Laut offizieller Roadmap stehen bei Elementor “CSS Selektoren” am Programm, damit sollte diese Funktion bald nachgeliefert werden.

Texte bearbeiten mit Divi und Elementor

In Divi lässt sich für jedes Text-Modul der Stil des Textes, aller Überschriften, von Links, Aufzählungen und Zitaten festlegen. Und zwar bis ins kleinste Detail.

Diese Flexibilität ist großartig, wenn sie richtig eingesetzt wird. Ansonsten entstehen, wie schon erwähnt, inkonsistente Designs und du klickst bei Änderungen deine Maus zu Tode. :-)

Elementor bietet keine vergleichbare Möglichkeit das Erscheinungsbild der Texte so einfach zu bearbeiten. Texte können wie in Divi formatiert werden, die Stile lassen sich aber im Editor überhaupt nicht anpassen.

Um mit Elementor Aufzählungen, Links, Überschriften oder Zitate pro Text-Block oder auch global zu ändern, müssen eigene CSS-Anweisungen geschrieben werden.

Popups, Formulare und der Wartungsmodus mit Divi und Elementor

Divi bietet keine Möglichkeit, Popups zu gestalten. Du benötigst hierfür ein extra Plugin, welches kostenpflichtig ist.

Elementor Pro bringt hingegen die Möglichkeit mit, Popups zu gestalten. Du benötigst daher kein zusätzliches Plugin, um Call To Actions oder ansprechende Login-Formulare zu gestalten.

Apropos Formulare – der Divi Form Builder ist leider sehr einfach gehalten und bietet nicht sehr viele Funktionen. Elementor Pro merkt man hingegen an, dass sehr viel Fokus auf flexible, gut funktionierende Formulare gelegt wurde. Das Einrichten von Formularen geht mit Elementor einfach von der Hand und du hast sehr viele Einstellungsmöglichkeiten.

Elementor Pro bringt auch einen eigenen Wartungsmodus mit. Du musst also ein Plugin weniger installieren, um ein “Coming soon” anzuzeigen. Das ist gut für die Sicherheit und Performance deiner Website.

Dark Mode von Divi und Elementor

Für die Nerds unter uns :-)

Wie du den Screenshots dieses Artikel entnehmen kannst, besitzt Elementor einen Dark Mode und stellt, falls gewünscht, die Benutzeroberfläche dunkel da. Bei Divi hingegen benötigst du eine Sonnenbrille, wenn du spätabends arbeitest…

And the winner is…

Bei den erweiterten Funktionen gewinnt für mich Elementor, da man weniger oft zu zusätzlichen Plugins greifen muss und Elementor schon sehr sehr viele Funktionen mitbringt.

Divi hat hier in den letzten Jahren stark nachgelassen.

Elementor & Divi: die Preise

Divi

Divi gibt es nicht kostenlos zum Testen, aber du hast eine 30-Tage-Geld-zurück-Garantie. Das funktioniert problemlos.

Um USD 89,-/Jahr bekommst du das Divi Theme und kannst es auf so vielen Websites einsetzen, wie du willst.

Bezahlst du einmalig USD 249,- kannst du Divi auf Lebenszeit auf beliebig vielen Websites einsetzen. Auch auf Kundenwebsites – genau das macht Divi für viele Webdesigner sehr interessant.

Übrigens, hier bekommst du Divi um 20% günstiger*!

Elementor Pro

Elementor lässt sich kostenlos ausprobieren. Zusätzlich gibt es für Elementor Pro aber ebenso eine 30-Tage-Geld-zurück-Garantie.

Um USD 59,-/Jahr bekommst du Elementor Pro für eine Website, um USD 99,-/Jahr für drei Websites.

Bezahlst du USD 199,-/Jahr kannst du Elementor Pro auf bis zu 25 Websites einsetzen – für mehr Websites gibt es entsprechend größere Pakete.

Übrigens, hier findest du aktuelle Rabatt-Aktionen von Elementor*.

Benötigst du nur für deine eigene Website einen Page Builder, dann ist Elementor Pro in der “Essential”-Variante die günstigste Lösung.

Für Web-Entwickler sieht natürlich der Lifetime-Deal von Divi unschlagbar günstig aus, da die Kosten nur einmalig anfallen. Hier gebe ich nur zu bedenken, ob eine einmalige Investition langfristig den Entwickler unterstützt und eine langfristige Produktentwicklung fördert? 

Solltest du Elementor Pro oder Divi verwenden?

Wie du schon bemerkt hast, schenken sich die beiden Kontrahenten in vielen Bereichen nichts. Ab und zu hat Divi die Nase vorne, dann wieder Elementor Pro. Auch preislich gesehen fällt die Entscheidung für oder gegen einen Page Builder nicht leicht.

Trotzdem empfehle ich dir ganz klar auf Elementor Pro zu setzen.

Denn in unzähligen Projekten hat sich gezeigt, dass Elementor stabiler läuft und einfacher in der Handhabung ist.

Während Elementor laufend neue Versionen mit sinnvollen Funktionen und Bugfixes herausbringt, tut sich bei Divi seit Jahren kaum etwas. Der Hersteller baut Divi komplett um, um wieder auf einer technisch aktuellen Plattform zu sein. Bis zum Erscheinen von Divi 5 gibt es aber keine Weiterentwicklung bei Divi.

Elementor Pro* ist moderner, stabiler einfacher zu bedienen und eignet sich viel besser für professionelle WordPress-Entwickler wie auch für Anfänger.

Gerade die einfache Erweiterbarkeit und die große Anzahl der Module rechtfertigen auch die (geringe!) jährliche Abogebühr. Mehr zu Elementor im Vergleich zu anderen Page-Buildern (Enfold, WP Bakery Builder, Oxygen, Gutenberg) findest du in meinem Vortrag über Elementor.

Das ist mein Fazit, nachdem ich beide Page Builder in vielen Projekten verwendet habe. Hast du eine andere Meinung? Habe ich bei meinem Vergleich etwas übersehen? Ich freue mich auf deinen Kommentar!

Lass uns einfach Websites bauen,

Michael

PS: Du kannst beide Page Builder ohne Risiko ausprobieren – die 30-Tage-Garantie funktioniert problemlos. Und wenn du diesen Link verwendest, erhältst du bei Divi noch zusätzlich 20% Rabatt*. Nur für den Fall, dass dir Divi gefällt :-)

Häufige Fragen