Die Entwicklung von WordPress hat einige Zeit gedauert, aber es hat sich von einer einfachen Blogging-Plattform zu einem robusten Content Management System (CMS) entwickelt, das fast das ganze Web steuert. Die größten Fortschritte gab es bei der Erstellung von Website-Designs. WordPress Full Site Editing (FSE) ist ein ehrgeiziger Weg, komplexe Werkzeuge in jedermanns Hände zu geben.

In diesem umfassenden Leitfaden werden die Geschichte und die Funktionen von WordPress Full Site Editing erläutert. Das Ziel ist es, dir zu zeigen, wie FSE funktioniert und dich in die Lage zu versetzen, deine eigenen Website-Designs zu entwickeln, genau wie die Profis.

Eine kurze Geschichte der Design- und Layouterstellung in WordPress

Um die Bedeutung von FSE zu verstehen, ist es wichtig, die Entwicklung der Gestaltung von Websites und Layouts in WordPress zu verstehen. Das wichtigste Werkzeug, das uns heute zur Verfügung steht, ist der klassische Editor.

Die WordPress Classic Editor-Oberfläche. Sie zeigt die Registerkarten für die visuelle und Textbearbeitung, die Formatierungsoptionen und die Veröffentlichungseinstellungen an. Der Status ist auf „Entwurf“ und die Sichtbarkeit auf „Öffentlich“ eingestellt.
Der WordPress Classic Editor

Natürlich war er nicht seit jeher „klassisch“. Es war davor immer der TinyMCE-Editor – der Standard seit der ersten Version von WordPress bis etwa 2018. Dabei handelt es sich um einen einfachen WYSIWYG-Texteditor (What You See Is What You Get), mit dem du Inhalte und grundlegendes HTML sowie einige Formatierungsstile eingeben kannst. Du kannst den TinyMCE-Editor immer noch erwerben, da es sich um ein kommerzielles Tool handelt:

Die in eine Website integrierte Benutzeroberfläche des TinyMCE-Rich-Text-Editors. Sie zeigt eine Beispiel-Landingpage für die Anmeldung zu Veranstaltungen mit Bearbeitungswerkzeugen und einem Formular, über das sich Benutzer für eine Veranstaltung anmelden können.
Die TinyMCE Editor-Startseite

Die größten Nachteile des TinyMCE-Editors sind die fehlenden Vorschaufunktionen und geringere Flexibilität, als du dir manchmal wünschen würdest. Theme-Frameworks wurden zu einer praktikablen und leistungsstarken Alternative. Das Genesis Framework von StudioPress gibt es natürlich immer noch, aber es gab auch einige andere, wie zum Beispiel Thesis.

Eine Blog-Post-Seite, die das Genesis Framework verwendet. Sie zeigt ein Schwarz-Weiß-Bild des Eiffelturms in Paris. Der Beitrag trägt den Titel „April in Paris – Ella Fitzgerald“ und ist auf den 1. Februar 2018 datiert. In der Seitenleiste werden die letzten Beiträge mit Miniaturbildern angezeigt.
Das Standardtheme des Genesis Frameworks

Hier kannst du sehen, wie wir von der Textbearbeitung zum visuellen Webdesign übergehen. Das Framework bietet dir Optionen für das WordPress-Backend, mit denen du Aspekte des Frontends ändern kannst. Außerdem erhältst du mehr „Bare-Metal“-Funktionalität, um weitere Änderungen vorzunehmen, z. B. Hooks und Filter, Vorlagenunterstützung und mehr.

Allerdings war die Zugänglichkeit für den typischen Nutzer immer noch nicht sehr gut, weshalb die Page-Builder-Plugins so beliebt wurden. Du verwendest sie zusammen mit dem TinyMCE/Classic Editor, um deine Website per Drag-and-Drop zu gestalten. Diese Plugins sind heute noch weitgehend die gleichen wie im Jahr 2011. Divi und Beaver Builder sind immer noch führend, aber auch Elementor ist ein Gigant:

Die Elementor-Benutzeroberfläche zeigt die Startseite eines Möbelgeschäfts. Die Seite enthält einen Bereich „Neue Kollektion“ mit Produktbildern und -beschreibungen, darunter eine Tischlampe für 200 $ und eine Sitzbank für 300 $. Auf der rechten Seite ist ein großer lilafarbener Acryl-Beistelltisch zu sehen. Die Benutzeroberfläche enthält auf der linken Seite Bearbeitungswerkzeuge und Farbwähler.
Die Elementor-Startseite

Lies den nächsten Abschnitt, um zu verstehen, warum wir Alternativen zum TinyMCE-Editor und einem Seitenerstellungs-Plugin haben.

Der Block-Editor und die komplette WordPress-Seitenbearbeitung

WordPress ist die Nummer eins in Sachen Popularität, aber um das zu erreichen, musste es seinen Titel verteidigen. Im Laufe der Jahre haben viele andere Plattformen den Markt überschwemmt.

Squarespace, Wix, Medium und viele andere wollen dasselbe Publikum und dieselbe Nutzerbasis wie WordPress, und bis zum Block-Editor hatten sie alle ein viel besseres Bearbeitungserlebnis.

