Divi vs. Elementor Pro – der ultimative Vergleich

Fragst du nach Theme-Empfehlungen für WordPress, dann wirst du sehr oft “Divi” als Antwort bekommen. Auch ich bin ein Fan vom Divi-Theme - aus dem Hause Elegant Themes.

Doch in letzter Zeit verwende ich für Projekte lieber Elementor Pro.

Warum das so ist, das zeige ich dir in diesem ultimativen Vergleich von Divi mit Elementor Pro.
Divi vs. Elementor Pro – der ultimative Vergleich

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 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 diese Funktionalität. Keiner der beiden Ansätze ist besser oder schlechter, aber jeder hat seine Vor- und Nachteile.

Divi – ein Theme

Bei Divi* bekommst du ein großartiges Theme mit einem großartigen Page Builder. Du musst dich nicht um die Auswahl eines Themes kümmern und der Page Builder ist optimal auf das Theme abgestimmt.

Elementor – ein Plugin

Elementor* lässt sich mit verschiedenen Themes kombinieren. Das ist flexibel und erlaubt dir, ein für dich optimales Theme zu wählen.

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, daher beschränke ich mich hier auf den Vergleich zwischen Divi und Elementor Pro.

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 keinerlei Komfort-Funktionen (z.B. vorgefertigte Header oder Layouts) und ist daher eher für fortgeschrittene Elementor-User zu empfehlen.
  • 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.

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, die Seite “zusammenzuklicken”. 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 vs. Elementor Pro: die Bedienung von 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.

Elementor Pro

Divi vs. Elementor Pro: die Bedienung von 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 die Website zur Verfügung.

Neue Elemente (Abschnitte, Spalten oder Elemente) kannst du per Drag’n’Drop aus der linken Spalte hinzufügen.

,Weitere Unterschiede, die mir beim Erstellen von unzähligen Websites aufgefallen sind:

  • Divi ist in der Bedienung etwas träger, was auch an den verspielten Animationen liegt.
  • Elementor nutzt den vorhandenen Platz besser aus, die Optionen werden kleiner dargestellt.
  • Divi bietet einfachere Möglichkeiten, um Transformationen etc. einzustellen.

And the winner is….

Beide Page Builder haben unterschiedliche Konzepte, um dasselbe Ziel zu erreichen. Trotzdem gewinnt hier Elementor, da die Bedienung flotter von der Hand geht.

Verfügbare Module in Divi und in Elementor

Beide Page Builder bringen von Haus aus alle “Standardfunktionen” eines Page Builders mit. Abschnitte, Zeilen und Spalten, Akkordion, Tabs, Icons und so weiter zählen zur Standardausstattung.

Fehlt einem der beiden Page Builder ein Modul, dann gibt es sicher eine Erweiterung von einem Drittanbieter, 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 vs. Elementor Pro: Module von Divi

Divi bietet 38+ verschiedene Module.

Elementor Pro

Divi vs. Elementor Pro: Module von Elementor Pro

Elementor Pro bringt 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.

Für beide Page Builder gibt es mittlerweile 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.

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 vs. Elementor Pro: Layout Packs und Vorlagen von 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.

Elementor Pro

Divi vs. Elementor Pro: Vorlagen und Site Kits von 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.

Der Gewinner ist…

Wie schon bei den Modulen ist auch die Anzahl der Vorlagen kein guter Vergleichswert. Es kommen ständig neue hinzu. Trotzdem hinkt Elementor hier hinterher, auch wenn die Qualität der Divi-Vorlagen nicht immer überzeugt.

Divi gewinnt in dieser Kategorie haushoch.

 

7 Bausteine eines erfolgreichen Online-Business - jetzt herunterladen!

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

Divi vs. Elementor Pro: Benutzerdefiniertes CSS mit 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.

Elementor Pro

Divi vs. Elementor Pro: Eigenes CSS in 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.

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.

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 hochmodernen Toolstack.

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

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

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, das Basis-Plugin 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.

Divi vs. Elementor Pro: der Elementor Pro Finder

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!

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

Divi vs. Elementor Pro: Responsive Design mit Divi

Elementor Pro

Divi vs. Elementor Pro: Responsive Design mit 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 im Normalfall aus.

Divi vs. Elementor Pro: Divi Spalten

Elementor Pro bietet hingegen “nur” normale Abschnitte und sogenannte “innere Abschnitte” an. Was auf den ersten Blick nach weniger aussieht, täuscht aber. Denn bei Divi kannst du Abschnitte nicht beliebig verschachteln und bist an die oben gezeigten Layouts gebunden.

Mit Elementor Pro ist es möglich festzulegen, dass deine Inhalte in Spalten mittig oder unten angezeigt werden. Diese Möglichkeit bietet Divi nicht.

Divi vs. Elementor Pro: Elementor Pro Struktur in Spalten

Mit den einfachen, aber mächtigen Möglichkeiten von Elementor Pro kannst du hingegen beliebige Layouts erstellen und Abschnitte verschachteln, wie du möchtest.

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 klar hinterher. Die kürzlich eingeführte Funktion “Theme-Stil” ist ein Schritt in die richtige Richtung. Aber eben erst der erste Schritt.

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.

Divi vs. Elementor Pro: Text-Einstellungen von Divi

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.

Divi vs. Elementor Pro: Text-Editor von Elementor Pro

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. 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 flotter und du hast viel mehr Mö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 steht es wieder unentschieden.

Elementor & Divi: die Preise

Divi

Divi vs. Elementor Pro: Preise von 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

Divi vs. Elementor Pro: Preise von Elementor

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 49,-/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 1.000 Websites einsetzen – das sollte für so einige Kundenwebsites ausreichend sein ;-)

Benötigst du nur für deine eigene Website einen Page Builder, dann ist Elementor Pro in der “Personal”-Variante die günstigste Lösung. Für Web-Entwickler ist natürlich der Lifetime-Deal von Divi unschlagbar, 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 nichts. In manchen Bereichen hat Divi die Nase vorne, in anderen Elementor Pro. Auch preislich gesehen fällt die Entscheidung für oder gegen einen Page Builder nicht leicht.

Rein nach Punkten gewinnt Elementor Pro ganz knapp.

Aber ist dieses Ergebnis aussagekräftig?

Nein, denn Divi* eignet sich perfekt für Anfänger. Es gibt großartige Facebook-Gruppen, Tutorials und Anleitungen. Die Vielzahl an Vorlagen lädt zum Ausprobieren, Schmökern und Erweitern ein.

Elementor Pro* ist ebenso einfach zu bedienen, eignet sich meiner Meinung nach aber besser für professionelle WordPress-Entwickler. Gerade die einfache Erweiterbarkeit und die große Anzahl der Module rechtfertigen auch die jährliche Abogebühr.

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,

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 :-)

0 Kommentare

Einen Kommentar abschicken

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Die Daten werden wie in der Datenschutzerklärung angegeben verarbeitet und gespeichert.