Styleguide und Tipps

Veröffentlicht: 01.04.2025

Diese Gestaltungsrichtlinien beschreiben, wie bestimmte Elemente des Block-Editors zu verwenden sind. Dies ist übrigens ein Lead und kommt am Anfang jedes Beitrags. Farbe in der Regel Schwarz. Einstellungen: Block «Absatz», Style «Lead».

Beiträge / Inhalte in Blöcke umwandeln

Der Table of Content ist ein Inhaltsverzeichnis mit Ankerlinks (automatisch erstellt). Er folgt nach Bedarf direkt auf den Lead.
((Table of Content funktioniert noch nicht richtig … Im Bearbeitungsmodus wird nicht alles angezeigt.))

Überschriften, Absatz, Fussnote, Auszeichnungen

Absatz «Standard» wird für gewöhnlichen Lauftext verwendet. Lorem ipsum dolor* sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.

Auszeichnungen dezent einsetzen – entweder als Highlight oder fett oder sogar fett + Highlight, aber nicht alle zusammen verwenden. Regel: Hilft es der Lesbarkeit/Struktur? Zu viel stört den Lesefluss. Interpunktion wird mit ausgezeichnet! Ausnahme: bei URL nicht, da nicht Teil der URL. 

* Mit dem Absatz «Fussnote» kann z. B. eine Erkärung ergänzt werden.

H2 für übergeordnete Titel / Themen

H3 als weitere Titelhierarchie, wenn nötig

H4 als Zwischentitel z. B. bei redaktionellen Beiträgen oder als weitere Titelhierarchie

Das ist ein Absatz nach einer Überschrift oder ein Absatz, der auf einen anderen Absatz folgt. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus.

Teaser-Hintergrund und Beitragsbild

• Beitragsbild: wird als Beitragsbild und als Teaserbild angezeigt
• Eigenes Bild: eigenes Bild für Teaser. Beitrag kann mit anderem Beitragsbild oder ohne Beitragsbild gestaltet werden.
• Farbe wählen: Teaser als Farbkachel. Ein Beitragsbild kann trotzdem gewählt werden.

Interview und Zitat

Eine Interviewfrage wird als Absatz definiert und mit Fett und Highlight ausgezeichnet. Es folgt ein weicher Umbruch (Shift + Enter).
Vorname Name: In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum.

Wenn auf eine Interviewfrage mehrere Abschnitte als Antwort folgen, wird jeweils ein neuer Absatz gesetzt. Der Folgeabsatz wird nicht mit einem weichen Umbruch an den ersten angeschlossen.

Braucht es eine Auszeichnung in einem Interview, wird diese mit «Highlight» gesetzt.

Ein Zitat sieht so aus.

Interview mit einer Person: Vorname und Name nur bei der ersten Frage ausschreiben und fett auszeichnen.

Interview mit mehreren Personen: Vorname und Name bei der ersten Frage ausschreiben und fett auszeichnen, bei weiteren Fragen nur noch die Initialen fett auszeichnen.

Wie sieht die zweite Frage mit Antwort in einem Interview mit mehreren Personen aus?
VN: Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna.

Beitragsformat / Serie

Der erste Lead eines Beitragsformates bzw. einer Serie ist für alle Beiträge der Serie derselbe und wird mit Highlight ausgezeichnet.

Nach dem wiederkehrenden Lead kommt eine Trennlinie und danach kommt der Lead des eigentlichen Beitrages. Dies gilt für Die kjz-Sprechstunde, kjz-Ratgeber und PAPodcast.

Danach kommt ein gewöhnlicher Absatz und es geht weiter wie bei anderen Beiträgen.

Einstellungen PAPodcast

• Claim: PAPodcast – Episode X
• Teaser-Hintergrund / Beitragsbild: Eigenes Bild > pro Beitrag ((Olla?))
• Beitragsbild: ((Olla?))
• Akzentfarbe: dunkelblau
• 1. Lead (gleichbleibend) dunkelblau
• 2. Audio direkt nach Linie (keine Absatzlinie)
• 3. Text Beschrieb (Lauftext)

Einstellungen kjz-Sprechstunde

