WordPress-Editoren im Vergleich: Gutenberg vs. Elementor

Die Wahl des richtigen Editors spielt eine entscheidende Rolle bei der Umsetzung von Websites. Je nachdem, welche Ansprüche die Website erfüllen soll, bedarf es an unterschiedlichen Funktionen bei der Gestaltung dieser. Dabei stehen WordPress-Nutzern zwei mächtige Werkzeuge zur Verfügung, auf die wir einen detaillierten Blick werfen: Der Standard-Editor von WordPress namens Gutenberg und eines der etabliertesten Page Builder Plugins namens Elementor.

WordPress’ Standard-Editor: Gutenberg als Full Site Block-Editor

Gutenberg begann als Plugin, ist jedoch seit der WordPress Version 5.0 als Standard-Editor integriert. Das Blocksystem ermöglicht eine umfassende Bearbeitung von Websites direkt in der gewohnten WordPress-Benutzeroberfläche. Dabei kann man den Editor entweder über den Menüpunkt “Seiten” bzw. “Beiträge”, oder über den Reiter “Design” > “Website-Editor” erreichen.
Übersicht des Gutenberg Website-Editors
Durch die regelmäßigen Versions-Updates bekommen WordPress-Benutzer ständig neue Themes zur Auswahl, die sie über den Website-Editor individuell anpassen können. Diese dienen als Ausgangspunkt für die Website-Gestaltung und ermöglichen eine schnelle Umsetzung von Designideen. Darüber hinaus bietet Gutenberg die Möglichkeit, vorgefertigte Templates individuell anzupassen oder direkt neue zu erstellen.
Übersicht der Templates im Website-Editor
Auf den ersten Blick ähnelt der Aufbau des Gutenberg-Editors anderen Page Buildern, wobei die Positionierung einzelner Funktionen abweichen kann. Die obere Menüleiste bildet den Kern, über welche unter anderem die Blöcke und Vorlagen, die Navigationsleiste, die Block-Einstellungen sowie die der Plugins und die Möglichkeit der Website-Vorschau abgerufen werden können. Auf der linken Seite des Editors steht eine Auflistung der einsetzbaren sowie bereits vorhandenen Inhaltsblöcke, Vorlagen und Medien. Rechts von dem Editor-Bereich werden die Einstellungen zu dem jeweils bearbeiteten Block sowie allgemeiner Website-Einstellungen wie Beitragsbild, Autor usw. abgebildet.
Übersicht des Gutenberg-Editors im Bearbeitungsmodus
Bei Änderungen werden die einzelnen Blöcke genau so visualisiert, wie sie letztendlich im Frontend ausgespielt werden. Über die Pfeile links neben der Navigation kann man Änderungen auf den vorherigen bzw. neueren Stand setzen. Sollte man die Seite zwischenzeitlich aktualisiert und geschlossen haben, kann man über das Zahnrad auf die Versionshistorie zugreifen. Zahlreiche – und meist auch kostenlose – Drittanbieter-Plugins erweitern die Möglichkeiten von Gutenberg, indem sie verschiedene Inhaltsblöcke und flexible Layout-Optionen bieten.
Block-Übersicht und allgemeine Stilanpassungen im Gutenberg-Editor

Elementor - der visuelle Page Builder

Eines der bekanntesten Website-Editoren für WordPress ist Elementor. Das Plugin bietet in seiner kostenlosen Version bereits einige hilfreiche Content-Elemente an, um ein erstes Gespür im Umgang mit Webdesign zu entwickeln. Für die Umsetzung einer fortgeschrittenen Website und den damit benötigten Erweiterungen kommt man jedoch nicht um die kostenpflichtige Pro-Version herum. Denn neben der großen Auswahl an Templates und Themes von Elementor, die in der kostenlosen Version sehr begrenzt zugänglich sind, stellt beispielsweise das Plugin “Unlimited Elements for Elementor” zahlreiche Vorlagen und Inhalts-Widgets zur Verfügung, die flexibel an die Website-Anforderungen anpassbar sind.
Übersicht des Theme Builders von Elementor
Widget-Übersicht des Elementor-Plugins “Unlimited Elements”
Elementor basiert auf einem Baukastenprinzip, über welches sich die einzelnen Elemente per Drag & Drop einfach in den Editor einsetzen und nach Belieben verschieben lassen. Die Blöcke befinden sich standardmäßig auf der linken Seite des Editors, wo man bei der Bearbeitung des jeweiligen Elements Einstellungen zum Inhalt, Stil und Layout vornehmen kann.
Bearbeitungsmodus einzelner Content-Elemente im Editor von Elementor

Über die schwarze Menüleiste kann man weitere Funktionen abrufen:

  • Allgemeine Website-Einstellungen
  • Navigator mit hierarchischer Struktur der einzelnen Elemente
  • Revisionsverlauf der letzten Aktualisierungen
  • Ansicht im responsiven Modus
  • Vorschau der (vorläufigen) Website
Übersicht der Inhaltsblöcke und der Navigationsleiste im Elementor-Editor
Zurecht ist Elementor eines der meist verwendeten Plugins, denn es ist neben den zahlreichen Gestaltungsmöglichkeiten von eigenen Templates, Themes und Vorlagen mit jedem Theme kompatibel, das WordPress bereitstellt. Elementors Flexibilität ermöglicht es, jedes Detail der Website individuell anzupassen, was besonders für Benutzer ohne umfangreiche technische Kenntnisse ansprechend ist. Für diejenigen, die dennoch spezifische CSS-Anpassungen treffen möchten, besteht die Möglichkeit nicht nur über den WordPress-Customizer, sondern auch über die erweiterten Einstellungen im Elementor-Editor.

