Text slide (Hero slider)
Note: This article is work in progress.
Das ThemeWare® CMS-Element "Text slide (Hero slider)" ist explizit für die Verwendung im CMS-Block "Hero slider (...)" vorgesehen. Das CMS-Element ist nicht für die Nutzung in anderen CMS-Blöcken ausgelegt und funktioniert nicht in anderen CMS-Blöcken.
Important: The element is explicitly intended for use in its own CMS block. It is not designed for use in other CMS blocks and therefore cannot be exchanged or placed in other blocks.
Note: This element is only available in the ThemeWare® Pro Edition.
Configure element
You can configure the ThemeWare® CMS element "Text slide (Hero slider)" as follows:
Click on the corresponding CMS block (1) to activate the "edit mode"
Navigate to the desired CMS element using the arrow navigation (2)
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 "Text slide" is quite self-explanatory. The image and the text are mandatory fields. That's all you really need to configure.
General
In the tab "General" you configure the content of the element.
ImageIn the section "Image" you define the background image (1) of the slide. This is a mandatory field.
TextIn the section "Text" you can enter the teaser text, the headline (3) and the text (4) for the slide. The text is a mandatory field.
LinkIn the section "Link" you define the target of the teaser when it is clicked.
Note: The text area is HTML-capable. However, links <a> should not be used if the configuration "Entire element clickable" is used, as this interferes with the actual linking of the slide.
Layout
In the tab "Layout" you can configure the overlay (2), the text (3, 4, 5) in the overlay and a coloured overlay.
TextIn the section "Text" you can configure the font and text colour for the teaser (3), the headline (4) and the text (5).
Content overlayIn the section "Content overlay" you configure the overlay (2). Here you can configure the horizontal alignment and the vertical alignment of the overlay. You can also select a fade-in animation and set the width (e.g. 100%) and the maximum width (e.g. 50%) for the overlay.
With the configuration "Apply overlay styling" you can activate configuration fields for styling the overlay. Here you can set the background colour, select a box shadow and rounded corners.
Colour overlayIn the section "Colour overlay" a colour overlay can be activated and configured.
Responsive
...
ImageIn the section "Image" you can configure the display mode of the image. With the breakpoint you can define when the display mode of the image should change (e.g. from 'cover' to 'contain'). In this way you can, for example, guarantee a minimum height in mobile viewports.
TextIn the section "Text" the breakpoint for the text can be configured. From this breakpoint on, the text overlays the image.
Slide
...
Breakpoint
Image
The image of the Hero slides is usually displayed in display mode 'contain' (1). It scales, while maintaining the aspect ratio, to the full width of the slide.
Since ThemeWare® 2.1 you have the option of defining yourself whether the display mode should change to 'cover' (2) and if so, from which viewport. In the display mode 'cover' you must also configure the minimum height (3) of the slide. This determines the height of the slide and the image fills the slide while maintaining its aspect ratio. If necessary, the image is cropped (4) to fit.
Text
The text in the Hero slides usually overlays the image. In smaller viewports, this may no longer fit perfectly, especially with long texts, so the text is displayed below the image on mobile devices.
Since ThemeWare® 2.1 you have the option to define yourself whether the text should be displayed on top of the image, and if so, from which viewport.
Demo
You can find some examples of use in our demo shops:
Last updated
.png){kind=icon}
