create Header/Footer mit Site-Editor

Der vorliegende Beitrag beinhaltet den Beschrieb, wie mit dem Site-Editor ein Header und ein Footer erstellt wird. Der Site-Editor ist das Werkzeug, mit dem eine ganze Website erstellt werden kann. Eine Website besteht aus vielen Seiten und Beträgen mit Inhalten die ein Thema abdecken. Eine einzelne Webseite(Beitrag oder Seite) behandelt einen Teilaspekt des entsprechenden Themas. Eine solche Webseite besteht meistens aus einem Header und einem Footer und dazwischen, eingeklemmt ist der Inhalt. Häufig wird derselbe Header und Footer in vielen Webseiten verwendet.

Eine Website besteht also aus Seiten und Beiträgen, welche wiederum aus Templates, Template-Teilen, Vorlagen, Medien zusammengesetzt sind. Diese bestehen wiederum aus Block-Elementen, das sind die kleinsten Bausteine in WordPress. Somit ist klar, dass die Block-Elemente(Blöcke), der wesentlichste Teil von WordPress ist. Diese Block-Elemente werden mit dem Block-Inserter(Site- und Blockeditor) hinzugefügt und anschliessend berarbeitet, bis so eine Website aufgebaut und entsprechend gestaltet ist. Das bededutet auch, dass ein Page-Builder(Website-Baukasten), nicht mehr nötig ist. Im Site-Editor von WordPress wir jeder Absatz, Bild, Video, Überschrift, usw. als „Block-Element“ dargestellt. Jeder Block wird mit einem eigenen Set von Bedienelementen geliefert, um Dinge/Eigenschaften wie Farbe, Breite, Ausrichtungn usw. zu ändern. Diese werden automatisch ein- und ausgeblendet, wenn ein Block ausgewählt ist. Alle zur Verfügung stehenden Blöcke befinden sich in der Block-Bibliothek, zu finden über das folgende blaue Plus-Symbol(ganz zuoberst in der oberen Werkzeug-Leiste):

create Header/Footer mit dem Site-Editor

Die folgende Beschreibung kann Analog auch für den Footer angewendet werden. In WordPress gibt es Standard-Vorlagen für den Header und Footer als Template-Teil. Eine solche Vorlage verwenden wir(duplizieren), um nicht alles neu machen zu müssen. Ein neuer Header erstellen wird mit dem Site-Editor durch duplizieren. Dazu klicken wir im Backend auf Design>Editor, dann Vorlagen, dann Header (Header und Footer sind Template-Teile), so wählen wir eine der Standard-Vorlagen aus, indem wir unterhalb der Vorlage auf die 3 Punkte klicken und dann Duplizieren wählen, geben der neuen Vorlage den Namen HeaderSpez und wählen den Bereich Header und Duplizieren. So haben wir ein neues Header-Template-Teil, mit Name HeaderSpez erstellt. Diese Vorlage(Template-Teil) rufen wir jetzt zur Bearbeitung auf: Design>Editor>Vorlagen>Header>HeaderSpez. Wir klicken das 4-te Menüelement(Dokumentenübersicht) an, welches den Element-Baum listet. Nun können wir Elemente mutieren, hinzufügen oder löschen. Alle zur Verfügung stehenden Block-Elemente sind im 2-ten Icon(Plus-Symbol mit blauem Hintergrund) zu finden, wo wir Element-Blöcke wählen, am gewünschten Platz hinzufügen und mit entsprechenden Optionen versehen.

Das 12-te Icon(die 3 übereinander liegenden schwarzen Punkte) sind Optionen. In diesen Optionen kann die Befehlspalette in die Werkzeugleiste als (Menü-Punkt 6) verankert werden, was vor allem der Übersichtlichkeit dient(sonst ist die Befehlspalette freischwebend und überdeckt den Inhaltsbereich).

Die 5 Bereiche des Site-Editor: Oben(Werkzeugleiste/Menüleiste) mit den 12 Menüpunkten und darunter die 3 Bereiche Links(Block-Elementbaum), Center(Inhalt) und Rechts(Eigenschaften/Stile für die Blockelemente sowie für die Beiträge, Seiten, Vorlagen, Template-Teile, Templates) und ganz Unten die Status-Zeille.

Was wir gerade bearbeiten, ob es eine Seite, ein Beitrag, ein Template, ein Template-Teil oder eine Vorlage ist, verrät uns der erste Titel im Site-Editor, im Bereich-Rechts direkt vor dem Titel Block. Im vorliegenden Fall ist es ein Template-Teil. Um einen Header zu gestalten, fügen wir nun Block für Block hinzu, bis wir das gewünschte Ergebnis haben. Um einen Block hinzuzufügen klicken wir auf das Element, nach oder vor dem, wir eine neues Element im Elementbaum(im Bereich Links)einfügen wollen. Auf der ausgewählten Linie finden wir die 3 untereinander liegenden Punkte, durck klick auf diese 3 Punkte erhalten wir die Optionen gelistet. Eine dieser Optionen ist ‚Danach hinzufügen‚ welche wir wählen. Dadurch wird automatisch, nach dem gewählten Element, ein Absatz-Block hinzugefügt und wir sind auf diesem Block positioniert. Klicken wir nun in der Menüzeile auf das Plus-Icon werden alle Blöcke gelistetet, hier scrollen wir herunter und wählen das Blockelement Website-Titel. Danach klicken wir auf das Menüelement(Menupunkt 4) mit den 3 Strichen, so wird der Blockelementbaum(linker Teil) mit dem neuen Element anzeigt. Nun kann mit gedrückter linker Maustaste das entsprechende Elemenet mit Drag and drop verschoben werden. Jetzt noch im Bereich Rechts ,die Eigenschaften und Stile des gewählten Element aus dem Bereich Links, anpassen (Grösse, Farbe, Abstände, usw.). So arbeiten wir mit jedem Element das wir für unseren Header benötigen, bis das gewünschte Ergebnis erzielt ist.