Gutenberg vs. Elementor: gibt es eine richtige Wahl? Vielleicht. Aber es kommt darauf an, welche Funktionen du von deinem WordPress Page Builder erwartest.

Wir erklären dir die Grundlagen von Gutenberg und Elementor und machen dann einen direkten Vergleich zwischen den beiden.

Lies weiter, um einen detaillierten Vergleich zwischen Gutenberg und Elementor zu erhalten, der auf jahrelanger Erfahrung mit beiden Programmen und gründlichen Tests basiert.

Was ist Gutenberg?

Gutenberg ist der Standard-Seiten-Builder von WordPress. Er wurde 2018 eingeführt und ersetzte den sogenannten „klassischen“ WordPress-Editor, der ursprünglich ein Rich-Text/HTML-Editor ohne Drag-and-Drop-Funktion war.

Gutenberg war eigentlich eine Reaktion auf eine Welle von Page-Builder-Plugins von Drittanbietern, darunter Elementor, Divi und Visual Composer, die alle herauskamen, um den klassischen Editor zu ersetzen.

Gutenberg bietet eine leicht zugängliche „Block“-Bibliothek zum Ziehen von Inhaltselementen auf Seiten und Beiträge.

Eine Liste der Blöcke in Gutenberg
Die Registerkarte „Blöcke“ in Gutenberg

Gutenberg verfügt über fast 100 Inhaltsblöcke, von denen einige die Integration und Einbettung von Drittanbieterdiensten wie Twitter, Reddit und Amazon Kindle ermöglichen. Es ist auch möglich, dynamische Blöcke zu erstellen, um den Inhalt des Blocks automatisch zu aktualisieren. Einige Beispiele für Gutenberg-Blöcke sind:

  • Absatz
  • Überschrift
  • Tabelle
  • Bild
  • Galerie
  • Video
  • Buttons
  • Kalender
  • Benutzerdefiniertes HTML
  • Neueste Beiträge

Die meisten WordPress-Themes funktionieren gut mit Gutenberg (das ist jetzt im Grunde Pflicht).

Die Gutenberg-Benutzeroberfläche stellt den Inhalt von Seiten oder Beiträgen in den Mittelpunkt und zeigt, wenn möglich, gerenderte Inhalte (wie Formulare oder Schaltflächen) an. Das ist ein deutliches Upgrade gegenüber dem klassischen Editor, da Gutenberg neben der visuellen Benutzererfahrung auch eine schnelle Markdown-Bearbeitung unterstützt. Bei Bedarf hast du direkten Zugriff auf benutzerdefinierte Codierungsbereiche für CSS und HTML.

Jeder Block bietet eine eigene lange Liste von Einstellungen, und Gutenberg verfügt über Quick Panels für eine leistungsstarke Kontrolle über Dokument- und Blockeinstellungen wie Alt-Tags, Hintergrundfarben und Kommentar-Moderation.

Was ist Elementor?

Elementor ist ein Page Builder, ähnlich wie Gutenberg. Elementor war jedoch schon vor Gutenberg eine der Page-Builder-Apps von Drittanbietern, die schließlich zur Schaffung eines Standard-WordPress-Seiten-Builders geführt haben.

Seit seiner Einführung im Jahr 2016 ist Elementor bei WordPress-Designern sehr beliebt, denn es bietet eine vollständig visuelle Webdesign-Oberfläche, elegante Startvorlagen (die importiert werden können) und Drag-and-Drop-Inhaltsmodule.

Elementor Website
Elementor

Einer der auffälligsten Unterschiede zwischen Elementor und Gutenberg ist, dass Elementor nicht in WordPress integriert ist. Es wird von einem anderen Unternehmen entwickelt und du musst das kostenlose Plugin installieren (es gibt auch Premium-Versionen).

Du wirst auch feststellen, dass Elementor einzigartige Namen für seine Funktionen hat. Was in Gutenberg „Blöcke“ genannt wird, heißt bei Elementor „Widgets“. Apropos, Elementor hat über 100 solcher Inhaltswidgets.

Beispiele für Elementor Content Widgets:

  • Beitrag
  • Text-Editor
  • Überschrift
  • Bild
  • Text
  • Zeugnis
  • Umschalten
  • Fortschrittsbalken

Viele der Widgets schaffen Integrationen zwischen einer WordPress-Website und Apps von Drittanbietern, wie Stripe, Facebook und Sound Cloud.

Insgesamt ist Elementor einer der besten WordPress-Seitenersteller mit einer lebendigen Community von Entwicklern und Nutzern. Die visuelle Drag-and-Drop-Oberfläche ist kaum zu übertreffen, du erhältst Hunderte von Designervorlagen und alle Bearbeitungen werden live durchgeführt.

