# Text slide (Hero slider) {% hint style="info" %} **Note**: This article is work in progress. {% endhint %} 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.

ThemeWare® "Text slide (Hero slider)"

{% hint style="info" %} **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. {% endhint %} {% hint style="warning" %} **Important**: This element is only available in the ThemeWare® Pro Edition. {% endhint %} *** ## Configure element You can configure the ThemeWare® CMS element "Text slide (Hero slider)" as follows: 1. Click on the corresponding CMS block (1) to activate the "edit mode" 2. Navigate to the desired CMS element using the arrow navigation (2) 3. Click on the ![](https://3369454551-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FyzUEL0OiJhd4m6fQWdQe%2Fuploads%2F2PucLINZ7mAqvu1W2yKk%2Ficon-cog.png?alt=media\&token=56e34152-66e8-4707-8c19-3621b8f2448e) "gear" icon (3) to configure the CMS element 4. The "Element settings" pop-up will open 5. Make the desired changes 6. Save your changes You have now configured the CMS element.

ThemeWare® "Text slide" konfigurieren

*** ## 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. > **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. {% hint style="info" %} **Note**: The text area is **HTML**-capable. However, links `` should not be used if the configuration "Entire element clickable" is used, as this interferes with the actual linking of the slide. {% endhint %} ### Layout 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 section "Text" you can configure the **font** and **text colour** for the text (5). > > **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.

Elements of the "Text slide"

### Responsive 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. ### Slide 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. {% hint style="warning" %} **Important**: The "automatic transition" (autoplay) is disabled (from version 3.7 or 4.0) due to accessibility concerns. You can finde more information: [#autoplay-and-accessibility](https://docs.themeware.design/additional-features/cms-blocks/hero-slider#autoplay-and-accessibility "mention") {% endhint %} ### SEO & Pagespeed In the tab "SEO & Pagespeed" you can configure the HTML tag for the headline and the "Lazy loading" of the image. ### Advanced 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. *** ## 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.

Disply mode 'contain'

Disply mode 'cover'

Disply mode 'cover' in detail

### 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.

Text below the image

Text overlays the image

*** ## **Demo** You can find some examples of use in our demo shops: {% embed url="" %} ThemeWare® Demoshop => Hero slider {% endembed %}