Dokumentation / How-To

In dieser Dokumentation ist grundlegend festgehalten, wie diese Seite funktioniert.
Falls ihr Fragen habt, wie ihr etwas macht oder warum etwas so geregelt ist, wie es ist, schaut zuerst hier nach.

In den folgenden Anleitungen haben wir mit den Wörtern MÜSSEN, SOLLEN und KÖNNEN ausgezeichnet, wie wichtig es ist, dass ihr einzelne Schritte oder Regeln beim Bearbeiten unserer Seite beachtet.

Abschnitte, mit dem Schlagwort MÜSSEN versehen sind, werden über ein pinkes Ausrufezeichen links neben dem Text hervorgehoben, wie hier. Dazu müssen diese Abschnitte mit der CSS-Klasse muss versehen werden.
Dieses Ausrufezeichen ist an Handies etc. nicht zu sehen.

Unser Kalender wird über das Plugin EventPrime betrieben. Hier ist die offizielle Dokumentation des Plugins.

Über das Code-Snippet Kalender wird der Kalender an unser Theme angepasst. Außerdem werden via JavaScript ein paar Funktionen hinzugefügt, wie z.B, das automatische zensieren von internen Termin bei ausgeloggten Nutzer:innen.

Über das

Termine eintragen

Wiederkehrende Termine SOLLEN mit Enddatum versehen werden, damit unsere Kalenderdaten nachhaltig wartbar bleiben und kein ungewolltes Chaos entsteht. Dieses kann jederzeit verlängert werden.

Im Folgenden wird erklärt, was grundlegend beim Erstellen neuer Inhalte beachtet werden sollte und wie die verschiedenen Vorlagen richtig verwendet werden.

Für das verändern von Designelementen wie z.B. Farben oder Schriften siehe den nächsten Abschnitt „Designrichtlinien“, da dies i.d.R. für die ganze Seite in den Stil-Einstellungen verändert werden soll und nicht in einzelnen Blocks.

Grundlegendes & Best Practices

Grundlegend empfehle ich beim Arbeiten die Listenansicht in der linken Seitenleiste offen zu haben, da sie dir bei verschachtelten Blöcken (Gruppen in Gruppen) den richtigen zu wählen und außerdem behältst du so im Blick, dass dein Dokument ordentlich strukturiert ist.
Du kannst diese links oben über den Button mit drei versetzten Strichen öffnen.

Inhaltliche Abschnitte sollen in Gruppen-Blöcken zusammengefasst sein. D.h. wenn alle Gruppen eingeklappt sind sollten in der Listenansicht nur Gruppen zu sehen sein. (Der Kopfbereich der Startseite ist ein bisschen eine Ausnahme, aber sonst soll das so sein.)
Diese obersten Gruppen sollten alle die „Gesamte Breite“ des Bildschirms einnehmen und aussagekräftig umbenannt werden.
Dieses Zusammenfassen in Gruppen sorgt für eine stabilere Seitenstruktur und macht Blöcke in der Listenansicht leichter auffindbar. Außerdem erlaubt es, inhaltliche Abschnitte durch eine andere Hintergrundfarbe hervorzuheben und wird vom Code-Snippet für das pinke Klebeband benötigt.

Abstände zwischen Blöcken sollten nie darüber geregelt werden, einen Absatz einzufügen. Stattdessen sollten die Einstellungen „Innenabstand“ und „Außenabstand“ bei Gruppen etc. benutzt werden.
Um grundsätzlich den Abstand zwischen Blöcken innerhalb einer Gruppe etc. zu ändern, kann der Regler „Block-Abstände“ genutzt werden, aber i.d.R. sollte hier die Voreinstellung genügen. Zum ändern der Voreinstellungen für die gesamte Seite, sieh „Designrichtlinien“.

Um zwei Blöcke mehr voneinander zu trennen, können außerdem die Blöcke „Abstandhalter“ und „Trenner“ genutzt werden.

