Coop
Standorte
Impressum
044 123 45 67
Kontakt

CBK-001 Teaser Variationsseite

Auf dieser Seite wird verdeutlicht, wie die Komponente in den unterschiedlichen Konfigurationen dargestellt wird. Zur vereinfachten Darstellung ist der benutzte Text ein standardisierter Platzhalter-Text.

Übersicht Teaser-Typen

Per Klick direkt auf das jeweilige Beispiel springen. Es sind noch weitere Kombinationen des Karussells möglich, die Liste gibt die gängigen Einstellungen wieder.

Typen

Text und Asset Darstellung allgemein

Darstellungsbeispiel:

  • Zwei Buttons (primär und sekundär) zu zwei unterschiedlichen internen Seiten
  • Nur die definierten CTAs sind klickbar, die weiteren Bestandteile im Teaser bleiben unverlinkt.
  • Hover-Effekt auf CTA-Buttons zur visuellen Verdeutlichung der Klickbarkeit
Dialogfeld Links der Teaser-Komponente mit zwei angelegten CTA-Pfaden, Link-Pfad Feld darüber ist leer

Beispielteaser

Action Links

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea tak

CTA 1 CTA 2
Nahansicht zahlreicher aufeinanderliegender Fleischtomaten mit Bio-Siegeln

Kombi: Action und Linked Teaser

Darstellungsbeispiel:

  • Headline ist klickbar und spiegelt den Link-Pfad wieder
  • Zwei Buttons (primär und sekundär) zu zwei unterschiedlichen internen Seiten
  • Hover-Effekt auf CTA-Buttons und Headline zur visuellen Verdeutlichung der Klickbarkeit
Dialogfeld Links der Teaser-Komponente mit ausgefülltem Link-Pfad und zwei angelegten CTA-Pfaden

Beispielteaser

Kombi Action und Links

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea tak.

CTA 1 CTA 2
Nahansicht zahlreicher aufeinanderliegender Fleischtomaten mit Bio-Siegeln

Teaser ohne Asset

Für Teaser ohne Bilder muss im Tab Assets folgendes umgestellt werden:

  • Haken entfernen in der Checkbox 'Inherit featured image from page'
  • Haken setzen in Checkbox 'Don't provide an alternative text'

Die Varianten unter Styles sind entsprechend obsolet. Links und Text sind weiterhin möglich.

Lorem ipsum dolor sit amet, consetetur s

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea tak

Lorem ipsum dolor sit ame Lorem ipsum dolor sit ame

Stylingvarianten

Darstellung:

  • Das Asset erhält ein helles Overlay
  • Hover-Effekt bei Verlinkung
  • Die Schriftfarbe im Teaser bietet ausreichend Kontrast für die Lesbarkeit und Barrierefreiheit.

Darstellung:

  • Das Asset erhält ein dunkles Overlay
  • Hover-Effekt bei Verlinkung
  • Die Schriftfarbe im Teaser bietet ausreichend Kontrast für die Lesbarkeit und Barrierefreiheit.