Divi auswählen: Was Divi 5 verändert und worauf ich achten würde

Historischer Divi-Erfahrungsbericht. Die Beschreibung und Screenshots dokumentieren frühere Divi-Versionen einschließlich des Nachtrags zu Divi 4.0. Funktionen, Preise, Übersetzungen und Support wurden nicht anhand aktueller Versionen neu geprüft. Persönliche Bewertungen gelten für den beschriebenen Stand; ein aktuelles Rabatt- oder Kaufangebot ist damit nicht verbunden.

Divi von Elegant Themes gehörte zu den populären Multi-Purpose-Themes in meinem damaligen WordPress-Vergleich. Der Anbieter warb mit einer führenden Marktposition und hohen Kundenzahlen. Solche Angaben sind kein unabhängiger Nachweis für die Eignung eines Themes. Dieser Bericht erklärt meinen damaligen Eindruck, Funktionen und praktische Grenzen.

Sagen wir es einfach, wie es ist: Das Divi Theme sieht verdammt gut aus.

Das Theme selbst, dessen Demo-Seiten und natürlich die Verkaufsseiten bei Elegant Themes und die Beispiellayouts für den Divi-Builder sind derart hübsch anzusehen, dass es unserer Einschätzung nach alleine deswegen schon von vielen Leuten gekauft wird:

Außerdem hat es natürlich, wie es sich für ein Premium-Theme gehört, eine ellenlange Featureliste. Es gibt so viele Features und Layout-Vorlagen, dass einem beinahe schwindelig wird. Der potenzielle Käufer geht ohne Zweifel davon aus, dass er beim Divi Theme alles findet, was er sich vorstellen kann, und nie wieder ein anderes Theme braucht. Das macht aus Sicht eines Website-Betreibers auch Sinn.

Doch taugen auch alle Features? Kann man mit Divi wirklich alles selbst umsetzten? Wir sind der Sache auf den Grund gegangen.

Video-Tutorial: deutsche Website mit dem Divi Theme erstellen

Review: das Divi Theme ausführlich getestet

Übrigens: In diesem Review geht es um das Divi Theme als Ganzes. Den integrierten Page-Builder haben wir bereits in einem eigenen Testbericht mit anderen WordPress-Page-Buildern verglichen.

Über das Divi Theme

Das erste Divi Theme erschien bereits 2013 bei Elegant Themes. Das Besondere war damals, dass Divi von Tag 1 an nicht nur über einen eigenen Builder verfügte, sondern auch über diverse vorgefertigte Content-Module. Das war zu dieser Zeit eher unüblich. Elegant Themes gibt es schon eine ganze Weile länger, allerdings stellte das Divi Theme damals einen wahren Durchbruch für das Unternehmen dar.

So sieht das Back-End von Divi aus

Wer das Divi Theme kauft, der bekommt den Divi-Builder gratis dazu. Mit diesem Site-Builder lassen sich alle Änderungen am Layout bequem im WYSIWYG-Modus vornehmen. Dabei ist der Editor hoch konfigurierbar. Er lässt sich an die unterschiedlichsten Anforderungen anpassen. Besonders erfreulich: Der Divi-Builder ist ein echtes Front-End-Tool. So lassen sich Änderungen am Content und Layout direkt auf der entsprechenden Seite oder im Beitrag erledigen. Es ist nicht notwendig, im Back-End zu arbeiten und dann bei jeder kleinen Änderung nach dem Speichern in die Vorschau zu wechseln. Man arbeitet sozusagen in der Vorschau.

Bei Divi nur von „einem“ Theme zu sprechen, ist schon fast fahrlässig irreführend. Divi ist nicht nur ein Theme. Divi und die meisten anderen Themes, die wir hier im Magazin für Euch ausprobieren, fallen unter den Begriff „Multi-Purpose-Theme“. Also eine Sammlung von Themes mit etlichen Sonderfunktionen, die weit über ein einfaches Theme hinausgehen. Normale Themes haben in der Regel ein einzelnes Layout – Divi hat über hundert verschiedene.

