Divi

Bestes WordPress-Theme aller Zeiten oder lahme Gurke?

Der umfangreiche Test 2020

Divi

Hast Du Schwierigkeiten, gut aussehende Websites zu erstellen?
Oder bist Du mittlerweile schon so frustriert, dass Du an das Beauftragen eines externen Webdesigners denkst?

Ja? РDann warte noch einen Augenblick, denn Divi, der WordPress-Pagebuilder von Elegant Themes, könnte die Antwort auf Deine Probleme sein.

In diesem Bericht werfen wir einen Blick darauf, wie einfach es ist, visuell beeindruckende Seiten (und Beiträge) zu erstellen, ohne eine Menge Zeit und Geld zu verschwenden.

Divi Review

Inhaltsverzeichnis

Kapitel 1

Was ist Divi?

Kapitel 2

Was kann Divi?

Kapitel 3

So erstellst Du Seiten mit Divi

Kapitel 4

Stärken von Divi

Kapitel 5

Schwächen von Divi

Kapitel 6

Die Vor- und Nachteile im √úberblick

Kapitel 7

Fazit – Was taugt Divi?

Kapitel 8

Nutzer-Kommentare und Meinungen

Wenig Zeit

Wenig Zeit?

Kein Problem, dann springe jetzt zu unserem Fazit vor und sieh Dir an, ob Divi das richtige Tool f√ľr Dich ist oder ob Du lieber auf eine andere L√∂sung setzen solltest.

Du liest nicht gerne?

Wir haben Dir das gesamte Review mit all unseren Eindr√ľcken auch in einem Video festgehalten. Sieh es Dir jetzt an, um alles N√∂tige √ľber den Page-Builder zu erfahren.

Was ist Divi?

Divi ist ein Theme von der Firma Elegant Themes, welches speziell f√ľr WordPress entwickelt wurde. Das Theme hat seit seiner Ver√∂ffentlichung dank des attraktiven Designs und seiner zahlreichen Funktionen, einschlie√ülich des Tools „Divi Page Builder“ (die Plugin-Version des Themes), viel Aufmerksamkeit erregt.

Divi wurde seit seiner ersten Veröffentlichung regelmäßig aktualisiert und ist jetzt das Flaggschiff von Elegant Themes. Zu Recht muss man sagen, denn bislang ist mir noch kein anderes Theme unter die Augen gekommen, welches so sehr auf Weiterentwicklung setzt, wie Divi. Ich habe das Theme bereits seit der Version 2 im Einsatz und seither wurden unzählige neue Features eingebaut.

Doch nicht nur in der Entwicklung neuer Features ist eine Elegant Themes extrem schnell, sondern auch beim Beheben auftretender Bugs und Probleme.

Selten habe ich einen Fehler in Divi bemerkt, der nicht innerhalb von sieben Tagen durch einen Patch behoben wurde.

Und selbst wenn es sich mal um einen individuellen Fehler handelte, der zum Beispiel durch Inkompatibilit√§t mit anderen Plugins entstanden ist, konnte der Support das Problem in der Regel innerhalb von 48 Stunden f√ľr mich l√∂sen.

Doch schauen wir uns nun einmal genauer an, was Divi wirklich leisten kann.

Was kann Divi?

Bei Divi gibt es grunds√§tzlich 3 verschiedene M√∂glichkeiten eine Seite (oder einen Beitrag) zu erstellen. Die erste M√∂glichkeit besteht darin ein vorgefertigtes Layout aus der riesigen Bibliothek zu √ľbernehmen und nach den eigenen W√ľnschen anzupassen. Die zweite M√∂glichkeit liegt darin ein Layout von Grund auf selbst zu erstellen. Hier beginnt man also mit einer leeren Seite. Und die dritte M√∂glichkeit besteht darin eine bereits existierende Seite von dir selbst als Templates zu √ľbernehmen und frei nach Bedarf anzupassen.

Template oder Neubeginn