Die Benutzeroberfläche des Website-Baukastens Wix zeigt eine Fotoportfolio-Seite im Bearbeitungsmodus an. Im linken Bereich werden Optionen zum Hinzufügen von Abschnitten angezeigt, während im Hauptbereich ein Beispiellayout für Edwards White Room Photography mit dem Bild einer Frau, die eine Kamera hält, dargestellt wird. In der oberen Menüleiste sind verschiedene Bearbeitungswerkzeuge und Veröffentlichungsoptionen sichtbar.
Bearbeiten einer Website mit Wix

Das war ein großes Problem für das WordPress-Management, da andere Plattformen zu dieser Zeit immer mehr an Bedeutung gewannen. Die Konkurrenten hatten auch moderne, visuelle und leistungsstarke Oberflächen, selbst für die einfache Layoutkontrolle.

Der Block-Editor ist eine modulare Methode, um die Beiträge und Seiten deiner Website aufzubauen, hat aber auch Nachteile. Zunächst einmal bedeutet sein begrenzter Umfang, dass du wahrscheinlich ein Page-Builder-Plugin benötigst, wenn du „tiefere“ Änderungen vornehmen willst. Außerdem brauchst du immer noch Entwicklungskenntnisse, um eine komplette Website zu erstellen – eine kreative Hürde, für die das WordPress-Team eine Lösung hat.

Was ist WordPress Full Site Editing (FSE)?

Das WordPress Full Site Editing ist die neueste und beste Möglichkeit, deine Website zu entwickeln. Sie baut auf der Verwendung von Blöcken auf, um dein Design zusammenzusetzen, und umfasst mehr als nur einzelne Beiträge und Seiten. Mit FSE kannst du jeden Aspekt des Designs deiner WordPress-Website über eine einheitliche und intuitive Oberfläche verwalten.

Die WordPress-Site-Editor-Benutzeroberfläche. Das Bild zeigt ein Layout für eine Beitragsvorlage mit drei Spalten, in denen Beitragstitel, Auszüge und Veröffentlichungsdaten angezeigt werden. Ein Kontextmenü ist geöffnet und zeigt Optionen wie Kopieren, Vorher einfügen, Nachher einfügen und mehr.
Bearbeiten von Vorlagen im WordPress-Site-Editor

Dies ist jetzt die „offizielle“ Art, deine Website zu bearbeiten. Er bringt alle Aspekte deiner Website unter einen Hut:

  • Die Bearbeitung der Navigation. Die alte Methode, bei der der Bildschirm Erscheinungsbild > Menüs erstellt wurde, ist jetzt in den Seiteneditor integriert.
  • Globale Stile. Du hast mehr Kontrolle über das Aussehen deiner gesamten Website. Dazu gehören Farben, Typografie, Abstände und vieles mehr.
  • Bearbeitung von Vorlagen. Früher waren dafür Entwicklungs- und Programmierkenntnisse wie PHP, HTML und CSS erforderlich. Jetzt kannst du mit dem Website-Editor Vorlagen für die verschiedenen Teile deiner Website erstellen und ändern, ohne dass du Code benötigst.
  • Blockvorlagen. Darunter versteht man wiederverwendbare Designelemente, die aus Sammlungen von Blöcken bestehen, die du in deine Layouts einfügen kannst.

Mit der Weiterentwicklung des Editors verschwinden auch einige Funktionen. Du brauchst zum Beispiel keine Widget-Bereiche mehr, obwohl WordPress sie noch immer als Legacy-Funktion für Themes ohne Blöcke verwendet.

Wir werden später darauf zurückkommen, was du mit dem WordPress Full Site Editing erreichen kannst. Vorher wollen wir aber noch einmal darauf eingehen, warum wir FSE überhaupt brauchen.

Warum wurde FSE in WordPress eingeführt?

Das WordPress-Team hat ein paar Gründe, FSE einzuführen. Einige davon sind technische Überlegungen. Zum Beispiel können wir mit dem Block-Editor nicht alle Aspekte der Website bearbeiten, obwohl die Funktionalität eigentlich vorhanden sein sollte.

Es ist schwer zu verstehen, warum es so lange gedauert hat, bis wir an den Vorlagenstilen arbeiten konnten, ohne Code zu benötigen. Mit dem klassischen Editor, Frameworks, Plugins für den Seitenaufbau und dem Block-Editor hatten wir nie die Möglichkeit dazu. Mit FSE wird dies für WordPress auf native Weise gelöst.

Die WordPress-Vorlagen-Verwaltungsoberfläche im Website-Editor. Sie zeigt verschiedene Seitenvorlagen wie „Alle Archive“, „Blog-Startseite“, „Index“ und „Seite ohne Titel“ mit Miniaturansichten und Beschreibungen für jede Vorlage an.
Der Bildschirm „Vorlagen“ im Site Editor

