Please choose your platform (Mac, Windows oder Linux)
Please choose your organization (Other)
fiktive Work Email (gugus@mail)
GET IT NOW! anklicken (und schon beginnt der Download)
Exportieren Sie eine Site
Öffnen Sie zunächst „Lokal“ und stellen Sie sicher, dass die Site, die Sie exportieren möchten, ausgeführt wird. Klicken Sie anschließend mit der rechten Maustaste auf die Site und wählen Sie „Exportieren“. Befolgen Sie die Anweisungen, um die Website an einem Ort zu speichern, an dem Sie sie finden können, z. B. auf dem Desktop! Wird zum Beisp. die WebSite mit dem Namen snsWebDesign exportiert wird diese Seite als snsWebDesign.zip gesichert. Diese kann jederzeit importiert und unter neuem Name abgelegt werden.
Update von Local
Unter Linux-Ubuntu kann die neue Version einfach herunter geladen und installiert werden. Bisher hat das ohne Probleme funktioniert. Sicherheits halber ist es aber ratsam wichtige Websites zu sichern(exportieren).
Um WebSites erstellen zu können verwenden wir WordPress. Dazu installieren wir WordPress in einer lokalen Umgebung und können so in aller Ruhe, ohne Stress, alles kennen lernen. Eine solche lokale Umgebung nennt sich Local. Local übernimmt für uns die Installation von WordPress, Datenbank, Datenbankserver und einem Webserver. Mit diesen Werkzeugen sind wir in der Lage eine Website zu erstellen/bearbeiten, ohne auch nur 1 Cent zu investieren. Mit Local können wir praktisch unbegrenzt viele WebSites erstellen. In Local können wir eine WebSite starten und bearbeiten, als Frontend(anzeigen) oder Backend(bearbeiten), eine neue WebSite erstellen, oder eine bestehende WebSite Exportieren als zip. Diese zip-Datei dient sowohl als Sicherung, als auch einer Möglichkeit von dieser WebSite eine neue WebSite zu erstellen und diese dann anzupassen.
neue Leere Website erstellen
Nach der Installation oder nach dem starten der Applikation Local, sehen sie das Bild mit dem weissenPlus-Button auf das geklickt werden muss, um eine neue Website zu erstellen. Hat es schon Websites, werden diese gelistet, durch klick auf eine gelistete Website wird diese im Frontend(Webiste anzeigen->Button Open site) oder Backend (Website bearbeiten->Button WP Admin) ausgeführt.
Ablauf neue Website
Die ersten 5 Bilder domumentieren den Ablauf, neue WebSite erstellen. Bild 6 ist schon im Admin-Bereich(Backend) des Dashboard. Zuerst muss aber die Applikation Local gestartet werden, dann diesem Ablauf folgen:
klick Create a new site->Continue
WebSite-Titel eingeben, z.B. snsDogTraining->Continue
Serverumgeb. bestimmen->Continue
Adminkonto für WordPress User + PWD + eMail->Add Site
im letzten Bild(Bild5) kann eine WebSite gestartet oder gestopt werden. Das kann erreicht werden durch klick auf Start site(startet auch den Datenbank-Server) oder Stop site. 8-tung, klickt man auf One-klick admin wird autom. der eben gewählte user eingesetzt. Danach auf WP Admin klicken und es wird ein Web-Browser gestartet und man landet im Backend imDashboard(Bild 6)–>WP Admin
Bild 1-5: neue Website erstellen. Bild 6: Admin/Dashboard
1. Create new site–>Continue
2. Websitetitel admin–>Continue
3. Server admin–>Continue
4. User+PWD+eMail–>Add Site
5. WebSite start–>WP Admin
6. Dashboard
wichtige Anpassungen für eine neue Seite
1. Settings–>General
erreichbar via Dashboard, klick auf Einstellungen>Allgemein
Tagline (Untertitel)
smart+nice+strong
Site Icon
100%(orange/black)
Site Language
Deutsch
Timezone
Zurich
Date Format
Y.m.d (2024.11.26)
Time Format
H:i (16:21)
2. Plugins installieren
erreichbar via Dashboard, klick auf Plugins>neues Plugin hinzufügen
Die beiden unten aufgeführten Plugins sind gratis und erweitern WordPress um einen Menü-Builder, einen From-Builder, einen Popup-Builder und um weitere, im Moment, 31-Blöcke.
Gutenverse
Page-Builder for Block-Elements -Der Menü-Builder ist für mehr visuelle Menüanpassungen -ein wichtiger Block ist der Icon-List Block
Bildgrössen: HD 1280×720, FHD 1920×1280, 4K 3840×2160
Optionen Auflösung: nur wichtig fürs drucken
Option Interpolation: hat Einfluss auf Bildqualität
Bild zuschneiden wie mit Schere:
Werkzeug Zuschneiden, Bildbereich durch aufziehen wählen. Return vollzieht Beschnitt.
Bild vereinen mehrere Bilder zu einem verschmelzen. Steps:
Bildgrösse/Leinwandgrösse anhand aller zu vereinenden Bilder eruieren: das grösste Bild ist 523x123px, also wählen wir 570x300px
Hintergrund-Farbe wie auf der Webseite verwenden(häufig weiss, so verschmelzt weiss in weiss).
folgende Steps können vollzogen werden: 1. Datei>Neu 300x570px Füllung:weiss 2. Dateien DashboardLeft.png + DBbeiträge.png hineinziehen + richtig platzieren 3. Text Werkzeug aufziehen und bearbeiten 4. ist alles erledigt, dann in webp-Datei Exportieren: Umschalt + Strg + E
Bild Exportieren häufig für eine WebSite:
via Menü mit Datei>Exportieren nach… oder Umschalt + Strg + E so wird ein Datei-Speicher-Dialog aufgerufen in Name „Dateiname“.webp
Willkommen zu Gimp, dem gratis Werkzeug, zur Bearbeitung von Bildern. Bilder sind der Dreh- und Angelpunkt von Gimp. In Gimp muss die Benutzeroberfläche mit seinen Werkzeugen verstanden werden. Aus der Benutzeroberfläche, mit seinen Werkzeugen, steuern wir alle Bild-Anpassungen. Eine wichtige Bild-Anapassung ist, das Bild, mit einer verlustfreien komprimierung, möglichst klein zu erhalten, was schnellere Ladezeiten im Internet bewirkt. Dies wird mit dem Dateiformat webp von Google erreicht. Das Dokument, das Sie gerade anschauen, ist der erste Beitrag einer Artikelserie(Blog, Gimp), welches zeigt, wie Gimp installiiert und angewendet wird. Um sofort loslegen zu können installieren wir Gimp in einer lokalen Umgebung. Über folgenden Link gelangen sie auf die Download-Seite für alle gängigen Betriebssysteme. Laden sie die entsprechende Datei herunter und führen sie die Installation durck Doppelklick auf diese Datei aus, folgen sie den Installations-Anweisungen:
Nach der Installation einfach die entsprechend Applikation, aus dem verwendeten Betriebssystem(Abkürzung: BS oder OS), starten.
Gimp: Benutzeroberfläche
Auf der linken Seite ist der Werkzeugkasten mit den 39 Werkzeugen, dazu gehören auf die direkt darunterliegenden beiden Icons Farbwahl + aktives Bild. Unterhalb dem Werkzeugkasten ist der DialogWerkzeugeinstellungen angedockt. In der Mitte ist das zu bearbeitende Bild, das Bildfenster (Inhaltbereich), welches nötig ist, um in Gimp etwas Sinnvolles zu machen. Rechts sind weitere andockbare Dialoge wie Ebenen, Kanäle, Pfade. Über all dem, also darüber finden wir das Gimp-Menü: Datei, Bearbeiten, Auswahl, Ansicht, Bild, Ebene, Farben, Werkzeuge, Filter, Fenster, Hilfe
Die andockbaren Dialoge können über das Menü Fensterandockbare Dialoge gewählt und durch Drag+Drop verschoben und angedockt werden. Entfernen kann man einen andockbare Dialog indem durch Drag+Drop der Dialog in den Inhaltbereich gezogen wird und dort via X-Icon entfernen.
Der Werkzeugkasten, das Gimp-Herzstück, beinhaltet 39 Werkzeuge. Unterhalb dieser Werkezuge ist der Bereich Vordergrund-/Hintergrund-Farbe, um Farbgebungen zu bestimmen. Rechts davon ist das aktive Bild.
Die 39 Werkzeuge:
Verschieben
Ausrichten
Rechteckige Auswahl
Eliptische Auswahl
Freie Auswahl
Magische Schere
Vordergrundauswahl
Zauberstab
nach Farbe auswählen
Zuschneiden
vereinh. Transformation
Drehen
Skalieren
Scheren
Spiegeln
Perspektive
3D-Transformation
Ankertransformation
Warptransformation
Käfigtransformation
Füllen
Farbverlauf
Pinsel
Stift
Sprühpisole
Tinte
MyPaint Pinsel
Radierer
Klonen
perspektifisch Klonen
Heilen
Verschmieren
weichzeichnen/schärfen
abwedeln/Nachbelicht
Pfade
Text
Farbpipette
Massband
Vergrössern
Gimp: Datei>Neu
Gimp kennenlern Tutorial
Das vorliegende Tutorial beschreibt folgende wichtigen Gimp-Grundlagen:
Benutzeroberfläche
die 2 Werkzeuge Ebenen + Text (von 39 Werkz.)
Dialoge
mit Fotos(Dateien) arbeiten(Input + Output)
Leinwandgrösse
speichern
Dazu verwenden wir 2 Dateien, die im folgenden Beschrieb heruntergeladen und frei verwendet werden dürfen. Wird in Gimp eine Datei geöffnet wird anhand dieser Datei(Bild-Grösse) die Leinwand-Grösse(Breite + Höhe) und automatisch, eine neue Ebene mit dem Dateiname als Ebenen-Name erstellt. Es wird erläutert, wie mit Ebenen gearbeitet werden kann. Ich habe meinen Laptop so eingestellt, dass wenn ich einen Doppelklick auf eine png-Datei(mein PrinsScreen Format) mache, automatisch Gimp geöffnet wird. In Linux wird dies über einen Dateimanager(z.B. Thunar), via RechtsKlick auf eine png-Datei Öffnen mit>Strandardanwendung setzen gemacht.
Wir können in Gimp über das Menü durch klick auf Datei>Neu ein neues Bild mit weissem Hintergrund erstellen, dort die Breite(300px) und Höhe(570px), sowie die Füllung weiss(Vordergrundfarbe->weiss) bestimmen. Das führt dazu, dass wir automatisch eine neue Ebene erhalten(Ebene Hintergrund autom. Fett markiert). Dann ziehen(Drag and Drop) wir die Datei, DashboardLeft.png, aus einem Dateimanger, in das Bildfenster von Gimp, so bekommen wir eine weitere Ebene. Dasselbe machen wir mit der Datei DBbeiträge.png, welches zur 3-ten Ebene führt. Nun fügen wir noch eine 4-te Ebene, eineTextebene hinzu und zwar über das Text-Werkzeug. Das alles führt zu dem Bild das unterhalb abgebildet ist:
Gimp: Grundlagen/Ebenen
Wird im vorliegenden Fall die Hintergrund-Ebene hoch gezogen(Drag+Drop), führt das dazu, dass die darunterliegende Ebene verdeckt wird. Jede Ebene ist eine Folie, die die darunter liegende Ebene(Folie/Schicht) überdeckt. Durch das Werkzeug Verschieben(1-tes Werkzeug) und markieren der entsprechnde Ebene kann eine Ebene verschoben werden. Um eine Textebene anzulegen ist das Werkzeug Text zu wählen, dies führt dazu, dass in den Werkzeugeinstellung Anpassungen für diesen Text vorgenommen werden müssen/sollten (Grösse, Schrift, Ausrichtung, Texteditor benutzen, etc.). Dann ziehen wir den Bereich auf, in den der Text hinkommen soll und geben den Text im Texteditor ein. Ist das ganze zu unserer Zufriedenheit gemacht, speichern wir das ganze als wieder verwendbare Datei als xcf(Gimp Dateiformat für Bildanpassungen) ab. Wollen wir die Datei im Web verwenden, dann exportieren wir die Datei als webp(vorteilhaftes Dateiformat für das Internet).
Funktion
Shortcuts
Beschreibung
Speichern unter
Umschalt+Strg+S
als xcf speichern (Gimp-Dateiformat)
Speichern…
Strg+S
bestehende Datei speichern
Exportieren nach
Umschalt+Strg+E
als webp speichern, als Standard setzen: –Einstellungen>Import und Export von Bildern –Vorteile: kleiner, mit Transparenz + Animation
Um eine neue Ebene in GIMP zu erstellen, stehen mindestens zwei Möglichkeiten zur Verfügung: Über das Menü(Datei>Neu), oder über den Ebenen-Dialog.
Ebenen-Aussagen:
Ebenen sind wahrscheinlich das wichtigste Werkzeug von Gimp.
Ebenen dienen dazu, extrem komplexe, Grafiken zu erstellen.
Ebenen sind übereinander liegende Schichten/Folien, wobei die obere die untere überdeckt.
Die unterste Ebene im Bild ist auch die unterste Ebene in der Schicht-Hierarchie.
Ebenen können per Drag+Drop verschoben werden.
Ebenen können ein- und ausgeblendet werden.
Ebenen haben einen Hintergrunde (eine Farbe oder Transparenz).
Transparenter Hintergrund bedeutet, dass man hindurch sieht, man sieht die darunterliegende Ebene.
Der Alphakanal(Schachbrettmuster) kann als eigene Ebene verstanden werden, die die durchsichtigkeit bestimmt(0 undurch sichtig bis 255 durchsichtig
Der Alphakanal ist genau so gross wie das dazugehörige Bild
ist kein Alphakanal vorhanden, wird beim löschen oder radieren, die voreingestellt Hintergrundfarbe verwendet(meist weiss oder schwarz)
Wir können in Gimp über das Menü durch klick auf Datei>Neu ein neues Bild mit weissem Hintergrund erstellen, dort die Breite(300px) und Höhe(570px), sowie die Füllung weiss(Vordergrundfarbe->weiss) bestimmen. Das führt dazu, dass wir automatisch eine neue Ebene erhalten(Ebene Hintergrund autom. Fett markiert). Dann ziehen(Drag and Drop) wir die Datei, DashboardLeft.png, aus einem Dateimanger, in das Bildfenster von Gimp, so bekommen wir eine weitere Ebene. Dasselbe machen wir mit der Datei DBbeiträge.png, welches zur 3-ten Ebene führt. Nun fügen wir noch eine 4-te Ebene, eineTextebene hinzu und zwar über das Text-Werkzeug. Das alles führt zu dem Bild das unterhalb abgebildet ist:
One
Two
Three
Four
Wird im vorliegenden Fall die Hintergrund-Ebene hoch gezogen(Drag+Drop), führt das dazu, dass die darunterliegende Ebene verdeckt wird. Jede Ebene ist eine Folie, die die darunter liegende Ebene(Folie/Schicht) überdeckt. Durch das Werkzeug Verschieben(1-tes Werkzeug) und markieren der entspr. Ebene kann eine Ebene eben verschoben werden. Um eine Textebene anzulegen ist das Werkzeug Text zu wählen, dies führt dazu, dass in den Werkzeugeinstellung Anpassungen für diesen Text vorgenommen werden müssen/sollten (Grösse, Schrift, Ausrichtung, Texteditor benutzen, etc.). Dann ziehen wir den Bereich auf, indem der Text zum liegen kommen soll und geben den Text im Texteditor ein. Ist das ganze zu unserer Zufriedenheit gemacht, speichern wir das ganze als wieder verwendbare Datei als xcf(Gimp Dateiformat für Bildanpassungen) ab. Wollen wir die Datei im Web verwenden, dann exportieren wir die Datei als webp(vorteilhaftes Dateiformat für das Internet).
Funktion
Shortcuts
Beschreibung
Speichern unter
Umschalt+Strg+S
als xcf speichern
Speichern…
Strg+S
bestehende Datei speichern
Exportieren nach
Umschalt+Strg+E
als webp speichern, als Standard setzen: –Einstellungen>Import und Export von Bildern –Vorteile: kleiner, mit Transparenz + Animation
Das Dashboard ist die Administrative Schaltfläche für die meisten Anpassungen und Informationen von einer Website. Vom Dashboard aus können Sie schnell auf die Inhalte Ihrer Website zugreifen und/oder Einblicke in andere Bereiche der WordPress-Community erhalten. Das Dashboard präsentiert Informationen von 5 Standard-Widgets: „Zustand der Website“, „Auf einen Blick“, Aktivität, „Schneller Entwurf“ und Willkommen. Alle Dashboard-Verwaltungs-Bildschirme haben eine Toolbar(obere Menüzeile), eine Hauptnavigation, einen Arbeitsbereich und einen Fussbereich.
1: Die obere, waagrechte, Menuzeile enthält 7 Steuerungs-Bereiche: das W, das Home, das Kommentar, das Neu, das Gutenvers, das GutenversPRO und ganz rechts das Benutzer.
2: Die linke Seite enthält die Hauptnavigation. Die wichtigsten sind: Beiträge, Medien, Seiten, Design, Plugins, Einstellungen
3-5: Enthalten weitere Steuerungen.
3-3: Sind alle Widgets, die mittels der Switch-Steuerung aus- und eingeblendet werden können. Wird der Haken bei Willkommen herausgenommen, dann wird der der „Willkommen bei WordPress!“ ausgeblendet.
4: Das ist der Willkommens-Bildschirm, mit den wichtigsten Navigationen: neue Seite, Website-Editor und Stile bearbeiten.
5: Das sind die weiteren Widgets, welche auf- und zugeklappt und verschoben werden können.
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:
Block-Bibliothek
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)
Zeile: linksbündig für alle Header-Blockelemente
Anordnung links ausrichten
Richtung Horizontal
Textfarbe=Orange, Hintergrundfarbe=Schwarz
Website-Logo: Logo (Lion-Bild aus Mediathek)
Bildbreite 120px
Stile Abgerundet, Breite Anpassen
Stapel: Titel, Untertitel, Tel., eMail
Anordnung links, Richtung vertikal
Website-Titel
Schrift Beiruti, Grösse Mittel, Schreibweise keine
Website-Untertitel
Bildbreite 120px
Icon List
Bildbreite 120px
Icon List Item Telefonnummer
Bildbreite 120px
Icon List Item eMail-Adresse
Bildbreite 120px
Zeile: rechtsbündig für Navigation
Elemente rechts ausrichten
Nav Menu to-do-Liste WordPress-Websiteverwaltung
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).
Die zu mutierende Seite oder Beitrag auswählen, mit Dashboard/Seite oder Dashboard/Seite. Als erstes wählen wir das Blockelement Spalten mit einem Layout von 66.66%(Spalte1) zu 33.33%(Spalte2). In der rechten Spalte platzieren wir ein Bild. In der linken Spalte platzieren wir einen Absatz mit Text.
Die zu mutierenden Templates erreichen wir aus dem Dashboarg mit klick auf Design > Website-Editor dann klick auf Templates dann klick auf Neues Template hinzufügen.
Je nach dem was angepasst werden soll, muss das ensprechende Feature gewählt werden. Wenn wir einen Beitrag ändern wollen, dann muss das Einzelnes Element: Beitrag gewählt werden.
Grundsätzlich haben wir 2 Möglichkeiten, um Menüs für die Navigation zu erstellen. Einerseits über das Gutenverse-Blockelement „Nav Menu“ oder über das Standard-Blockelement Navigation. Ich habe mich für das Standard-Blockelement Navigation entschieden. Das „Nav Menu“-Blockelement hat bessere/mehr Optionen für Anpassungen, aber der grosse Nachteil ist, dass ich keine Möglichkeit für eine vertikale Navigation gefunden habe.
Eine weitere Möglichkeit ist eine Linkmarkierungen. Hiermit kann ein Text/Bild/etc. markiert und mit einen Link verknüpfen werden. Fährt man mit der Maus über diese Markierung wird ein Handsymbol für einen Link-Hinweis angezeigt, mit einem klick springt man zu diesem Link. Mit dieser Methode können die Links vielfältiger gestaltet werden. Zum Beisp. ein Icon hinzufügen. Diese Methode wenden wir im Footer an.
Nameskonventionen für Menüs:
Namensteil
Möglichkeiten
Beschreibung
Beispiele
Art
Mnu
Mnu für Menü
Element
Head, Foot oder _Tätigkeit_
Tätigkeit zwischen Unterstrichen
Mnu_HowToWebsite_Verti
Ort
Left, Center oder Right
selbsterkärend
Mnu_HeadCent_Horiz Mnu_HeadRight_Vert
Orientierung
Horizontal oder Vertical
selbsterkärend
Mnu_FootCent_Horiz Mnu_FootCent_Vert
Menü für admin erreichbar über: Dashboard>Design>Website-Editor>Navigation
Wenn wir auf das Bleistift-Icon klicken gelangen wir in den Bearbeitungs-Bereich um den Link anzupassen, wie: Text, Link und „in einem neuen Tab öffnen“.
