Kaum eine WordPress-Frage spaltet die Nutzer so sehr wie die nach Gutenberg und Elementor. Für die einen ist Elementor das Werkzeug, mit dem sie ohne eine Zeile Code super einfach eine professionelle Seite bauen können. Für die anderen ist ein weiteres Plugin überflüssiger Ballast, seit WordPress einen eigenen Block-Editor mitbringt.
Das Spannende an der Thematik ist aktuell der Umbruch beider Systeme. Elementor hat mit dem V4 Builder, den Atomic Elements und der MCP-Schnittstelle ein komplett neues Fundament geschaffen. Gutenberg dagegen ist nach fast acht Jahren Entwicklung immer noch eine Baustelle – bekommt aber mit jedem Release neue Features und Funktionen, vom Site Editor bis zur Team-Kollaboration.
Ein neuer Vergleich bringt daher Klarheit, was die beiden Tools heute ausmacht: von Bedienung und Full Site Editing über Performance und SEO bis hin zu Kosten und Zukunftsaussichten.
- Elementor ist das stärkere Werkzeug für Gestaltung: visueller Editor, Theme Builder, Pop-ups, Formulare und WooCommerce-Builder – die wichtigsten Funktionen gibt es aber nur mit Pro-Lizenz (ab ca. 60 € pro Jahr).
- Gutenberg ist das stärkere Werkzeug für Inhalte: kostenlos im WordPress Core, schlanker Code, gute Performance und keine Bindung an ein Plugin. Für aufwendige Layouts brauchst du aber Block-Plugins oder ein Block-Theme mit Site Editor.
- Beide stecken 2026 im Umbau: Elementor mit V4 und den Atomic Elements, Gutenberg in Phase 3 (Kollaboration).
- Unser Tipp: Viele Webseiten fahren am besten mit beidem – Blogbeiträge mit Gutenberg, Startseite und Landingpages mit Elementor.
Inhaltsverzeichnis
1. Gutenberg und Elementor erklärt
Bevor wir die beiden Systeme vergleichen, schauen wir uns Elementor und Gutenberg erst einmal im Detail an. Denn auch wenn sie beide Seiten für WordPress bauen, verfolgen sie völlig unterschiedliche Ansätze.
Was ist Gutenberg?
Gutenberg ist der WordPress-interne Block-Editor, der seit WordPress 5.0 (Dezember 2018) direkt im Core als Standard-Editor verankert ist. Du baust deine Inhalte aus einzelnen Blöcken auf, die du über den Block-Inserter oder per „/“-Befehl einfügst und per Drag and Drop verschiebst. Mit einem Block-Theme und dem Site Editor (früher „Full Site Editing“) gestaltest du darüber auch Header, Footer und Templates.
Gutenberg befindet sich allerdings noch in der Entwicklung und ist längst nicht fertig – genau das ist auch der Grund, warum er bis heute von vielen Nutzern kritisch gesehen wird: Entweder du magst Gutenberg, oder du magst ihn nicht. Aktuell steckt der Gutenberg-Editor in Entwicklungsphase 3 von 4, der Kollaborationsphase.
Die Entwicklung von Gutenberg wird hauptsächlich über die WordPress Major-Releases vorangetrieben. Mit dem WordPress 7.0 Update sollte ursprünglich auch die gemeinsame Bearbeitung von Webseiten als Team gelauncht werden. Kurz vor dem Release wurde dieser Plan jedoch verworfen.
Aktuelle Entwicklungen, Hintergründe und alles Wissenswerte zu Gutenberg kannst du in diesen Artikeln nachlesen:
Für dich als Nutzer bedeutet das:
- Funktionen kommen nach und nach hinzu: Vieles, was andere Page-Builder seit Jahren können, kommt erst noch oder wurde erst kürzlich integriert.
- Bedienung und Workflows können sich verändern: Mit neuen Funktionen ändern sich auch Werkzeugleisten und Bearbeitungsoberflächen.
Das eigentlich Tolle an Gutenberg ist aber: Er wird mit jedem Release besser und bringt neue Funktionen kostenlos direkt in den Core.
Gutenberg steckt in jeder WordPress-Installation – und WordPress ist das meistgenutzte CMS der Welt:
- 43 % aller Webseiten weltweit laufen mit WordPress
- Unter den CMS-basierten Webseiten liegt der Anteil bei 60,9 %
- Seit WordPress 5.0 (Dezember 2018) ist Gutenberg der Standard-Editor
- Gutenberg entwickelt sich rasant weiter: Allein in WordPress 7.0 sind die Gutenberg-Versionen 22.0 bis 22.6 in den Core eingeflossen.
Quellen: w3techs.com | multidots.com
Was ist Elementor?
Elementor ist einer der beliebtesten und bekanntesten Page-Builder für WordPress. Als Drag and Drop Builder ziehst du Inhaltsblöcke direkt auf die Seite und siehst sofort, wie das Ergebnis aussieht. Die Basisversion ist kostenlos, Elementor Pro schaltet unter anderem den Theme Builder, Pop-ups und WooCommerce-Widgets frei. Wie verbreitet das Tool ist, zeigt eine Zahl: Laut Elementor wurden mit dem Builder in den letzten zehn Jahren mehr als 21 Millionen Webseiten erstellt.
2026 ist bisher für Elementor ein echtes Umbruchjahr.
Mit dem V4, dem sogenannten Atomic Editor, setzt Elementor auf eine CSS-first-Architektur mit neuen Blöcken, die über wiederverwendbare Klassen, Variablen und Komponenten funktionieren. Seit April 2026 laufen alle neuen Elementor-Seiten standardmäßig auf Version 4, bestehende Seiten können manuell umsteigen. Dazu kommt die neue MCP-Schnittstelle zu externen KI-Agenten.
‼️ Wichtig:
Die Atomic Elemente von Elementor benötigen etwas Einarbeitungszeit, da sie deutlich komplexer sind. Falls du die Atomic Elements noch nicht verwenden möchtest, lassen sie sich jederzeit in den Einstellungen von Elementor deaktivieren.
Auf kurz oder lang solltest du dich aber mit dem V4 Editor beschäftigen, da Elementor das System irgendwann komplett darauf umstellen wird.
👉🏻 Mehr Infos zu Elementor kannst du hier nachlesen:
Elementor zählt zu den meistgenutzten Page Buildern für WordPress:
- Laut Elementor wurden in den letzten zehn Jahren mehr als 21 Millionen Webseiten mit dem Builder erstellt
- Seit April 2026 laufen alle neuen Elementor-Seiten standardmäßig auf Version 4, bestehende Seiten können manuell umsteigen
- Der Essential-Plan enthält 57 Pro-Widgets, ab Advanced Solo sind es 85
- Version 4.3.0 erschien am 22. September 2026
Quellen: elementor.com | theplusaddons.com
Elementor und Gutenberg in Zahlen
| Kriterium | 🔮 Elementor | 📖 Gutenberg |
|---|---|---|
Art | Page-Builder als externes Plugin | Block-Editor im WordPress Core |
Seit | 2016 | 2018 (WordPress 5.0) |
Verbreitung | Über 21 Mio. erstellte Webseiten | In jeder WordPress-Installation vorhanden |
Kosten | Basisversion kostenlos, Pro ab ca. 60 € pro Jahr | Kostenlos |
Aktueller Entwicklungsstand | Umstieg auf V4 (Atomic Elements) und MCP | Entwicklungsphase 3 von 4 (Kollaboration) |
Zielgruppe von Elementor und Gutenberg
Gutenberg wird wegen seiner fehlenden Reife oft kritisch gesehen. Dabei wird eines gern vergessen: die tatsächliche Zielgruppe. Nativ kann Gutenberg bis heute längst nicht mit etablierten Page-Buildern wie Elementor, Divi oder Beaver Builder mithalten. Das liegt aber vor allem daran, dass er sich an eine ganz andere Art von Nutzern richtet. Schauen wir uns das genauer an.
🔮 Elementor
- Einsteiger und Selbstständige , die ihre Webseite selbst bauen und dabei direkt sehen wollen, wie das Ergebnis aussieht.
- Webdesigner und Agenturen , die viele Kundenprojekte mit individuellem Design umsetzen.
- Unternehmen mit Fokus auf Marketing , die Landingpages, Pop-ups und Formulare selbst erstellen und schnell anpassen.
- Shopbetreiber mit WooCommerce , die Produkt-, Warenkorb- und Checkout-Seiten individuell gestalten wollen.
- Designorientierte Projekte wie Portfolios, Kreativagenturen oder Eventseiten, bei denen Animationen und Effekte zum Konzept gehören.
📖 Gutenberg
- Blogger und Content-Teams , die regelmäßig Beiträge veröffentlichen und schnell schreiben wollen.
- Redaktionen, Magazine und Nachrichtenseiten , bei denen viele Autoren mit einheitlichen Vorlagen arbeiten.
- Kleine Unternehmen mit schlichten Webseiten , die keine aufwendigen Animationen oder Pop-ups brauchen.
- Performance- und SEO-orientierte Projekte , bei denen jede Millisekunde Ladezeit zählt.
- Entwickler und technisch versierte Agenturen , die eigene Blöcke programmieren oder mit Block-Themes und dem Site Editor arbeiten.
⚠️ Dafür sind die beiden Builder weniger gut geeignet:
- Elementor: für sehr textlastige Seiten mit vielen Autoren, für Projekte mit kleinem Budget, die auf Pro-Funktionen angewiesen wären, und für alle, die sich langfristig nicht an ein Plugin binden wollen.
- Gutenberg: für Einsteiger, die ohne Vorkenntnisse eine individuell gestaltete Webseite bauen wollen. Für alles, was über einfache Layouts hinausgeht, brauchst du Block-Plugins und etwas Einarbeitung, und weil der Editor noch im Ausbau ist, musst du regelmäßig nachlernen.
In der Praxis überschneiden sich die Zielgruppen. Viele Unternehmen und Agenturen schreiben ihre Blogbeiträge mit Gutenberg und bauen Startseite, Landingpages und Leistungsseiten mit Elementor.
2. Elementor vs. Gutenberg – der direkte Vergleich
Auf den ersten Blick wirken die beiden Editoren ähnlich – tatsächlich unterscheiden sie sich deutlich. Das zeigen vor allem die letzten Updates. Hier findest du die wichtigsten Unterschiede schon einmal in einer kompakten Übersicht.
| Kriterium | 🔮 Elementor | 📖 Gutenberg |
|---|---|---|
Bedienung | Eigene visuelle Oberfläche mit Live-Vorschau, neue V4 Atomic Elements brauchen Einarbeitung | Block-Editor im Backend, für Beiträge schnell gelernt, Site Editor komplexer, Oberfläche ändert sich regelmäßig |
Design und Funktion | Theme Builder, Pop-ups, Formulare, WooCommerce-Builder u. v. m. je nach Tarif | Core-Blöcke, Patterns, globale Stile, Erweiterung über Block-Plugins |
Performance | Mehr Code und größerer DOM, Optimierung nötig – V4 soll deutlich schlanker werden | Sehr schlank, da im Core integriert; zusätzliche Block-Plugins kosten Ladezeit |
SEO | Gut umsetzbar, erfordert etwas Sorgfalt | Semantisch saubere HTML-Struktur |
Abhängigkeit und Zukunft | Layouts an Elementor gebunden, Umbruch durch V4 | Inhalte bleiben als HTML erhalten, Weiterentwicklung über Core-Releases |
Anhand der Tabelle erkennst du den größten Unterschied direkt: Die beiden verfolgen einen anderen Ansatz. Gutenberg ist wie ein Werkzeugkasten, den du nach Bedarf erweiterst, Elementor eine voll ausgestattete Werkstatt, die gerade modernisiert wird.
Bedienung und Lernkurve
🔮 Elementor
Wie steil die Lernkurve bei Elementor ist, hängt davon ab, welche Version du verwendest. Nutzt du den bestehenden V3-Editor mit seinen „normalen“ Widgets, arbeitest du dich schnell in das System ein. Artikel und Beiträge wie dieser hier sind einfach umzusetzen.
Möchtest du jedoch kreativer werden, ganze Seiten designen und den neuen Atomic V4 Editor verwenden, wird deine Lernkurve deutlich steiler.
Arbeiten mit Atomic Elements V4
Mit den Atomic Elements musst du umdenken, denn der neue Builder arbeitet mit Klassen, Variablen und Komponenten. Es lohnt sich, vorab wiederverwendbare Klassen und Komponenten für deine Anforderungen anzulegen und erst im Anschluss neue Seiten zu bauen. Vor allem langjährige Elementor-Nutzer müssen sich umgewöhnen – dafür bieten die Atomic Elements deutlich mehr Möglichkeiten in Gestaltung und Umsetzung als der V3-Editor.
Auch wenn du mit Elementor arbeitest, ist Gutenberg nicht weg. Gutenberg läuft technisch weiterhin im Hintergrund – du nutzt ihn nur einfach nicht.
📖 Gutenberg
Gutenberg funktioniert im Grunde ähnlich – nur eben direkt im WordPress-Backend: Du fügst Inhaltsblöcke über den Block-Inserter oder den „/“-Befehl ein und verschiebst sie per Drag and Drop. Der Editor zeigt deine Inhalte weitgehend so an, wie sie später auf der Seite erscheinen, für die exakte Darstellung nutzt du die Vorschau. Jeder Block hat eine eigene kleine Werkzeugleiste, weiterführende Einstellungen findest du in der Seitenleiste rechts und die Listenansicht zeigt dir die Struktur deiner Seite. Für Beiträge und kleinere Seiten findest du dich in Gutenberg schnell zurecht.
Komplizierter wird es auch hier erst, wenn du aufwendigere Seiten bauen möchtest – dann brauchst du etwas Einarbeitungszeit.
Je nachdem, ob du ein klassisches Theme oder ein Block-Theme nutzt, gestaltest du Header und Footer an völlig unterschiedlichen Stellen: bei klassischen Themes meist über die Theme-Optionen oder den Customizer, bei Block-Themes im Site Editor.
Als Nächstes soll die Echtzeit-Zusammenarbeit im Team kommen, die den Funktionsumfang und die Werkzeugleiste sicher noch einmal verändern wird. Da Gutenberg noch in der Entwicklung steckt, wird es immer wieder Änderungen an der Oberfläche geben. Das Team dahinter versucht aber, diese so gering wie möglich zu halten.
Arbeiten mehrere Personen an der Webseite, lohnt sich ein Blick auf Rechte und Workflows. In Elementor legst du über den Rollen-Manager fest, welche Nutzerrollen den Editor überhaupt öffnen dürfen – mit Pro kannst du Rollen zusätzlich auf das Bearbeiten von Inhalten beschränken, ohne dass sie das Design verändern. Gutenberg setzt auf Block-Sperren: Du kannst Blöcke und Muster gegen Verschieben oder Löschen sichern, Vorlagen für Beitragstypen vorgeben und mit Notes direkt im Editor Feedback geben. Beide speichern Revisionen, sodass du ältere Versionen jederzeit wiederherstellen kannst.
Design
Elementor ist seit Jahren auf Gestaltung ausgelegt und bietet fast alle Design-Optionen, die du dir wünschen kannst – mit dem neuen V4 Editor und den Atomic Elements sogar noch mehr Freiheit für eigene Designsysteme und individuelle Elemente. Gutenberg holt zwar auf, liegt bei der Designfreiheit aber noch deutlich zurück.
Die eigentliche Frage ist deshalb weniger, welcher Editor mehr kann, sondern was du bauen willst: Für schlichte, gut strukturierte Seiten reicht Gutenberg oft völlig aus. Sobald Pop-ups, Formulare, Animationen oder ein individueller Shop dazukommen, spielt Elementor seine Stärken aus.
| Kategorie | 🔮 Elementor | 📖 Gutenberg |
|---|---|---|
Arbeitsweise | Visueller Editor mit Live-Vorschau | Block-Editor im Backend |
Vorlagen & Muster | Vorlagen und Webseiten-Kits (volle Auswahl mit Pro) | Block-Patterns und Pattern-Verzeichnis |
Globale Farben & Schriften | Globale Farben und Schriften, mit V4 zusätzlich Klassen und Variablen | Über globale Stile (bei Block-Themes) |
Einstellungen pro Gerät | Desktop, Tablet und Smartphone getrennt anpassbar | Nativ nur eingeschränkt, meist über Block-Plugins |
Header, Footer & Templates | Theme Builder mit Anzeigebedingungen (Pro) | Nur mit Block-Theme über den Site Editor |
Pop-ups | Pop-up-Builder mit Auslösern (Pro) | ❌ Nur über Plugins |
Formulare | Formular-Builder (Pro) | ❌ Nur über Plugins |
WooCommerce-Seiten gestalten | WooCommerce Builder (Pro) | Über WooCommerce-Blöcke und Block-Themes |
Animationen & Effekte | Einblende-Animationen, Scroll- und Bewegungseffekte mit Pro | ❌ Nativ kaum vorhanden |
Dynamische Inhalte & Custom Fields | Dynamische Inhalte (Pro) | Erste Ansätze im Core, meist über Plugins |
Eigenes CSS | Custom CSS pro Element (Pro) | Zusätzliches CSS über die Stile |
Wiederverwendbare Elemente | Gespeicherte Vorlagen, globale Widgets und Komponenten (V4) | Synchronisierte Muster |
Erweiterbarkeit | Große Auswahl an Add-ons, z. B. Crocoblock | Block-Plugins wie Kadence Blocks, Spectra oder GenerateBlocks |
Viele Design-Elemente von Elementor gibt es nur ab einem höheren Tarif. Im günstigen Essential-Plan fehlen beispielsweise Pop-ups, Custom CSS, E-Commerce-Funktionen und Custom Fields. Mehr dazu im Abschnitt Kosten.
Full Site Editing: Site Editor vs. Theme Builder
Spätestens bei Header, Footer und Templates trennen sich die Wege. Beide Tools können heute die komplette Webseite gestalten und nicht nur einzelne Inhalte – sie gehen dabei aber völlig unterschiedlich vor.
🔮 Elementor: Theme Builder
Mit Elementor Pro gestaltest du im Theme Builder Header, Footer, Vorlagen für Beiträge und Archive, 404-Seiten und Shop-Templates visuell. Über Anzeigebedingungen legst du fest, wo welche Vorlage greift – etwa ein eigener Header nur für Landingpages. Als Basis empfiehlt Elementor das schlanke Hello Theme, das kaum eigenes Design mitbringt.
📖 Gutenberg: Site Editor und Block-Themes
Bei Gutenberg übernimmt der Site Editor diese Aufgabe – allerdings nur mit einem Block-Theme wie Twenty Twenty-Five. Templates und Template-Teile wie Header und Footer bestehen dort ebenfalls aus Blöcken. Farben, Schriften und Abstände legst du zentral in den globalen Stilen fest, die technisch in der Datei theme.json hinterlegt sind. Viele Block-Themes bringen außerdem Stil-Varianten mit, mit denen du das Aussehen der ganzen Webseite per Klick wechselst.
| Kriterium | 🔮 Elementor Theme Builder | 📖 Gutenberg Site Editor |
|---|---|---|
Voraussetzung | Elementor Pro und ein kompatibles Theme, z. B. Hello | Block-Theme |
Header & Footer | Visuell gestaltet, mit Anzeigebedingungen | Als Template-Teile im Site Editor |
Vorlagen für Beiträge & Archive | Single- und Archiv-Templates mit dynamischen Inhalten | Templates für Beiträge, Seiten, Archive, Suche und 404 |
Globales Design | Globale Farben und Schriften, mit V4 zusätzlich Klassen und Variablen | Globale Stile über theme.json, Stil-Varianten |
Steuerung | Fein über Bedingungen, z. B. nach Kategorie oder Seite | Über die Template-Hierarchie, eigene Templates pro Seite möglich |
Kosten | Ab Pro-Tarif | Kostenlos |
Der Begriff „Full Site Editing“ (FSE) stammt aus der Entwicklungszeit. Inzwischen spricht WordPress meist nur noch vom Site Editor und von Block-Themes. Gemeint ist dasselbe: die Gestaltung der gesamten Webseite mit Blöcken – ganz ohne Page-Builder.
Performance & Core Web Vitals
Bei Betrachtung der Performance zeigen sich deutliche Unterschiede zwischen den beiden Tools: Während Gutenberg von Haus aus schlank und super schnell ist (Core-Integration), besitzt Elementor mehr Flexibilität, aber mit einem höheren Ressourcenverbrauch.
| Performance-Indikator | 🔮 Elementor | 📖 Gutenberg |
|---|---|---|
Code-Struktur | Tiefere DOM-Verschachtelung (mit V4 deutlich flacher) | Schlankes, semantisches HTML |
CSS & JS | Lädt eigene Skripte und Stylesheets, teils seitenweit | Lädt bei Block-Themes nur den Code genutzter Blöcke |
Mobile PageSpeed (Erfahrungswerte) | Ohne Optimierung oft nur mittelmäßig, mit Caching und sauberem Setup gute Werte erreichbar | Out of the box meist gute Werte, solange nur wenige Block-Plugins im Spiel sind |
🔮 Elementor
Elementor bringt eigene Skripte und Stylesheets mit, und jedes Widget steckt in mehreren verschachtelten HTML-Containern. Das Ergebnis ist ein größerer DOM, also mehr Elemente, die der Browser verarbeiten muss.
Genau hier setzt V4 an: Elementor verspricht mit dem neuen Editor eine deutlich schlankere DOM-Struktur, die sich direkt auf die Performance auswirken soll.
Wer alte V3-Widgets mit neuen V4-Elementen auf einer Seite kombiniert, profitiert laut Elementor nicht im gleichen Maß von der schlankeren Struktur wie bei reinen V4-Seiten.
📖 Gutenberg
Da Gutenberg direkt im WordPress Core integriert ist, erzeugt er vergleichsweise schlankes HTML. Bei Block-Themes lädt WordPress außerdem nur den Code der Blöcke, die du auf deiner Seite tatsächlich verwendest.
Aber: Jedes weitere Block-Plugin, das du für mehr Gestaltungsfreiheit installierst, bringt eigenes CSS und JavaScript mit. Gutenberg bleibt also nur so lange schlank und schnell, wie du sparsam mit zusätzlichen Plugins umgehst.
Warum unterscheidet sich die Performance so stark?
- DOM-Verschachtelung: Elementor (V3) umschließt einfache Texte oder Bilder oft mit mehreren
<div>-Containern. Das vergrößert den DOM und verlangsamt das Rendern im Browser. - Asset-Overhead: Elementor bringt eigene Skripte, Stylesheets und Bibliotheken mit, etwa für Slider oder Icons, die nicht jede Seite braucht.
Elementor hat hier in den letzten Versionen kräftig nachgebessert: Über den Element Manager deaktivierst du Widgets, die du nie nutzt, und in den Elementor-Einstellungen findest du Performance-Optionen wie optimiertes Laden von Assets und Inline-Font-Icons. Gutenberg muss das nicht nachrüsten – er lädt bei Block-Themes ohnehin nur die Blöcke, die du verwendest.
SEO
Gutenberg erzeugt semantisch sauberes HTML: Eine Überschrift ist eine Überschrift, ein Absatz ein Absatz. Das macht es Suchmaschinen leicht, deine Inhalte zu verstehen, und über die schlankere Ladezeit zahlt Gutenberg zusätzlich auf die Page Experience ein.
Auch mit Elementor bekommst du saubere, gut rankende Seiten hin – du musst aber etwas sorgfältiger arbeiten, weil dir der Builder mehr Freiheiten lässt.
Grundsätzlich gilt bei SEO, egal mit welchem Editor:
- Schreib für Menschen, nicht für Keywords: Texte, die nur auf Keywords getrimmt sind, lesen sich schlecht und überzeugen weder Leser noch Suchmaschinen.
- Achte auf eine logische H-Struktur: eine H1, darunter H2 und H3 in der richtigen Reihenfolge. Eine chaotische Struktur verwirrt Leser und Suchmaschinen.
- Behalte die Ladezeit im Blick: Die Core Web Vitals fließen in die Bewertung der Page Experience ein.
Zwei Klassiker, die wir bei Elementor-Seiten immer wieder sehen:
- Das Überschriften-Widget wird gern zum reinen Gestalten von Text verwendet – das Ergebnis ist eine wilde Mischung aus H2- und H3-Titeln. Prüf deshalb immer das eingestellte HTML-Tag.
- Blendest du ein Element auf dem Smartphone aus, ist es nur per CSS versteckt, steht aber weiterhin im Quellcode. Baust du Desktop- und Mobil-Version doppelt, lädt auch beides im Hintergrund und du hast doppelten Inhalt auf der Seite.
Für die perfekte SEO-Optimierung empfehlen wir dir ein zusätzliches SEO Plugin wie Yoast SEO oder Rank Math . Sie sind direkt über deinen Page-Builder abrufbar und helfen dir ganz nativ dabei, deine SEO-Maßnahmen zu optimieren.
Barrierefreiheit
Seit Juni 2025 gilt das Barrierefreiheitsstärkungsgesetz (BFSG). Es betrifft vor allem Online-Shops und digitale Dienstleistungen für Verbraucher. Umso wichtiger ist die Frage, wie gut dich dein Editor bei einer barrierefreien Webseite unterstützt.
🔮 Elementor
Elementor gibt dir viele Gestaltungsfreiheiten – und damit auch viele Möglichkeiten, Barrieren einzubauen: fehlende Alt-Texte, schwache Kontraste, Überschriften nur nach Optik oder Animationen, die Nutzer mit reduzierter Bewegung stören. Mit Ally bietet Elementor inzwischen ein eigenes Plugin, das Barrieren aufspürt und beim Beheben hilft. Die Verantwortung für ein barrierefreies Design bleibt aber bei dir.
📖 Gutenberg
Gutenberg erzeugt von Haus aus semantisches HTML, und die Core-Blöcke werden mit Blick auf Barrierefreiheit mitentwickelt. Das ist eine gute Grundlage, aber kein Freifahrtschein: Auch hier entscheiden Kontraste, Alt-Texte, aussagekräftige Linktexte und eine saubere Überschriftenstruktur, ob deine Seite wirklich barrierefrei ist.
👉🏻 Wie du deine Webseite Schritt für Schritt fit machst, liest du in unserem Beitrag WordPress Barrierefreiheit 2026: So machst du deine Website BFSG-fit .
Kosten
🔮 Elementor
Elementor bietet vier verschiedene Tarife zwischen 5 € und 15 € pro Monat an, die jährlich abgerechnet werden. Die Tarife unterscheiden sich in den enthaltenen Funktionen, der Anzahl der Webseiten und der KI-Integration (nur im One-Tarif enthalten).
Wenn du alle zentralen Funktionen (ohne Elementor KI) nutzen möchtest, empfehlen wir dir den Advanced-Solo-Tarif für eine Webseite: 7 € pro Monat, also rund 84 € im Jahr.
Gut zu wissen: Läuft deine Lizenz aus, bleiben deine Seiten online. Du bekommst dann aber keine Updates, keinen Support und keinen Zugriff mehr auf Pro-Vorlagen.
Das Preis-Leistungs-Verhältnis von Elementor ist wirklich top. Du bekommst unheimlich viele Gestaltungsoptionen für weniger als 100 € im Jahr. Mit den Neuerungen und der MCP-Schnittstelle bleibt Elementor ein umfangreiches Tool für gut investiertes Geld.
📖 Gutenberg
Gutenberg ist vollständig kostenlos und automatisch in jeder WordPress-Installation integriert. Solange du mit den Core-Blöcken und einem kostenlosen Block-Theme auskommst, bleibt das auch so.
Brauchst du mehr Gestaltungsmöglichkeiten, kommen aber schnell Kosten dazu: Die Pro-Versionen bekannter Block-Plugins und Block-Themes wie Kadence oder GenerateBlocks werden ebenfalls als Jahreslizenz verkauft. Rechne für einen fairen Vergleich also mit ein, welche Erweiterungen du für dein Projekt wirklich brauchst.
Sicherheit, Wartung & Hosting
Ein Punkt, der in vielen Vergleichen untergeht: Jedes Plugin ist auch Code, der gepflegt werden will. Das gilt für Elementor genauso wie für Block-Plugins.
- Updates: Elementor und Elementor Pro erscheinen in kurzen Abständen. Gerade beim Umstieg auf V4 lohnt es sich, Updates vorab auf einer Staging-Umgebung zu testen. Gutenberg wird mit den WordPress-Updates aktualisiert – zusätzliche Block-Plugins musst du aber ebenfalls pflegen.
- Sicherheit: Die meisten Sicherheitslücken in WordPress stecken nicht im Core, sondern in Plugins – häufig auch in Add-ons für Page-Builder. Je weniger Erweiterungen du einsetzt, desto kleiner ist die Angriffsfläche.
- Server-Ressourcen: Elementor braucht mehr PHP-Arbeitsspeicher und profitiert stark von serverseitigem Caching. Nach Updates oder Designänderungen erzeugt Elementor sein CSS neu – ein sauber konfigurierter Cache ist hier Gold wert.
👉🏻 Mehr dazu: WordPress Sicherheitslücken richtig schließen 2026
Ob Elementor oder Gutenberg: Die Ladezeit deiner Webseite hängt stark vom Hosting ab. Bei HostPress läuft deine WordPress-Seite auf Servern in Deutschland – mit unserer RocketCache®-Technologie, täglichen Backups und einer Staging-Umgebung, in der du Updates gefahrlos testen kannst. Auf Wunsch übernimmt unser Update Service die Pflege für dich.
Wie schnell deine Seite aktuell ist, findest du mit unserem kostenlosen Speedtest heraus.
KI-Funktionen
Auch beim Thema KI gehen beide Systeme eigene Wege.
🔮 Elementor
Elementor setzt voll auf KI: Elementor AI hilft dir direkt im Editor beim Erstellen von Texten, Bildern, Code und Layouts. Mit Angie gibt es einen eigenen KI-Agenten, und über die MCP-Schnittstelle verbindest du externe KI-Tools wie Claude oder Codex mit deiner Webseite. Die integrierten KI-Funktionen sind allerdings an den One-Tarif bzw. zusätzliche KI-Credits gebunden.
👉🏻 Elementor MCP – WordPress mit Claude, Codex & Co. verbinden
📖 Gutenberg
WordPress baut die Grundlagen für KI direkt in den Core ein: Mit der Abilities API können der Core und Plugins ihre Funktionen so beschreiben, dass KI-Agenten sie nutzen können, und ein offizieller MCP-Adapter verbindet WordPress mit externen KI-Tools. Viele konkrete KI-Funktionen im Editor kommen aktuell aber noch über Plugins.
Zukunftsaussicht
Egal mit welchem Tool du bei WordPress arbeitest: Eine gewisse Abhängigkeit lässt sich nie ganz vermeiden. Schauen wir uns deshalb an, wie die Zukunftsperspektiven für beide Editoren aussehen.
🔮 Elementor
Elementor befindet sich in diesem Jahr mitten in einer großen Umstrukturierung. Schon länger haben wir Elementor im Blick und fragen uns, ob sich hier langfristig etwas Eigenständiges abseits von WordPress entwickeln könnte.
Aktuell modernisiert sich Elementor komplett: mit dem eigenen KI-Agenten Angie, dem neuen V4 Editor und der MCP-Schnittstelle für die Anbindung externer KI-Tools wie Claude.
Bestehende V3-Workflows sollen weiter funktionieren und Schritt für Schritt um die neuen Funktionen ergänzt werden. Offen ist bei vielen Nutzern allerdings noch, wie bestehende Seiten am besten umziehen:
Fragen zur Umwandlung von V3-Containern und Designsystemen in V4 tauchten schon während der Beta-Phase in der Elementor-Community auf.
Diese Schwerpunkte zeichnen sich für die Weiterentwicklung von Elementor ab:
- KI und automatisierte Workflows – Elementor AI und Angie sollen direkt im Editor stärker beim Erstellen von Layouts, Designs und Code helfen.
- Performance – Mit V4 und den Atomic Elements baut Elementor veraltete DOM-Hüllen schrittweise ab und setzt auf schlankeres CSS.
- E-Commerce – Ausbau des Loop Builders und der WooCommerce-Funktionen, um Shop-Seiten und Checkout ohne Zusatz-Plugins individuell zu gestalten.
- Barrierefreiheit – bessere ARIA-Unterstützung, Tastaturnavigation und Barrierefreiheits-Checks, unter anderem über Ally.
Elementor baut seine Stellung als All-in-one-Designplattform aus. Es richtet sich an Agenturen und Marketer, die komplexe Layouts, Marketing-Automationen und KI-Design-Tools an einem Ort benötigen und dafür etwas mehr Ressourcenverbrauch in Kauf nehmen.
📖 Gutenberg
Auch Gutenberg befindet sich nach wie vor im Ausbau – aktuell in Phase 3 von 4, der Kollaborationsphase. Entwickler arbeiten mit Hochdruck an der Live-Editing-Funktion , die, ähnlich wie Google Docs, paralleles Bearbeiten von Beiträgen ermöglichen soll.
Wie wir bereits festgestellt haben, ist Gutenberg im direkten Vergleich mit Elementor bei der Designfreiheit noch eher einfach aufgestellt. Das liegt aber auch daran, dass die beiden unterschiedliche Zielgruppen ansprechen.
Langfristig ist Gutenberg auf der sicheren Seite, da er fester Bestandteil des WordPress Cores ist und darüber dauerhaft weiterentwickelt wird. Dafür wird er allerdings noch über Jahre umgebaut, was Veränderungen an der Oberfläche und Kinderkrankheiten mit sich bringt.
Diese Themen stehen bei WordPress und Gutenberg als Nächstes an:
- Live-Kollaboration und Notes – Notes (Kommentare direkt an Blöcken) sind seit WordPress 6.9 an Bord, die Echtzeit-Zusammenarbeit im Editor soll folgen.
- Mehrsprachigkeit (Phase 4) – Langfristig soll WordPress mehrsprachige Webseiten nativ unterstützen, ohne zwingend auf Plugins wie WPML oder Polylang angewiesen zu sein.
- Neues Admin-Design – Die klassischen Listen im Dashboard (Beiträge, Seiten, Medien) werden schrittweise durch moderne Ansichten auf Basis von „DataViews“ ersetzt.
- Interactivity API – ein Standard für interaktive Frontend-Elemente wie Filter, Warenkörbe oder Ladeanimationen, ohne schwere JavaScript-Bibliotheken.
Gutenberg entwickelt sich vom reinen Block-Editor zu einer kollaborativen Plattform für Publishing und Content-Teams – mit gemeinsamer Bearbeitung, Kommentaren und modernen Verwaltungsansichten direkt in WordPress.
3. Welcher Page-Builder eignet sich für dich?
Die Frage lässt sich nicht pauschal beantworten, denn wie immer hängt der richtige Editor von deinen individuellen Anforderungen ab.
Als Agentur baust du mal einen Blog und mal einen Shop, und als Selbstständiger brauchst du heute eine schlichte Visitenkarte und morgen eine Landingpage für deine neue Kampagne. Viel entscheidender ist deshalb: Was willst du bauen – und wer kümmert sich danach darum?
Die Editoren im Vergleich für dein Projekt
| Situation | 🔮 Elementor lohnt sich, wenn | 📖 Gutenberg lohnt sich, wenn |
|---|---|---|
Blog & Magazin | einzelne Beiträge aufwendig inszeniert werden sollen, z. B. als Storytelling-Seiten | regelmäßig Artikel erscheinen, mehrere Autoren schreiben und der Inhalt im Vordergrund steht |
Unternehmenswebseite | Startseite und Leistungsseiten ein individuelles Design mit Effekten bekommen sollen | die Seite übersichtlich bleibt und wenige Sonderfunktionen braucht |
Landingpages & Kampagnen | Pop-ups, Formulare und schnelle Varianten für Kampagnen gebraucht werden | eine einfache Seite mit Text, Bild und Button reicht |
Online-Shop mit WooCommerce | Produkt-, Warenkorb- und Checkout-Seiten frei gestaltet werden sollen | ein Block-Theme genutzt wird und Standard-Layouts für Produkte genügen |
Pflege nach dem Launch | eine Jahreslizenz eingeplant ist und Zeit beim Bauen wichtiger ist | keine laufenden Lizenzkosten anfallen sollen |
Langfristige Planung | die Webseite in absehbarer Zeit ohnehin neu gestaltet wird | die Inhalte auch in fünf Jahren noch unabhängig vom Editor nutzbar sein sollen |
Kann ich Gutenberg und Elementor parallel nutzen?
Warum für einen Page-Builder entscheiden, wenn du beides haben kannst?
Tatsächlich nutzt du beide Tools ohnehin parallel, sobald du Elementor installierst – Gutenberg bleibt, wie oben erwähnt, im Hintergrund aktiv.
In der Praxis hat sich deshalb eine klare Arbeitsteilung bewährt: Beiträge schreibst du mit Gutenberg, Startseite, Landingpages und Leistungsseiten baust du mit Elementor. So bleibt dein Blog schlank und leicht zu pflegen, während deine wichtigsten Seiten das Design bekommen, das sie brauchen.
Damit die Kombination wirklich funktioniert, solltest du ein paar Dinge beachten:
- Klare Zuständigkeiten: Lege fest, für welche Inhaltstypen Elementor zuständig ist, und schränke ihn in den Elementor-Einstellungen auf diese Inhaltstypen ein.
- Pro Seite nur ein Editor: Wechsle auf einer bestehenden Seite nicht zwischen den Editoren hin und her.
- Header und Footer an einer Stelle: entweder im Elementor Theme Builder oder im Site Editor, nicht in beiden.
- Einheitliches Design: Hinterlege Farben, Typografie und Abstände in beiden Editoren gleich – in den globalen Einstellungen von Elementor und in den globalen Stilen von WordPress.
- Nichts doppelt laden: Binde Schriften, Icons und eigenen Code nur an einer Stelle ein.
Wechsel und Abhängigkeit: Was passiert, wenn du umsteigst?
Ein Wechsel zwischen den Editoren ist möglich, aber kein Knopfdruck. Elementor speichert seine Layouts in einem eigenen Datenformat. Deaktivierst du das Plugin, bleiben von deinen Seiten meist nur unformatierte Texte und Bilder übrig – Layout, Abstände und Widgets wie Pop-ups oder Formulare sind weg.
Gutenberg-Inhalte dagegen kannst du jederzeit weiterverwenden: Blöcke werden als HTML mit Kommentar-Markierungen gespeichert und bleiben auch ohne Plugin lesbar. Nur Blöcke aus Zusatz-Plugins verlieren ohne das jeweilige Plugin ihre Darstellung.
So planst du einen Wechsel:
- Bestandsaufnahme: Welche Seiten sind mit Elementor gebaut, und welche Funktionen wie Formulare, Pop-ups oder Templates nutzt du?
- Ersatz festlegen: Wähle ein Block-Theme und, falls nötig, Block-Plugins für fehlende Funktionen.
- Schrittweise umbauen: Baue Seite für Seite neu auf, am besten zuerst auf einer Staging-Umgebung.
- Nach dem Umzug prüfen: Kontrolliere Weiterleitungen, Formulare und Ladezeit.
Elementor und Gutenberg sind nicht die einzigen Optionen. Bricks und Breakdance richten sich an Nutzer, die Wert auf schlanken Code legen, Divi hat mit Version 5 gerade ein großes Update hinter sich, und Themes wie Kadence oder GeneratePress kombinieren Gutenberg mit leistungsstarken Block-Erweiterungen.
👉🏻 Mehr zu Divi 5 liest du in unserem Divi 5 Migrations Guide .
4. Gutenberg oder Elementor? Entscheidend sind deine Bedürfnisse
Also, Gutenberg oder Elementor? Die kurze Antwort: Es kommt darauf an. Und das ist in diesem Fall keine Ausrede, denn die beiden Editoren verfolgen schlicht unterschiedliche Ziele.
📖 Gutenberg ist ein Werkzeug für Inhalte. Er steckt in jeder WordPress-Installation, kostet nichts und erzeugt schlanken, sauberen Code. Deine Texte gehören WordPress und nicht einem Plugin. Der Preis dafür: Gutenberg ist noch eine Baustelle. Vieles, was Page Builder seit Jahren können, kommt erst nach und nach in den Core, und die Bedienung verändert sich mit fast jedem Release.
🔮 Elementor ist ein Werkzeug für Gestaltung. Du siehst sofort, was du baust, und bekommst Theme Builder, Pop-ups, Formulare und Shop-Seiten aus einer Hand. Der Preis dafür: mehr Code, eine Jahreslizenz für die spannendsten Funktionen und eine enge Bindung an das Plugin. Und auch Elementor steckt mit Version 4 gerade mitten im Umbau.
Warum keiner von beiden schlechter ist?
Weil die Schwächen des einen fast immer die Kehrseite seiner Stärken sind. Gutenberg ist schlank, weil er weniger mitbringt. Elementor bietet mehr Gestaltungsfreiheit, weil er mehr Code erzeugt. Gutenberg macht dich unabhängig, weil er Teil von WordPress ist – und genau deshalb wird er so langsam erwachsen. Elementor bindet dich stärker, weil er dir alles aus einer Hand liefert. Wer einen der beiden Editoren als „schlecht“ abstempelt, misst ihn meist an einer Aufgabe, für die er gar nicht gemacht ist.
5. Häufige Fragen zu Elementor und Gutenberg
Ist Gutenberg besser als Elementor?
Nein – und umgekehrt auch nicht. Gutenberg ist stärker, wenn es um Inhalte, schlanken Code und Unabhängigkeit geht. Elementor ist stärker, wenn du frei und visuell gestalten möchtest. Welcher Editor besser zu dir passt, hängt davon ab, was genau du bauen willst und wer die Seite später pflegt.
Ist Gutenberg ein Page Builder?
Jein. Gutenberg ist in erster Linie der Block-Editor von WordPress und wächst Schritt für Schritt zu einem Webseiten-Builder heran. Mit Block-Themes und dem Site Editor kannst du inzwischen auch Header, Footer und Templates gestalten. An den Funktionsumfang klassischer Page-Builder wie Elementor reicht Gutenberg aber längst nicht heran – schließlich steckt er gerade erst in Phase 3 von 4 seiner Entwicklung.
Macht Elementor WordPress langsam?
Elementor erzeugt mehr Code und einen größeren DOM als Gutenberg, was sich auf die Ladezeit auswirken kann. Langsam wird eine Elementor-Seite aber vor allem dann, wenn sie nicht optimiert ist – etwa durch viele Add-ons, große Bilder oder fehlendes Caching. Mit dem V4 Editor will Elementor außerdem deutlich schlankeren Code ausliefern. Und ganz wichtig: Das richtige WordPress Hosting macht oft mehr Unterschied als die Wahl des Editors.
Ist Elementor schlecht für SEO?
Nein. Mit Elementor lassen sich Seiten genauso gut für Suchmaschinen optimieren, und SEO-Plugins wie Yoast SEO oder Rank Math funktionieren problemlos. Du musst allerdings sorgfältiger arbeiten, zum Beispiel bei der Überschriftenstruktur und bei Elementen, die du auf bestimmten Geräten ausblendest. Gutenberg liefert sauberes HTML dagegen quasi automatisch.
Was kostet Elementor Pro?
Die Basisversion von Elementor ist kostenlos. Elementor Pro startet mit dem Essential-Plan bei 60 € pro Jahr für eine Webseite. Für Pop-ups, Custom CSS und WooCommerce-Funktionen brauchst du allerdings einen höheren Plan, die gibt es ab ca. 84 € pro Jahr.
Brauche ich Elementor Pro?
Das hängt von deinem Projekt ab. Für einfache Seiten mit individuellem Layout reicht die kostenlose Version oft aus. Sobald du Header und Footer gestalten oder Formulare einbauen willst, brauchst du Elementor Pro – für Pop-ups und WooCommerce-Funktionen sogar einen höheren Tarif als Essential. Das Preis-Leistungs-Verhältnis ist dabei aber sehr gut.
Kann ich Gutenberg und Elementor gleichzeitig nutzen?
Ja, und die gemeinsame Nutzung ist sogar ziemlich verbreitet. Gutenberg bleibt ohnehin im Hintergrund aktiv, wenn du Elementor installierst. Bewährt hat sich jedoch eine klare Aufgabenteilung: Blogbeiträge schreibst du am besten mit Gutenberg, während du Startseite und Landingpages mit Elementor erstellst. Wichtig ist nur, dass du pro Seite bei einem Editor bleibst.
Kann ich von Elementor zu Gutenberg wechseln?
Ja, aber nicht auf Knopfdruck. Elementor speichert Layouts in einem eigenen Format. Deaktivierst du das Plugin, bleibt meist nur ein unformatierter Rest deiner Inhalte übrig. Ein Wechsel bedeutet deshalb, die betroffenen Seiten neu aufzubauen – plane ihn wie einen kleinen Relaunch und teste ihn zuerst auf einer Staging-Umgebung.
Ist Elementor noch zeitgemäß?
Ja, mit dem neuen V4 Editor hat Elementor sein Fundament komplett überarbeitet und setzt jetzt auf eine moderne CSS-first-Architektur mit Klassen, Variablen und Komponenten. Dazu kommen neue Funktionen rund um KI, wie zum Beispiel Elementor MCP.
Was ist Full Site Editing?
Full Site Editing (FSE) bezeichnet die Möglichkeit, eine komplette WordPress-Webseite mit Blöcken zu gestalten – also nicht nur Beiträge und Seiten, sondern auch Header, Footer und Templates. Voraussetzung ist ein Block-Theme, bearbeitet wird im Site Editor. Inzwischen spricht WordPress meist nur noch vom Site Editor statt von Full Site Editing.