Diese Vereinfachung vereinheitlicht das Bearbeitungserlebnis und bringt es unter die Kontrolle des WordPress-Kernteams und nicht der Drittentwickler. Das bedeutet auch, dass das Benutzererlebnis einheitlich ist. Zwischen Inhalt, Layout und Design hast du von einem Bildschirm zum nächsten eine vertraute Erfahrung.

Diese konsistente Erlebnis bringt auch Langlebigkeit mit sich. Die vollständige Bearbeitung von WordPress-Websites wird nicht verschwinden, sondern sich im Laufe der Zeit einfach weiterentwickeln. Das gibt der Plattform eine Grundlage, um sich an alles anzupassen, was das Entwicklerteam in WordPress einführen möchte.

Insgesamt erstreckt sich diese Befähigung von den Entwicklern bis zu den Endnutzern. Die vollständige Bearbeitung von WordPress-Websites gibt jedem eine größere Kontrolle über die Designänderungen, die er vornehmen möchte, ohne auf Entwickler, komplexe Anpassungen oder Programmierkenntnisse angewiesen zu sein.

Die Alternativen zu FSE

Für das WordPress-Team ist FSE nicht nur die Gegenwart, sondern auch die Zukunft der Plattform. Allerdings brauchst du ein kompatibles Theme, um es zu nutzen (dazu später mehr). Außerdem sind andere WordPress-Unternehmen möglicherweise anderer Meinung, vor allem solche mit konkurrierenden Produkten.

WordPress-Webentwickler/innen würden zum Beispiel argumentieren, dass es eine gute Idee ist, die Gestaltung deines Themes jemandem anzuvertrauen, der sich damit auskennt. Wir stimmen dem in vielen Fällen zu, vor allem, wenn du komplexe Anforderungen hast, das richtige Budget und Zeit.

Ein Code-Editor-Fenster, das PHP-Funktionen zur Registrierung benutzerdefinierter Blockstile in WordPress anzeigt. Der Code definiert Stile für einen Pfeil-Symbol-Detail-Block, einschließlich CSS-Eigenschaften für Polsterung und Listenstil.
Ein Code-Editor zeigt einen Teil des PHP-Codes

Natürlich ist der Block-Editor für den Großteil der Inhaltserstellung und -anpassung immer noch brauchbar. Der Sprung von diesem Editor zur vollständigen Bearbeitung einer Website ist nur ein kleiner Sprung und du wirst ihn wahrscheinlich schon benutzen:

Die WordPress-Block-Editor-Oberfläche für eine Seite mit Datenschutzrichtlinien. Der Inhaltsbereich zeigt Abschnitte zu Kommentaren, Medien und Cookies mit Textvorschlägen. Eine Seitenleiste auf der rechten Seite bietet Blockbearbeitungsoptionen für Typografie und Gestaltung.
Der WordPress-Block-Editor

Viele Nutzer/innen werden den Block-Editor zum größten Teil nutzen und dann eine andere Lösung einführen. Ein Plugin für den Seitenaufbau bietet einige der Funktionen, die dem Block-Editor fehlen. Divi, Elementor, Beaver Builder, Brizy und viele andere haben großartige Funktionen und ermöglichen tiefere Anpassungen und Entwicklungen:

Die Elementor-Benutzeroberfläche in WordPress zeigt links Textbearbeitungswerkzeuge, in der Mitte eine Vorschau des Seiteninhalts mit einem Bild einer Berglandschaft und rechts ein Strukturfeld mit den Seitenlayoutelementen.
Der Elementor-Seitenerstellungsbildschirm in WordPress

Wenn du das genaue Gegenteil von WordPress erleben und zu dem zurückkehren möchtest, wo alles begann, kannst du dich für ein ganz neues CMS entscheiden: ClassicPress.

Die Startseite der Website von ClassicPress. Sie verfügt über einen türkis-grünen Hintergrund mit Farbverlauf und weißer Schrift, die ClassicPress als das CMS für Kreative beschreibt. Es gibt ein Bild des ClassicPress-Dashboards und Schaltflächen zum Herunterladen oder Wechseln von WordPress.
Die ClassicPress-Startseite

Die Philosophie des Projekts ist, dass die Weiterentwicklung von WordPress eine großartige Idee ist, abgesehen vom Block-Editor und damit auch von FSE. Der ClassicPress-Fork enthält ihn daher nicht. Stattdessen erstellst du Websites mit dem Classic- oder TinyMCE-Editor – genau wie früher.

Es ist im Grunde eine einfache Lösung für die Unausgereiftheit des Blockeditors bei seiner ersten Veröffentlichung. Damals machte das Konzept theoretisch Sinn. Angesichts der aktuellen Bearbeitungsmöglichkeiten von WordPress gibt es jedoch kaum einen Grund, sich für ClassicPress zu entscheiden.

Wie die WordPress-Volltextbearbeitung funktioniert

Kurz gesagt, erweitert WordPress Full Site Editing die Funktionalität des Blockeditors auf deine gesamte Website. Um FSE zu nutzen, brauchst du ein „Block-Theme“ oder „FSE-Theme“, das es unterstützt. Wir werden später genauer darauf eingehen.

