Als WordPress im Dezember 2018 mit dem Gutenberg-Editor einen hauseigenen Page-Builder veröffentlichte, hagelte es Kritik – vor allem wegen eingeschränkter und fehlerhafter Funktionen. Heute – mehr als anderthalb Jahre später – hat sich der Editor zu einem ernstzunehmenden und vielfältigen Tool zur Erstellung von Webseiten und Blogartikeln gemausert. Wir zeigen Ihnen, wie Sie es optimal nutzen können.

Download: So starten Sie einen erfolgreichen Blog

Wie funktioniert der WordPress Gutenberg-Editor?

Der klassische Editor in WordPress bietet nur sehr rudimentäre Funktionen. Damit alles funktioniert, müssen HTML-Elemente und Shortcodes eingebunden werden, weshalb viele Nutzer in der Vergangenheit auf Alternativen wie Elementor, Thrive Architect oder Divi ausgewichen sind.

Mit dem Gutenberg-Editor wurde die Gestaltung von Webseiten und Blogartikeln deutlich vereinfacht. Die visuelle Oberfläche ermöglicht es Nutzern, sofort sehen zu können, wie sich Änderungen auswirken (Stichwort: WYSIWYG). Programmierkenntnisse werden also nicht mehr benötigt.

Alle Inhalte werden in sogenannten Blöcken angezeigt, die einzeln bearbeitet und frei auf einer Seite herumgeschoben werden können. Die Nutzung von WordPress ist dadurch auch ganz ohne Plugins und externe Page-Builder intuitiver geworden.

Gutenberg-Blöcke als Grundlage des Editors

Die Aufteilung von Seiteninhalten in Blöcke verleiht diesen automatisch eine sinnvolle, leicht zu erfassende Struktur. Sie ermöglichen es außerdem, Texte, Bilder und andere Elemente zielgerichteter zu bearbeiten. Im Gutenberg-Editor stehen dabei unter anderem folgende Blöcke zur Auswahl:

  • Text (in WordPress als „Absatz“ bezeichnet)

  • Überschriften

  • Bilder

  • Galerien

  • Tabellen

  • Buttons

  • Spalten

  • Listen

  • Zitate

  • Videos

  • Audios

Wollen Sie einen neuen Block in Ihre Seite einfügen, haben Sie eine Reihe von Optionen:

  • Klicken Sie oben links auf das Plus-Icon. Nun können Sie den gewünschten Block auswählen.

    WordPress-Gutenberg-Editor-Block-hinzufuegenScreenshots: wordpress.org/gutenberg
  • Drücken Sie nach einem bestehenden Block die Enter-Taste.

    WordPress-Gutenberg-Editor-Block-auswaehlen
  • Fahren Sie mit der Maus über einen Block, erscheint darunter ein Plus-Icon. Klicken Sie darauf, um einen neuen Block einzufügen.

  • Mit dem Tastaturkürzel Strg + Alt + T erstellen Sie einen neuen Block über dem aktuell ausgewählten. Mit Strg + Alt + Y legen sie ihn darunter an.

Sobald Sie einen Block anklicken, wird er ausgewählt und kann bearbeitet werden. In der rechten Seitenleiste finden Sie diverse Einstellungsmöglichkeiten, zum Beispiel für Textgrößen und -farben.

Die einzelnen Blöcke können Sie nach Belieben verschieben. Klicken Sie dazu zunächst auf den gewünschten Abschnitt. Links erscheinen nun zwei Pfeile. Der, der nach oben deutet, verschiebt den Block jeweils um eine Position nach oben. Der, der nach unten deutet, deckt die andere Richtung ab. Zwischen den Pfeilen finden Sie eine kleine Fläche mit sechs Punkten. Setzen Sie dort an, können Sie den Block per Drag-&-Drop verschieben.

WordPress-Gutenberg-Editor-Block-bearbeitenKlicken Sie erst einen Abschnitt an und danach in der auftauchenden Werkzeugleiste auf die drei Punkte, können Sie den gewählten Block duplizieren oder entfernen.

8 Hacks, um alles aus dem Gutenberg-Editor herauszuholen

Auf den ersten Blick mag der Gutenberg-Editor unübersichtlich erscheinen. Sie können sich die Arbeit aber durch ein paar einfache Kniffe erleichtern.

1. Den Anzeigemodus wählen

Wenn Sie in WordPress eine Seite oder einen Beitrag öffnen, sehen Sie in der Kopfzeile oben rechts drei Punkte. Klicken Sie darauf, um einzustellen, wie der Gutenberg-Editor angezeigt werden soll.

Der Punkt „Obere Werkzeugleiste“ blendet die wichtigsten Werkzeuge und Bearbeitungsoptionen dauerhaft oben ein. So können Sie darauf zugreifen, ohne einen bestimmten Block auswählen zu müssen.

Der Spotlight-Modus hebt den Abschnitt hervor, an dem Sie gerade arbeiten. Alle anderen werden ausgegraut. Das erleichtert es Ihnen, den Fokus zu wahren.

Der Vollbildmodus blendet die linke Seitenleiste aus, über die Sie auf allgemeine WordPress-Einstellungen und das Dashboard zugreifen können. Er schützt Sie so vor möglichen Ablenkungen.

Die Optionen können Sie entweder einzeln oder in Kombination nutzen.

