# Teaser
> Feature der Pro Version
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
Die Standard-Darstellung des Teasers. Neben dem Teaser-Bild, Text und optionalen Animationen wurden keine Einstellungen verändert.
### Teaser mit Transparenzen und abgerundeten Ecken
In diesem Beispiel sind die Einstellungen der **minimalen Breite (5)** und der **maximalen Breite (6)** entscheidend.
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.
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.
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://themedocs.zenit.design/content/erlebniswelten/bloecke/elemente/teaser.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.