Der Überblick über die Funktionsweise von FSE ist ganz einfach:

  • FSE verwendet Blöcke. Genau wie bei der aktuellen Version des WordPress-Editors verwendet deine gesamte Website Blöcke für jede Komponente. Dabei werden sowohl einzelne Inhaltselemente als auch größere strukturelle Komponenten (wie Kopf- und Fußzeilen) mit Blöcken versehen.
  • Du kannst Seitenvorlagen in WordPress bearbeiten. Für das Ändern von Vorlagendateien sind keine PHP-Kenntnisse mehr erforderlich. Stattdessen kannst du sie über den Site Editor erstellen und bearbeiten.
  • Es gibt Zugriff auf seitenweite Design-Tools. Wir werden uns das Panel Globale Stile später ansehen, aber damit kannst du Designelemente steuern, die deine gesamte Website betreffen. In vielen Fällen wirst du kein benutzerdefiniertes CSS benötigen, um deine Vorstellungen umzusetzen.
  • Mit Blockmustern kannst du schnell bauen. Wie beim Block-Editor gibt es auch hier Layouts für gängige Website-Bereiche, die du ohne Einschränkungen einfügen und anpassen kannst.
  • Die Datei theme.json ist das Herzstück von FSE. In dieser Konfigurationsdatei werden die grundlegenden Stile und Einstellungen für dein Theme festgelegt. Sie ist ein Ausgangspunkt für die weitere Anpassung deiner Website, kann aber auch der „Dreh- und Angelpunkt“ für deine Entwicklung sein.

Die meisten Nutzer/innen werden keine ältere WordPress-Version als 5.9 verwenden, aber wenn doch, musst du ein Update durchführen, um FSE zu nutzen. Wie wir bereits beschrieben haben, brauchst du auch ein unterstützendes Theme. Lass uns das kurz besprechen.

Auswahl eines geeigneten FSE-Themes

Glücklicherweise ist die Wahl eines Block-Themes genauso wichtig wie die Wahl eines anderen Themes. Du musst auf einige objektive Aspekte achten, um sicherzustellen, dass du eine gute Lösung herunterlädst:

  • Achte auf regelmäßige Updates der Codebasis des Themes.
  • Erkundige dich anhand von Bewertungen und Rezensionen, was andere Nutzer über das Theme denken.
  • Vergewissere dich, dass der Entwickler das richtige Maß an Support für deine Bedürfnisse bietet.

Da die vollständige Bearbeitung von WordPress-Websites neu auf der Plattform ist, stehen dir weniger Theme-Optionen zur Verfügung. Das bedeutet aber nicht, dass Qualität schwer zu finden ist. Viele größere Entwickler haben ihre eigenen Vorstellungen von einem FSE/Block-Theme. Einer der ersten war ThemeIsle’s FSE-Version von Neve:

Die Neve FSE-Themeseite. Die Kopfzeile enthält Navigationslinks und der Hauptinhalt besteht aus einer Überschrift („Erstelle und erweitere deine einzigartige Website noch heute“) mit einer Unterüberschrift und zwei Call-to-Action-Buttons. Darunter befinden sich drei Funktionssymbole für Baustellen, Stilvariationen und Musterfertigkeit.
Die Startseite des Neve FSE-Themes

Die „traditionelle“ oder „klassische“ Version des Themes verwendet den alten Customizer aus dem Erscheinungsbild-Bildschirm. In dieser Version ist der Site Editor vollständig integriert und bietet eine bessere subjektive Leistung.

Es gibt noch andere Block-Themes wie Portfolio WP und Mugistore, die du dir ansehen solltest. Ollie ist aber wohl das beste unter ihnen:

Eine Reihe von Website-Design-Modellen und UI-Komponenten, die in einem Rasterlayout aus dem Ollie-Thema angezeigt werden. Es zeigt verschiedene Elemente wie Kopfzeilen, Inhaltsabschnitte, Bildergalerien und Call-to-Action-Buttons in dunklen, hellen und farbenfrohen Themes.
Die Startseite des Themes Ollie

Es bietet die vollständige Bearbeitung der WordPress-Website, ohne zu wanken. Es hat einen tollen Einführungsassistenten und sogar eine Premium-Version, die viele Elemente und Vorlagen der Musterbibliothek enthält.

Selbst das Standard-Theme Twenty Twenty-Four ist jetzt eine gute Wahl für deine Website:

Die Startseite zum Theme „Twenty Twenty-Four“ zeigt einen Heldenbereich mit einem großen architektonischen Bild eines modernen Gebäudes mit einem markanten schrägen Dach, das mit Holzlatten verkleidet ist. Die Kopfzeile enthält Navigationslinks zu einer Datenschutzrichtlinie und einer Beispielseite.
Der Startbildschirm des Twenty Twenty-Four-Themes

Die Fähigkeiten und die Tiefe des Site Editors ermöglichen es uns, auf Themes aufzubauen (und sie zu erweitern), die oft viel Code und Ressourcen erfordern. Er demokratisiert die Fähigkeit, Themes zu erstellen und zu entwickeln, und die Hauptschnittstelle ist dafür die erste Anlaufstelle.