Zusammen mit den speziellen WooCommerce-Widgets und den Marketing-Tools für Landing Pages und Formulare ist Elementor nach wie vor ein Gigant im Bereich der Website-Erstellung, und das merkt man auch beim Vergleich von Gutenberg und Elementor.

Gutenberg und Elementor im Vergleich

Wir vergleichen Gutenberg und Elementor in Bereichen wie Funktionen, Benutzeroberfläche, Preise und mehr. Nach unserem Vergleich kannst du besser einschätzen, welcher Page Builder der richtige für deine Bedürfnisse ist.

Wichtige Funktionen

In diesem Abschnitt haben wir die unserer Meinung nach wichtigsten Funktionen eines Page Builders herausgesucht und vergleichen Gutenberg und Elementor in jeder Kategorie.

Drag-and-Drop-Funktionalität und Kodierung: Gutenberg vs. Elementor

Das Problem mit Page Buildern ist, dass sie die Benutzeroberfläche oft mit visuellen Erstellungswerkzeugen füllen und die fortgeschrittenen Funktionen, wie z. B. die Codebearbeitung, aus dem Blickfeld verdrängen.

Wir bevorzugen eine Mischung aus beidem, bei der Anfänger eine schlanke, leicht zugängliche Drag-and-Drop-Oberfläche haben und Fortgeschrittene CSS verwenden können, ohne nach dem richtigen Feld suchen zu müssen.

Gutenbergs Drag-and-Drop-Funktionalität ist unkompliziert und ohne Verzögerung. Es dauert nur einen Moment, um nach Inhaltsblöcken zu suchen und sie in den Inhalt zu ziehen – oder zu klicken und einzufügen. Dann erscheinen die Blockeinstellungen zur Anpassung.

Beispiele für Gutenberg-Blöcke
Es sind Dutzende von Inhaltsblöcken verfügbar

Ein Nachteil ist, dass du beim Ziehen von bereits platzierten Blöcken zuerst einen Block auswählen und dann auf ein kleines Ziehen-Symbol klicken und halten musst. Das erfordert Präzision beim Klicken, was bei anderen Page Buildern nicht nötig ist.

Ziehen eines Blocks
Verwende das Drag-Symbol, um Blöcke zu verschieben

Wenn es um die Programmierung geht, ist der Code-Editor von Gutenberg leicht zu finden.

Der Code-Editor ist leicht zugänglich
Der Code-Editor ist leicht zugänglich

Nutzerinnen und Nutzer haben Probleme mit Blöcken, die ihren Code durcheinanderbringen, und Schwierigkeiten mit den vorgefertigten Blöcken festgestellt, so dass Entwicklerinnen und Entwickler Dutzende von benutzerdefinierten Blöcken erstellen müssen.

Trotz der Beschwerden hat sich der Page Builder für Programmierer verbessert, und die Werkzeuge sind definitiv vorhanden, aber vielleicht mit einer steileren Lernkurve als im klassischen Editor.

Du kannst sogar HTML-Anker und zusätzliche CSS-Klassen direkt auf der Registerkarte Blöcke in Gutenberg hinzufügen, wozu du dich früher mühsam durch die Registerkarte HTML im klassischen Editor quälen musstest.

HTML-Anker und CSS-Klassen
HTML-Anker und CSS-Klassen anpassen

Elementor bietet auch eine Drag-and-Drop-Funktionalität. Es funktioniert mit den meisten WordPress-Themes und bietet eine Bibliothek von Blöcken, die du schnell in jede Seite einfügen kannst.

Blöcke, die unter der Kategorie Basic aufgeführt sind
Eine Liste der grundlegenden Blöcke

Da Elementor ein halbautomatisch generiertes Rastersystem verwendet, ist es möglich, Widgets in den meisten Bereichen einer Seite zu platzieren.

Ziehen eines Schaltflächenblocks in den Editor
Ziehen eines Schaltflächenblocks in den Editor

Das Verschieben von bereits platzierten Inhaltsblöcken ist in Elementor einfacher als in Gutenberg. Du klickst einfach irgendwo auf den Block und hältst ihn gedrückt, um ihn zu verschieben.

Verschieben eines Schaltflächenelements nach unten in Elementor
Du kannst jeden Block mit einem Klick und Ziehen verschieben

Wenn du ein Inhalts-Widget einfügst oder auswählst, werden der Inhalt, der Stil und die erweiterten Einstellungen des Widgets angezeigt. Was die Programmierung angeht, so ist sie mit vielen der Blockeinstellungen vereinfacht. So kannst du z. B. HTML-Anker, Attribute und benutzerdefinierte CSS direkt in den Widget- oder Seiteneinstellungen hinzufügen.

CSS hinzufügen
Füge mühelos benutzerdefiniertes CSS ein

Elementor bietet auch HTML-Code-Widgets, mit denen du auf einer Webseite eigene Codes einfügen kannst.

