Divi vs. Elementor vs. Gutenberg: Welcher Page-Builder passt?

Von Manuel Hack, ihp media · Aktualisiert am 21. Juni 2026

WordPress ist das meistgenutzte Content-Management-System der Welt, aber die Frage, wie man darin Seiten baut, hat keine einheitliche Antwort. Drei Wege dominieren den Markt: der eingebaute Gutenberg-Block-Editor, Elementor als führendes Drittanbieter-Plugin und Divi als beliebter Agentur-Builder. Sie unterscheiden sich fundamental darin, wie sie Inhalte im System ablegen, was das für Performance und Portabilität bedeutet und was sie langfristig kosten. Dieser Vergleich hilft Ihnen zu entscheiden, welcher Weg zu Ihrem Projekt, Ihrer Erfahrung und Ihrem Budget passt.

Was Page-Builder sind und warum die Wahl zählt

WordPress speichert Seiteninhalte in einer Datenbank. Die entscheidende Frage ist, in welchem Format. Ein Page-Builder ist ein Werkzeug, das den Bearbeitungsvorgang visuell macht, also Sie sehen die Seite so, wie Besucher sie sehen werden, während Sie sie aufbauen. Was harmlos klingt, hat weitreichende Folgen für Portabilität, Performance und Kosten: Was der Builder in der Datenbank ablegt, bestimmt, wie portabel die Seite ist, wie schnell sie lädt und wie stark Sie an diesen Anbieter gebunden sind.

Bis WordPress 4.9 gab es dafür nur den Classic Editor, einen einfachen Texteditor ohne visuelle Vorschau. Drittanbieter wie Elementor und Divi füllten diese Lücke und wurden dadurch groß. Mit WordPress 5.0 im Dezember 2018 führte das WordPress-Kernteam den Block-Editor ein, den sogenannten Gutenberg-Editor. Seitdem ist er der Standard in jeder frischen WordPress-Installation.

Gutenberg: der eingebaute Block-Editor

Gutenberg ist seit WordPress 5.0 (Dezember 2018) der Standard-Editor jeder WordPress-Installation. Er ist kostenlos, gehört zum WordPress-Kern, benötigt kein zusätzliches Plugin und wird gemeinsam mit WordPress aktualisiert. Das macht ihn zum technisch am wenigsten riskanten Ausgangspunkt.

Das Prinzip: Jeder Inhalt ist ein Block. Ein Absatz ist ein Block, ein Bild ist ein Block, eine Schaltfläche ist ein Block. Blöcke lassen sich stapeln, verschieben, gruppieren und einzeln gestalten. Seit WordPress 5.9 (Januar 2022) gibt es den Site Editor (Full Site Editing), der auch Kopfzeile, Fußzeile und globale Layouts über denselben Block-Editor steuerbar macht.

Was Gutenberg gut kann:

• Sauberes, semantisches HTML ohne proprietäres Markup
• Kein JavaScript-Overhead durch ein zusätzliches Plugin auf der Frontend-Seite
• Vollständige Portabilität: Inhalte bleiben nach Deaktivierung des Block-Editors erhalten
• Wächst kontinuierlich mit dem WordPress-Kern mit
• Nullkosten für Lizenz

Wo Gutenberg an Grenzen stößt: Die visuelle Gestaltungstiefe ist geringer als bei Elementor oder Divi. Komplexe Layouts wie mehrspaltige Landingpages mit pixelgenauem Spacing, animierten Abschnitten und bedingter Sichtbarkeit lassen sich im Block-Editor schwieriger umsetzen. Es gibt zwar Block-Plugins (Kadence Blocks, GenerateBlocks, Spectra), die das erweitern, aber dann wächst das System wieder in Richtung Drittanbieter-Abhängigkeit. Für Laien ohne technischen Hintergrund ist die Lernkurve steiler als bei Elementor, weil viele Gestaltungsoptionen in der Seitenleiste versteckt sind statt direkt sichtbar im Canvas.

Elementor: der Marktführer unter den Drittanbieter-Buildern

