Familiy

smart+nice+strong

+41 76 720 61 83
peter.mast@gmail.com

wichtige Links:

Kategorie: newWebsite

wie eine neue Website erstellen

  • Website in lokaler Umgebung

    Download von Local

    Beim Download werden diverse Daten verlangt, Pflicht ist aber nur die E-Mail.
    Download und Infos über das Programm:

    … https://localwp.com

    1. DOWNLOAD FOR FREE anklicken
    2. Please choose your platform (Mac, Windows oder Linux)
    3. Please choose your organization (Other)
    4. fiktive Work Email (gugus@mail)
    5. 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 weissen Plus-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:

    1. klick Create a new site->Continue
    2. WebSite-Titel eingeben, z.B. snsDogTraining->Continue
    3. Serverumgeb. bestimmen->Continue
    4. Adminkonto für WordPress User + PWD + eMail->Add Site
    5. 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
    1. Create new site–>Continue

    2. Websitetitel admin-->Continue
    2. Websitetitel admin–>Continue

    3. Server admin-->Continue
    3. Server admin–>Continue

    4. User+PWD+eMail-->Add Site
    4. User+PWD+eMail–>Add Site

    5. WebSite start-->WP Admin
    5. WebSite start–>WP Admin

    6. Dashboard
    6. Dashboard

    wichtige Anpassungen für eine neue Website

    Backend-Hauptnavigation

    Einstellungen
    Einstellungen

    1. Settings / Einstellungen via Hauptnavigation des Backend

    Allgemein
    Einstellungen Allgemein (Teil1)
    Einstellungen Allgemein (Teil1)

    Titel der WebsitesnsGVfamily2
    Untertitelsmart+nice+strong
    Website-Iconeine Grafik: 512×512 Pixel gross
    WordPress-Adresse (URL)http://localhost:10009
    Administrator-E-Mail-Adressepeter.mast@gmail.com
    Mitgliedschaftjeder kann sich registrieren
    Standardrolle eines neuen BenutzersAbonnent
    Sprache der WebsiteDeutsch
    ZeitzoneZürich
    Datumsformat2025.05.22
    Zeitformat15:06
    die Woche beginnt amMonttag
    Einstellungen Allgemein (Teil2)
    Einstellungen Allgemein (Teil2)

    Schreiben
    Einstellungen Schreiben
    Einstellungen Schreiben

    Lesen
    Einstellungen Lesen
    Einstellungen Lesen

    Diskussion
    Einstellungen Diskussion (Teil1)
    Einstellungen Diskussion (Teil1)

    Einstellungen Diskussion (Teil12)
    Einstellungen Diskussion (Teil12)

    Medien
    Einstellungen Medien
    Einstellungen Medien

    Hier ist wichtig, dass die Aktivierung der Uploads nicht in monats- und jahresbasierten Ordnern organisiert wird. Das erhöht die Übersicht.

    Permalinks
    Einstellungen Permalinks
    Einstellungen Permalinks

    Datenschutz
    Einstellungen Datenschutz (Teil1)
    Einstellungen Datenschutz (Teil1)

    Einstellungen Datenschutz (Teil2)
    Einstellungen Datenschutz (Teil2)

    2. Plugins installieren via Hauptnavigation des Backend, um WordPress zu erweitern

    Die beiden aufgeführten Plugins von Gutenverse sind gratis und erweitern WordPress um einen Menü-Builder für klassiche Themes, einen From-Builder, einen Popup-Builder und um weitere, im Moment, 50-Blöcke. Die 50 Blöcke von Gutenverse sind im Block-Inserter zu finden.

    GutenversePage-Builder for Block-Elements
    -Der Menü-Builder ist veraltet, da nur für klassische Themes
    -ein wichtiger Block ist der Icon-List Block
    -Nav Menu Block ist ausgeblendet, da veraltet (nur klassisch)
    Gutenverse FormForm-Builder: contacts, booking, payments

  • Umgang mit dem Dashboard

    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.

  • create Header/Footer mit Site-Editor

    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):

    Block-Inserter/Bibliothek

    Alle dir zur Verfügung stehenden Blöcke befinden sich in der Block-Bibliothek, zu finden über das blaue Plus-Symbol

    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.

    Site-Editor für Headerbearbeitung
    Site-Editor für Headerbearbeitung

    Eigenschaften/Stile für Site- oder Block-Element

    Zeile: für alle Header-Blockelemente
    • Anordnung->links ausrichten
    • Richtung->Horizontal
    • Textfarbe->Orange
    • Hintergrundfarbe->Schwarz
    Website-Logo: Lion-Bild aus Mediathek
    • Bildbreite->110px
    • Stile->Abgerundet
    • Breite->Anpassen
    Stapel: Titel, Untertitel, Tel, Mail
    • Anordnung->links
    • Richtung->vertikal
    • kleiner Innenabstand links für alle
    Website-Titel
    • Titel auf Homepage verlinken
    • Schrift->Standard
    • Schriftgrösse->Klein
    Website-Untertitel
    • Schrift->Standard
    • Schriftgrösse->Klein
    Icon List
    • Icon-Style Color->orange
    • Text-Style Color->schwarz
    Icon List Item Telefon
    • Telefon-Icon
    • +41 76 999 999
    Icon List Item Mail-Adresse
    • Mail-Icon
    • first.last@gmail.com
    Zeile: für horizontale Navigation
    • Anordnung->links ausrichten Richtung->Horizontal
    • Richtung->Horizontal
    Navigation mit Menü Mnu_HeadCent_Horiz
    • Anordnung->links ausrichten Richtung->Horizontal
    • Breite->Wachsen
    • Blockabstände->Sehr klein
    Stapel: linkssbündig für vertikale Navigation
    • Anordnung->rechts ausrichten Richtung->Vertical
    Absatz mit Text->Wichtige Links
    • Schriftgrösse->Mittel
    • Höhe->Anpassen
    Navigation mit Menü Mnu_HeadRight_Vert
    • Anordnung->rechts ausrichten Richtung->Vertical
    • Breite->Anpassen
    • Blockabstände->Keine

    Im Bildteil links, Element-Baum, sehen sie die Blöcke des Headers:

    • Zeile linksbündig, die alle weiteren Blöcke aufnimmt wie:
      • Website-Logo
      • Stapel Vertical mit:
        • Website-Tilel
        • Website-Untertilel
        • Icon List für Telefon und Mailadresse
      • Zeile linkstsbündig mit:
        • Navigation mit zugewiesenem horizontalem Linkmenü
      • Stapel rechtsbündig mit:
        • Absatz als Titel für die folgenden Links
        • Navigation mit zugewiesenem vertikalem Linkmenü

    Dieser Element-Baum wird auf und zu gemacht durch klick auf das 4-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 (Optionen) eingesehen und bearbeitet werden.
    Die Einstellungen(Zahnradsymbol) + Stile(schwarz weises-Kreissymbol) die im Bildteil ganz rechts zu sehen sind, werden durch klick auf Block im rechten Bildteil sichtbar. Um den Header zu gestalten ist wie folgt vorzugehen:

    Als erstes navigieren wir im Backend zu Design>Editor dann Vorlagen dann Header. Dann zu den 3 Punkten und wählen dort Duplizieren. Wir wählen den Namen HeaderSpez und stellen den Bereich Header ein und Duplizieren das ganze.

    Im Bildteil rechts, Optionen, für die Gestaltung eines Block-Element oder Website-Element in Form von Einstelllungen(Zahnrad) und Stile(Kreis halb schwarz). 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. Nicht alle Blöcke haben Stile, aber alle Blöcke haben mindestens Eigenschaften.
    8-tung, die Blockelemente können noch anpassbare Eigenschaften in der Menüzeile, Punkt 6der Befehlspalette, des gewähltem Blockelement haben, wie z.B. der Cover-Block(Inhaltsposition) oder der Gutenverseblock Icon List-Block(Wahl eines Iconbild).

  • Seiten und Beiträge mit Inhalt füllen

    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.

  • Templates anpassen: Header, Footer, …

    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.

    Für alle Beiträge wählen wir auch Alle Beiträge.

    Dort finden wir, Stand heute, 8 Templates:

    1 Template für Suche

    3 Templates für Beiträge

    4 Templates für Seiten

  • Navi-Menüs erstellen

    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:

    NamensteilMöglichkeitenBeschreibungBeispiele
    ArtMnuMnu für Menü
    ElementHead, Foot oder _Tätigkeit_Tätigkeit zwischen UnterstrichenMnu_HowToWebsite_Verti
    OrtLeft, Center oder RightselbsterkärendMnu_HeadCent_Horiz
    Mnu_HeadRight_Vert
    OrientierungHorizontal oder VerticalselbsterkärendMnu_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“.

  • ein paar leere Seiten/Beiträge

    Ein neuer Beitrag, eine neue Seite, wird aus dem Dashboard durch klick auf:

    • Beiträge > Neuen Beitrag erstellen
    • Seiten > Neue Seite erstellen

    Den Titel eingeben/erfassen und Button Veröffentlichen klicken. Danach den nächsten Beitrag oder Seite auf dieselbe Weise erstellen.

  • Stile für WebSite anpassen

    Ein Weg, die Stile einer Website anzupassen, ist mittels Website-Editor(siehe Bild). Den Website-Editor erreichen wir über das Dashboard durch klick auf Design>Website-Editor.

    Wir können die folgenden 5 Stile bearbeiten: Typografie, Farben, Hintergrund, Schatten, Layout

    Bild Stile bearbeiten

    Layout

    Für Layout wählen wir eine Inhaltsbreite und „Weite Breite“ von 1920px. Innenabstand unten und oben 0px und links und rechts 20px. Für die Block-Abstände wählen wir 1 rem.

    Exkurs rem=r(wie root)+em: Die Einheit Pixel ist nicht flexibel. 16 Pixel sind immer 16 Pixel, ganz gleich, was um sie herum passiert.
    Wenn jemand in seinem Browser die Schriftgröße verändert, weil er alles ein bisschen größer sehen möchte, reagieren Texte, bei denen die Schriftgröße in Pixel angegeben ist, nicht auf diese Einstellung. Ist die Schriftgröße in em oder rem angegeben, skaliert der Text. Die Einheit rem bezieht sich auf das html-Root-Element, em bezieht sich auf den nächsthöheren Container.

    Farben

    Für die Farben wählen wir die Palette Standard. Für die individuellen Farben nehmen wir:
    ORANGE=#FFA500
    GREEN=#008000
    RED=#FF0000
    BLUE=#0000FF

    Typografie

    Für die Typografie wählen wir die 3-te von 8 Varianten: Fira Code(1 Variante) & Vollkorn(2 Varianten).

  • WordPress das gratis WebSite-Tool

    WordPress, das gratis WebSite-Tool

    Willkommen zu WordPress, dem gratis Werkzeug, zur Erstellung einer WebSite. Das Dokument, das Sie gerade anschauen, ist der erste Beitrag einer Artikelserie(Blog), welche zeigt, wie WordPress installiiert und eine Website von Grundauf, Schritt für Schritt, erstellt wird. Um sofort loslegen zu können installieren wir WordPress in eine lokale Umgebung inklusive Datenbank und Webserver. Über folgenden Link gelangen sie in die Beschreibung zur lokalen Installation: WordPress-in-lokaler-Umgebung

    Die lokale Umgebung hat die Vorteile, dass alles gratis und nichts Online ist und so auch keine rechtlichen Konsequenzen zu fürchten sind. Man kann alles in Ruhe testen. – Ist WordPress in einer lokalen Umgebung installiert, beginnen wir eine Website aufzubauen. Um eine Website zu erstellen benötigen wir ein Thema, um welches wir die WebSite aufbauen. Unser Thema ist eine Hundeschule in welcher Hunde ganz ohne „goodeli“ und ohne Leine erzogen werden sollen. Unsere Website soll snsDogTraining heissen. Unser Konzept nach der wir die WebSite aufbauen ist folgedes:

    Unser Website Grobkonzept:

    Name:snsDogTraining
    Domain:snsDogTraining.ch
    Art:Verkaufswebsite
    Ziel:Umsatz, Klicks
    Vorbild:https://marc-welti.ch/ (Marc Welti – Hundetraining)
    Inhalt (Seiten/Beiträge):Start, Leistungen, Blog, Kontakt, Events, Über uns
    Stil:Modern, Klassisch, Plakativ, Flach, Zurückhaltend
    Schrift:Georgia, Palatino Linotype, Times New Roman, Arial, Comic Sans MS, Impact, Lucida Sans Unicode, Tahoma, Trebuchet MS, Verdana, Courier New, Lucida Console
    Farbe:Schwarz, Orange, Weiss, Grün, Rot, Blau
    Logo:weisser Hund mit weissem Schriftzug auf schwarzem Hintergrund
    Favicon:Hintergrund: Schwarz, Orangekreis mit schwarzem Text 100%

    In den folgenden Beiträgen, Menüpunkte 01-09 und dem WordPress Lexikon, wird gezeigt, wie das moderne WordPress Blöcke verwendet, um Websites zu erstellen. In Seiten und Beiträgen wird mittels eines Editor auf Blockelemente zugegriffen und so Inhalt schrittweise in eine WebSite eingebaut. Das nennt man Full-Site-Editing(FSE), Voraussetzung dazu ist, dass ein Block-Theme aktiviert ist. Hintergrund dieser Entwicklung ist, dass viele Techniken wie Menüs, Widgets, Shortcodes, Elementes, usw. so durch Blöcke ersetzt werden. Damit kann man die gesamte Website anpassen, inklusive Header, Footer und automatisch erzeugten Seiten wie zum Beispiel einer Beitragsseite und den Archivseiten – ohne Code-Berührung – ohne Page-Builder nur mit einem der folgenden, integrierten WordPress-Editoren:

    • Block-Editor ist nur für den Inhaltsbereich der Seiten und Beiträge zuständig. Wird direkt gestartet wenn eine Seite oder ein Beitrag aufgerufen wird.
    • Site-Editor im Menü Design zur Anpassung des Themes (Stile, Navigation, Seiten, Templates, Vorlagen). In den Vorlagen sind die wichtigen Template-Teile Header und Footer enthalten.

    Der Site-Editor, erreichbar aus dem Backend via Design > Editor startet im Browse-Modus, in dem man sich in den folgenden, wichtigsten fünf Design-Bereichen umschauen kann:

    • Stile (9 Varianten: Farben, Schriften, Layout, usw.)
    • Navigation
    • Seiten
    • Templates
    • Vorlagen (mit den Template-Teilen: Header, Footer und Allgemein)

    Linkliste, wie eine „neue Website“ erstellen:

    Wichtige WordPress-Begriffe:

    WordPress Lexikon