Gib deinen eigenen HTML-Code ein
Du kannst das HTML-Code-Feld für deine eigenen Anpassungen nutzen

Insgesamt ist die Drag-and-Drop-Funktionalität von Elementor stärker als die von Gutenberg. Dennoch sind die Optionen für benutzerdefinierte Kodierung in beiden Page Buildern gleich gut zugänglich.

Templates (für Websites, Blöcke, Seiten, Popups und mehr): Gutenberg vs. Elementor

Vorlagen für den Seitenersteller ermöglichen es Entwicklern, Websites in rasender Geschwindigkeit zu erstellen. Mit Vorlagen kannst du mit professionellen Websites oder Seitendesigns beginnen, anstatt sie von Grund auf neu zu erstellen.

Viele Page Builder bieten vorgefertigte Vorlagen für:

  • Vollständige Websites
  • Seiten
  • Blog-Beiträge
  • Seitenabschnitte
  • Inhaltsblöcke
  • Kopfzeilen
  • Fußzeilen
  • Landing Pages
  • Und mehr

Gutenberg hat einen großen Mangel an vorgefertigten Vorlagen. Die Registerkarte Muster bietet hilfreiche Abschnittsvorlagen, aber das war’s auch schon.

Elementor-Muster verwenden
Die Registerkarte „Muster“

Es ist jedoch möglich, Plugins von Drittanbietern mit Startvorlagen für Seiten und ganze Websites zu installieren. Plugins wie Gutentor, Twentig und Otter Blocks eignen sich alle dafür.

Elementor hingegen bietet in seinem Theme Builder Hunderte von Startvorlagen an.

Zu den Vorlagen von Elementor gehören:

  • Kopfzeilen
  • Fußzeilen
  • Einzelne Seiten
  • Einzelne Beiträge
  • Archive
  • Suchergebnisseiten
  • Produkt-Seiten
  • Produktarchive
  • 404 Seiten
Elementor Theme Builder Elemente
Die verschiedenen Theme-Builder-Elemente von Elementor

Fast alle Vorlagen von Elementor erfordern ein Premium-Abonnement, aber das ist erschwinglich und besser als das, was du von Gutenberg bekommst.

Styling: Gutenberg vs. Elementor

Die Styling-Funktionen in Gutenberg ermöglichen schnelle Anpassungen im Block-Panel auf der rechten Seite – nachdem du den Block ausgewählt hast, den du bearbeiten möchtest.

Styling eines Bildes in Gutenberg
Styling eines Bildes in Gutenberg

Die Stileinstellungen sind im Vergleich zu Elementor recht einfach, aber das Wesentliche ist fast immer vorhanden, z. B. Optionen zum Ändern von Rahmen und Abmessungen für Bilder oder Farb-, Typografie- und Randeinstellungen für Absatzblöcke.

Neben den benutzerdefinierten CSS für alle Blöcke findest du eine schwebende Symbolleiste, wenn ein Block angeklickt wird. Dieser Bereich bietet die Möglichkeit, Text zu gestalten, mit HTML zu bearbeiten, zu kopieren und zu duplizieren.

Toolbar in Gutenberg vs Elementor
Die Hovering-Symbolleiste

Die Stileinstellungen in Elementor befinden sich auf drei Registerkarten, wenn ein Widget ausgewählt ist. Passe die Inhaltseinstellungen für die Bild- und Textgröße an und stürze dich dann in die fortgeschrittenen Bereiche mit allem, was von Hover-Animationen über CSS-Filter und Masken bis hin zu Transformations-Effekten reicht.

Style settings for Elementor vs Gutenberg
Passe das Styling für jeden ausgewählten Block an

Elementor hat zweifelsohne eine größere Auswahl an Styling-Tools als Gutenberg. Wer es jedoch möglichst einfach haben möchte, wird sich mit den Styling-Funktionen von Gutenberg wohlfühlen.

Inhaltsblöcke/Widgets: Gutenberg vs. Elementor

Gutenberg verfügt über etwas mehr als 90 Inhaltsblöcke. Elementor bietet über 100.

Hier sind die Gutenberg-Blockkategorien:

  • Text
  • Medien
  • Design
  • Widgets
  • Theme-Einbettungen

Du bekommst alle wichtigen Elemente (Absatz-, Bild- und Schaltflächenblöcke) sowie einzigartige Elemente für Dinge wie Speaker Deck, Kickstarter, Query Loops, Verse, Time To Read und mehr.

Elementor kategorisiert auch seine Inhaltswidgets:

  • Basic
  • Pro
  • Allgemein
  • Website
  • WooCommerce
  • WordPress

Das sind zwar nicht die hilfreichsten Kategorien, aber zumindest sind sie einigermaßen organisiert.