Mögliche Website-Typen auf Basis von Divi

Divi ist ein echtes Multi-Purpose-Theme, es kann für alle möglichen Website-Typen eingesetzt werden. Unter anderem lassen sich damit Blogs, Onlineshops, Event-Websites, Sales-Seiten, Magazine (mit dem Extra-Theme) u. v. a. realisieren.

Multi-Purpose-Themes sind generell nicht darin begrenzt, welche Websites man mit ihnen bauen kann. Sie ermöglichen einfache Informationsseiten genauso wie das Anbieten und Verkaufen von Produkten und Leistungen. Dabei sparen solche Themes nicht an Features, Blöcken und Content-Elementen. Es geht immer darum, so viele Wünsche von Website-Bastlern umsetzbar zu machen wie nur irgend möglich.

In dieser Hinsicht ist Divi wohl die eierlegende Wollmilchsau schlechthin, benötigt allerdings auch ein wenig Einarbeitungszeit!

Konfiguration: die Divi-Theme-Optionen

Der Umfang der Funktionsvielfalt zeigt sich besonders in den Theme-Optionen. Hier lassen sich für Divi alle globalen Optionen konfigurieren. Es lohnt sich für potenzielle Käufer, einmal gründlich reinzuschauen.

Allgemeine Optionen

Auf dem Screenshot nicht sichtbar, aber jeder Menüpunkt hat auch einen Hilfepunkt, wenn man sich mit dem Mauszeiger über diesem befindet. Es empfiehlt sich, so viele Felder wie möglich auszufüllen.

Navigationsoptionen

Alle Einstellungen für das Menü. Es gibt hier sogar noch weitere Unterreiter.

Optionen für den Builder

Der Divi-Builder kann sowohl für Seiten und Beiträge als auch für Projekte eingesetzt werden.

Layout-Optionen

Hier finden sich hauptsächlich Optionen für einzelne Beiträge und Seiten.

Optionen für Anzeigen (Banner)

SEO-Optionen

Ein paar grundlegende Einstellungen für die Suchmaschinenoptimierung sind auch integriert, diese ersetzen jedoch nicht alle Möglichkeiten eines echten WordPress-SEO-Plugins.

Optionen zur Integration

Für weitere Integrationen lassen sich eigene Code-Schnipsel verwenden.

Features: alle Funktionen des Divi Themes

Die Dokumentation von Divi ist sehr ausführlich und beschreibt jedes einzelne Feature – meist mit einem Video, das den Einsatz genau erklärt. Neben dem Basistheme, das als Platzhalter für über 100 Layoutvarianten dient, bietet Divi viele zusätzliche Features.

Content-Module

Es gibt über 40 verschiedene Content-Module, darunter Text, Bilder, Videos, Audioplayer, Videoslider, Galerien, Formulare, Blogseiten, Slider, Akkordeons, Testimonialvorlagen, Tabs, Sidebars, Shopfunktionalität über Woocommerce, Suche, Preistabellen, Beitragstitel, Postslider, Navigationen, Portfolios, Personen, Counter, Countdown-Timer, Kommentare, Source-Code, Call-to-Actions, Icons, Fortschrittbalken, Karten, Login, E-Mail-Opt-ins, Trenner, Toggler (Umschalter) und einige Module, um andere Module über die gesamte Breite anzeigen zu lassen, z. B. das „Fullwidth Map Module“, aber auch Module mit zusätzlichen Filteroptionen, wie filterbare Portfolios.

Layout-Packs

Die damalige Layout-Bibliothek enthielt zahlreiche Vorlagen für unterschiedliche Website-Typen, etwa Restaurants, Agenturen, Modeanbieter, Reisewebsites, SaaS-Angebote, Handwerk, Medizin, Blogs und Portfolios. Im damaligen Stand wurden 138 Layout-Packs mit mehr als 1.000 Layouts genannt. Eine große Auswahl erleichtert die Suche nach einem Ausgangspunkt, garantiert aber kein passendes Design für jedes Projekt.

