> For the complete documentation index, see [llms.txt](https://themedocs.zenit.design/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://themedocs.zenit.design/content/erlebniswelten/bloecke/elemente/teaser.md). # Teaser > Feature der Pro Version ![](/files/MJufimu22o6ULFr0EyJt) Teaser Elemente werden dazu genutzt um Kategorien oder andere wichtige Bereiche bildlich zu verlinken. ## Inhalt Im Tab **Inhalt** befindet sich ein **Textfeld (1)** zum Hinterlegen des Textes auf dem **Teaser Bild (2)**. Mit der Option **Lazy Loading (3)** kannst du festlegen, ob das Bild sofort (`eager`) oder erst beim Scrollen in den sichtbaren Bereich (`lazy`) geladen wird. Wählst du `Vererbt`, wird automatisch die globale Einstellung aus den Grundeinstellungen der Erweiterung übernommen. **Bilder als ausschließlich dekorativ kennzeichnen (4)** bestimmt im Sinne der Barrierefreiheit, ob das Bild nur dekorativ verwendet wird und nicht von Screenreadern erfasst werden soll. Mit der Option **Bild priorisiert laden (5)** wird das Bild mit einer hohen Ladepriorität (`fetchpriority="high"`) im HTML markiert. Dadurch wird das Bild bevorzugt vom Browser geladen und erscheint schneller sichtbar im sichtbaren Bereich – ideal für Above-the-Fold-Elemente. Du kannst einen Link auf dem Teaser hinterlegen. Dazu besteht mit **Link-Typ (6)** die Möglichkeit, eine einfache URL zu hinterlegen oder auch direkt Produkte oder Kategorien auszuwählen. Die **Linkbeschreibung (8)** wird zum Auslesen des Links von Screenreadern genutzt und ist ein wichtiger Bestandteil für die Barrierefreiheit. Verschiedene **Mouse-Over und Mouse-Out Effekte (10)** lassen Dich die Sichtbarkeit der Inhalte auf dem Banner Bild steuern. So können beispielsweise auch die Inhalte erst beim Mouse-Over sichtbar werden oder verschwinden, wenn die Maus über das Bild bewegt wird, sodass das Bild vollständig sichtbar wird. Benutzerdefinierte Klassen lassen sich im Feld **CSS-Klassen (11)** hinterlegen. Das erlaubt es, das Element mit eigenem CSS Code zielsicher zu selektieren oder bereits vorhandenes Styling per Klasse an das Element zu binden.
## Konfigurationsbeispiele Mit Hilfe der Element-Konfiguration lassen sich sehr viele sehr unterschiedliche Teaser-Looks erstellen. Wir haben uns einmal ein paar grundlegend unterschiedlichen Teaser-Konfiguration herausgesucht und erläutert. ### Teaser als Button-Teaser ![](/files/1kpSj92qrdQ9JieUK6D5) Die Standard-Darstellung des Teasers. Neben dem Teaser-Bild, Text und optionalen Animationen wurden keine Einstellungen verändert. ### Teaser mit Transparenzen und abgerundeten Ecken ![](/files/SqonVU73elgAyO3FdbI7) In diesem Beispiel sind die Einstellungen der **minimalen Breite (5)** und der **maximalen Breite (6)** entscheidend. ![](/files/mGxzT601aWmdXddM7BKL) Eine etwas größere **Schriftgröße (1)** und **Schriftgewicht (2)** machen den text etwas kräftiger. Die weiße **Textfarbe (3)** wird auf einen teiltransparenten **Hintergrund (4)** gesetzt. Beachte, dass im Color-Picker im Feld *Alpha* die Sichtbarkeit auf `80` gestellt wurde. Die **minimale Breite (5)** von `100%` sorgt dafür, dass der Text-Container über die gesamte Breite des Teasers gestreckt wird. Die **maximale Breite (6)** muss dann ebenfalls `100%` betragen oder leer sein. **Individuelle Innenabstände (7)** sorgen für mehr Raum in der gewählten Hintergrundfarbe (4) um den Text herum. Damit der Text-Container bis an den Rand des Teaser geht, müssen die **Außenabstände (8)** genullt werden. ![](/files/idNP9mJ0lqoeK0eTCUSk) Soll das gesamte Teaser-Element **abgerundete Ecken (1)** erhalten, können diese aktiviert und eingestellt werden. Ein optionaler Zoom Effekt als Bild **Mouse-Over (2)** bringt noch ein wenig Bewegung ins Spiel.