Website-Editor

Der Website-Editor ermöglicht es Ihnen, die gesamte Website einschließlich Header, Footer und allem dazwischen mit Blöcken zu gestalten. Dadurch erhalten Sie mehr Kontrolle über das Erscheinungsbild Ihrer Website. 

Der Website-Editor ist nur verfügbar, wenn Sie ein Block-Theme auf Ihrer Website installieren und aktivieren.

So greifen Sie auf den Website-Editor zu

Um mit dem Website-Editor zu arbeiten, müssen Sie ein Block-Theme auf Ihrer Website verwenden. Ein Block-Theme ist ein Theme, das Blöcke für alle Teile einer Website verwendet, einschließlich Navigationsmenüs, Header, Inhalt und Website-Footer. 

Alle Blöcke, die im WordPress-Block-Editor verfügbar sind, können im Website-Editor verwendet werden. Eine Gruppe von Blöcken namens Theme-Blöcke wurde speziell für den Website-Editor entwickelt.

Um Block-Themes zu finden, gehen Sie im WordPress-Dashboard zu Design > Themes und klicken Sie auf Hinzufügen. Wählen Sie auf der Seite Themes hinzufügen die Option Block-Themes aus, um die wachsende Liste der Block-Themes im WordPress-Theme-Verzeichnis zu finden.

Nachdem Sie ein Block-Theme auf Ihrer Website installiert und aktiviert haben, gehen Sie zu Design > Editor , um den Website-Editor zu öffnen.

Möglichkeiten im Website-Editor

Wenn Sie den Website-Editor öffnen, sehen Sie fünf Menüpunkte.

• Navigation: Ermöglicht es Ihnen, Ihre Menüs zu durchsuchen und grundlegende Änderungen vorzunehmen.
• Stile: Bietet direkten Zugriff zum Bearbeiten der Stilvarianten Ihrer Website.
• Seiten: Sie können den Inhalt Ihrer Seiten nun direkt im Website-Editor bearbeiten.
• Templates: Überprüfen Sie die verschiedenen Standardlayouts für die unterschiedlichen Bereiche Ihrer Website sowie benutzerdefinierte Seiten (Suchergebnisse, 404 usw.).
• Muster: Hier können Ihre synchronisierten Muster und Template-Teile verwaltet werden.

Außerdem sehen Sie ein Lupensymbol. Klicken Sie darauf, um die Befehlspalette aufzurufen.

Nachfolgend finden Sie eine Übersicht über die verschiedenen Bereiche des Website-Editors.

Arbeitsbereich des Website-Editors

Der Website-Editor lädt zunächst die Startseite Ihrer Website (basierend auf den Einstellungen unter Lesen), damit Sie mit der Bearbeitung beginnen können.

Das obere Menü im Website-Editor enthält folgende Optionen:

1. Das Website-Symbol (oder das W-Symbol, wenn kein Website-Symbol festgelegt ist): Zum Dashboard zurückkehren oder zu einem anderen Bereich des Website-Editors wechseln: Navigation, Stile, Seiten, Templates oder Muster. Wenn Sie zum Dashboard zurückkehren, werden Sie aufgefordert, die Änderungen zu speichern oder den Website-Editor zu verlassen, ohne die Änderungen zu speichern.

2. Die + Schaltfläche zum Einfügen von Blöcken: Fügen Sie dem Website-Editor einen neuen Block, ein Blockmuster, Medien oder ein synchronisiertes Muster (falls die Website synchronisierte Muster enthält) hinzu.

3. Werkzeuge: Wechseln Sie zwischen dem Bearbeiten eines Blocks und dem Auswählen eines Blocks. Wählen Sie das Werkzeug Auswählen (oder drücken Sie die Taste Escape auf Ihrer Tastatur), um einzelne Blöcke auszuwählen. Sobald ein Block ausgewählt ist, drücken Sie die Taste Enter auf Ihrer Tastatur, um zur Bearbeitung zurückzukehren.

4. Rückgängig: Macht die zuletzt ausgeführte Aktion rückgängig.
5. Wiederholen: Führt eine Aktion erneut aus, die Sie mit der Schaltfläche Rückgängig rückgängig gemacht haben.
6. Listenansicht: Zeigt eine Liste aller Blöcke auf der Seite an und ermöglicht eine einfache Navigation zwischen den Blöcken. Dies ist hilfreich, um die Struktur der Seite zu sehen sowie Blöcke zu bearbeiten, zu verschieben und zu entfernen.
7. Befehlspalette: Klicken Sie hier, um schnell auf alle Inhalte, Templates und Muster Ihrer Website zuzugreifen und weitere Aktionen (Einstellungen, neue Seite usw.) aufzurufen.

