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: 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)
Click on the "gear" icon (3) to configure the CMS element
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 "Text slide" is quite self-explanatory. The image and the text are mandatory fields. That's all you really need to configure.
In the tab "General" you configure the content of the element.
Image
In the section "Image" you define the background image (1) of the slide. This is a mandatory field.
Content
In the section "Content" you can enter the teaser text, the headline (3) and the text (4) for the slide. The text is a mandatory field.
Link
In the section "Link" you define the target of the teaser when it is clicked.
In the tab "Layout" you can configure general settings, the overlay (2), the text (3, 4, 5) in the overlay and a coloured overlay.
General
In the section "General" you can configure the padding (inner spacing) and the border radius (border-radius).
Content
In the section "Content" you configure the text alignment and the text shadow.
Teaser
In the section "Teaser" you can configure the font and text colour for the teaser (3).
Headline
In the section "Headline" you can configure the font and text colour for the headline (4).
Text
In the tab "Responsive" you can optimise the representation for mobile viewports. Here you can configure breakpoints for the image display mode and the text overlay.
Image
In 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.
Text
In the section "Text" the breakpoint for the text can be configured. From this breakpoint on, the text overlays the image. Additionally, you can configure a background colour for the text area, which is displayed when the text is shown below the image.
In the tab "Slide" you can configure the slide interval (display duration in milliseconds). Additionally, in the section "Scheduling" you can optionally set a start date and end date to display the slide only within a specific time period.
In the tab "SEO & Pagespeed" you can configure the HTML tag for the headline and 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.
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.
You can find some examples of use in our demo shops:
Content overlay
In 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. Additionally, you can configure the overlay sizing and select a backdrop effect (e.g. Blur).
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 overlay
In the section "Colour overlay" a colour overlay can be activated and configured.
Important: The "automatic transition" (autoplay) is disabled (from version 3.7 or 4.0) due to accessibility concerns. You can finde more information:
The ThemeWare® CMS element "Call-to-Action slide (Hero slider)" is explicitly intended for use in the CMS block "Hero slider (...)". The CMS element is not designed for use in other CMS blocks and does not work in other CMS blocks.
Important: This element is only available in the ThemeWare® Pro Edition.
You can configure the ThemeWare® CMS element "Call-to-Action 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)
Click on the "gear" icon (3) to configure the CMS element
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 "Call-to-Action slide" is quite self-explanatory. The image, the text and the button text are mandatory fields. That's all you really need to configure.
In the tab "General" you configure the content of the element.
Image
In the section "Image" you define the background image (1) of the slide. This is a mandatory field.
Content
In the section "Content" you can enter the teaser text (3), the headline (4), the text (5) and the button text (6) for the slide. The text and the button text are mandatory fields.
Link
In the section "Link" you define the target of the teaser when it is clicked.
In the tab "Layout" you can configure general settings, the overlay (2), the text (3, 4, 5) in the overlay, the button (6) and a coloured overlay.
General
In the section "General" you can configure the padding (inner spacing) and the border radius (border-radius).
Content
In the section "Content" you configure the text alignment and the text shadow.
Teaser
In the section "Teaser" you can configure the font and text colour for the teaser (3).
Headline
In the section "Headline" you can configure the font and text colour for the headline (4).
Text
In the tab "Responsive" you can optimise the representation for mobile viewports. Here you can configure breakpoints for the image display mode and the text overlay.
Image
In 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.
Text
In the section "Text" the breakpoint for the text can be configured. From this breakpoint on, the text overlays the image. Additionally, you can configure a background colour for the text area, which is displayed when the text is shown below the image.
In the tab "Slide" you can configure the slide interval (display duration in milliseconds). Additionally, in the section "Scheduling" you can optionally set a start date and end date to display the slide only within a specific time period.
In the tab "SEO & Pagespeed" you can configure the HTML tag for the headline and 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.
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.
You can find some examples of use in our demo shops:
Button
In the section "Button" you can configure the button style (the colour) and determine whether the button (6) should be filled or represented as an outline button.
Content overlay
In 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. Additionally, you can configure the overlay sizing and select a backdrop effect (e.g. Blur).
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 overlay
In the section "Colour overlay" a colour overlay can be activated and configured.
Important: The "automatic transition" (autoplay) is disabled (from version 3.7 or 4.0) due to accessibility concerns. You can finde more information:
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.
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)
Click on the "gear" icon (3) to configure the CMS element
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.
Image
In the section "Image" you define the background image (1) of the slide. This is a mandatory field.
Link
In the section "Link" you define the target of the teaser when it is clicked.
In the tab "Layout" you can configure general settings and a coloured overlay.
General
In the section "General" you can configure the border radius (border-radius).
Colour overlay
In 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.
Image
In 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 "Slide" you can configure the slide interval (display duration in milliseconds). Additionally, in the section "Scheduling" you can optionally set a start date and end date to display the slide only within a specific time period.
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:
Important: The "automatic transition" (autoplay) is disabled (from version 3.7 or 4.0) due to accessibility concerns. You can finde more information:
Die ThemeWare® Hero slider elements (slides) sind explizit für die Verwendung im CMS-Block "Hero slider (...)" (siehe Hero slider) vorgesehen. Die Elemente sind nicht für die Nutzung in anderen CMS-Blöcken ausgelegt und funktionieren nicht in anderen CMS-Blöcken.
Füge den CMS-Block des gewünschten Hero-Slider einfach per Drag’n’Drop deiner Erlebniswelt hinzu. Mehr Informationen dazu findest du in der folgenden Anleitung:
Note: You can find the "Hero slider" blocks in the "ThemeWare® General" section [Pro]
Der ThemeWare® Hero-Slider ist mit Elementen befüllt. Du kannst diese gegen austauschen:
Klicke auf den entsprechenden CMS-Block (1) um den Bearbeitungsmodus zu aktivieren
Navigiere mit der Pfeil-Navigation zum gewünschten Element (2)
Klicke auf das "Austauschen"-Icon (3) um das CMS-Element zu konfigurieren
Es öffnet sich das Pop-up "Element auswählen"
Du hast nun das CMS-Element ausgetauscht.
You can find some examples of use in our demo shops:
Wähle das gewünschte CMS-Element (z.B. "Call-to-Action-Slide (Hero-Slider)") aus (4)
