WordPress-Websites mit dem Gutenberg-Editor designen

Im folgenden Blogartikel lernst du, wie du auf der Grundlage von Twenty Twenty-Two ein eigenes WordPress-Layout im Gutenberg erstellen kannst.

Seit WordPress 5 ist der Block-Editor Gutenberg der Standard für die Bearbeitung von Blog-Posts und anderen Inhalten einer WordPress-Seite. Seit dem Update auf WordPress 5.9 beherrscht Gutenberg auf das sogenannte Full-Site-Editing – und ist damit zu einem echten WordPress-Page-Builder herangewachsen.

Die Erstellung attraktiver WordPress-Designvorlagen, sogenannten Themes, ist ein aufwändiger Prozess und nichts für technische Laien. Daher gibt es einen florierenden Handel mit fertigen Themes, etwa unter themeforest.net oder – für Gratis-Themes – direkt in WordPress. Das Problem dabei: Einfache (Gratis-) Themes lassen sich nur schlecht anpassen. Wer Schriftbild und Layout anpassen will, muss im Zweifel den Quellcode hacken. Komplexere und meist kostenpflichtige Themes sind hier flexibler, benötigen aber auch eine komplexe Zusatzsoftware in Form eines sogenannten Page-Builders.

Beliebt sind hier etwa Elementor, Themify oder WP-Bakery. Diese erlauben eine Bearbeitung von WordPress-Seiten auf ähnlich einfache Weise wie der STRATO Homepage-Baukasten.

Gutenberg: Eine kluge Entscheidung

Leider sind Pagebuilder als zusätzliche Elemente nicht nur teuer, sondern auch technisch aufwändig – und daher längst nicht für jedes Webprojekt geeignet. Daher haben sich die WordPress-Macher dazu entschieden, den eigentlich für das Design von Beiträgen gedachten Block-Editor Gutenberg-Editor zu einem Pagebuilder mit sogenanntem Full-Site-Editing auszubauen und den alten WordPress-Customizer zu ersetzen. Ein kluger Schritt, ist Gutenberg doch ohnehin bei jedem WordPress an Bord und trägt nicht auf. Außerdem sind User in aller Regel mit der Bedienung vertraut, wodurch die Einstiegshürde sinkt. Und der Editor ist natürlich kostenlos. Viele gute Argumente also, ihn einzusetzen – und selbst ein Design für WordPress zu erstellen.

Eigenes Design mit dem Gutenberg Full-Site-Editor erstellen

Wir nehmen im folgenden Workshop das Twenty Twenty-Two-Theme als Grundlage: Es ist als Standard-Theme durch seine enge Bindung an WordPress bestens geeignet, um erste Schritte im Gutenberg Page-Builder durchzuführen. Zunächst musst Du das Theme in Deinem WordPress-Blog aktivieren, dann kann es auch schon losgehen.

Full-Site-Editor starten

Klicke unter „Design“ auf „Editor (Beta)“. Daraufhin öffnet sich der WordPress Full-Site-Editor, in dem Du jetzt jedes Element bearbeiten und verschieben kannst. Inhalte sind allerdings nach wie vor vom Design getrennt: Wenn Du einen Blog-Post schreiben willst, musst Du dafür über die normale WordPress-Oberfläche gehen.

Menü bearbeiten

Wie beim regulären Gutenberg-Editor kannst du Elemente nun bearbeiten, indem du sie anklickst. Für einen ersten Schritt kannst du etwa das Menü oben rechts anpassen. Klicke das Element an: Der Editor blendet dir jetzt Möglichkeiten zum Anpassen ein. Klicke zum Beispiel auf den kleinen Pfeil nach links, um das Menü linksbündig erscheinen zu lassen. Mit Klick auf die drei Punkte rechts kannst du „Weitere Einstellungen anzeigen“: Hier kannst du etwa die Textgröße oder die Ausrichtung ändern.

Header-Bild ändern

In einem nächsten Schritt kannst Du zum Beispiel das Header-Bild austauschen. Klicke hierfür auf „Ersetzen“ und wähle ein anderes Bild aus. Das Bild kann zu einem späteren Zeitpunkt auch bearbeiten oder einfach komplett entfernen. Du kannst Bilder auch – genau wie bei Gutenberg – nach der Block-Logik auch an anderen Orten Deines Themes einfügen, ändern oder löschen.

Inhaltsbereich anpassen

Nach dem gleichen Schema kannst du auch den Bereich unterhalb des Headers anpassen: Du siehst in der Auswahl typische Elemente, etwa die Überschrift, den Beitrags-Auszug oder das Beitrags-Datum. Klicke das Element an, um weitere Optionen zu erhalten. Auf diese Weise kannst du unter anderem Elemente verschieben: Willst du das Datum über dem Auszug, kannst du es einfach mit dem kleinen Pfeil nach oben hieven. Oder du entfernst das Vorschaubild, weil du es nicht benötigst.

Elemente löschen oder hinzufügen

Du kannst natürlich auch Elemente löschen und hinzufügen. Das Löschen ist denkbar einfach: Wähle das Element aus, klicke auf die drei Punkte und wähle „(Inhaltselement-Name) löschen“. Um ein Element neu zu erstellen, musst du nur an der gewünschten Stelle klicken und anschließend mit dem blauen Plus-Symbol einen „Block hinzufügen“. Wenn du in diesem Menü auf „Alle durchsuchen“ klickst, findest du unter „Theme“ die nötigen Inhaltselemente, etwa Beitragstitel, -auszug, -autor oder Zusatzfunktionen wie Kommentare. Auf diese Weise kannst du ganz bequem und einfach deine WordPress-Seite nach deinen Wünschen gestalten.

Noch nicht ganz rund, aber mit Perspektive

Grundsätzlich arbeitet der Full-Site-Editor von Gutenberg schon recht rund, ist aber in der Bedienung gewöhnungsbedürftig und als Beta-Version an manchen Stellen noch hakelig. Wer Gutenberg kennt, wird sich schnell zurechtfinden, für Anwender ohne Erfahrung ist der neue Editor allerdings ein wenig komplex – hier hilft nur ausprobieren, am besten mit einer Test-Website.

Dennoch: Dank des Full-Site-Editors kann das Layout einer WordPress-Seite – sofern das Theme die Funktion unterstützt – schnell und einfach ohne Code-Gebastel an die persönlichen Bedürfnisse angepasst werden, weshalb sich der Einsatz sowohl für Neueinsteiger, als auch für alte WordPress-Hasen lohnen dürfte.