Elementor ist das meistinstallierte Page-Builder-Plugin für WordPress. Es gibt eine kostenlose Version mit grundlegenden Elementen und mehrere kostenpflichtige Pläne. Der Essential-Plan für eine Website kostet ab 59 US-Dollar im Jahr, ein Expert-Plan für 25 Websites ab 199 US-Dollar jährlich. Elementor bietet außerdem einen All-in-One-Plan mit zusätzlichen Funktionen, dessen aktueller Preis auf der Preisseite steht, der neben dem Editor auch KI-Funktionen, Bildoptimierung und ein Cookie-Tool enthält. Alle aktuellen Preise finden sich auf der offiziellen Elementor-Preisseite.

Elementors Stärke liegt in der Bedienbarkeit: Der visuelle Drag-and-drop-Editor zeigt jede Änderung sofort im Kontext. Abstände, Farben, Schriftgrößen lassen sich direkt am Element einstellen, ohne in Seitenleisten zu suchen. Das macht Elementor zur bevorzugten Wahl unter Einsteigern und Personen, die ohne Entwicklerhintergrund ansprechende Seiten bauen wollen. Dazu kommt eine riesige Gemeinschaft mit Templates, Tutorials und Drittanbieter-Addons.

Die Kehrseite: Elementor lädt auf dem Frontend eigenes JavaScript und CSS, das jede Seite mit sich führt. Mehr dazu im Performance-Abschnitt. Und wer Elementor aus einer Website entfernt, findet unlesbares, proprietäres Shortcode-artiges Markup in der Datenbank, das manuell bereinigt werden muss. Die Abhängigkeit ist real.

Divi 5: der Builder für Agenturen

Divi von Elegant Themes gibt es als Jahresabo für 89 US-Dollar oder als Lifetime-Lizenz für 249 US-Dollar. Beide Varianten erlauben die Nutzung auf unbegrenzten Websites, was sie für Agenturen attraktiv macht: Eine Lizenz reicht für das gesamte Kundenportfolio.

Divi hatte historisch ein Problem, das heute offen benannt werden muss: Ältere Divi-Versionen (3.x, 4.x) basierten auf Shortcodes. Beim Deaktivieren von Divi blieb ein Wust aus eckigen Klammern in der Datenbank zurück, der die Inhalte unlesbar machte. Zudem war das generierte HTML-Markup vergleichsweise aufgebläht, was Performance-Messungen belastete.

Divi 5 ändert das grundlegend. Die neue Version ist Block-basiert, nutzt die WordPress-Block-Architektur als Fundament und speichert Inhalte als standardkonformes Block-Markup, nicht mehr als Shortcodes. Das Rendering-Modell wurde neu aufgebaut: Divi 5 generiert weniger verschachteltes HTML und lädt Frontend-Assets selektiv. Wir sehen in unseren Projekten, dass Divi 5 in Lighthouse-Messungen merklich besser abschneidet als Divi 4 auf vergleichbarer Hardware.

Divi bietet außerdem einen visuellen Frontend-Editor, globale Design-Tokens für Farben und Schriften, ein Theme-Framework und ein Modul-System mit über 200 vorgefertigten Elementen. Für Agenturen, die viele Sites mit einheitlichem Look aufbauen, lohnt sich das Einarbeiten.

Wo Divi hinter Elementor zurückbleibt: Die Elementor-Gemeinschaft ist deutlich größer, es gibt mehr fertige Templates und mehr Anleitungen im Netz. Elementors Free-Tier erlaubt erste Versuche ohne Kostenrisiko, Divi setzt eine Kaufentscheidung voraus. Und die Lernkurve von Divi 5 ist steiler als bei Elementor, weil das System mächtiger und entsprechend komplexer ist.

Vergleichstabelle: Gutenberg vs. Elementor vs. Divi

Lock-in: Was beim Wechsel des Builders wirklich passiert

Stellen Sie sich vor, Sie möchten nach drei Jahren von Elementor zu Gutenberg wechseln. Was passiert? In der WordPress-Datenbank liegen Ihre Seiteninhalte als Elementor-spezifisches Markup, das aus einer Kombination aus proprietären Datenstrukturen und HTML-Fragmenten besteht. Deaktivieren Sie Elementor, sehen Besucher rohen, unformatierten Text. Die Gestaltung existiert nur im Kontext des Plugins.

