So funktioniert der Banner im Studio

Mit dem Banner hebst du eine Botschaft aus dem Artikel heraus: einen Hinweis, eine Frist, eine Warnung oder einen Aufruf mit Button. Du fügst ihn wie ein Bild oder eine Hinweisbox an jeder Stelle im Text ein.

Dieser Artikel ist Anleitung und Musterkarte zugleich: Jeder Banner unten zeigt eine andere Einstellung, und seine kleine Überschrift sagt, welche.

In fünf Schritten zum Banner

1. Klick im Text an die Stelle, an der der Banner stehen soll, am besten zwischen zwei Absätzen.
2. Öffne in der Werkzeugleiste über dem Text das Menü zum Einfügen und wähle «Banner».
3. Lege im Reiter «Aussehen» Breite, Hintergrund, Ausrichtung und Icon fest.
4. Schreib im Reiter «Text» den Titel und den Text, auf Wunsch auch eine kleine Überschrift und einen Button.
5. Prüf das Ergebnis in der «Vorschau», auf dem Computer und auf dem Handy.

Der Reiter «Aussehen»

Breite

«Volle Breite» lässt den Banner von Rand zu Rand laufen. Das wirkt stark und passt zu Botschaften, die zum Handeln auffordern. «Bildbreite» macht ihn so breit wie das Titelbild, mit runden Ecken: Er wirkt ruhiger und eignet sich für Tipps mitten im Text. Auf dem Handy ist der Banner mit voller Breite so breit wie der Bildschirm, der mit Bildbreite so breit wie der Text.

Hintergrund

Bei «4else-Farbe» wählst du eine der sieben Farben der Marke. Die Schrift passt sich von selbst an: auf den dunklen Farben weiss, auf den hellen dunkel.

• Navy, Violett-Schwarz und Digital-Violett: dunkel und kräftig, für die wichtigsten Botschaften.
• Eisviolett, Eisblau, Eis-Lemon und Eis-Orange: hell und freundlich, für Hinweise und Tipps.

Die hellen Eis-Farben wirken leiser. Sie eignen sich, wenn ein Banner auffallen, aber nicht laut sein soll.

Eisblau wirkt sachlicher als die anderen hellen Farben.

Mit Foto

Wählst du beim Hintergrund «Foto», erscheint das Bildfeld. Lade ein Querformat von mindestens 2000 Pixel Breite hoch und schreib einen Alternativtext, er ist Pflicht. Für die Lesbarkeit legt die Website von selbst einen dunklen Verlauf über das Foto.

Mit dem Hotspot im Bildfeld bestimmst du, welcher Teil des Fotos sichtbar bleibt. Auf dem Handy steht das Foto über dem Text, damit beides gut lesbar bleibt.

Ausrichtung

«Zentriert» stellt Icon, Titel und Text in die Mitte, «Linksbündig» beginnt sie links, wie den Artikeltext. Mit Foto ist linksbündig meist die bessere Wahl: Der Text steht dann auf dem dunklen Teil des Verlaufs, und das Foto bleibt rechts sichtbar. Ist der Text zentriert, legt die Website einen gleichmässigen Schleier über das ganze Foto.

Icon

Das Icon steht über dem Text. Fünf stehen zur Wahl, dazu Else:

• Info: gut zu wissen, Hintergrund, Erklärung
• Achtung: wichtig, Risiko, häufiger Fehler
• Tipp: Empfehlung, Abkürzung
• Häkchen: Checkliste, erledigt, so geht es
• Termin: Datum, Frist, Anmeldeschluss
• Else: ihr Gesicht statt eines Icons, für persönliche Tipps

Brauchst du kein Icon, wähle «Kein Icon», wie beim Foto-Banner oben.

Der Reiter «Text»

• Kleine Überschrift: optional, höchstens 40 Zeichen, z. B. «Unser Tipp» oder «Wichtig». Sie steht klein und in Grossbuchstaben über dem Titel.
• Titel: Pflicht. Am besten bis 60 Zeichen, damit er auf eine oder zwei Zeilen passt. Mehr als 90 Zeichen sind nicht möglich.
• Text: optional. Ein, zwei Sätze wirken am stärksten. Fett, kursiv und Links funktionieren wie im Artikel.
• Button: optional. Er braucht beides, Beschriftung und Link, sonst meldet das Studio einen Fehler. Als Stil wählst du «Gefüllt», der stärker auffällt, oder «Umriss», der leichter wirkt. Gefüllt ist er auf dunklem Grund weiss, auf hellem Navy.

Gut eingesetzt

• Sparsam: ein, zwei Banner pro Artikel. Sonst verliert jeder an Wirkung. Diese Anleitung zeigt bewusst mehr.
• Nie zwei Banner direkt hintereinander: Setz immer etwas Text dazwischen.
• Für einen Hinweis mitten im Text ist die Hinweisbox oft die leisere Wahl. Der Banner ist für das, was auffallen soll.
• Fotos mit dem Wichtigen rechts im Bild funktionieren am besten mit linksbündigem Text.

Diesen Artikel kannst du als Vorlage behalten: Er ist ein Entwurf und erscheint nicht auf der Website, solange du ihn nicht veröffentlichst.