Die Divi-Bibliothek

Die Divi Library ist eine nützliche Funktion, die es ermöglicht, selbst Content-Elemente oder -Blöcke zu erstellen und woanders innerhalb der eigenen Website schnell einzufügen.

Globale Vorlagen haben die Besonderheit, dass sie sich automatisch überall auf der Website aktualisieren. Mal angenommen in der globalen Vorlage Vita (ein Bild oben, ein Text darunter) ändert der User die Farbe des Textes von Schwarz auf Blau, dann aktualisiert sich die Textfarbe überall auf der Website, auf der diese globale Vorlage eingesetzt wurde.

Der Divi-Theme-Customizer

Der Theme-Customizer ist im Prinzip der WordPress-Theme-Customizer, bietet jedoch deutlich mehr Optionen als z. B. ein Standard-Theme. Es empfiehlt sich, in diesem Bereich alle allgemeinen Layoutoptionen zu konfigurieren: Farben, Fonts, Größen etc.

Erweiterungen: Welche Extras und Plugins bringt Divi mit?

Divi zeigt sich bei den Extras besonders spendabel. Kaum ein anderes Theme bietet so viel wie Divi:

Bloom – sammle Leads und Newletter-Opt-ins

Bloom ist ein E-Mail-Marketing-Opt-in-Tool. Mit dem Plugin lassen sich Formulare und Opt-ins erstellen. So lässt sich effizienter die eigene E-Mail-Liste auffüllen. Es gibt sechs verschiedene Pop-up-Stile und über 100 Designvorlagen. Sie erscheinen beim Verlassen der Seite, nach einer bestimmten Zeit, nach dem Scrollen, nach einer Transaktion oder müssen erst ausgefüllt werden, bevor ein Premiuminhalt angezeigt wird. Sie legen sich über alles (modal) oder binden sich in den Fließtext ein. Es gibt Schnittstellen zu allen großen E-Mail-Marketing-Anbietern, darunter Mailchimp, Hubspot, Convertkit und 16 weitere.

Monarch – Social-Media-Share-Buttons

Monarch erlaubt die Platzierung von Social-Media-Share-Buttons an fünf verschiedenen Locations auf der Seite: über oder unter Content-Elementen, auf Bildern oder Videos, an der Seite (floating), als Pop-up und animiert „hereinfliegend“. Wann und wie die Sharing-Buttons angezeigt werden, lässt sich über ein Triggersystem konfigurieren. Monarch speichert sogar Klicks in der Datenbank, sodass sich auswerten lässt, welche der Sharingbuttons wie oft geklickt wurden.

Das „Extra“-Theme für Magazin-Layouts

Ein Theme ist nicht genug. Deswegen liefert Elegant Themes direkt noch eine zweite Variante namens „Extra“ dazu. Der Grund? Divi ist als Theme auf Websites ausgelegt, die eher versuchen, Produkte und Leistungen zu verkaufen, oder aber einfache Informationsangebote sind. Der Fokus liegt also darauf, die Freiheit bei der Nutzung von beliebigen Content-Elementen zu maximieren. Genau dies ist jedoch kontraproduktiv, wenn es um ein Layout für ein Magazin oder Blog geht, das hauptsächlich News und Beiträge veröffentlicht. So ein Magazin benötigt nicht permanent unterschiedliche Content-Elemente. Hier geht es eher darum, so schnell wie möglich einzelne Beiträge zu veröffentlichen. Genau wie beim Bloggen. Und dazu ist Divi nicht perfekt geeignet.

Statt das Divi Theme zurechtzubiegen, schmeißt Elegant Themes einfach noch ein weiteres Theme auf den Feature-Haufen, das eben genau für diesen Zweck optimiert ist.

