So verwenden Sie Gutenberg mit Elementor – der richtige Weg

Elementor ist eines der beliebtesten WordPress-Plugins aller Zeiten – und das aus gutem Grund. Der Seitenersteller hat das Spielfeld des Webdesigns geebnet, indem er Legionen von WordPress-Benutzern geholfen hat, schöne Websites zu erstellen, ohne das Programmieren zu lernen. Aber vor kurzem hat sich der Gutenberg-Blockeditor als neuer Standard für die Erstellung von WordPress-Inhalten herausgestellt. Angesichts der Ähnlichkeiten zwischen diesen beiden Tools fragen sich viele, ob Elementor noch benötigt wird. Umgekehrt fragen sich einige langjährige Elementor-Benutzer, ob die Verwendung von Gutenberg ihre Website beschädigen wird.

Wie ich in diesem Beitrag erklären werde, ist Elementor vs. Gutenberg keine Entweder-Oder-Proposition. Jedes Tool hat etwas zu bieten. Elementor und Gutenberg arbeiten bei richtiger Anwendung gut zusammen. Es hilft, die Stärken und Schwächen jedes Tools zu verstehen und die Integration der beiden auf Ihrer Website zu planen.

In diesem Beitrag teile ich meine Best Practices für die Verwendung von Gutenberg mit Elementor. Befolgen Sie diese Richtlinien, um beide Tools optimal zu nutzen und gleichzeitig die Kompatibilität mit zukünftigen Versionen von WordPress zu wahren.

Vergleich von Elementor mit Gutenberg

Bevor ich erkläre, wie man Gutenberg und Elementor zusammen verwendet, möchte ich mir einen Moment Zeit nehmen, um die relativen Vorzüge jedes Tools zu erläutern.

Es gab einige Verwirrung über die Fähigkeiten von Gutenberg und Elementor und darüber, wie jedes Tool in einen Webdesign-Workflow passt. Meiner Meinung nach ist ein Teil dieser Verwirrung auf die Tendenz zurückzuführen, Gutenbergs gegenwärtigen Zustand zu überschätzen. Obwohl sich Gutenberg schnell weiterentwickelt und mit jeder Iteration besser wird, ist es noch lange nicht so funktionsreich oder robust wie Elementor.

Wenn neue Funktionen wie die vollständige Themenbearbeitung eintreffen, müssen wir den Platz von Gutenberg in unseren Design-Workflows überdenken. Angesichts der Geschichte von Gutenberg wird es jedoch wahrscheinlich einige Zeit dauern, bis diese neuen Funktionen in einer Produktionsumgebung nutzbar werden.

Gründe für die Verwendung von Elementor

• Elementor bietet mehr und bessere Kontrolle über das Design Ihrer Website – von einzelnen Seitenlayouts bis hin zum vollständigen Website-Design.
• Die Front-End-Inhaltsbearbeitung macht Elementor äußerst intuitiv und bietet Benutzern eine Echtzeit-Vorschau auf Änderungen. Es ist so ziemlich das, was Sie sehen, was Sie bekommen. Gutenberg hat diesbezüglich noch einen langen Weg vor sich.
• Der Theme Builder von Elementor Pro ermöglicht es jedem, ein benutzerdefiniertes WordPress-Theme zu erstellen. Und die Anzeigebedingungen von Elementor ermöglichen es Websitebesitzern, zu steuern, wo jeder Thementeil angezeigt wird. Zum Beispiel ist es ein Kinderspiel, benutzerdefinierte Website-Abschnitte mit unterschiedlichen Kopf- und Fußzeilen zu erstellen.
• Die globalen Designeinstellungen von Elementor sind ein zentraler Ort zum Erstellen und Verwalten der Designeinstellungen Ihrer Website, einschließlich der Farb- und Schriftartauswahl. Diese Designeinstellungen werden zu Voreinstellungen, auf die über die gesamte Elementor-Oberfläche zugegriffen werden kann.
• Funktionen wie Popups und der Website-Wartungsmodus machen zusätzliche Plugins überflüssig.

Gründe für die Verwendung von Gutenberg

• Gutenberg ist der standardmäßige WordPress-Inhaltseditor. Wenn Sie vorhaben, WordPress in den kommenden Jahren zu verwenden, werden Sie Gutenberg verwenden. Erstellen Sie (die meisten) Ihrer Inhalte mit Gutenberg, um die Aufwärtskompatibilität mit zukünftigen Versionen von WordPress sicherzustellen.
• Die Gutenberg-Roadmap ist umfangreich und ehrgeizig. Der Blockeditor wird erweitert, um traditionelle Seitenleisten-Widgets zu ersetzen. Bald wird Gutenberg Themenbearbeitungsfunktionen haben. Mit der Zeit wird Gutenberg noch mehr wie Elementor sein.

