Als ich vor Jahren zum ersten Mal vom Divi Theme hörte und lies, dachte dass die Divi Community eine Art verschworene Gemeinschaft von damals rund 400.000 Benutzer war. Irgendwie kam einem das Ganze mysteriös vor. Doch intrigierte mich dies aber extrem, so dass ich mich langsam aber sicher dokumentierte und den Entschluss fasste das Divi Theme und den Divi Builder zu kaufen und zu testen. Und meine ersten Schritte verliefen positiv und zwischenzeitlich habe ich einige Websites mit Divi erstellt und habe mich dann auch definitiv entschieden auf eine Lizenz auf Lebenszeit upzugraden.
Es ist aber nicht so, dass ich nur mit Divi meine Websites erstelle, einige sind mit Elementor Pro, andere mit WP Bakery Page Builder erstellt. Es war nun an der Zeit, das Divi Theme und den Divi Builder auf Herz und Nieren zu prüfen und Ihnen dieses Super-Theme im Detail vorzustellen, auf echte, ehrliche und unvoreingenommene Art und Weise.
Ist nun das Divi Theme und der Divi Builder nun oder noch immer das beste Mehrzweck Theme in WordPress. Um eines direkt voraus zu schicken, ist ja Divi nicht nur ein Theme und ein Page Builder, sondern zwischenzeitlich auch ein Theme Builder. In diesem Test, werde ich aber nur ganz kurz auf das Divi Theme eingehen, denn der Divi Page- und Themebuilder funktioniert auch mit den meisten gängigen Themes.
Vielseitig einsetzbarer Theme- und Pagebuilder Transparente Preispolitik
Front- und Backend Bearbeitung
Module mit vielen und nützlichen Einstellungen
Gute Responsive Design Integration
Guter Support und lehrreiche Tutorials
Einige wichtige Module nur über zusätzliche Plugins Fehlender Popup Builder
Lernkurve für Anfänger
Plugins überteuert
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.
Für diesen Test habe ich Divi gestartet, um zu sehen, wie gut dieser Seitenersteller im Vergleich zu beliebten Alternativen abschneidet. Ich werde bei diesem Test versuchen meine Erfahrungen mit diesem Tool, so wie das was mir gut und weniger gefällt mit ihnen teilen.
Das Divi Theme gibt es bei Elegant Themes zu kaufen (siehe unten) und man kann es nach dem downloaden wie gehabt, wie jedes andere Theme installieren. Mit dem Theme wird automatisch auch der Divi Builder installiert. Man braucht den also nicht automatisch zu installieren. Dies ist nur notwendig, wenn sie ein anderes Theme benutzen wollen. In diesem Fall wird das Plugin auch bei Elegant Themes heruntergeladen und wie irgendein anderes Plugin installiert.
Das Divi Theme hat schon einen großen Vorteil gegenüber anderen Themes um mit dem Divi Builder zu arbeiten. Er ist nämlich komplett abgestimmt auf den Divi Builder und es besteht kein Risiko eines Konflikts oder sonstigen Problemen.
Man findet diese wie gehabt unter Design>Customizer, aber zusätzlich unter Divi>Theme Customizer. Die Einstellungsmöglichkeiten sind vielfach und begreifen neben den Üblichen z.B Schriftengrössen für Tablets und Smartphone, sowie fixierter Header.
Hier findet man die Optionen wie Website Logo, Navigation, Links zu sozialem Logos, Eigene Website Farbmanagement, Eigenes Theme CSS, Codes für Header, Footer und Body, SEO Einstellungen,
Unter den Divi Einstellungen finden wir auch den Theme Builder, den Rolleneditor und die Divi Bibliothek. Doch dazu mehr im Laufe dieses Tests.
Der Divi Builder hat eigentlich zwei Arbeitsflächen und zwar der Frontendeditor und der Backendeditor die aber das jeweils gleiche Bedienfeld nutzen.
Eine Seite(violett gekennzeichnet) besteht in der Regel aus einer oder mehreren Sektionen
Eine Sektion) oder Abschnitt enthält eine oder mehrere Zeilen. Es gibt grundsätzlich 3 Arten von Sektionen: Regulär (blau gekennzeichnet), Spezial (Rot-Orange gekennzeichnet) und Volle Breite (violett gekennzeichnet).
Eine Zeile (grün gekennzeichnet) kann in Spalten eingeteilt werden.
Eine Zeile und/oder Spalte enthält ein oder mehrere Module (schwarz gekennzeichnet). Im Backend Editor ist die Struktur einer Seite klar erkenntlich und das ist schon behilflich wenn man kompliziertere und/oder größere Seiten erstellt.
Die Inhaltsmodule sind das Herzstück der Divi Builders. Es gibt insgesamt 63 Module, davon 38 Basismodule, 16 WooCommerce Module (nur sichtbar wenn das WooCommerce Plugin aktiviert ist), sowie 9 Volle Breite Module (siehe nebenstehend). Zusätzliche gibt es eine Unzahl von Divi Plugins, die unter anderem neue Funktionalitäten hinzufügen. (siehe unseren Beitrag „ 10 empfohlene Divi Plugins „ (https://luxblogger.com/10-empfohlene-divi-plugins/). Doch müssten die im Divi Theme vorhandenen Inhaltsmodule völlig ausreichen um eine funktionsfähige und kreative Website zu erstellen.
Doch für den anspruchsvollen Webdesigner fehlen einige Module. So sucht man vergebens ein Tabellen Modul, oder für Testberichte manchmal wichtige Module wie Inhaltsverzeichnis oder Sternebewertung. Für die Überschriften gibt es kein separates Modul, dafür kann man aber im Textmodul die Texte einzeln stylen. Es besteht auch keine Möglichkeit die Spalten durch einfaches schieben wie in Elementor in der Breite bestimmen. Entweder man gibt sich mit den vorgegebenen Spaltenstrukturen zufrieden, oder man muss jeweils das CSS der einzelnen Elemente ändern. Für den versierten Webdesigner kein Problem, aber für den CSS-Novizen ein schwieriges Unterfangen.
Wie schon gesagt erscheinen die Bedienungsfelder der einzelnen Module erst wenn man sie abfragt. Die Bedienungsfelder sind frei über dem Bildschirm bewegbar und können auch einfach per Mausscrolling in der Breite und Höhe vergrößert werden.
Normalerweise ist das Bedienerfeld in drei Registerkarten aufgeteilt:
In dieser Registerkarte finden wir den Inhalt des Moduls: Text, Bild, Link, usw.
Hier können Sie Ihren Text schreiben oder kopieren (bitte als unformatierter Text). Ihr Bild hochladen oder den Link eingeben. Außerdem können Sie dem Modul einen Arbeitsnamen geben.
Hier können Sie Ihre Inhaltselemente stylen:
Je nach Art des Inhaltsmodul findet man hier noch andere Inhalts-, Design oder erweiterte Möglichkeiten.
Die Einstellungsmöglichkeiten sind eine der Stärken von Divi. Kleiner Nachteil: um alle Möglichkeiten auszuschöpfen muss man eine etwas höhere Lernkurve in Kauf nehmen. Doch auch hier gilt oft Probieren über studieren. Dabei gehören die angebotenen Lernhilfen (Videos, Posts, Divi-Community) zu den besten auf dem Markt.
Nachdem mit Elementor ein komplettes Frontend bearbeiten möglich ist, kann man sich die Frage stellen, ob eine Backendbearbeitung noch zeitgemäß oder notwendig ist. Da gehen sicherlich die Meinungen auseinander. Ich persönlich mag, wegen der Übersichtlichkeit, oft das Arbeiten im Backend. Und da der Divi Builder das ermöglicht bin ich auch ein Fan von Divi, bin es aber auch von Elementor, der dies leider nicht anbietet.
Aber auch die Frontend Bearbeitung geht relativ flink vonstatten und durch das mobile Bearbeitungsfenster behält man auch auf kleineren Bildschirmen den Überblick. Kleiner Haken: Die Frontend Ansicht stimmt nicht immer 100% mit der Browser Seite überein. Aber dies ist bei den meisten Frontend Pagebuildern der Fall.
Wie ich schon vorher erwähnte bin ich sowohl ein Fan von Divi wie von Elementor. Obschon die Arbeitsweise ähnlich erscheint, gibt es aber einen großen Unterschied: die Backend Arbeitsfläche, die leider bei Elementor nicht verfügbar ist. Man könnte sagen: Wer strukturiert arbeiten will nimmt den Divi Builder, wer eher ein intuitiver Gestalter ist, sollte Elementor nehmen. Bei mir hängt dies oft damit zusammen was die Anforderungen des Kunden und die der zu gestaltenden Website sind.
Wer also eine Basisstruktur seiner Website und deren Seiten hat, sollte mit der Homepage anfangen, und zwar im Backend seine einzelnen Elemente wie vorgesehen einfügen inklusive des Inhalts (Texte, Bilder usw.) ohne sich Gedanken zum visuellen zu machen. In der zweiten Phase geht es dann ans Visuelle im Frontend Editor. Hier kann man dann, wenn notwendig, alle visuellen Änderungen oder Feinheiten vornehmen. Um sich diese Arbeitsweise anzueignen, muss man aber Divi und gegebenenfalls die notwendigen Plugins bestens kennen.
Aber wer weniger strukturiert arbeiten will, kann natürlich auch intuitiv zum Ziel kommen.
Im Divi Pagebuilder gibt es 3 Layout Elemente:
Die Sektion kann in eine unbegrenzte Zahl von Zeilen aufgeteilt werden. Die Sektionen und Zeilen können auch unterschiedliche Breiten haben. Dies kann man in den Einstellungen prozentual zur maximalen Breite definieren.
Die Zeilen kann man in unterschiedliche Spalten aufteilen. Leider stehen einem nur die 20 Voreinstellungen zur Verfügung. Will man hier prozentual die Spalten jedoch anders aufteilen, so muss man schon auf einen CSS Befehl zurückgreifen (siehe: https://www.peeayecreative.com/how-to-resize-divi-column-widths/). Dies ist bei Elementor einfacher durch Verschieben zu erreichen.
Die Spalten enthalten die einzelnen Inhaltsmodule die in Divi zur Verfügung stehen.
Wenn man eine Spalte hinzufügen will, muss man schon die Spaltenstruktur in der Zeile ändern. Bei Elementor geht das einfacher, durch das hinüberziehen eines neuen Elements. Wie schon ein paarmal erwähnt, ist Divi für strukturiertes Arbeiten am besten geeignet.
Vertiefen wir ein bisschen die Layout Möglichkeiten und die Arbeitsweise.
Für normalen Text und Überschrift gibt es, im Gegensatz zu anderen Pagebuildern, eigentlich nur ein Textmodul. Es sei denn man integriert ein Divi Plugin mit erweiterten Überschriftmöglichkeiten. Viele sehen dies als Nachteil, weil eventuell die Gestaltungsmöglichkeiten eingeschränkt erscheinen. Für die Einfachheit der Struktur ist es aber von Vorteil und die typografischen Einstellungen sind quasi unbegrenzt, da sie in jedem Textmodul je nach Einstellung ( h1-h6, sowie Grundtext) separat eingestellt werden können). Dies ist bei den Konkurrenzprodukten in dieser Form nicht möglich.
Was die Bearbeitung des Textes angeht, kann man hier auch inline arbeiten. Obschon dies praktisch sein kann, bevorzuge ich die Textbearbeitung im Bearbeitung im Bearbeitungsmodul.
Das Bearbeitungsmodul kann sowohl in der Breite wie in der Höhe vergrößert oder verkleinert werden und zusätzlich an jeden Punkt des Bildschirms bewegt werden. Dies erleichtert den Workflow, insbesondere bei kleineren Bildschirmen.
Anfang des Jahres hat Divi viel getan um die Reaktionsgeschwindigkeit der Module und Arbeitsschritte zu verbessern. Heute kann man wohl sagen, dass Divi momentan hier führend ist. Eine weitere Neuerung sind persönliche globale Farben, die in der Bearbeitung neben den Basisfarben, die zuletzt benutzten bei der Farbgebung direkt verfügbar sind. Und last but not least ein großer Schritt in punkto Workflow von responsiven Websites sind die verschiedenen Ansichten des Website Entwurfes welche auf die gängigen Smartphones sowie individuell eingestellt werden können. Was noch fehlt sind dann jedoch mehr spezifische Möglichkeiten die Formate auch dementsprechend grafisch anzupassen.
In punkto Styling gibt es alle typografischen und Design-Möglichkeiten die heute von einem Pagebuilder verlangt werden.
Für die bequemen oder weniger designerfahrenen Nutzer gibt natürlich Templates für alle Bereiche. Insgesamt 240 Template Pakete mit über 1.500 Seiten stehen dem Divi-User zur Verfügung. Natürlich kann man auch nur einzelne Sektionen oder Module davon benutzen.
Bei den einzelnen Plugin Ersteller findet man noch zusätzliche Layouttemplates.
Mit Divi kann man natürlich globale Module, Sektionen oder Zeilen erstellen. Dies ist interessant für immer wiederkehrende Seitenteile, die entweder nicht geändert oder teilweise geändert werden sollen. Man kann z.B. auf jeder Seite einen Header haben, der überall den selben Font, Hintergrundfarbe, Fontgröße usw. hat und nur der Inhalt ändert. In diesem Falle braucht man nur die globalen Einstellungen zu synchronisieren die sich nicht ändern. Man kann natürlich diese Module auch exportieren und bei anderen Websites einsetzen. Dies erleichtert ungemein den Workflow.
Divi ist nicht nur ein Page Builder, sondern auch ein Theme Builder, d.h. Sie können mit Divi Header, Footer und Body gestalten und diese entweder auf jeder oder nur auf bestimmten Seiten zeigen.
Wie üblich hält Divi dies schön und einfach – Sie starten es über Ihr Divi Dashboard
Dann klicken Sie einfach auf „Theme Builder“, dann erscheint der Theme Builder. Für diese Überprüfung erstellen wir einen neuen Header.
Sie können dann entweder Ihren eigenen Header von Grund auf erstellen oder eine der praktischen Standard-Header-Vorlagen verwenden. Leider hat Divi hier keine Vorlagen in ihrer Bibliothek, dies im Gegensatz zu Elementor. Gottseidank bieten aber viele Websites hier gratis Vorlagen an (z.B. https://www.divilayouts.com/divi-layouts-category/header/ ), teilweise sogar gratis. Diese können sie downloaden und dann per Import in Ihre Vorlage einfügen. Sie können dann per Rechtsklick in der Vorlageneinstellung bestimmen, wo Sie diesen Header anwenden wollen. Den Header (oder Footer) können Sie natürlich gemäß Ihren Vorstellungen ändern.
Selbstverständlich können Sie auch von Grund auf einen neuen Header erstellen, dies geschieht mit den gleichen Modulen, wie Sie auch die Seiten erstellen. Auch diesen Header (und/oder Footer) kann man gegebenenfalls nur auf bestimmten Seiten anzeigen.
Leider hat Divi kein PopUp Builder, da muss man schon auf ein Divi PopUp Builder eines Drittanbieters zurückgreifen. Dies ist sicherlich ein Nachteil, den Divi schnellstmöglich ausbügeln sollte um mit der Konkurrenz mithalten zu können.
Hier finden Sie einen Gratis Divi PopUp Builder:
https://www.elegantthemes.com/marketplace/popups-for-divi/
Wer schon mal eine Website aufgebaut hat, weiß dass Änderungen regelmäßig auf der Tagesordnung stehen. Hier stehen dem Gestalter in Divi zwei Tools zur Verfügung.
In jedem Bearbeitungsfenster der Module gibt es ein Undo und ein Redo Button. Diese sind wichtig, wenn man während dem Arbeiten ein vorher/nachher Vergleich machen will. Diese funktionieren aber nur solange das Modul nicht gespeichert wurde.
Nach dem Speichern muss man dann schon auf den History-Button (der Uhr-Button ganz oben rechts oder unten im der Mitte beim Frontend) zurückgreifen. Mit diesem kann man, die einzelnen Arbeitsschritte sehen und gegebenenfalls einige oder mehrere rückgängig machen, aber auch auf die letzte Version wieder zurücksetzen. Das ganze geht an sich ganz flott über die Bühne und nimmt fast keine Zeit in Anspruch.
Kleiner oder eher großer Nachteil: Nach dem Speichern der Seite wird die History leider auf null gesetzt und man muss auf die unsäglichen WordPress Revisionen zurückgreifen.
Wie oft kommt es einem vor dass eine Sektion, Zeile oder Spalte einem gefällt und sie dann an anderer Stelle nochmals dieselbe oder ähnliche benutzen möchte. Mit Divi gibt es hier drei Möglichkeiten:
Dies geht ganz einfach mit einem Rechtsklick auf das zu kopierende Modul und den gewünschten Kopiermodus auswählen. Und dann mit nochmaligen Rechtsklick auf dieses Modul den Befehl einsetzen. Einfacher geht es wirklich nicht. Das geht schnell und erleichtert enorm den Workflow.
Divi verfügt über einen ausgezeichneten Support und auch die Tutorials sind keine Mangelware. Doch der Reihe nach:
Divi verfügt auf der Mitgliederseite über eine gut funktionierende Chatfunktion um technischen Support zu erhalten. Auch wenn diese nicht immer zeitgleich funktioniert, erhält man hier aber innerhalb 24 Stunden und 7/7 Tage eine Antwort (per Chat und email).
Zusätzlich gibt es eine große Datenbank, in der man beantwortete Fragen über allmögliche technische Probleme findet. Hier gilt eher zu viel als zu wenig. Es funktioniert aber sowohl eine englischsprachige (https://www.facebook.com/groups/DiviThemeUsers) wie auch eine deutschsprachige Facebook Gruppe (https://www.facebook.com/groups/divithemedeutsch), auf denen man schnell User-Hilfe bekommt.
Divi hat eine umfangreiche Dokumentation (Text/Bild sowie Videos) wo das Lernen von Divi
fast schon Spaß macht. Zusätzlich gibt es natürlich auch einen YouTube-Kanal mit vielen Tutorials (https://www.youtube.com/channel/UCuasRuWliU48RwnKXf9GesA)
(https://www.elegantthemes.com/blog/) wo man nicht nur PR-Texte liest, sondern Beiträge wie man bestimmte Nischenseiten erstellt, Templates von Sektionen runterladen kann, und vieles mehr über Divi lernen und erfahren kann. Dieser Blog verdient die Note 1 Plus.
Wenn Sie ein Anfängerblogger sind, ist Divi sicherlich nicht unbedingt für Sie, es sei denn Sie wollen sich schnellstmöglich als Blogger etablieren und haben auch die notwendigen Mittel dazu. Für den Budget-Blogger kostet Divi schon ein kleiner Brocken Geld, der aber durch eine lebenslange und unbegrenzte Lizenz schnell amortisiert werden kann.
Die Lernkurve ist zwar nicht unbedingt einfach, doch wenn Sie die notwendige Geduld haben, wird Divi bald zur Sucht. Trotz allem steht dem Blogger mit dem Themebuilder ein ordentliches Tool zur Verfügung, welches der Workflow beim Erstellen der Beiträge von wichtiger Hilfe sein kann.
Ich persönlich finde dass Divi der ideale Themebuilder für kreative und gut organisierte Designer ist. Insbesondere wenn man das Design strukturiert mit einem Designtool wie Photoshop, Adobe XD oder ähnliches entwirft. Hat man dazu noch einige Kenntnisse in CSS sind einem fast keine Grenzen gesetzt. Der Workflow ist schnell und die Lernkurve dürfte für Designer kein Problem sein.
Obschon Divi mit dem möglichen A/B Test ein wichtiges Werkzeug für Marketer integriert hat, sind trotzdem noch einige Mängel hier aufzuholen. Die E-Mail-Integration hat noch einige Mängel und vor allem fehlt ein integrierter PopUp Builder.
Divi ist sicherlich einer der vielseitigsten Theme- und Pagebuilder auf dem Markt. Die Lernkurve ist beherrschbar und auch ohne CSS-Kenntnisse lassen sich kreative und gut strukturierte Websites erstellen. Der Kostenpunkt ist einerseits überschaubar und bei einer lebenslangen Lizenz auch ohne weitere, zukünftigen Kosten ein Tool für die Zukunft. Bleibt noch der kleine Haken der Geschwindigkeit, den man aber bei allen Pagebuildern wiederfindet. Aber vielleicht bringt uns ja die Zukunft in dieser Hinsicht noch einige Überraschungen.
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.
Verwenden Sie Elementor richtig? Mit Elementor, das Millionen von Websites mit Strom versorgt, haben wir die häufigsten Fehler von Neulingen gesammelt. Lernen Sie, sie zu vermeiden, um Ihren Workflow sofort zu verbessern.
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.
