DIVI vs ELEMENTOR vs WP BAKERY

Inhaltsverzeichnis

 Ich habe im Laufe der Jahre viele Test gelesen und gesehen. Oft waren diese Tests nur da, um eine WP-Theme oder -Plugin zu vermarkten. Die Informationen die man geliefert bekam, stammten oft aus der Marketing-Abteilung der jeweiligen Entwickler und waren eher ein PR-Artikel als ein reeller Test.

Mit diesem Test oder eher Vergleichstest versuche ich mit dem Aufbau einer Landing Page dem Leser einen richtigen Eindruck zu vermitteln wie drei der führenden Page- oder Themebuilder sich im Alltag eines Website-Designers und -Users bewähren.

Mit im Test dabei:

  • Das Divi Theme und der Divi Builder
  • Das Impreza Theme und der WP Bakery Page Builder inklusive Ultimate Addons for WPBakery Page Builder
  • Elementor Pro und das Elementor Basistheme
  • Server: Localhost von Mamp auf einem Imac Retina 5K 27“
  • Browser: Safari 13.0.5
  • Aufgabe: Eine Landing Page mit 3 Hauptmodulen inklusiv Seitennavigation.

Porträt der Konkurrenten

Divi Theme
und Divi Builder

Divi Builder* ist ein beliebter Premium-Seitenersteller von Elegant Themes. Während es am häufigsten als Teil des Divi-Theme verwendet wird, ist Divi Builder auch ein eigenständiges Plugin, das Sie auch mit anderen Themes verwenden können.

Mit dem Divi Builder können Sie Ihre Inhalte sowohl über eine visuelle Front-End-Arbeitsfläche als auch über eine Back-End-Arbeitsfläche bearbeiten, obwohl die meisten Benutzer wahrscheinlich die Front-End-Oberfläche bevorzugen.

Mit der neuesten Version, Divi 4.0, hat Divi auch die volle Unterstützung für das Erstellen von Themes hinzugefügt, das heißt, Sie können jetzt Divi verwenden, um Ihre Kopf- und Fußzeile, Vorlagen usw. zu entwerfen. Außerdem gibt es ab der neuesten Version Module für das WooCommerce Plugin.

Preise:

$ 89,- für ein Jahr
für unbegrenzt viele Websites
$ 289,- auf Lebenszeit
für unbegrenzt viele Websites

Der Preis erscheint im ersten Augenblick als hoch, doch er beinhaltet sowohl die Divi Themes (Divi und Extra), den Divi Builder, die Plugins und insbesondere die 179 integrierten Website Templates mit über 1326 Seiten Templates. Zusätzlich kommen fast wöchentlich noch weitere Templates hinzu. Nicht zu vergessen ist, dass Divi auf unbegrenzt vielen Websites eingesetzt werden kann.

Elementor Pro
und das Elementor Basistheme Hello

Preise:

$ 49,- für eine Website
Updates und Support für ein Jahr
$ 99,- für 3 Websites
Updates und Support für ein Jahr
$ 199,- für 1.000 Websites
Updates und Support für ein Jahr

 

Elementor Pro* ist ein neu veröffentlichtes kommerzielles WordPress-Plugin, mit dem Sie Ihrer Website einen Drag-and-Drop-Pagebuilder hinzufügen können, unabhängig davon, welches Thema Sie verwenden. Elementor wurde vom Pojo Themes- Team erstellt. Neben den Themen hat das Team 12 WordPress-Plugins erstellt , darunter die beliebte kostenlose Version dieses Pagebuilder-Plugins, Elementor.

Nach einem kürzlich durchgeführten Update ist es jetzt möglich, Elementor zu verwenden, um die Kopf-, Fuß- und andere Bereiche Ihrer Website mit der Theme Builder-Funktion anzupassen. Mit diesem Plugin können Sie jetzt mehr benutzerdefinierte Post- und Seitendesigns erstellen.