Standard-Inhaltswidgets wie Trennlinien, Abschnitte und Überschriften sind vorhanden. Außerdem gibt es einzigartige Widgets für Google Maps, Code Highlights, WooCommerce Produktdaten und mehr.

Produktbilder-Block in Elementor
Zu den erweiterten Elementen gehören Produktbilder, Produkt-Meta und Upsells

Unser Fazit ist, dass Gutenberg seine Inhaltsblöcke viel besser organisiert und erklärt, aber Elementor bietet eine größere Anzahl von Blöcken (Widgets) mit stärkeren Einstellungen.

WooCommerce-Unterstützung: Gutenberg vs. Elementor

WooCommerce ist ein Plugin eines Drittanbieters, mit dem du jede WordPress-Seite in einen Onlineshop verwandeln kannst. In Verbindung mit einem Page Builder erhältst du oft WooCommerce-Blöcke, mit denen du den Warenkorb, die Produktseiten und vieles mehr besser anpassen kannst.

Gutenberg ist da keine Ausnahme. Sobald du WooCommerce installiert hast, erscheint eine Vielzahl von Gutenberg-Blöcken, mit denen du das Design deines WooCommerce-Shops verbessern kannst. Es gibt Blöcke für die Produktsuche, Optionen für die Anzeige von aktiven Filtern und Möglichkeiten zur Anzeige der meistverkauften Produkte. Wir haben 26 Gutenberg/WooCommerce-Blöcke gezählt, und es gibt mehrere Plugins von Drittanbietern, die diese Liste noch erweitern.

Alle Blöcke für WooCommerce in Gutenberg
Die WooCommerce-Blöcke

Elementor arbeitet auch gut mit WooCommerce zusammen, aber das hat seinen Preis. Du brauchst ein Elementor Pro-Abonnement, um die WooCommerce-Inhaltswidgets oder Seitenvorlagen freizuschalten. Dennoch ist Elementor Pro erschwinglich und die Blöcke bieten leistungsfähigere Styling-Tools als alles in Gutenberg.

Zum Zeitpunkt dieses Artikels waren 20 WooCommerce-Blöcke über Elementor verfügbar. Die Liste umfasst Produktbilder, Buttons zum Hinzufügen zum Warenkorb, Produktbewertungen und Produktgalerien.

Zusätzliche WooCommerce-Blöcke wie Menu Cart und Product Title
Zusätzliche WooCommerce-Blöcke wie Menu Cart und Product Title

Es gibt sogar einzigartige Widgets wie Upsells und Product Meta Data.

Integrationen: Gutenberg vs. Elementor

Es ist wichtig, Integrationen nicht mit Kompatibilität zu verwechseln. Wir werden weiter unten in diesem Artikel auf die Kompatibilität von Themes und Plugins eingehen, aber Integrationen sind eher Links zu anderen Anwendungen, Plattformen und Software, über die Daten an den oder vom Page Builder gesendet werden.

Eine Integration mit Facebook kann zum Beispiel eine Schaltfläche anzeigen, mit der man deiner Seite folgen kann, oder eine Liste deiner letzten Facebook-Beiträge.

Gutenberg hat eine kurze Liste direkter Integrationen, die hauptsächlich Blöcke verwenden, um Inhalte aus externen Quellen zu beziehen.

Hier ist ein Vorgeschmack auf die 32 aktuellen Gutenberg-Integrationen:

  • Openverse
  • Twitter
  • YouTube
  • WordPress
  • SoundCloud
  • Spotify
  • Crowdsignal
  • Dailymotion
  • Imgur
  • Ausgabe
  • Kickstarter
  • Amazon Kindle
  • Pinterest
  • Reddit
  • Slideshare

Elementor hat eine lange Liste von Integrationen, von Medienplattformen bis zu sozialen Websites.

Hier sind einige der über 40 Integrationen von Elementor:

  • PayPal
  • Facebook (für Kommentare, Einbettungen, Seiten und Schaltflächen)
  • YouTube
  • Vimeo
  • Google Maps
  • SoundCloud
  • MailChimp
  • ActiveCampaign
  • ConvertKit
  • HubSpot
  • Zapier
  • Discord
  • Benutzerdefinierte Icon-Bibliotheken
  • Slack
  • ReCaptcha
  • Drip

Beide haben respektable Integrationen, aber die Elementor-Integrationen scheinen stärker und umfangreicher zu sein. In Elementor kannst du bekannte E-Mail-Marketing-Anbieter einbinden, über Zahlungsanbieter verkaufen und eine Verbindung zu deiner Customer Relationship Management-Software herstellen. Gutenberg hingegen konzentriert sich mehr auf die Verknüpfung mit Mediatheken und sozialen Websites.

Benutzeroberfläche: Gutenberg vs. Elementor

