Leitfaden zum WordPress Gutenberg-Editor

Was ist der Gutenberg-Editor

Gutenberg ist der Block-Editor, der seit der Version WordPress 5.0 den klassischen WordPress-Editor (TinyMCE) abgelöst hat. Statt eines einzigen großen Textfeldes verwendet Gutenberg ein Blocksystem, bei dem jedes Inhaltselement – Absatz, Bild, Überschrift, Liste, Video – ein eigener Block ist, den Sie unabhängig bearbeiten, verschieben und gestalten können.

Benannt wurde er nach Johannes Gutenberg, dem Erfinder des Buchdrucks mit beweglichen Lettern. So wie Gutenbergs Druckpresse die Erstellung von Inhalten im 15. Jahrhundert revolutionierte, revolutioniert der WordPress-Gutenberg-Editor die Art und Weise, wie wir Webinhalte erstellen.

Wenn Sie vom klassischen Editor kommen, kann der Umstieg auf Gutenberg anfangs verwirrend wirken. Unser Leitfaden zur Erstellung einer WordPress-Website behandelt die Grundlagen, die Ihnen den Einstieg erleichtern. Sobald Sie die Grundlagen beherrschen, bietet Gutenberg jedoch deutlich mehr Flexibilität und Kontrolle über das Aussehen Ihrer Inhalte, ohne dass Sie HTML oder CSS beherrschen müssen.

Grundlagen der Arbeit mit Blöcken

Blöcke hinzufügen

Um einen neuen Block hinzuzufügen, klicken Sie auf die blaue Schaltfläche "+", die zwischen den Blöcken oder in der oberen linken Ecke des Editors erscheint. Es öffnet sich ein Menü mit allen verfügbaren Blöcken, geordnet nach Kategorien: Text, Medien, Design, Widgets, Theme und Einbettungen. Sie können auch einfach "/" in einem leeren Absatz tippen, um schnell nach Blöcken zu suchen.

Die häufigsten Blöcke

• Paragraph (Absatz): Der grundlegende Textblock. Unterstützt Fett, Kursiv, Links und Inline-Formatierung.
• Heading (Überschrift): Überschriften von H2 bis H6. Nutzen Sie sie zur Strukturierung des Inhalts (H1 ist üblicherweise der Beitragstitel).
• Image (Bild): Einfügen von Bildern mit Optionen für Größe, Ausrichtung, Alt-Text und Link.
• List (Liste): Aufzählungslisten und nummerierte Listen mit verschachtelten Einträgen.
• Quote (Zitat): Hervorgehobene Zitate mit gestaltetem Erscheinungsbild.
• Gallery (Galerie): Eine Bildergalerie mit automatischer Anordnung und Lightbox-Ansicht.
• Cover: Ein Bild mit Text darüber – ideal für Abschnitte mit einem Hintergrundbild.
• Columns (Spalten): Ordnen Sie Inhalte in Spalten (2, 3 oder mehr) für komplexere Layouts an.

Blöcke bearbeiten und verschieben

Jeder Block verfügt über eine Symbolleiste, die oberhalb erscheint, sobald Sie ihn auswählen. Die Symbolleiste enthält Optionen, die spezifisch für diesen Blocktyp sind. Auf der rechten Seite des Editors bietet ein Einstellungs-Panel zusätzliche Optionen für den ausgewählten Block (Farben, Typografie, Abstände).

Blöcke können Sie per Drag-and-Drop oder mit den Pfeilen nach oben/unten in der Symbolleiste verschieben. Sie können sie außerdem gruppieren, kopieren, duplizieren oder in einen anderen Blocktyp umwandeln (zum Beispiel einen Absatz in eine Überschrift).

Erweiterte Blöcke

Group-Block

Mit dem Group-Block können Sie mehrere Blöcke zu einer Einheit zusammenfassen. Das ist nützlich, um eine gemeinsame Hintergrundfarbe, Abstände oder einen Rahmen auf eine Gruppe von Blöcken anzuwenden. Sie können beispielsweise eine Überschrift, einen Absatz und eine Schaltfläche zu einer "Karte" mit Hintergrundfarbe und abgerundeten Ecken gruppieren.

Columns-Block

