Teaser

Teaser elements are used to visually link categories or other important pages.

Feature of the Pro version

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.

Various Mouse-Over and Mouse-Out effects (7) 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 (8) 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.

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

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

Teaser with transparencies and rounded corners

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

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.

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.