Gutenberg Editor: Konkurrenz für Pagebuilder?

Webdesign Wordpress

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?

genesis-framework

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

Gutenberg-editor-Blocknavigation

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

Gutenberg Spaltenblock

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

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

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:

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.

stackable-blocks

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.

Meine Empfehlungen für Dich:

Kontakt-erstgespräch-SaRa-webdesign-branding-900px-header

Herzlich willkommen!

Hallo, ich bin Sabine! Seit 2014 begleite ich Frauen dabei, ihr Business zum Erfolg zu führen. Strategische Beratung ist der Anfang. Das Ergebnis sind individuelle WordPress-Websites mit Perfektion. Hier gebe ich einfache Tipps und Einblicke für Unternehmerinnen, die ihre digitale Präsenz verbessern wollen

Kostenlosen Website-Planner zum Download

Starte dein Webprojekt mit einen soliden Plan. Meinem kostenlosen Website-Planner hilft dir dein neues Webprojekt  optimal vorzubereiten.

0 Kommentare

Das könnte dich auch interessieren

12 feminine Google Schrift- & Farbekombinationen

12 feminine Google Schrift- & Farbekombinationen

Es ist schwer eine feminine Google Schrift und Farben für die Webseite zu finden, denn es stehen Tausende von Möglichkeiten zur Auswahl und noch mehr Kombination von Google Schriften und Schriftarten und Farben sind Dein Markenzeichen, sie spiegeln Deine Persönlichkeit auf Deiner Webseite wieder.

SEO – 7 Punkte, die Du in der Konzeptphase beachten solltest!

SEO – 7 Punkte, die Du in der Konzeptphase beachten solltest!

Macht es dann nicht Sinn, die Suchmaschinenoptimierung schon beim Erstellen Deines Konzeptes zu berücksichtigen?

Die Antwort hierauf ist ein klares JA! Und es gibt viele Vorteile auch für Deine Konzeptionsphase, wenn Du Dir ganz am Anfang über die Suchmaschinenoptimierung Gedanken machst und entsprechend handelst.