Anleitung zum Arbeiten mit dem neuen WordPress-Editor Gutenberg

Seit der WordPress-Version 5.0 steht den Nutzern dieses CMS-Systems ein neuer Editor zur Erstellung von Webinhalten zur Verfügung – Gutenberg. Es verwendet sogenannte Blöcke, um die Website zu erstellen. Einzelne Blöcke können bearbeitet werden. Im folgenden Tutorial wird die Verwendung dieses Editors beim Erstellen von Website-Inhalten erläutert.

Was ist Gutenberg?

Gutenberg ist der neue Standardeditor für WordPress. Es funktioniert nach einem anderen Prinzip als der bisher verwendete TinyMCE-Editor. Durch das Erstellen einer Seite mit Blöcken bietet es eine völlig neue Erfahrung beim Erstellen einer Site. In einzelnen Blöcken kann wie in einem Texteditor mit Text gearbeitet werden.

Blöcke können nach benutzerspezifischen Vorstellungen seitenweise verschoben und gruppiert werden. Mit Gutenberg kann der Benutzer das Aussehen und Layout der Seite besser anpassen.

Was ist ein Block?

Blöcke sind Teile des Inhalts einer Seite. Sie können einen Block für Text, Widgets, Bilder, Videos, Zitate usw. erstellen. Jeder Block kann weiter bearbeitet werden. Der Vorteil beim Erstellen des Webs ist die Drag & Drop-Funktion, mit der Sie Blöcke einfach verschieben können.

Wie erstellt man eine Website im Gutenberg-Editor?

Um eine neue Seite zu erstellen, gehen Sie in der Seitenverwaltung zu Seiten ›Neu hinzufügen. Die folgende Seite wird geöffnet:

Geben Sie einen Titel in den angezeigten Block ein. Dort finden Sie auch eine Option zum Bearbeiten der Slug-Seite. Sie können Slug jederzeit bearbeiten, indem Sie auf den Titel klicken. Klicken Sie einfach auf die Schaltfläche Bearbeiten neben der Seiten-URL.

Erstellen von Blöcken

Nachdem Sie den Titel eingegeben haben, können Sie dem vordefinierten Schreibblock weiteren Text hinzufügen oder einen eigenen Block einbetten. Klicken Sie dazu auf das Plus-Symbol: . Hier können Sie die Art des Inhalts auswählen, den Sie hinzufügen möchten.

In meinem Beispiel habe ich einen Absatz hinzugefügt. Im Absatzblock finden Sie Schriftartoptionen, Ausrichtung und ein Symbol zum Einfügen von Links. Am Ende der Symbolleiste zum Bearbeiten von Blöcken finden Sie eine zusätzliche Schaltfläche mit Bearbeitungsoptionen . Beispielsweise können Sie Blockeinstellungen ausblenden, duplizieren, als HTML bearbeiten, wiederverwendbaren Blöcken hinzufügen und einen Block entfernen.

Weitere Textoptionen finden Sie auf der rechten Seite des Bildschirms. Die Schriftarteinstellung ist hier verfügbar. Sie können eine Schriftgröße aus mehreren voreingestellten Optionen auswählen oder Ihre eigene Größe festlegen. Sie können auch eine Hintergrundfarbe oder eine Textfarbe auswählen oder Ihre eigenen Anpassungen vornehmen.

Die Optionen zum Bearbeiten von Blöcken direkt über dem Block sowie auf der rechten Seite des Bildschirms variieren je nach Blocktyp.

Ändern des Blocktyps

Sie können den Blocktyp jederzeit während der Erstellung der Seite ändern. Klicken Sie dazu auf die erste Schaltfläche über dem aktiven Block. Hier wird immer das Zeichen für den aktiven Blocktyp angezeigt. Klicken Sie hier, um eine Liste der zur Auswahl stehenden Blöcke anzuzeigen.

Blocktypen

Beim Erstellen von Seiten stehen Ihnen verschiedene Arten von Blöcken zur Verfügung. Sie sind in einer übersichtlichen Liste angeordnet, die in mehrere Teile unterteilt ist:

Meistgenutzt – Hier werden die am häufigsten verwendeten Blocktypen wie Absätze, Bilder, Galerien usw. angezeigt.

Direktelemente – Block für Direktbilder finden Sie hier.

Allgemeine Blöcke – Hier finden Sie Blöcke für Bilder, Videos, Dateien, Listen, Zitate und andere häufig verwendete Seitenbereiche.

Formatierung – Ermöglicht das Hinzufügen von formatiertem Inhalt wie Tabelle, Code, benutzerdefiniertem HTML, aber auch eines Blocks in einem klassischen WordPress-Texteditor.

Layout-Elemente – Hier finden Sie Seitenumbruchblöcke, eine Schaltfläche, Spalten oder einen Block mit einem vorgefertigten Layout für Medien und Text.