Die ersten Schritte mit Gutenberg sind so intuitiv wie WordPress selbst. Das liegt daran, dass Gutenberg automatisch in das WordPress-Dashboard integriert ist. Es ist nicht nötig, ein Plugin oder Add-on zu installieren. Öffne einfach einen Seiten- oder Beitragseditor, und Gutenberg macht sich an die Arbeit.

Suche nach Blöcken in Gutenberg
Füge Blöcke über die Suchleiste oder im Editor hinzu

Du kannst nach Blöcken suchen und sie einfügen, indem du auf eine der vielen + -Schaltflächen (Block hinzufügen) klickst, die überall im Editor verteilt sind. Es gibt eine Suchleiste und verschiedene Registerkarten für Blöcke, Muster und Medien. Du wirst sogar feststellen, dass Gutenberg mit beliebten Creative-Commons-Bildanbietern zusammenarbeitet, um geeignete Grafiken kostenlos zu finden.

Die schnelle Erstellung von Inhalten macht Gutenberg zu einem der besten Page Builder für Blogger und alle, die online publizieren. Du kannst direkt in den Editor schreiben und Markups und Tastenkombinationen verwenden, um Elemente wie Überschriften, Links und Bilder schnell einzufügen.

Außerdem lässt sich Gutenberg mit einer Vielzahl anderer Texteditoren von Drittanbietern integrieren, oder du kannst Inhalte aus anderen Programmen direkt in Gutenberg kopieren (ohne Bilder ein zweites Mal hochladen oder Formatierungen anpassen zu müssen).

Auf der Registerkarte Seite findest du Einstellungen für die Veröffentlichung und für Seiten, z. B. Werkzeuge für Bilder, Auszüge und Kommentare.

Ausgewählte Bilder in Gutenberg
Die Registerkarte „Ausgewählte Bilder“

Auch blockbezogene Einstellungen lassen sich leicht anpassen. Klicke einfach auf die Registerkarte Block. Dadurch werden die einzigartigen Anpassungsfunktionen für den von dir ausgewählten Block geöffnet. Bei einem Bildblock zum Beispiel siehst du alles von Alt-Text-Feldern bis hin zu Einstellungen für die Bildgröße. Hier kannst du auch CSS-Tags, HTML-Anker oder Titelattribute hinzufügen.

Block-Registerkarte in Gutenberg
Über die Registerkarte Block kannst du auf alle Einstellungen des Blocks zugreifen

Wenn es um die Benutzerfreundlichkeit geht, ist Elementor dafür bekannt Dinge intuitiv zu gestalten. Allerdings gibt es eine Lernkurve, was vor allem an der umfangreichen Sammlung von Funktionen liegt.

Im Editor erhältst du eine exakte Nachbildung des Frontends einer Seite als Editor. Jedes Elementor-Inhaltswidget kann aus der Bibliothek gezogen oder bearbeitet werden.

Kategorisierung in Elementor vs Gutenberg.
Kategorisierte Elementor-Elemente

Obwohl die Kategorien keine sinnvollen Namen haben, kannst du die Widgets unter Basic, Pro, General, Site, WooCommerce und WordPress finden. Außerdem gibt es eine Favoritenleiste, in der du benutzerdefinierte Widgets für später speichern kannst.

Die wahre Benutzerfreundlichkeit von Elementor ergibt sich aus dem rasterbasierten Editor, der es dir ermöglicht, ein Element per Drag & Drop an eine beliebige Stelle auf der Seite zu ziehen. Außerdem kannst du ganze Abschnitte verschieben, Abschnitte löschen oder hinzufügen, indem du im Editor klickst.

Verschieben eines Blocks in Elementor
Ziehen eines Blocks an eine andere Stelle

Außerdem haben wir schnellen Zugriff auf die Block- und Vorlagenbibliothek. Speichere eigene Vorlagen für die spätere Verwendung oder nutze die professionell gestalteten Blöcke und Seitenvorlagen. Viele von ihnen sind für bestimmte Situationen gedacht, z. B. wenn du eine 404-Seite oder einen benutzerdefinierten WooCommerce-Warenkorb brauchst.

404 Seitenblöcke in Elementor
Das ist nur ein kleiner Teil der Blöcke, die über Elementor verfügbar sind

Der größte Nachteil der Elementor-Schnittstelle ist, dass sie von Drittanbietern stammt. Du musst ein Plugin installieren, damit es in WordPress aktiv ist. Selbst dann musst du immer auf die Schaltfläche Mit Elementor bearbeiten klicken, da Gutenberg technisch gesehen noch im Hintergrund installiert ist.

Insgesamt ist die Gutenberg-Oberfläche einfacher zu verstehen, aber es geht nichts über die Arbeit mit Elementor. Es ist flüssig, macht Spaß und kann viel mehr als Gutenberg, wenn du erst einmal den Dreh raus hast.