In Divi hast Du die M√∂glichkeit aus einer Bibliothek mit zahlreichen vordefinierten Templates auszuw√§hlen und so innerhalb von Minuten ganze Landingpages erstellen zu k√∂nnen. Diese kannst Du anschlie√üend ganz nach Deinen W√ľnschen anpassen. Hierbei stehen Dir Counter, Schaltfl√§chen, Akkordions, Spalten und unz√§hlige weitere Module zur Verf√ľgung. Nat√ľrlich kannst Du auch mit einer leeren Seite beginnen und Dein eigenes Template erstellen.

Modularer Aufbau

Bei Divi basiert alles auf Modulen. So besteht eine Landingpage zum Beispiel aus mehreren Reihen oder Spalten, die wiederum aus verschiedenen Modulen, wie zum Beispiel Texten, Buttons, Bildern oder Opt-In Boxen bestehen. Auf diese Weise wird ein grandioser Workflow generiert, mit dem auch Anfänger innerhalb weniger Minuten die ersten ansprechenden Ergebnisse erzielen können.

Styling

Jeder Baustein und jedes Element kann individuell angepasst werden. Egal ob Hintergrund, Animation, Hover-Effekte, Responsiveness, Textgröße oder Sonstiges. Alles kann angepasst werden Рund das ohne CSS Kenntnisse mitzubringen. Dennoch hat man die Wahl jederzeit tiefer einzusteigen und den CSS, HTML oder Javascript-Code manuell zu verändern. So können sowohl Einsteiger mit dem Drag-and-Drop-Editor faszinierende Landingpages und Blogartikel erstellen, als auch Fortgeschrittene und Profis sich auf der gigantischen Spielfläche austoben.

Erweiterbar

Die hat es als erster Anbieter geschafft eine saubere Schnittstelle zu ihrem Theme zu kreieren, die auch von Dritt-Anbietern genutzt werden kann. Daher gibt es mittlerweile unz√§hlige Plugins, die Divi um spezielle weitere Module erg√§nzen. Du h√§ttest gerne einen neuen Slider, kein Problem. Ein vollkommen neues Men√ľ? Gerne doch! Was, ein Popup, das E-Mail-Adressen einsammelt? Aber sicher! Ein vollkommen neues Layout, dass du 1:1 als komplett neue Website √ľbernehmen kannst? Bitte, nichts leichter als das!

Divi von elegant Themes

So erstellt Du Seiten mit Divi

Wie bereits erwähnt gibt es 3 Wege eine neue Seite mit Divi zu erstellen. Entweder auf Basis eines bereits vorgefertigten Templates, auf Basis einer bereits erstellten Seite oder von Grunde auf neu.

Wenn Du eine neue Seite in WordPress erstellst, klicke die Schaltfl√§che „Den Divi-Builder benutzen„:

Divi Screenshot

Anschließend wirst Du gefragt, mit welcher der 3 Varianten Du starten möchtest.

Divi Templates

Beginnst du mit einer leeren Seite, kannst du im darauffolgenden Fenster auch schon mit der Gestaltung deiner Seite beginnen. Divi l√§sst er hier nun zwei M√∂glichkeiten. Erstens die Bearbeitung mit dem visuellen Editor, indem du die Seite so bearbeitest, wie du sie letztendlich auch als Nutzer sehen w√ľrdest (WYSIWYG). Module werden hier bearbeitet, indem man mit der Maus √ľber sie f√§hrt, und sich ein entsprechendes Men√ľ zeigt, indem man alle notwendigen Einstellungen vornehmen kann. Die Auswirkungen dieser √Ąnderungen f√ľr den Seitenbesucher sind dann sofort ersichtlich:

Divi Visueller Editor

Die zweite M√∂glichkeit ist der modulare Editor, bei dem du die grundlegende Struktur deiner Seite direkt im Blick hast. Auch hier kannst du alle verf√ľgbaren Einstellungen an den Modulen, Reihen und Spalten vornehmen. Diese Ansicht ist besonders sinnvoll, um den logischen Aufbau der Seite zu planen und zu √ľberpr√ľfen:

Divi Modularer Editor

Die Divi Template-Bibliothek

Beginnst du jedoch mit einem „Premade-Layout“, √∂ffnet sich die Layout Bibliothek, in der du ganz nach Lust und Laune nach passenden Templates f√ľr deine Seite st√∂bern kannst:

Template Bibliothek