Ein Rundgang durch die FSE-Oberfläche

Um den Site Editor zu finden, navigiere in WordPress zu Darstellung > Editor:

Ein Screenshot des WordPress-Dashboards. In der linken Seitenleiste werden die wichtigsten Optionen des WordPress-Administrationsmenüs angezeigt. Das Menü „Erscheinungsbild“ ist erweitert, um die Optionen „Themes“ und „Editor“ anzuzeigen. Außerdem wird eine Warnung zum Status der Website angezeigt.
Der Link Appearance > Editor im WordPress-Dashboard

Dieser Bildschirm ist recht übersichtlich. Auf der rechten Seite siehst du die Layout-Vorschau. Du kannst darauf klicken, um die Oberfläche des Site Editors für deine Startseite zu öffnen. Auf der linken Seite findest du eine Reihe von Links zu anderen Bearbeitungsseiten für bestimmte Aufgaben. Wir werden uns diese Seiten in Kürze genauer ansehen.

Bevor wir uns die fünf Bildschirme von FSE ansehen, solltest du wissen, dass du den Site Editor über das WordPress-Logo in der oberen linken Ecke des Bildschirms verlassen kannst. Alternativ kannst du auch auf den „Zurück“-Pfeil auf der Hauptseite Design klicken:

Der Bildschirm „Design“ des WordPress-Site-Editors. Es sind Optionen für Navigation und Stile sichtbar. Das WordPress-Logo und ein Zurück-Pfeil sind in der oberen linken Ecke hervorgehoben.
Die Hauptseite des Site Editors

Nachdem das geklärt ist, können wir mit der Verwendung von FSE beginnen.

Die 5 Säulen der WordPress-Seitenbearbeitung

Jetzt werden wir jeden Bildschirm des Site Editors in der Reihenfolge untersuchen, in der er in der Navigation erscheint. Das bringt uns dazu, diesen Bildschirm zu besprechen!

1. Navigation

Die Navigationsseite ersetzt den Bildschirm Erscheinungsbild > Menüs. Sobald du sie betrittst, siehst du eine Liste der Beiträge und Seiten auf deiner Website:

Vollansicht der Navigationsseite im WordPress-Site-Editor. Die linke Seitenleiste zeigt eine Navigationsmenüstruktur, während der Hauptinhaltsbereich eine Vorschau der Website mit Platzhaltertext und dem visuellen Navigationsmenü anzeigt.
Die Navigationsseite des Website-Editors

Wenn es sich um eine neue Website handelt, siehst du hier alle deine Beiträge und Seiten. Das kann verwirrend sein, weil es dein Hauptnavigationsmenü darstellt. Neben der Überschrift Navigation öffnest du das Menü Aktionen. Hier hast du die Möglichkeit, das Menü zu bearbeiten, den Namen zu ändern, es zu löschen oder es zu duplizieren:

Ein Ausschnitt der Navigationsseite im WordPress-Site-Editor. Der Seitentitel ist oben sichtbar. Die linke Seitenleiste zeigt die Elemente des Navigationsmenüs und ein Dropdown-Menü in der Mitte bietet Optionen zum Umbenennen, Bearbeiten, Duplizieren oder Löschen eines ausgewählten Menüelements.
Öffnen des Menüs „Aktionen“ auf der Seite „Navigation“

Wenn du auf Bearbeiten klickst, wird eine Version des Blockeditors geöffnet, die dein Menü als Navigationsblock enthält:

Die Navigationsmenü-Oberfläche des Website-Editors. Der Hauptinhaltsbereich zeigt eine Liste der Navigationsmenüelemente mit Lorem Ipsum-Text. Auf der rechten Seite befindet sich ein Navigationsmenü-Panel mit Optionen zum Bearbeiten und Verwalten der Menüstruktur.
Arbeiten mit dem Navigationsblock im Seiteneditor

In der Seitenleiste hast du die Möglichkeit, jeden Eintrag nach oben oder unten zu verschieben, ihn aus dem Menü zu entfernen oder ein Untermenü daraus zu erstellen:

Eine Nahaufnahme der Optionen für den Navigationsmenüblock im Website-Editor. Sie zeigt ein Dropdown-Menü mit Optionen für den ersten Menüpunkt, um sie nach oben oder unten zu verschieben, Untermenü-Links hinzuzufügen oder Elemente zu entfernen.
Die Seitenleiste des Navigationsblocks

Jeder Eintrag im Menü verwendet einen Seiten-Link-Block, für den es eigene Optionen gibt. Du kannst die Inline-Formatierung und den Stil der Seitenleiste anpassen:

Der Website-Editor zeigt den Inhalt eines Navigationsmenüblocks an. Ein Inline-Menü zeigt eine Liste mit Optionen zum Hinzufügen neuer Links, Personalisieren der Typografie, Anpassen der Stile für die Navigationselemente und vieles mehr an.
Die Formatierungsoptionen für einen Page Link Block im Site Editor

