Teaser

Beschreibung

Ein Teaser ist eine Inhaltsbox in der rechten Spalte (Related Content). Mit einem Teaser können Sie auf andere, inhaltlich verwandte Themen hinweisen oder ergänzende (oder zusammenfassende) Informationen zum Inhalt in der mittleren Spalte bieten. Für eine bestmögliche Übersicht und Benutzerführung empfehlen wir, pro Thema einen separaten Teaser zu setzen und nicht alle Themen in einem Teaser zu zeigen. Verwenden Sie zudem den Teaser nicht als zusätzliches Navigationselement. Im Teaser verlinkte Dokumente müssen auch über die normale Navigation zugänglich sein.

Ein Teaser enthält einen Titel und kann ein Bild, Text sowie beliebig viele Links und/oder Attachment-Links enthalten. Zur besseren Übersicht werden Links und Attachment-Links am Ende dargestellt.

Erstellung

A. Teaser (Text und Bild)

  1. Klicken Sie im Bereich «Related Content» auf «New Related Content Component» > Wählen Sie «Teaser» und bestätigen Sie mit «Auswählen»
  2. «Darstellung»: Wählen Sie zwischen «Standard» (= weisser Hintergrund/Default) und «Grau» (hellgraue Hinterlegung der Teaser-Box)
  3. «Titel»: Definieren Sie einen Titel (obligatorisch)
  4. «Teaser Name» (ohne Leerzeichen oder Sonderzeichen): Geben Sie einen Namen  ein, falls Sie den Teaser auf einer anderen Seite als Referenz-Teaser  einbinden möchten (Doku Referenz-Teaser)
  5. «Text»: Geben Sie den Inhalt des Textparagraphen ein. (Halten Sie den Text möglichst kurz und einfach und erstellen Sie lieber mehrere Teaser, als alles in einem Teaser zu beschreiben. Setzen Sie Links nicht hier sondern als eigene Unterkomponente (vgl. unten))
  6. «Bild»: Wählen Sie ein Bild aus Ihren Assets. (Ein Bild im Teaser wird oberhalb des Titels und fix 200px breit dargestell. Achten Sie darum darauf, dass das Bild an sich schon diese Breite aufweist.)
  7. «Alternativer Text»: Bezeichnen Sie hier das Bild mit Worten. Dieser Text wird in Screenreadern (=Browser für blinde oder sehbehinderte Personen) angezeigt.
  8. Reiter «iframe»:
    1. «Quelle» Geben Sie hier die URL der Zielseite ein
    2. «Höhe»: Geben Sie die Höhe des iframe-Fensters (in Pixeln) an (Die Breite des iframes innerhalb des Teaser ist fix 200px)
    3. «Rahmen»: Aktivieren Sie diese Option, falls Sie zusätzlich einen (schwarzen) Rahmen um das iframe herum wünschen (Default = off)
    4. «Scrollbalken»: Deaktivieren Sie diese Option, falls Sie keinen vertikalen/horizontalen Scrollbalken wünschen (Default = on)
    5. «Lade-Animation»: Deaktivieren Sie diese Option, falls die Lade-Animation vor der Anzeige der iframe-Inhalte nicht erscheinen soll (Default = on). (Die Lade-Animation wird nur dann angezeigt, falls die URL des iframes nur nach einer Verzögerung geladen werden kann.)
  9. Bestätigen Sie mit «Änderungen speichern»

Bearbeitung: Klicken Sie auf das Editier-Icon rechts im Titelbalken von «Teaser»

B. Links und/oder Attachment-Links im Teaser

  1. Klicken Sie auf den Bereich «Links» und dann auf «New Links Component»
  2. Wählen Sie «Interner Link», «Externer Link» oder «Download Link» (für Attachment-Links) und bestätigen Sie mit «Auswählen»
    1. Interner Link: Wählen Sie die Zielseite und einen Linktext und geben Sie (optional) einen Link-Tooltip an (wird angezeigt, wenn der Website-Besucher über den Link fährt)
    2. Externer Link: Geben Sie die Ziel-URL und einen Linktext ein und geben Sie (optional) einen Link-Tooltip an (wird angezeigt, wenn der Website-Besucher über den Link fährt)
    3. Download Link: Wählen Sie die Datei aus Ihren Assets und einen Linktext und geben Sie (optional) einen Link-Tooltip an (wird angezeigt, wenn der Website-Besucher über den Link fährt)
  3. Bestätigen Sie mit «Änderungen speichern»

Bearbeitung: Klicken Sie auf den Titelbalken von «Interner Link», «Externer Link» oder «Download Link» und wählen Sie dann «Komponente bearbeiten» im Seitenmenu.

Verwendung

Inhaltsseite 3-spaltig (im Related Content)
Übersichts-Seite(im Related Content oder Content)
News-Übersicht (im Related Content)
News-Eintrag (im Related Content)
Team-Übersicht (im Related Content)
Personen-Seite (im Related Content)
Homepage (im Related Content)
Übersichts-Homepage (im Related Content oder Content)
Übersichts-Homepage mit 3 Content-Spalten (im Related Content oder Content)

Auf Übersichts-Templates (Übersichts-Seite und Übersichts-Homepage) sind Teaser auch in der mittleren Spalte (Content) möglich. Wir empfehlen aber, auch hier hier die rechte Spalte zu nutzen, vorallem wenn es sich um verwandten/ergänzenden («related») Inhalt handelt. Teaser werden auch intuitiv eher dort erwartet und gesucht.

Beispiele

(siehe rechts im Related Content)

Beispiel 1: Teaser mit Text, Attachments und Links
Beispiel 2: Teaser mit Bild und Text
Beispiel 3: Teaser mit Hintergrundfarbe