Teaser

Feature of the Pro version

Content

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

The Lazy Loading (4) option ensures that the image is loaded eager or lazy. The Inherit option takes the global setting from the extension's basic settings.

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

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.

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.