Skip to content

Slider:The formatter "Hero image slider with CTA display"

The slider creates a slide show or an image carousel with a configurable interval where images with texts are displayed.

The slider variant hero image slider with CTA (Call to action) display always displays a large image with subtext formatted as CTA button in alternating sequence. A link should also be provided to the image.

A number of element settings can be used to e.g. adjust the display duration of an image or the layout on mobile devices.

Sonnenuntergang fotografiert von der linken Rheinseite. Man sieht den Kölner Dom und die Hohenzollernbrücke.
Sonnenuntergang fotografiert von der linken Rheinseite. Man sieht den Kölner Dom und die Hohenzollernbrücke.
Sonnenuntergang fotografiert von der linken Rheinseite. Man sieht den Kölner Dom und die Hohenzollernbrücke.
Sonnenuntergang fotografiert von der linken Rheinseite. Man sieht den Kölner Dom und die Hohenzollernbrücke.
Sonnenuntergang fotografiert von der linken Rheinseite. Man sieht den Kölner Dom und die Hohenzollernbrücke.
View across the Rhine to Cologne Cathedral
Sunset and Hohenzollern Bridge included
More info
Cologne Cathedral at night
Cologne Cathedral at night
Cologne Cathedral at night
Cologne Cathedral at night
Cologne Cathedral at night
Cologne Cathedral at night
The stars twinkle too
More info
View from Cologne Cathedral
View from Cologne Cathedral
View from Cologne Cathedral
View from Cologne Cathedral
View from Cologne Cathedral
View from Cologne Cathedral
Across the Hohenzollern Bridge to Deutz
More info
Cologne Cathedral from the front
Cologne Cathedral from the front
Cologne Cathedral from the front
Cologne Cathedral from the front
Cologne Cathedral from the front
Cologne Cathedral from the front
This is dummy text. It can be used to check if all the letters are there.
Pneumonoultramicroscopicsilicovolcanoconiosis
Cologne Cathedral in the evening
Cologne Cathedral in the evening
Cologne Cathedral in the evening
Cologne Cathedral in the evening
Cologne Cathedral in the evening
Cologne Cathedral in the evening
Foreign language phrases are often included in dummy text.
Almost every font looks good in Latin.

There are a number of effects available for the hero image slider that can be customized individually.

Available element settings

Allows to change the element layout using predefined CSS modifications.

Please note that a specific element may not support all listed modifications.

Controls if and how the headline is displayed.

In addition to the display size the importance of the headline is relevant for search engines (SEO).

Controls in which screen size the element is visible or hidden.

The image format for small screens like smartphones.

Allows you to set the image size based on common formats.

The image will automatically be scaled so that the original pixels are best fitted to the selected target format.

Instead of the presets, you can also manually enter any format. Use "width-height", for example "5-1" for an extreme wide format.

The image format for large desktop screens.

Allows you to set the image size based on common formats.

The image will automatically be scaled so that the original pixels are best fitted to the selected target format.

Instead of the presets, you can also manually enter any format. Use "width-height", for example "5-1" for an extreme wide format.

The time until the next image rotation.
Controls the margin between the images.
Selects the effect when the slides are changed.
Controls the speed of the transition effect itself.

Controls if the text title of the images should be shown as a headline.

This is relevant for search engines (SEO) and will not change the visual "size" of the title.

Controls if and how clickable dots are shown for each image.
If checked, navigation arrows are shown.
If checked, the image rotation is stopped while hovering the slider.

Controls if the copyright information for images is displayed as an overlay.