Ein vollständiger Wechsel bedeutet daher: Jeden Inhalt manuell neu aufbauen oder teure Migrations-Plugins einsetzen, die nie 100 Prozent der Inhalte sauber übertragen. In der Praxis heißt ein Builder-Wechsel fast immer ein Neuaufbau der Website.

Gutenberg speichert Inhalte als HTML-Kommentar-annotiertes Markup, das auch ohne Gutenberg lesbar bleibt. Das ist kein Zufall: Das WordPress-Kernteam hat das explizit als Designziel gesetzt. Wenn Sie Gutenberg-Blöcke in einem Texteditor öffnen, können Sie die Inhalte lesen und notfalls von Hand bereinigen.

Divi 5 hat hier aufgeholt: Weil die neue Version auf dem WordPress-Block-Format aufbaut, ist das gespeicherte Markup standardkonformer als in den Shortcode-Versionen. Ein Wechsel von Divi 5 zu Gutenberg ist aufwendig, aber nicht so destruktiv wie früher mit Divi 4.

Performance: Warum der Builder die Ladezeit mitbestimmt

Seiten, die schnell laden, ranken besser und konvertieren besser. Das ist kein Geheimnis, und Page-Builder haben hier unterschiedliche Ausgangspositionen. Das Hosting spielt dabei eine mindestens ebenso große Rolle wie der Builder selbst, wie unser WordPress-Hosting-Vergleich zeigt.

Gutenberg fügt auf dem Frontend kein zusätzliches JavaScript oder CSS hinzu. Was lädt, sind die Blöcke selbst und das Theme. Das macht Gutenberg-Seiten in der Ausgangslage performanter als Seiten mit installiertem Page-Builder-Plugin.

Elementor lädt auf jeder Seite ein JavaScript-Bundle und CSS-Dateien, unabhängig davon, welche Elemente auf der jeweiligen Seite aktiv sind. Das erhöht den Umfang der zu übertragenden Daten und belastet den Haupt-Thread des Browsers, was sich auf Metriken wie den Interaction to Next Paint (INP) auswirkt, dem aktuellen Core-Web-Vitals-Maß für Reaktionsfähigkeit. Mit aktivem Caching und einem performanten Hosting lässt sich das kompensieren, aber es ist ein struktureller Nachteil.

Divi 4 hatte denselben Ruf wie Elementor, oft noch verstärkt durch die Shortcode-Architektur, die viele verschachtelte HTML-Wrapper generierte. Divi 5 adressiert das: Die Block-Architektur erzeugt deutlich weniger DOM-Verschachtelung, und Frontend-Ressourcen werden selektiver geladen. Genauere Benchmarks hängen immer vom konkreten Projekt, dem Hosting und dem Caching ab. Pauschale Zahlen ohne diese Variablen wären nicht belastbar.

Was wir in unseren Projekten beobachten: Divi-5-Seiten auf gemanagtem Hosting mit aktivem Caching erreichen Lighthouse-Performance-Scores, die sich in einem ähnlichen Bereich wie Elementor-Seiten mit gleichem Setup bewegen. Der Unterschied zwischen einem gut konfigurierten Divi-5-Projekt und einem schlecht konfigurierten Gutenberg-Projekt kann größer sein als der Unterschied zwischen den Buildern selbst. Performance ist ein Systemthema, nicht nur eine Builder-Frage. Wie man die wichtigsten Hebel zieht, zeigt unser Ratgeber zum sinnvollen Einsatz von Hosting und Pflege.

Profi-Block: Block-Markup, Theme-Architektur und Zukunftspfad

Dieser Abschnitt richtet sich an Entwicklerinnen und Entwickler sowie technisch versierte Entscheider. Wer eine schnelle Empfehlung sucht, kann direkt zur Entscheidungs-Checkliste springen.

Block-Markup-Format. Gutenberg speichert Inhalte als HTML mit eingebetteten JSON-Metadaten in Block-Kommentaren. Das Format ist offen dokumentiert und unabhängig vom Theme oder Plugin-Ökosystem interpretierbar. Elementor speichert Inhalte in einem eigenen Post-Meta-Feld als serialisierte Datenstruktur; ohne Elementor ist dieser Content nicht darstellbar. Divi 5 orientiert sich am WordPress-Block-Format, fügt aber eigene Divi-Block-Typen hinzu, die Divi als Plugin zum Rendern benötigen.

