Was ist Gutenberg?<\/h2>\n
Gutenberg<\/a> ist der Standard-Seiten-Builder von WordPress. Er wurde 2018 eingef\u00fchrt und ersetzte den sogenannten „klassischen“ WordPress-Editor, der urspr\u00fcnglich ein Rich-Text\/HTML-Editor ohne Drag-and-Drop-Funktion war.<\/p>\n Gutenberg war eigentlich eine Reaktion auf eine Welle von Page-Builder-Plugins von Drittanbietern<\/a>, darunter Elementor<\/a>, Divi<\/a> und Visual Composer, die alle herauskamen, um den klassischen Editor zu ersetzen.<\/p>\n Gutenberg bietet eine leicht zug\u00e4ngliche „Block“-Bibliothek zum Ziehen von Inhaltselementen auf Seiten und Beitr\u00e4ge.<\/p>\n Gutenberg verf\u00fcgt \u00fcber fast 100 Inhaltsbl\u00f6cke, von denen einige die Integration und Einbettung von Drittanbieterdiensten wie Twitter, Reddit und Amazon Kindle erm\u00f6glichen. Es ist auch m\u00f6glich, dynamische Bl\u00f6cke zu erstellen<\/a>, um den Inhalt des Blocks automatisch zu aktualisieren. Einige Beispiele f\u00fcr Gutenberg-Bl\u00f6cke sind:<\/p>\n Die meisten WordPress-Themes funktionieren gut mit Gutenberg (das ist jetzt im Grunde Pflicht).<\/p>\n Die Gutenberg-Benutzeroberfl\u00e4che stellt den Inhalt von Seiten oder Beitr\u00e4gen in den Mittelpunkt und zeigt, wenn m\u00f6glich, gerenderte Inhalte (wie Formulare oder Schaltfl\u00e4chen) an. Das ist ein deutliches Upgrade gegen\u00fcber dem klassischen Editor, da Gutenberg neben der visuellen Benutzererfahrung auch eine schnelle Markdown-Bearbeitung unterst\u00fctzt. Bei Bedarf hast du direkten Zugriff auf benutzerdefinierte Codierungsbereiche f\u00fcr CSS<\/a> und HTML<\/a>.<\/p>\n Jeder Block bietet eine eigene lange Liste von Einstellungen, und Gutenberg verf\u00fcgt \u00fcber Quick Panels f\u00fcr eine leistungsstarke Kontrolle \u00fcber Dokument- und Blockeinstellungen wie Alt-Tags, Hintergrundfarben und Kommentar-Moderation.<\/p>\n Elementor ist ein Page Builder, \u00e4hnlich wie Gutenberg. Elementor war jedoch schon vor Gutenberg eine der Page-Builder-Apps von Drittanbietern, die schlie\u00dflich zur Schaffung eines Standard-WordPress-Seiten-Builders gef\u00fchrt haben.<\/p>\n Seit seiner Einf\u00fchrung im Jahr 2016 ist Elementor bei WordPress-Designern sehr beliebt<\/a>, denn es bietet eine vollst\u00e4ndig visuelle Webdesign-Oberfl\u00e4che, elegante Startvorlagen<\/a> (die importiert werden k\u00f6nnen) und Drag-and-Drop-Inhaltsmodule.<\/p>\n Einer der auff\u00e4lligsten 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).<\/p>\n Du wirst auch feststellen, dass Elementor einzigartige Namen f\u00fcr seine Funktionen hat. Was in Gutenberg „Bl\u00f6cke“ genannt wird, hei\u00dft bei Elementor „Widgets“. Apropos, Elementor hat \u00fcber 100 solcher Inhaltswidgets.<\/p>\n Beispiele f\u00fcr Elementor Content Widgets:<\/p>\n Viele der Widgets schaffen Integrationen zwischen einer WordPress-Website und Apps von Drittanbietern, wie Stripe<\/a>, Facebook und Sound Cloud.<\/p>\n Insgesamt ist Elementor einer der besten WordPress-Seitenersteller mit einer lebendigen Community von Entwicklern und Nutzern. Die visuelle Drag-and-Drop-Oberfl\u00e4che ist kaum zu \u00fcbertreffen, du erh\u00e4ltst Hunderte von Designervorlagen und alle Bearbeitungen werden live durchgef\u00fchrt.<\/p>\n Zusammen mit den speziellen WooCommerce-Widgets<\/a> und den Marketing-Tools f\u00fcr 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.<\/p>\n Wir vergleichen Gutenberg und Elementor in Bereichen wie Funktionen, Benutzeroberfl\u00e4che, Preise und mehr. Nach unserem Vergleich kannst du besser einsch\u00e4tzen, welcher Page Builder der richtige f\u00fcr deine Bed\u00fcrfnisse ist.<\/p>\n In diesem Abschnitt haben wir die unserer Meinung nach wichtigsten Funktionen eines Page Builders herausgesucht und vergleichen Gutenberg und Elementor in jeder Kategorie.<\/p>\n Das Problem mit Page Buildern ist, dass sie die Benutzeroberfl\u00e4che oft mit visuellen Erstellungswerkzeugen f\u00fcllen und die fortgeschrittenen Funktionen, wie z. B. die Codebearbeitung, aus dem Blickfeld verdr\u00e4ngen.<\/p>\n Wir bevorzugen eine Mischung aus beidem, bei der Anf\u00e4nger eine schlanke, leicht zug\u00e4ngliche Drag-and-Drop-Oberfl\u00e4che haben und Fortgeschrittene CSS verwenden k\u00f6nnen, ohne nach dem richtigen Feld suchen zu m\u00fcssen.<\/p>\n Gutenbergs Drag-and-Drop-Funktionalit\u00e4t ist unkompliziert und ohne Verz\u00f6gerung. Es dauert nur einen Moment, um nach Inhaltsbl\u00f6cken zu suchen und sie in den Inhalt zu ziehen – oder zu klicken und einzuf\u00fcgen. Dann erscheinen die Blockeinstellungen zur Anpassung.<\/p>\n Ein Nachteil ist, dass du beim Ziehen von bereits platzierten Bl\u00f6cken zuerst einen Block ausw\u00e4hlen und dann auf ein kleines Ziehen<\/strong>-Symbol klicken und halten musst. Das erfordert Pr\u00e4zision beim Klicken, was bei anderen Page Buildern nicht n\u00f6tig ist.<\/p>\n Wenn es um die Programmierung geht, ist der Code-Editor<\/strong> von Gutenberg leicht zu finden.<\/p>\n Nutzerinnen und Nutzer haben Probleme mit Bl\u00f6cken, die ihren Code durcheinanderbringen, und Schwierigkeiten mit den vorgefertigten Bl\u00f6cken festgestellt, so dass Entwicklerinnen und Entwickler Dutzende von benutzerdefinierten Bl\u00f6cken erstellen m\u00fcssen.<\/p>\n Trotz der Beschwerden hat sich der Page Builder f\u00fcr Programmierer verbessert, und die Werkzeuge sind definitiv vorhanden, aber vielleicht mit einer steileren Lernkurve als im klassischen Editor.<\/p>\n Du kannst sogar HTML-Anker und zus\u00e4tzliche CSS-Klassen direkt auf der Registerkarte Bl\u00f6cke<\/strong> in Gutenberg hinzuf\u00fcgen, wozu du dich fr\u00fcher m\u00fchsam durch die Registerkarte HTML<\/strong>\u00a0im klassischen Editor qu\u00e4len musstest.<\/p>\n Elementor bietet auch eine Drag-and-Drop-Funktionalit\u00e4t. Es funktioniert mit den meisten WordPress-Themes<\/a> und bietet eine Bibliothek von Bl\u00f6cken, die du schnell in jede Seite einf\u00fcgen kannst.<\/p>\n Da Elementor ein halbautomatisch generiertes Rastersystem verwendet, ist es m\u00f6glich, Widgets in den meisten Bereichen einer Seite zu platzieren.<\/p>\n Das Verschieben von bereits platzierten Inhaltsbl\u00f6cken ist in Elementor einfacher als in Gutenberg. Du klickst einfach irgendwo auf den Block und h\u00e4ltst ihn gedr\u00fcckt, um ihn zu verschieben.<\/p>\n Wenn du ein Inhalts-Widget einf\u00fcgst oder ausw\u00e4hlst, 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<\/a> hinzuf\u00fcgen.<\/p>\n Elementor bietet auch HTML-Code<\/strong>-Widgets, mit denen du auf einer Webseite eigene Codes einf\u00fcgen kannst.<\/p>\n Insgesamt ist die Drag-and-Drop-Funktionalit\u00e4t von Elementor st\u00e4rker als die von Gutenberg. Dennoch sind die Optionen f\u00fcr benutzerdefinierte Kodierung in beiden Page Buildern gleich gut zug\u00e4nglich.<\/p>\n Vorlagen f\u00fcr den Seitenersteller erm\u00f6glichen 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.<\/p>\n Viele Page Builder bieten vorgefertigte Vorlagen f\u00fcr:<\/p>\n Gutenberg hat einen gro\u00dfen Mangel an vorgefertigten Vorlagen. Die Registerkarte Muster<\/strong> bietet hilfreiche Abschnittsvorlagen, aber das war’s auch schon.<\/p>\n Es ist jedoch m\u00f6glich, Plugins von Drittanbietern mit Startvorlagen f\u00fcr Seiten und ganze Websites zu installieren. Plugins wie Gutentor<\/a>, Twentig<\/a> und Otter Blocks<\/a> eignen sich alle daf\u00fcr.<\/p>\n Elementor hingegen bietet in seinem Theme Builder Hunderte von Startvorlagen<\/a> an.<\/p>\n Zu den Vorlagen von Elementor geh\u00f6ren:<\/p>\n Fast alle Vorlagen von Elementor erfordern ein Premium-Abonnement, aber das ist erschwinglich und besser als das, was du von Gutenberg bekommst.<\/p>\n Die Styling-Funktionen in Gutenberg erm\u00f6glichen schnelle Anpassungen im Block-Panel<\/strong> auf der rechten Seite – nachdem du den Block ausgew\u00e4hlt hast, den du bearbeiten m\u00f6chtest.<\/p>\n Die Stileinstellungen sind im Vergleich zu Elementor recht einfach, aber das Wesentliche ist fast immer vorhanden, z. B. Optionen zum \u00c4ndern von Rahmen und Abmessungen f\u00fcr Bilder oder Farb-, Typografie- und Randeinstellungen f\u00fcr Absatzbl\u00f6cke.<\/p>\n Neben den benutzerdefinierten CSS f\u00fcr alle Bl\u00f6cke findest du eine schwebende Symbolleiste, wenn ein Block angeklickt wird. Dieser Bereich bietet die M\u00f6glichkeit, Text zu gestalten, mit HTML zu bearbeiten, zu kopieren und zu duplizieren.<\/p>\n Die Stileinstellungen in Elementor befinden sich auf drei Registerkarten, wenn ein Widget ausgew\u00e4hlt ist. Passe die Inhaltseinstellungen f\u00fcr die Bild- und Textgr\u00f6\u00dfe an und st\u00fcrze dich dann in die fortgeschrittenen Bereiche mit allem, was von Hover-Animationen \u00fcber CSS-Filter und Masken bis hin zu Transformations-Effekten reicht.<\/p>\n Elementor hat zweifelsohne eine gr\u00f6\u00dfere Auswahl an Styling-Tools als Gutenberg. Wer es jedoch m\u00f6glichst einfach haben m\u00f6chte, wird sich mit den Styling-Funktionen von Gutenberg wohlf\u00fchlen.<\/p>\n Gutenberg verf\u00fcgt \u00fcber etwas mehr als 90 Inhaltsbl\u00f6cke. Elementor bietet \u00fcber 100.<\/p>\n Hier sind die Gutenberg-Blockkategorien:<\/p>\n Du bekommst alle wichtigen Elemente (Absatz-, Bild- und Schaltfl\u00e4chenbl\u00f6cke) sowie einzigartige Elemente f\u00fcr Dinge wie Speaker Deck, Kickstarter, Query Loops, Verse, Time To Read und mehr.<\/p>\n Elementor kategorisiert auch seine Inhaltswidgets:<\/p>\n Das sind zwar nicht die hilfreichsten Kategorien, aber zumindest sind sie einigerma\u00dfen organisiert.<\/p>\n Standard-Inhaltswidgets wie Trennlinien, Abschnitte und \u00dcberschriften sind vorhanden. Au\u00dferdem gibt es einzigartige Widgets f\u00fcr Google Maps<\/a>, Code Highlights, WooCommerce Produktdaten und mehr.<\/p>\n Unser Fazit ist, dass Gutenberg seine Inhaltsbl\u00f6cke viel besser organisiert und erkl\u00e4rt, aber Elementor bietet eine gr\u00f6\u00dfere Anzahl von Bl\u00f6cken (Widgets) mit st\u00e4rkeren Einstellungen.<\/p>\n WooCommerce<\/a> ist ein Plugin eines Drittanbieters, mit dem du jede WordPress-Seite in einen Onlineshop verwandeln kannst. In Verbindung mit einem Page Builder erh\u00e4ltst du oft WooCommerce-Bl\u00f6cke, mit denen du den Warenkorb<\/a>, die Produktseiten und vieles mehr besser anpassen kannst.<\/p>\n Gutenberg ist da keine Ausnahme. Sobald du WooCommerce installiert hast, erscheint eine Vielzahl von Gutenberg-Bl\u00f6cken, mit denen du das Design deines WooCommerce-Shops verbessern kannst. Es gibt Bl\u00f6cke f\u00fcr die Produktsuche, Optionen f\u00fcr die Anzeige von aktiven Filtern und M\u00f6glichkeiten zur Anzeige der meistverkauften Produkte. Wir haben 26 Gutenberg\/WooCommerce-Bl\u00f6cke gez\u00e4hlt, und es gibt mehrere Plugins von Drittanbietern, die diese Liste noch erweitern.<\/p>\n 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\u00f6cke bieten leistungsf\u00e4higere Styling-Tools als alles in Gutenberg.<\/p>\n Zum Zeitpunkt dieses Artikels waren 20 WooCommerce-Bl\u00f6cke \u00fcber Elementor verf\u00fcgbar. Die Liste umfasst Produktbilder, Buttons zum Hinzuf\u00fcgen zum Warenkorb, Produktbewertungen und Produktgalerien.<\/p>\n Es gibt sogar einzigartige Widgets wie Upsells und Product Meta Data.<\/p>\n Es ist wichtig, Integrationen nicht mit Kompatibilit\u00e4t zu verwechseln. Wir werden weiter unten in diesem Artikel auf die Kompatibilit\u00e4t von Themes und Plugins eingehen, aber Integrationen sind eher Links zu anderen Anwendungen, Plattformen und Software, \u00fcber die Daten an den oder vom Page Builder gesendet werden.<\/p>\n Eine Integration mit Facebook kann zum Beispiel eine Schaltfl\u00e4che anzeigen, mit der man deiner Seite folgen kann, oder eine Liste deiner letzten Facebook-Beitr\u00e4ge.<\/p>\n Gutenberg hat eine kurze Liste direkter Integrationen, die haupts\u00e4chlich Bl\u00f6cke verwenden, um Inhalte aus externen Quellen zu beziehen.<\/p>\n Hier ist ein Vorgeschmack auf die 32 aktuellen Gutenberg-Integrationen:<\/p>\n Elementor hat eine lange Liste von Integrationen, von Medienplattformen bis zu sozialen Websites.<\/p>\n Hier sind einige der \u00fcber 40 Integrationen von Elementor:<\/p>\n Beide haben respektable Integrationen, aber die Elementor-Integrationen scheinen st\u00e4rker und umfangreicher zu sein. In Elementor kannst du bekannte E-Mail-Marketing-Anbieter einbinden, \u00fcber Zahlungsanbieter verkaufen und eine Verbindung zu deiner Customer Relationship Management-Software<\/a> herstellen. Gutenberg hingegen konzentriert sich mehr auf die Verkn\u00fcpfung mit Mediatheken und sozialen Websites.<\/p>\n Die ersten Schritte mit Gutenberg sind so intuitiv wie WordPress selbst. Das liegt daran, dass Gutenberg automatisch in das WordPress-Dashboard<\/a> integriert ist. Es ist nicht n\u00f6tig, ein Plugin oder Add-on zu installieren. \u00d6ffne einfach einen Seiten- oder Beitragseditor, und Gutenberg macht sich an die Arbeit.<\/p>\n Du kannst nach Bl\u00f6cken suchen und sie einf\u00fcgen, indem du auf eine der vielen +<\/strong>\u00a0-Schaltfl\u00e4chen (Block hinzuf\u00fcgen)<\/strong> klickst, die \u00fcberall im Editor verteilt sind. Es gibt eine Suchleiste und verschiedene Registerkarten f\u00fcr Bl\u00f6cke<\/strong>, Muster<\/strong> und Medien<\/strong>. Du wirst sogar feststellen, dass Gutenberg mit beliebten Creative-Commons-Bildanbietern zusammenarbeitet, um geeignete Grafiken kostenlos zu finden.<\/p>\n Die schnelle Erstellung von Inhalten macht Gutenberg zu einem der besten Page Builder<\/a> f\u00fcr Blogger und alle, die online publizieren. Du kannst direkt in den Editor schreiben und Markups und Tastenkombinationen verwenden, um Elemente wie \u00dcberschriften, Links und Bilder schnell einzuf\u00fcgen.<\/p>\n Au\u00dferdem l\u00e4sst 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\u00fcssen).<\/p>\n Auf der Registerkarte Seite<\/strong>\u00a0findest du Einstellungen f\u00fcr die Ver\u00f6ffentlichung und f\u00fcr Seiten, z. B. Werkzeuge f\u00fcr Bilder, Ausz\u00fcge und Kommentare.<\/p>\n Auch blockbezogene Einstellungen lassen sich leicht anpassen. Klicke einfach auf die Registerkarte Block<\/strong>. Dadurch werden die einzigartigen Anpassungsfunktionen f\u00fcr den von dir ausgew\u00e4hlten Block ge\u00f6ffnet. Bei einem Bildblock<\/strong> zum Beispiel siehst du alles von Alt-Text-Feldern<\/strong> bis hin zu Einstellungen f\u00fcr die Bildgr\u00f6\u00dfe<\/strong>. Hier kannst du auch CSS-Tags<\/strong>, HTML-Anker<\/strong> oder Titelattribute<\/strong> hinzuf\u00fcgen.<\/p>\n Wenn es um die Benutzerfreundlichkeit geht, ist Elementor daf\u00fcr bekannt Dinge intuitiv zu gestalten. Allerdings gibt es eine Lernkurve, was vor allem an der umfangreichen Sammlung von Funktionen liegt.<\/p>\n Im Editor erh\u00e4ltst du eine exakte Nachbildung des Frontends einer Seite als Editor. Jedes Elementor-Inhaltswidget kann aus der Bibliothek gezogen oder bearbeitet werden.<\/p>\n Obwohl die Kategorien keine sinnvollen Namen haben, kannst du die Widgets unter Basic<\/strong>, Pro<\/strong>, General<\/strong>, Site<\/strong>, WooCommerce<\/strong> und WordPress<\/strong> finden. Au\u00dferdem gibt es eine Favoritenleiste<\/strong>, in der du benutzerdefinierte Widgets f\u00fcr sp\u00e4ter speichern kannst.<\/p>\n Die wahre Benutzerfreundlichkeit von Elementor ergibt sich aus dem rasterbasierten Editor, der es dir erm\u00f6glicht, ein Element per Drag & Drop an eine beliebige Stelle auf der Seite zu ziehen. Au\u00dferdem kannst du ganze Abschnitte verschieben, Abschnitte l\u00f6schen oder hinzuf\u00fcgen, indem du im Editor klickst.<\/p>\n Au\u00dferdem haben wir schnellen Zugriff auf die Block- und Vorlagenbibliothek. Speichere eigene Vorlagen<\/a> f\u00fcr die sp\u00e4tere Verwendung oder nutze die professionell gestalteten Bl\u00f6cke und Seitenvorlagen. Viele von ihnen sind f\u00fcr bestimmte Situationen gedacht, z. B. wenn du eine 404-Seite<\/a> oder einen benutzerdefinierten WooCommerce-Warenkorb brauchst.<\/p>\n Der gr\u00f6\u00dfte 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\u00e4che Mit Elementor bearbeiten<\/strong>\u00a0klicken, da Gutenberg technisch gesehen noch im Hintergrund installiert ist.<\/p>\n Insgesamt ist die Gutenberg-Oberfl\u00e4che einfacher zu verstehen, aber es geht nichts \u00fcber die Arbeit mit Elementor. Es ist fl\u00fcssig, macht Spa\u00df und kann viel mehr als Gutenberg, wenn du erst einmal den Dreh raus hast.<\/p>\n Page Builder bieten eine Vielzahl von Funktionen. Das kann zu einem un\u00fcbersichtlichen Set von Tools f\u00fchren, das mit Plugins und Themes kollidiert und auch die Seitengeschwindigkeit beeintr\u00e4chtigt. Wenn du dir die Nutzerbewertungen ansiehst, scheinen Elementor und Gutenberg gut zu funktionieren, wenn du die richtigen Optimierungstools und einen schnellen Host verwendest.<\/p>\n In unserem Test haben wir Gutenberg und Elementor auf separaten Instanzen eines leistungsstarken Servers mit CDN (von Kinsta)<\/a> installiert. Au\u00dferdem haben wir das gleiche Theme mit Demo-Inhalten verwendet, um die Tests so gleich wie m\u00f6glich zu gestalten. Wir haben f\u00fcr beide Tests denselben Serverstandort (Iowa) verwendet und zwei g\u00e4ngige Plugins (WooCommerce und Yoast SEO<\/a>) installiert, um zu sehen, wie die Page Builder in einer realen Umgebung reagieren.<\/p>\n Hier sind die Ergebnisse mit Pingdom<\/a> und Google PageSpeed Insights<\/a>:<\/p>\n Wir haben den gleichen Test mit einem Testserver in London durchgef\u00fchrt:<\/p>\n Und hier sind die Ergebnisse von Google PageSpeed Insights:<\/p>\n Und die Ergebnisse vom Londoner Testserver:<\/p>\n Ergebnisse von Google PageSpeed Insights:<\/p>\n Gutenberg lieferte fast immer einen h\u00f6heren Leistungswert, eine geringere Seitengr\u00f6\u00dfe und eine schnellere Ladezeit sowie weniger Anfragen. Das k\u00f6nnte jedoch daran liegen, dass Elementor \u00fcber fortschrittlichere Blockdesigns verf\u00fcgt und Gutenberg technisch gesehen immer zusammen mit Elementor installiert wird, sodass du zwei Page Builder gleichzeitig verwenden musst, was die Seite verlangsamen kann.<\/p>\n Trotzdem bieten beide hohe Geschwindigkeiten. Das Wichtigste, um akzeptable Seitengeschwindigkeiten zu erhalten, ist die Entscheidung f\u00fcr einen verwalteten, CDN-gest\u00fctzten Hoster wie Kinsta.<\/p>\n Du kannst sowohl Gutenberg als auch Elementor kostenlos erhalten. Der Hauptunterschied besteht darin, dass Gutenberg komplett und f\u00fcr immer kostenlos ist. Elementor bietet eine robuste kostenlose Version seines Page Builders und verschiedene Upgrades und Add-ons f\u00fcr diejenigen, die an erweiterten Funktionen interessiert sind.<\/p>\n Kostenlos, da es der WordPress-Editor ist und standardm\u00e4\u00dfig in WordPress integriert ist.<\/p>\n Die Marke Elementor bietet noch weitere Produkte und Dienstleistungen an, aber f\u00fcr diesen Vergleich beschr\u00e4nken wir uns auf die Preise f\u00fcr das Seitenerstellungs-Plugin.<\/p>\n Auf den ersten Blick mag es so aussehen, als ob ein „f\u00fcr immer kostenloses“ Plugin (wie Gutenberg) das beste Angebot ist. Aber die kostenlose Version von Elementor bietet genug Tools f\u00fcr viele Arten von Projekten, und die Premium-Pl\u00e4ne sind preisg\u00fcnstig.<\/p>\n Wir sind der Meinung, dass Elementor ein besseres Preis-Leistungs-Verh\u00e4ltnis als Gutenberg bietet, weil es ein schlankeres, leistungsf\u00e4higeres Tool ist als Gutenberg und du viele der Funktionen kostenlos nutzen kannst. Aber wenn du dein Budget f\u00fcr immer bei 0 $ halten musst, ist Gutenberg genau das Richtige f\u00fcr dich.<\/p>\n Es ist schwierig, die Kompatibilit\u00e4t (oder deren Fehlen) von Page Buildern mit den Tausenden von WordPress-Themes und Plugins auf dem Markt zu bestimmen. Wir k\u00f6nnen jedoch anhand von Nutzerbewertungen herausfinden, ob es eklatante Kompatibilit\u00e4tsprobleme mit beliebten Themes oder Plugins gibt.<\/p>\n Gutenberg scheint mit den meisten Themes und Plugins zu funktionieren. Schlie\u00dflich m\u00fcssen die Entwickler von Drittanbietern auf den Page Builder eingehen, da Gutenberg standardm\u00e4\u00dfig in WordPress integriert ist.<\/p>\n Nach unseren Recherchen treten die meisten Kompatibilit\u00e4tsprobleme 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\u00f6cke f\u00fcr ihre Plugins zu entwickeln. Daher kann es sein, dass einige \u00e4ltere, weniger h\u00e4ufig aktualisierte Plugins keine Gutenberg-Bl\u00f6cke enthalten.<\/p>\n Zum Zeitpunkt dieses Artikels gibt es etwa 12 offene Kompatibilit\u00e4tsfragen in den WordPress.org-Foren, von denen einige anscheinend auf Benutzerfehler zur\u00fcckzuf\u00fchren sind. Aber es ist nicht abwegig anzunehmen, dass du auf einige Probleme sto\u00dfen k\u00f6nntest.<\/p>\n Elementor ist in der WordPress-Community<\/a> f\u00fcr seine solide Kompatibilit\u00e4t bekannt. Da es sich jedoch um einen Page Builder eines Drittanbieters handelt, solltest du die Kompatibilit\u00e4ts-Tags<\/a> (Hinweise, die erkl\u00e4ren, wann ein Plugin nicht kompatibel ist) im Auge behalten. Und wenn du nach einem Theme suchst, solltest du immer pr\u00fcfen, ob es mit Elementor kompatibel ist (wenn du es als Page Builder verwendest).<\/p>\n Sowohl bei Gutenberg als auch bei Elementor musst du nach „Mehrzweck“-WordPress-Themes mit Starter-Vorlagen Ausschau halten. Diese Starter-Vorlagen wurden f\u00fcr bestimmte Page Builder entwickelt, sodass eine Vorlage f\u00fcr Gutenberg nicht mit Elementor funktionieren wird und umgekehrt. Und bei einigen Themes gibt es \u00fcberhaupt keine Starter-Vorlagen f\u00fcr diese Page Builder.<\/p>\n Es gibt keine M\u00f6glichkeit, 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\u00e4che beschr\u00e4nken kannst.<\/p>\n So findet zum Beispiel die gesamte Bearbeitung im Backend von WordPress statt, aber viele der Bl\u00f6cke werden im Vollbildmodus angezeigt, damit du eine m\u00f6glichst realistische Vorstellung davon bekommst, was dich bei der Ver\u00f6ffentlichung erwartet.<\/p>\n Elementor ist da nicht viel anders. Fr\u00fcher gab es sowohl Backend- als auch Frontend-Bearbeitung, aber dann wurde die Bearbeitung in einem Modul zusammengefasst. Es ist also nicht m\u00f6glich, Elemente im Frontend deiner Website zu verschieben.<\/p>\n Elementor bringt deine Seiten und Beitr\u00e4ge jedoch in seinen eigenen Backend-Editor, der eine sch\u00f6ne Vorschau der Frontend-Seite bietet. Auf diese Weise siehst du genau, was passiert, wenn du eine \u00c4nderung vornimmst.<\/p>\n Und schlie\u00dflich haben beide Seitenersteller eine automatische Speicherfunktion und manuelle Speicherschaltfl\u00e4chen.<\/p>\n Oft erh\u00e4ltst du nur dann Kundensupport, wenn du f\u00fcr einen Page Builder bezahlst<\/em>. W\u00e4hrend unserer Recherche traf diese Annahme sowohl auf Gutenberg als auch auf Elementor zu.<\/p>\n F\u00fcr den eigenst\u00e4ndigen Gutenberg Page Builder gibt es keinen direkten Kundensupport. Du kannst jedoch Probleme im Gutenberg-Benutzerforum<\/a> 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\u00fcssen leider auf Foren und Blogbeitr\u00e4ge zur\u00fcckgreifen, um ihre eigenen Nachforschungen anzustellen.<\/p>\n Das kostenlose Elementor-Plugin hat eine Wissensdatenbank<\/a> und ein Benutzerforum<\/a>.<\/p>\n Um E-Mail-Support von einer echten Person zu erhalten, musst du f\u00fcr Elementor Pro bezahlen. Allerdings gibt es ein Live-Chat-Modul f\u00fcr Verkaufsfragen.<\/p>\n Nach jahrelanger Erfahrung in der Zusammenarbeit mit WordPress-Nutzern und einem detaillierten Vergleich zwischen Gutenberg und Elementor sind wir zu einigen endg\u00fcltigen Schlussfolgerungen gekommen.<\/p>\n Hier sind die wichtigsten Punkte:<\/p>\n Jeder Page Builder hat seinen Platz. Elementor ist f\u00fcr erfahrene Nutzer\/innen oder diejenigen, die eine Bibliothek mit Seitenvorlagen ben\u00f6tigen. Gutenberg ist der fertige Page Builder f\u00fcr WordPress mit vereinfachten und leicht zu bedienenden Styling-Tools und Einstellungen und damit perfekt f\u00fcr die schnelle Erstellung von Inhalten.<\/p>\n![\"Eine](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/07\/gutenberg.jpg\")
\n
Was ist Elementor?<\/h2>\n
![\"Elementor](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/07\/elementor.png\")
\n
Gutenberg und Elementor im Vergleich<\/h2>\n
Wichtige Funktionen<\/h3>\n
Drag-and-Drop-Funktionalit\u00e4t und Kodierung: Gutenberg vs. Elementor<\/h4>\n
![\"Beispiele](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/07\/gutenberg-blocks.jpg\")
![\"Ziehen](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/07\/drag-icon.jpg\"){kind=icon}
![\"Der](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/07\/code-editor.jpg\")
![\"HTML-Anker](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/07\/anchors-and-css.jpg\")
![\"Bl\u00f6cke,](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/07\/basic-blocks.jpg\")
![\"Ziehen](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/07\/drag-block.jpg\")
![\"Verschieben](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/07\/Elementor-movement.gif\")
![\"CSS](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/07\/advanced.jpg\")
![\"Gib](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/07\/html-code.jpg\")
Templates (f\u00fcr Websites, Bl\u00f6cke, Seiten, Popups und mehr): Gutenberg vs. Elementor<\/h4>\n
\n
![\"Elementor-Muster](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/07\/patterns.jpg\")
\n
![\"Elementor](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/07\/elementor-theme-builder.jpg\")
Styling: Gutenberg vs. Elementor<\/h4>\n
![\"Styling](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/07\/styling.jpg\")
![\"Toolbar](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/07\/toolbar.jpg\")
![\"Style](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/07\/style-and-more.jpg\")
Inhaltsbl\u00f6cke\/Widgets: Gutenberg vs. Elementor<\/h4>\n
\n
\n
![\"Produktbilder-Block](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/07\/product-images.jpg\")
WooCommerce-Unterst\u00fctzung: Gutenberg vs. Elementor<\/h4>\n
![\"Alle](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/07\/blocks-wocommerce.jpg\")
![\"Zus\u00e4tzliche](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/07\/additional-blocks.jpg\")
Integrationen: Gutenberg vs. Elementor<\/h4>\n
\n
\n
Benutzeroberfl\u00e4che: Gutenberg vs. Elementor<\/h3>\n
![\"Suche](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/07\/add-blocks.jpg\")
![\"Ausgew\u00e4hlte](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/07\/featured-image.jpg\")
![\"Block-Registerkarte](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/07\/block-tab.jpg\")
![\"Kategorisierung](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/07\/elementor-elements.jpg\")
![\"Verschieben](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/07\/move-block.jpg\")
![\"404](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/07\/elementor-blocks.jpg\")
Leistung und Auswirkungen auf die Seitengeschwindigkeit: Gutenberg vs. Elementor<\/h3>\n
Gutenberg Page Speed Tests<\/h4>\n
\n
\n
\n
Elementor Seitengeschwindigkeitstests<\/h4>\n
\n
\n
\n
Preisgestaltung: Gutenberg vs. Elementor<\/h3>\n
Gutenberg-Preise<\/h4>\n
Elementor Preise<\/h4>\n
\n
Kompatibilit\u00e4t mit Themes und Plugins: Gutenberg vs. Elementor<\/h3>\n
Backend- vs. Frontend-Bearbeitung in Gutenberg und Elementor<\/h3>\n
![\"Backend](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/07\/gutenberg-backend.jpg\")
![\"Der](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/07\/elementor-edit.jpg\")
Kundenbetreuung: Gutenberg vs. Elementor<\/h3>\n
![\"Hilfebereich](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/07\/search-for-help.jpg\")
Gutenberg vs. Elementor: Welcher Page Builder ist besser?Gutenberg vs. Elementor: Wof\u00fcr solltest du dich entscheiden?<\/h2>\n
\n
Zusammenfassung<\/h2>\n