8. Speichern: Speichert die im Website-Editor vorgenommenen Änderungen.
   • Wenn Sie auf die Schaltfläche Speichern klicken, erhalten Sie eine Liste aller synchronisierten Muster, Navigationsmenüs, Templates und Template-Teile, an denen Sie Änderungen vorgenommen haben.
   • Sie können alle oder nur einige davon speichern.
   • Beachten Sie, dass einige Änderungen (z. B. Änderungen an den Header- und Footer-Templates) für alle Seiten Ihrer Website gelten, die diese Templates verwenden, und nicht nur für die Seite, an der Sie gearbeitet haben.

9. Einstellungen: Blendet die Seitenleiste mit den Template- und Blockeinstellungen ein oder aus.

10. Stile: Durchsuchen Sie die für Ihr Theme verfügbaren Stilvarianten, legen Sie Typografie, Farbpaletten und Layout für die gesamte Website fest oder passen Sie das Erscheinungsbild bestimmter Blöcke für die gesamte Website an.
11. Weitere Optionen: Klicken Sie auf das Symbol mit den drei vertikalen Punkten, um zusätzliche Einstellungen und Werkzeuge zu öffnen.

Obere Werkzeugleiste anzeigen: Blendet die obere Werkzeugleiste im Editor ein oder aus. Wenn Sie diese Option aktivieren, werden die Block-Werkzeugleisten oben im WordPress-Block-Editor (direkt unter der oberen Werkzeugleiste) angeheftet, statt direkt über dem Block zu erscheinen.

Fokusmodus: Alle Blöcke werden ausgegraut, außer dem Block, an dem Sie gerade arbeiten, sodass Sie sich jeweils auf einen einzelnen Block konzentrieren können.

Ablenkungsfreies Arbeiten: Wenn diese Option aktiviert ist, werden alle nicht wesentlichen Bereiche der Benutzeroberfläche ausgeblendet, um ein intensiveres Bearbeitungserlebnis zu ermöglichen.

Editor: Standardmäßig befinden Sie sich im Visuellen Editor. Wechseln Sie zum Code-Editor, um die gesamte Seite im HTML-Code-Editor anzuzeigen.

Plugins: Hier können Sie in der Seitenleiste des Website-Editors zwischen Einstellungen und Stile wechseln.

Werkzeuge: Hier können Sie Ihr Theme mit den aktualisierten Templates und Stilen (Exportieren) herunterladen, Tastaturkürzel aufrufen, den Willkommensleitfaden des Website-Editors besuchen, alle Blöcke kopieren oder zusätzliche Support-Artikel anzeigen.

Voreinstellungen: Verwenden Sie das Menü Voreinstellungen, um das Bearbeitungserlebnis anzupassen und zu ändern, wie Sie mit Blöcken interagieren.

So verwenden Sie den Website-Editor

So bearbeiten Sie die Stile der Website

Mit dem Website-Editor können Sie die Stile der gesamten Website und der Blöcke anpassen. Die Stileinstellungen sind unabhängig davon verfügbar, welches Template oder welcher Template-Teil gerade bearbeitet wird. 

• Gehen Sie zu Design > Editor.
• Klicken Sie auf den Menüpunkt „Stile“ oder auf das Symbol neben der Seitenleiste mit den Blockeinstellungen.

Im Bereich Stile können Sie die für Ihr Theme verfügbaren Stilvarianten durchsuchen, die Farbpaletten und Typografie ändern, das Layout für die gesamte Website festlegen und außerdem das Erscheinungsbild von Blöcken ändern, was ebenfalls für die gesamte Website gilt.

Um Ihre Stilrevisionen zu überprüfen oder die vorgenommenen Änderungen vollständig zurückzusetzen, klicken Sie auf das Menüsymbol mit den drei Punkten in der rechten Ecke und wählen Sie die entsprechende Option aus.

Weitere Informationen zu Stilen finden Sie in diesem Support-Artikel: Übersicht über Stile.

So passen Sie das Layout der Website an

Mit dem Website-Editor können Sie mithilfe von Blöcken die Struktur und das Layout Ihrer gesamten Website erstellen. Dazu gehören beispielsweise Bereiche wie Header und Footer sowie das strukturelle Erscheinungsbild Ihrer Beiträge und Seiten.

Alle Blöcke, die im WordPress-Block-Editor verfügbar sind, können im Website-Editor verwendet werden. Eine Gruppe von Blöcken namens Theme-Blöcke wurde speziell für den Website-Editor entwickelt.

