Den Gutenberg Editor gibt es jetzt schon eine ganze Weile. Er löst den bisherigen WordPress Editor ab und kann nur über ein Plugin abgeschaltet werden.
Ich habe meine komplette Webseite mit Genesis Framework und Gutenberg Editor erstellt. Es ist tatsächlich möglich!
Hier bekommst du Antworten auf diese Fragen:
- Wie ist das Handling des Editors?
- Ist er eine ernstzunehmende Alternative zu Pagebuildern wie Elementor & Co?
- Welche Plugins sind sinnvoll?
- Wo finde ich Anleitungen und Hilfe?
- Welche Vorteile hat der neue WordPress Editor?
Genesis Framework und Gutenberg – geht das?
Meine Webseite basierte bisher auf dem Divi-Theme. Die Seiten habe ich mit dem Divi-Builder erstellt das gelingt auch WordPress Anfänger mit ein wenig Übung. Allerdings macht das Theme und der Builder die Seite langsam.
Relaunch ohne Pagebuilder
Ich habe früher schon mit Genesis gearbeitet und war damals schon von der Pagespeed sehr angetan.
Ich habe bewusst auf einen Pagebuilder bewusst verzichtet, weil
- Pagebuilder unnötigen Code erzeugen,
- die Seite bei der Deinstallation des Pagebuilders neu erstellt werden muss,
- ich clean HTML und CSS liebe.
Genesis ist schon eine Weile Gutenberg-Ready. Das Child-Theme stellt ein Template für die Startseite zur Verfügung. Dieses habe ich nicht verwendet, sondern diese wie alle anderen Seiten auch direkt mit dem Gutenberg Editor erstellt.
Studio-Press stellt für seine Child-Themes (ich verwende hier Authority Pro) sehr gute Dokumentationen zur Verfügung.
Zuerst habe ich das Theme an meine Bedürfnisse mit CSS angepasst und anschließend konnte ich meine Seiten ohne Probleme erstellen.
Wie ist das Handling mit dem Gutenberg Editor?
Der Gutenberg-Editor ist ein Back-End Editor, d.h. du erstellst deine Seite im Back-End und überprüfst die Änderungen in der Vorschau.
Das mag für Menschen, die z.B. den Elementor oder den Divi Builder gewohnt sind etwas umständlich sein.
Das Umsetzen war jedoch dank Konzept kein Problem.
Natürlich ist es manchmal nervig, immer wieder in die Vorschau zu wechseln, jedoch gehört das für mich zum Handwerk.
Vorteile der Blöcken
Ich musste mich erst an die Blockstruktur gewöhnen, aber nach kurzer Einarbeitungszeit habe ich auch eine Reihe von Vorteilen erkannt:
- Die Blöcke lassen sich verschieben, duplizieren, löschen und als wiederverwendbare Blöcke (der Block “über mich” ist ein wiederverwertbarer Block) mehrfach genutzt werden können.
- Auch finde ich das Handling besser als bei Back-End Pagebuildern wie dem WP Bakery Builder, wo beim Bearbeiten eines Blocks sich ein kleines Fenster öffnet, was die Bearbeitung längerer Texte erschwert.
- Im Gutenberg-Editor erscheint über jedem Block ( und damit über jedem Absatz) eine kleine Bearbeitungsleiste, welche auch die Bearbeitung der Text leicht macht.
- Auch die Bearbeitungsleiste für die Blockeinstellungen im rechten Bereich ist übersichtlich und einfach zu handhaben.
- Toll ist die Möglichkeit, das HTML eines jeden Blocks bearbeiten zu können, was den Code kontrollierbar macht.
Mehr nützliche Funktionen des Gutenberg Editors
Viel genutzt habe ich den “Rückgängig Pfeil” in der oberen Leiste, ein Must-to-Have eines jeden guten Editors.
Auch die inhaltliche Struktur, die sich mit einem Klick auf das “i” anzeigen lässt, finde ich sehr hilfreich. Sie zeigt die Gliederung des Dokumentes, was nicht nur aus SEO-Sicht hilfreich ist.
Bei Seiten und Beiträgen mit viel Inhalt ist die Block-Navigation in nützliches Tool, sie ermöglicht es Dir sofort zum gewünschten Block zu springen.
Kann ich mit dem Gutenberg-Editor eine Webseite erstellen?
Update 2020
Meine Seite ist nun komplett mit Gutenberg erstellt. Mit dem Update auf WordPress 5.3. hat der Editor eine Reihe neuer Funktionen an Board:
Block Gruppe
Mit dem neuen Gruppenblock lassen sich Elemente gruppieren und verschachteln. Eine Gruppe kann auch weitere Gruppen beinhalten.
Mit dem Gruppenblock lassen sich Abschnitte erstellen, die folgende Eigenschaften haben können:
- volle Breite,
- weite Breite
- Hintergrundfarbe
Ich habe den neuen Gruppenblock anstelle des Abschnittsblocks vom UA-Plugin verwendet
Spalten
Auch der Spaltenblock ist neu. Hier lassen sich fünf verschiedene Layouts mit bis zu sechs Spalten wählen. Der Spaltenblock hat folgende Eigenschaften:
- volle Breite,
- weite Breite
- prozentuale Breite je Spalte.
Der Spalteninhalt kann vertikal oben, mittig oder unten ausgerichtet werden. Hiermit bietet der Gutenberg-Editor ein weiteres Layout-Element.
Überschriften
Auch bei den Überschriften sind Funktionen hinzugekommen:
- individuelle Farben sind möglich
- es können HTML-Anker gesetzt werden.
Bilder
Bilder können in der neuen Version auch “rund” angezeigt werden.
Zwar sind noch lange nicht alle Elemente der Pagebuilder wie Testimonials, Icon-Listen usw. realisisert, aber mit ein wenig Fantasie lassen sich schon einfache Seiten erstellen.
Gutenberg 2018
Mit dem Gutenberg-Editor alleine habe ich es nicht geschafft. Es fehlten mir Elemente wie Abschnitte oder Sektionen, wo ich Einstellung wie
- volle Breite,
- weite Breite
- Abstände wie Margin und Padding
- Einstellungen für Hintergrund und Bilder
- usw.
Mit den Bordmitteln des Gutenbergs war das alles schwierig, aufwendig oder gar nicht möglich. Schnelle Ergebnisse gab es so nicht.
Gutenberg-Editor Plugins
Zum Glück gibt es zahlreiche Plugins für den neuen WordPress Editor. Suche mal im Pluginverzeichnis nach “Gutenberg Blocks”. Du wirst staunen, wieviele Erweiterungen es bereits gibt.
Ich habe verschiedene Plugins getestet und zwei haben mir besonders gut gefallen:
Ultimate Addons for Gutenberg
Das Plugin kommt von den Programmierern des Astra Themes und erweitert Gutenberg um mehr als zwanzig Blöcke, die für die Seitengestaltung hilfreich sind wie etwa:
- Advanced Heading : Überschrift und Unterüberschrift mit Trennlinie.
- Advanced Columns : Spalten innerhalb einer Zeile mit erweiterten Dividern und variablen Breiten usw.
- Call To Action
- Contact Form 7 Styler : Einfach Gutenberg Blocks für Contact Form 7 anpassen und stylen.
- Google Map
- Icon List : schön gestaltete Listen mit farbigen Buttons
- Info Box
- Marketing Button : schöne CTA’s
- Multi Buttons : Bis zu 5 buttons in einem Gutenberblick
- Price List
- Section : oder Abschnitte als Container mit Optionen für Spacing, Background und Rahmen.
- Table Of Contents : Inhaltsverzeichnnis.
Team : mit Bild, Name, Beschreibung und Social Media Profil
Testimonial :
Auf meiner Seite habe ich das UA-Plugin verwendet und war begeistert. Du kannst alle Einstellungen für die Blöcke einfach und schnell vornehmen, das Plugin macht Gutenberg fast zu einem Pagebuilder ohne dessen Nachteile.
Stackable Gutenberg Blocks
Auch Stackable ist ein häufige verwendetes Plugin, es hat ähnlich wie UA zahlreiche gute Bewertungen.
Der Funktionsumfang ist ähnlich wie bei UA, ein Kollege arbeitet ausschließlich mit diesem Plugin und ist sehr zufrieden.
Beide Plugins erweitern den Gutenberg Editor um zahlreiche Blöcke, die dir aus Pagebuildern bekannt sind. Insbesondere die Sectionsblöcke sind bei der Gestaltung einer Seite sehr hilfreich.
Mithilfe von Ultimate Addons war der Aufbau der Webseiten fast ein Kinderspiel, einen Pagebuilder habe ich nicht vermisst.
Wo gibt es ein Anleitung für den Gutenberg-Editor?
Eine kommplette Anleitung findest auf der Webseite die Gutenberg-Fibel.
Jessica Lyschik . erklärt nicht nur sehr anschaulich die Funktionsweise des neuen Editors, sie geht auch genau auf die Funktionen der einzelnen Blöcke ein.
Bei Templatics findest du eine Auflistung der 10 besten Gutenberg-Plugins mit den dazugehörigen Download-Links.
Die offizielle Gutenbergseite ist unter wordpress.org/gutenberg/ zu finden.
Webseite komplett mit dem Gutenberg Editor erstellen – mein Fazit
Du kannst mit dem Gutenberg Editor eine komplette Webseite erstellen. Hilfreiche Plugins sind Ultimate Addons for Gutenberg und Stackable Gutenberg Blogs. Sie verfügen über Sektionsblöcke, die es dir einfacher machen, das Layout deiner Seite festzulegen.
Die Seite ist wahnsinnig schnell geworden, selbst beim Google Pagespeed-Test habe ich mobil Werte zwischen 92 und 98! Ich führe es auf das schlanke Theme und auf den Verzicht eines Pagebuilders zurück.
Du kannst bereits jetzt mit dem Gutenberg Editor ohne zusätzliche Plugins Blogbeiträge erstellen. Der Vorteil liegt klar auf der Hand: du lernst den Umgang mit dem neuen WordPress Editor.
Der Gutenberg-Editor wird stetig weiterentwickelt. Zwar hat er noch nicht die vielen Funktionen wie z.B. Elementor, jedoch ist es eine Frage der Zeit, bis er den Pagebuildern ebenbürtig ist.
Meine persönliche Meinung:
Die Zukunft des Internets ist mobil, wer eine Webseite erstellt oder relauncht muss so immer die Ladezeiten im Auge behalten. Hier ist der Gutenberg-Editor als Standardeditor für WordPress ein Schritt in die Zukunft.
powered by Borlabs Cookie
0 Kommentare