Obwohl Elementor Pro ein relativ neues Plugin ist, ist die kostenlose Version seit Juni 2016 verfügbar. Dies hat dem Team genügend Zeit gegeben, seine grundlegenden Funktionen zu testen und zu perfektionieren, bevor die leistungsstärkere kommerzielle Pro-Version veröffentlicht wurde.

WP Bakery
und das Premium Theme Impreza

Preise:

$ 45,-*) für eine Website
Support für 1 Jahr, Updates für immer

$ 245 als SaS Cloud Installation für unbegrenzte Websites

Das ehemalige Visual Composer Plugin wurde nach der Trennung von den Entwicklern in WP Bakery Page Builder umbenannt. Visual Composer wird auch weiterhin von den Entwicklern unter diesem Namen vermarktet, er wurde aber neu entwickelt.

Dadurch dass WP-Bakery als Addon bei vielen Themes bei Envato ein fester Bestandteil ist, führte zu einem großen Erfolg dieses Plugins. Ich selbst habe dieses Plugin mit dem Impreza vor 5 Jahren als erster Page Builder benutzt und noch einige meiner Kunden Websites laufen noch heute mit WP Bakery. Im Gegensatz zu Divi und Elementor ist das Plugin aber kein Themebuilder und man wird den Eindruck nicht los, dass es leicht veraltet ist und nicht die Funktionalität von Elementor und Divi hat. Doch dazu mehr später.

*) Bei wpbakery.com. Warum bei Envato/Code Canyon der Preis $ 64,- beträgt ist für mich ein Rätsel und eine Unverschämtheit.
Ein Schnäppchen jedoch macht man, wenn man das Impreza Theme für $ 59,- kauft, denn da ist nicht nur de WP-Bakery Page Builder inbegriffen, aber auch noch das Ultimate VC Addons-Plugin (+39 Module), der Revolution Slider und Font Awesome Pro.

.

Der Pagebuilder
Alltags-Test

In der nachstehenden Tabelle sind die einzelnen Funktionen der Page Builder im Vergleich aufgelistet. Es mag sein, dass einige der Funktionen nicht wie gewünscht laufen und dass andere nach einem zwischenzeitlichen Update funktionieren.

Name

Divi

Elementor

WP Bakery
Freie VersionX 1)X 2)
Drag & Drop-EditorX
Backend-EditorX
Frontend-Editor√ 3)
Inline-TexteditorX
Header-EditorX
FußzeileneditorX
Seitenlayouts

X

Globale Kopf- und FußzeileX
Funktioniert mit jedem WordPress-Theme
Vorlagenverwaltung
Blockiert Vorlagen
Elementvoreinstellungen
Export / Import von Vorlagen
Elementklon
Grid Builder?X
Element ausblenden
Rückgängig wiederholen
Benutzerdefinierte CSS
Symbolbibliotheken
Google-Schriftarten
Parallaxeeffekte√ 4)
Verlaufshintergrund
Karussell Hintergrund
Hintergrund vergrößern / verkleinern
Videohintergrund
Elementanimationen?
Box Schatten
Spaltenstapelung
Reverse Column Stacking
Reihe voller Breite / HöheV
Reaktionsschneller Vorschaumodus√ 5)
Shortcode-Unterstützung
Unterstützung für WordPress-Widgets?
Gutenberg-ElementX??
Block für GutenbergX?
Add-Ons von Drittanbietern
WooCommerce-Unterstützung

X

1) Online Divi Builder testen / 2) Online Sandbox testen / 3) Es gibt nur einen sehr perfomanten Frontend Editor /     4) Nur begrenzt Parallax-Effekte /  5) Ist ein bisschen langsam und umständlich

Die Testseite ist eine Landingpage ohne Header, Menü und Footer. Die Seite ist in 3 Partien aufgeteilt:

  • Vollbild-Video als Header
  • Eine Produktgalerie
  • Ein Kontaktteil.
.

1. Der Videoheader

Als Vollbreite und -höhe mit einem Video, Titelmodulen, Textmodul und Button.

Bei den 3 Plugins ist hier die Vorgehensweise verschieden.

