Teaser

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

Feature of the Pro version

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.