• Claim: Die kjz-Sprechstunde
• Teaser-Hintergrund: Eigenes Bild > Sprechblase (für alle gleich)
• Beitragsbild: Illustration kjz-Sprechstunde (3 Personen)
• Akzentfarbe: Dunkelblau
• Lead: Wiederverwendbarer Block einfügen «kjz-Sprechstunde – Lead»
• Funktion der Autorin/Antworterin angegeben werden, z. B.:
  Vorname Name (Mütter- und Väterberaterin)
• am Schluss: Wiederverwendbarer Block einfügen «kjz-Sprechstunde: Frage einreichen»

Einstellungen kjz-Ratgeber

• Claim: kjz-Ratgeber
• Teaser-Hintergrund: Eigenes Bild > Kategorie-Bild wählen
• Beitragsbild: keines
• SEO / Codeschnipsel: Lead als Teaser einfügen (evtl. kürzen)
• Kategorie: ganze Treppe auswählen: z. B. Familie, Entwicklung, Ernährung
• Autor: kjz
• Datum und Autor anzeigen: nicht anzeigen!
• Akzentfarbe: Petrol
• Icon «Kategrorie und Alter»: vor Lead einfügen, zentriert ((überprüfen))
• Störer / Hinweis: ((Darstellung prüfen)) ((ev. als Infobox))
• Verweis auf ein Experten-Interview zum Thema: mit Beitrags-Teaser
• PDF-Download (Button): Format anzeigen

Einstellungen Erfahrungsberichte (Kinder/Eltern erzählen)

• Claim: «Thema – Kinder erzählen», «Thema – Eltern erzählen»
• Teaser-Hintergrund: Eigenes Bild > anonymes Silhouetten-Portrait
• Beitragsbild: keines
  aber: Bild nach Lead einfügen > anonymes Silhouetten-Portrait mit Zitat
• 1. Lead, 2. Bild, 3. Angaben zur Person (bei dieser Serie keine Trennlinie!)
• Lead Kinder und Erwachsene: wiederholender Lead über Bild in Akzentfarbe, unterhalb Bild Absatz zu Person in schwarz + fett
• Lead kjz-Expertin: schwarz
• Akzentfarbe: passend zu Portrait-Farbe (Orange, Bordeaux, Petrol)
• Angaben zur Person: nach Bild > Absatz + bold
• Experten-Meinung: in Infobox

Einstellungen Das sagt die kjz-Expertin / biz-Experte/-Expertin

• Claim: «Thema – Das sagt die kjz-Expertin»
• Teaser-Hintergrund: Eigenes Bild > kjz/biz + Sprechblase OHNE Zitat
• Beitragsbild: kjz/biz + Sprechblase MIT Zitat
• Akzentfarbe: kjz Orange, biz Petrol

Wiederverwendbare Blöcke / Komponenten

bereits erstellte wiederverwendbare Blöcke ansehen / bearbeiten
+ anwählen, «Wiederverwendbar» anwählen

Wiederverwendbaren Block erstellen
Zusammengehörende Elemente auswählen, «Mehr Optionen» (drei Pünktli) auswählen, zu wiederverwendbaren Blöcken hinzufügen, verständlichen Namen geben (!)

Wiederverwendbaren Block in Artikel einfügen
+ anwählen, «Wiederverwendbar» anwählen, Block auswählen
oder: direkt im Beitrag + klicken und gewünschten Block mit Namen suchen

Angabe der Autorin oder des Autors

Grundsätzlich muss bei jedem Beitrag in den Einstellungen rechts eine Autorin oder ein Autor angegeben werden.

• Als Autorin oder Autor gilt, wer den Beitrag oder den grössten Anteil am Beitrag geschrieben hat oder verantwortet.
• Bei den kjz-Sprechstunden treten die kjz als Autor auf.
• Das AJB tritt als Autor auf, wenn
  • die Autorenschaft undefiniert ist,
  • der Beitrag die Haltung des Amtes widerspiegelt aber nicht diejenige der Autorin oder des Autors,
  • eine externe, weitgehend unbekannte Person den Beitrag geschrieben hat.
• Bekannte Gastautorinnen und Gastautoren können mit ihrem Namen aufgeführt werden (z. B. Yonni Meyer alias Pony M.)

Verlinkungen

Beitrags-Teaser

Soll ein Beitrag besonders hervorgehoben und verlinkt werden, kann ein Beitragsteaser eingesetzt werden (z. B. wird in einem Themenbeitrag auf ein Experten-Interview verwiesen).