Divi

Hier müssen wir beim Aufbau unter die automatisch aufgebaute erste Sektion eine neue Sektion und einem Vollbreite Kopfzeile einbauen.

Das Video wird sofort in die den Sektionshintergrund beigefügt. Man kann sich dann der Kopfzeile widmen, und alle Elemente, Titel, Untertitel, Text und Button einfügen und bearbeiten. Dies hat aber auch ein Nachteil, da die einzelnen Elemente in dieser Reihenfolge erscheinen müssen, und man muss schon überlegen wie man das Ganze überlisten kann. Auch die Abstände zwischen den Elementen können nicht über Padding und Margin geregelt werden, sondern müssen über die Zeilenhöhe verändert werden. Ein Problem ist auch der Bodytext, da dieser über die ganze Breite läuft, muss man hier über den Innenabstand (Padding) zum gewünschten Resultat kommen.

Elementor

Wir fügen hier einfach einen Abschnitt ein, und definieren dann in der Bearbeitungsspalte > Layout , die Breite ein (in unserem Fall Volle Breite) und geben auch als Höhe „an den Bildschirm anpassen“ an.

Im Reiter Stil den Videolink einfügen. Wenn der Nutzer zufälligerweise kein Video abspielen kann, kann man noch zusätzlich ein Bild als Hintergrund einfügen. Ich hatte nur ein paar Schwierigkeiten das Video über den Youtube-Link einzufügen, das lag aber voraussichtlich daran, dass ich auf einem Localhost den Test absolvierte. Die Textinhalte und der Button wurden über je 2 Textmodule, 1 überschriften-Modul und ein Button-Modul eingefügt. Dies ist zwar leicht umständlicher als bei Divi, hat aber den Vorteil, dass man die Zwischenräume individuell bequem einstellen kann.

WP Bakery Page Builder

Genau wie bei Elementor fügen wir eine neue Zeile hinzu und definieren sie auf „Volle Breite  und Höhe zu setzen. Den Übertitel, die Überschrift, den Text und den Button. Ein Problem ist der Bodytext, da dieser über die ganze Breite läuft, muss man hier entweder über den Außenabstand (Margin) oder durch das Einfügen einer Zeilentrennung (<br>) zum gewünschten Resultat kommen.

.

2. Die Produktgalerie

Divi

Diese simple Galerie in 3 Spalten aufgeteilt besteht jeweils aus einem Bild, einem Textmodul und einem Button.

Beim Aufbau keine Probleme, da mit Ausnahme vom Schatten außen und der Animation keine großen Ansprüche gestellt wurden.

Kleines Manktum, das Duplizieren von Spalten ist nicht möglich, sodass für die erste Zeile, jedes der 3 Module zweimal einzeln kopiert werden mussten. Für die zweite Zeile ging es aber fix, da hier die ganze Zeile dupliziert werden kann.

Elementor

Die Produktgalerie wurde auf dieselbe Art aufgebaut. Elementor hat aber den Vorteil, dass man eine Spalte sowohl duplizieren wie auch kopieren/einsetzen kann.

 

WP Bakery Page Builder

Die Produktgalerie wurde genau so aufgebaut wie bei Divi und Elementor. Doch genau wie bei Divi, vermisse ich hier die Möglichkeit die Spalte zu Duplizieren oder zu kopieren/einfügen. Es fehlt auch die Möglichkeit Spalten oder Zeilen zu animieren. In diesem Fall müsste man die Element der Spalte einzeln animieren.

.

3. Der Kontaktbereich

Divi

Er besteht aus einem Hintergrundbild, 2 Spalten (1/3 + 2/3)  (?)die man manuell eingeben muss und kann, da dies keine Voreinstellung ist. Mit links einem Textmodul für Kontaktadresse und rechts ein Kontaktformular Modul. Unkomplizierte Erstellung.

Elementor

Genau wie bei Divi ist der Aufbau dieses Abschnitts problemlos zu lösen.

WP Bakery Page Builder