Die Startseite des Extra-Themes direkt nach einer frischen Installation. Dennoch ist es auch mit Extra möglich, den Divi-Builder für Seiten zu verwenden. Das sieht dann so aus:

Ansonsten verhält sich Extra genau wie Divi.

Es ist übrigens nicht vorgesehen, Divi und Extra parallel zu betreiben! Aber das würde auch gar keinen Sinn machen, denn es handelt sich bei beiden ja um ein Theme und im Gegensatz zu WordPress-Plugins lässt sich immer nur ein WordPress-Theme gleichzeitig aktivieren.

Herausragende Features bei Divi

Erstaunlicherweise bietet das Divi Theme auch einige außergewöhnlichere Features. Das sind solche, die sich so nicht bei anderen Themes finden lassen:

Der Rolleneditor

In größeren Organisationen ist es üblich, dass nicht jeder WordPress-User Kontrolle über alle Einstellungen hat. Für solche Fälle bietet Divi einen Rolleneditor, mit dem sich Rechte sehr filigran verteilen lassen. So können Administratoren und Editoren den Content und das Layout beeinflussen, aber Autoren und Contributoren nicht.

Der Screenshot gibt Aufschluss darüber, was alles möglich ist.

Für Editoren, Autoren und Contributoren sind die Optionen gleich. Jetzt liegt es am Website-Betreiber die Rechte genau so zu verteilen, dass niemand aus Versehen „etwas kaputt macht“.

A/B-Splittesting bei Divi mit Divi Leads

Divi Leads macht das Testen von verschiedenen Varianten unglaublich leicht. Dabei spielt es keine Rolle, welche Elemente getestet werden sollen. Seien es unterschiedliche Farben, Größen, Texte, Bilder, Videos etc. Im Divi-Builder muss man nur einen Splittest aktivieren und danach nacheinander Varianten anlegen. Sobald genug Daten vorliegen, lässt sich die Gewinner-Variante als permanente Lösung übernehmen.

Schritt 1: Splittest auf einem Element aktivieren, hier: die Headline.

Schritt 2: Hinweis vom Divi Theme, dass wir einen Test angelegt haben.

Schritt 3: Jetzt die Variante anlegen und auf Ergebnisse warten. Man sieht, dass im Konfigurationsbalken neue Icons hinzugekommen sind. Nach einer gewissen Laufzeit zeigt Divi dann sogar in Statistiken, welche Variante am besten performt hat:

Mit Divi Leads ist es also auch nicht notwendig, ein weiteres Splittesting-Plugin zu erwerben. Inwiefern diese Funktionalität tatsächlich in ein Theme gehört, steht auf einem anderen Blatt. Aber es ist „nice to have“.

Externe Anbindung an Dienste oder Plugins von Drittherstellern

Divi hat mit 16 Modulen alleine für WooCommerce eine sehr gute Unterstützung (Beispiel). Außerdem lassen sich Produktseiten komplett mit dem Divi-Builder erstellen und bearbeiten.
Aber auch für alle erdenklichen anderen Anbieter gibt es bei Divi eine Schnittstelle.

Plugins von Drittherstellern

Divi ist mehr als nur ein Theme und ein Builder. Es ist auch eine Open-Source-Plattform für andere Entwickler, die ihre eigenen Divi-Erweiterungen rausbringen können. Im Blog gibt es eine Liste mit 10 coolen Plugins: 10 Awesome Third-Party Divi Plugins.

Divi Theme Deutsch: Webseiten in deutscher Sprache

Die Unterstützung für Deutsch ist beim Divi Theme sehr gut gelungen. Wenn Du Deine WordPress-Installation auf Deutsch umgestellt hast, kannst Du mit dem Divi Theme sehr einfach eine deutsche Website erstellen.

Im beschriebenen Stand waren viele Bedienungselemente auf Deutsch übersetzt. Neue Funktionen konnten noch englische Begriffe enthalten; Dokumentation und Support waren überwiegend englischsprachig. Wer darauf angewiesen ist, sollte die Übersetzungen der konkret eingesetzten Version vorab prüfen.