Beachte, dass du hier Bilder, Untermenüs und mehr einfügen kannst. Das ist flexibler als die klassische Art, eine Navigation zu erstellen. Um ein Element zum Menü hinzuzufügen, klicke einfach auf das Plus-Symbol und wähle deinen Beitrag oder deine Seite aus:

Eine Nahaufnahme des Navigationsblocks in WordPress, die das Menü „Link hinzufügen“ zeigt. Das Menü enthält eine Suchleiste zur Eingabe einer URL und eine Liste von Seiten, darunter „Datenschutzrichtlinie“ und „Beispielseite“. In der oberen Symbolleiste sind Symbole zum Hinzufügen von Inhalten und zum Navigieren zu sehen.
Die Optionen, um eine neue Seite als Navigationselement hinzuzufügen

Sobald du deine Änderungen speicherst, siehst du, dass die Navigation deine Anpassungen widerspiegelt. Um weitere Menüs zu erstellen, kannst du den Link Aktionen > Duplizieren auf der Navigationsseite verwenden.

2. Stile

Auf der Seite Stile kannst du das Aussehen deiner Website auf globaler Ebene steuern. In der Seitenleiste findest du verschiedene Paletten und Typografieeinstellungen für unterschiedliche Designs:

Die Seite „Stile“ im WordPress-Site-Editor. Die Überschrift lautet „Eine Leidenschaft für die Gestaltung von Räumen“ und enthält eine Beschreibung der Dienstleistungen. Im Folgenden werden sechs Dienstleistungskategorien aufgeführt: Renovierung und Restaurierung, kontinuierliche Unterstützung, Zugang zu Anwendungen, Beratung, Projektmanagement und architektonische Lösungen. In der linken Seitenleiste werden verschiedene Stilvorgaben und Farbpaletten zur Anpassung des Themas angezeigt.
Der Bildschirm „Stile“ des Website-Editors

Wenn du auf eine der Paletten klickst, wird dir das Design auf deiner Website angezeigt. Oben in der Seitenleiste gibt es ein Bleistift-Symbol, mit dem du weitere Änderungen im Seiteneditor vornehmen kannst:

Nahaufnahme eines Website-Designs im Site Editor, das die von einem Architekturbüro angebotenen Dienstleistungen präsentiert. In der rechten Seitenleiste werden Optionen zur Anpassung des Stils für Typografie, Farben, Schatten und Layout angezeigt.
Die Optionen in der Stil-Seitenleiste des Seiteneditors

Jede der Optionen in dieser Seitenleiste umfasst Farben, Layouts, Typografie und sogar Schatteneinstellungen. Du kannst zum Beispiel seitenweite Schriftarten auswählen und sie auf verschiedene Elemente deines Designs anwenden:

Die Benutzeroberfläche des Site Editors zeigt globale Typografieeinstellungen. Auf der linken Seite wird ein Textauszug über das Erstellen von Leerzeichen angezeigt, während im rechten Bereich Schrift- und Stiloptionen einschließlich der Schriftarten Cardo, Inter und System angezeigt werden. Das Farbschema verwendet roten Text auf hellem Hintergrund.
Die Typografie-Einstellungen in der Seitenleiste des Seiteneditors

Wenn du tiefer in die Menüs einsteigst, stehen dir oft weitere Optionen zur Verfügung, wie Abstände, Farben und mehr. Im Bereich Layout kannst du die Abmessungen deines Hauptinhaltsbereichs sowie die Abstände zwischen den Blöcken anpassen:

Ein Screenshot der WordPress-Site-Editor-Benutzeroberfläche mit Optionen zur Layoutanpassung. Im Hauptinhaltsbereich wird die Überschrift „Zum Erstellen von Bereichen“ mit einem beschreibenden Text angezeigt. In der rechten Seitenleiste werden die Layouteinstellungen zum Anpassen der Inhaltsbreite, des Abstands und des Blockabstands angezeigt.
Die Layout-Optionen im WordPress-Site-Editor

Wenn du sehen willst, wie diese Änderungen aussehen, ohne deine Website zu durchsuchen, kannst du das „Auge“-Symbol verwenden, um das Style Book zu öffnen. Es ist ein praktisches Visualisierungswerkzeug, das Designer/innen lieben werden:

Die WordPress-Style-Book-Oberfläche zeigt Typografieoptionen für eine Website. Der Text „Code Is Poetry“ wird in verschiedenen Größen angezeigt, um unterschiedliche Überschriftenstile zu demonstrieren. Außerdem werden ein Absatz mit Beispieltext und eine Aufzählungsliste angezeigt. Die rechte Seitenleiste bietet Optionen zum Anpassen von Typografie, Farben, Schatten und Layout.
Das Style Book des WordPress-Site-Editors

Auch wenn wir hier nicht darauf eingehen, kannst du das Aussehen jedes Blocks für deine Website anpassen. Du könntest zum Beispiel auf dem globalen Styling eines Absatzblocks aufbauen. Auch hier gilt: Wenn du fertig bist, kannst du deine Änderungen speichern und sie werden für deine Website übernommen.

Verwendung der Datei theme.json bei der vollständigen Bearbeitung von WordPress-Seiten

