Beispiel-Beitrag für die Schulung
Das ist ein Titel
Ein Post bzw. Beitrag sollte immer ein Beitragsbild haben, da das Bild bei den Kacheln auf der Übersichtsseite sowie auf der Startseite angezeigt wird.
Info-Box: Wichtig ist, dass wir für die Barrierefreiheit immer eine gute Struktur beibehalten. Das heisst, wir nutzen, wo immer es geht, Überschriften für eine gute Struktur.
Das ist eine Überschrift 1 (auch H1 genannt)
Dieser H1 sollte nicht eingesetzt werden, da der Titel dieser Seite bereits einen H1 besitzt und deshalb die nächste Überschrift in der Struktur H2 ist:
Das ist eine Überschrift 2 (H2)
Diese Überschrift folgt nach dem Titel des Beitrages und sieht so aus, wie es das Design bestimmt. Farben und Schriftgrösse muss man nicht manipulieren, das Styling der Website erledigt alles für euch. Lehrstellen
Das ist eine Überschrift 3 (H3)
Auch diese Überschrift passt sich von Schriftgrösse bis hin zur Schriftfarbe automatisch an.
Das ist eine Überschrift H4
Das ist eine Überschrift H5
Das H6
Wie du siehst, gibt es keine Unterschiede von Grösse und Farbe zwischen diesen Überschriften. Dennoch ist es wichtig, diese zu setzen, wenn die Hierarchie so weit heruntergeht. In der Regel benutzt ihr aber H2-4.
So sieht die Struktur dann aus:
Einfach überprüfen könnt ihr das auch im Frontend bzw. der Vorschau. Denn sobald ihr Überschriften einsetzt, wird automatisch ein Inhaltsverzeichnis erstellt:
Das ist ein Akkordion
Das ist der erste Akkordion-Titel
Das ist der Inhalt, hier kann alles eingefügt werden auch Bilder:
Das ist der zweite Akkordion-Titel
Und hier haben wir einfach nur Text.
Das ist ein Button, der kann verlinkt werden für interne oder externe Seiten:
Du kannst auch einen Text-Link erstellen und diesen intern oder extern verlinken. Das ist ein Link zum Berufswahlfahrplan und das ist einer auf Google.
Das sind Spalten
Jetzt fangen wir an zu gestalten, sagen wir, ihr möchtet etwas nebeneinander darstellen. Dafür gibt es Spalten:
Das ist die linke Spalte. Beide Spalten sind gleich gross, also 1/2.
Das ist die rechte Spalte. Diese ist auch gleich gross wie die Linke, also 1/2
Eine Spalte kann aber auch links etwas kleiner sein, dann wählst du 33/66:
Diese Spalte ist kleiner als links, also 1/3 breit, würde sich eignen, um ein kleines Bild einzufügen.
Diese ist dann breiter, also 2/3 – Diese ist dann breiter, also 2/3 – Diese ist dann breiter, also 2/3 – Diese ist dann breiter, also 2/3 – Diese ist dann breiter, also 2/3 – Diese ist dann breiter, also 2/3
Diese ist dann breiter, also 2/3 – Diese ist dann breiter, also 2/3 – Diese ist dann breiter, also 2/3 – Diese ist dann breiter, also 2/3 – Diese ist dann breiter, also 66 – Diese ist dann breiter, also 2/3
Diese ist dann kleiner, also 1/3 – Diese ist dann kleiner, also 1/3
Alle diese Spalten stehen zur Verfügung:
Bei einer Spalte kann man definieren, wie sie auf Mobile aussehen soll. Nebeneinander oder untereinander. Dazu klickst du auf die Spalte und schaust rechts in der Sidebar unter «Block», so dass die ganze Spalte blau umrandet ist, und klickst dann in der Sidebar den Toggle «Auf Mobilgeräten stapeln» ein oder aus:
Das sind Gruppen
Eine Gruppe lässt dich etwas zusammenfassen, ausrichten und mit Hintergrundfarbe gestalten. Eine Gruppe erstellt man meist, wenn man verschiedene Elemente zusammenbringen möchte, diese kann man dann auch einfacher im Dokument verschieben.
Das ist Text in einer Gruppe, und sie wurde eingefärbt. In dieser Gruppe ist auch eine Spalte eingefügt.
1/3
1/3
1/3
Das ist eine Bildergalerie.
In der Sidebar rechts kannst du einstellen, wieviele Bilder du nebeneinander haben willst, aktuell sind 3 Spalten ausgewählt.