Was haben die zwei Website-Editoren (nicht) gemeinsam?

Gemeinsamkeiten:

✔ Schnelle Umsetzung: Beide Editoren ermöglichen mithilfe von zahlreichen Content-Blöcken eine schnelle und einfache Umsetzung des Website-Layouts sowie von Design-Ideen.
✔ Responsive Design: Sowohl Gutenberg als auch Elementor unterstützen die Erstellung von Websites mit responsivem Design.
✔ Revisionssicherheit: Beide Editoren bieten Funktionen zur Einsicht und Wiederherstellung von älteren Versionen, sodass Änderungen nachvollziehbar sind.

Unterschiede:

✔ Individualisierung: Elementor ist flexibler in der Individualisierung von Designs, während bei Gutenberg Anpassungsmöglichkeiten begrenzt sind und ggf. CSS- und anderweitige Programmierkenntnisse erfordern.
✔ Kompatibilität: Beide Editoren werden von den WordPress-Themes unterstützt, jedoch können bei Gutenberg in Kombination mit anderen Page Buildern Kompatibilitätsprobleme hinsichtlich der verwendeten Plugins entstehen. Dadurch, dass Gutenberg erst seit Kurzem als Standard-Editor implementiert wurde, müssen Drittanbieter die Content-Blöcke ihrer Plugins entsprechend anpassen. Elementor hingegen bietet eine Reihe von Block-Erweiterungen speziell für die Verwendung des Page Builders an.
✔ Kostenstruktur: Gutenberg ist als integraler Bestandteil von WordPress kostenlos und kann bei unzureichenden Funktionen durch Blöcke von Drittanbieter-Plugins erweitert werden. Da die Funktionen und Individualisierungsoptionen von Elementor in der kostenlosen Version sehr eingeschränkt sind, empfiehlt sich für anspruchsvolle Websites die Verwendung der kostenpflichtigen Pro-Version.

Welcher Editor ist nun der Bessere?

Insgesamt bieten sowohl Gutenberg als auch Elementor leistungsstarke Funktionen für die Gestaltung von WordPress-Websites, jedoch unterscheiden sie sich in ihren Stärken und Anwendungsbereichen.
Gutenberg eignet sich besonders gut für Nutzer, die mehr Wert auf die nahtlose Integration in die WordPress-Oberfläche legen. Insbesondere für Anwender, die bereits mit der Standard-WordPress-Oberfläche vertraut sind, bietet Gutenberg eine intuitive Erweiterung, die sich leicht in den Workflow integrieren lässt.
Elementor hingegen glänzt durch seine einfach bedienbare Drag & Drop-Oberfläche und ist besonders geeignet für diejenigen, die nach höchster Flexibilität und individuellen Anpassungsmöglichkeiten suchen. Die umfassende Bibliothek mit vorgefertigten Add-Ons und die Möglichkeit, individuelle Templates zu erstellen, macht Elementor zur bevorzugten Wahl für Anwender, die ein Höchstmaß an kreativer Freiheit wünschen. Dadurch kann die Umstellung auf den Gutenberg-Editor für Elementor-Profis etwas ernüchternd wirken.
Letztendlich stellen beide Editoren beachtliche Bearbeitungstools dar, die es ermöglichen, beeindruckende Websites zu erstellen. Die Nutzer sollten ihre Entscheidung basierend auf ihrer Expertise, den spezifischen Anforderungen und finanziellen Möglichkeiten sowie dem gewünschten Gestaltungsprozess treffen.

PS: Du suchst Unterstützung im Bereich E-Commerce-Shop, UX, User Research, Webdesign oder Webentwicklung? Dann lass uns gemeinsam Dein Wunschprojekt in die Tat umsetzen – wir freuen uns auf ein Kennenlernen 😊

Quellen

  • https://kinsta.com/de/blog/gutenberg-wordpress-editor/
  • https://www.youtube.com/watch?v=2IyfOE8vnhc
  • https://www.namehero.com/blog/gutenberg-vs-elementor/
  • https://kinsta.com/de/blog/kostenlose-vs-kostenpflichtige-wordpress-themes/
  • https://kinsta.com/de/blog/gutenberg-vs-elementor/
Picture of Natalie Krieger

Natalie Krieger

Neben meinem E-Commerce Studium arbeite ich als Werkstudentin bei der UserMind GmbH, da ich hier mein Theoriewissen sowohl erweitern als auch praktisch umsetzen kann. Da mir ansprechende Websites mit benutzerfreundlicher Oberfläche sehr wichtig erscheinen, möchte ich lernen, wie ich diese selbst erstellen & kreativ gestalten kann. Für ein motiviertes Arbeitsklima sorgen unsere vierbeinigen Teamkollegen, die uns auch bei kreativen Denkblockaden weiterhelfen. 🐶🐾

Schreibe einen Kommentar

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

Das könnte Dich auch interessieren

Ihr Kontakt

Sven Dreißigacker

Geschäftsführer UserMind GmbH 

Kontaktformular