Beispiele: Mit dem Abfrage-Loop-Block können Sie das Erscheinungsbild Ihres Beitragslayouts anpassen, mit dem Navigationsblock können Sie das Navigationsmenü der Website anpassen, und der Website-Titel-Block hilft Ihnen, den Website-Titel und vieles mehr anzupassen.

Sehen Sie sich die vollständige Liste der Theme-Blöcke an.

Beispiel – Twenty Twenty-Three mit dem Website-Editor anpassen

Twenty Twenty-Three unterstützt den Website-Editor und kann damit angepasst werden. Entfernen wir beispielsweise den Abstand am oberen Rand der Startseite in Twenty Twenty-Three. Entfernen Sie dazu den unteren Innenabstand des Header-Template-Teils und den oberen Innenabstand des Inhaltsbereichs.

Entfernen Sie zunächst den unteren Innenabstand der Header-Template-Teile.

1. Wählen Sie im Administrationsbereich Design > Editor aus.
2. Wählen Sie Muster > Template-Teile > Header > Header und klicken Sie auf das Stiftsymbol, um ihn zu bearbeiten.
3. Wählen Sie den Block Gruppe > Zeile aus. Verwenden Sie die untere Blocknavigation.
4. Klicken Sie in den Blockeinstellungen auf „Stile“.

5. Scrollen Sie nach unten zu Innenabstand > Unten. Der aktuelle Wert ist 2.
6. Setzen Sie ihn auf 0.
7. Speichern Sie die Template-Teile.

Entfernen Sie als Nächstes den oberen Innenabstand des Inhaltsbereichs.

8. Kehren Sie zum Website-Editor zurück.
9. Wählen Sie Templates > Startseite aus und klicken Sie auf das Stiftsymbol, um sie zu bearbeiten.
10. Wählen Sie den obersten Gruppenblock aus. Verwenden Sie die untere Blocknavigation.
11. Klicken Sie in den Blockeinstellungen auf „Stile“.

12. Scrollen Sie nach unten zu Innenabstand > Oben. Der aktuelle Wert ist 3.
13. Setzen Sie ihn auf 0.
14. Speichern Sie das Template.

So durchsuchen Sie Templates und Template-Teile

Im Website-Editor können Sie die für Ihre Website verfügbaren Templates und Template-Teile ganz einfach durchsuchen.

• Gehen Sie zu Design > Editor, um den Website-Editor zu öffnen. Dadurch gelangen Sie zu einer Ansicht, in der Sie Ihre Templates oder Template-Teile durchsuchen können.
• Klicken Sie auf Templates, um eine Vorschau der für Ihre Website verfügbaren Templates anzuzeigen.
• Klicken Sie auf Muster, um eine Vorschau der Liste der Template-Teile anzuzeigen.

So verwalten Sie die Templates der Website

WordPress verwendet Templates, um das Layout und die Struktur bestimmter Seitentypen auf Ihrer Website zu erstellen. Der Website-Editor zeigt die Template-Auswahl an, die Sie zu Ihrer Website hinzufügen können, und ermöglicht Ihnen, mithilfe des Template-Editors benutzerdefinierte Templates zu erstellen.

Unter Design > Editor wird Ihnen eine Ansicht mit einer Seitenleiste angezeigt, die Ihre Liste der Templates und Muster einschließlich der Liste der Template-Teile enthält.

Weitere Informationen zu Templates finden Sie in diesem Support-Artikel: Template-Editor.

So verwalten Sie die Template-Teile

Ein Template-Teil ist ein Block zur Verwaltung der sich wiederholenden globalen Bereiche der Website, wie Header, Footer, Seitenleiste usw. Sie dienen hauptsächlich zur Definition der Website-Struktur und können wiederverwendet werden. Sie können auch benutzerdefinierte Template-Teile erstellen, die in den Templates wiederverwendet werden können.

Klicken Sie unter Design > Editor auf die Option Muster. Unter „Alle Template-Teile“ können Sie auf diese zugreifen.

Weitere Informationen zu Template-Teilen finden Sie in diesem Support-Artikel: Template-Teil.

So verwalten Sie Seiten

Seit Version 6.3 ist es möglich, Seiten über den Website-Editor im Bereich “Seiten” zu verwalten, zu bearbeiten und zu erstellen.

Weitere Informationen zur Verwaltung von Seiten über den Website-Editor finden Sie in diesem Support-Artikel: Website-Editor-Seiten

So kehren Sie zum Dashboard zurück

