Schulung WP
Leitfaden
Aufbau des Bildschirms
… auf Betrachterebene
- Sayhello hat dazu ein EDU Template aufgebaut. ->
Dokument von Sayhello (PDF)
… man soll uns als EDU erkennen.
- Header
– „Wo bin ich?„ – „Wohin will ich?
- Inhalt
- Bearbeitung mit Gutenberg Editor
Sidebar via Design, Widgets
- Footer.
- Verantwortlichkeiten, Mitglied werden.
- Social Icons, – Impressum und- Datenschutz

Login.
- Zugang für Admin
- Zweistufen Authentifizierung.
Reihenfolge- – I agree to these terms -> anklicken
- Benutzernamen und Passwort eingeben
- Passwort nicht im Browser speichern
- Anmelden -> anklicken

Dashboard.
- Arbeitsumgebung
Das Dashboard ist die Umgebung für den Admin …


- Zu den einzelnen Arbeitsschritten.
- „Willkommen“ -> abmelden
Arten von Inhalten
Praxistipp
– Webseite anzeigen lassen
(oben: mit der Maus auf EDU intern (hier steht EDU Dein Kanton),
danach „zur Webseite“ anklicken)
und von dort aus Beiträge, Seiten oder Veranstaltungen bearbeiten.
Beiträge
- Redaktor:
Orientierung -> Dashboard / Beiträge - Betrachter:
sieht Übersicht, neueste zuerst- Redaktor verwaltet die Übersicht als
„EDU Beiträge“ oder
Abfrageloop
- Redaktor verwaltet die Übersicht als
- für jeden Beitrag eine Beitrags-Detailseite
- Zweck
- Commuinqué
- Aktuelles (tritt mit edem neuen Beitrag mehr in den HIntergrund)
Seiten
- – Redaktor:
Übersicht / Details, Orientierung -> Dashboard / Seiten - – Betrachter:
Navigation im Hauptmenu- Verlinkungen. - Zweck:
- Beschreibungen
- Übersichten
- Grundsätze,
- Personelles
- usw.
Anlässe
- – Redaktor:
Übersicht / Details,
Orientierung -> Dashboard / Veranstaltungen - – Betrachter:
Navigation im Hauptmenu- Verlinkungen. - Zweck
- Anlässe in Kalenderform anzeigen lassen
Hinweis zu diesen Farbfeldern hier
Dieser gesamte Block ist ein
- Raster, bestehend aus 5 Covers und
- Covers mit Hintergrundfarbe in voller Deckungskraft und verschiedenen Blöcken
Besonderheiten beim Beitrag
- CH -> teilen in den Sektionen.Umgekehrt möglich.
- Doch bitte nur, wenn von Interesse für die EDU der ganzen Schweiz.
- Wichtig.- kategorisieren- Kurztext
… bei der Seite
- Aktualisierungen nicht vergessen!
- Hauptmenu, Verlinkung.
- Hierarchische Struktur.
- Pflege des Hauptmenus: siehe später.
Editor
- Gutenberg-Editor

Blockbaum
- Ein- und Ausschalten mit dem Symbol
- Block-Navigation.
- Für kombinierte Blöcke wichtig zur Orientierung.Gruppieren,Vorlage erstellen.
- Löschen, kopieren usw.
Bearbeitungsfeld
- Einige Einstellungen und Massnahmen im Symbolbalken.
Einstellungen
- Styles (Farben)
- Weitere Einstellungen je nach Blocktyp
Einen Beitrag erstellen
Neuen Beitrag aus dem Dashboard initiieren

- Einen Titel schreiben (wird 2x angezeigt)
- Überschrift (Untertitel)
- Taste ENTER
- Mit Texteingabe beginnen
- Beliebige weitere Blöcke anfügen
Elemente (Blockarten) in einem Beitrag / (einer Seite)
Es gibt
Texte
Übeschrift
Absätze
Spezielle Textblöcke
Bilder
Kombination mit Bildern
Media und Text
Cover
Buttons
Gliederung
Spalten
Raster
Beitrags- / Seitenbild
Eigenes Bild für diesen Beitrag oder allgemeindes Bild der Webseite
Kurztext und Kategorie
Arten von reinen Textblöcken
Absatz:
(Symbol) Absatz
Text eingeben wie bei Word
fett | kursiv und andere Formatierungen| verlinken | (AB) Aktionen mit dem Block
Einstellungen („Zahnredli“)
beim Absatz keine wichtigen
Stile („Halbmond“)
Farbe des Textes und des Hintergrundes
Auf guten Kontrast achten Typographie (Grösse) 1)
- Gegebene Schriftart und Schriftgrösse.
- 1) Diese nur in Ausnahmefällen anpassen.
Überschrift:
Überschrift: Symbol und Wortlaut des Titels
5 Grössen H1 … H5
(i.d.R. fett / kursiv wie vorgegeben)
AB
Stile:
Farben
- Es gibt einen Rahmenstyle bei farbigem Hintergrund.
im Blockbaum (BB)
im Editorfeld mit Pp
Einstellungen (Re)
Es bedeuten
BB = Blockbaum
Pp = Popup im Bearbeitungsfeld
(Bild -> für einen Absatz)
- P bedeutet
- Popup Symbole beim markierten Block
- R …
- Wichtige Einstellungsmöglichkeiten im Balken rechts