Der Beitrags-Teaser wird vorwiegend innerhalb eines Beitrags platziert (nicht am Anfang oder Ende) und nur, wenn inhaltlich eng verwandt.

Hier je ein Beispiel für einen Beitrag mit und einen ohne Beitragsbild:

Interview mit dem Entwicklungspädiater Prof. Dr. med. Oskar Jenni

Kinder sind eigenaktive Lerner, deren Entwicklung man nicht steuern kann

Zum Artikel

Links

Häufig verwendete Links werden in der zentralen Linkliste erfasst und von dort abgerufen. Als Links werden nur externe Seiten erfasst.

Kantonseigene Seiten (ZHweb und AJB-Microsites) mit Bild, alle anderen URLs ohne Bild.
Zuständig: Stefanie Rübenacker

Es kann eine Linkliste erstellt werden über den Widget-Block «Links»:

Kinder- und Jugendhilfezentren (kjz)

Fragen zur Erziehung und Entwicklung Ihrer Kinder und zum Familienalltag? Die Fachleute unserer Kinder- und Jugendhilfezentren (kjz) beraten Sie gern.

Zum kjz-Beratungsangebot

Ernährung für Säuglinge und Kleinkinder

Mit einer ausgewogenen Ernährung schaffen Sie die Grundlage für eine gesunde Entwicklung Ihres Kindes. Auf der Seite des Bundesamts für Lebensmittelsicherheit und Veterinärwesen Seite finden Sie Informationen und Tipps, die Ihnen dabei helfen.

kinderandentisch.ch

Verlinkungen im Text

Ein Link im Lauftext zu einer beliebigen URL ausserhalb fLg sieht so aus.
Den Regler «In neuem Tab öffnen» aktivieren!
Diese Art Verlinkung wird für externe Inhalte eingesetzt, die nur für das Beitragsthema relevant sind. Links zu Angeboten (z. B. Elternnotruf) sind als Links zu erfassen und zu platzieren,

Ein Link im Lauftext zu einem Beitrag auf fLg funktioniert so. Bei der Verlinkung zu fLg-Beiträgen muss aber vorab geprüft werden, ob ein Beitrags-Teaser sinnvoll ist.

Links zu Linklisten-Links können (technisch) nur als Linkliste dargestellt werden. Es kann nicht direkt im Text ein Link zu einem Linklisten-Link hinterlegt werden.

Kacheln «Mehr zum Thema»

Am Ende jedes Beitrags wird auf 3 weitere Beiträge verlinkt. Diese werden als Kacheln dargestellt. Wenn manuell keine Beiträge ausgewählt werden, zieht das System automatisch die zuletzt publizierten Beiträge. Links zu verwandten Beiträgen gemacht werden.

Die Kacheln sollen keine AJB-Angebote mehr verlinken – dazu Link-Liste verwenden.

Biopic / Autor/in / Gesprächspartnerin

… werden unter «Author» zentral erfasst und können unter dem Block-Widget «Author» ausgewählt und eingefügt werden.
Zuständig für Erfassung: Karine Hartmann

((Karine: braucht es hier Ergänzungen? Eine kleine Anleitung/Checkliste?))

Sandra Stössel

Sandra Stössel ist Juristin (lic. iur.) mit zusätzlichem Master in Kinderrechten (Master in children’s rights) und seit 20 Jahren im Kindesschutz tätig. Seit 2013 arbeitet sie im Fachbereich Kinder- und Jugendhilfe des AJB. Zunächst arbeitete sie als Jugendsekretärin im Schulkreis Uto der Stadt Zürich, dann als Leiterin des Fachbereichs Kinder- und Jugendhilfe in den Sozialen Diensten der Stadt Zürich. Von 2008 bis 2011 war sie Projektleiterin für das Projekt Kindeswohl und Kinderrechte im AJB. Dann folgten zwei Jahre bei Integras, Fachverband für Sozial- und Sonderpädagogik.

Typographie, wichtigste Satzzeichen

Um die Arbeit mit typografisch Feinheiten zu erleichtern, nimmt die Website bei der Anzeige von Texte automatisch gewisse Optimierungen vor. Diese sind im privaten Beitrag Typografische Optimierungen aufgelistet.

Anführungszeichen: Guillemets 
«» 
 
Auslassungspunkte / Dreipunkt 
… 

