Vollständige Website-Bearbeitung und Website-Design

Die vollständige Website-Bearbeitung – im Englischen Full Site Editing, kurz FSE – ist eine der bedeutendsten Entwicklungen in der Geschichte von WordPress (*). Sie erweitert die Möglichkeiten des Block-Editors weit über einzelne Seiten und Beiträge hinaus und ermöglicht es dir, nahezu jeden Teil deiner Website visuell zu gestalten und anzupassen, ohne auf benutzerdefinierten Code oder komplexe Theme-Einstellungsfelder angewiesen zu sein.

Frühere WordPress (*)-Versionen verteilten Designaufgaben über viele verschiedene Bildschirme: Theme-Optionen, Widget-Bereiche, Menüeinstellungen, den Customizer und separate Anpassungsschnittstellen. Änderungen an Header, Footer, Vorlagen und globalen Designeinstellungen erforderten häufig das Wechseln zwischen mehreren Bereichen oder die manuelle Bearbeitung von Dateien.

Die vollständige Website-Bearbeitung vereinfacht diesen Prozess, indem sie alle Design-Aufgaben in eine einzige, einheitliche visuelle Umgebung bringt: den Site Editor. Dort erstellst du Layouts, passt Vorlagen an, definierst globale Stile und verwaltest sämtliche Designelemente deiner Website – ohne zwischen verschiedenen Bildschirmen wechseln zu müssen.

Für Einsteiger bedeutet das: mehr kreative Freiheit bei gleichzeitig weniger technischen Hürden. Dieses Artikel gibt dir einen umfassenden Überblick über alle wichtigen Bausteine des Site Editors – von Vorlagen und Vorlagenteilen über globale Stile und Muster bis hin zum Stilbuch.

Einführung in die vollständige Website-Bearbeitung

Full Site Editing wurde offiziell mit WordPress (*) 5.9 im Januar 2022 eingeführt und ist seit WordPress 6.2 vollständig produktionsreif. In 2026 ist FSE kein experimentelles Feature mehr, sondern der etablierte Standard für modernes WordPress-Design.

Um FSE nutzen zu können, brauchst du zwei Dinge: WordPress 5.9 oder höher sowie ein kompatibles Block-Theme. Klassische Themes unterstützen den Site Editor nicht – dort bleibt der Customizer die Anpassungsschnittstelle. Den Site Editor erreichst du im Dashboard über Design → Editor.

Der Kern von FSE ist die Erweiterung der Blockfunktionalität auf website-übergreifende Elemente. Statt Blöcke nur auf Seiten und Beiträgen einzusetzen, nutzt du dieselbe vertraute Bearbeitungsumgebung jetzt auch für Header, Footer, Vorlagen, Navigationsmenüs und globale Designeinstellungen.

Die Bausteine des Site Editors im Überblick

Der Site Editor besteht aus mehreren eng miteinander verbundenen Bausteinen, die zusammen dein gesamtes Website-Design steuern:

Baustein	Funktion	Erreichbar über
Vorlagen	Struktureller Bauplan für Seitentypen	Design → Editor → Vorlagen
Vorlagenteile	Wiederverwendbare Abschnitte (Header, Footer)	Design → Editor → Vorlagenteile
Globale Stile	Website-weite Typografie, Farben, Abstände	Design → Editor → Stile
Muster	Vorgefertigte, wiederverwendbare Block-Gruppen	Design → Editor → Muster
Navigation	Menüs website-weit erstellen und verwalten	Design → Editor → Navigation
Stilbuch	Vorschau aller Blöcke in den globalen Stilen	Design → Editor → Stile → Auge-Symbol

Den Site Editor kennenlernen

Wenn du den Site Editor öffnest, siehst du eine visuelle Darstellung deiner Website. Die Oberfläche gliedert sich in mehrere Bereiche, die du schnell kennenlernen wirst.

Der Bearbeitungsbereich

In der Mitte des Bildschirms siehst du eine visuelle Vorschau deiner Website. Du kannst hier Blöcke einfügen, Elemente verschieben, Layouts ändern und Änderungen direkt in der Vorschau begutachten – genau wie beim Block-Editor für Seiten und Beiträge. Was du siehst, entspricht dem, was später deine Besucher sehen.

Der Navigationsbereich

Die linke Seitenleiste ist das Organisationszentrum des Site Editors. Von hier aus navigierst du zu Vorlagen, Vorlagenteilen, Mustern, Navigationsmenüs, Seiten und Designeinstellungen. Je nach WordPress-Version und aktivem Theme können die Bereiche leicht variieren.

Die Einstellungs-Seitenleiste