Re = Einstellungen rechts
(Bild -> für ein Bild)

Spezielle Textblöcke
Zitat
“ Zitat
-
- Textblock / -blöcke
- andere Blöcke
Es gibt eine rote senkrechte Linie links
Aufpassen bei Aktionen mit dem Zitat
Stile:
Farben für das ganze Zitat oder deneinzelnen Block
Hervorgehobenes Zitat (Pullquote)
___
== Pullquote
___
Das ist der hervorgehobene Text oder Zitat als 1 Satz
Quellenangabe (fakultativ)
Stile:
Farben
Ränder (oben und unten -> nach rechts und wieder nach links ziehen -> keine Ränder)
Radius -> Rundungen an den Ecken
Der Text ist formatiert und gestylt.
Pullquote hat eine gegebene Höhe.
Liste
V Liste
- Listen-Element (-> Listeneintrag A)
- … (B)
- Listen-Element (C)
- Listeneintrag (-> C1)
- (-> C2)
- …
- Listeneintrag A
- Listeneintrag B
- Listeneintrag C
- Unterlisteneintrag C1
- Unterlisteneintrag C2
Fett / Kursiv usw. kann man für jeden markierten Textteil oder einen Listeneintrag (-> markieren) festlehen.
Die Liste umfasst alles von Listeneintrag A bis und mit Unterlisteneintrag C2.
Aktionen:
- Art der Liste
- „ungeordnet“ (nur mit ausgefüllten oder Punkten mit weissem Inhalt)
- Geordnete Liste (nur bei 1 beginnend; Unterlisteneinträge erhalten einfach die nächste Folgenummer)
- „ungeordnet“ (nur mit ausgefüllten oder Punkten mit weissem Inhalt)
- Ordnen / Unterordnen („einrücken“ / „ausrücken“) -> auf entsprechende Symbole klicken (TAB-Taste funktioniert nicht!)
- Löschen
- … der ganzen Liste (im Blockbaum markieren)
- Löschen eines Listeneintrags: Im Blockbaum oder Editierfeld
- Löschen von Listeneintrag C löscht auch die Listeneinträge C1 und C2
Stile:
Hintergrundfarbe kann man nur für die ganze Liste einheitlich festlegen!
Textfarbe auch für ein einzelnes Listenelement
Bilder und Buttons
- Wichtiges Gestaltungsmittel auf der Webseite
- Rechtliche Grundlagen: Eigene oder zur Verfügung gestellte Bilder / z.B. Pixabay: Freie Bilder
Umgang mit Bildern
Nach Bestimmung des Blockes als Bild ->
Simultan hochladen
Empfehlungen:
– Bildgrösse längere Seite 1’600 px
– nur Bilder (.jpg, .png, .gif)
aus der Mediathek
Mediathek enthält:
– alle Bilder der Homepage
– nur eigene Sektion
|=| Bild

Grösseneinstellung -> ziehen an einem Punkt rechts oder unten am Bild -> proportional 1)
Verlinkung -> auf Mediendatei oder auf eine (fremde) URL / Beitrag / Seite der Homepage
(Alternativtext festlegen)
Seitenverhältnis -> belassen (sonst verzieht sich das Bild)
… 1) oder eines der Masse bestimmen
(Auflösung kann auch zur Grössenbestimmung verwendet werden)
(Stile -> Filter)
Kombination mit Bildern
- Gestaltungshilfsmittel; ansprechende Homepagegestaltung
Media und Text
v Medien und Text
- Absatz
- …
- Andere Block-arten
- …

