> 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 %}