Sobald du einen Block ausgewählt hast, erscheint rechts eine kontextsensitive Einstellungs-Seitenleiste. Dort findest du Optionen zur Blockanpassung: Layoutsteuerung, Typografie, Farben und Abstandsanpassungen. Diese Einstellungen ändern sich dynamisch je nachdem, welcher Block gerade aktiv ist.

Die Block-Werkzeugleiste

Die Werkzeugleiste erscheint direkt über einem ausgewählten Block und enthält Ausrichtungssteuerung, Positionierungsoptionen, Stileinstellungen und Transformationswerkzeuge. Sie gehört zum schnellsten Weg für einfache Designanpassungen.

Schritt für Schritt: Den Site Editor öffnen

Im WordPress-Dashboard anmelden.
„Design“ im linken Menü öffnen.
„Editor“ auswählen.
Die Benutzeroberfläche laden lassen.
Die linke Seitenleiste erkunden – dort findest du alle Hauptbereiche.

Vorlagen (Templates) verstehen und bearbeiten

Vorlagen sind strukturelle Baupläne, die festlegen, wie bestimmte Inhaltstypen angezeigt werden. Statt jede Seite einzeln zu gestalten, sorgen Vorlagen dafür, dass alle Beiträge, Seiten, Archivseiten und anderen Inhaltstypen ein einheitliches Layout erhalten. Wenn ein Besucher eine Seite aufruft, wendet WordPress automatisch die passende Vorlage an.

Warum Vorlagen wichtig sind

Vorlagen gewährleisten Konsistenz über deine gesamte Website. Ohne sie müsstest du jede Seite individuell gestalten – ein enormer Aufwand, der schnell zu inkonsistentem Design führt. Vorlagen ermöglichen dir einheitliche Layouts, konsistentes Branding, vorhersehbare Navigationsstrukturen und damit ein zuverlässiges Besuchererlebnis.

Gängige Vorlagentypen

Moderne Block-Themes liefern typischerweise diese Vorlagen mit:

Einzelner Beitrag – bestimmt, wie einzelne Blogartikel aussehen.
Einzelne Seite – für statische Seiten wie „Über uns“ oder „Kontakt“.
Startseite – die Eingangsseite deiner Website.
Archiv – listet Beiträge, Kategorien oder andere gruppierten Inhalte auf.
Suchergebnisse – wie die Ergebnisseite bei internen Suchen aussieht.
Kategoriearchiv – eine Übersicht aller Beiträge einer Kategorie.
Autorenarchiv – zeigt alle Beiträge eines Autors.
404-Fehlerseite – die Seite, die erscheint, wenn eine URL nicht gefunden wird.

Schritt für Schritt: Eine Vorlage bearbeiten

Den Site Editor öffnen (Design → Editor).
„Vorlagen“ in der linken Seitenleiste auswählen.
Die gewünschte Vorlage anklicken.
Den Vorlagen-Editor öffnen und das vorhandene Layout prüfen.
Blöcke hinzufügen, entfernen oder anpassen.
Abstand und Ausrichtung nach Bedarf justieren.
Änderungen speichern.
Die Website besuchen und prüfen, ob die Vorlage wie erwartet funktioniert.

Eigene Vorlagen erstellen

Neben den mitgelieferten Standardvorlagen kannst du eigene Vorlagen für spezifische Anforderungen erstellen, zum Beispiel für Landingpages, Portfolio-Seiten, Service-Seiten oder besondere Artikellayouts. Eigene Vorlagen geben dir maximale Designflexibilität, ohne die Konsistenz deiner übrigen Seiten zu gefährden.

Vorlagenteile: wiederverwendbare Design-Abschnitte

Vorlagenteile sind wiederverwendbare Design-Abschnitte, die in mehreren Vorlagen gleichzeitig eingesetzt werden. Der wichtigste Vorteil: Eine Änderung an einem Vorlagenteil wirkt sich sofort auf alle Seiten aus, auf denen er verwendet wird. Du änderst beispielsweise das Logo im Header-Vorlagenteil einmal – und es erscheint sofort überall auf deiner Website in der aktualisierten Form.

Typische Vorlagenteile sind Header, Footer, Navigationsabschnitte, Ankündigungsleisten und Seitenleistenelemente. Die meisten Websites nutzen mindestens zwei: Header und Footer. Größere Websites können viele weitere wiederverwendbare Abschnitte enthalten, etwa verschiedene Seitenleisten oder Werbebanner.

Den Header bearbeiten

Der Header ist eines der wichtigsten Elemente deiner Website. Er befindet sich in der Regel ganz oben auf jeder Seite und übernimmt Navigation und Branding. Besucher interagieren mit ihm oft als erstes – ein gut gestalteter Header hilft ihnen, die Website zu verstehen, effizient zu navigieren und wichtige Informationen schnell zu finden.