Gründe für die Verwendung von Gutenberg mit Elementor

Elementor kann Dinge, die Gutenberg (noch) nicht kann. Und selbst nachdem Gutenberg diese Dinge tun kann, wissen wir nicht, wie es sich vergleichen wird – oder wie lange es dauern wird, bis es sich der Parität mit Elementor nähert. Die meisten Menschen müssen heute eine Website erstellen, nicht in drei Jahren.

In der Zwischenzeit sollten Website-Designer zumindest darüber nachdenken, was in drei Jahren passieren könnte.

Ich empfehle nicht, Hunderte von Blog-Beiträgen in Elementor zu erstellen. Tatsächlich empfehle ich nicht , Blog-Beiträge in Elementor zu erstellen. Wie Sie sehen werden, ist es durchaus möglich, Ihre Posts mit Gutenberg zu erstellen und diese Posts in von Elementor entworfene Vorlagen einfließen zu lassen. Diese Methode ist das Beste aus beiden Welten.

Best Practices für die gemeinsame Verwendung von Elementor und Gutenberg

Es gibt keinen Grund, Elementor nicht mit Gutenberg zu verwenden, aber mit Blick auf die Zukunft. Eines Tages könnte Gutenberg Elementor in Bezug auf Funktionen und Benutzerfreundlichkeit in den Schatten stellen. Bis dieser Tag kommt, können Sie die beiden auf diese Weise ohne Konflikte zusammen verwenden.

1. Verwenden Sie ein Design, das Elementor unterstützt und nicht dagegen ankämpft

Hören Sie auf, nach dem perfekten Thema zu suchen, denn Sie werden Ihr eigenes Thema mit Elementor erstellen.

Davon abgesehen brauchen Sie immer noch ein Thema, um loszulegen. Aber anstatt nach einem Thema zu suchen, das mit Funktionen, Anpassungseinstellungen und benutzerdefinierten Vorlagen gefüllt ist, verwenden Sie ein minimalistisches Thema, das aus dem Weg geht und es Elementor ermöglicht, seine Sache zu tun.

Probieren Sie zunächst das Hello Elementor-Design aus. Es wurde vom Elementor-Team für die Verwendung mit Elementor erstellt. Erwarten Sie eine Enttäuschung, wenn Sie dieses Thema zum ersten Mal aktivieren. Hallo ist so einfach wie es nur geht, und das ist der springende Punkt.

Astra ist eine weitere gute Wahl. Astra enthält mehr Funktionen als Hello, aber die meisten Funktionen sind deaktiviert, wenn Sie das Plugin zum ersten Mal installieren. Es ist einfach, Astra-Funktionen nach Bedarf zu aktivieren.

2. Verwenden Sie den Elementor Pro Theme Builder

Die Toolbox von Elementor ist so aufregend, dass es einfach ist, den Theme Builder zu überspringen und sofort mit dem Erstellen schöner Webseiten zu beginnen. Tu das nicht! Verbringen Sie stattdessen etwas Zeit damit, zu lernen, wie der Theme Builder funktioniert, und beginnen Sie damit, die grundlegenden Elemente Ihrer Website zu erstellen.

Ich schlage vor, zuerst die Kopf- und Fußzeile Ihrer Website zu erstellen. Dies sind wesentliche Komponenten Ihres Website-Designs, die auf jeder Seite erscheinen.

Erstellen Sie als Nächstes Vorlagen für Beiträge und Seiten. Ihre von Gutenberg verfassten Inhalte fließen in diese Vorlagen ein. Es ist wichtig, die Auswirkungen dieses Ansatzes vollständig zu verstehen. Sie erstellen und bearbeiten Ihre Posts in Gutenberg, während Sie Elementor verwenden, um die Vorlage der Posts zu entwerfen.

3. Deaktivieren Sie Elementor für Beiträge

Wie ich bereits sagte, denke ich nicht, dass Elementor zum Entwerfen einzelner Posts verwendet werden sollte.

Für eine aktive Website ist es nicht schwer, im Laufe der Zeit Hunderte von Posts zu generieren. Das Verfassen einzelner Posts in Elementor ist eine ineffiziente Zeitnutzung. Dadurch wird garantiert, dass Sie diese Posts neu erstellen müssen, wenn Sie sich jemals dafür entscheiden, Elementor in Zukunft nicht mehr zu verwenden.