Bevor du zum nächsten FSE-Bildschirm kommst, solltest du die Datei theme.json kennen. Sie ist im Wesentlichen die Entwicklerversion der Styles-Bildschirme.

Ein Code-Editor, der einen Teil einer WordPress-Datei „theme.json“ anzeigt. Der sichtbare Abschnitt definiert Farbpaletten und Farbverläufe, einschließlich Namen, Hexadezimal-Farbcodes und Verlaufsdefinitionen für verschiedene Farbschemata.
Eine theme.json-Datei in einem Coding-Editor

Mit ihr kannst du die Standardstile für deine Website und ihre Blöcke festlegen und sie als Konfigurationsdatei verwenden. Außerdem verwendet sie das JSON-Format, so dass sie weniger Code-lastig ist als früher.

Letztendlich kannst du alles, was du in theme.json tun kannst, auch im Site Editor tun.

3. Seiten

Der Seiten-Bildschirm dupliziert die Funktionen der klassischen Posts- und Pages-Bildschirme im WordPress-Dashboard. Du siehst zum Beispiel eine Liste von Status, die deine Seiten in folgende Kategorien unterteilt Veröffentlicht, Geplant, Entwürfe und andere:

Der Bildschirm „Seiten" des Website-Editors zeigt auf der linken Seite eine Liste der gefilterten geplanten Seiten an. Auf der rechten Seite wird eine Vorschau der Startseite einer Website angezeigt.
Der Bildschirm „Seiten“ im Website-Editor

Jede Seite hat zusätzliche Aktionen, wie z. B. Bearbeiten, Anzeigen, Umbenennen und Löschen. Du kannst eine Seite auch mit dem Stiftsymbol bearbeiten. Oben in der Liste gibt es die Option Neue Seite hinzufügen die das Offensichtliche tut.

Wenn du bereits den Block-Editor verwendest, wirst du dich auf diesen Bildschirmen am wohlsten fühlen. Auch wenn du hier die gleichen Funktionen wie sonst hast, bietet dir der Seiteneditor einige zusätzliche Themeblöcke, die dir beim Aufbau deiner Seite helfen. Diese decken typische Anwendungsfälle ab, wie das Hinzufügen eines Logos, einer Navigation, von Autoren, Kommentaren und mehr:

Die WordPress-Site-Editor-Oberfläche. In der linken Seitenleiste werden verschiedene Blockoptionen wie Navigation, Website-Logo und Website-Titel angezeigt. In dieser Seitenleiste wird der Query-Loop-Block hervorgehoben. Im Hauptbearbeitungsbereich wird ein Seitenlayout mit einem Hero-Bild angezeigt.
Auswahl der Theme-Blöcke im WordPress-Site-Editor

Einer dieser Blöcke – der Abfrage-Schleifen-Block – kann dir helfen, Aufgaben zu erledigen, für die du sonst PHP benötigst. So kannst du z. B. deine neuesten Beiträge anzeigen oder ein Portfolio erstellen, weil du damit Beiträge auf der Grundlage bestimmter Parameter anzeigen kannst. Ohne die letzten beiden Bildschirme des Site Editors ist das alles jedoch nicht möglich.

4. Vorlagen

Vorlagen sind ein Grundpfeiler der WordPress-Entwicklung. Sie sind wiederverwendbare Layouts, die dir helfen, die Struktur der verschiedenen Teile deiner Website zu definieren. Normalerweise sind dafür PHP-Kenntnisse erforderlich, aber du kannst sie alle ohne Code im Seiteneditor anpassen (und neue erstellen).

Die WordPress-Vorlagen-Verwaltungsoberfläche im Website-Editor. Sie zeigt verschiedene Seitenvorlagen wie „Alle Archive“, „Blog-Startseite“, „Index“ und „Seite ohne Titel“ mit Miniaturansichten und Beschreibungen für jede Vorlage an.
Der Bildschirm „Vorlagen“ im Website-Editor

Bei der Bearbeitung von Vorlagen gehst du genauso vor wie bei Beiträgen und Seiten: Du fügst im Seiteneditor Blöcke zur Vorlage hinzu und speicherst dann die Änderungen. Natürlich gelten diese Änderungen für jede Seite, die die betreffende Vorlage verwendet.

Um eine neue Vorlage zu erstellen, klickst du auf die Schaltfläche Neue Vorlage hinzufügen:

Hinzufügen einer neuen Vorlage im WordPress-Site-Editor. Es werden Optionen zum Hinzufügen von Vorlagen für verschiedene Seitentypen wie Startseite, Seiten, Autorenarchive, Kategoriearchive und mehr angezeigt.
Hinzufügen einer neuen Vorlage im Seiteneditor

Dann durchläufst du einen kurzen Assistenten, in dem du die Art der Vorlage, die du erstellen möchtest, und ein geeignetes Blockmuster für den Entwurf auswählst. Diese Muster stehen im Mittelpunkt unseres letzten Abschnitts.

5. Muster

