> For the complete documentation index, see [llms.txt](https://docs.rh-webdesign.com/cms-bundle/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.rh-webdesign.com/cms-bundle/elemente/call-to-action/slider-banner.md).

# Slider - Banner

Der **Slider - Banner** vereint mehrere Call-to-Action-Banner in einem rotierenden Slider. Jeder Slide besitzt sein eigenes Hintergrundbild oder -video, eine Überschrift, einen Beschreibungstext und einen Button – ideal, um an prominenter Stelle mehrere Aktionen, Kollektionen oder Argumente nacheinander zu präsentieren.

Du legst beliebig viele Slides an, gestaltest jeden einzeln und steuerst zentral, wie sich der Slider verhält – von der Übergangsanimation über die Navigation bis zur minimalen Höhe je Endgerät.

<figure><img src="/files/XL8WBeZYPCVzStp5UNP2" alt=""><figcaption><p>Beispiel im Storefront: ein Slide mit Hintergrundbild, Overlay, Texten und Button samt Slider-Navigation</p></figcaption></figure>

{% hint style="success" %}
**Tipp für ein starkes Ergebnis**

Wähle Motive mit ruhigen Flächen für deinen Text und setze bei kontrastarmen Bildern den **Inhalts-Hintergrund** auf „Overlay dunkel". So bleiben Überschrift und Button auf jedem Slide gut lesbar.
{% endhint %}

### Slides

Im ersten Reiter legst du die einzelnen Slides an. Jeder Eintrag lässt sich aufklappen und besitzt die Unterreiter **Inhalt**, **Button**, **Hintergrund** und **Farben**. Über die Symbole oben rechts kannst du einen Slide duplizieren, verschieben oder löschen; mit **„Neuer Slide"** legst du einen weiteren an.

<figure><img src="/files/LPLPO3T2yYy5GMFSMc5r" alt=""><figcaption></figcaption></figure>

<table><thead><tr><th width="287">Funktion</th><th>Beschreibung</th></tr></thead><tbody><tr><td>Name des Slides (1)</td><td>Wird nur in der Verwaltung angezeigt und hilft dir, die Slides auseinanderzuhalten.</td></tr><tr><td>Anzeigemodus (2)</td><td><strong>Standard</strong> nutzt das vorgefertigte Layout mit Überschrift, Text und Button. <strong>Individuell</strong> blendet stattdessen einen HTML-/Twig-Editor für komplett eigenen Inhalt ein.</td></tr><tr><td>Inhaltsposition (3)</td><td>Bestimmt, wo die Textbox auf dem Slide sitzt (z. B. mittig oder unten links). Daneben legst du den <strong>Inhalts-Hintergrund</strong> (etwa „Overlay dunkel" für bessere Lesbarkeit) und eine optionale <strong>Inhalt-Animation</strong> fest.</td></tr><tr><td>Unterüberschrift (4)</td><td>Optionale Zeile über der Hauptüberschrift.</td></tr><tr><td>Überschrift (5)</td><td>Die Hauptüberschrift des Slides.</td></tr><tr><td>Beschreibungstext (6)</td><td>Optionaler Text unterhalb der Überschrift.</td></tr></tbody></table>

Das Ziel des Slides legst du über den gemeinsamen Verlinkungs-Baustein fest. Sobald eine Verlinkung gesetzt ist, erscheint zusätzlich der Reiter **Button**.

{% content-ref url="/pages/Q0EbnJqtuAaJuN9BHAE0" %}
[Verlinkung](/cms-bundle/elemente/konfigurationsbausteine/verlinkung.md)
{% endcontent-ref %}

### Hintergrund

Im Unterreiter **Hintergrund** weist du dem Slide sein Bild oder Video zu und bestimmst dessen Darstellung.

<figure><img src="/files/2kuCqHbPbityuFp2VfHq" alt=""><figcaption></figcaption></figure>

<table><thead><tr><th width="287">Funktion</th><th>Beschreibung</th></tr></thead><tbody><tr><td>Hintergrundbild / Video hochladen (1)</td><td>Lade hier das Hintergrundmedium hoch oder weise ein vorhandenes Medium zu. Videos werden automatisch stummgeschaltet und in Schleife abgespielt.</td></tr><tr><td>Hintergrund-Animation (2)</td><td>Optionale Bewegung des Bildes: <strong>Keine</strong>, <strong>Bewegung</strong> oder <strong>Zoom</strong>. Bei Videos ist keine Animation möglich.</td></tr><tr><td>Hintergrundgröße (3)</td><td><strong>Ausfüllen</strong> füllt den gesamten Bereich, <strong>Beinhalten</strong> zeigt das vollständige Bild.</td></tr><tr><td>Hintergrundposition (4)</td><td>Legt fest, welcher Bildausschnitt sichtbar bleibt, wenn das Bild beschnitten wird.</td></tr></tbody></table>

### Farben

Im Unterreiter **Farben** stimmst du die Textfarben des Slides auf das Hintergrundbild ab.

<figure><img src="/files/ZkGn9jm35tYTyoL2sjE0" alt=""><figcaption></figcaption></figure>

<table><thead><tr><th width="287">Funktion</th><th>Beschreibung</th></tr></thead><tbody><tr><td>Unterüberschrift (1)</td><td>Textfarbe der Unterüberschrift.</td></tr><tr><td>Überschrift (2)</td><td>Textfarbe der Hauptüberschrift.</td></tr><tr><td>Text (3)</td><td>Textfarbe des Beschreibungstextes.</td></tr></tbody></table>

{% hint style="info" %}
Achte auf einen kräftigen Kontrast zwischen Text und Hintergrund. Über helle Bilder wirken dunkle Schriftfarben besser, über dunkle Bilder helle.
{% endhint %}

### Button

Die Gestaltung des Buttons – sichtbar, sobald eine Verlinkung gesetzt ist – erfolgt über den gemeinsamen Baustein:

{% content-ref url="/pages/IDCzxbLczQ60ESEzaHLK" %}
[Button](/cms-bundle/elemente/konfigurationsbausteine/button.md)
{% endcontent-ref %}

### Slides pro Reihe

Im Reiter **Slides pro Reihe** bestimmst du, wie viele Slides je Endgerät gleichzeitig nebeneinander erscheinen.

{% content-ref url="/pages/kXnecx9xgMjluse3dktl" %}
[Elemente pro Reihe](/cms-bundle/elemente/konfigurationsbausteine/elemente-pro-reihe.md)
{% endcontent-ref %}

### Typografie

Im Reiter **Typografie** kannst du abweichende Schriftgrößen für die einzelnen Endgeräte festlegen.

{% content-ref url="/pages/ZJ9dlvURdA2KvrRvb6W0" %}
[Schriftgröße](/cms-bundle/elemente/konfigurationsbausteine/schriftgrosse.md)
{% endcontent-ref %}

### Slider - Einstellungen

Im Reiter **Slider Einstellungen** steuerst du das Verhalten des gesamten Sliders. Der Unterreiter **Größe** legt die minimale Höhe je Endgerät fest.

<figure><img src="/files/Ebn7r2ACp3XFIR5u10s4" alt=""><figcaption></figcaption></figure>

<table><thead><tr><th width="287">Funktion</th><th>Beschreibung</th></tr></thead><tbody><tr><td>Min. Höhe (Mobil) (1)</td><td>Mindesthöhe des Sliders auf Mobilgeräten (in px oder vh).</td></tr><tr><td>Min. Höhe (Tablet) (2)</td><td>Mindesthöhe des Sliders auf Tablets.</td></tr><tr><td>Min. Höhe (Desktop) (3)</td><td>Mindesthöhe des Sliders auf dem Desktop.</td></tr></tbody></table>

Im Unterreiter **Erweitert** konfigurierst du Übergang und Navigation des Sliders.

<figure><img src="/files/xMQXZh8kp4duFGj85IxH" alt=""><figcaption></figcaption></figure>

<table><thead><tr><th width="287">Funktion</th><th>Beschreibung</th></tr></thead><tbody><tr><td>Achse des Sliders (1)</td><td>Laufrichtung des Sliders: <strong>Horizontal</strong> oder <strong>Vertikal</strong>.</td></tr><tr><td>Übergang der Slides (2)</td><td>Art des Übergangs: <strong>Karusell</strong> (seitliches Schieben) oder <strong>Fade in/out</strong> (Überblenden).</td></tr><tr><td>Start-Slide (3)</td><td>Mit welchem Slide der Slider startet (0 = erster Slide). Daneben stellst du Animationsdauer und den Abstand zwischen den Slides ein.</td></tr></tbody></table>

{% hint style="info" %}
Über die Unterreiter **Pfeilnavigation**, **Punktnavigation** und **Autoplay** legst du fest, ob Pfeile und Navigationspunkte erscheinen und ob der Slider automatisch durchläuft.
{% endhint %}

### SEO - Einstellungen

{% content-ref url="/pages/LHlzFdFr8hVLrftTJKPh" %}
[SEO](/cms-bundle/elemente/konfigurationsbausteine/seo.md)
{% endcontent-ref %}


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.rh-webdesign.com/cms-bundle/elemente/call-to-action/slider-banner.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.