Die beiden Beschriebe, „Umgang mit dem Website-Editor“ und „wie ein Header erstellen“ , sind in diesem gemeinsamen Beitrag erläutert. Der Beschrieb „Umgang mit dem Website-Editor“ wird anhand der Beschriebung „wie ein Header erstellen“ erläutert.
Eine Website besteht aus Seiten, Beiträgen, Templates, Template-Teilen, Vorlagen, Medien. Diese bestehen wiederum aus Block-Elementen. Diese Block-Elemente werden mit dem Website-Editor hinzugefügt/bearbeitet und es wird so eine Website aufgebaut/gestaltet. Im Website-Editor von WordPress wir jeder Absatz, Bild, Video, Überschrift, usw. als „Block-Element“ des Inhalts dargestellt. Jeder Block wird mit einem eigenen Set von Bedienelementen geliefert, um Dinge wie Farbe, Breite und Ausrichtung zu ändern. Diese werden automatisch ein- und ausgeblendet, wenn du einen Block ausgewählt hast. Alle dir zur Verfügung stehenden Blöcke befinden sich in der Block-Bibliothek, zu finden über das Plus-Symbol:
create Header/Footer
Die folgende Beschreibung kann Analog auch für den Footer angewendet werden.
Als erstes klicken wir im Dashboard auf Design>Website-Editor dann Vorlagen dann Header, wir wählen eine der Vorlagen aus, indem wir auf die 3 Punkte darunter klicken und wählen dort Duplizieren. Wir wählen den Namen HeaderPit und wählen den Bereich Header und Duplizieren. So haben wir eine neue Header-Vorlage, mit Name HeaderPit erstellt. Diese Vorlage rufen wir jetzt zur Bearbeitung auf: Design>Website-Editor>Vorlagen>Header>HeaderPit. Alle zur Verfügung stehenden Block-Elemente sind im 2-ten Icon(Plus-Symbol mit blauem Hintergrund) zu finden. Mit dem 5-ten Icon (3 Striche mit scharzem Hintergrund) wird der Element-Baum gelistet. Das 14-te Icon(die 3 übereinander liegenden schwarze Punkte) sind Optionen.
Die 4 Bereiche des Website-Editor: Oben(Werkzeugleiste) mit den 14 Menüpunkte und darunter die 3 Bereiche Links(Block-Elementbaum), Center(Inhalt) und Rechts(Seitenleiste, für die Eigenschaften/Stile der Blockelemente).
Was wir gerade bearbeiten verrät uns der erste Titel im Website-Editor-Bereich-Rechts mit dem Titel Block ganz Rechts, 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 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 mit den 3 Strichen und der Blockelementbaum wird 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.
Menü-Zeilen des Website-Editor(Werkzeugleiste->14 Punkte):
- zurück zum Dashboard(W- oder WebSite-Logo)
- Einfügeschaltfläche für Blöcke, Vorlagen, Medien
- Rückgänig letzter Befehl
- Wiederholen letzter Befehl
- Block-Elementbaum anzeigen
- Gutenverse-Library
- Befehlspalette des ausgewählten Blockelement
- Anzeigen (Desktop, Tablet, Mobile)
- Anzeige des Inhalts verkleineren
- Stile (global for Gutenverse)
- Stile (global)
- Einstellungen (global)
- Speichern der getätigten Änderungen
- Optionen(Obere Werkzeugleiste muss aktiviert sein, damit die Befehlszeile 7 in der Menüzeile erscheint)
Eigenschaften oder Stile(Rechts)
- Anordnung links ausrichten
- Richtung Horizontal
- Textfarbe=Orange, Hintergrundfarbe=Schwarz
- Bildbreite 120px
- Stile Abgerundet, Breite Anpassen
- Anordnung links, Richtung vertikal
- Schrift Beiruti, Grösse Mittel, Schreibweise keine
- Bildbreite 120px
- Bildbreite 120px
- Bildbreite 120px
- Bildbreite 120px
- Elemente rechts ausrichten
- Menü wählen das mit Menübuilder erstellt wurde
- Gutenverse-Menübuilder zu finden im Dashboard Design/Menüs
- Text-Farbe orange
Im Bildteil links sehen sie alle 10 Blöcke des Headers. Dieser Bildteil wird auf und zu gemacht durch klick auf das 5-te Icon(die drei Striche). Klickt man in diesem Bildteil auf einen Block, z.Beisp. Zeile, dann können die Einstellungen und Stile von diesem Block im Bildteil rechts bearbeitet werden. Die Einstellungen(Zahnradsymbol) + Stile(schwarzweises-Kreissymbol) die im Bildteil ganz rechts zu sehen sind, dadzu auf Block im rechten Bildteil klicken.
Als erstes navigieren wir im Dashboard zu Design/Website-Editor dann Vorlagen dann Header. Dann zu den 3 Punkten und wählen dort Duplizieren. Wir wählen den Namen HeaderPit und wählen den Bereich Header und Duplizieren.).
Im Bildteil rechts werden die Einstellungen/Stile zu den 10 Header-Blockelemente erläutert. Blockelemente haben Eigenschaften und Stile, die verändert werden können(Farbe, Grösse, Abstände, usw.). Diese veränderbaren Eigenschaften/Stile passen wir so an, bis der Header unserer Vorstellung entspricht.
8-tung, die Blockelemente können noch anpassbare Eignenschaften in der Menüzeile, Punkt 7 der Befehlspalette, des gewähltem Blockelement haben, wie z.B. der Cover-Block(Inhaltsposition) oder der Gutenverseblock IconList-Block(Iconbild-Wahl).
Schreibe einen Kommentar