Einziger Haken: Die Dokumentation und viele Schulungsvideos sind jedoch grundsätzlich auf Englisch. Das gilt auch für den Support. Ganz ohne Englischkenntnisse geht es bei Divi leider nicht. Aber hierfür reicht es in der Regel, mit einem Übersetzungsprogramm wie Google Translate oder DeepL zu arbeiten. 😉

Support

Für Divi-Kunden gibt es Zugang zu umfangreichen Support-Möglichkeiten auf Englisch, solange sie das jährliche Abo oder die Lifetime-Lizenz erwerben:

• In einem 24-Stunden-Chat lassen sich alle Fragen rund um Divi und die Zusatzplugins besprechen.
• Ganz klassisch über das Support-Formular.
• Für jedes Plugin und das Theme gibt es auch weitere Supportforen, in denen sich wahrscheinlich schon eine Antwort auf die meisten Fragen versteckt.
• Mit den DiviThemeUsers auf Facebook gibt es außerdem eine sehr aktive Facebook-Gruppe.
• Und natürlich gibt es eine sehr gute und umfangreiche Dokumentation, in der alle Features genau beschrieben werden.

Nachteile: Diese Schwächen hat Divi

Kein Theme ohne Probleme. Welche hat Divi?

Shortcodes

Bei Divi wird der Einsatz von Shortcodes immer wieder kritisiert. Dieser hat auch schon einiges an Negativpresse erzeugt. Andere Themes und Builder kommen nämlich heutzutage auch ohne aus. Aber wie schlimm sind die Shortcodes wirklich?

Wenn ein Plugin oder Theme seine Funktionalität über Shortcodes umsetzt, dann muss der Website-Betreiber, sollte er jemals das Theme wechseln wollen, alle mit diesem Plugin oder Theme erzeugten Inhalte überarbeiten bzw. neu erstellen. Man muss also jede einzelne Seite via Copy & Paste in das neue Theme/Plugin übertragen und alle Layouts neu erstellen.

Ein Themewechsel kann manuelle Arbeit erfordern, insbesondere wenn Inhalte von Shortcodes, Builder-Modulen, Formularen oder Animationen abhängen. Der Umfang hängt davon ab, wie die Seite aufgebaut wurde und welche Funktionen übernommen werden sollen. Bei der beschriebenen Divi-Version war diese Abhängigkeit ein wichtiger Punkt für die langfristige Planung.

Große Seiten werden langsam

Bei längeren und komplexeren Seiten konnte der Divi-Builder in der damals beschriebenen Nutzung langsamer werden. Das betrifft die Bedienung des Editors; die Ladezeit der veröffentlichten Seite muss gesondert gemessen werden. Sie hängt unter anderem von Hosting, Bildern, Skripten und Caching ab. Zurückhaltung bei zusätzlichen Elementen kann beiden Seiten helfen.

Preise: So viel kostet das Divi Theme

Im damaligen Lizenzmodell kostete der jährliche Zugang 89 USD; eine Lifetime-Lizenz wurde für 249 USD angeboten. Enthalten waren die damals beschriebenen Themes und Plugins. Diese Zahlen und Nutzungsrechte dokumentieren das frühere Angebot. Für eine heutige Entscheidung müssen Preise, eingeschlossene Produkte, Nutzungsgrenzen und Supportbedingungen beim Anbieter geprüft werden.

Bei der Entscheidung für einen visuellen Builder sollten neben den Lizenzkosten auch Wartung, Abhängigkeiten und ein späterer Wechsel eingeplant werden. Ein günstiger Einstiegspreis allein beantwortet diese Fragen nicht.

Fazit: Mein damaliger Eindruck von Divi

Im damaligen Vergleich überzeugten mich die Layout-Auswahl, der visuelle Editor und zusätzliche Komponenten für verschiedene Website-Aufgaben. Die Kombination konnte für Projekte interessant sein, bei denen die visuelle Gestaltung im Vordergrund stand. Diese Bewertung bezieht sich auf die beschriebenen Versionen und ist keine aktuelle Empfehlung für jedes Projekt.