Divi gruppiert seine Landing Pages in Template-Sets. Ein Set beinhaltet dabei mehrere Seiten. So kannst du dich auch dazu entscheiden, nur einzelne Unterseiten eines Templates zu verwenden:

Template Seiten

Jedes Set verwendet die gleichen Designkomponenten, um ein einheitliches Look-and-Feel zu schaffen. Nat√ľrlich k√∂nnen diese Seite an alles Stellen frei bearbeitet werden.

Typische Seiten, die innerhalb eines Sets verf√ľgbar sind:

  • √úber uns
  • Blog
  • Kontakt
  • Startseite
  • Landingpage
  • Portfolio
  • Preisliste

Templates anpassen

Jetzt wird es richtig interessant! Denn wenn du ein Template ausgewählt hast, kannst du es frei bearbeiten.

Du kannst also die Inhalte, die Farben, ja sogar die gesamte Seite ab√§ndern. Bist du mit all deinen √Ąnderungen fertig, kannst du die Seite auch selbst wieder als Templates abspeichern und so f√ľr deine zuk√ľnftigen Seiten auf dein angepasstes Template zur√ľckgreifen.

Divi nutzt hierf√ľr eine eigens entwickelte Bibliothek, auf die du √ľber deine WordPress Installation zugreifen kannst. In dieser Bibliothek kannst du auch Templates direkt ab√§ndern, sie als Datei exportieren und bereits exportierte Templates importieren.

Auf diese Weise kannst du ein Template bzw. ein Layout blitzschnell von einer WordPress Seite auf eine andere kopieren.

Doch Templates m√ľssen sich nicht immer nur auf ganze Seiten beziehen. Jedes Modul, jede Reihe und jede Spalte kann in der Bibliothek gespeichert werden und genauso exportiert und importiert werden, wie ein gesamtes Layout.

Hast du also zum Beispiel einen Button individualisiert, kannst du ihn ganz einfach in der Bibliothek speichern und so per Knopfdruck auch auf anderen Seiten importieren. Du musst ihn also nicht an jeder Stelle komplett neu konfigurieren.

Besonders cool dabei ist jedoch, dass du bei dem Speichern in der Bibliothek die Wahl zwischen global und lokal hast. Speicherst du so zum Beispiel den eben genannten Button ab und stellst ihn auf global, wird eine nachtr√§gliche √Ąnderung an dem Button automatisch an allen Stellen synchronisiert, an denen der Button eingef√ľgt wurde. Dies erleichtert die Pflege einer Website, die mit Divi erstellt wurde ungemein:

Divi Screenshot2

Module, die in Divi integriert sind

Wie bereits erwähnt, bringt Divi zahlreiche Module von Haus aus mit. Hierbei kann zwischen Sektionen, Reihen und Modulen unterschieden werden. 

1. Sektion

Eine Sektion (in Divi mit der Farbe Blau gekennzeichnet) ist ein √ľbergeordneter Container, der aus Reihen, Spalten und Modulen besteht. Sie befindet sich auf der h√∂chsten Ebene einer Seite. D.h eine Sektion kann nie eine andere Sektion beinhalten.

Bei der Auswahl der Sektion (in der deutschen Version „Abschnitt“ genannt), kann man zwischen Regul√§r, Spezial und Volle Breite w√§hlen:

Divi Sektion

Reguläre Sektionen integrieren sich dabei in die Standard-Einstellung von WordPress (Breite, Abstände etc), die aber auch angepasst werden können.

Volle-Breite Sektionen sind, wie es der Name vermuten lässt, automatisch auf die maximale Seitenbreite eingestellt.

Spezial-Sektionen sind hingegen besondere Layout-Einstellungen, aus denen man auswählen kann:

Divi Spalten

Wichtig ist, dass man grunds√§tzlich jedes Layout auch mit regul√§ren Sektionen nachbauen kann (den entsprechenden Aufwand vorausgesetzt). Bei Divi f√ľhren eigentlich immer mehrere Wege zum Ziel.

Dennoch kann es bestimmt Einschr√§nkungen geben. So k√∂nnen Module zum Beispiel eine Abh√§ngigkeit zur Sektion haben. Ein Beispiel w√§hre hier ein Voll-Breites Men√ľ, welches nur in eine Voll-Breite Sektion gesetzt werden kann.