Genau wie bei den beiden anderen Pagebuilder ist ein Aufbau problemlos. Die zwei Spalten muss man aber manuell konfigurieren (1/3+2/3).

.
DIVI Backendansicht
Divi - Arbeitsfläche bei Backend-Bearbeitung

4. Auf Front-End und Back-End arbeiten

Divi

Divi hat sicherlich die beste Lösung, um auf beiden Arbeitsflächen zu arbeiten. Die Umschaltung geht relativ schnell (hängt von der Leistung der Verbindung und vom Server ab.). Die Darstellung im Front-End entspricht dem Resultat in der Realdarstellung.

Die Einstellungsmodule sind übersichtlich und können entweder links angedockt oder freistehend benutzt werden. In diesem Fall können Sie auch auf die gesamte Breite ausgedehnt werden.
Die Module bestehen meistens aus 3 Reiter ( Inhalt – Design – Erweitert). Bei bestimmten Design- oder Funktionsmodulen können aber auch 4 oder 5 Reiter vorhanden sein.
Die Reiter selbst sind wieder eingeteilt in aufziehbare Einstellungsmodule die da im Designreiter eines Textmoduls heißen:
Text – Überschriften – Größe einstellen – Zwischenraum – Rand – Box Schatten – Filter – Transformieren – Animation )

Eine Funktion, die sicherlich eine wichtige Neuerung bei Divi ist, heißt da Arbeitsstelle (komischer Name) die dazu dient Module auf bestimmte Stellen der Seite zu Positionieren.

Fazit: Das Arbeiten sowohl im Back-End wie im Front-End kann fix von statten gehen, wenn man das Plugin ordentlich beherrscht.

Arbeitsflaeche Elementor
Die Divi Frontend Arbeitsfläche in Aktion

Elementor

Wie auf dem Bild ersichtlich, hat Elementor eigentlich kein Backend, aber auch nur ein reduzierte Front-End Arbeitsfläche, da wir ja links die Einstellungsmodule oder eher eine Einstellungsspalte haben. Diese kann je nach Bedarf verbreitert werden. Im Allgemeinen ist zu sagen, dass die Bearbeitungsspalte bei einem großen Bildschirm (in meinem Fall ein 27 Zoll Bildschirm) kaum stört und auch groß genug ist, ohne die Augen zu sehr anzustrengen. Bei einem Laptop ist das aber nicht der Fall, hier wirkt alles zu klein, inklusive die Front-End Ansicht. Zu bemerken bleibt noch dass man die Modulleiste verschwinden lassen kann, und so eine Art Voransicht siehr (die aber nicht 100% mit dem Endresultat überein stimmt).

WPB Backend
WP Bakery Backend Arbeitsfläche

WP-Bakery Page Builder

Das größte Problem beim diesem Page Builder ist die Front-End Arbeitsfläche. Verschiedene Elemente werden manchmal nicht richtig dargestellt, was aber auch an meinem localhost liegen kann. Schlimmer jedoch ist, dass die Abstände im Front-End nicht mit der realen Wiedergabe übereinander stimmen.

Sonst arbeitet es sich gut im Front-End wie auch im Back-End.
Die Einstellungsmodule sind übersichtlich und man kann sie frei über den Bildschirm bewegen. Aufgebaut sind sie ähnlich wie bei Divi.



.

5. Die Standard-Module

Divi

Divi bietet als Standard 40+ Module an, die in ihren Funktionen meistens genügen, um eine ordentlich funktionierende Website zu erstellen. Wenn WooCommerce aktiviert ist, sind all diese Module in Divi integriert.

Elementor

Bei Elementor Plus sind die Module in 3 Gruppen eingeteilt:

Basismodule: 10 Module

Pro: 25 Module

Generell: 20 Module,
also insgesamt 55 Module, also 15 Module mehr als Divi.
Hier sind ein paar interessante Module dabei, z.B. Flip Box, Testimonial Caroussel, Table of Contents, Facebook-Kommentare und Embeded. Andere finden sich wieder bei Divi in Modulen mit mehr Funktionen.

