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:
Click on the corresponding CMS block (1) to activate the "edit mode"
Hover the mouse over the desired CMS element
The "Element Settings" pop-up will open
Make the desired changes
Save your changes
You have now configured the CMS element.
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.
TitleIn the section "Title" you can enter the caption (2) for the teaser. This is a mandatory field.
ImageIn 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".
LinkIn 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).
GeneralIn section "Layout" you can configure the padding, the maximum width and the general background colour (1).
ContentThe section "Content" you can be used to configure the text alignment of the title (2).
TitleIn the "Title" section, the font, text colour, font weight, text formatting and background colour of the title (2) can be configured.
Content overlayIn 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).
HoverIn the section "Hover" you can select a hover effect for the content (=title).
Coloured overlayIn the section "Coloured overlay" a coloured overlay can be activated and configured.
Advanced
In tab "Advanced" you can configure CSS classes.
Expert settingsIn 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:
Last updated
.png){kind=icon}