2. Reihe

Eine Reihe besteht aus einem oder mehreren Modulen und kann in einer oder mehreren Spalten angezeigt werden.

Sie sind in Divi mit der gr√ľnen Farbe gekennzeichnet und sind immer Teil einer Sektion.

Im Grunde wirst du mit ihnen (neben den Modulen) am meisten zu tun haben, da eine Seite in der Regel nur aus ein- zwei Sektionen, aber aus vielen Reihen (in der deutschen Version „Zeilen“ genannt) besteht:

Divi Zeilen

Vieles erklärt sich hier von selbst, daher will ich lediglich anmerken, dass man bei mehr-spaltigen Reihen auch jede Spalte separat designen kann.

Das ist aber auch das tolle an Divi, man kann nahezu jedes Detail einstellen, sofern man dies möchte.

3. Modul

Module sind das Herzst√ľck jeder Reihe. Sie sind letztendlich die sichtbaren Dinge einer Website. W√§hrend sich Sektionen und Reihen eher in Layout-Elemente eingliedern lassen, sind Module der Content, aus dem deine Seite besteht.

Nachfolgend m√∂chte ich dir alle Module auflisten, die zum Zeitpunkt existieren, an dem dieser Artikel erstellt wurde. Es ist sehr wahrscheinlich, dass in einem Jahr hier bereits einige Module fehlen ūüôā

Divi Module

Aktuell verf√ľgbare Module in Divi (alle individualisierbar)

Akkordeon

Anzeigen einer Box, bestehend aus Abschnitten, die aufgeklappt werden können.

Audio

Einf√ľgen eines Audio-Players.

Balkenzähler

Animierter Zähler in Balkenform

i

Beitragsnavigation

Navigationselement um Beiträge durchzublättern

Bild

Was könnte das wohl sein ^^

l

Blog

Zeigt Beiträge aus dem Blog an.

Button

Eine Taste zum Klicken.

Code

Ein HTML, CSS oder Javascript Code-Block

Countdown-Timer

Ein animierter Countdown

E-Mail-Optin

Optin-Box zum Sammeln von Kontaktdaten.

Filterbares Portfolio

Zeigt das hinterlegte Portfolio (in WordPress verwaltet) inklusive Filtermöglichkeit.

Galerie

Zeigt Bilder als Galerie

Handlungsaufruf

Call-to-Action mit Text und Button

Informationstext

Text, der neben oder unter einem Icon oder Bild angezeigt wird

Karte

Integriere eine Google Map auf Deiner Website – ideal f√ľr lokale Unternehmen.

w

Kommentare

Zeigt WordPress-Kommentare der Seite, auf der dieses Modul verwendet wird.

Kontaktformular

Ein Formular, √ľber das der Besucher mit dir in Kontakt treten kann

Kreiszähler

Ein animierter Zähler in Kreisform

Login

WordPress Login-Feld

a

Men√ľ

Zeigt das festgelegte Navigationsmen√ľ

Person

Zeigt Informationen √ľber eine Person (z.b Autor)

Portfolio

Zeigt das Portfolio ohne Filterfunktion

Post-Slider

Zeigt Beiträge in Form eines Sliders

Posttitel

Zeigt den Titel des Beitrags/der Seite, auf der dieses Modul verwendet wird.

Preistabellen

Zeigt eine Preistabelle

Registerkarte

Anzeigen einer Box, die mehrere Tabs mit Inhalten hat.

Seitenleiste

Anzeigen einer Widget-Leiste

Shop

Zeigt Produkte (aus WooCommerce)

Slider

Ein Bildslider

Social Media

Zeigt Links zu deinen social Media Seiten

U

Suche

Zeigt WordPress-Suchfeld

,

Teiler

Unsichtbares oder sichtbares Element, zum visuellen Teilen von Abschnitten

Testimonials

Zeigt Nutzer-Reviews

b

Text

Zeigt Text (und/oder √úberschriften)

Umschalter

Wie Akkordeon, aber mit Fokus auf einen Inhalt

I

Video

Zeigt den Video-Player