Typische Bestandteile eines Headers sind: Logo, Website-Titel, Navigationsmenü, Suchfunktion, Kontaktinformationen und Call-to-Action-Schaltflächen. Welche Elemente sinnvoll sind, hängt von deinen Website-Zielen ab.

Schritt für Schritt: Den Header bearbeiten

Den Site Editor öffnen.
„Vorlagenteile“ in der linken Seitenleiste wählen.
Den Header auswählen.
Vorhandene Elemente prüfen.
Blöcke hinzufügen oder entfernen.
Abstände und Ausrichtung anpassen.
Navigationsmenüs aktualisieren.
Änderungen speichern.
Auf Desktop testen.
Auf Mobilgeräten testen.

Header sollten klar, übersichtlich, konsistent und mobilfreundlich sein. Vermeide übermäßige Unübersichtlichkeit – eine einfache Navigation verbessert in der Regel die Benutzerfreundlichkeit deutlich.

Den Footer bearbeiten

Der Footer befindet sich am unteren Rand jeder Seite und wird oft unterschätzt. Dabei scrollen viele Besucher gezielt zum Footer, wenn sie Kontaktdaten, rechtliche Hinweise oder zusätzliche Navigationsoptionen suchen. Ein nützlicher Footer verbessert Barrierefreiheit und Vertrauen.

Typische Footer-Inhalte: Copyright-Hinweis, sekundäre Navigationslinks, Kontaktinformationen, Social-Media-Links, Link zur Datenschutzerklärung und Nutzungsbedingungen.

Schritt für Schritt: Den Footer bearbeiten

Den Site Editor öffnen.
„Vorlagenteile“ wählen.
Den Footer auswählen.
Vorhandenen Inhalt prüfen.
Benötigte Blöcke einfügen.
Informationen logisch anordnen.
Styling anpassen.
Änderungen speichern.
Darstellung auf mehreren Seiten überprüfen.

Gute Footer bleiben übersichtlich, unterstützen die Navigation, wahren ein einheitliches Branding und vermeiden unnötige Komplexität.

Schritt für Schritt: Einen Vorlagenteil bearbeiten

Den Site Editor öffnen.
„Vorlagenteile“ in der Seitenleiste wählen.
Den gewünschten Vorlagenteil auswählen.
Inhalt und Design bearbeiten.
Änderungen speichern.
Betroffene Seiten überprüfen – die Änderungen sollten überall erscheinen, wo der Vorlagenteil genutzt wird.

Globale Stile: das zentrale Design-Steuerungssystem

Globale Stile sind eine der leistungsstärksten Funktionen des Site Editors. Sie ermöglichen dir, die Designeinstellungen deiner gesamten Website von einem einzigen zentralen Ort aus zu verwalten. Änderungen wirken sich sofort auf alle Seiten aus – statt einzelne Seiten manuell anpassen zu müssen.

Globale Stile verwalten Typografie, Farben, Layoutabmessungen, Blockdarstellung und Abstände. Das Ergebnis ist ein einheitliches Design, schnellere Anpassungen, vereinfachte Wartung und bessere Kontrolle über deine Markenidentität.

Du öffnest die globalen Stile über den Site Editor, indem du in der linken Seitenleiste „Stile“ auswählst. Dort siehst du alle verfügbaren Einstellungen – passe die gewünschten Elemente an und speichere die Änderungen.

Typografie verwalten

Typografie beeinflusst Lesbarkeit und visuelle Wirkung maßgeblich. Selbst ausgezeichnete Inhalte können schwer lesbar werden, wenn die Typografie schlecht konfiguriert ist.

Typografieeinstellungen umfassen Schriftfamilien, Schriftgrößen, Schriftstärken, Zeilenabstand und Zeichenabstand. Effektive Website-Schriften sollten gut lesbar, einheitlich und für deine Zielgruppe geeignet sein. Vermeide zu viele verschiedene Schriftarten – die meisten Websites kommen mit zwei primären Schriftfamilien sehr gut aus, eine für Überschriften und eine für Fließtext.

Eine klare Überschriftenhierarchie hilft Besuchern, die Struktur deiner Inhalte zu verstehen: Hauptüberschriften für Seiten und Beiträge, Abschnittsüberschriften für Unterbereiche, Unterabschnittsüberschriften für Details. Einheitliche Typografie verstärkt diese Hierarchie.

Schritt für Schritt: Typografie konfigurieren

