Zum Hauptinhalt springen Zur Suche springen Zur Hauptnavigation springen

Menü

Bild Text Slider

Für Shopware Self-hosted

Ab Theme Version 2.5.0 stehen Dir zur Bearbeitung der Erlebniswelten das Bild Text Slider Element zur Verfügung. Der neue Slider ermöglicht es Dir echte Texte auf Deine Slider-Bilder zu legen, das Element horizontal oder vertikal automatisch rotieren zu lassen und mit Animationen aufzuwerten.

Allgemeines Beispiel

Bildergalerie überspringen
preview_one_full
Lorem ipsum dolor sit #1 At vero eos et accusam et justo duo dolores et ea rebum. Lorem ipsum

Lorem ipsum dolor sit #1

At vero eos et accusam et justo duo dolores et ea rebum.

preview_two_full
Lorem ipsum dolor sit #2 At vero eos et accusam et justo duo dolores et ea rebum. Lorem ipsum

Lorem ipsum dolor sit #2

At vero eos et accusam et justo duo dolores et ea rebum.

preview_three_full
Lorem ipsum dolor sit #3 At vero eos et accusam et justo duo dolores et ea rebum. Lorem ipsum

Lorem ipsum dolor sit #3

At vero eos et accusam et justo duo dolores et ea rebum.

preview_four_full
Lorem ipsum dolor sit #4 At vero eos et accusam et justo duo dolores et ea rebum. Lorem ipsum

Lorem ipsum dolor sit #4

At vero eos et accusam et justo duo dolores et ea rebum.

Automatisch rotieren

Bestimme neben der Animations-Pause, die Rotationsgeschwindigkeit sowie die Pause bei Mouse-Over.
Bildergalerie überspringen
preview_one_full
Lorem ipsum dolor sit #1 At vero eos et accusam et justo duo dolores et ea rebum. Lorem ipsum

Lorem ipsum dolor sit #1

At vero eos et accusam et justo duo dolores et ea rebum.

preview_two_full
Lorem ipsum dolor sit #2 At vero eos et accusam et justo duo dolores et ea rebum. Lorem ipsum

Lorem ipsum dolor sit #2

At vero eos et accusam et justo duo dolores et ea rebum.

preview_three_full
Lorem ipsum dolor sit #3 At vero eos et accusam et justo duo dolores et ea rebum. Lorem ipsum

Lorem ipsum dolor sit #3

At vero eos et accusam et justo duo dolores et ea rebum.

preview_four_full
Lorem ipsum dolor sit #4 At vero eos et accusam et justo duo dolores et ea rebum. Lorem ipsum

Lorem ipsum dolor sit #4

At vero eos et accusam et justo duo dolores et ea rebum.

Vertikal

Neben der horizontalen Rotation kann der Slider auch vertikal rotieren. Probiers mal aus!
Bildergalerie überspringen
preview_one_full
Lorem ipsum dolor sit #1 At vero eos et accusam et justo duo dolores et ea rebum. Lorem ipsum

Lorem ipsum dolor sit #1

At vero eos et accusam et justo duo dolores et ea rebum.

preview_two_full
Lorem ipsum dolor sit #2 At vero eos et accusam et justo duo dolores et ea rebum. Lorem ipsum

Lorem ipsum dolor sit #2

At vero eos et accusam et justo duo dolores et ea rebum.

preview_three_full
Lorem ipsum dolor sit #3 At vero eos et accusam et justo duo dolores et ea rebum. Lorem ipsum

Lorem ipsum dolor sit #3

At vero eos et accusam et justo duo dolores et ea rebum.

preview_four_full
Lorem ipsum dolor sit #4 At vero eos et accusam et justo duo dolores et ea rebum. Lorem ipsum

Lorem ipsum dolor sit #4

At vero eos et accusam et justo duo dolores et ea rebum.

Galerie Modus

Im sogenannten Galerie-Modus erscheinen die Slides durch Überblenden und nicht durch eine Rotationsbewegung.
Bildergalerie überspringen
preview_one_full
Lorem ipsum dolor sit #1 At vero eos et accusam et justo duo dolores et ea rebum. Lorem ipsum

Lorem ipsum dolor sit #1

At vero eos et accusam et justo duo dolores et ea rebum.

preview_two_full
Lorem ipsum dolor sit #2 At vero eos et accusam et justo duo dolores et ea rebum. Lorem ipsum

Lorem ipsum dolor sit #2

At vero eos et accusam et justo duo dolores et ea rebum.

preview_three_full
Lorem ipsum dolor sit #3 At vero eos et accusam et justo duo dolores et ea rebum. Lorem ipsum

Lorem ipsum dolor sit #3

At vero eos et accusam et justo duo dolores et ea rebum.

preview_four_full
Lorem ipsum dolor sit #4 At vero eos et accusam et justo duo dolores et ea rebum. Lorem ipsum

Lorem ipsum dolor sit #4

At vero eos et accusam et justo duo dolores et ea rebum.

Mehrere Elemente gleichzeitig

Zeige mehrere Slides gleichzeitig an - oft auch als Carousel-Funktion bezeichnet.
Bildergalerie überspringen
preview_one_full
Lorem ipsum dolor sit #1 At vero eos et accusam et justo duo dolores et ea rebum. Lorem ipsum

Lorem ipsum dolor sit #1

At vero eos et accusam et justo duo dolores et ea rebum.

preview_two_full
Lorem ipsum dolor sit #2 At vero eos et accusam et justo duo dolores et ea rebum. Lorem ipsum

Lorem ipsum dolor sit #2

At vero eos et accusam et justo duo dolores et ea rebum.

preview_three_full
Lorem ipsum dolor sit #3 At vero eos et accusam et justo duo dolores et ea rebum. Lorem ipsum