Widgets – Mit den verfügbaren Optionen können Sie Shortcodes, Kategorien, eine Liste der letzten Kommentare und mehr hinzufügen.

Einbettungen – Ermöglichen das Einbetten von externen Inhalten wie YouTube, Twitter, Instagram, Facebook und anderen Inhalten.

Wie erstellt man ein einfaches Seitenlayout?

Zunächst erstellen wir eine einfache Seite. Sie benötigen lediglich eine Überschrift, einen Text, ein Bild, eine Liste mit Aufzählungszeichen und eine Bildergalerie.

Hinzufügen eines Textes

Beginnen Sie nach der Eingabe des Titels einfach mit dem Schreiben in einen voreingestellten Block. Gutenberg erstellt für jeden Absatz einen eigenen Block. Sie müssen es nicht jedes Mal zur Seite hinzufügen. Drücken Sie einfach die Eingabetaste. Ein neuer Absatzblock wird von selbst erstellt.

Hinzufügen eines Bildes

Um ein Bild hinzuzufügen, wählen Sie den Block aus der Liste der Blöcke aus. Die Liste der Blöcke wird angezeigt, indem Sie auf das Plus-Symbol oben links auf dem Bildschirm klicken. Sie können ein Bild aus der Medienbibliothek auswählen oder auf die Seite hochladen.

Es wird im Seitenlayout angezeigt, sobald es hochgeladen wird. Auf der rechten Seite des Bildschirms legen Sie die Bildgröße fest, geben alternativen Text ein oder fügen einen Link ein.

Hinzufügen einer Liste mit Aufzählungszeichen

Wählen Sie den entsprechenden Block aus der Liste aus. Beim Bearbeiten von Text haben Sie auch die Möglichkeit, eine nummerierte Liste auszuwählen, einen Link einzufügen usw.

Hinzufügen einer Bildergalerie

Wählen Sie einen Galerieblock aus der Blockliste aus. Laden Sie dann Ihre Bilder hoch. Sie können die Ausrichtung bearbeiten, ein Bild in den Galerieblock einfügen oder daraus entfernen. Auf der rechten Seite des Bildschirms finden Sie Funktionen zum Einstellen der Spaltenanzahl und zum Zuschneiden von Bildern in der Galerie.

Wie man Blöcke verschiebt

Sie können einzelne Blöcke auf der Seite verschieben. Die erforderlichen Schaltflächen werden angezeigt, wenn Sie den Cursor über den Block bewegen, den Sie verschieben möchten. Es gibt zwei Pfeile zum Auf- und Abbewegen. Diese verschieben den ausgewählten Block um eine Position nach oben oder unten. Zwischen den Pfeilen befindet sich das Drag & Drop-Symbol . Wenn Sie den Mauszeiger darüber bewegen, wird ein Zeiger angezeigt, mit dem Sie den Block einfach einrasten und an die gewünschte Stelle verschieben können.

Wie werden erstellte Blöcke wiederverwendet?

Wenn Sie einen Block erstellt haben, den Sie später wiederverwenden möchten, klicken Sie auf das Symbol Weitere Optionen. Sie finden es im Funktionsmenü oben im Block. Wählen Sie hier Zu wiederverwendbaren Blöcken hinzufügen.

Auf diese Weise haben Sie immer Zugriff auf erstellte Blöcke, wenn Sie einen neuen Beitrag erstellen. Gespeicherte Blöcke werden in der Liste der Blocktypen unter Wiederverwendbar angezeigt. Sie können auch verwaltet werden. Sie können sie zurück in einen normalen Block konvertieren oder aus dem Menü entfernen.

Andere Funktionen

Beim Erstellen von Seiten oder Beiträgen stehen einige praktische Funktionen zur Verfügung. Schauen wir uns zunächst die Schaltflächen oben auf der Seite an.

Ich erwähnte das erste der Symbole. Dies wird verwendet, um der Seite einen Block hinzuzufügen.

Es ist nicht erforderlich, Pfeile vor und zurück einzuführen – sie bringen Sie einen Schritt vorwärts oder rückwärts.

i – hier sehen Sie die Inhaltsstruktur.

Die letzte Schaltfläche – Blocknavigation – bietet eine interessante Funktion. Neben der Anzeige der Reihenfolge der einzelnen Blöcke wird auch ein schneller Sprung zum ausgewählten Block ausgeführt.

Auf der rechten Seite finden Sie weitere Funktionen. Möglicherweise kennen Sie einige von ihnen bereits aus früheren Arbeiten mit WordPress. Andere sind neu.

Dokument – Ermöglicht den Zugriff auf Dokumenteinstellungen, z. B. Bearbeiten der URL einer Seite, Hinzufügen eines Bildes zur Veranschaulichung und Zulassen von Kommentaren. Kategorie- und Tag-Zuweisungen sind auch auf der Post-Erstellungsseite verfügbar. Sie können auch Zusammenfassungstext hinzufügen.