Indem Sie Ihre Post-Inhalte mit dem Gutenberg (oder Classic Editor) erstellen, stellen Sie die Aufwärtskompatibilität sicher. Wenn Sie Elementor in Zukunft nicht mehr verwenden, ist es eher so, als würden Sie Ihr Design ändern, als Ihre gesamte Website von Grund auf neu zu erstellen.

Um sicherzustellen, dass Sie nicht versehentlich einen Beitrag in Elementor erstellen, schlage ich vor, dass Sie Elementor für Beiträge deaktivieren. Dadurch wird verhindert, dass Beitragsautoren versehentlich auf die Schaltfläche „In Elementor bearbeiten“ klicken, was zu allerlei Kopfschmerzen für unerwartete Autoren führt. Ihre von Elementor entworfenen Vorlagen funktionieren auch dann noch, wenn die Nachbearbeitung deaktiviert wurde.

So deaktivieren Sie Elementor für die Nachbearbeitung.

1. Gehen Sie zu Elementor -> Einstellungen.
2. Deaktivieren Sie neben Beitragstypen das Kontrollkästchen Beiträge.
3. Speichern Sie Ihre Einstellungen.

4. Verwenden Sie Elementor, um einmalige Vorlagen für spezielle Seiten zu erstellen

Neben der Verwendung des Theme Builders sollten Sie Elementor verwenden, um Ihre wichtigsten Zielseiten zu entwerfen. Normalerweise sind dies die Seiten, die in Ihrer Hauptseitennavigation enthalten sind.

Einige Beispiele:

• Startseite
• Opt-in-Seiten
• Produkte und Dienstleistungen
• Preisseite
• Kontaktseite

In der Elementor-Vorlagenbibliothek finden Sie eine Auswahl an Starterdesigns für Seiten wie diese.

Beachten Sie jedoch, dass Sie diese Seiten neu erstellen müssen, wenn Sie sich jemals von Elementor entfernen. Das Gleiche gilt jedoch für die Verwendung der meisten Themen mit einzigartigen Vorlagen und Designfunktionen.

5. Verwenden Sie die Systemeinstellungen von Elementor Design

Ein gut durchdachtes Designsystem ist der Schlüssel zur Aufrechterhaltung der Konsistenz auf Ihrer Website. Dies gilt insbesondere, wenn Sie eine Vielzahl von Designs aus der Elementor-Vorlagenbibliothek importiert haben. Ganz zu schweigen von dem Mischen von von Elementor entworfenen Seiten mit von Gutenberg verfassten Beiträgen.

Ab Version 3.0 bietet Elementor Pro umfassende Kontrolle über Designeinstellungen. Mit diesen Einstellungen können Benutzer auf einfache Weise Farben, Schriftarten und andere Designpräferenzen definieren, die auf der gesamten Website verwendet werden sollen. Schriftart- und Farbeinstellungen werden zu Voreinstellungen, auf die über die gesamte Elementor-Benutzeroberfläche leicht zugegriffen werden kann.

Diese Designeinstellungen wirken sich auf die Post-Inhalte aus, die Sie mit Gutenberg erstellen. Sie können sich dies als Äquivalent zum Festlegen bevorzugter Schriftarten und Farben in einem Design vorstellen.

Die Designeinstellungen sind eine dieser subtilen Funktionsverbesserungen, die leicht zu übersehen sind, wenn Sie Elementor schon eine Weile verwenden. Die Zeit, die Sie damit verbringen, sich mit diesen neuen Einstellungen vertraut zu machen, wird sich durch einen optimierten Design-Workflow um ein Vielfaches auszahlen.

Nicht nur das, diese Einstellungen beschleunigen zukünftige Neugestaltungen, da Sie größere Farb- und Schriftartänderungen an einem Ort vornehmen können.

In die Zukunft schauen

Wie Sie sehen können, sind Elementor Pro und Gutenberg komplementäre Tools. Der Schlüssel liegt darin, die Stärken der einzelnen Tools zu nutzen und gleichzeitig zukünftige Kompatibilitätsprobleme zu vermeiden.

Wenn Ihnen dieser Beitrag gefallen hat, interessiert Sie vielleicht auch mein neuer Kurs „Theme Building with Elementor Pro“. Der Kurs umfasst mehr als 90 Minuten Schritt-für-Schritt-Videoanleitung, die Sie durch den Prozess der Erstellung eines Themas mit Elementor Pro führt.

Nehmen Sie am Trainings- und Coaching-Programm von WP Apprentice teil, um auf den Theme Builder-Kurs und unsere gesamte Trainingsbibliothek zuzugreifen.