zentheme.atmos.content.marketingText

Bild Text Slider

Für Shopware Self-managed

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

Lorem ipsum dolor sit #1

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

Lorem ipsum dolor sit #2

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

Lorem ipsum dolor sit #3

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

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.

Lorem ipsum dolor sit #1

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

Lorem ipsum dolor sit #2

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

Lorem ipsum dolor sit #3

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

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!

Lorem ipsum dolor sit #1

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

Lorem ipsum dolor sit #2

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

Lorem ipsum dolor sit #3

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

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.

Lorem ipsum dolor sit #1

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

Lorem ipsum dolor sit #2

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

Lorem ipsum dolor sit #3

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

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.

Lorem ipsum dolor sit #1

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

Lorem ipsum dolor sit #2

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

Lorem ipsum dolor sit #3

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

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.

Oben links #1

Oben mitte #2

Oben rechts #3

Mitte links #4

Mitte mitte #5

Mitte rechts #6

Unten links #7

Unten mitte #8

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.

Lorem ipsum dolor sit #1

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

Lorem ipsum dolor sit #2

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

Lorem ipsum dolor sit #3

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

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.

Lorem ipsum dolor sit #1

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

Lorem ipsum dolor sit #2

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

Lorem ipsum dolor sit #3

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

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.

Ken-Burns von oben rechts #1

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

Ken-Burns von unten links #2

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

Text Parallax bei Mouse-Over #3

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

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.

fade-in #1

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

slide-in-left #2

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

slide-in-blurred-bottom #3

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

puff-in-center #4

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