Leistung und Auswirkungen auf die Seitengeschwindigkeit: Gutenberg vs. Elementor

Page Builder bieten eine Vielzahl von Funktionen. Das kann zu einem unübersichtlichen Set von Tools führen, das mit Plugins und Themes kollidiert und auch die Seitengeschwindigkeit beeinträchtigt. Wenn du dir die Nutzerbewertungen ansiehst, scheinen Elementor und Gutenberg gut zu funktionieren, wenn du die richtigen Optimierungstools und einen schnellen Host verwendest.

In unserem Test haben wir Gutenberg und Elementor auf separaten Instanzen eines leistungsstarken Servers mit CDN (von Kinsta) installiert. Außerdem haben wir das gleiche Theme mit Demo-Inhalten verwendet, um die Tests so gleich wie möglich zu gestalten. Wir haben für beide Tests denselben Serverstandort (Iowa) verwendet und zwei gängige Plugins (WooCommerce und Yoast SEO) installiert, um zu sehen, wie die Page Builder in einer realen Umgebung reagieren.

Hier sind die Ergebnisse mit Pingdom und Google PageSpeed Insights:

Gutenberg Page Speed Tests

  • Pingdom Performance Score: 92 (Testserver in San Francisco)
  • Seitengröße: 905,2 KB
  • Ladezeit: 1.32 s
  • Anfragen: 19

Wir haben den gleichen Test mit einem Testserver in London durchgeführt:

  • Performance Score: 92
  • Seitengröße: 905,8 KB
  • Ladezeit: 1.50 s
  • Requests: 19

Und hier sind die Ergebnisse von Google PageSpeed Insights:

  • Desktop-Leistung: 99
  • Desktop-Zugänglichkeit: 100
  • Beste Praktiken für den Desktop: 92
  • Desktop-SEO: 67
  • Mobile Leistung: 93
  • Mobile Zugänglichkeit: 100
  • Mobile Best Practices: 92
  • Mobile SEO: 71

Elementor Seitengeschwindigkeitstests

  • Pingdom Performance Score: 88 (San Francisco Testserver)
  • Seitengröße: 2,5 MB
  • Ladezeit: 1.93s
  • Requests: 48

Und die Ergebnisse vom Londoner Testserver:

  • Performance Score: 87
  • Seitengröße: 2,5 MB
  • Ladezeit: 1.97s
  • Anfragen: 48

Ergebnisse von Google PageSpeed Insights:

  • Desktop-Leistung: 94
  • Desktop-Zugänglichkeit: 100
  • Beste Praktiken für den Desktop: 92
  • Desktop-SEO: 67
  • Mobile Leistung: 81
  • Mobile Zugänglichkeit: 100
  • Mobile Best Practices: 92
  • Mobile SEO: 71

Gutenberg lieferte fast immer einen höheren Leistungswert, eine geringere Seitengröße und eine schnellere Ladezeit sowie weniger Anfragen. Das könnte jedoch daran liegen, dass Elementor über fortschrittlichere Blockdesigns verfügt und Gutenberg technisch gesehen immer zusammen mit Elementor installiert wird, sodass du zwei Page Builder gleichzeitig verwenden musst, was die Seite verlangsamen kann.

Trotzdem bieten beide hohe Geschwindigkeiten. Das Wichtigste, um akzeptable Seitengeschwindigkeiten zu erhalten, ist die Entscheidung für einen verwalteten, CDN-gestützten Hoster wie Kinsta.

Preisgestaltung: Gutenberg vs. Elementor

Du kannst sowohl Gutenberg als auch Elementor kostenlos erhalten. Der Hauptunterschied besteht darin, dass Gutenberg komplett und für immer kostenlos ist. Elementor bietet eine robuste kostenlose Version seines Page Builders und verschiedene Upgrades und Add-ons für diejenigen, die an erweiterten Funktionen interessiert sind.

Gutenberg-Preise

Kostenlos, da es der WordPress-Editor ist und standardmäßig in WordPress integriert ist.

Elementor Preise

Die Marke Elementor bietet noch weitere Produkte und Dienstleistungen an, aber für diesen Vergleich beschränken wir uns auf die Preise für das Seitenerstellungs-Plugin.

  • Free Plan: $0 für über 40 kostenlose Widgets, Drag-and-Drop-Funktionalität und eine Entwickler-API
  • Essential Plan: $59 pro Jahr für 1 Website mit 100+ Widgets, 300+ Vorlagen, dem Drag-and-Drop Theme Builder, WooCommerce Store Builder, Landing Page Builder, Marketing Tools, Popup Builder und Premium Support
  • Expert Plan: $199 pro Jahr, um 25 Websites zu unterstützen und alle im Essential Plan genannten Funktionen zu erhalten
  • Agency Plan: $399 pro Jahr für alle in den vorherigen Plänen genannten Funktionen, aber mit Unterstützung für 1.000 Websites