Video-Slider

Ein Slider mit Videos statt Bildern

Zähler

Ein animierter Zähler, der von 0 bis zur festgelegten Zahl hochzählt

Mobile Optimierung / Responsiveness

Jede Seite, die Du mit Divi erstellst, egal ob Du sie von Grund auf neu aufbaust oder eine Vorlage verwendest, ist mobil einsetzbar. Aber das Theme hat drei zusätzliche mobile Funktionen, die Dir helfen, einzigartige Seiten zu erstellen.

1. Ansicht der Seite auf verschiedenen Geräte-Typen

Wenn Du deine Seite Aufbaust, befindet sich unten links ständig eine Leiste, mit der Du sofort die Ansicht zwischen Desktop, Tablet und Mobil umschalten kannst:

Divi Responsive

2. Umschalten der Sichtbarkeit von Elementen

Nun, trotz aller Einstellungsm√∂glichkeiten kann es durchaus auch einmal vorkommen, dass sich ein bestimmtes Layout nicht gut mobil anzeigen l√§sst. Hierf√ľr hat man die M√∂glichkeit einzelne Module, Reihen oder auch Sektionen auf bestimmten Ger√§ten zu deaktivieren:

Divi Responsive

3. Mobiloptimierung bei jeder Einstellung

Das tolle an Divi ist, dass man grunds√§tzlich jede Einstellung zu jedem Modul (und auch zu jeder Reihe/Sektion) 3-fach einstellen kann. Einmal f√ľr den Desktop-Computer, einmal f√ľr das Tablet und einmal f√ľr das Smartphone.

Dies geschieht, indem man einfach in das Feld einer Einstellung klickt und sich dadurch ein kleines Hover-Men√ľ zeigt. Dort kann man auf das Mobil-Icon klicken und schon wird die Einstellung in 3 Tabs angezeigt:

Divi Responsive

Warum das genial ist? Ganz einfach, sofern das Icon deaktiviert ist (und die Tabs ausgeblendet sind) wird hier von Divi auch kein separater CSS-Code geladen, wodurch sich der gesamte Code reduziert und entsprechend weniger Ladezeit in Anspruch nimmt. Dieser Effekt zeigt sich umso deutlicher, je mehr Module auf einer Seite sind. 

Das hat Divi einfach sehr gut gelöst РProps gehen raus ^^

Welche Stärken hat Divi?

Du hast bereits eine Menge Informationen zu Divi erhalten. Dabei stellten sich folgende Vorteile heraus:

100% Individualisierbar

Einfach alles kann in Divi den eigenen W√ľnschen angepasst werden. Egal ob Modul, Reihe oder Sektion, deiner Kreativit√§t sind keine Grenzen gesetzt.

Perfekter Mix f√ľr Einsteiger und Profis

Divi ist sowohl intuitiv und schnell erlernbar, aber auch flexibel und erweiterbar. Dadurch kommt jeder auf seine Kosten. Anf√§nger k√∂nnen schon am ersten Tag eine Seite fertigstellen, Profis k√∂nnen jedes Pixel den eigenen W√ľnschen anpassen.

Eine tolle Community

Egal ob Layouts, Templates oder neue Module… durch die Schnittstellen, die Divi bietet, hat jeder die M√∂glichkeit seine ganz eigenen Inhalte zu erstellen und zu teilen. Diese wiederum k√∂nnen von anderen (oder eben dir) genutzt werden. Diese Eigenschaft hat WordPress selbst damals gro√ü gemacht und auch hier geht das Konzept auf.

Perfekter Support

Regelm√§√üige Aktualisierungen, Bugfixes, Feature-Updates, ein schneller und kompetenter Support und ein gro√ües Community-Forum sorgen f√ľr eine Top-Atmosph√§re, von der sich viele Konkurrenten eine Scheibe abschneiden sollten. Mehr geht nicht!

Sehr hohe Kompatibilität

