CBK-001 Teaser

Wann wird die Komponente verwendet?

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.

Wann verwende ich einen Teaser?

  • Um auf neue oder relevante Inhalte aufmerksam zu machen
  • Für die Vorschau von Artikeln, News, Veranstaltungen oder Produkten
  • Als Einstiegselement auf Übersichts- oder Landingpages
  • Zur Bewerbung von Kampagnen, Angeboten oder Aktionen
  • Um Nutzer:innen gezielt weiterzuleiten und die Klickrate zu erhöhen

Wichtig: Ob und wie ein Teaser genau eingesetzt wird, hängt immer vom Ziel der Seite und dem gewünschten Nutzerverhalten ab.

Was gehört alles in den Teaser?

Folgende Funktionen & Informationen (Inhalte) soll ein Teaser im Standard enthalten:​

  • Titel
  • Asset (Grafik oder Video)
  • CTA Button(s)
  • Kurzer Text

Welche Teaser-Typen gibt es?

Der Teaser hat folgende Variationen:

  1. Action Links
  2. Linked Teaser
  3. Kombination: Action Links + Linked Teaser

Dialogfelder

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:

  1. Action Links
  2. Linked Teaser
  3. Kombination: Action Links + Linked Teaser
Dialogfeld Links der Teaser-Komponente unausgefüllt zeigt Link-Pfad ohne URL und Möglichkeit zum Hinzufügen von CTA

  • Pretitle: Dient als Dachzeile im Teaser, wird oberhalb des Titels angezeigt 
  • Title: Legt den Teaser-Titel fest
    • Heading-Element: Definiert den H-Tag, dieser sollte semantisch stimmig sein für den Teaser und den Seitenverlauf (Beispiel: keine H2 auf eine H3)
    • Get title from linked page: Standardmäßig angehakt, hierbei wird der Titel der Zielseite ausgegeben; lässt sich aushaken und manuell überschreiben
  • Description: Ein Freitextfeld für die Teaser-Beschreibung, enthält einen RTE zur weiteren Formatierung 
    • Standardmäßig ist für die Description der Haken 'Get description from linked page' angehakt. Dieser Haken kann wahlweise entfernt werden, sofern die ausgewählte Seite keine eigene Beschreibung hinterlegt hat.
Ansicht Dialogfeld Text unausgefüllt mit Feldern Pretitle, Title, Heading Element, Description

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:

  • Inherit featured image from page: Standardmäßig angehakt. Es wird automatisch das Titelbild der verlinkten Seite verwendet, sofern dies zuvor gepflegt wurde für die Zielseite. Ein Teaser ohne Link zieht sich automatisch kein Asset. Aushaken für manuelles Überschreiben.
  • Bild-Picker: Für die jeweilige Bildauswahl in AEM 
  • Alternative text for accessibility: Sollte ausgefüllt sein oder alternativ der Haken gesetzt sein darunter bei "Inherit from description of asset"
  • Don't provide an alternative text: standardmäßig nicht angehakt. Für Teaserbilder wird ein Alternativtext ausdrücklich empfohlen, um auch Nutzer:innen mit assistiven Technologien den Kontext und Informationsgehalt des Teasers zugänglich zu machen.
  • Disable lazy loading: Standardmäßig nicht angehakt. Sofern aktiviert, wird das Bild sofort beim Laden der Seite mitgeladen – auch wenn es erst weiter unten erscheint. Das kann sinnvoll sein, wenn das Bild sehr wichtig ist (z. B. bei obersten Teasern), aber es kann die Ladezeit der Seite beeinflussen.
Ansicht Asset Tab mit Warnfeld zur maximalen Bildgröße und angehakter Box "Inherit featured image from page" sowie Auswahlfeld für Bilder

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

  • None (Standardeinstellung)
  • Over image - Light 
  • Over image - Dark 
  • Image on top
  • Image on bottom
  • Image on left
  • Image on right

Set content alignment

  • None (Standardeinstellung)
  • Align content box to the top
  • Align content box in the middle
  • Align content box to the bottom
Styles Tab zeigt Dropdown-Menü Variant mit Voreinstellung None sowie Dropdown-Menü für Set content alignment mit Voreinstellung auf None

Teaser FAQ

Ja, es ist ebenfalls mögliche Teaser ohne Bild zu erstellen.

Dafür folgende Einstellungen im Tab Asset der Teaser-Komponente anpassen:

  • Haken entfernen in der Checkbox 'Inherit featured image from page'
  • Haken setzen in Checkbox 'Don't provide an alternative text'
Einstellungsbeispiel für Teaser ohne Bilder der Teaser-Komponente im Tab Asset mit angehakter Checkbox 'Don't provide an alternative text'

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:

  • Teaser-Variante: bestimmt das grundlegende Layout des Teasers (z. B. Bild oben oder Bild neben dem Text)
  • Alignment: beeinflusst die Ausrichtung und Darstellung von Text innerhalb des Teasers

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:

  • Entweder ein Linked Teaser ohne Buttons
  • oder ein Action Teaser mit bis zu zwei Buttons (ohne verlinkte Headline)

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:

  • Desktop: Teaser mit Variant-Style Image on left
  • Tablet: Teaser mit Variant-Style Image on left
  • Mobil:  Teaser mit Variant-Style Image on top

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):

  • Titel: ca. 40-60 Zeichen
  • Beschreibung: ca. 150-250 Zeichen
  • Button-Text: ca. 15-25 Zeichen

Diese Richtwerte helfen dabei, ein ausgewogenes Layout zu sichern und verhindern, dass Inhalte abgeschnitten oder unübersichtlich dargestellt werden.