Um zu Ihrem Dashboard zurückzukehren, klicken Sie auf das WordPress-Symbol (oder auf das Website-Symbol, falls Sie eines festgelegt haben), um die linke Navigation des Website-Editors zu öffnen. Wählen Sie < , um zu Ihrem WordPress-Dashboard zurückzukehren. Sie werden aufgefordert, die im Website-Editor vorgenommenen Änderungen zu speichern, bevor Sie ihn verlassen.

So exportieren Sie Templates und Stile

Sie können Ihr Theme mit den Änderungen exportieren, die Sie im Website-Editor vorgenommen haben, einschließlich der Vorlagen, Vorlagenteile und Stileinstellungen, ähnlich wie bei der Option Werkzeuge > Export.

• Öffnen Sie den Website-Editor, indem Sie zu Design > Editor gehen.
• Wählen Sie das Symbol mit den drei vertikalen Punkten neben der Option für Ihre Stile-Einstellungen aus.
• Wählen Sie unter Werkzeuge die Option Export aus. Dadurch wird der Exportvorgang gestartet, und Sie erhalten eine heruntergeladene ZIP-Datei Ihres Themes, in der die Vorlagen und Vorlagenteile enthalten sind.

Nützliche Werkzeuge bei der Verwendung des Website-Editors

Die folgenden Werkzeuge sind bei der Verwendung des Website-Editors hilfreich.

Die Befehlspalette

Die Befehlspalette bietet Ihnen eine schnelle Möglichkeit, durch den Inhalt Ihrer Website zu navigieren und verschiedene Aktionen auszuführen, z. B. neue Beiträge/Seiten zu erstellen, Einstellungen umzuschalten und auf Ihre Stile sowie benutzerdefinierten CSS-Einstellungen zuzugreifen.

Sie können die Befehlspalette in der Websiteansicht in der Seitenleiste öffnen, indem Sie auf das Suchsymbol klicken. In der Bearbeitungsansicht befindet sich die Befehlspalette in der oberen Titelleiste. Sie können auch das Tastenkürzel Cmd+k auf dem Mac oder Ctrl+k unter Windows verwenden.

Erfahren Sie mehr über die Befehlspalette in diesem Supportartikel: Befehlspalette des Website-Editors.

Listenansicht

Die Listenansicht hilft Ihnen bei der Navigation durch komplexe Blocklayouts und verschachtelte Blockstrukturen. Sie können genau den benötigten Block auswählen und erhalten einen schnellen Überblick über das Blocklayout auf der Seite, an der Sie gerade arbeiten. Sie können problemlos mehrere Blöcke auswählen und sie bearbeiten, verschieben oder gruppieren.

Erfahren Sie mehr über die Listenansicht in diesem Supportartikel:  Listenansicht.

Blockmuster

Blockmuster sind eine Sammlung vordefinierter Blöcke, die Sie in Beiträge und Seiten einfügen können. Anschließend können Sie sie weiter anpassen. WordPress enthält eine Reihe von Standard-Blockmustern. Blockmuster finden Sie auch zusammen mit den Block-Themes.

Erfahren Sie mehr über Blockmuster in diesem Supportartikel: Blockmuster.

Stile kopieren und einfügen

Mit WordPress 6.2 wurde eine neue Option hinzugefügt, mit der Sie Blockstile kopieren und einfügen können. Dadurch lassen sich erstellte Designs einfach wiederverwenden. Sie finden diese Option im Drei-Punkte-Menü jedes Blocks. Sie ist dafür vorgesehen, Stile zwischen Blöcken desselben Typs zu kopieren und einzufügen:

Stiländerungen global anwenden

Wenn Sie mit erweiterten Optionen beim Erstellen eines Designs oder Anpassen einzelner Blöcke vertrauter sind, können Sie seit WordPress 6.2 Änderungen an einem einzelnen Block vornehmen und auf alle Blöcke desselben Typs anwenden. Sie könnten beispielsweise ein einzelnes Design für einen individuellen Block mit einer neuen Option im Abschnitt Erweitert der Blockeinstellungen auf alle Blöcke Ihrer Website anwenden.

Vorschau des Website-Editors anpassen

Wenn Sie sich im Website-Editor befinden, möchten Sie möglicherweise die Vorschau der Vorlage oder des Vorlagenteils ändern, die bzw. den Sie gerade ansehen. Dazu können Sie die Griffe der dunkelgrauen Seitenleiste auswählen und sie nach Ihren Wünschen verschieben.

Ressourcen-Links

• Zusätzlicher Leitfaden zur Verwendung des Website-Editors
• Einfache Websitegestaltung und Website-Bearbeitung
• Einführung in den Website-Editor und den Vorlagen-Editor