WP-Bakery Page Builder

Es sind 44 Module verfügbar die allen Ansprüchen gerecht werden. Zusätzlich gibt es wie bei Divi und Elementor viele Entwickler die addons mit vielen verschiedenen Modulen anbieten. Also eher die Qual der Wahl.

.

6. Website-, Seiten- und Abschnitt-Templates

Divi

Divi ist sicherlich hier der Vorreiter und auch eindeutiger Sieger was die Website- und Seitentemplates angeht. Nicht weniger als  179 Website-Templates mit 1.326 Seitentemplates in 13 Branchenkategorien stehen direkt zum Einfügen bereit. Dazu kommen wöchentlich noch welche hinzu.

Bei den Modulen oder Seitenteilen hapert es, doch von jedem Teil kann man ein Template erstellen und jederzeit einfügen, respektive ex- und importieren von einer Website auf eine andere.

 

Elementor Pro

Da Elementor Pro erst seit 2 Jahren auf dem Markt ist, sind hier noch nicht so viele Website Template (18) und Seitentemplates (± 200) verfügbar.
Zusätzlich findet man beim Websitebuilder Modul aber noch zusätzliche Vorlagen für Header und Footer.

WP-Bakery Page Builder

Obschon das Plugin schon länger auf dem Markt ist, sind bis dato nur knapp 80 Templates (Seiten- und Sektionstemplates) verfügbar. Die Politik von dem Entwickler ist ja teilweise, das Plugin integriert in Premium Themes zu vermarkten, deswegen vielleicht die eher niedrige Zahl. Beim eventuellen Kauf dieses Page Builders mit dem Impreza Theme erhält man zusätzlich 21 Website Templates.

.

7. Support und Tutorials

Beim Kauf eines Premium Plugins, insbesondere bei Page- und Theme-Buildern ist es wichtig, dass der Support und insbesondere die Tutorials ausgezeichnet sind.

Divi

Für Divi gibt es etwa 85 Tutorials als Text mit über 100 Videos, die im Detail alle Module und Tricks von Divi erklären. Die Qualität ist überdurchschnittlich und sind auch Nicht-Kunden zugänglich.

Dazu kommen fast täglich nützliche Tipps und Tricks im Blog von Elegant Themes. Bei reellen Problemen kann man mit dem Support Team chatten, das zwar kein Live Chat ist, sondern eher ein Support Ticket. Doch die Antwortzeit ist nur einige Stunden. Zusätzlich kann man die Divi Community fragen, respektive nach Fragen und Antworten suchen, die schon von anderen Divi-Mitgliedern gestellt wurden.

Elementor

iesZum Starten kann man in der Knowledge Base rund 200 Text Tutorials, gespickt mit Videos sich zu einem versierten Elementor Fachmann ausbilden. Dazu kommen noch einmal rund 300 Video Tutorials an, die aber den Nachteil haben, dass sie nicht einem bestimmten Lernschema folgen und auch unterschiedlich konzipiert wurden. Die Videos kann man auch direkt im Elementor Youtube Channel ansehen.
Zusätzlich findet man noch rund 25 Tutorials zum Erstellen von Nischen-Websites.

Zum Lösen von Problemen kann man natürlich auch ein Support Ticket benutzen. Wie lange die Antwortzeit ist kann ich nicht sagen, da ich den noch nicht benötigt habe.

Zu Schluss gibt es noch eine Elementor Community auf Facebook und GitHub.

WP Bakery Page Builder

Die Knowledge Base umfasst rund 70 Text-Tutorials mit Videos unterlegt. Sie sind aber bei weitem nicht so umfangreich wie bei Divi und Elementor. Die 30 Videos sind auch separat anzusehen. Sind aber meistens kurz und mit einer langweiligen Musik unterlegt ohne Sprachinfos. Der Support läuft über Tickets, da der Support aber jedes Jahr erneuert werden muss, verfüge ich hierzu über keine Erfahrungswerte.

.

8. Add-ons

