Die Teaser-Komponente dient dazu, auf einfache Weise einen visuellen und textlichen Teaser für weiterführende Inhalte zu erstellen. Ein Teaser kombiniert ein Bild, einen Titel, Rich-Text und optional Links oder Aktionsaufrufe (Call-to-Actions) und leitet zu anderen Seiten innerhalb von Coop oder externen Auftritten weiter.
Die verschiedenen Einstellungsmodi der Teaser-Komponente ermöglichen Redakteur:innen ein hohes Maß an Gestaltungsfreiheit, um Inhalte flexibel und zielgerichtet anzupassen.
Wichtig: Ob und wie ein Teaser genau eingesetzt wird, hängt immer vom Ziel der Seite und dem gewünschten Nutzerverhalten ab.
Folgende Funktionen & Informationen (Inhalte) soll ein Teaser im Standard enthalten:
Der Teaser hat folgende Variationen:
Im Dialogfeld Links kann die Zielseite bzw. können die Zielseiten definiert und verknüpft werden. Dabei sind sowohl interne als auch externe Verlinkungen möglich.
Der Teaser hat folgende Variationen:
Unter Asset wird das Bild für den Teaser ausgewählt. Ein Teaserbild ist optional. Je nach gewünschtem Ziel des Teasers aber empfehlenswert.
Folgende Felder stehen zur Verfügung:
Unter Styles lassen sich die Teaser-Varianten auswählen, die die Darstellung beeinflussen (Variant) sowie die Ausrichtung (Set content alignment). Die einzelnen Akkordeons zeigen die einzelnen Ausprägungen.
Die Ausprägungen sind auf der Teaser-Variationsseite aufgebaut.
Verfügbar sind folgende Dropdown-Menüs mit diesen Einstellungen:
Variant
Set content alignment
Ja, es ist ebenfalls mögliche Teaser ohne Bild zu erstellen.
Dafür folgende Einstellungen im Tab Asset der Teaser-Komponente anpassen:
Das Einbinden von Videos in der Teaser-Komponente ist derzeit nicht möglich. Als Alternative lassen sich Bilder als Asset-Quelle auswählen und das Video kann per CTA-Button extern verlinkt sein.
Die Reihenfolge von Text, Bild und Button im Teaser ist nicht frei wählbar. Eine individuelle Anordnung der einzelnen Elemente ist aus redaktioneller Sicht nicht vorgesehen.
Über den Tab „Styles“ stehen jedoch zwei Dropdown-Menüs zur Verfügung:
Weitere Anpassungen der Element-Reihenfolge sind nicht möglich.
Ein Link im Teaser ist nicht zwingend erforderlich. Der Teaser kann auch ohne Verlinkung verwendet werden, beispielsweise als rein visueller oder informativer Hinweis innerhalb der Seite.
Die verfügbaren Einstellungen zur Darstellung und Gestaltung im Tab Styles bleiben dabei vollständig nutzbar. Eine Verlinkung ist lediglich notwendig, wenn der Teaser als Navigationselement zu einer anderen Seite oder einem Inhalt führen soll.
Für die Anzahl der Call-to-Actions im Teaser gibt es keine technische Begrenzung. Es ist möglich, sowohl einen Linked Teaser, einen Action Teaser oder auch beide Varianten zu nutzen.
Entscheidend ist, dass der Zweck des Teasers für Nutzer:innen klar erkennbar bleibt. Zu viele CTAs können überladen wirken und vom eigentlichen Ziel ablenken.
Redaktionelle Empfehlung:
Diese Varianten unterstützen eine klare Nutzerführung.
Die Teaser-Komponente passt sich nicht automatisch an alle Bildschirmgrößen an. Das Layout muss je nach Endgerät gezielt gesteuert werden.
Damit der Teaser auf Desktop, Tablet und Smartphone gut aussieht, sollte für jede Gerätegröße eine passende Variante ausgewählt werden.
Beispiel für eine sinnvolle Verteilung:
Eine Vererbung von Teasern ist nicht vorgesehen. Teaser lassen sich jedoch manuell kopieren und auf anderen Seiten einfügen.
Wird ein Teaser mehrfach verwendet, handelt es sich jeweils um eine unabhängige Kopie. Änderungen an einem Teaser wirken sich daher nicht automatisch auf andere Seiten aus. Alle Versionen müssen einzeln angepasst werden, wenn inhaltliche oder gestalterische Änderungen erforderlich sind.
Im Teaser kann jedoch bei Auswahl der Zielseite der Inhalt (Text, Title, Bild) übernommen werden, sofern dies in den Seiteneigenschaften gepflegt ist. Dies erleichtert die Pflege insgesamt, setzt aber voraus die Seiteneigenschaften bewusst mitzupflegen und aktuell zu halten.
In den Eingabefeldern für Titel, Beschreibung und Button-Text besteht keine technische Begrenzung. Damit die Darstellung jedoch auf möglichst vielen Geräten und Bildschirmgrößen übersichtlich bleibt, gelten folgende redaktionelle Empfehlungen (inklusive Leerzeichen):
Diese Richtwerte helfen dabei, ein ausgewogenes Layout zu sichern und verhindern, dass Inhalte abgeschnitten oder unübersichtlich dargestellt werden.