Block – Ich habe bereits einige der Funktionen dieser Schaltfläche im Abschnitt Erstellen von Blöcken erwähnt. Sie variieren je nach gewähltem Blocktyp.

Vorschau – Die Vorschau-Schaltfläche zeigt eine Live-Vorschau der Seite oder des Posts an.

Veröffentlichen – Verwenden Sie diese Schaltfläche, um die Seite zu veröffentlichen. Wenn Sie eine vorhandene Seite bearbeiten, wird anstelle der Schaltfläche „Veröffentlichen“ die Schaltfläche „Aktualisieren“ angezeigt.

Permanenter Link – Bearbeiten Sie hier den Textteil der URL.

Seiteneigenschaften – Dient zum Einrichten einer Seitenvorlage und zum Zuweisen einer übergeordneten Seite.

Weitere Tools und Optionen anzeigen – Die letzte Schaltfläche in der rechten oberen Ecke der Seite lautet Weitere Tools und Optionen anzeigen . Hier finden Sie verschiedene Funktionen wie den Spotlight-Modus, mit denen Sie sich beim Erstellen der Seite auf den Inhalt eines bestimmten Blocks konzentrieren können.

Sie finden auch einen Schalter zwischen dem visuellen Editor und dem Code-Editor sowie den Vollbildmodus. Außerdem finden Sie Tastaturkürzel, die Möglichkeit, wiederverwendbare Blöcke zu verwalten, und andere Optionen zur Seiteneinrichtung.

Tipps für Fortgeschrittene

Lassen Sie mich einige erweiterte Editorfunktionen nennen:

Schnelle Blockerstellung

Um nicht immer nach einem bestimmten Block in der Liste suchen zu müssen, können Sie Ihre Arbeit erleichtern. Sie müssen lediglich einen Schrägstrich und die ersten Buchstaben des Blocknamens in den voreingestellten Block eingeben:

/Blockname

Sobald Sie mit der Eingabe beginnen, wird eine Liste der übereinstimmenden Optionen angezeigt.

Bearbeitung des Quellcodes

Bei jedem Schritt der Erstellung des Seiteninhalts können Sie den Quellcode bearbeiten. Klicken Sie dazu auf das Icon . Suchen Sie hier nach dem Code-Editor.

Aktivierung des Vollbildmodus

Im Gutenberg-Editor können Sie ohne unnötige Ablenkungen per Menü Seite Menü arbeiten. Navigieren Sie in die rechte obere Ecke der Seite und klicken Sie auf . Den Vollbildmodus finden Sie hier. Sie können auch den Spotlight-Modus auswählen, um einen bestimmten Block noch besser zu fokussieren.

Verwendung von Tastaturkürzeln

In Gutenberg können Sie neben den üblichen Verknüpfungen auch viele spezielle Verknüpfungen verwenden. Zum Beispiel:

• Seitenleisteneinstellungen ein- oder ausblenden Strg + Umschalt +
• Ihre letzten Änderungen rückgängig machen Strg + Z
• Zurückgenommene Änderungen erneut ausführen Strg + Umschalt + Z

Verwenden Sie Strg + Umschalt + H, um die Liste der Tastaturkürzel zu öffnen.

Erweitern Ihrer Optionen mit Plugins

Installieren Sie eines der Gutenberg-Plugins, um Ihre Entwurfsfunktionen zu erweitern. Stackable-Plugin bietet beispielsweise eine Sammlung vorgefertigter Blöcke. Es werden interessante Hauptseiten erstellt. Ein weiteres großartiges Plugin ist Otter Blocks. Es ermöglicht das Erstellen von Blöcken wie Preisen, Google Maps und mehr.

Einige Antworten auf häufig gestellte Fragen

Was ist, wenn ich Gutenberg nicht verwenden möchte?

Einige Benutzer fragen, ob Sie mit WordPress den vorherigen TinyMCE-Editor verwenden können. Ja, es ist möglich. Gutenberg kann in diesem Fall deaktiviert werden. In diesem Fall müssen Sie nur das WordPress-Plugin Classic Editor installieren.

Wird sich der alte Inhalt ändern?

Alle Inhalte, die Sie bereits auf der Seite haben, bleiben unverändert. Gutenberg fügt eine bestimmte Seite oder einen bestimmten Artikel in einen Block ein. Zu diesem Zweck hat Gutenberg einen sogenannten klassischen Block. Auf diese Weise können Sie mit dem Originalinhalt wie im klassischen TinyMCE-Editor arbeiten.

Sie können den Originalinhalt einfach in einem klassischen Block bearbeiten oder in Blöcke konvertieren. Sie finden die gewünschte Funktion unter dem Symbol Weitere Optionen . Darüber hinaus können Sie mit dem Inhalt so arbeiten, als ob Sie ihn in einem Blockeditor erstellt hätten.

War dieser Artikel hilfreich für Sie? Unterstützen Sie mich bitte durch Teilen. 👍