Für alle 3 Plugins gibt es eine große Anzahl von Add-ons die entweder zusätzlich Funktionen, Module, Templates usw. anbieten.

Divi hat kürzlich ein Marktplatz integriert wo man die Addons direkt erwerben kann. Bei Elementor und WP-Bakery findet man Links direkt zu den Entwicklern.
Diese Add-ons fließen nicht in die Bewertung, da ich die einzelnen nicht alle in Ihrer Qualität getestet habe.

.

9. Bewertung

Ich bewerte die einzelnen beschriebenen Elemente von 1 (schlecht) bis 5 (sehr gut)

Fazit:

Divi gewinnt zwar das Duell aber Elementor Pro ist ihm dicht auf den Fersen, was für die Zukunft sicherlich für Elementor spricht, da das Pro-Plugin erst seit kurzer Zeit auf dem Markt ist. WP-Bakery hinkt ein bisschen weit hinterher, hat aber kürzlich einige wichtiges Upgrade getätigt, welche in die richtige Richtung gehen. Die Stabilität der Front-End Bearbeitung muss aber noch stark verbessert werden.

 

Bewertungselement

DIVI

ELEMENTOR

WP BAKERY

Preise

4

4

4

Test

5

5

4

Front-End / Backend Bearbeitung

5

4

3

Standard Module

4

5

5

Templates

5

4

3

Support & Tutorials

5

4

2

TOTAL

28

26

21

.
Divi Anpassungen
Die Divi Theme und Divi-Builder Einstellungen geschehen über das Dashboard
Elementor Globale Schriftart
Die Website-Anpassung (Farben, Typographie, usw.) geschieht direkt auf der Arbeitsfläche von Elementor

Zusätzliche Tipps und Informationen.

Vorbereitungsarbeiten.

Bei diesem Test mit nur einer kleinen Landing Page habe ich nicht viel Zeit verloren und im Detail meinen Aufbau vorbereitet. So habe ich keine Farben festgelegt und auch bei der Typografie nicht alles im Detail fixiert. Dies sollte man aber unbedingt tun, damit der Workflow verbessert wird. Wichtig dabei ist, dass Sie aufpassen das die Theme-Einstellungen (Customizer) nicht in Konflikt kommen mit dem Page Builder. Hier scheint mir als ob Elementor leicht im Vorteil ist, weil diese Einstellungen direkt auf der Builder-Arbeitsfläche durchgeführt werden können.

Responsiv Design

Aus denselben Gründen habe ich auch nicht die Landing Page nicht auf die Responsivität getestet und adaptiert. Deswegen kam dieser wichtiger Teil nicht in die Bewertung. Aus der Erfahrung weiß ich aber, dass hier WP-Bakery noch einen zusätzlichen Mangel hat, da der Aufwand komplizierter ist als bei Divi und Elementor.

Mehrsprachigkeit

Sowohl Divi wie auch WP-Bakery sind komplett als Plugin auf deutsch übersetzt. Was bei Elementor noch nicht der Fall ist.
Was die Mehrsprachigkeit der erstellten Websites betrifft, funktionieren alle mit WPML und auch mit Polylang.

.

Videos zum Test

Die Erstellung der Landing Page zu diesem Test kanns du als Video anzuzschauen

DIVI BUILDER

ELEMENTOR PRO

WP BAKERY PAGE BUILDER

.

WordPress von der auf lernen

Viele Gratis Kurse zum Erstellen deiner Website

Kommentar verfassen

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

Weitere Beiträge die Sie interessieren könnten

Kennzeichnung & Information: Affiliate Links / Partnerlinks

Bei einem Link, der mit einem Stern gekennzeichnet ist (*), handelt es sich um einen Affiliate Link. Wenn du über diesen Link etwas kaufst, erhalte ich eine kleine Provision. Für dich entstehen dadurch keine Mehrkosten. So kann diese Webseite finanziert werden und sie bleibt frei von externen Werbebanner. Vielen Dank! Weitere Informationen disbezüglich findest du in der Datenschutzerklärung.