Theme-Architektur. Gutenberg arbeitet am besten mit Block-Themes zusammen, also Themes, die per theme.json Stile definieren und selbst aus Blöcken bestehen. Klassische PHP-Themes (functions.php, template-parts) funktionieren weiterhin, können aber die neueren Block-Editor-Funktionen nicht vollständig nutzen. Elementor und Divi bringen eigene Theme-Schichten mit, die unabhängig vom installierten Theme funktionieren. Das ist für schnellen Einstieg praktisch, macht aber das Zusammenspiel mit dem Theme komplexer.

Zukunftspfad. Das WordPress-Kernteam investiert kontinuierlich in den Block-Editor und den Site Editor. Features wie Interactivity API und Server-Side Rendering über Block-Markup werden im Kern entwickelt, Drittanbieter-Builder müssen nachziehen oder eigene Parallellösungen bauen. Wer langfristig auf die WordPress-Roadmap setzen will, setzt auf Gutenberg. Elementor und Divi werden diese Features aufgreifen, aber der Gutenberg-Pfad ist der direkteste.

Für wen Gutenberg mit Block-Themes der richtige Weg ist: Entwicklungsteams, die sauberes, wartbares Markup priorisieren, die auf die WordPress-Roadmap setzen und die komplexe Layouts per Code statt per Drag-and-drop lösen. Für professionell gebaute WordPress-Seiten ohne starkes Agentur-Design-System ist Gutenberg heute eine vollwertige Alternative.

Aus der Praxis: Zwei Projekte, zwei Entscheidungen

Wer noch unsicher ist, ob WordPress überhaupt das richtige System für sein Projekt ist, findet eine ehrliche Einordnung im Vergleich WordPress vs. Baukastensystem. Für alle, die sich entschieden haben und einen Überblick über realistische Investitionen suchen, liefert unser Ratgeber zu den Kosten einer professionellen Website belastbare Orientierung.

In einem Projekt für ein mittelständisches Dienstleistungsunternehmen bauten wir die Website mit Gutenberg und einem schlanken Block-Theme. Das Ergebnis: sauberes HTML, keine Drittanbieter-Abhängigkeit außer dem Theme, und die Geschäftsführung konnte Texte und Bilder selbst bearbeiten, ohne den Builder zu kennen. Die Seiten luden schnell, weil kein zusätzliches Builder-JavaScript auf dem Frontend aktiv war.

In einem zweiten Projekt für eine Unternehmensberatung mit komplexen Animationen, mehrstufigen Landingpages und einem starken Designsystem entschieden wir uns für Divi 5. Der Kunde wollte eine visuell aufwendige Seite mit eigener Bearbeitungsmöglichkeit für Teaser und Content-Abschnitte. Gutenberg wäre für diesen Anforderungsrahmen technisch möglich, aber aufwendiger in der Umsetzung und teurer im Zeitaufwand. Divi 5 lieferte hier das bessere Preis-Leistungs-Verhältnis für den Aufbau. Für Inhaltspflege nach dem Launch schulten wir das Team auf die Divi-spezifischen Module ein.

Elementor wäre in beiden Projekten eine Option gewesen, schied aber aus einem praktischen Grund aus: Die Lizenzkosten bei mehreren Projekten im Jahr summieren sich schneller als bei Divi, wo eine Lifetime-Lizenz alle Sites abdeckt. Für Einzelpersonen mit einer oder zwei Websites ist das weniger relevant.

Entscheidungs-Checkliste

Beantworten Sie diese Fragen, um die richtige Wahl für Ihr Projekt zu treffen.

