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.

ThemeWare® "Round teaser"

Important: 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. Click on the "gear" icon (2) to configure the CMS element
4. The "Element Settings" pop-up will open

5. Make the desired changes

6. Save your changes

You have now configured the CMS element.

Configuring the ThemeWare® "Round teaser"

---

Configuration

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".

General

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

Content

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

Image

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".

Link

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

Layout

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

General

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

Content

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

Title

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).

Hover

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.

Elements of the "Round teaser"

SEO & Pagespeed

In the tab "SEO & Pagespeed" you can configure the HTML tag for the title and the "Lazy loading" of the image.

Advanced

You can select each HTML element of our teasers using the appropriate CSS classes. If you want to use your own CSS classes, you can insert them in the "Advanced" tab.

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.

---

Demo

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

Round teaserDemostore

ThemeWare® Demoshop => Round teaser