Der Site Editor ermöglicht bei einem Block-Theme die Gestaltung großer Teile der Website mit Blöcken. Damit können Header, Footer und Vorlagen näher an der redaktionellen Oberfläche bearbeitet werden. Gleichzeitig steigen die Auswirkungen einzelner Änderungen. Wer in einem Template einen Inhaltsblock verschiebt, kann zahlreiche Seiten gleichzeitig verändern. Eine gute Arbeitsweise beginnt deshalb mit der Frage, auf welcher Ebene gerade gearbeitet wird. Dieser Ratgeber erklärt die Unterschiede und zeigt einen vorsichtigen Weg zu einem eigenen verständlichen Websiteaufbau.
Sie benötigen ein aktiviertes Block-Theme und eine getrennte Testumgebung oder einen gesicherten Ausgangsstand. Bei einem klassischen Theme kann die verfügbare Verwaltung anders aussehen; die bloße Nutzung des Blockeditors für Beiträge macht ein Theme noch nicht zum Block-Theme. Das Ziel ist ein überschaubarer Satz von Vorlagen und Stilen, den die Redaktion sicher benutzen kann. Wir beschreiben keine bereits gemessene Leistungsverbesserung und empfehlen keinen Themewechsel allein wegen des Namens einer Technik.
Die drei Bearbeitungsebenen unterscheiden
Die erste Ebene ist der Inhalt einer bestimmten Seite oder eines Beitrags. Hier stehen individuelle Absätze, Bilder und Tabellen. Die zweite Ebene ist das Template für eine Inhaltsart. Es bestimmt beispielsweise, wo Titel, Haupttext und Metadaten erscheinen. Die dritte Ebene besteht aus gemeinsamen Teilen und globalen Stilen. Ein Header kann auf vielen Seiten verwendet werden, ein globaler Textstil beeinflusst zahlreiche Blöcke. Halten Sie vor jeder Änderung kurz fest, welche Ebene betroffen sein soll.
Die offizielle Site-Editor-Dokumentation beschreibt die verfügbaren Bereiche und setzt ein Block-Theme voraus. Für die praktische Arbeit hilft eine eigene kleine Karte: Welche Vorlage steuert die Startseite, welche einen einzelnen Beitrag und welche die Suche? Welche gemeinsamen Teile werden verwendet? Lassen Sie sich nicht von der sichtbaren Beispielseite täuschen. Sie kann gerade als Vorschau eines Templates dienen. Entscheidend ist, ob Sie einen einzelnen Inhalt oder dessen übergeordneten Rahmen bearbeiten.
| Bereich | Typische Änderung | Erwartete Wirkung |
|---|---|---|
| Seiteninhalt | Individueller Absatz | Diese Seite |
| Template | Anordnung von Titel und Inhalt | Alle damit dargestellten Inhalte |
| Template-Teil | Gemeinsamer Footer | Alle einbindenden Vorlagen |
| Globale Stile | Grundschrift oder Farbpalette | Viele passende Elemente |
Mit einem realen Beispielsatz beginnen
Erstellen Sie Testinhalte, die die spätere Website tatsächlich repräsentieren. Dazu gehören ein langer Titel, mehrere Absätze, ein Bild, eine Liste und eine Tabelle. Prüfen Sie außerdem eine Seite mit wenig Inhalt. Ein Template sollte weder bei einem langen Artikel noch bei einer kurzen Kontaktseite auseinanderfallen. Wenn Sie ausschließlich die Theme-Demo betrachten, fehlen häufig lange deutsche Beschriftungen und echte redaktionelle Sonderfälle. Die vorhandenen Demoabstände sind kein Beweis für die Eignung des späteren Bestands.
Öffnen Sie den Beispielsatz auf schmalen und breiten Ansichten. Notieren Sie zuerst Probleme mit Lesbarkeit, Orientierung und Bedienung. Beginnen Sie nicht sofort mit Farben. Eine zu große Navigationsgruppe, fehlende Inhaltsbreite oder unklare Überschriftenstruktur sind grundlegender. Die Gestaltung sollte die Aufgaben der Website unterstützen. Ein Wissensportal braucht beispielsweise verlässliche Themenwege und eine ruhige Lesefläche, während ein kleiner Unternehmensauftritt Leistungen und Kontakt deutlicher priorisieren kann.
Globale Stile früh festlegen
Definieren Sie eine kleine Farbpalette und wenige Schriftgrößen. Nutzen Sie Farben für erkennbare Rollen wie Grundtext, Fläche, Link und Hinweis. Prüfen Sie ihre Kontraste auch in Fokus- und Hoverzuständen. Eine helle Akzentfarbe kann als Fläche passend sein, als kleiner Text dagegen schlecht lesbar. Schreiben Sie die Rollen in der Designdokumentation auf. So bleibt später verständlich, warum ein bestimmter Farbwert verwendet wird und wo er verändert werden darf.
Die Dokumentation zu theme.json beschreibt eine zentrale Konfigurationsmöglichkeit für Block-Themes. Einstellungen und Styles können dort durch das Theme bereitgestellt werden. Anpassungen im Editor können zusätzlich wirksam sein. Für einen entwickelten Auftritt ist daher wichtig, welchen Stand Sie als Quelle pflegen und wie Editoränderungen dokumentiert werden. Eine ZIP-Datei der ursprünglichen Themeversion enthält nicht automatisch jede spätere lokale Anpassung. Prüfen Sie den tatsächlichen Export- und Übergabeweg Ihrer Installation.
Header als Orientierung bauen
Ein Header sollte zuerst zeigen, welcher Auftritt geöffnet ist und wohin wichtige Wege führen. Verwenden Sie eine klare Identität und eine überschaubare Navigation. Prüfen Sie echte lange Menütexte und die mobile Menüöffnung. Der aktive Zustand sollte verständlich bleiben. Ein schwebender Header, der viel Bildschirmhöhe einnimmt, kann auf kleinen Geräten den Inhalt verdecken. Entscheiden Sie bewusst, ob er dauerhaft sichtbar sein muss. Bewegung und aufwendige Effekte sind keine Voraussetzung für ein modernes Layout.
Testen Sie den Header mit Tastatur. Können alle Links erreicht werden? Ist die Reihenfolge sinnvoll? Wird ein geöffnetes Menü zuverlässig geschlossen? Achten Sie darauf, dass ein Fokus nicht hinter einer fixierten Fläche verschwindet. Prüfen Sie außerdem das Verhalten bei stärkerer Textvergrößerung. Der Header muss nicht auf jeder Breite dieselbe horizontale Anordnung behalten. Er muss seinen Zweck erfüllen. Vereinfachen Sie gegebenenfalls die Zahl sichtbarer Elemente, statt alles mit kleinerer Schrift in eine einzige Zeile zu pressen.
Footer mit einer klaren Aufgabe gestalten
Der Footer kann Kontakt, rechtliche Informationen und ergänzende Themenwege enthalten. Er sollte keine zweite unübersichtliche Hauptnavigation werden. Ordnen Sie Informationen nach ihrem Zweck und verwenden Sie verständliche Beschriftungen. Platzieren Sie Betreiberangaben nur auf Grundlage tatsächlich geprüfter Daten. Ein generiertes Beispielunternehmen oder ein aus einer anderen Website kopierter Kontakttext gehört nicht in einen fertigen Auftritt. Sichtbare Anbieter- und Betreiberrollen sollten ebenfalls eindeutig bleiben.
Prüfen Sie gemeinsame Footeränderungen an mehreren Seitentypen. Ein Footer wirkt unter einer kurzen Seite anders als unter einem langen Artikel. Kontrollieren Sie Abstand, Hintergrund und den Übergang aus dem Inhalt. Wenn Newsletter oder andere Formulare eingebaut werden, benötigen sie einen funktionierenden kontrollierten Ablauf und korrekte sichtbare Hinweise. Eine reine Designfläche darf keine bereits verfügbare Funktion vortäuschen. Für einen geschützten Entwurf können Funktionen vorbereitet werden, während ihr tatsächlicher Betriebsstatus ausdrücklich dokumentiert bleibt.
Templates in kleinen Schritten ändern
Beginnen Sie mit einer Vorlage für einzelne Inhalte. Prüfen Sie die Position von Titel, Hauptinhalt und ergänzenden Informationen. Entfernen Sie den Hauptinhaltsblock nicht aus Versehen, wenn Sie einen Beispielsatz bearbeiten. Die Dokumentation zu Seiten im Site Editor erklärt auch die Trennung zwischen Inhalt und zunächst geschützter Vorlage. Nutzen Sie diese Trennung als Hilfe. Wenn Sie den Rahmen verändern wollen, tun Sie das bewusst und prüfen Sie anschließend mehrere betroffene Seiten.
Erstellen Sie Sondertemplates nur für echte Unterschiede. Eine Kontaktseite kann eine andere Anordnung brauchen als ein langer Ratgeber. Eine neue Vorlage für jede einzelne Seite macht den Aufbau dagegen schnell schwer wartbar. Benennen Sie Vorlagen nach ihrem Zweck. Dokumentieren Sie, welche Inhalte ihnen zugewiesen sind. Eine zweite Person sollte diese Zuordnung erkennen können, ohne im Frontend jede Seite zu vergleichen. Wenn zwei Vorlagen nahezu identisch sind, prüfen Sie, ob ein gemeinsamer Aufbau mit einer begrenzten Variation ausreicht.
Archive und Suche als eigene Nutzerwege prüfen
Ein Beitragsarchiv braucht mehr als attraktive Vorschaubilder. Die Reihenfolge, Titel und Kurzbeschreibungen müssen nachvollziehbare Wege anbieten. Prüfen Sie die Seitennavigation bei einem größeren Bestand. Wenn ein Query-Loop oder vergleichbarer Block Inhalte abfragt, kontrollieren Sie die tatsächliche Auswahl und Sortierung. Ein optisch passendes Layout kann versehentlich die falsche Kategorie oder nur wenige zufällige Inhalte zeigen. Benennen Sie die gewünschte Abfrage vor der Gestaltung und vergleichen Sie sie mit der Ausgabe.
Die Suchseite sollte sowohl Treffer als auch leere Ergebnisse verständlich darstellen. Testen Sie typische Begriffe und einen bewusst nicht vorhandenen Ausdruck. Eine leere Fläche ist keine hilfreiche Antwort. Bieten Sie einen Weg zum erneuten Suchen und zu passenden Themenübersichten. Prüfen Sie außerdem die 404-Vorlage. Sie braucht eine klare Fehlerinformation und nützliche nächste Schritte. Technische Statuscodes werden nicht allein durch die sichtbare Gestaltung garantiert und gehören in eine eigene Abnahme der tatsächlichen Ausgabe.
Änderungen exportieren und nachvollziehbar halten
Wenn mehrere Personen arbeiten, vereinbaren Sie, wer globale Anpassungen vornimmt. Halten Sie größere Änderungen an Templates und Styles in einer kurzen Notiz fest. Ein nachvollziehbarer Stand erleichtert später die Fehlersuche. Prüfen Sie vor einem Themeupdate, welche lokalen Anpassungen in Dateien und welche in der Datenbank liegen. Der genaue Vorrang hängt vom Aufbau ab. Eine scheinbar unveränderte Themeinstallation kann deshalb im Frontend anders aussehen als ein frischer Stand derselben Themeversion.
Exportieren Sie den überprüften Aufbau über einen geeigneten vorgesehenen Weg und kontrollieren Sie seinen Inhalt. Speichern Sie keine Zugangsdaten oder Datenbankdumps in einem öffentlichen Themequellpaket. Ein Export sollte erklären, welche Dateien benötigt werden und welche redaktionellen Inhalte separat liegen. Testen Sie bei einer größeren Übergabe die Wiederverwendung in einer getrennten Umgebung. So lässt sich erkennen, ob nur die sichtbare Installation funktioniert oder ob auch der archivierte Stand tatsächlich ausreichend dokumentiert ist.
Die Abnahme nach Nutzeraufgaben organisieren
Prüfen Sie Startseite, Einzelinhalt, Archiv, Suche und Fehlerseite. Nutzen Sie reale lange Texte und mehrere Bilder. Testen Sie mobile Navigation, Tastaturfokus und Tabellenüberlauf. Bei Animationen kontrollieren Sie zusätzlich die reduzierte Bewegungseinstellung. Ein Zustandswechsel muss sofort verständlich sein, auch wenn die Bewegung entfällt. Halten Sie beobachtete Fehler mit konkreten Adressen fest und korrigieren Sie materielle Probleme, bevor ein Designreview abgeschlossen wird.
Der Zielzustand ist ein kleiner verständlicher Satz von Templates, gemeinsamen Teilen und globalen Styles. Individuelle Texte lassen sich bearbeiten, ohne versehentlich den gesamten Auftritt umzubauen. Gemeinsame Änderungen sind bewusst sichtbar und geprüft. Für Anpassungen an einem bestehenden klassischen Theme lesen Sie den Ratgeber zum Child-Theme. Beide Wege können sinnvoll sein. Die passende Wahl richtet sich nach Bestand, Pflege und konkreten Anforderungen Ihrer Website.
Einen Rückweg für globale Änderungen vorsehen
Bevor Sie gemeinsame Vorlagen verändern, sichern Sie ihren überprüften Stand und notieren Sie die betroffenen Seitentypen. Wenn eine Anpassung unerwartete Folgen hat, sollte die Rückkehr nicht von einer Erinnerung an zahlreiche einzelne Klicks abhängen. Prüfen Sie die vorhandenen Revisions- oder Exportmöglichkeiten am tatsächlichen System. Halten Sie zusätzlich fest, ob zwischenzeitlich individuelle Inhalte geändert wurden. Ein Rückweg für die Gestaltung sollte diese neuen Texte nicht unnötig überschreiben. Diese bewusste Trennung macht die spätere Fehlerbehebung wesentlich klarer.