Teaser

In der breiten Mittelspalte (= Content) einer Seite behandeln Sie die Thematik dieser Seite. Ergänzende Informationen oder inhaltlich verwandte Themen nehmen Sie in Kästen auf der rechten Spalte der Seite (= Related Content) auf, und verweisen von dort auf die weiterführenden Seiten. Solche Kästen nennt man Teaser – gleich rechts  finden Sie vier Beispiele dafür. Ein Teaser enthält einen Titel und kann ein Bild, Text und darunter Links und/oder Attachment-Links enthalten.

Über sog. Referenz-Teaser kann man (im Related Content) auch Teaser von anderen Seiten einbinden.

Spezialfall Übersichtsseiten

Übersichtsseiten behandeln selbst keine Themen, sondern geben einen Überblick über die Themen der untergeordneten Webseiten. Hier können Sie Teaser auch in der Mittelspalte der Seite einfügen, und zwar sowohl den Standard-Teaser wie auch einen speziellen Teaser (nur) für Übersichtsseiten (s. Kasten rechts). (Zusätzlich kann man auch hier Referenz-Teaser (s.o.) einfügen.)

A. Teaser (Text und Bild)

1. Klicken Sie im Bereich «Related Content» auf «Neue (Related) Content Komponente» > 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 dargestellt. 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 (inkl. dem Protokoll http:// oder https://) 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»

E-Mail-Links: Links zu E-Mailadressen müssen mit einem Workaround erstellt werden:

1. Erstellen Sie einen Externen Link
2. Geben Sie als URL ein: mailto:EMAILADRESSE (z.B. mailto:test@uzh.ch)

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

Inhaltsseite 3-spaltig (im Related Content)
Übersichts-Seite(im Related Content sowie Teaser und Spezial-Teaser im 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 Rel. Cont. sowie Teaser und Spezial-Teaser im Content)

Wir empfehlen, auch in den Übersichts-Templates die Teaser (= Informationsboxen) eher im Related Content (rechts) anzusiedeln, vor allem wenn sie nicht zentrale, sondern eher ergänzende Information enthalten.

(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
Beispiel 4: Kasten «Spezial-Teaser für Übersichtsseiten»