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.
Es stehen unterschiedliche Teaser-Typen als einzelne Komponenten zur Verfügung.
Der Teaser Horizonal ermöglicht die Darstellung eines Bildes wahlweise links oder rechts des Textbereichs. Er wird primär über die gesamte verfügbare Spaltenbreite verwendet.
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.
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:
In den Styles-Einstellungen kann im Dropdown Variant wie folgt gewählt werden zwischen
Mit der standardisierten Einstellung None erscheint das Bild im Teaser automatisch oberhalb des Textes.
Die Styling-Variante 'None' entspricht der Einstellung 'Image on left' und ist daher nicht gesondert aufgebaut.
Darstellung:
Darstellung:
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.
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.
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.
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.
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.
