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 Seite

    1. Settings–>General

    erreichbar via Dashboard, klick auf Einstellungen>Allgemein

    Tagline (Untertitel)smart+nice+strong
    Site Icon100%(orange/black)
    Site LanguageDeutsch
    TimezoneZurich
    Date FormatY.m.d (2024.11.26)
    Time FormatH: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.

    GutenversePage-Builder for Block-Elements
    -Der Menü-Builder ist für mehr visuelle Menüanpassungen
    -ein wichtiger Block ist der Icon-List Block
    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.

  • Admin Website-Editor + create Header/Footer

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

    1. zurück zum Dashboard(W- oder WebSite-Logo)
    2. Einfügeschaltfläche für Blöcke, Vorlagen, Medien
    3. Rückgänig letzter Befehl
    4. Wiederholen letzter Befehl
    5. Block-Elementbaum anzeigen
    6. Gutenverse-Library
    7. Befehlspalette des ausgewählten Blockelement
    8. Anzeigen (Desktop, Tablet, Mobile)
    9. Anzeige des Inhalts verkleineren
    10. Stile (global for Gutenverse)
    11. Stile (global)
    12. Einstellungen (global)
    13. Speichern der getätigten Änderungen
    14. 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).

  • 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

    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 einen lokalen Umgebung. Ü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 wird gezeigt wie man WordPress verwendet um Websites zu erstellen. Aktuell verwendet WordPress Blöcke, auf die mit dem Website-Editor und dem Block-Editor zugegriffen werden, um so Schrittweise eine WebSite zu bearbeiten:

    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.

    • 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.
    • Website-Editor im Menü Design zur Anpassung des Themes (Navigation, Stile, Seiten, Templates, Vorlagen). In den Vorlagen sind die wichtigenTemplate-Teile Header und Footer enthalten.

    Der Website-Editor startet im Browse-Modus, in dem man sich in den folgenden, wichtigsten fünf Design-Bereichen umschauen kann:

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

    Linkliste: wie „neue Website“ erstellen: