Zum Hauptinhalt springen

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

preview_one_full

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.

preview_three_full

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.

Automatisch rotieren

Bestimme neben der Animations-Pause, die Rotationsgeschwindigkeit sowie die Pause bei Mouse-Over.
preview_one_full

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.

preview_three_full

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.

Vertikal

Neben der horizontalen Rotation kann der Slider auch vertikal rotieren. Probiers mal aus!
preview_one_full

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.

preview_three_full

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.

Galerie Modus

Im sogenannten Galerie-Modus erscheinen die Slides durch Überblenden und nicht durch eine Rotationsbewegung.
preview_one_full

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.

preview_three_full

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.

Mehrere Elemente gleichzeitig

Zeige mehrere Slides gleichzeitig an - oft auch als Carousel-Funktion bezeichnet.
preview_one_full

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.

preview_three_full

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.

Positionierung

Neben den allgemeinen Positionierungen, können über Abstände in Pixel oder Prozent Feinabstimmungen vorgenommen werden.
preview_one_full

Oben links #1

preview_two_full

Oben mitte #2

preview_three_full

Oben rechts #3

preview_four_full

Mitte links #4

preview_one_full

Mitte mitte #5

preview_two_full

Mitte rechts #6

preview_three_full

Unten links #7

preview_four_full

Unten mitte #8

preview_three_full

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

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.

preview_three_full

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.

Hintergrund Farb-Überlagerung

Dämpfe das Hintergrund nach belieben mit einer Teiltransparenten Farbe ab und gestalte so den Text lesbar.
preview_one_full

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.

preview_three_full

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.

Animationen

Verschiedene Animationen bringen subtile Bewegungen in den Slider und machen Deinen Auftritt noch wertiger.
preview_one_full

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.

preview_three_full

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.

Eingangsanimation

Eingangsanimationen bestimmen, wie der Textbereich auf das Hintergrundbild gelangt. Das erzeugt mehr Aufmerksamkeit.
preview_one_full

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.

preview_three_full

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.