Alles über Photoshop und WordPress

DIVI THEME- UND PAGEBUILDER IM HÄRTETEST

Inhaltsverzeichnis

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.

Was wir mögen

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

Was wir nicht mögen

Einige wichtige Module nur über zusätzliche Plugins Fehlender Popup Builder
Lernkurve für Anfänger
Plugins überteuert


2divi wordpress theme

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
$ 249,- auf Lebenszeit
für unbegrenzt viele Websites
 
3 Divi Review Download

Das Gute, Das Schlechte Und Das Hässliche

 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.

Divi Theme und Divibuilder installieren.

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.

Bildschirmfoto 2021 03 20 um 01.09.47

Die Einstellungen des Divi Themes und Divi Builders

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.

Die Divi Theme Einstellungen

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.

Optionen des Divi Themes und Builders

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.

Struktur 1

Das Divi Bedienfeld

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.

  1.  
Struktur
Inhaltsmoduleneu

Die Inhaltsmodule

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.

Einstellungen

Die Einstellungen der Module

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:

  • Inhalt
  • Design
  • Erweitert

Inhalt

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.

Design

Hier können Sie Ihre Inhaltselemente stylen:

  • Fotos platzieren, mit Rand oder Schatten umgeben, usw.
  • Textgrößen und -Arten bestimmen, und das individuell.
  • Größen der Elemente definieren.
  • Zwischenraum, Rand und Schatten des Moduls festlegen.
  • Transformieren, d.h. das Modul vertikal oder horizontal verschieben.
  • Animation des Moduls festlegen.

Erweitert

  • CSS Klassen und ID’s definieren
  • Benutzerdefiniertes CCS eingeben
  • Die Sichtbarkeit auf den verschiedenen Geräten festlegen
  • Die Übergänge angeben
  • Die Stapelreihenfolge angeben
  • Scroll-Effekte aktivieren.

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.

Backend
Backend Bearbeitung
Frontend
Frontend Bearbeitung
Texteinstellungen
Modul zur Textbearbeitung
Divi Layoutpacks 1
230 Websitetemplates mit über 1.500 Seiten stehen zur Verfügung
Global Objekt

Im Backend oder Frontend bearbeiten?

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.

Arbeiten mit dem Divi Builder

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.

Layout Optionen

Im Divi Pagebuilder gibt es 3 Layout Elemente:

  1. Die Sektion
  2. Die Zeile
  3. Die Spalte(n)

Struktur 2Die 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.

Die Divi Templates

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.

Globale Module, Sektionen oder Zeilen.

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.

Themebuilder

Divi Theme Builder

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 funktioniert es?

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.

PopUp Builder

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/

History

Verlauf, Änderungen und Revisionen

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.

 

Kopieren

Kopieren und kopieren und einfügen

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:

  1. Die Sektion, Spalte oder Zeile als global abzuspeichern und wieder benutzen (siehe oben globale Module).
  2. Die Sektion, Spalte oder Zeile kopieren und an anderer Stelle wieder einfügen.
  3. Den Stil zu kopieren und auf einer anderen Sektion, Spalte oder Zeile anwenden.

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.

Support

Support und Tutorials

Divi verfügt über einen ausgezeichneten Support und auch die Tutorials sind keine Mangelware. Doch der Reihe nach:

Support

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.

Tutorials

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)

Und last but not least, den Divi Blog

(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.

Ist das Divi Theme und der Divi Themebuilder

das Richtige für Sie?

 

Blogger

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.

Designer

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.

Internetmarketer

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.

Fazit

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.

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.

Kommentar verfassen

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