Round teaser

The ThemeWare® "Round teaser" is independent of its CMS block. You can use the teaser in other CMS blocks too. Just try out different blocks (for example with a different number of columns) to personalise your Shopping Experience.

Note: This element is only available in the ThemeWare® Pro Edition.

Configure element

You can configure the ThemeWare® "Round teaser" as follows:

  1. Click on the corresponding CMS block (1) to activate the "edit mode"

  2. Hover the mouse over the desired CMS element

  3. The "Element Settings" pop-up will open

  4. Make the desired changes

  5. Save your changes

You have now configured the CMS element.


The configuration of the "Round teaser" is quite self-explanatory. The caption and the image are mandatory fields. That's all you really need to configure.

Note: Use images in square format for the "Round teaser".


In the tab "General" you configure the content of the element.


In the section "Title" you can enter the caption (2) for the teaser. This is a mandatory field.


In the section "Image" you define the background image (1) of the teaser. This is a mandatory field. Note: Use images in square format for the "Round teaser".

In the section "Link" you define the target of the teaser when it is clicked.


In the tab "Layout" you can configure the caption (2).


In section "Layout" you can configure the padding, the maximum width and the general background colour (1).


The section "Content" you can be used to configure the text alignment of the title (2).


In the "Title" section, the font, text colour, font weight, text formatting and background colour of the title (2) can be configured.

Content overlay

In the section "Content overlay" you can configure the vertical alignment, the horizontal alignment and the maximum width (e.g. 90% or 740px) of the content (=title) (2).


In the section "Hover" you can select a hover effect for the content (=title).

Coloured overlay

In the section "Coloured overlay" a coloured overlay can be activated and configured.


In tab "Advanced" you can configure CSS classes.

Expert settings

In section "Expert settings" you can enter one or more CSS classes separated by spaces. These classes are added to columns in certain CMS blocks.

Note: The "Expert settings" are intended for experts who are very familiar with CMS blocks, CMS elements and the Bootstrap grid system!

Layout tips

The "Round teaser" teaser rounds off the corners of images. This means you don't have to round off the corresponding motifs yourself in an image editing programme. Use square images to create a circular look.

Depending on the width of the block (this applies in particular to single-column blocks), the teaser can become very large. We therefore recommend using the teaser in multi-column blocks or configuring the maximum width of the teaser.

Maximum width

In single-column blocks, we recommend using the "Maximum width" configuration. This allows you to limit the width of the teaser. You can also use the "General" tab to align the teaser horizontally and vertically.


You can find some examples of use in our demo shops:

Last updated


© 2024 by ThemeWare® | Made with 💙 by TC-Innovations GmbH