Dem standen Abhängigkeiten vom Builder und mögliche Einschränkungen bei komplexeren Seiten gegenüber. Welche Funktionen tatsächlich gebraucht werden, sollte vor einer Entscheidung anhand einer eigenen Beispielseite geprüft werden.

Für die Auswahl zählen Gestaltungsspielraum, Redaktion, Performance, Wartung und Wechselmöglichkeiten. Meine damaligen Beispiele können dabei Orientierung geben, ersetzen aber keinen heutigen Test.

Update: Divi 4.0 ist da! Jetzt auch mit Theme Builder

Historischer Nachtrag: Divi 4.0 und der Theme Builder

Mit Divi 4.0 wurde der Theme Builder eingeführt. Dieser historische Nachtrag erklärt die damals neue Möglichkeit, Vorlagen für größere Teile der Website zu gestalten. Er beschreibt keine aktuelle Veröffentlichung.

Der Theme Builder nutzt die Leistung des Divi Builders und erweitert ihn auf alle Bereiche des Divi Themes, so dass man benutzerdefinierte Kopf- und Fußzeilen, Kategorieseiten, Produktvorlagen, Blogpostvorlagen, 404 Seiten und mehr erstellen kann. Der Theme Builder vereint einige der wichtigsten Funktionen von Divi, wie Dynamic Content und WooCommerce-Module, mit der erstaunlichen Designfähigkeit des Builders selbst, um Ihnen die ultimative Kontrolle über Ihre gesamte Website zu geben. Divi 4.0 ist ein Wendepunkt.

Der Divi Theme Builder ist ein Website-Vorlagensystem, mit dem man mit dem Divi Builder die Website strukturieren und jeden Teil des Divi Themes bearbeiten kann, einschließlich Kopf- und Fußzeilen, Postvorlagen, Kategorievorlagen, etc. Jede Theme Builder-Vorlage besteht aus einem benutzerdefinierten Layout für Kopfzeile, Fußzeile und Körper. Diese drei Bereiche können mit dem Divi Builder und seinen Modulen und dem sogenannten Dynamic Content erstellt und angepasst werden.

Wenn man nun eine neue Theme Builder-Vorlage erstellt, kann dieses benutzerdefinierte Design bestimmten Teilen der Website zugewiesen werden. So kann man beispielsweise eine Vorlage für Blog-Posts erstellen und damit eine neue, vollkommen benutzerdefinierte Struktur und ein neues Design für seinen Blog mit dem Komfort des Drag-And-Drop-Systems von Divi erstellen. Sobald die Vorlage zugewiesen ist, wird jeder Blogbeitrag auf der Website umgehend aktualisiert.

Theme Builder-Vorlagen können also verwendet werden, um jeden Teil der Website anzupassen, indem man die entsprechende Vorlage entweder zuweist oder von bestimmten Positionen ausschließt. Die Verwendung von Zuweisungen und Ausschlüssen erlaubt eine fein abgestimmte Kontrolle über das Design Ihrer Website.

Endlich auch eigene Kopf- und Fußzeilen!

Mit dem Theme Builder lassen sich endlich auch benutzerdefinierte Kopf- und Fußzeilen für jeden Teil der Website erstellen. Sie sind nicht mehr auf den Standard-Header von Divi beschränkt!

Der Theme Builder erweiterte den damaligen Gestaltungsspielraum deutlich. Das hier verlinkte Child-Theme war eine ergänzende Vorlage; vor einer heutigen Verwendung sind dessen Kompatibilität und Pflegezustand zu prüfen.

Zum Vergleich mit anderen Ansätzen dient mein historischer WordPress-Theme-Überblick. Für heutige Projekte sollten die Anforderungen und aktuellen Versionen gesondert verglichen werden.