Lorem ipsum dolor sit #3

At vero eos et accusam et justo duo dolores et ea rebum.

preview_four_full
Lorem ipsum dolor sit #4 At vero eos et accusam et justo duo dolores et ea rebum. Lorem ipsum

Lorem ipsum dolor sit #4

At vero eos et accusam et justo duo dolores et ea rebum.

Positionierung

Neben den allgemeinen Positionierungen, können über Abstände in Pixel oder Prozent Feinabstimmungen vorgenommen werden.
Bildergalerie überspringen
preview_one_full
Oben links #1

Oben links #1

preview_two_full
Oben mitte #2

Oben mitte #2

preview_three_full
Oben rechts #3

Oben rechts #3

preview_four_full
Mitte links #4

Mitte links #4

preview_one_full
Mitte mitte #5

Mitte mitte #5

preview_two_full
Mitte rechts #6

Mitte rechts #6

preview_three_full
Unten links #7

Unten links #7

preview_four_full
Unten mitte #8

Unten mitte #8

preview_three_full
Unten rechts #9

Unten rechts #9

Text Hintergrund

Wähle für jeden Textbereich eine Hintergrundfarbe und stelle Innenabstand und Border-Radius ein. Transparenzen können ebenfalls genutzt werden.
Bildergalerie überspringen
preview_one_full
Lorem ipsum dolor sit #1 At vero eos et accusam et justo duo dolores et ea rebum. Lorem ipsum

Lorem ipsum dolor sit #1

At vero eos et accusam et justo duo dolores et ea rebum.

preview_two_full
Lorem ipsum dolor sit #2 At vero eos et accusam et justo duo dolores et ea rebum. Lorem ipsum

Lorem ipsum dolor sit #2

At vero eos et accusam et justo duo dolores et ea rebum.

preview_three_full
Lorem ipsum dolor sit #3 At vero eos et accusam et justo duo dolores et ea rebum. Lorem ipsum

Lorem ipsum dolor sit #3

At vero eos et accusam et justo duo dolores et ea rebum.

preview_four_full
Lorem ipsum dolor sit #4 At vero eos et accusam et justo duo dolores et ea rebum. Lorem ipsum

Lorem ipsum dolor sit #4

At vero eos et accusam et justo duo dolores et ea rebum.

Hintergrund Farb-Überlagerung

Dämpfe das Hintergrund nach belieben mit einer Teiltransparenten Farbe ab und gestalte so den Text lesbar.
Bildergalerie überspringen
preview_one_full
Lorem ipsum dolor sit #1 At vero eos et accusam et justo duo dolores et ea rebum. Lorem ipsum

Lorem ipsum dolor sit #1

At vero eos et accusam et justo duo dolores et ea rebum.

preview_two_full
Lorem ipsum dolor sit #2 At vero eos et accusam et justo duo dolores et ea rebum. Lorem ipsum

Lorem ipsum dolor sit #2

At vero eos et accusam et justo duo dolores et ea rebum.

preview_three_full
Lorem ipsum dolor sit #3 At vero eos et accusam et justo duo dolores et ea rebum. Lorem ipsum

Lorem ipsum dolor sit #3

At vero eos et accusam et justo duo dolores et ea rebum.

preview_four_full
Lorem ipsum dolor sit #4 At vero eos et accusam et justo duo dolores et ea rebum. Lorem ipsum

Lorem ipsum dolor sit #4

At vero eos et accusam et justo duo dolores et ea rebum.

Animationen

Verschiedene Animationen bringen subtile Bewegungen in den Slider und machen Deinen Auftritt noch wertiger.
Bildergalerie überspringen
preview_one_full
Ken-Burns von oben rechts #1 At vero eos et accusam et justo duo dolores et ea rebum. Lorem ipsum

Ken-Burns von oben rechts #1

At vero eos et accusam et justo duo dolores et ea rebum.

preview_two_full
Ken-Burns von unten links #2 At vero eos et accusam et justo duo dolores et ea rebum. Lorem ipsum

Ken-Burns von unten links #2

At vero eos et accusam et justo duo dolores et ea rebum.

preview_three_full
Text Parallax bei Mouse-Over #3 At vero eos et accusam et justo duo dolores et ea rebum. Lorem ipsum

Text Parallax bei Mouse-Over #3

At vero eos et accusam et justo duo dolores et ea rebum.

preview_four_full
Bildzoom beim Mouse-Over #4 At vero eos et accusam et justo duo dolores et ea rebum. Lorem ipsum

Bildzoom beim Mouse-Over #4

At vero eos et accusam et justo duo dolores et ea rebum.

Eingangsanimation

Eingangsanimationen bestimmen, wie der Textbereich auf das Hintergrundbild gelangt. Das erzeugt mehr Aufmerksamkeit.
Bildergalerie überspringen
preview_one_full
fade-in #1 At vero eos et accusam et justo duo dolores et ea rebum. Lorem ipsum

fade-in #1

At vero eos et accusam et justo duo dolores et ea rebum.

preview_two_full
slide-in-left #2 At vero eos et accusam et justo duo dolores et ea rebum. Lorem ipsum

slide-in-left #2

At vero eos et accusam et justo duo dolores et ea rebum.

preview_three_full
slide-in-blurred-bottom #3 At vero eos et accusam et justo duo dolores et ea rebum. Lorem ipsum

slide-in-blurred-bottom #3

At vero eos et accusam et justo duo dolores et ea rebum.

preview_four_full
puff-in-center #4 At vero eos et accusam et justo duo dolores et ea rebum. Lorem ipsum

puff-in-center #4

At vero eos et accusam et justo duo dolores et ea rebum.