Slider - Banner
Mehrere Call-to-Action-Banner als rotierenden Slider ausspielen
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.
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.
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.
Name des Slides (1)
Wird nur in der Verwaltung angezeigt und hilft dir, die Slides auseinanderzuhalten.
Anzeigemodus (2)
Standard nutzt das vorgefertigte Layout mit Überschrift, Text und Button. Individuell blendet stattdessen einen HTML-/Twig-Editor für komplett eigenen Inhalt ein.
Inhaltsposition (3)
Bestimmt, wo die Textbox auf dem Slide sitzt (z. B. mittig oder unten links). Daneben legst du den Inhalts-Hintergrund (etwa „Overlay dunkel" für bessere Lesbarkeit) und eine optionale Inhalt-Animation fest.
Unterüberschrift (4)
Optionale Zeile über der Hauptüberschrift.
Überschrift (5)
Die Hauptüberschrift des Slides.
Beschreibungstext (6)
Optionaler Text unterhalb der Überschrift.
Das Ziel des Slides legst du über den gemeinsamen Verlinkungs-Baustein fest. Sobald eine Verlinkung gesetzt ist, erscheint zusätzlich der Reiter Button.
VerlinkungHintergrund
Im Unterreiter Hintergrund weist du dem Slide sein Bild oder Video zu und bestimmst dessen Darstellung.
Hintergrundbild / Video hochladen (1)
Lade hier das Hintergrundmedium hoch oder weise ein vorhandenes Medium zu. Videos werden automatisch stummgeschaltet und in Schleife abgespielt.
Hintergrund-Animation (2)
Optionale Bewegung des Bildes: Keine, Bewegung oder Zoom. Bei Videos ist keine Animation möglich.
Hintergrundgröße (3)
Ausfüllen füllt den gesamten Bereich, Beinhalten zeigt das vollständige Bild.
Hintergrundposition (4)
Legt fest, welcher Bildausschnitt sichtbar bleibt, wenn das Bild beschnitten wird.
Farben
Im Unterreiter Farben stimmst du die Textfarben des Slides auf das Hintergrundbild ab.
Unterüberschrift (1)
Textfarbe der Unterüberschrift.
Überschrift (2)
Textfarbe der Hauptüberschrift.
Text (3)
Textfarbe des Beschreibungstextes.
Button
Die Gestaltung des Buttons – sichtbar, sobald eine Verlinkung gesetzt ist – erfolgt über den gemeinsamen Baustein:
ButtonSlides pro Reihe
Im Reiter Slides pro Reihe bestimmst du, wie viele Slides je Endgerät gleichzeitig nebeneinander erscheinen.
Elemente pro ReiheTypografie
Im Reiter Typografie kannst du abweichende Schriftgrößen für die einzelnen Endgeräte festlegen.
SchriftgrößeSlider - 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.
Min. Höhe (Mobil) (1)
Mindesthöhe des Sliders auf Mobilgeräten (in px oder vh).
Min. Höhe (Tablet) (2)
Mindesthöhe des Sliders auf Tablets.
Min. Höhe (Desktop) (3)
Mindesthöhe des Sliders auf dem Desktop.
Im Unterreiter Erweitert konfigurierst du Übergang und Navigation des Sliders.
Achse des Sliders (1)
Laufrichtung des Sliders: Horizontal oder Vertikal.
Übergang der Slides (2)
Art des Übergangs: Karusell (seitliches Schieben) oder Fade in/out (Überblenden).
Start-Slide (3)
Mit welchem Slide der Slider startet (0 = erster Slide). Daneben stellst du Animationsdauer und den Abstand zwischen den Slides ein.
SEO - Einstellungen
SEOZuletzt aktualisiert