Globale Stile öffnen (Design → Editor → Stile).
Typografieeinstellungen auswählen.
Schriftfamilien für Überschriften und Fließtext festlegen.
Überschriftengrößen konfigurieren.
Absatztextgröße und Zeilenabstand einstellen.
Lesbarkeit an einem Desktop und auf einem Mobilgerät prüfen.
Änderungen speichern.

Hinweis: Seit WordPress 6.5 steht dir die integrierte Schriftartenbibliothek (Font Library) zur Verfügung. Über sie kannst du Schriften direkt aus dem Site Editor hochladen und lokal ausliefern – ohne externe Dienste wie Google Fonts einbinden zu müssen. Das verbessert die Ladegeschwindigkeit und ist besonders für den europäischen Markt relevant, da externe Font-Dienste unter der DSGVO problematisch sein können.

Farben verwalten

Farbe spielt eine wichtige Rolle in Kommunikation, Branding und Benutzerfreundlichkeit. Eine durchdachte Farbwahl verbessert die Nutzererfahrung deutlich, eine schlecht gewählte Farbpalette kann dagegen selbst gute Inhalte schwächen.

Eine einfache, konsistente Farbpalette enthält typischerweise eine Primärfarbe, eine Sekundärfarbe, eine Akzentfarbe und neutrale Farben für Hintergrund und Text. Weniger ist hier oft mehr: Zu viele Farben lassen Websites schnell unprofessionell wirken.

Ein wichtiger Aspekt, den viele Einsteiger übersehen: Barrierefreiheit. Stelle sicher, dass zwischen Text und Hintergrund sowie zwischen Schaltflächen und umgebenden Elementen ausreichend Kontrast besteht. Guter Kontrast verbessert die Lesbarkeit für alle Besucher, nicht nur für Menschen mit Sehbeeinträchtigungen.

Schritt für Schritt: Globale Farben konfigurieren

Globale Stile öffnen.
„Farben“ aufrufen.
Markenfarben definieren und der Palette hinzufügen.
Textfarben zuweisen.
Hintergrundfarben festlegen.
Schaltflächenfarben konfigurieren.
Kontrastwerte prüfen – Tools wie der WebAIM Contrast Checker helfen dabei.
Änderungen speichern.

Layout-Einstellungen verwalten

Layout-Einstellungen beeinflussen, wie Inhalte auf dem Bildschirm positioniert und dargestellt werden. Gut gestaltete Layouts verbessern Lesbarkeit und Navigation. Typische Einstellungen sind Inhaltsbreite, Ausrichtung, Abstände und Containergrößen.

Moderne WordPress-Layouts unterstützen oft drei Breiten: Standard, Weit und Vollbreite. Diese Optionen erlauben Flexibilität je nach Inhaltstyp. Bei Textinhalten ist die Breite besonders wichtig: Zu breite Textbereiche sind anstrengend zu lesen. Eine ausgewogene Inhaltsbreite verbessert das Leseerlebnis spürbar.

Das Stilbuch: alle Blöcke auf einen Blick

Das Stilbuch ist eine besonders praktische Funktion, die seit WordPress 6.2 verfügbar ist und in späteren Versionen weiter ausgebaut wurde. In WordPress 6.8 wurde es zusätzlich auch für klassische Themes geöffnet, die Editor-Styles oder eine theme.json-Datei verwenden.

Das Stilbuch zeigt dir in einer einzigen Übersicht, wie alle verfügbaren Blöcke mit den aktuellen globalen Stilen aussehen – ohne dass du die Blöcke erst auf einer Seite einfügen müsstest. So siehst du sofort, wie sich Änderungen an Typografie, Farben oder Abständen auf Absatztext, Überschriften, Schaltflächen, Bilder, Tabellen und alle anderen Blöcke auswirken.

Das Stilbuch erreichst du über: Design → Editor → Stile → Auge-Symbol (oben rechts im Stile-Panel). Du kannst es auch direkt beim Bearbeiten einer Seite, einer Vorlage oder eines Vorlagenteils öffnen. Dort siehst du alle Block-Gruppen und Stilbeispiele übersichtlich beschriftet – ein sehr nützliches Werkzeug, um Design-Änderungen schnell zu überprüfen, bevor du sie speicherst.

Einheitliches Branding herstellen

Branding schafft eine wiedererkennbare Identität für deine Website. Konsistenz hilft Besuchern, sich im Laufe der Zeit an dich zu erinnern und dir zu vertrauen. Inkonsistentes Design kann dagegen selbst gute Inhalte unprofessionell wirken lassen.