Divi f√ľhrt nur in extrem seltenen F√§llen zu Kompatibilit√§tsprobleme mit anderen Plugins. So ging die gemeinsame Verwendung mit WooCommerce, WPML und anderen „tiefgreifenden“ Plugins flott von der Hand und f√ľhrte zu keinerlei Problemen. Kritisch wird es nur, wenn andere Pagebuilder im Einsatz sind, die in die Divi-Seiten eingreifen. Hier kann es dann zu Problemen kommen. Das gilt allerdings f√ľr nahezu jeden Page-Builder.

Welche Schwächen hat Divi?

Die deutsche √úbersetzung

Dies ist zwar ein Jammern auf hohem Niveau, aber man merkt der deutschen √úbersetzung an, dass hier mit einer Software (z.B Google Translate) gearbeitet wurde. Manche Begriffe sind geradezu l√§cherlich √ľbersetzt. Gl√ľcklicherweise kann man diese √úbersetzungen auch selbst √ľberarbeiten. (Zum Beispiel mit Loco-Translate)

Visueller Editor manchmal hakelig

Im Grunde ist der visuelle Editor extrem gut umgesetzt. Doch gerade wenn Elemente sehr dicht beieinanderliegen, kann es auch schnell fummelig werden, weil die Steuerung eines Elements beim her√ľberfahren ausgeklappt wird. Das zeigt sich dann, indem man immer wieder das falsche Element ausw√§hlt, weil der Builder die Position des Mauszeigers nicht zu 100% korrekt erfasst. Gl√ľcklicherweise geschieht das sehr selten und kann durch die kurzfristige Nutzung der modularen Ansicht umgangen werden.

Vor- und Nachteile im √úberblick

Vorteile

  • ¬†100% individualisierbar
  • Perfekt f√ľr Einsteiger und Profis
  • Eine tolle Community
  • Perfekter Support
  • Sehr hohe Kompatibilit√§t

Nachteile

  • Deutsche √úbersetzung hat viel Luft nach oben
  • ¬†In seltenen F√§llen fummeliger visueller Editor

Fazit: Einfach perfekt

Ja ich mache keinen hehl daraus. Ich halte Divi f√ľr das perfekte WordPress-Theme. Dabei hat dieses Theme noch so viele Vorteile, die ich hier noch gar nicht angesprochen habe. Die (√ľber)faire Preispolitik, die tolle Unterst√ľtzung f√ľr Entwickler, die tolle Zusammenarbeit mit WooCommerce, bei der endlich auch die Produkte individualisiert werden k√∂nnen, die m√∂glichkeit globale oder lokale Header und Footer zu erstellen und und und…

Wegen all dieser Gr√ľnde, bewerten wir Divi wie folgt:

Divi im Test
  • Bedienung
  • Stabilit√§t
  • Individualisierung
  • Preis
4.9

Zusammenfassung

Divi von elegant themesDivi √ľberzeugt uns im Test und vereint einfach alle Anforderungen, die man als Website-Betreiber haben kann.

Die zahlreichen Module, die st√§ndige Weiterentwicklung, der tolle Support… all das macht Divi zum aktuell besten Theme/Plugin auf dem Markt.

Ich m√∂chte mich an dieser Stelle pers√∂nlich f√ľr das Lesen dieses Artikels bedanken. Wenn er Dir gefallen hat, dann teile ihn gerne mit Deinen Freunden.

Und wenn Du gerne mehr solcher Blog-Artikel sehen m√∂chtest, dann schaue √∂fter einmal bei uns vorbei. Ansonsten w√ľnsche ich Dir jetzt noch viel Spa√ü und alles Gute!

Video-Review: Alle Fakten auf einen Blick

Das sagen die Nutzer

Nachfolgend siehst Du den Kommentar-Bereich.

Welches Erfahrungen hast Du mit Divi gemacht? Welche Vor- und Nachteile konntest Du feststellen?

Sag uns Deine Meinung!

2 Kommentare

  1. Reto

    Habe bis jetzt nur gute Erfahrungen mit Divi gemacht und finde die Community dahinter genial und bei Fragen kriegt man schnell eine Antwort!

    Antworten
    • Marc Meese

      Auf jeden Fall ūüôā

      Antworten

Einen Kommentar abschicken

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

100 Power-Backlinks

Du brauchst bessere Rankings f√ľr Deine Website?

45 Tage Performance-Backlinks f√ľr nur 9.95‚ā¨