Auf den ersten Blick mag es so aussehen, als ob ein „für immer kostenloses“ Plugin (wie Gutenberg) das beste Angebot ist. Aber die kostenlose Version von Elementor bietet genug Tools für viele Arten von Projekten, und die Premium-Pläne sind preisgünstig.

Wir sind der Meinung, dass Elementor ein besseres Preis-Leistungs-Verhältnis als Gutenberg bietet, weil es ein schlankeres, leistungsfähigeres Tool ist als Gutenberg und du viele der Funktionen kostenlos nutzen kannst. Aber wenn du dein Budget für immer bei 0 $ halten musst, ist Gutenberg genau das Richtige für dich.

Kompatibilität mit Themes und Plugins: Gutenberg vs. Elementor

Es ist schwierig, die Kompatibilität (oder deren Fehlen) von Page Buildern mit den Tausenden von WordPress-Themes und Plugins auf dem Markt zu bestimmen. Wir können jedoch anhand von Nutzerbewertungen herausfinden, ob es eklatante Kompatibilitätsprobleme mit beliebten Themes oder Plugins gibt.

Gutenberg scheint mit den meisten Themes und Plugins zu funktionieren. Schließlich müssen die Entwickler von Drittanbietern auf den Page Builder eingehen, da Gutenberg standardmäßig in WordPress integriert ist.

Nach unseren Recherchen treten die meisten Kompatibilitätsprobleme mit Gutenberg auf, wenn sie mit anderen Page Buildern auf derselben Website kombiniert werden. Wir haben auch festgestellt, dass die Plugin-Entwickler eine Aufholjagd starten, um Gutenberg-Blöcke für ihre Plugins zu entwickeln. Daher kann es sein, dass einige ältere, weniger häufig aktualisierte Plugins keine Gutenberg-Blöcke enthalten.

Zum Zeitpunkt dieses Artikels gibt es etwa 12 offene Kompatibilitätsfragen in den WordPress.org-Foren, von denen einige anscheinend auf Benutzerfehler zurückzuführen sind. Aber es ist nicht abwegig anzunehmen, dass du auf einige Probleme stoßen könntest.

Elementor ist in der WordPress-Community für seine solide Kompatibilität bekannt. Da es sich jedoch um einen Page Builder eines Drittanbieters handelt, solltest du die Kompatibilitäts-Tags (Hinweise, die erklären, wann ein Plugin nicht kompatibel ist) im Auge behalten. Und wenn du nach einem Theme suchst, solltest du immer prüfen, ob es mit Elementor kompatibel ist (wenn du es als Page Builder verwendest).

Sowohl bei Gutenberg als auch bei Elementor musst du nach „Mehrzweck“-WordPress-Themes mit Starter-Vorlagen Ausschau halten. Diese Starter-Vorlagen wurden für bestimmte Page Builder entwickelt, sodass eine Vorlage für Gutenberg nicht mit Elementor funktionieren wird und umgekehrt. Und bei einigen Themes gibt es überhaupt keine Starter-Vorlagen für diese Page Builder.

Backend- vs. Frontend-Bearbeitung in Gutenberg und Elementor

Es gibt keine Möglichkeit, Inhalte im Frontend einer Website mit Gutenberg zu bearbeiten. Aber genau das ist der Sinn der Sache. Gutenberg ist bestrebt, Aspekte der Frontend-Bearbeitung mit der Backend-Bearbeitung zu kombinieren, sodass du dich auf eine einzige Oberfläche beschränken kannst.

So findet zum Beispiel die gesamte Bearbeitung im Backend von WordPress statt, aber viele der Blöcke werden im Vollbildmodus angezeigt, damit du eine möglichst realistische Vorstellung davon bekommst, was dich bei der Veröffentlichung erwartet.

Backend von Gutenberg vs Elementor
Das Gutenberg-Backend mit seinen Blöcken und Hintergründen in der Vollanzeige

Elementor ist da nicht viel anders. Früher gab es sowohl Backend- als auch Frontend-Bearbeitung, aber dann wurde die Bearbeitung in einem Modul zusammengefasst. Es ist also nicht möglich, Elemente im Frontend deiner Website zu verschieben.

Elementor bringt deine Seiten und Beiträge jedoch in seinen eigenen Backend-Editor, der eine schöne Vorschau der Frontend-Seite bietet. Auf diese Weise siehst du genau, was passiert, wenn du eine Änderung vornimmst.

Der Elementor-Editor
Der Elementor-Editor

Und schließlich haben beide Seitenersteller eine automatische Speicherfunktion und manuelle Speicherschaltflächen.

Kundenbetreuung: Gutenberg vs. Elementor

