# Teaser

> Feature of the Pro version

![](https://2915610672-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4i6VN0FeNAgRFLwVM2Cr%2Fuploads%2FpdVmS2BdCq1j29xGCPfY%2Fdocs-de-teaser-element.jpg?alt=media\&token=778159e2-592f-4c0e-878f-e0dc1be37715)

## Content

In the **Content** tab there is a **text field (1)** for creating the text on the **Teaser image (2)**.

The **Lazy Loading (3)** option lets you choose whether the image should load immediately (`eager`) or only when it comes into view while scrolling (`lazy`). If you select `Inherited`, the setting will automatically use the global configuration defined in the extension’s basic settings.

**Mark images as decorative (4)** determines, in terms of accessibility, whether the image is used solely for decorative purposes and should not be detected by screen readers.

The option **Load image with higher priority (5)** marks the image with a high loading priority (`fetchpriority="high"`) in the HTML. This ensures the image is loaded earlier by the browser and becomes visible faster — ideal for above-the-fold elements.

You can link the entire teaser. With **Link-Type (6)** you have the option of simply entering a URL or selecting products or categories directly.

The **Link description (8)** will be read out by screen readers as link text and is important for accessibility.

Various **Mouse-Over and Mouse-Out effects (10)** let you control the visibility of the content on the banner image. For example, the content can only become visible when the mouse is over or disappear when the mouse is moved over the image, so that the image becomes completely visible.

Custom classes can be added in the **CSS classes (11)** field. This allows you to specifically target the element with your own CSS code or apply existing styling by assigning a predefined class to the element.

<figure><img src="https://2915610672-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4i6VN0FeNAgRFLwVM2Cr%2Fuploads%2FG4sswT1acP4MkD6vXIEE%2Fdocs-en-config-shopping-experiences-elements-teaser-content.webp?alt=media&#x26;token=37b1f9c9-4f9b-49e2-a0df-0f71136f53be" alt=""><figcaption></figcaption></figure>

## Configuration examples

In the element configuration you can create a lot of different teaser layouts. We have selected and explained a few fundamentally different teaser configurations.

### Teaser as button teaser

![](https://2915610672-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4i6VN0FeNAgRFLwVM2Cr%2Fuploads%2FDh7oWaBEBriaHvqtxVGh%2Fdocs-de-teaser-element-button-example.png?alt=media\&token=708f9d3b-ef25-40ac-80f3-f4310115f3d3)

The default display of the teaser. Besides the teaser image, text and optional animations.

### Teaser with transparencies and rounded corners

![](https://2915610672-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4i6VN0FeNAgRFLwVM2Cr%2Fuploads%2Fr7rZDUPY9pHuCscp40Z8%2Fdocs-de-teaser-element-transparent-example.png?alt=media\&token=405af3dd-e9d8-47cd-aebc-0e4d8aae8518)

In this example, the settings of **Min width (5)** and the **Max width (6)** are crucial.

![](https://2915610672-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4i6VN0FeNAgRFLwVM2Cr%2Fuploads%2FobGohFhfVjplL3Zt8HFE%2Fdocs-en-shopping-experiences-elements-teaser-text-settings.png?alt=media\&token=e63b906f-441a-470f-a26e-3328542207c5)

A slightly larger **Font-size (1)** and **Font weight (2)** make the text a little bit stronger.

The white **Text color (3)** is set on a partially transparent **Background (4)**. Notice that in the color picker in the alpha field, the visibility has been set to `80`.

The **Min width (5)** of 100% ensures that the text container is stretched over the entire width of the teaser. The **Max width (6)** must then also be 100% or empty.

**Custom paddings (7)** provides more space in the selected **Background (4)** around the text. In order for the text container to reach the edge of the teaser, the **Margins (8)** must be set to `0`.

![](https://2915610672-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4i6VN0FeNAgRFLwVM2Cr%2Fuploads%2FUCofzLkAiZYWvGRXWkLG%2Fdocs-en-shopping-experiences-elements-teaser-image-settings.png?alt=media\&token=4946caae-e238-46c3-9bb9-da40dbc2ebd8)

If the entire teaser element is to have **Rounded corners (1)**, these can be activated and set.

An optional zoom effect as an **Image hover (2)** brings a little movement into play.