Image slide (Hero slider)
Last updated
Last updated
© 2024 by ThemeWare® | Made with 💙 by TC-Innovations GmbH
Note: This article is work in progress.
Das ThemeWare® CMS-Element "Image 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.
Note: 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.
Important: This element is only available in the ThemeWare® Pro Edition.
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)
The "Element settings" pop-up will open
Make the desired changes
Save your changes
You have now configured the CMS element.
The configuration of the "Image slide" is quite self-explanatory. The image is a mandatory field. That's all you need to configure.
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.
LinkIn the section "Link" you define the target of the teaser when it is clicked.
In the tab "Layout" you can configure a coloured overlay.
Colour overlayIn the section "Colour overlay" a colour overlay can be activated and configured.
In the tab "Responsive" you can optimise the representation for mobile viewports. Here you can configure the breakpoint for the image display mode.
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.
...
In the tab "SEO & Pagespeed" you can configure the "Lazy loading" of the image.
You can select each HTML element of our slides using the appropriate CSS classes. If you want to use your own CSS classes, you can insert them in the "Advanced" tab.
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.
You can find some examples of use in our demo shops:
Click on the "gear" icon (3) to configure the CMS element
.png){kind=icon}