Transkript
Einleitung
Sehen wir uns den Website-Editor an, mit dem Sie mithilfe von Blöcken alles auf Ihrer Website gestalten können – vom Header bis zum Footer und alles dazwischen. Gehen wir zu „Design“ und klicken auf „Editor“. Dadurch wird der Website-Editor geöffnet. Auf der linken Seite befindet sich die Seitenleiste der Website-Ansicht. Mit diesem praktischen Werkzeug können Sie die wichtigsten Bereiche Ihrer Website aufrufen, darunter Navigation, Stile, Seiten, Templates und Muster. Dieses Tutorial soll Ihnen ein tiefes Verständnis dieser Elemente vermitteln.
Navigation
Beginnen wir oben mit der Navigation. Hier können Sie schnell alle Ihre Menüs anzeigen und anpassen. Sie ist Ihre zentrale Steuerung für die Menüverwaltung. Einfache Änderungen können Sie direkt vornehmen, zum Beispiel die Reihenfolge ändern. Wenn Sie auf die drei vertikalen Punkte neben dem Namen des Menüelements klicken, können Sie das Element nach Bedarf umbenennen, duplizieren und löschen. Wenn Sie den Bearbeitungsmodus öffnen, können Sie bestimmte Änderungen ohne Ablenkungen vornehmen. Die Aktualisierungen werden auf Ihrer gesamten Website synchronisiert. Wenn Sie auf das Plus-Symbol klicken, können Sie neue Seiten oder andere Menüelemente hinzufügen. Sie werden feststellen, dass der Navigationsblock in diesem Bereich gesperrt ist. Wenn Sie Ihr Navigationsmenü gestalten möchten, müssen Sie ein Template oder den Template-Teil öffnen, zu dem es gehört.
Stile
Sprechen wir als Nächstes über Stile. Wenn Sie „Stile“ auswählen, können Sie eine Vielzahl verschiedener Stilkombinationen durchsuchen, die mit Ihrem Theme geliefert werden. Wenn Sie auf „Stile bearbeiten“ klicken, können Sie Ihre Stile von hier aus durchsuchen und anschließend die Typografie, Farben und das Layout Ihrer Website ändern. Sehen wir uns an, wie das funktioniert. Wenn Sie auf „Typografie“ klicken, können Sie die Typografieeinstellungen für Text, Links, Überschriften, Beschriftungen und Buttons verwalten. Eine wunderbare neue Funktion ist, dass Sie jetzt auch Zugriff auf eine Schriftartenbibliothek haben. Unter „Schriftarten“ sehen wir die Schriftarten, die zu unserem Theme hinzugefügt wurden. Wenn wir jedoch auf „Schriftarten verwalten“ klicken, können wir lokale und Google-Schriftarten auf der gesamten Website mit jedem Block-Theme installieren, entfernen und aktivieren. Wenn Sie auf „Schriftarten installieren“ klicken, können Sie jede beliebige Google-Schriftart auf Ihrer Website installieren. Wenn Sie eine Schriftart von Ihrem Computer hochladen möchten, klicken Sie auf „Hochladen“. Vergewissern Sie sich, dass Sie das Recht haben, die von Ihnen hochgeladenen Schriftarten zu verwenden. Unter „Typografie“ sehen wir die Farben. Hier können Sie auch die Farben verschiedener globaler Elemente auf Ihrer Website ändern. Wenn wir zu „Layout“ wechseln, stellen wir fest, dass Sie sogar Elemente wie Innenabstände und Blockabstände steuern können.
Stilübersicht
Wenn Sie weiter nach unten schauen, können Sie das Erscheinungsbild bestimmter Blöcke für Ihre gesamte Website anpassen. Um zu sehen, wie sich diese Blöcke ändern, wenn Sie sie bearbeiten, rufen Sie die Stilübersicht Ihrer Website auf. Oben sehen Sie ein kleines Augensymbol. Mit der Stilübersicht kann ein Benutzer eine Vorschau jedes Blocks anzeigen, der in Ihre Website eingefügt werden kann. Sie bietet Ihnen eine Vorschau auf einen Blick, wie sich globale Stile auf alle angezeigten Blöcke auswirken, ohne dass der Benutzer diese Blöcke in ein Template einfügen muss. Wichtig ist außerdem, dass die Gestaltung eines Blocks innerhalb der Stilübersicht angepasst werden kann. Aktualisieren wir zum Beispiel den Block „Buttons“, indem wir die Hintergrundfarbe und die Groß- und Kleinschreibung in Großbuchstaben ändern. Wenn Ihnen das Ergebnis gefällt, können Sie auf „Speichern“ klicken. Bitte beachten Sie auch, dass die Änderung eines einzelnen Blocks in Ihrer Stilübersicht Vorrang vor den von Ihnen festgelegten globalen Stilen hat.
Stilrevisionen
Da wir gerade hier sind, müssen wir auch über Stilrevisionen sprechen. Klicken wir neben dem Symbol der Stilübersicht auf „Stilrevisionen“. Stilrevisionen werden geöffnet, wenn Sie ein Template in der Stilübersicht bearbeiten. Die Funktion für Stilrevisionen bietet eine visuelle Möglichkeit, Änderungen an Ihren Stilen im Zeitverlauf zu durchsuchen. Sie können problemlos zu einer früheren Version zurückkehren, wenn Sie einen Stil bevorzugen oder zu einer vorherigen Version zurückkehren möchten. Sie müssen lediglich die Version auswählen und dann auf „Anwenden“ klicken. In diesem Beispiel bearbeite ich ein Template und werde genauso vorgehen. Ich öffne die Stilrevisionen, wähle einen früheren Stil aus und klicke dann auf „Anwenden“, um ihn wiederherzustellen. Wenn Sie auf die drei vertikalen Punkte neben den Stilen klicken, können Sie die Stile zurücksetzen und zusätzliches CSS hinzufügen.
Seiten
Unter „Stile“ können wir zu „Seiten“ wechseln, um Seiten zu erstellen und zu veröffentlichen. Um eine neue Seite hinzuzufügen, klicken Sie neben „Seiten“ auf das Plus-Symbol und erstellen Sie einen Entwurf. Sie können selbstverständlich auch eine neue Seite in Ihrem Dashboard oder in WP Admin erstellen. Öffnen wir als Nächstes eine unserer vorhandenen Seiten, meine Über-uns-Seite. Wenn Sie eine Seite öffnen, müssen Sie daran denken, Inhalte zum Inhaltsblock hinzuzufügen. Anders ausgedrückt: Der Inhaltsblock ist das Haus beziehungsweise der Container für all Ihre Inhalte. Das Zweite, woran Sie denken müssen, ist, dass Sie Ihren Header und Footer beim Bearbeiten einer Seite nicht anpassen können. Das gehört zur Verwaltung von Templates. Wenn Sie auf den Header klicken, erhalten Sie die Meldung: ‘Bearbeiten Sie Ihr Template, um diesen Block zu bearbeiten.’ Wenn Sie das Template ändern möchten, das dieser Seite zugewiesen ist, können Sie auf „Template bearbeiten“ klicken. In diesem Beispiel gelangen Sie dadurch zu Ihrem Seitentemplate. Hier können Sie Ihren Header und Footer anpassen. Sie können einem Template keine Inhalte hinzufügen. Inhalte werden selbstverständlich Beiträgen und Seiten hinzugefügt. Der Inhaltsblock ist in diesem Zusammenhang lediglich ein Platzhalter.
Templates
Damit kommen wir zu unserem nächsten Thema, den Templates. Templates geben die Struktur dafür vor, wie Ihre Inhalte angezeigt werden. Wenn Sie „Templates“ auswählen, sehen Sie eine Reihe von Templates, die mit Ihrem Theme geliefert werden – integrierte Templates. Zum Beispiel das Seitentemplate, das eine einzelne Seite anzeigt, das Index-Template, das als Fallback-Template dient, oder das Template für einzelne Beiträge, das das Layout einzelner Beiträge anzeigt. Ganz unten sehen wir alle benutzerdefinierten Templates. Wenn Sie neben „Templates“ auf das Plus-Symbol klicken, können Sie eine Vielzahl neuer Templates hinzufügen, sogar ein benutzerdefiniertes Template, das jedem Beitrag oder jeder Seite zugewiesen werden kann. Öffnen wir das Seitentemplate, um besser zu verstehen, wie ein Template funktioniert. Ein Template liefert die Struktur. Es enthält normalerweise einen Header-Template-Teil und einen Footer-Template-Teil.
Der Inhaltsblock für Beiträge ruft die Inhalte der Seite oder des Beitrags ab, die beziehungsweise der dem Template zugewiesen ist. Ein Template wird also nur verwendet, um das Layout oder Design der Seite zu ändern, nämlich den Header, den Footer und sogar die Seitenleiste. Der Website-Editor unterscheidet daher klar zwischen der Bearbeitung des Templates und der Seite. Sie können Ihren Header und Footer innerhalb des Templates ändern. Eine der Optionen besteht darin, auf die drei vertikalen Punkte zu klicken und „Header ersetzen“ auszuwählen. Anschließend können Sie Ihren aktuellen Header durch einen Ihrer vorhandenen Header-Template-Teile oder durch ein Header-Muster ersetzen, das mit Ihrem Theme geliefert wird. Eine weitere Möglichkeit besteht darin, Ihren Header auszuwählen und dann auf „Bearbeiten“ zu klicken. Dadurch können Sie Ihren Header oder Footer im Template-Bearbeitungsmodus ohne weitere Ablenkungen ändern.
Template zuweisen
Um einer Seite oder einem Beitrag ein neues Template zuzuweisen, öffnen Sie den betreffenden Inhalt – in diesem Fall meine Über-uns-Seite – und öffnen Sie anschließend die Einstellungen der Seitenleiste auf der rechten Seite. Klicken Sie neben „Template“ auf den Namen des Templates, wählen Sie „Template austauschen“ aus und wählen Sie anschließend ein benutzerdefiniertes Template aus, das Sie Ihrer Seite oder Ihrem Beitrag zuweisen möchten.
Templates verwalten
Erwähnenswert ist außerdem, dass Sie, wenn Sie auf „Alle Templates verwalten“ und anschließend auf „Massenbearbeitung“ klicken, Ihre Templates in der Tabellen- oder Rasteransicht durchsuchen und filtern können. Wenn Sie erneut „Massenbearbeitung“ auswählen, stehen weitere Filteroptionen zur Verfügung. Bitte beachten Sie, dass Sie Seiten und Template-Teile genau auf dieselbe Weise durchsuchen und filtern können.
Muster
Sprechen wir zum Schluss über Muster. Oben können Sie alle verfügbaren Muster anzeigen. Wenn Sie „Meine Muster“ auswählen, können Sie Ihre eigenen benutzerdefinierten synchronisierten und nicht synchronisierten Muster erstellen und verwalten. Unter „Meine Muster“ können wir alle unsere benutzerdefinierten Muster sowie die Muster anzeigen, die mit unserem Theme geliefert werden, jeweils in ihren entsprechenden Kategorien. Unter „Template-Teile“ können wir außerdem unsere Header-, Footer- und allgemeinen Template-Teile erstellen und verwalten. Template-Teile sind im Wesentlichen Muster. Sie sind synchronisierte, wiederverwendbare Komponenten, die auf Ihrer gesamten Website verwendet werden können.
Benutzerdefinierte Muster
Beginnen wir mit „Meine Muster“. Um Ihr eigenes Muster zu erstellen, klicken Sie neben „Muster“ auf den Inserter und wählen Sie anschließend „Muster erstellen“. Nachdem Sie es benannt haben, können Sie es der passenden Kategorie hinzufügen und anschließend entscheiden, ob Ihr Muster synchronisiert werden soll oder nicht. Ein synchronisiertes Muster wird auf Ihrer gesamten Website synchronisiert. Das bedeutet, dass es überall aktualisiert wird, wo es verwendet wird, wenn Sie Ihr Muster an einer Stelle ändern. Sie können diese Option auch deaktivieren, wenn Sie ein nicht synchronisiertes Muster bevorzugen. Nicht synchronisierte Muster sind einfach normale Muster, die unabhängig bearbeitet werden können. Wenn Sie zu Ihrem Bereich für benutzerdefinierte Muster zurückkehren, werden Sie feststellen, dass synchronisierte Muster ein violettes Symbol haben und nicht synchronisierte Muster nicht. Außerdem werden Sie feststellen, dass die Muster, die mit Ihrem Theme geliefert werden, gesperrt sind und nicht bearbeitet werden können. Wenn Sie jedoch unter einem Muster auf die drei vertikalen Punkte klicken, können Sie es in den Bereich „Meine Muster“ kopieren.
Template-Teile
Unten können wir unsere Header-, Footer- und allgemeinen Template-Teile erstellen und verwalten. Hier haben Sie zwei Möglichkeiten. Sie können benutzerdefinierte Header und Footer erstellen oder die mit Ihrem Theme gelieferten Template-Teil-Muster anpassen. Um einen eigenen Template-Teil zu erstellen, klicken Sie oben neben „Muster“ auf das Plus-Symbol und wählen Sie „Template-Teil erstellen“. Wenn Sie einen neuen Template-Teil hinzufügen, können Sie zwischen allgemeinen Header- und Footer-Template-Teilen wählen. Allgemeine Template-Teile sind keinem bestimmten Bereich zugeordnet. Denken Sie daher daran, ihnen einen aussagekräftigen Namen zu geben. Wenn Sie von hier aus einen Template-Teil öffnen, können Sie ihn im Template-Bearbeitungsmodus ohne Ablenkungen ändern und bearbeiten. Sie können auch das entsprechende Template öffnen – in diesem Fall mein benutzerdefiniertes Template – und anschließend Ihren Header- oder Footer-Template-Teil innerhalb des Templates ändern. Wie bereits gezeigt, können Sie einen Ihrer Header oder Footer problemlos durch ein Muster oder einen vorhandenen Template-Teil aus der Bibliothek ersetzen.
Befehlspalette
Zum Abschluss möchte ich noch eine äußerst hilfreiche Funktion hervorheben: die Befehlspalette. Sie spart Ihnen viel Zeit und hilft Ihnen, sich im Website-Editor effektiver zu bewegen. Mit der Befehlspalette können Sie Aufgaben schnell erledigen und im Website-Editor navigieren. Sie können beispielsweise ‘Neu’ eingeben, um eine Seite oder ein Template zu erstellen, oder einfach den Namen des Bereichs, den Sie aufrufen möchten. Zum Beispiel „Muster“, um alle meine Muster zu verwalten. Sie können die Befehlspalette über die Tastenkombination Befehlstaste+K auf dem Mac oder Strg+K unter Windows aufrufen. Sie finden sie auch in der Seitenleiste der Website-Ansicht, indem Sie auf das Suchsymbol klicken. Oder Sie klicken einfach auf die Titelleiste.
Fazit
Damit ist unser kurzer Überblick darüber abgeschlossen, was Sie mit dem Website-Editor erreichen können.
Praxis
Verwenden Sie WordPress Playground, um den Website-Editor zu erkunden.
- Üben Sie, zwischen den verschiedenen Bereichen des Website-Editors zu navigieren.
- Verwenden Sie die Befehlspalette, um schneller im Website-Editor zu navigieren.
- Vergleichen Sie den Unterschied zwischen einer Seite und einem Template.