WordPress-Gutenberg-Editor-Anzeigemodus

2. Den Permalink ändern

Aussagekräftigte URLs sind fester Bestandteil der Suchmaschinenoptimierung. Im Gutenberg-Editor können Sie sie deshalb bearbeiten: Klicken Sie dazu auf den Titel der Seite. Darüber wird nun der aktuelle Permalink erscheinen. Klicken Sie auf den Button „Bearbeiten” und geben Sie eine passende URL ein.

WordPress-Gutenberg-Editor-URL-bearbeitenScreenshot: webtimiser.de

3. Wortzahl und Seitenstruktur anzeigen lassen

Besonders, wenn Sie einen längeren Beitrag verfassen, kann es hilfreich sein, die Struktur mit allen Zwischenüberschriften und die aktuelle Wortzahl einsehen zu können. Links oben im Editor finden Sie dazu ein i-Icon. Klicken Sie darauf, öffnet sich eine Infobox. Mit ihrer Hilfe können Sie auch zu den verschiedenen Zwischenüberschriften springen.

4. Spalten einfügen

Im klassischen Editor war es nur mit entsprechendem Code möglich, ein mehrspaltiges Design in WordPress zu erstellen. Der Gutenberg-Editor hat dieses Problem nicht mehr. Mit dem Block „Spalten” können Sie Ihre Seite in bis zu drei nebeneinanderliegende Abschnitte aufteilen.

WordPress-Gutenberg-Editor-Spalten-erstellenScreenshot: webtimiser.de

5. Zwischen visueller Oberfläche und HTML wechseln

Wollen Sie doch einmal HTML-Code auf Ihrer Seite verwenden, klicken Sie auf den gewünschten Punkt und dann auf die drei Punkte. Wählen Sie im Menü „Als HTML bearbeiten“ aus. Auf dem gleichen Weg können Sie später zurück zur visuellen Oberfläche wechseln.

WordPress-Gutenberg-Editor-HTML-Bearbeitung

 

6. Blöcke umwandeln

Einige Blockelemente lassen sich mit wenigen Klicks in andere umwandeln. Das ist zum Beispiel dann praktisch, wenn Sie ein Zitat ausweisen oder aus einem Satz eine Zwischenüberschrift machen möchten.

Klicken Sie zunächst auf den Block, der umgewandelt werden soll. Oben erscheint die Werkzeugleiste. Wählen Sie das Icon ganz links aus. Nun können Sie auswählen, welche Art von Block stattdessen zum Einsatz kommen soll.

WordPress-Gutenberg-Editor-Block-umwandeln

7. Blöcke wiederverwenden

Blöcke können individuell gestaltet werden, um sie zum Beispiel an Ihr Branding anzupassen. Damit Sie die Einstellungen nicht auf jeder Seite von Neuem vornehmen müssen, können Sie fertige Blöcke als wiederverwendbare Elemente kennzeichnen.

Klicken Sie zunächst auf den Block und dann auf die drei Punkte in der Werkzeugleiste. Wählen Sie die Option „Zu wiederverwendbaren Blöcken hinzufügen“ und vergeben Sie einen Namen.

WordPress-Gutenberg-Editor-Bock-wiederverwendenScreenshot: webtimiser.de

Im Anschluss können Sie den wiederverwendbaren Block genauso einfügen wie alle anderen. Aber Achtung: Er ist nicht mehr veränderbar. Wollen Sie eine Einstellung aktualisieren, müssen Sie einen neuen wiederverwendbaren Block einrichten.

8. Tastaturkürzel verwenden

Tastaturkürzel machen die Arbeit im Gutenberg-Editor schneller und einfacher. Klicken Sie ganz oben rechts auf die drei Punkte und dort auf den Menüpunkt „Tastaturkürzel“, um sich alle Optionen anzeigen zu lassen.

Den WordPress Gutenberg-Editor deaktivieren

Vielleicht wollen Sie den Gutenberg-Editor trotz seiner vielfältigen Möglichkeiten nicht nutzen – zum Beispiel, weil er nicht mit Ihrem Theme oder einem bestimmten Plugin kompatibel ist. In diesem Fall können Sie ihn einfach ausschalten und weiter den klassischen Editor nutzen.

Installieren Sie dazu das Plugin „Classic Editor“. Auf der Einstellungsseite wählen Sie den Punkt „Editor mit dem klassischen Editor ersetzen“ aus und speichern. Fertig! Dieses Plugin wird noch bis zum 31.12.2021 unterstützt.

Fazit: Weniger Möglichkeiten als die Konkurrenz, aber mehr als der Vorgänger

Mit der gestalterischen Vielfalt eines Tools wie Divi oder Elementor kann es der Gutenberg-Editor von WordPress nicht aufnehmen. Er bietet allerdings deutlich mehr Möglichkeiten als sein Vorgänger und lässt Sie in kürzester Zeit ansprechende Seiten und Beiträge erstellen. Wenn Sie keine komplizierten bzw. ausgefallenen Ansprüche an die Gestaltung haben, ist der Gutenberg-Editor auf jeden Fall einen Blick wert!

So launchen Sie einen eigenen Blog

Titelbild: Prostock-Studio / getty images

Ursprünglich veröffentlicht am 28. August 2020, aktualisiert am August 28 2020

Themen:

Wordpress