Blockmuster sind zusammenhängende Sammlungen von Blöcken, die bestimmte Funktionen auf deiner Website erfüllen. Du kannst zum Beispiel ein Kopfzeilenmuster mit Logo, Navigation und Seitentitel einfügen:

Der WordPress-Site-Editor zeigt ein Header-Blockmuster mit Menüelementen, einem Seitentitel, einem Logo-Platzhalter und Links zu einer Datenschutzrichtlinie, einer Beispielseite und zwei weiteren lateinischen Platzhalter-Textelementen. Die Steuerelemente der WordPress-Benutzeroberfläche sind oben im Bild sichtbar.
Arbeit an einem Kopfzeilen-Blockmuster im Website-Editor

Sie zu erstellen ist ganz einfach, aber ohne den Site Editor müsstest du diese Muster mit PHP registrieren. Jetzt kannst du aber die Seite Muster verwenden:

Die WordPress-Mustermanagementseite im Website-Editor. In der linken Seitenleiste werden Musterkategorien angezeigt. Im Hauptbereich werden Miniaturansichten von Bannermustern angezeigt, darunter Bilder von Gebäuden und architektonischen Details.
Die Blockmuster-Bibliothek im Seiteneditor

Auf der linken Seite siehst du alle verfügbaren Muster in Ordnern, die „Typen“ genannt werden Mit diesen Mustern kannst du schnell ein Website-Design erstellen, das oft fantastisch aussieht.

Die Schaltfläche Neues Muster hinzufügen öffnet den Editor, mit dem du diese Abschnitte selbst erstellen kannst. Auf diese Weise kannst du wiederverwendbare Elemente für deine Website erstellen, was eine nachhaltige und eigennützige Art ist, Websites für dich und alle anderen, mit denen du arbeitest, zu entwickeln.

Tipps zur Verwendung der WordPress-Komplettbearbeitung für die Erstellung von Designs

Es gibt eine Menge zu entdecken, wenn es um die WordPress-Website-Bearbeitung geht, und wir können nicht alles behandeln, was du damit machen kannst. Wir können dir aber ein paar Tipps geben, wie du das Beste aus FSE herausholen kannst.

Du kannst zum Beispiel deine Vorlagen und Stile exportieren, um sie auf anderen Websites wiederzuverwenden. Gehe dazu in den Site-Editor für einen beliebigen Beitrag oder eine Seite und klicke dann auf das Menü Optionen in der oberen Symbolleiste. Wähle im Dropdown-Menü Exportieren:

Die Benutzeroberfläche des Website-Editors zeigt den Hauptbearbeitungsbildschirm, Menüoptionen und eine Seitenleiste mit Bearbeitungswerkzeugen. Unten ist die Exportfunktion hervorgehoben.
Exportieren eines Themes aus der Optionen-Seitenleiste des Site-Editors

So erhältst du eine ZIP-Datei deines Themes. Wenn du es importieren musst, kannst du das mit dem WordPress Importer Plugin tun.

Über das Suchsymbol auf den Bildschirmen des Seiteneditors und die Suchleiste in der Symbolleiste des Blockeditors hast du Zugriff auf die WordPress-Befehlspalette oder das Befehlszentrum. Wenn du Coding-Editoren verwendest, wirst du verstehen, wie das funktioniert. So kannst du mit einer kontextbezogenen Suchanfrage fast überall im Site-Editor hingelangen und sogar Befehle ausführen:

Die Befehlspalette im Seiteneditor. Das Dropdown-Menü zeigt Optionen wie Stile, Einzelbeiträge, Seiten, Seitenleiste und Beitrags-Meta an, unter anderem.
Öffnen und Verwenden der Befehlspalette vom Design-Bildschirm des Site Editors aus

Damit kannst du deine Entwicklung beschleunigen und die Anzahl der Tastatur- und Mausaktionen reduzieren. Du kannst von hier aus alle möglichen Elemente einer Website hinzufügen, löschen und bearbeiten, zwischen verschiedenen Ansichten umschalten und mit Mustern arbeiten.

Zusammenfassung

Die vollständige Website-Bearbeitung in WordPress ist die derzeit beste Möglichkeit, deine Website ohne Code zu gestalten. Sie ist ein deutlicher Fortschritt gegenüber den früheren Versionen der Inhaltsbearbeitung und bietet dir eine Vielzahl von Optionen.

Uns gefällt, wie flexibel sie ist: Typische Website-Besitzer/innen müssen keine einzige Zeile Code anfassen und können in den Bildschirmen des Site Editors arbeiten. Entwickler haben Zugriff auf die Datei theme.json, auf die wir in einem späteren Artikel eingehen werden. Wie auch immer, jetzt haben wir den Höhepunkt der Erstellung einer WordPress-Website nach deinen genauen Vorgaben erreicht.

Willst du die vollständige Website-Bearbeitung für deine WordPress-Projekte nutzen? Lass uns deine Meinung in den Kommentaren wissen!

Jeremy Holcombe Kinsta

Senior Editor at Kinsta, WordPress Web Developer, and Content Writer. Outside of all things WordPress, I enjoy the beach, golf, and movies. I also have tall people problems.