Oft erhältst du nur dann Kundensupport, wenn du für einen Page Builder bezahlst. Während unserer Recherche traf diese Annahme sowohl auf Gutenberg als auch auf Elementor zu.

Für den eigenständigen Gutenberg Page Builder gibt es keinen direkten Kundensupport. Du kannst jedoch Probleme im Gutenberg-Benutzerforum diskutieren. WordPress.com-Mitglieder erhalten einen eigenen Kundensupport, so dass du sie bitten kannst, dir bei Fragen zu Gutenberg zu helfen. WordPress.org-Nutzer/innen müssen leider auf Foren und Blogbeiträge zurückgreifen, um ihre eigenen Nachforschungen anzustellen.

Das kostenlose Elementor-Plugin hat eine Wissensdatenbank und ein Benutzerforum.

Hilfebereich mit Suchleiste von Elementor
In der Elementor Academy kannst du nach Hilfedokumenten suchen

Um E-Mail-Support von einer echten Person zu erhalten, musst du für Elementor Pro bezahlen. Allerdings gibt es ein Live-Chat-Modul für Verkaufsfragen.

Gutenberg vs. Elementor: Welcher Page Builder ist besser?Gutenberg vs. Elementor: Wofür solltest du dich entscheiden?

Nach jahrelanger Erfahrung in der Zusammenarbeit mit WordPress-Nutzern und einem detaillierten Vergleich zwischen Gutenberg und Elementor sind wir zu einigen endgültigen Schlussfolgerungen gekommen.

Hier sind die wichtigsten Punkte:

  • Die Funktionen von Gutenberg sind einfacher als die von Elementor. Sie eignen sich gut für die Grundlagen des Webdesigns, aber Power-User werden die erweiterten Stileinstellungen und Inhaltsblöcke von Elementor bevorzugen.
  • Die Gutenberg-Benutzeroberfläche ist in WordPress integriert, während die von Elementor immer ein Drittanbieter-Plugin sein wird. Allerdings ist das Benutzererlebnis in Elementor nahtlos, während es in Gutenberg viel schwieriger ist, ein Element einfach per Drag & Drop zu verschieben.
  • Was die Leistung angeht, sind sowohl Gutenberg als auch Elementor gut. Das haben unsere Tests gezeigt. Trotzdem kann es zu einer Verlangsamung der Seitengeschwindigkeit kommen. Das kannst du in erster Linie mit einem guten Hoster wie Kinsta umgehen.
  • Gutenberg ist immer kostenlos, aber du bist auf das angewiesen, was da ist. Elementor hat eine leistungsstarke kostenlose Version mit der Option, ein Upgrade für mehr Funktionen und echten Kundensupport zu erwerben.
  • Gutenberg und Elementor sind mit einer Vielzahl von WordPress-Themes und -Plugins kompatibel.
  • Die Backend-Bearbeitung in Gutenberg bietet eine visuell ansprechende Oberfläche mit schnellen Styling-Optionen. Eine Frontend-Bearbeitung gibt es nicht. Du kannst jedoch eine Live-Ansicht des Frontends im Backend-Editor sehen. Elementor bietet ebenfalls nur Backend-Bearbeitung, aber mit einer echten Vorschau, die alles vom Frontend zeigt.
  • Gutenberg hat Abschnittsvorlagen, aber sonst nichts. Elementor ist vollgepackt mit Abschnitts-, Website-, Seiten-, Header- und Landing-Page-Vorlagen, für die alle ein Premium-Abo erforderlich ist.
  • Der Kundensupport für Gutenberg findet sich in Benutzerforen und in allen Blogbeiträgen, die du darüber finden kannst. Zahlende WordPress.com-Benutzer können Unterstützung für Gutenberg erhalten. Bezahlende Elementor-Nutzer erhalten menschlichen Support, während kostenlose Nutzer Zugang zu vielen Online-Ressourcen, einschließlich einer Wissensdatenbank, erhalten.

Zusammenfassung

Jeder Page Builder hat seinen Platz. Elementor ist für erfahrene Nutzer/innen oder diejenigen, die eine Bibliothek mit Seitenvorlagen benötigen. Gutenberg ist der fertige Page Builder für WordPress mit vereinfachten und leicht zu bedienenden Styling-Tools und Einstellungen und damit perfekt für die schnelle Erstellung von Inhalten.

Wenn du eine WordPress-Website erstellst, brauchst du einen leistungsstarken Hoster an deiner Seite. Bei Kinsta bieten wir eine Reihe von leistungsoptimierten WordPress-Hosting-Paketen für alle deine Elementor- oder Gutenberg-Anforderungen.

Jeremy Holcombe Kinsta

Content & Marketing Editor at Kinsta, WordPress Web Developer, and Content Writer. Outside of all things WordPress, I enjoy the beach, golf, and movies. I also have tall people problems ;).