Der Before/After Slider (Vorher/Nachher) ist perfekt, um zwei Bilder direkt gegenüberzustellen und den Unterschied mit einem interaktiven Schieberegler zu zeigen. 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: Before/After Slider auswählen
Klicke in dem leeren Abschnitt auf das +-Symbol und suche nach "Before / After" 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 "Split view" Ansicht aktivieren, wenn die Bilder einfach nur nebeneinander zum direkten Vergleich angezeigt werden sollen.
Du hast die Möglichkeit, Labels hinzuzufügen, um "Vorher" und "Nachher" zum Beispiel zu kennzeichnen.
Optional kannst du bei einem Bild einen Grauton 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 Divider-Linie 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 "Drag" 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.
💡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. 🙂