Der Vorher / Nachher Slider ist perfekt, um zwei Bilder direkt gegenüberzustellen und den Unterschied mit einem interaktiven Schieberegler zu zeigen.
🎬 Am Ende des Artikels findest du unsere aktuelle Videoanleitung!
So gehst du vor:
Schritt 1: Neuen Abschnitt hinzufügen
Füge einen leeren Abschnitt auf deiner Seite hinzu, in dem der Slider platziert werden soll. Klicke dazu auf das blaue +‑Symbol, öffne im linken Reiter "Entwürfe" und füge den leeren Abschnitt ein.
Schritt 2: Vorher / Nachher Slider auswählen
Klicke in dem leeren Abschnitt auf das +-Symbol und suche nach "Vorher / Nachher" in der Suchleiste und füge das Element ein.
Schritt 3: Bilder einfügen
Lade die beiden Bilder hoch, die du vergleichen möchtest.
📌 Hinweis: Achte darauf, dass beide Bilder aus derselben Entfernung und Perspektive aufgenommen wurden und die gleiche Größe haben, um einen harmonischen Effekt zu erzielen.
Schritt 4: Slider konfigurieren
Jetzt kannst du deinen Schieberegler noch weiter konfigurieren.
Statt des interaktiven Schiebereglers kannst du auch die "Geteilte Ansicht" aktivieren, wenn die Bilder einfach nur nebeneinander zum direkten Vergleich angezeigt werden sollen.
Du hast die Möglichkeit, eine Beschriftung hinzuzufügen, um "Vorher" und "Nachher" zum Beispiel zu kennzeichnen.
Optional kannst du bei einem Bild auch Graustufen hinterlegen, um den Vorher-Nachher-Effekt noch stärker hervorzuheben.
Schritt 5: Design anpassen
Abschließend kannst du noch Anpassungen am Design vornehmen.
Du kannst das Icon des Schiebereglers individuell gestalten, indem du das Icon, die Größe, Farbe und den Eckenradius festlegst.
Außerdem lässt sich die Trennlinie anpassen, etwa in Bezug auf die Breite und die Farbe.
Zusätzlich kannst du wählen, ob der Vergleich horizontal oder vertikal dargestellt werden soll, und festlegen, ob sich der Slider per "Ziehen" oder "Hover" bewegen lässt.
Optional hast du außerdem die Möglichkeit, die Bilder auf volle Bildschirmbreite und -höhe zu setzen sowie einen Eckenradius und Schatten hinzuzufügen.
Video-Tutorial
Für einen besseren Überblick über den Ablauf kannst du dir auch unser Video-Tutorial unten ansehen:
💡Du hast Feedback zu diesem Hilfe-Artikel? Teile es gerne mit uns über den Live-Chat oder an support@onepage.io, damit wir ihn auf dem neuesten Stand halten können. 🙂