Navigation auf uzh.ch

Suche

Magnolia CMS User Guide

Teaser

Beschreibung

Teaser sind kleine Kästchen, die ergänzende Informationen oder inhaltlich verwandte Themen zum Hauptinhalt einer Seite enthalten. Ein Teaser enthält einen Titel und kann ein Bild, Text und darunter Links enthalten.

Teaser befinden sich entweder im Related Content am Ende einer Seite oder im Related Content (Abschnitt) im Hauptteil der Seite. Auf Übersichtsseiten können Teaser auch im Content-Bereich sein.

Erstellung

A. Text

  1. Klicken Sie im Bereich «Related Content» auf «Neue Related Content Komponente» > Wählen Sie «Teaser» und bestätigen Sie mit «Auswählen»
  2. Zu «Darstellung»: Im neuen UZH-Design ist die Umstellung auf einen grauen Hintergrund nicht mehr möglich. Wir werden diese Auswahl in einem der kommenden CMS-Releases ausblenden.
  3. «Titel»: Geben Sie einen Titel ein (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 Text des Teasers ein.
    • Halten Sie den Text möglichst kurz
    • Setzen Sie keine Links. Dafür gibt es eine eigene Unterkomponente

B. Bild

  1. «Bild»: Wählen Sie ein Bild aus Ihren Assets.
    • Ein Bild wird oberhalb des Titels  dargestellt.
    • Beachten Sie die Bildgrösse
  2. «Alternativer Text»: Bezeichnen Sie hier das Bild mit Worten. Dieser Text wird in Screenreadern (=Browser für blinde oder sehbehinderte Personen) angezeigt.
  3. Link: Sie können ein Bild verlinken, der Titel wird dann automatisch auch verlinkt.
    • Linktyp: Wählen Sie, auf was Sie verlinken wollen. Webseite (intern, extern) oder Asset (asset).
      Je nach Linktyp wählen Sie das Ziel aus (intern, asset) oder geben eine vollständige URL ein (extern)

C. Reiter iframe

  1. «Quelle» Geben Sie hier die URL der Zielseite ein
  2. «Höhe»: Geben Sie die Höhe des iframe-Fensters an (in Pixeln). Die Breite ist 320px.
  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 angezeigt, falls das Laden der iframe-URL lange dauert.

D. Links

  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 Asset-Links) und bestätigen Sie mit «Auswählen»
    1. Interner Link: Wählen Sie die Zielseite und einen Linktext.
    2. Externer Link: Geben Sie die vollständige URL (inkl.  https://) und einen Linktext ein.
    3. Download Link: Wählen Sie die Datei aus Ihren Assets und einen Linktext.
    4. Link-Tooltip (Optional): Wird angezeigt, wenn der Cursor über dem Link ist

D.1. 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)

Beispiele

(siehe unten im Related Content)

Weiterführende Informationen

Beispiel 1: Teaser mit Text und Links

Ein Teaser braucht einen Titel und kann höchstens einen Textparagraphen enthalten. Links und Assets werden am Ende dargestellt.

Kuh

Beispiel 2: Teaser mit Bild und Text

Mehr zu Beispiel 2: Teaser mit Bild und Text

Ein Teaser kann ein Bild enthalten. Dieses wird oberhalb des Titels dargestellt.

Kuh

Beispiel 2: Teaser mit verlinktem Bild

Mehr zu Beispiel 2: Teaser mit verlinktem Bild

Ein Teaser-Bild kann verlinkt werden. Der Titel ist dann automatisch auch verlinkt.