• Werden ein oder mehrere Buchstaben eines Wortes durch Auslassungspunkte ersetzt, so werden diese ohne Leerzeichen an den angrenzenden Wortteil oder die angrenzenden Wortteile angefügt. 
  «wenn ein Wort abge… wird»
• Auslassungspunkte, die für weggelassene Wörter oder Satzteile stehen, werden wie diese von Leerzeichen umgeben, wenn sie nicht unmittelbar vor einem Satzzeichen stehen. 
  «Ein angefangener Satz …»

Trennstrich / Bindestrich vs. Gedankenstrich / Bis-Strich 

• Trennstrich / Bindestrich / Ergänzungsstrich: kurz 
  «mittel- und langfristig»
• Gedankenstrich / Bis-Strich: lang 
  «Ein Satz – mit eingeschobenem Gedanke – ist hier zu Ende.»

Geschütztes Leerzeichen 
Zusätzlich zu den automatischen, typografischen Optimierungen können auch spezielle Leerzeichen wie Geschützte Leerzeichen oder Halbe geschützte Leerzeichen eingefügt werden. Dazu kann der Cursor an der gewünschten Stelle platziert werden und das passende Symbol über das erweiterte Menü bei Paragraphen ausgewählt werden oder ein bestehendes Leerzeichen damit umformatiert werden.

& oder und?
Das Et-Zeichen wird im Text nicht verwendet, sondern als «und» ausgeschrieben.
Ausnahmen: Firmenname o. ä. oder digital/technisch notwendig.

Farben

Die fünf fLg-Farben (Cyan, Dunkelblau, Orange, Bordeaux und Petrol) können als «Akzentfarbe» für einen Beitrag gewählt werden. Einstellung in der rechten Spalte der Block-Einstellungen unter «Dokument».

Es sollen alle fünf Farben ungefähr ähnlich oft eingesetzt werden. Es gibt keine farbliche Ordnung nach Themen oder so.

Listen und Aufzählungen

• Aufzählung mit Liste «Standard»
• macht gewöhnliche Spiegelstriche

1. Aufzählung mit Liste «Standard»
2. kann auch mit Zahlen statt Strichen erstellt werden

• Häkchen-Aufzählung
• unter linkem Symbol «umwandeln in» > Erweiterte Liste
• Häkchen statt Punkte werden dargestellt, wenn der Block nicht mehr bearbeitet wird (Punkte werden nur während der Bearbeitung angezeigt)

• Checkliste
• unter linkem Symbol «umwandeln in» > Checkliste

Info-Boxen

Infobox Veranstaltung

Hier kommt ein Text in die Infobox …
Das ist eine Infobox schmal/klein.
So kann z. B. auf eine Veranstaltung hingewiesen werden.

Das Bild hat das Verhältnis 16 : 9.

Zur Anmeldung

Bilder

Bild hochladen in Mediathek und beschriften (Bildinformationen) 

Bildgrösse Beitragsbilder (Upload): 1960 x 1200 px

Titel: Titel des Beitrags eintragen
Alternativtext: objektive Beschreibung des Bildes mit wichtigen Schlagworten, wird für Screen-Reader und SEO verwendet 
Beschriftung: wird im Frontend angezeigt (Bildlegende / Beschrieb > nur eintragen, wenn Zusatzinformation wichtig)
Beschreibung: dient als Bildbeschreibung für Backend (kann leer gelassen werden)

Galerie / Bildserie

Slider kann in Block-Einstellungen eingestellt werden.
Darstellung in Vorschau korrekt, in Bearbeitungsmodus nicht.

Quelle oder Copyright

• nur wenn nötig 
• eigene Grafiken: ev. Copyright im Bild integrieren 
• andere Quellen: direkt unter Bild (siehe Bildlegende / Beschrieb) 

Video / Audio

((Video aus Mediathek, Audio aus Mediathek, Video aus URL einbinden …)) > Olla?

Beispiel Video (aus Mediathek):

Beispiel Audio (aus Mediathek):

SEO / Codeschnipsel

((…?))

Instagram

Übersicht Vorlagen für Instagram-Posts:

1_Support/14_INA/142_Produktionsdaten_Grafik/Digitale-Medien/2_Websites/fuers-Leben-gut/Insta-Posts-fLg-Marke/Uebersicht&Beispiele/fLg-Insta-Posts_Uebersicht&Beispiele_202203.pdf