Bildquellen MÜSSEN angegeben werden. Hierzu musst du das Bild in der Mediathek aufrufen und dann die Quelle in das Feld Beschriftung eintragen – im Normalfall sollte das passieren, wenn das Bild hochgeladen wird. Die Quelle wird dann automatisch allen Bildern hinzugefügt.
Ausnahme sind die Bilder in den Projekt-Kacheln, hier wird nur in der Projekt-Infokarte die Bildquelle angegeben (weil es die gleichen Bilder sind). Um die Beschriftung bei den Kachelbildern zu entfernen, klicke einmal auf den Beschriftungsbutton in der Bearbeitungsleiste des Bildes, sodass dieser wieder weiß wird.

[obfuscate_email email="mailadresse@glo.de" link=true]
(link=true ist nur nötig, wenn die Mailadresse klickbar sein soll.)

Über CSS-Klassen können Blöcke durch Code Snippets (siehe unten) verändert werden. Diese CSS-Klassen können über rechte Seitenleiste > Reiter Zahnrad > Erweitert hinzugefügt werden. Das wird aber an den entsprechenden Stellen in diesem Dokument auch noch erwähnt.

Blöcke hinzufügen kannst du auf verschiedenen Wegen.

1. Über das blaue Plus links oben kannst du dir in der Seitenleiste alle Blöcke anzeigen lassen.
2. Über das blaue oder schwarze Plus, dass an manchen teilweise zwischen den Blöcken bzw. am Ende eines leeren Absatz-Blockes erscheint, kannst du ein Fenster öffnen, um nach Blöcken zu suchen.
3. In einem leeren Absatz-Block kannst du einen Schrägstrich „/“ eingeben gefolgt von deinem Suchbegriff, um nach Blöcken zu suchen.
4. Du kannst einen leeren Absatz-Block hinzufügen indem du bei einem Block auf die drei Punkte klickst und „Davor hinzufügen“ oder „Danach hinzufügen“ auswählst. Das geht in der Listenansicht oder dem kleinen Bearbeitungsband, was über dem Block eingeblendet wird.

Über all diese Wege kannst du auch Vorlagen einfügen.

Vorlagen richtig verwenden

Vorlagen sind leider nicht sehr leistungsstark in WordPress, z.B. werden Aktualisierungen in der Vorlage nicht automatisch auf alle entsprechenden Blöcke angewandt.
(Man kann zwar auch synchronisierte Vorlagen erstellen, aber diese synchronisieren dann auch den Inhalt der Blöcke.)

D.h. Vorlagen helfen vor allem beim hinzufügen neuer Abschnitte, um komplexere Setups schnell einfügen zu können, sind aber nicht hilfreich, um bestehende Designs zu ändern. Deshalb verwendet diese Seite auch nur folgende Vorlagen:

• Seitentitel
• Projekt-Kachel
• Projekt-Infokarte
• Großes Bild mit Klebeband

Dies sind die richtigen Namen der Vorlagen, mit denen du sie suchen kannst (siehe oben, Blöcke hinzufügen).

Alle weiteren Designelemente sind so einfach zu erstellen, dass sich eine Vorlage nicht lohnt.

Seitentitel

Diese Vorlage ist für alle Seiten außer der Startseite gedacht und fügt einfach eine Gruppe ein, die bereits die richtigen Abmessungen und Farbeinstellungen für den Seiten-Titelbereich hat.

Großes Bild mit Klebeband

Diese Vorlage soll verwendet werden, wenn ein Großes Bild, dass die gesamte Breite einnimmt, zwischen Textabschnitte gesetzt wird.
Sie besteht aus einer Gruppe mit einem Bild, dem die CSS-Klasse klebeband-abschnitt hinzugefügt wurde.

Farben

Schriften

Links in Fließtexten haben neben der farbigen Hervorhebung auch eine Unterstreichung, um Webstandards an Nutzbarkeit und Barrierenarmut gerecht zu werden. Mehr Infos siehe hier.

Abmessungen

Unter Website-Editor > Stile habe ich folgende Abmessungen geändert:

Ich habe die Blockabstände unter Layout auf 0 gesetzt, damit keine weißen Lücken zwischen Inhalten und dem Header / Footer entstehen. Damit die Blöcke aber sonst sinnvolle Abstände haben, habe ich die Blockabstände innerhalb von Gruppen auf 1 gesetzt – da eigentlich alles in Gruppen ist (siehe grundlegende Einführung oben).