Website-Branding umfasst typischerweise Logo, Farbpalette, Typografie, visuellen Stil und Kommunikationston. Die gute Nachricht: Globale Stile machen Branding-Konsistenz in modernem WordPress deutlich einfacher als früher, weil du Schriften, Farben und Layout-Optionen zentral verwaltest und Änderungen mit einem Klick sofort auf der gesamten Website anwenden kannst.

Schritt für Schritt: Markenkonsistenz herstellen

Markenfarben definieren und der globalen Farbpalette hinzufügen.
Passende Schriftarten auswählen und konfigurieren.
Logo hochladen und im Header-Vorlagenteil platzieren.
Globale Stile speichern.
Schaltflächenstile standardisieren.
Überschriftenstile vereinheitlichen.
Mehrere Seiten auf visuelle Konsistenz prüfen.
Inkonsistenzen mit dem Stilbuch oder direkt im Editor beheben.

Muster (Patterns): Designelemente speichern und wiederverwenden

Muster sind vorgefertigte Sammlungen von Blöcken, die du schnell in Seiten einfügen kannst. Sie ermöglichen dir, Seiten schneller zu erstellen und gleichzeitig Designstandards einzuhalten. Typische Muster sind Hero-Bereiche, Call-to-Action-Abschnitte, Testimonial-Gruppen, Preistabellen, Kontaktbereiche, Werbebanner und Inhaltslayouts.

Synchronisierte und nicht-synchronisierte Muster

Seit WordPress 6.3 gibt es einen wichtigen Unterschied, den du kennen solltest:

Synchronisierte Muster – eine Änderung wirkt sich sofort auf alle Stellen aus, an denen das Muster verwendet wird. Ideal für Elemente, die website-weit konsistent bleiben sollen, etwa ein standardisierter Newsletter-Banner oder ein einheitlicher Kontaktbereich.
Nicht-synchronisierte Muster – das Muster wird als unabhängige Kopie eingefügt. Änderungen an einer Instanz wirken sich nicht auf andere aus. Ideal als Ausgangspunkt, den du auf verschiedenen Seiten unterschiedlich anpassen möchtest.

Die Wahl zwischen beiden hängt davon ab, ob du Konsistenz oder Flexibilität priorisierst.

Schritt für Schritt: Ein Muster erstellen und speichern

Ein Block-Layout im Editor erstellen.
Alle zugehörigen Blöcke auswählen.
Die Blockoptionen öffnen (drei Punkte in der Werkzeugleiste).
„Als Muster erstellen“ wählen.
Einen beschreibenden Namen vergeben.
Festlegen, ob das Muster synchronisiert werden soll oder nicht.
Speichern.
Bei Bedarf über Design → Editor → Muster oder den Block-Inserter darauf zugreifen.

Muster organisieren

Im Laufe der Zeit sammeln sich Muster an. Vergib deshalb von Anfang an klare, beschreibende Namen und halte die Bibliothek übersichtlich. Muster, die du nicht mehr benötigst, kannst du direkt über den Site Editor verwalten und entfernen. Eine gut organisierte Musterbibliothek beschleunigt spätere Designarbeiten erheblich.

Das Zusammenspiel der Bausteine

Die einzelnen Funktionen des Site Editors – Vorlagen, Vorlagenteile, globale Stile und Muster – wirken am wirksamsten im Zusammenspiel. Stell dir das so vor: Globale Stile definieren das visuelle Fundament deiner Website (Farben, Schriften, Abstände). Vorlagenteile wie Header und Footer sorgen für Wiedererkennung auf jeder Seite. Vorlagen geben den verschiedenen Inhaltstypen ihre passende Struktur. Und Muster ermöglichen dir, bewährte Designlösungen schnell und konsistent wiederzuverwenden.

Das Ergebnis ist eine Website, die visuell konsistent und gleichzeitig flexibel genug ist, um verschiedene Inhaltstypen unterschiedlich zu präsentieren – alles ohne eine einzige Zeile Code, vollständig visuell und direkt aus dem Dashboard heraus.

Die beste Art, diese Werkzeuge zu lernen, ist das Erkunden: Öffne den Site Editor, klick dich durch die verschiedenen Bereiche, mach eine Änderung und schaue dir das Ergebnis an. Alle Änderungen sind reversibel, solange du sie nicht speicherst – du kannst also bedenkenlos experimentieren, bis du ein sicheres Gefühl für die Arbeitsweise des Editors entwickelt hast.

(*) Hinweis: Hinter einigen Links stehen Affiliate-Programme. Für Sie bleibt der Preis exakt derselbe, wir erhalten jedoch eine kleine Provision, die wir direkt in unsere kommenden Recherchen investieren. Vielen Dank, dass Sie unsere Arbeit auf diese Weise unterstützen!