Vorher / Nacher

Anwendung #

Das Vorher-Nachher-Element ist perfekt zur Veranschaulichung von Veränderungen oder Entwicklungsprozessen. Es bietet eine intuitive Möglichkeit, Unterschiede visuell hervorzuheben. Verwende den Lentikular-Slider, wenn du Veränderungen oder Entwicklungsprozesse veranschaulichen möchtest, wie zum Beispiel Verbesserungen durch ein Produkt oder einen Prozess. Der Lentikular-Slider ist perfekt für visuelle Vergleiche, bei denen der Unterschied deutlich sichtbar sein soll. Du kannst mehr als nur ein Vorher-Nachher-Bild hinzufügen und diese als einen Slider bedienen. Schau dir die Schritt-für-Schritt-Anleitung an, um mehr über das Element zu erfahren.

Vorher-Nacher-Element hinzufügen #

Ziehe das Element in einem Modul hinein.

Vorhernacher hinzufügen

Auflösungsrichtung einstellen #

Schau dir den Slider an, um zu sehen, welche Auflösungen es gibt.

Horizonal #

Die Auflösung erfolgt in der Horizontalen von links nach rechts.

Vertikal #

Die Auflösung erfolgt in der Vertikalen von oben nach unten.

Schritt 2 – Curser Startposition wählen #

Schau dir den Slider an, um zu sehen, welche Startpositionen es gibt.

Links #

Die Auflösung startet links, und die Lerner sollen den Cursor von links aus verschieben.

Zentriert #

Die Auflösung startet in der Mitte, und die Lerner verschieben den Cursor von der Mitte aus, um das Bild zu entdecken.

Rechts #

Die Auflösung startet rechts und die Lerner sollen den Cursor von rechts aus verschieben.

Schritt 3 – Slides verwalten #

Schau dir die Hotspots an, um zu sehen, welche Möglichkeiten es gibt, die Slides zu verwalten.

1
Slide hinzufügen
Klicke auf Slide hinzufügen, um bei Bedarf einen zusätzlichen Slide hinzuzufügen.
2
Reihenfolge ändern
Tausche die Reihenfolge der Slides, indem du auf das Verschieben Icon klickst und es ziehst.
3
Slides löschen
Lösche Slides, indem du auf das Papierkorb Icon klickst.

Schritt 4 – Slider Schaltfläche #

Schau dir den Slider an und sieh, wie sich das Vorher-Nachher-Element bei mehr als nur einem Slide verändert

Einzelner Slide #

Die Ansicht des Elements zeigt die Standardansicht des Vorher-Nachher-Sliders.

Mehr als zwei Slides #

Die Ansicht des Elements wechselt von einem Bild zu einem bedienbaren Slider mit einem Slide Indikator.