Karten / Kacheln / Buttons etc. haben immer runde Ecken mit einem Radius von 6px.

Warum rem statt px verwenden?

Fokus-Stile

Fokus-Indikatoren sind ein wichtiges Design-Element um Barrieren abzubauen und die Navigation der Seite insgesamt angenehmer zu machen. Wenn ein Element fokussiert ist (z.B. in dem es über TAB angesteuert wurde), wird es designtechnisch hervorgehoben, sodass klar ist, welches Element fokussiert ist.

Unsere Fokus-Stile sind identisch mit unseren Hover-Stilen (wenn der Mauszeiger über einem Element schwebt) und werden über ein CSS-Snippet kontrolliert.

Bei Links in Menüs wird eine doppelte Unterstreichung von der Mitte ausgehend eingeblendet.
Bei Links im Fließtext wird der regulären Unterstreichung eine zweite Linie hinzugefügt, auch von der Mitte ausgehend animiert.
Bei Buttons wird eine Outline hinzugefügt und der Text wird zu weiß animiert.
Bei den Projektkacheln wird eine Outline hinzugefügt.

Seite: 404

Die Seite kann über Design > Webite-Editor > Templates > Seite: 404 bearbeitet werden. Aus technischen Gründen braucht es auch die Event-Prime Platzhalterseite, die vom Design her einfach eine Kopie der 404 Seite darstellt und die ganz normal unter Seiten bearbeitet werden kann.

• Wie werden Backups erstellt, gespeichert und wieder hergestellt?
• Wie bleibt die Seite up-to-date + Best Practices

• Welches ist wofür?
• Twingle?

Statify

Statify zeigt ein simples Diagram mit Seitenaufrufen im WP-Admindashboard an. Unter Einstellungen > Statify können ein paar Einstellungen wie z.B. die Speicherdauer der Daten verändert werden.

Diese Seite verwendet Code Snippets, also kleine Abschnitte von Code (vor allem CSS, z.T. ein bisschen JavaScript), um kleinere visuelle Probleme zu lösen.

Wenn du in der linken Seitenleiste auf Code-Snippets klickst, findest du einer Liste aller verwendeten Schnipsel.

Manche der Snippets laufen komplett im Hintergrund, für andere musst du sogenannte Klassen zu den Blöcken hinzufügen, bei denen du willst, dass das Snippet auf sie angewandt wird. (Z.B. um pinkes Klebband hinzuzufügen.)

Aber keine Sorge, das wird an den jeweils relevanten Stellen weiter oben in der Dokumentation immer erklärt.

❗Achtung: Bitte ändere an diesen Code-Schnipseln nur etwas, wenn du weißt, was du tust. Normalerweise, sollte es nicht nötig sein, dort etwas zu ändern. Im Zweifel, kannst du dich an simonc wenden.

Klebeband

Dieses Snippet fügt die pinken Klebestreifen zu den Bildern hinzu, indem zu den jeweiligen Elementen die entsprechenden CSS-Klassen hinzugefügt werden. Bei großen Bildern (die die gesamte Seitenbreite einnehmen) muss dies jedoch nicht manuell gemacht werden, sonndern es SOLL die Vorlage verwendet werden.

Die Farbe des Klebebands lässt sich nicht super einfach ändern. Über das Code-Snippet lässt sich die Farbe mit der Klebebänder mit dieser Zeile ändern:
filter: hue-rotate(96deg) brightness(1.3);
Hue-rotate() rotiert alle Farbwerte des Bilds um eine bestimmte Gradzahl auf dem Farbspektrum. Mit brightness() kann die Helligkeit angepasst werden. Die Werte in dem Beispiel oben ändern die Farbei so, dass sie recht ähnlich ist wie das Akzent-Gelb. Bei dieser Methode ist ein bisschen rumprobieren nötig, um ein gutes Ergebniss zu haben – ggf. hilft es, sich ein Bild eines Farbspektrums anzuschauen, um die Abstände der Farben etwa einschätzen zu können.

Ggf. ist es einfacher, die Bilder in einer externen Software einzufärben und neu hochzuladen. In diesem Fall müssen die Links im Snippet aktualisiert werden.