Divi erklärt: So funktioniert der vielseitige Page-Builder für WordPress
Divi ist ein sogenannter WordPress-Page-Builder. Solche Tools verbinden die Einfachheit eines Baukasten-Systems mit der Flexibilität von WordPress. Das bedeutet: Du kannst damit komplette Webseiten ohne eine einzige Zeile Code erstellen – perfekt für Anfänger und alle, die ihre Website selbst gestalten wollen. Aber auch Webdesigner und Agenturen setzen auf Divi – doch dazu später mehr.
Genauer gesagt ist Divi ein Theme, das du wie jedes andere WordPress-Theme installierst. Normalerweise bestimmt das Theme deiner Website das Grundgerüst des Designs, wie zum Beispiel die Position von Menüs und Layouts. Der Haken? Wenn dein Theme eine Funktion nicht unterstützt, hast du keine Möglichkeit, sie zu verwenden.
Divi löst dieses Problem elegant: Mit dem Divi Theme Builder kannst du so viele individuelle Vorlagen (Templates) für den Header, Body und Footer erstellen, wie du möchtest. Diese kannst du dann ganz einfach verschiedenen Seiten deiner Website zuweisen:
Das bedeutet: Du hast volle Gestaltungsfreiheit und keine Einschränkungen bei der Umsetzung deiner Ideen!
Zusätzlich kommt Divi mit dem Page Builder, einem Drag-and-Drop-Tool, mit dem du jede einzelne Seite gestalten kannst – alles ohne Programmierkenntnisse. Divi macht den Einstieg besonders einfach: Beim ersten Öffnen des Page Builders wirst du gefragt, wie du starten möchtest.
Hier kannst du wählen, ob du die Seite komplett neu erstellen möchtest oder ob du lieber auf ein bereits vorhandenes Template zurückgreifen willst. Du kannst auch bestehende Seiten duplizieren, Layouts aus deiner Bibliothek laden oder eines der vielen vorgefertigten, kostenlosen Divi-Templates verwenden.
Divi Theme im Praxistest: Das sind die größten Vorteile aus meiner Erfahrung
Im Laufe der Jahre habe ich zahlreiche WordPress-Themes und Page-Builder getestet. Doch aus gutem Grund setze ich inzwischen ausschließlich auf Divi – sowohl für meine eigenen Websites als auch für die meiner Kunden.
Das Divi Theme punktet vor allem durch seine intuitive Benutzerführung, die es auch Anfängern ermöglicht, ihre Website selbst zu erstellen und später eigenständig zu pflegen. Besonders meine Kunden schätzen, dass sie die volle Kontrolle über ihre Inhalte behalten und Updates oder Änderungen ohne fremde Hilfe vornehmen können.
Für mich als Webdesigner ist es wichtig, dass meine Kunden ihre Unabhängigkeit bewahren. Das ist einer der Hauptgründe, warum ich mich für WordPress entschieden habe – und das Divi Theme ist die perfekte Ergänzung dazu.
Die wichtigsten Vorteile von Divi: Flexibel, intuitiv und anpassbar
Im Folgenden möchte ich dir die wichtigsten Funktionen und Module von Divi vorstellen, mit denen ich selbst täglich arbeite:
- WYSIWYG – What you see is what you get
Einer der größten Vorteile des Divi Page Builders ist, dass du deine Seite genauso siehst, wie sie nach dem Speichern für deine Besucher aussehen wird. Keine ständigen Wechsel zwischen Backend und Frontend mehr – du siehst deine Änderungen in Echtzeit direkt im Page Builder. Das macht die Arbeit nicht nur schneller, sondern auch intuitiver, besonders für Einsteiger. - Das Divi Theme ist auf Deutsch verfügbar
Das Divi Theme passt sich der Sprache an, die du bei der Installation von WordPress ausgewählt hast. Das bedeutet: Divi ist vollständig auf Deutsch verfügbar – genauso wie in vielen anderen Sprachen.Ein weiterer Pluspunkt: Es gibt eine große deutschsprachige Divi-Community, in der man leicht Hilfe findet, auch ohne Englischkenntnisse. Allerdings ist der offizielle Support von Elegant Themes und die meisten Tutorials derzeit nur auf Englisch verfügbar. Doch hier kann Google Translate gut weiterhelfen, insbesondere bei den Dokumentationen und Anleitungen. - Geeignet für (fast) alle Arten von WordPress-Webseiten
Da Divi in Sachen Gestaltung und Layout keine Grenzen setzt, kannst du damit praktisch jede Art von Website erstellen – egal ob Onepager, Blog, Unternehmenswebsite und sogar Online-Shops.In Kombination mit WooCommerce ist das Divi Theme ideal für kleine bis mittelgroße Shops, die bis zu 100 Artikel verwalten. Gerade bei kleineren E-Commerce-Projekten bietet Divi die perfekte Balance aus Benutzerfreundlichkeit und Flexibilität.
Für große, stark skalierende Online-Shops mit komplexen Anforderungen wie Tausenden von Artikeln, fortschrittlichen Filteroptionen oder speziellen Integrationen, ist jedoch eine andere Lösung empfehlenswert. Hier stoßen Divi und WooCommerce aufgrund ihrer Architektur an ihre Grenzen, besonders in Bezug auf Performance und Verwaltungsmöglichkeiten. - Lifetime-Lizenz bei Divi (+ Black Friday Deals)
Die Lifetime-Lizenz für das Divi Theme kostet auf den ersten Blick mit 249 USD zwar eine stolze Summe, doch im Vergleich relativiert sich der Preis schnell: Die Jahreslizenz für Divi kostet aktuell 89 USD. Das bedeutet, dass sich die lebenslange Lizenz bereits nach knapp drei Jahren amortisiert – und danach profitierst du dauerhaft von kostenlosen Updates und Support.Ein weiterer Vorteil: Mit beiden Lizenzmodellen kannst du beliebig viele Websites erstellen – egal ob für eigene Projekte oder für Kunden. Das macht das Divi Theme gerade für Freelancer und Agenturen besonders attraktiv.
Im Vergleich zu Divis größtem Konkurrenten Elementor Pro wirkt die Lifetime-Lizenz wie ein echtes Schnäppchen. Elementor bietet keine Lifetime-Lizenzen mehr an, was bedeutet, dass du jährlich zahlen musst, um Updates und Support zu erhalten. Alle Funktionen von Elementor Pro kosten dich ab 99 USD pro Jahr.
Tipp:
Ich habe meine Divi-Lizenz damals zu einem günstigen Preis am Black Friday gekauft. Elegant Themes bietet auch weiterhin spezielle Black Friday-Deals, bei denen du Divi und andere Produkte des Unternehmens mit hohen Rabatten bekommst.
Divi Page Builder: Die wichtigsten Funktionen und Module im Überblick
Im Folgenden möchte ich dir die wichtigsten Funktionen und Module von Divi vorstellen, mit denen ich selbst täglich arbeite:
Funktionen von Divi
- Responsiv
Divi ist von Haus aus voll responsiv, was bedeutet, dass sich deine Website flexibel an verschiedene Bildschirmgrößen anpasst – egal ob Desktop, Tablet oder Smartphone. Mit nur einem Klick kannst du zwischen den Ansichten für die verschiedenen Geräte wechseln und deine Website für jedes Format optimieren.
Besonders praktisch: Du kannst fast alle Einstellungen für jedes Gerät separat anpassen. Das heißt, du bestimmst genau, wie groß deine Schrift auf dem Tablet oder Handy sein soll oder welches Bild auf mobilen Geräten angezeigt wird.
Sogar unterschiedliche Inhalte für verschiedene Geräte sind möglich – zum Beispiel ein anderes Bild auf dem Smartphone als auf dem Desktop.
Diese Flexibilität eröffnet unzählige Möglichkeiten und macht es dir einfach, eine professionelle und perfekt optimierte Website ohne Programmierkenntnisse zu erstellen.
- Split-Testing
Das Split-Testing (auch bekannt als A/B-Test) ist eine der Funktionen, die Divi einzigartig machen. Als Anfänger wirst du es vielleicht nicht sofort brauchen, aber ich aber ich erkläre dir trotzdem, warum es so nützlich ist:
Beim Split-Testing handelt es sich um eine Methode aus dem Onlinemarketing, die dir hilft herauszufinden, welche Elemente auf deiner Website besser funktionieren. Dabei werden zwei Versionen eines Elements – zum Beispiel Buttons mit verschiedenen Beschriftungen, Formulare oder Verkaufstexte – gegeneinander getestet. Den Besuchern werden abwechselnd die verschiedenen Varianten angezeigt, und du kannst messen, wie oft sie darauf klicken oder das Formular ausfüllen.
Divi bietet diese Funktion direkt integriert und ermöglicht es dir, mit nur wenigen Klicks einen solchen A/B-Test einzurichten. Das ist ein echtes Alleinstellungsmerkmal und unglaublich wertvoll für alle, die mit ihrer Website Geld verdienen wollen.
- Schriftarten hochladen und Google Fonts deaktivieren
Wenn du eine Website für den deutschen Markt erstellst, kommst du um das Thema DSGVO (Datenschutz-Grundverordnung) nicht herum – auch wenn dir das zunächst vielleicht nicht bewusst war.
Ein wichtiger Punkt in Sachen Datenschutz ist die lokale Installation von Schriftarten. Anstatt Google Fonts zu verwenden, solltest du deine Schriftarten auf deinem eigenen Server hosten. Das verbessert nicht nur den Datenschutz, sondern kann dir möglicherweise auch das Einblenden eines Cookie-Banners ersparen.
Mit Divi ist das ganz einfach: Du kannst deine eigenen Schriftarten direkt im Text-Modul hochladen, vorausgesetzt, du hast in WordPress den Upload von .ttf, .otf oder .woff2 Dateien aktiviert.
Zusätzlich bietet Divi die Möglichkeit, die Google Fonts mit nur einem Klick in den Theme-Optionen zu deaktivieren. Dadurch stellt deine Website keine Verbindung mehr zu den Google-Servern her, und es werden nur die lokal installierten Schriftarten verwendet – ein klarer Vorteil in Bezug auf den Datenschutz.
- Farbschema managen
Apropos Divi Theme Optionen: Hier kannst du neben der Deaktivierung von Google Fonts noch viele weitere nützliche Einstellungen vornehmen.
Zum Beispiel lege ich hier das Farbschema für die gesamte Website fest. Diese Farben werden dann im Visual Builder überall dort vorgeschlagen, wo du die Farbgestaltung ändern kannst. Das spart Zeit und sorgt für ein einheitliches Design.
Tipp:
Wenn du mit der Maus über eine Einstellung fährst, erscheint rechts ein kleines Fragezeichen. Dort findest du hilfreiche Erklärungen zu den jeweiligen Optionen – ideal, wenn du dir bei einer Funktion unsicher bist.
- H-Tags: Struktur für deine Website
H-Tags (von <h1> bis <h6>) sind HTML-Elemente, die deiner Website Struktur verleihen. Sie spielen eine zentrale Rolle für die Suchmaschinenoptimierung (SEO), da sie Google und anderen Suchmaschinen helfen, den Inhalt deiner Seite besser zu verstehen.
Deshalb ist es wichtig, diese Tags korrekt zu verwenden und sie problemlos anpassen zu können. Hier punktet Divi mit einer sehr benutzerfreundlichen Lösung:
Im Reiter „Inhalt“ des Textmoduls gibst du deinen Text ein und kannst ihn direkt mit den passenden H-Tags versehen. Besonders praktisch: Du kannst in einem einzigen Textmodul mehrere Überschriften verwenden, was viel Flexibilität bietet.
Im Reiter „Design“ lassen sich die Überschriften dann individuell gestalten. Du kannst für jedes Textmodul eigene Designs für H1, H2 usw. festlegen oder eine globale Vorlage erstellen, die automatisch auf alle Überschriften angewendet wird – ideal für Blog-Posts wie diesen!
- Custom CSS im Divi Theme
Mit Divi hast du unzählige Möglichkeiten, dein eigenes CSS einzufügen, was deiner Website praktisch keine gestalterischen Grenzen mehr setzt.
Jedes Modul bietet im Reiter „Erweitert“ die Option für benutzerdefiniertes CSS. Hier kannst du entweder Freiform-CSS eingeben oder spezifisch auf einzelne Modul-Elemente zugreifen. Besonders für Einsteiger ist das nützlich: Wenn du z.B. CSS beim Punkt „Hauptelement“ einträgst, wird das CSS direkt auf das entsprechende Modul angewendet – ohne dass du Klassen, IDs oder andere Selektoren kennen musst.
Auch für mich als Webdesignerin ist das ein großartiges Feature. Allerdings sollte man sich gut merken, wo man welches CSS eingetragen hat. Wenn du viel mit Custom CSS arbeitest, lohnt es sich, ein System zu entwickeln, um den Überblick zu behalten. 😉
Zusätzlich kannst du CSS nicht nur in den Modulen selbst eintragen, sondern auch in den Seiteneinstellungen, den Divi Theme-Optionen, dem WordPress Customizer oder – falls du ein Child-Theme verwendest – direkt dort. Bei so vielen Möglichkeiten ist es leicht, den Überblick zu verlieren, deshalb: Gut organisieren ist hier der Schlüssel!
- Globale Vorlagen und Elemente
Gerade bei größeren Websites gibt es viele wiederkehrende Elemente, wie zum Beispiel die Kontakt-Sektion am Ende von Landingpages oder die Autorenbox in Blog-Artikeln.
Mit Divi kannst du solche Elemente ganz einfach in deiner Bibliothek speichern und als „global“ markieren. Wenn du dann deine Website baust, fügst du das Element immer aus der Bibliothek ein. Der Clou: Wenn du eine Änderung vornehmen möchtest, musst du sie nur an einer Stelle (in der Bibliothek) durchführen. Die Anpassung wird dann „global“ auf allen Seiten übernommen, auf denen das Element verwendet wird.
Diese Global-Funktion ist auch im Theme-Builder integriert. Hier kannst du globale Vorlagen für den Header, Footer und Body deiner Website erstellen, die sich automatisch auf alle Seiten anwenden lassen.
Die besten Divi Module: Welche Bausteine du für deine Website brauchst
Nachteile von Divi: Diese Eigenheiten solltest du kennen
Nichts ist perfekt – auch Divi nicht. Einige Nachteile sind jedoch nicht nur auf Divi beschränkt, sondern betreffen grundsätzlich alle WordPress-Page-Builder. Wie stark diese Punkte für dich ins Gewicht fallen, hängt von deinen eigenen Anforderungen und deinem technischen Verständnis ab.
- Webdesign mit Divi: Warum ein Basiswissen erforderlich ist
Divi wird oft als Drag-and-Drop-Editor bezeichnet – was grundsätzlich auch stimmt. Trotzdem halte ich den Begriff im Zusammenhang mit WordPress-Page-Buildern für etwas irreführend, da er suggeriert, dass man die Elemente beliebig auf der Seite verschieben kann, wie bei einer Collage.
Ja, mit Divi kannst du die Gestaltung deiner Website nach deinen Wünschen umsetzen und Elemente frei platzieren. Trotzdem brauchst du ein grundlegendes Verständnis dafür, wie Websites aufgebaut sind und welche Parameter das gewünschte Ergebnis beeinflussen.
Du solltest dich mit Sektionen, Zeilen und Spalten vertraut machen und verstehen, wie Padding (Innenabstand) und Margin (Außenabstand) funktionieren. Wenn du dieses Basiswissen hast, wird dir Divi viel Freude bereiten – versprochen!
Zum Glück gibt es zwei einfache Lösungen:
Wireframe-Ansicht: Diese Ansicht zeigt dir deine Seite in einer schematischen Darstellung, bei der sich keine Elemente überlappen. Hier bekommst du auch bei komplexeren Seiten einen guten Überblick. Praktisch: Du kannst die Namen von Sektionen, Zeilen und Modulen einfach umbenennen, um den Aufbau besser zu organisieren.
Layer-Ansicht: Alternativ kannst du ein kleines Fenster öffnen, das eine Layer- bzw. Schicht-Ansicht deiner Seite zeigt. Hier siehst du alle Elemente als Liste, was dir eine bessere Kontrolle über die einzelnen Module gibt.
Tipp:
Du kannst die Einstellungen im Wireframe-Modus öffnen und dann in die Desktop-Ansicht zurückwechseln. So bleibt das Einstellungsfenster geöffnet, während du die Seite weiter bearbeitest.
3. Manchmal Bugs nach Updates
Die gute Nachricht zuerst: Divi erhält regelmäßig Updates und wird kontinuierlich weiterentwickelt. Das sorgt dafür, dass das Theme immer auf dem neuesten Stand bleibt. Allerdings bringen Updates, wie bei jeder Software, manchmal Fehler-Potential mit sich. Es kann also vorkommen, dass nach einem Update Bugs auftreten oder bestimmte Funktionen nicht wie erwartet arbeiten.
Aber keine Sorge – der Divi-Support lässt dich nicht im Stich. In der Regel erhältst du innerhalb weniger Stunden eine Antwort, und die Support-Mitarbeiter sind sehr bemüht, das Problem schnell zu lösen.
Falls doch einmal ein größeres Problem auftritt, bietet Divi eine praktische Lösung: Im Divi-Dashboard kannst du mit einem Klick ein Rollback auf die vorherige Version durchführen. Auch wenn ich das selbst noch nie gebraucht habe, ist es gut zu wissen, dass diese Option für den Notfall bereitsteht.
Ein grundsätzlicher Tipp: Erstelle vor jedem Update ein Backup deiner WordPress-Website. So kannst du im schlimmsten Fall problemlos zurück zur vorherigen Version, falls ein Update größere Probleme verursacht.
4. Der Lock-In-Effekt: Was du wissen solltest, bevor du dich für Divi entscheidest
Ein genereller Nachteil von WordPress-Page-Buildern wie dem Divi Theme ist der sogenannte Lock-In-Effekt. Das bedeutet, dass alle Inhalte, die du mit dem Divi Builder erstellst, auch nur in Kombination mit dem Divi-Theme richtig funktionieren. Solltest du dich irgendwann entscheiden, Divi nicht mehr zu verwenden, müsstest du deine Seiten komplett neu aufbauen.
Ein häufiges Argument gegen solche Tools sind die laufenden Kosten, aber das ist bei Elegant Themes kein Problem. Dank der günstigen Lifetime-Lizenz musst du dir keine Sorgen um Preiserhöhungen oder wiederkehrende Zahlungen machen – das sieht bei Elementor Pro ganz anders aus. Hier zahlst du jährlich, um Updates und Support zu erhalten, während du bei Divi nach einmaliger Zahlung lebenslang abgesichert bist.
Divi Performance: Ist der Page-Builder wirklich langsam?
Es wird oft behauptet, dass Page-Builder wie Divi den Quellcode aufblähen und Websites dadurch langsamer machen. Auch Divi hatte lange mit diesem Problem zu kämpfen, da viele Funktionen viel Code mit sich bringen – was die Ladezeit im Vergleich zu leichteren Themes beeinträchtigen kann.
Doch 2021 hat Divi ein umfangreiches Performance-Update herausgebracht, um genau dieses Problem zu lösen – und es hat sich gelohnt:
Out of the box erreicht meine Divi-Website nun fast 100 Punkte im Page-Speed-Score – und das ohne Caching- oder Performance-Plugins. Natürlich gibt es immer einige Grundregeln, die du beachten solltest, um eine schnelle Website zu gewährleisten.
Dazu gehören etwa das Zuschneiden und Komprimieren von Bildern. Eine Portfolio-Website mit hunderten hochauflösenden Bildern erfordert zudem mehr Optimierung als eine kleine textbasierte Seite.
Die Divi Theme Optionen bieten jetzt viele Möglichkeiten zur Performance-Optimierung, ohne dass du zusätzliche Plugins installieren musst. Außerdem lädt das Divi Theme seit dem Update nur noch den Code, der tatsächlich auf den Seiten verwendet wird.
Insgesamt hat Elegant Themes mit diesem Geschwindigkeits-Update viel richtig gemacht und sich damit klar von der Konkurrenz abgehoben.
Für wen eignet sich Divi? Diese Zielgruppen profitieren am meisten
Divi ist unglaublich vielseitig und eignet sich für viele unterschiedliche Anwendungsfälle und Website-Typen. Egal, ob du eine professionelle Website selbst erstellen möchtest oder als Webdesigner täglich mit Divi arbeitest: Divi kombiniert intuitive Bedienung mit leistungsstarken Funktionen. Dadurch ist es sowohl für Selbständige als auch für Agenturen eine attraktive Wahl.
Für mich als freiberufliche Webdesignerin ist zum Beispiel die Cloud-Bibliothek ein großer Vorteil. Hier kann ich Layouts und Code-Schnipsel speichern und bei allen Projekten wiederverwenden – das spart enorm viel Zeit.
Die Arten von Websites, die du mit Divi erstellen kannst, sind fast unbegrenzt. Beispiele dafür sind:
- Restaurant-Websites
- Arzt-Websites
- Anwalts-Websites
- Unternehmenswebsites
- Onlineshops
- Künstler- und Portfolio-Websites
- Websites für Freiberufler (wie meine)
- Blogs
Deiner Fantasie sind nahezu keine Grenzen gesetzt. Trotzdem würde ich Divi nicht uneingeschränkt für jedes Website-Projekt empfehlen.
Divi oder nicht? Wann du besser auf eine andere Lösung setzen solltest
Man könnte denken, dass das Divi Theme von Elegant Themes eine echte eierlegende Wollmilchsau ist – und in vielen Fällen ist es das auch. Trotzdem gibt es Projekte, bei denen der Einsatz von Divi nicht sinnvoll wäre:
Zum einen gilt das für Websites mit sehr spezifischen Anforderungen. Ich habe beispielsweise einmal einen Onlineshop erstellt, der sich während des Projekts als weitaus umfangreicher herausstellte, als ursprünglich geplant – mit mehreren tausend Artikeln und hunderten Kategorien. Obwohl dies mit Divi und WooCommerce machbar war, würde ich für solche großen E-Commerce-Projekte eher eine andere Lösung empfehlen.
Auch bei sehr komplexen Multi-Site-Projekten, die eine maßgeschneiderte Lösung erfordern, stößt Divi an seine Grenzen. In solchen Fällen ist oft eine individuelle Programmierung sinnvoller, anstatt auf WordPress und kommerzielle Tools zurückzugreifen.
FAQ: Die wichtigsten Fragen und Antworten rund um den WordPress-Page-Builder
Kann ich Divi mit einem bereits bestehenden WordPress-Theme verwenden?
Ja, du kannst Divi auch in eine bestehende WordPress-Website integrieren, ohne dein Theme wechseln zu müssen.
Dafür lädst du im Membership-Bereich von Elegant Themes das Divi Builder Plugin herunter und installierst es auf deiner Website (über Plugins > Neues Plugin hinzufügen > Plugin hochladen).
Damit kannst du alle Inhalte mit dem Divi Builder bearbeiten, behältst aber dein bestehendes Theme oder wechselst auf ein anderes.
Ist Divi SEO-freundlich und wie optimiere ich eine Divi-Website für Suchmaschinen?
Divi bietet dir viele Funktionen, die dir die Suchmaschinenoptimierung (SEO) erleichtern. Dazu gehören die Unterstützung von H-Tags, sauberer HTML-Code und optimierte Ladezeiten.
Allerdings hängt deine Google-Sichtbarkeit von mehr ab als nur vom Theme. Es kommt darauf an, wie gut du SEO allgemein umsetzt und wie du deine Website optimierst, z.B. durch Keywords, Backlinks und Meta-Daten.
Wie installiere ich Divi auf meiner WordPress-Website?
Divi wird als Theme installiert. In deinem Account bei Elegant Themes kannst du das Divi-Theme als ZIP-Datei herunterladen.
Gehe dann in deinem WordPress-Backend zu Design > Themes > Neues Theme hinzufügen > Theme hochladen.
Ziehe die ZIP-Datei per Drag and Drop in das Upload-Feld oder wähle sie manuell aus deinen Dateien aus. Klicke auf Jetzt installieren und aktiviere das Divi Theme – fertig!
0 Kommentare