• Baue ich eine einfache Unternehmensseite oder ein kleines Blog ohne komplexe Layouts? Gutenberg reicht aus.
• Möchte ich die Seite selbst visuell bearbeiten, ohne Coding-Erfahrung, und der Designanspruch ist moderat? Elementor hat die sanfteste Lernkurve.
• Plane ich eine designintensive Seite und werde sie durch eine Agentur bauen lassen? Divi 5 lohnt sich, besonders wenn die Agentur bereits damit arbeitet.
• Will ich langfristig keine Abhängigkeit von Drittanbieter-Plugins und maximale Portabilität? Gutenberg ist die sicherste Wahl.
• Verwalte ich mehrere Websites und will einen Builder für alle? Divi mit Lifetime-Lizenz ist wirtschaftlicher als Elementor pro Website.
• Ist Performance ein zentrales Projektziel und kein Caching-Stack vorhanden? Gutenberg hat strukturelle Vorteile.
• Suche ich das größte Tutorial- und Template-Ökosystem? Elementor hat die aktivste Drittanbieter-Community.
• Habe ich Divi 4 im Einsatz und überlege einen Wechsel? Divi 5 ist der empfohlene Pfad vor einem Builder-Wechsel.

Häufige Fragen

Ist Gutenberg wirklich kostenlos?

Ja. Gutenberg ist Teil des WordPress-Kerns und kostet keine Lizenzgebühren. Es gibt kostenpflichtige Block-Plugins wie Kadence Blocks Pro oder GenerateBlocks Pro, die den Funktionsumfang erweitern, aber der Kern-Editor selbst ist und bleibt kostenlos.

Kann ich Elementor durch Gutenberg ersetzen, ohne die Seite neu zu bauen?

In der Regel nicht. Elementor speichert Inhalte in einem proprietären Format. Nach der Deaktivierung des Plugins sind diese Inhalte nicht darstellbar. Ein echter Wechsel bedeutet in fast allen Fällen einen Neuaufbau der betroffenen Seiten.

Hat Divi 5 wirklich den Shortcode-Ballast abgelegt?

Ja. Divi 5 basiert auf der WordPress-Block-Architektur und speichert keine Shortcodes mehr. Bestehende Divi-4-Seiten können migriert werden, sind aber nicht automatisch im neuen Format, solange sie nicht aktiv konvertiert werden. Für neue Projekte empfiehlt Elegant Themes, direkt mit Divi 5 zu beginnen.

Welcher Builder ist am performantesten?

Gutenberg hat strukturelle Vorteile, weil kein Plugin-JavaScript auf dem Frontend lädt. Divi 5 hat gegenüber Divi 4 deutlich aufgeholt. Elementor kann durch gutes Caching und performantes Hosting kompensiert werden, bleibt aber im unoptimierten Vergleich hinter Gutenberg. Reale Performance hängt immer von Hosting, Caching, Theme und Inhalten ab. Pauschale Benchmark-Zahlen ohne diesen Kontext sind nicht belastbar.

Für wen lohnt sich die Divi-Lifetime-Lizenz?

Für Agenturen und Freelancer, die regelmäßig neue Websites bauen. Die Lifetime-Lizenz von 249 US-Dollar für unbegrenzte Websites amortisiert sich gegenüber Elementors Pro-Plänen bereits nach wenigen Projekten.

Kann ich Gutenberg für eine komplexe Unternehmenswebsite nutzen?

Ja, mit dem richtigen Block-Theme und gegebenenfalls einem Block-Erweiterungs-Plugin wie Kadence Blocks. Für Projekte, die hauptsächlich Entwickler umsetzen und bei denen Laien-Selbstbearbeitung keine zentrale Anforderung ist, ist Gutenberg eine vollwertige Wahl. Für designintensive Projekte mit umfangreichem visuellen Anpassungsbedarf ist der Aufwand höher als mit Divi oder Elementor.

Welcher Builder nutzt ihp media für Kundenprojekte?

Wir bauen primär mit Divi 5. Das hat einen pragmatischen Grund: Eine Lifetime-Lizenz deckt alle unsere Projekte ab, das Team kennt das System und die Block-Architektur von Divi 5 entspricht unseren Qualitätsanforderungen. Für Projekte, bei denen schlankes Markup und maximale Portabilität Priorität haben, setzen wir auf Gutenberg mit einem Block-Theme. Elementor nutzen wir nicht aktiv, erkennen aber seine Stärken für bestimmte Zielgruppen an. Wenn Sie eine neue Website planen, finden Sie auf unserer Leistungsseite für Websites und Onlineshops einen Überblick unserer Leistungen und Vorgehensweise.