Der Columns-Block erstellt ein mehrspaltiges Layout. Sie können zwischen vordefinierten Varianten wählen (50/50, 33/33/33, 25/50/25 usw.) oder die Breite jeder Spalte manuell festlegen. Innerhalb jeder Spalte können Sie beliebige Blöcke einfügen. Auf mobilen Geräten stapeln sich die Spalten automatisch vertikal.

Table-Block

Für die Darstellung tabellarischer Daten bietet der Table-Block eine einfache Möglichkeit, Tabellen ohne HTML zu erstellen. Sie können die Anzahl der Zeilen und Spalten festlegen, Kopf- und Fußzeile der Tabelle gestalten und ein gestreiftes Format für bessere Lesbarkeit anwenden. Für komplexere Tabellen sollten Sie ein Plugin wie TablePress in Betracht ziehen.

Wiederverwendbare Blöcke (Synced Patterns)

Seit WordPress 6.3 wurden die wiederverwendbaren Blöcke in "Synced Patterns" umbenannt. Dies ist eine der leistungsstärksten Funktionen von Gutenberg. Sie können jeden Block oder jede Blockgruppe als Pattern speichern und anschließend auf mehreren Seiten verwenden.

Der entscheidende Unterschied: Wenn Sie ein synchronisiertes Pattern ändern, wird die Änderung automatisch auf ALLE Seiten angewendet, auf denen dieses Pattern verwendet wird. Das ist ideal für Elemente, die sich über mehrere Seiten wiederholen – Handlungsaufforderungen (CTAs), Kontaktinformationen, Werbebanner, Newsletter-Formulare.

So erstellen Sie ein synchronisiertes Pattern: Wählen Sie den Block oder mehrere Blöcke aus, klicken Sie auf die drei Punkte in der Symbolleiste, wählen Sie "Pattern erstellen" und benennen Sie es. Um es auf einer anderen Seite einzufügen, finden Sie es im Bereich Patterns des Block-Inserters.

Tastaturkürzel

Tastaturkürzel beschleunigen die Arbeit in Gutenberg erheblich. Hier die nützlichsten:

• / (Schrägstrich): In einem leeren Absatz öffnet sich die schnelle Block-Suche.
• Ctrl+Shift+D: Dupliziert den ausgewählten Block.
• Ctrl+Alt+T: Fügt einen neuen Block oberhalb des aktuellen hinzu.
• Ctrl+Alt+Y: Fügt einen neuen Block unterhalb des aktuellen hinzu.
• Ctrl+Shift+Z: Wiederherstellen (eine rückgängig gemachte Aktion wiederholen).
• Ctrl+Z: Rückgängig (die letzte Aktion zurücknehmen).
• Escape: Wählt den Block aus (Wechsel vom Bearbeiten- in den Auswahlmodus).
• Enter: Erstellt einen neuen Block darunter.
• Ctrl+Shift+,: Blendet das seitliche Einstellungs-Panel ein oder aus.
• Shift+Alt+H: Zeigt alle verfügbaren Tastaturkürzel an.

Auf dem Mac verwenden Sie Cmd anstelle von Ctrl. Diese Kürzel funktionieren in allen modernen WordPress-Versionen.

Tipps für effizienteres Arbeiten

Nutzen Sie die "Listenansicht" (Ctrl+Alt+O), um die Struktur aller Blöcke in einer hierarchischen Ansicht zu sehen – besonders nützlich bei langen Seiten. Probieren Sie den "Vollbild"-Modus für ablenkungsfreies Arbeiten. Verwenden Sie die Option "Obere Symbolleiste", falls Sie die Symbolleiste stört, die über jedem Block aufpoppt. Organisieren Sie häufig verwendete Blöcke in Patterns, um Inhalte schneller zu erstellen.

Fazit

Der Gutenberg-Editor ist ein leistungsstarkes Werkzeug, das die Art und Weise verändert, wie Sie Inhalte in WordPress erstellen. Der Block-Ansatz gibt Ihnen visuelle Kontrolle ohne Code, synchronisierte Patterns sparen Zeit bei wiederkehrenden Inhalten und Tastaturkürzel beschleunigen die tägliche Arbeit. Investieren Sie Zeit in das Erlernen von Gutenberg – sie wird sich um ein Vielfaches auszahlen. Für eine optimale Performance des Editors nutzen Sie für WordPress optimiertes Hosting, das die Erstellung von Inhalten schneller und hochwertiger macht.