Medium aus Mediathek oder hochladen (wie Bild)
Grössenbestim-mung durch Mausziehen rechte Seite oder 1)
Medium kann man links oder rechts anheften
… verlinken (Mediendatei oder URL)
Bild kann man nachträglich ersetzen
Blocktypumwandlung -> z.B. Bild
… 1) Bestimmung der Medienbreite
Option auf Mobilgeräte stampeln (empfohlen -> einschalten)
übrige Einstellungen vgl. Bild
Galerie
v Galerie
– Bild
– Bild
– …


Es können gleich die gewünschten Bilder aus der Mediathek mit gehaltener CTRL-Taste ausgewählt werden.
.
Galerie markieren
Du kannst hier …
– eine Galerie-Beschriftung hinzufügen
– ein weiteres Bild hinzufügen
Hier …
– Anzahl Spalten bestimmen
– – die Bilder passend zuschneiden -> gleich gross, aber ev. zugeschnitten (wie rechtes Bild im Beispiel) / oder nicht
Eines der Bilder markieren
Du kannst hier …
– das Bild ersetzen
– das Bild verlinken (Mediadatei oder URL eines Bildes)
– zuschneiden
– kurze Beschriftung zufügen (siehe Beispiel)
Hier …
– Alternativtext
– Auflösung
Cover
V Cover
– Absatz
– (andere
Blöcke)
– …

Cover auswählen -> Unmittelbare Auswahl
- (Bild) hochladen
- … aus der Mediathek oder
- (Beitragsbild verwenden: wohl eher selten gebraucht)
-> Das Bild mit 50% Overlay-Deckkraft -> Vorschau
-> Bereit in der Mitte, um einen Titel zu schreiben
- Die Grösse des Bildes kannst Du direkt durch die Maus einstellen. (-> Minimalhöhe im Style)
- oder per Mausklick volle Höhe (ein- / ausschalten) -> Style: 100 vh
- Die Inhaltspositionen (ganz zentriert) kannst Du anpassen (9 Positionen)
- Das Bild kannst Du ersetzen
- Beginne, den Titel zu schreiben
- wenn Du willst, andere Textblöcke oder Bilder usw. dazufügen
- Titel und Texte kannst Du für sich einen Style bestimmen (Text- / Hintergrundfarbe)
Fokuspunkt des Bildes kannst Du bestimmen
Style:
Overlay-Deckkraft
Button(s)
V Buttons
- Button
- (Button)
- …
Für jeden Button einen Link bestimmen (bei fremder URL öffnen in neuem Tab)
Link zu Mail:
mailto:a@b.ch
Du kannst die Breite eines Buttons einstellen
Stil wählen (siehe Beispiele)
Farbe des Textes und Hintergrundes
Ganze Button-Gruppe:
– Anordnung
– Richtung
– Hintergrund des Button-Feldes
– Abstände der Einzelbuttons
Gliederung
Hilfsmittel zur besseren Sichtbarkeit (Betrachter oder Redaktor)
Es gibt:
Trennlinie
Abstandshalter
Spalten
Raster / Stapel / Zeile / Gruppe
Karussell
Für den Redaktor
Gruppieren
Gruppe benennen
Benutzerdefinierte Vorlage (synchronisiert)
Gliederung
eines
Seitenteils- Spalten, Raster und Karussell
- Einteilung, Anzahl
- Raster
- Mindestbreite
Karussell
- Tabellen Bearbeitung
Anlass, Agenda und Blöcke als Verzeichnis dazu
- … und die Sidebar
Anlass
- Unten am Editor Detailinhalt einstellen.
- Ort, Zeit, Organisator, Kontakt, Anmeldemöglichkeit.
- In der Übersicht nach Datum aufsteigend.
- Nur teilen CH -> Sektionen möglich.
Übersichten, Hauptmenu
- EDU News ->
- Block in Gutenberg-Editor
- … auf reservierter Seite „Neuigkeiten“
- -> in Dashboard / Design zu bearbeiten (siehe auch Seitenübersicht)
- EDU Agenda -> dto
- Abfrageloop
- Überblick, flexibler zu gestalten als „EDU News“ und „… Agenda“
- Hauptmenu, (andere Menus)
Sidebar und anderes mehr
- Design, WidgetsTemplates,
- Vorlagen
- Standard Seitenbild
- Einstellungen / Optionen
Formulare
- Gravity Forms.
- Schritte
- Formular bauen.Einstellungen.
- Benachrichrigungen.
- Meldungen schauen, exportieren.
- Formular auf der Seite einbauen.




































