An WordPress-Editoren, die auch als Page Builder bezeichnet werden, scheiden sich die Gemüter vieler Website-Entwickler und -Betreiber: Manche schwören auf Elementor, andere auf WPBakery (ehem. Visual Composer genannt) und abermals andere auf den Block-Editor. Obwohl auch der Divi-Builder, der Thrive-Architect und SeedProd genannt werden sollten, habe ich in diesem Vergleich bewusst darauf verzichtet, da zuverlässige Testsysteme sehr aufwendig sind. Der Block Editor (Gutenberg) ist standardmäßig in jeder WordPress-Installation enthalten und erfordert keine zusätzliche Installation, während andere Page Builder wie Elementor, Divi oder WPBakery erst als Plugins installiert und konfiguriert werden müssen. Dies macht den Block Editor besonders anfängerfreundlich und direkt einsatzbereit.
Verbreitung
| Page Builder | Nutzung |
|---|---|
| Block Editor (Gutenberg) | 67 % |
| Elementor | 16 % |
| WPBakery | 6 % |
| Andere | 11 % |
Demo-Systeme
Um die drei Page Builder – Block Editor, Elementor und WPBakery – objektiv vergleichen zu können, haben wir mit jedem Tool dieselbe Startseite eines Kundenprojektes nachgebaut: Des SaaS-Anbieters PropertyMax. Hier können die drei Testsysteme begutachtet werden:
So konnten wir unter gleichen Bedingungen die Editoren in den Bereichen Usability, Funktionen, Ladezeiten und Preise analysieren, um ihre Stärken und Schwächen objektiv und unter realen Bedingungen zu bewerten. Die Ergebnisse zeigen, welcher Editor sich für unterschiedliche Anforderungen am besten eignet.
Planst du einen Website-Relaunch auf WordPress-Basis und möchtest du die Editoren einfach mal live ausprobieren und eine Machbarkeits-Einschätzung deiner Vorstellungen erhalten?
Usability
Die Benutzerfreundlichkeit eines Editors ist entscheidend für effizientes Arbeiten und das Erstellen professioneller Websites. In diesem Abschnitt vergleiche ich die Usability von Block Editor, Elementor und WPBakery anhand ihrer Funktionen und Arbeitsweise.
- Block Editor (Gutenberg): Funktioniert nativ als Backend-Editor ohne Live-Vorschau. Ideal für Nutzer, die einfach strukturierte Inhalte erstellen wollen.
- Elementor: Vollständiger Frontend-Editor, der visuelles Arbeiten mit Echtzeit-Vorschau ermöglicht. Besonders intuitiv für kreative Projekte.
- WPBakery: Bietet sowohl Frontend – als auch Backend-Editing. Nutzer können die Struktur und Inhalte einer Seite direkt im Editor oder im Frontend anpassen. In unserem Fall war der Frontend-Editor deaktiviert, weshalb unser Screenshot den Backend-Editor zeigt.
In unseren Videos zu den Editoren zeigen wir, wie man Spalten, Buttons und Texte anpasst:
Kontaktiere uns, wenn du einen Relaunch planst. Wir zeigen dir die Editoren persönlich und schalten dir Demos frei.
Funktionen
Alle Editoren bieten Standardfunktionen wie:
- Individuelle Spaltenlayouts
- Buttons
- Akkordeons
Besonderheiten
- Block Editor: Großartige Vorlagen-Bibliothek, die flexible Designs ermöglicht.
- Elementor: Unterstützt Caching und benutzerdefinierte Schriftarten. Schade ist, dass man wiederverwendbare verschachtelte Vorlagen (Akkordeons) und einzeilige Buttons nicht so einfach einfügen kann.
- WPBakery: Eigene Layouts können gespeichert und wiederverwendet werden. Außerdem bietet die Template Library vorgefertigte Designs, und mit dem Add-on „Templatera“ lassen sich Vorlagen zentral verwalten.
SVG-Support
SVG-Dateien werden nur von Elementor nativ unterstützt, wenn man in den erweiterten Einstellungen die Option “ungefilterte Dateiuploads erlauben” aktiviert. Nutzer des Block Editors und von WPBakery müssen Plugins verwenden, um diese Funktionalität hinzuzufügen.
Vergleich der integrierten Formulare:
| Kriterium | Block Editor | Elementor | WPBakery |
| Autofill | nein | nein | nein |
| SMTP-Unterstützung | nein | nein | nein |
| einstellbare Weiterleitungen | nein | ja | nein |
| Multi-Step-Formulare | nein | ja | nein |
Für komplexe Formularanforderungen empfehlen wir unabhängig vom verwendeten Editor das Plugin Gravity Forms. Es ermöglicht die einfache Erstellung von Kontaktformularen, Umfragen, Anmeldeformularen und mehr durch eine intuitive Drag-and-Drop-Oberfläche.
Ladezeiten
Die Ladezeit einer Website ist ein entscheidender Faktor für die Nutzererfahrung und die Suchmaschinenoptimierung. Um die Performance der Editoren zu vergleichen, haben wir eine umfangreiche Startseite mit jedem Editor erstellt und unter identischen Bedingungen getestet. Die Ergebnisse zeigen, wie sich Block Editor, Elementor und WPBakery in puncto Geschwindigkeit schlagen.
Testbedingungen
- Auf jedem WordPress-System dieselbe umfangreiche Startseite erstellt
- Jede Installation gehostet auf HostPress Quad-Power mit PHP 8.3.16 und Apache
- Realistische Rahmenbedigungen geschaffen durch Caching via WP Rocket und Borlabs Cookie Plugin mit essenziellen Cookies
- Mehrere Tests zu denselben Zeiten an unterschiedlichen Tagen durchgeführt
Als Testtools für Ladezeiten haben wir webpagetest.org mit Standort Frankfurt am Main und für die Web Vitals die Google PageSpeed Insights eingesetzt. Exemplarisch haben wir je einen Test für dich verlinkt:
Reale Ladezeiten
Wie du an nachfolgender Tabelle sehen kannst, ist zwar Elementor derjenigen Page Builder, der am meisten Dateien lädt und die größte Seitengröße hat. Dies bedeutet mehr Ressourcenbedarf weniger Nachhaltigkeit, als andere Editoren. Das Elementor-Plugin ist aber so gut entwickelt, dass die real gemessenen Ladezeiten im Vergleich zum Block-Editor und WPBakery Page Builder wesentlich besser sind:
| Page Builder | ø Ladezeit | Beste Ladezeit (s) | ø Reaktionszeit (TTFB) (s) | ø Start der Darstellung (s) | ø Seitengröße (MB) | ø Anzahl der geladenen Dateien |
| Block Editor | 6.647 | 4.808 | 0.381 | 0.644 | 2.478 | 41 |
| Elementor | 3.49 | 2.429 | 0.401 | 0.678 | 2.571 | 68 |
| WPBakery | 4.344 | 4.25 | 0.537 | 1.33 | 2.175 | 46 |
Anmerkung: Die „Reaktionszeit“ steht für engl. „Time To First Byte“, was einiges der wichtigsten sog. „Web Vitals“ zur Benutzerfreundlichkeits-Analyse für Google ist. “Start der Darstellung” steht für engl. Start Render. Bei allen Zahlen der Tabelle zählt: Je geringer der Wert, desto besser. Weitere Details findest du in unserem Beitrag zur Performance-Optimierung.
Google PageSpeed
Interessanterweise hat der Elementor-Editor dann beim PageSpeed-Vergleich schlechter als Block-Editor und WP Bakery performt. Den besten PageSpeed hat dagegen WP Bakery erreicht:
| Page Builder | PageSpeed mobile | PageSpeed Desktop |
| Block Editor | 64 | 99 |
| Elementor | 78 | 75 |
| WPBakery | 93 | 94 |
In Sachen Ladezeiten überzeugt Elementor, in Sachen PageSpeed der WP Bakery PageBuilder. Der „hauseigene“ Block Editor von WordPress schneidet aus der Perspektive leider durchwegs am schlechtesten ab. An dieser Stelle möchte ich aber nochmal auf das vereinheitlichte Basis-Setup hinweisen und anmerken, dass man durch eine professionelle Performance-Optimierung, die auf das individuelle WordPress-Setup eingeht, mit jedem Editor ordentliche Ladezeiten und PageSpeed erreichen kann.
Preise
Für den professionellen Einsatz von Elementor und dem Block Editor (Gutenberg) ist die Erweiterung durch kostenpflichtige Versionen empfehlenswert. Bei Elementor bietet die Pro-Version über 90 zusätzliche Widgets, einen Theme Builder, dynamische Inhalte und die Möglichkeit, Kopf- und Fußzeilen sowie Pop-ups und Formulare zu gestalten. Für den Block Editor erweitert Kadence Blocks Pro die Funktionalität um erweiterte Blöcke, Designoptionen und eine Bibliothek vorgefertigter Vorlagen. Im Gegensatz dazu bietet WPBakery bereits in der einmaligen Lizenz umfassende Funktionen, sodass keine zusätzliche Premium-Version erforderlich ist.
- Block Editor (mit Kadence Blocks Pro): ab $ 69/Jahr
- Elementor Pro: ab $ 49/Jahr
- WPBakery: $ 69 einmalig
Fazit
Der Block Editor ist der ressourcenschonendste, also nachhaltigste WordPress-Editor und ideal für layouttechnisch einfachere Projekte, wie Online-Shops oder Corporate Websites. Elementor bietet die größte Flexibilität und eignet sich perfekt für kreative und visuell beeindruckende Websites, insbesondere, wo designaffine Administratoren am Werk sind. Auch die Ladezeiten mit Elementor sind top. WPBakery ist von der Nutzerfreundlichkeit für uns die letzte Wahl, aber überzeugt durch den besten PageSpeed. Egal, für welchen Editor du dich entscheidest, wir empfehlen bei professioneller Nutzung die Premium-Versionen der Editoren, um bestmögliche Flexibilität zu erzielen.
Wenn du einen Website-Relaunch planst und einen geführten Test der Editoren mit Machbarkeitseinschätzung oder detaillierter Prüfung deiner Vorstellungen wünscht, kontaktiere uns.