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:
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.
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* 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.
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.
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 Version | X 1) | √ | X 2) |
| Drag & Drop-Editor | X | √ | √ |
| Backend-Editor | √ | X | √ |
| Frontend-Editor | √ | √ 3) | √ |
| Inline-Texteditor | √ | √ | X |
| Header-Editor | √ | √ | X |
| Fußzeileneditor | √ | √ | X |
| Seitenlayouts | √ | √ | X |
| Globale Kopf- und Fußzeile | √ | √ | X |
| 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öhe | V | √ | √ |
| Reaktionsschneller Vorschaumodus | √ | √ | √ 5) |
| Shortcode-Unterstützung | √ | √ | √ |
| Unterstützung für WordPress-Widgets | ? | √ | √ |
| Gutenberg-Element | X | ? | ? |
| Block für Gutenberg | X | √ | ? |
| 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:
Als Vollbreite und -höhe mit einem Video, Titelmodulen, Textmodul und Button.
Bei den 3 Plugins ist hier die Vorgehensweise verschieden.
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.
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.
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.
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.
Die Produktgalerie wurde auf dieselbe Art aufgebaut. Elementor hat aber den Vorteil, dass man eine Spalte sowohl duplizieren wie auch kopieren/einsetzen kann.
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.
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.
Genau wie bei Divi ist der Aufbau dieses Abschnitts problemlos zu lösen.
Genau wie bei den beiden anderen Pagebuilder ist ein Aufbau problemlos. Die zwei Spalten muss man aber manuell konfigurieren (1/3+2/3).
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.
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).
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.
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.
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.
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.
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.
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.
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.
Beim Kauf eines Premium Plugins, insbesondere bei Page- und Theme-Buildern ist es wichtig, dass der Support und insbesondere die Tutorials ausgezeichnet sind.
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.
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.
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.
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.
Ich bewerte die einzelnen beschriebenen Elemente von 1 (schlecht) bis 5 (sehr gut)
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 |
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.
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.
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.
Die Erstellung der Landing Page zu diesem Test kanns du als Video anzuzschauen
Machen Sie sich bereit, Ihre Webdesign-Fähigkeiten zu verbessern, indem Sie die Besonderheiten der Typografie kennenlernen. In dieser umfassenden Anleitung zur Web-Typografie erfahren Sie alles, was Sie für die Erstellung Ihres Web-Design in punkto Typografie benötigen.
Der Divi Themebuilder ist sicherlich einer der besten Theme- und Pagebuilder auf dem Markt. Wie schneidet er im Test ab?
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.
