Lern den Website-Editor genauer kennen. Mit ihm kannst du alles auf deiner Website gestalten,
vom Header zum Footer und alles dazwischen.
Gehe zu „Design“ und klicke dann auf „Editor“.
Dadurch wird der Website-Editor geöffnet.
Auf der linken Seite befindet sich die Seitenleiste. Mit diesem praktischen Werkzeug kannst du dich
mit den wichtigsten Teilen deiner Website befassen, darunter Navigation, Stile, Seiten, Templates und Vorlagen.
In dieser Lektion wird dir ein tiefgreifendes Verständnis dieser Elemente vermittelt.
Beginnen wir oben mit der Navigation.
Hier kannst du alle deine Menüs schnell anzeigen und anpassen.
Es ist deine Kommandozentrale für die Menüverwaltung.
Hier kannst du beispielsweise eine andere
Anordnung vornehmen.
Wenn du auf die drei vertikalen Punkte neben dem Namen des Menüs klickst,
kannst du den Menüpunkt nach Bedarf umbenennen, duplizieren oder löschen.
Wenn du den Bearbeitungsmodus öffnest, kannst du bestimmte Änderungen ohne Ablenkungen vornehmen.
Aktualisierungen werden auf deiner gesamten Website synchronisiert.
Du kannst neue Seiten oder andere Menüelemente hinzufügen, indem du auf das Plus-Symbol klickst.
Du wirst feststellen, dass der Navigationsblock in diesem Bereich gesperrt ist.
Wenn du das Design des Menüs gestalten möchtest, musst du das entsprechende
Template oder Template-Teil öffnen.
Als Nächstes befassen wir uns mit Stilen.
Wenn du auf „Stile“ klickst, kannst du eine Vielzahl verschiedener Stilkombinationen
durchsuchen, die zu deinem Theme gehören.
Wenn du auf „Stile durchstöbern“ klickst, kannst du deine Stile von hier aus durchsuchen und dann
Typografie, Farben und Layout deiner Website ändern.
Schauen wir uns zunächst die Typografie-Einstellungen an.
Wenn du auf „Typografie“ klickst, kannst du die Typografie-Einstellungen für Text, Links,
Überschriften, Bildunterschriften und Schaltflächen verwalten.
Eine wunderbare neue Funktion ist, dass du nun auch Zugriff auf eine Schriftarten-Bibliothek hast.
Unter „Schriftarten“ sehen wir die Schriftarten, die zu unserem Theme hinzugefügt wurden.
Wenn du jedoch auf das Symbol rechts daneben und dann auf “Schriften installieren” klickst,
kannst du lokale und Google-Schriftarten mit jedem Block-Theme installieren, entfernen und aktivieren.
Wenn du auf „Schriftarten installieren“ klickst, kannst du jede beliebige Google-Schriftart auf deiner Website
installieren und auf „Hochladen“ klicken, wenn du eine Schriftart von deinem Computer hochladen möchtest.
Stelle sicher, dass du das Recht hast, die von dir hochgeladenen Schriftarten zu verwenden.
Der nächste Punkt sind die Farbeinstellungen.
Wenn du auf “Farben” klickst, kannst du die Farben für verschiedene globale Elemente auf deiner Website ändern.
Wenn wir weiter zu „Layout“ gehen, werden wir feststellen,dass du sogar
Elemente wie Abstände und Blockabstände steuern kannst.
Auch im Bereich “Stile” kannst du weiter unten auf “Blöcke” klicken und dann das Erscheinungsbild
bestimmter Blöcke für deine gesamte Website anpassen.
Um zu sehen, wie sich diese Blöcke ändern, wenn du sie bearbeitest, gehst du zum Stilbuch deiner Website.
Neben der Überschrift “Stile” siehst du ein Symbol mit einem Auge. Mit einem Klick öffnet sich das Stilbuch.
Es ermöglicht, eine Vorschau aller Blöcke anzuzeigen, die in deine Website eingefügt werden können.
Es gibt dir einen Überblick darüber, wie sich globale Stile auf alle angezeigten Blöcke auswirken,
ohne dass der Benutzer diese Blöcke in eine Vorlage einfügt.
Beachte auch, dass das Design eines Blocks im Stilbuch angepasst werden kann.
Aktualisiere beispielsweise den Block „Buttons“,
indem du die Hintergrundfarbe änderst und die Groß-/Kleinschreibung auf Großbuchstaben umstellst.
Wenn dir das Ergebnis gefällt, kannst du auf „Speichern“ klicken.
Beachte bitte auch, dass die Änderung eines einzelnen Blocks in deinem Stilbuch Vorrang
vor den von dir festgelegten globalen Stilen hat.
An dieser Stelle sollten wir auch über Stil-Revisionen sprechen.
Klicke dazu in der Seitenleiste auf der rechten Seite auf das Uhr-Symbol (Revisionen) neben dem Auge-Symbol (Stilbuch).
Stil-Revisionen werden angezeigt, wenn du ein Template im Stilbuch bearbeitet hast.
Mit der Funktion Revisionen kannst du frühere Änderungen an deinen Stilen im Laufe der Zeit visuell durchsuchen
und ganz einfach zu einer früheren Version zurückkehren, wenn dir ein Stil besser gefällt oder
du eine frühere Version wiederherstellen möchtest.
Du musst lediglich die Version auswählen und dann auf „Übernehmen“ klicken.
In diesem Beispiel bearbeite ich ein Template und werde denselben Vorgang ausführen.
Ich öffne “Revisionen”, wähle einen früheren Stil aus und klicke dann auf „Anwenden“.
Wenn du auf die drei vertikalen Punkte neben Auge und Uhr klickst, kannst du Stile zurücksetzen
und zusätzliches CSS hinzufügen.
Unterhalb von „Stile“ können wir zu „Seiten“ gehen, um Seiten zu erstellen und zu veröffentlichen.
Um eine neue Seite hinzuzufügen, klickst du auf das Plus-Symbol neben „Seiten“ und erstellst einen Entwurf.
Du kannst natürlich auch eine neue Seite erstellen, wenn du dich in deinem Dashboard oder WP Admin befindest.
Als Nächstes öffnen wir eine unserer bestehenden Seiten, meine „About Page“.
Wenn du eine Seite öffnest, ist es wichtig, daran zu denken, Inhalte zum Inhaltsblock hinzuzufügen.
Mit anderen Worten: Der Inhaltsblock ist der Platz für alle deine
Inhalte.
Als Zweites solltest du beachten, dass du deine Kopf- und Fußzeile beim Bearbeiten einer Seite
nicht anpassen kannst.
Das gehört alles zur Bearbeitung von Templates.
Wenn du auf die Kopfzeile klickst, erhältst du die Meldung „Bearbeiten Sie Ihr Template, um diesen.
Block zu bearbeiten“.'
Wenn du das dieser Seite zugewiesene Template ändern möchtest, kannst du auf
„Template bearbeiten“ klicken.
In diesem Beispiel gelangst du dann zu deinem Seitentemplate.
Hier kannst du deine Kopf- und Fußzeile ändern.
Du kannst jedoch keine Inhalte zu einer Vorlage hinzufügen.
Inhalte werden natürlich zu Beiträgen und Seiten hinzugefügt.
Der Inhaltsblock fungiert hier nur als Platzhalter.
Das bringt uns zu unserem nächsten Thema, nämlich den Templates.
Diese legen die Struktur fest, in der deine Inhalte angezeigt werden.
Wenn du auf “Templates” klickst, werden dir eine Reihe von Templates angezeigt, die zu deinem Theme gehören,
sogenannte integrierte Templates.
Dazu gehören beispielsweise das Seitentemplate, das eine einzelne Seite anzeigt, das Indextemplate,
das als Fallback-Template dient, oder das Template “Einzelne Beiträge”, das das Layout einzelner Beiträge anzeigt.
Ganz unten sehen wir alle benutzerdefinierten Templates.
Wenn du auf das Plus-Symbol neben den Vorlagen klickst, kannst du eine Vielzahl neuer Templates hinzufügen, sogar
ein benutzerdefiniertes Template, das auf jeden Beitrag oder jede Seite angewendet werden kann.
Öffnen wir das Seitentemplate, um besser zu verstehen, wie ein Template funktioniert.
Ein Template sorgt für Struktur.
Es enthält in der Regel eine Kopf- und eine Fußzeile.
Der Block „Beitragsinhalt" ruft den Inhalt der Seite oder des Beitrags ab, die bzw. der dem Template zugewiesen ist.
Ein Template wird also nur verwendet, um das Layout oder Design der Seite zu ändern, d. h. die Kopfzeile, die Fußzeile,
und sogar die Seitenleiste.
Der Editor unterscheidet daher klar zwischen der Bearbeitung des Templates und der Bearbeitung der Seite.
Du kannst deine Kopf- und Fußzeile innerhalb des Templates ändern.
Eine der Optionen, die dir zur Verfügung stehen, ist, auf die drei vertikalen Punkte zu klicken und „Kopfzeile
ersetzen“ auszuwählen.
Dann kannst du deine aktuelle Kopfzeile durch eins deiner vorhandenen Kopfzeilen-Templateteile oder Kopfzeilen-Vorlagen
ersetzen, die mit deinem Theme geliefert werden
Eine weitere Option besteht darin, deine Kopfzeile auszuwählen und dann auf „Bearbeiten“ zu klicken.
Auf diese Weise kannst du deine Kopf- oder Fußzeile im Template-Bearbeitungsmodus
ohne weitere Ablenkungen ändern.
Um einer Seite oder einem Beitrag eine neue Vorlage zuzuweisen, öffne diese bzw. diesen
und öffne dann die Seitenleiste auf der rechten Seite.
Klicke neben „Template“ auf den Namen des Templates, wähle „Template ändern“ und wähle dann eine benutzerdefinierte Vorlage aus,
die du deiner Seite oder deinem Beitrag zuweisen möchtest.
Es ist auch wichtig, dass du, wenn du unter „Alle Templates” auf das Symbol “Layout” klickst,
deine Templates über die Tabellen- oder Rasteransicht durchsuchen und
filtern kannst.
Wenn du daneben auf das Rad klickst, stehen dir weitere Filteroptionen zur Verfügung.
Bitte beachte, dass du Seiten und Template-Teile auf genau die gleiche Weise durchsuchen und filtern kannst.
Zum Schluss gehen wir noch zu den Vorlagen.
Du kannst dir alle verfügbaren Vorlagen anzeigen lassen.
Wählst du „Meine Vorlagen“ aus, kannst du deine eigenen synchronisierten und nicht-synchronisierten
Vorlagen erstellen und verwalten.
Unter „Meine Vorlagen“ können wir alle unsere benutzerdefinierten Vorlagen und die mit unserem Theme gelieferten
Vorlagenin den entsprechenden Kategorien anzeigen.
Unter "Template-Teile" können wir außerdem unsere Kopf- und Fußzeilen sowie allgemeine Template-Teile
erstellen und verwalten.
Template-Teile sind im Wesentlichen Vorlagen.
Es handelt sich um synchronisierte, wiederverwendbare Komponenten, die auf deiner gesamten Website verwendet werden können.
Beginnen wir mit „Meine Vorlagen”.
Um deine eigene Vorlage zu erstellen, klicke auf „Vorlage hinzufügen“ und dann nochmals auf
“Vorlage hinzufügen”.
Jetzt kannst du sie benennen und der entsprechenden Kategorie hinzufügen.
Dann entscheidest du, ob du deine Vorlage synchronisieren möchtest oder nicht.
Eine synchronisierte Vorlage wird auf deiner gesamten Website synchronisiert, d. h., wenn du deine Vorlage
an einer Stelle änderst, wird sie überall dort aktualisiert, wo sie verwendet wird.
Du kannst diese Option auch deaktivieren, wenn du eine nicht synchronisierte Vorlage bevorzugst.
Nicht synchronisierte Vorlagen sind normale Vorlagen, die unabhängig voneinander bearbeitet werden können.
Wenn du zu deinem Bereich für benutzerdefinierte Vorlagen zurückkehrst, wirst du feststellen, dass synchronisierte Vorlagen
ein lila Symbol haben und nicht-synchronisierte Vorlagen nicht.
Als Nächstes wirst du feststellen, dass die mit deinem Theme gelieferten Vorlagen gesperrt sind
und du sie nicht bearbeiten kannst.
Wenn du jedoch auf die drei vertikalen Punkte unter einer Vorlage klickst,
kannst du sie duplizieren. Dann findest du sie unter “Meine Vorlagen“.
Unten können wir unsere Kopf- und Fußzeilen sowie allgemeine Template-Teile erstellen und verwalten.
Hier hast du zwei Möglichkeiten.
Du kannst benutzerdefinierte Kopf- und Fußzeilen erstellen oder die mit deinem Theme
gelieferten Vorlagen für Template-Teile anpassen.
Um dein eigenes Template-Teil zu erstellen, klicke oben neben „Vorlagen“ auf das Plus-Symbol
und wähle „Template-Teil hinzufügen“.
Wenn du eine neues Template-Teil hinzufügst, kannst du zwischen allgemeinen Template-Teilen
für Kopf- und Fußzeilen wählen.
Allgemeine Template-Teile sind nicht an einen bestimmten Bereich gebunden, daher solltest du ihnen
einen aussagekräftigen Namen geben.
Wenn du ein Template-Teil von hier aus öffnest, kannst du dein Template-Teil
im Template-Bearbeitungsmodus ohne Ablenkungen ändern und bearbeiten.
Du kannst auch das entsprechende Template öffnen, in diesem Fall mein benutzerdefiniertes Template,
und dann deinen Kopf- oder Fußzeilenvorlagenteil innerhalb der Vorlage ändern.
Wie bereits gezeigt, kannst du eine deiner Kopf- oder Fußzeilen ganz einfach durch eine Vorlage
oder ein vorhandenes Template-Teil aus den Vorlagen ersetzen.
Abschließend möchte ich noch eine äußerst hilfreiche Funktion namens Befehlspalette hervorheben,
mit der du viel Zeit sparst und dich effektiver im Website-Editor bewegen kannst.
Mit der Befehlspalette kannst du Aufgaben schnell erledigen und
im Website-Editor navigieren.
Du kannst beispielsweise „Neu“ eingeben, um eine Seite oder ein Template zu erstellen, oder einfach
den Namen des Bereichs, zu dem du gelangen möchtest.
Zum Beispiel „Vorlage“, um alle meine Vorlagen zu verwalten.
Du kannst die Befehlspalette über die Tastenkombination Befehl+k auf dem Mac oder
Strg+k unter Windows aufrufen.
Du findest sie auch in der linken Seitenleiste, indem du oben auf das Suchsymbol klickst.
Oder du klickst einfach auf die Titelleiste.
Du hast nun einen kurzen Überblick darüber bekommen, was du mit dem Website-Editor alles tun kannst.