Der Gutenberg-Editor ist das Standardwerkzeug, um Inhalte auf einer WordPress-Website zu erstellen und zu gestalten. Doch gerade für Anfänger kann er zunächst etwas überwältigend wirken. Keine Sorge! In diesem Blogeintrag führe ich dich Schritt für Schritt in die Arbeit mit dem Gutenberg-Editor ein, damit du schnell verstehst, wie du mit Blöcken und Layouts ansprechende Beiträge und Seiten erstellst.

Was ist der Gutenberg-Editor?

Im Jahr 2018 wurde der klassische WordPress-Editor durch den Gutenberg-Editor ersetzt. Im Gegensatz zum alten Editor, der wie ein simples Textfeld funktioniert, ist Gutenberg blockbasiert. Das bedeutet, dass du jeden Teil deines Inhalts – sei es Text, Bilder, Videos oder Buttons – als einen sogenannten „Block“ hinzufügen kannst.

Das macht es flexibler und einfacher, komplexere Layouts zu erstellen, ohne dass du Programmierkenntnisse brauchst. Lass uns direkt damit loslegen, wie du diese Blöcke verwendest.

Die Grundlagen der Blöcke

Ein Block ist ein einzelnes Baustein-Element, das du für verschiedene Inhalte verwenden kannst. Hier sind einige der häufigsten Blöcke, die du in Gutenberg nutzen kannst:

• Absatzblock: Für regulären Text.
• Bildblock: Zum Einfügen von Bildern.
• Überschriftsblock: Um deinen Text in Abschnitte zu unterteilen.
• Listenblock: Für Aufzählungen oder nummerierte Listen.
• Videoblock: Um Videos von Plattformen wie YouTube oder Vimeo hinzuzufügen.

Um einen Block hinzuzufügen, klickst du einfach auf das „+“-Symbol, das entweder oben links in der Menüleiste oder direkt im Editor-Bereich erscheint. Du kannst den gewünschten Block dann auswählen und einfügen.

So funktioniert das Arbeiten mit Blöcken:

1. Text schreiben: Wenn du anfängst zu schreiben, wird automatisch ein Absatzblock erstellt. Das ist der Standardblock für Text.
2. Blocktyp ändern: Falls du den Blocktyp ändern möchtest, wähle den Block aus und klicke im kleinen Menü, das über dem Block erscheint, auf das Symbol für die Blockeinstellungen. Hier kannst du zum Beispiel aus einem Absatzblock einen Überschrift- oder Zitatblock machen.
3. Blöcke verschieben: Du kannst Blöcke ganz einfach per Drag-and-Drop verschieben oder die Pfeile an der Seite eines ausgewählten Blocks verwenden, um ihn an die gewünschte Stelle zu setzen.

Layouts mit Blöcken gestalten

Jetzt, wo du weißt, wie man Blöcke hinzufügt, geht es um das Erstellen eines ansprechenden Layouts. Mit den vorgefertigten Layout-Blöcken kannst du das Design deiner Seite individuell gestalten.

Spalten-Block

Der Spalten-Block erlaubt es dir, deinen Inhalt nebeneinander anzuordnen. Das ist besonders nützlich, wenn du Text und Bilder oder mehrere Informationen auf einer Linie darstellen möchtest. Wenn du den Spalten-Block hinzufügst, kannst du die Anzahl der Spalten bestimmen und in jeder Spalte wiederum andere Blöcke platzieren.

Gruppieren von Blöcken

Eine weitere nützliche Funktion ist das Gruppieren von Blöcken. Das hilft dir, mehrere Blöcke zusammenzufassen, um sie gemeinsam zu bearbeiten oder zu verschieben. Du kannst zum Beispiel eine Gruppe erstellen, die aus einem Bild und einem darunter stehenden Textblock besteht, und diese dann als Einheit an einer anderen Stelle platzieren.

Weitere Layout-Blöcke:

• Medien & Text: Hiermit kannst du Text und ein Bild oder Video nebeneinander darstellen.
• Buttons: Buttons eignen sich hervorragend, um den Leser zu einer Aktion zu ermutigen (z.B. „Jetzt kaufen“, „Mehr erfahren“).
• Cover: Der Cover-Block ermöglicht dir, ein Bild oder Video als Hintergrund zu verwenden, über das du Text legen kannst – ideal für beeindruckende Titelbilder oder Call-to-Action-Abschnitte.

Design-Anpassungen und Block-Einstellungen

Jeder Block hat seine eigenen Anpassungsmöglichkeiten. Wenn du einen Block auswählst, erscheint auf der rechten Seite des Editors ein Menü mit den Block-Einstellungen. Hier kannst du das Design jedes Blocks individuell anpassen, z.B. die Schriftgröße ändern, den Hintergrund färben oder Abstände anpassen.

Für Layouts ist es besonders nützlich, mit den Abstands-Einstellungen zu spielen. Du kannst zum Beispiel den Abstand zwischen einzelnen Blöcken vergrößern, um das Design luftiger zu gestalten, oder sie eng beieinander halten, um einen kompakten Look zu erzeugen.

Vorlagen nutzen

Falls dir das Erstellen von Layouts zu aufwendig erscheint, kannst du auf vordefinierte Vorlagen zurückgreifen. WordPress und viele Themes bieten Layout-Vorlagen an, die du einfach auswählen und mit deinem eigenen Inhalt füllen kannst. Das spart Zeit und hilft dir, professionelle Designs zu erstellen, ohne alles von Grund auf neu zu gestalten.

Fazit: Der Gutenberg-Editor als mächtiges Werkzeug

Am Anfang mag der Gutenberg-Editor kompliziert erscheinen, aber wenn du dich erst einmal mit den Grundlagen vertraut gemacht hast, wirst du schnell merken, wie vielseitig und einfach er zu nutzen ist. Die blockbasierte Struktur gibt dir maximale Flexibilität bei der Gestaltung deiner Website, ohne dass du ein Designer oder Entwickler sein musst.

Das Beste daran: Du kannst experimentieren! Probiere unterschiedliche Blöcke aus, spiele mit Layouts und finde heraus, was am besten zu deiner Seite passt. Und wenn du mal einen Fehler machst, kannst du jeden Block ganz einfach wieder löschen oder ändern.

Mit ein bisschen Übung wirst du den Gutenberg-Editor meistern. Und solltest du doch Unterstützung benötigen, gibt es WordPress Agenturen, die weiterhelfen.