Vorher-Nachher-Slider in Webflow hinzufügen: So geht's

Ein Vorher-Nachher-Slider ist eine der schnellsten Möglichkeiten, die Ergebnisse Ihrer Arbeit zu präsentieren. Man muss lediglich den Trennregler ziehen, um den Effekt Ihres Redesigns, Ihrer Renovierung oder Retusche sichtbar zu machen. Kein Starren auf nebeneinander gestellte Bilder, kein Suchspiel nach Unterschieden — das Ergebnis ist sofort sichtbar.

Ob Sie eine Agentur betreiben oder als Freelancer, Designer, Fotograf, Künstler, Handwerker oder in einer anderen Rolle Ihre Arbeit präsentieren möchten — ein Vorher-Nachher-Slider ist dafür ideal. Leider bietet Webflow trotz seiner Stellung als einer der fortschrittlichsten Website-Baukästen (und seiner Beliebtheit bei Designern) keinen nativen Before-After-Slider. Wenn Sie einen hinzufügen möchten, haben Sie drei Möglichkeiten: Ein „Cloneable” aus der Community installieren, ein kostenloses gehostetes Widget einbetten oder einen Slider von Grund auf mit Webflows nativer Interactions-Engine (IX2) erstellen.

Wir stellen Ihnen im Folgenden jede dieser Optionen vor.

Option 1: Ein Webflow Cloneable verwenden

Ihr erster Instinkt ist wahrscheinlich, im Made in Webflow Showcase oder auf einer Seite wie Flowbase nach „Cloneables” zu suchen. Das kann zwar funktionieren, ist aber nicht ohne Tücken.

Der große Nachteil: Sie sind an die Vorgehensweise einer anderen Person gebunden. Sie müssen sich strikt an die bestehende Architektur und die Namenskonventionen des Cloneables halten. Das kann die Abhängigkeit von benutzerdefinierten Attributen, CSS-Regeln und absoluter Positionierung beinhalten. Wenn Sie dabei etwas falsch machen, funktioniert es schlicht nicht. Fügen Sie es erst am Ende Ihres Designs hinzu, müssen Sie möglicherweise einige der anderen Elemente überdenken.

Wenn Sie sich dennoch für diesen Weg entscheiden, erfahren Sie hier, wie Sie ein Cloneable hinzufügen:

1. Finden Sie ein Vorher-Nachher-Slider-Cloneable, das aktiv gepflegt wird und dessen Lizenz die Nutzung erlaubt. Klonen Sie es in Ihr eigenes Projekt.

2. Tauschen Sie die Bilder gegen Ihre eigenen aus. Ordnen Sie die verschachtelten Divs nicht um, benennen Sie nichts um und versuchen Sie nicht, aufzuräumen — das könnte den Slider zerstören.
3. Veröffentlichen Sie Ihre Website und testen Sie sie. Stellen Sie sicher, dass der Slider sowohl auf Desktop- als auch auf Mobilgeräten funktioniert. Wenn Sie versehentlich etwas geändert haben, wird das JavaScript unter Umständen nicht korrekt ausgeführt.

Alles in allem funktioniert diese Methode, aber sie ist für eine einfache visuelle Komponente sehr umständlich — und Sie erhalten wahrscheinlich nicht so viel Kontrolle, wie Sie sich wünschen. Jede Designänderung muss sich an die ursprüngliche Verdrahtung halten, es sei denn, Sie möchten das zugrunde liegende Skript umschreiben.

Option 2: Ein kostenloses No-Code-Slider-Widget verwenden (empfohlen)

Wenn Sie sich nicht mit verschachtelten Div-Blöcken, benutzerdefinierten Attributen und — falls etwas schiefgeht — dem Debugging von fremdem JavaScript herumschlagen möchten, ist der einfachste Weg ein gehostetes Embed wie das Jotform Vorher-Nachher-Slider-Widget. Es ist kinderleicht einzurichten und löst viele der Probleme, die Cloneables mit sich bringen.

So fügen Sie einen Vorher-Nachher-Slider mit Jotform zu Webflow hinzu:

1. Rufen Sie das Jotform Vorher-Nachher-Slider-Widget auf und melden Sie sich bei Ihrem Jotform-Konto an. Falls Sie noch keins haben, können Sie sich während des Einrichtungsprozesses kostenlos registrieren.

2. Geben Sie Ihrem Widget einen Titel und fügen Sie Ihre Vergleichspaare hinzu. Sie können Bilder direkt hochladen oder über eine URL einfügen. Optional können Sie jedem Bildpaar eine Beschriftung hinzufügen und die Labels ändern. Legen Sie anschließend fest, ob der Nutzer den Regler ziehen muss, um den Vorher-Nachher-Vergleich zu sehen, oder ob der Effekt beim Hovern ausgelöst wird. Wenn Sie fertig sind, klicken Sie auf Weiter. 

3. Jetzt ist es an der Zeit, Ihren Slider zu gestalten. Sie können Farben, Branding, Schriftart und Erscheinungsbild festlegen. Wenn Sie zufrieden sind, klicken Sie erneut auf Weiter.

4. Konfigurieren Sie abschließend das Layout. Wählen Sie, ob Sie einen horizontalen oder vertikalen Slider möchten, wo die anfängliche Position des Trennreglers sein soll, wie breit der Slider sein soll und ob er auf Mobilgeräten, Desktop-Geräten oder beidem angezeigt wird. Klicken Sie dann auf Kostenlos auf Ihrer Website testen.

5. Klicken Sie auf Code kopieren, um den Einbettungscode in Ihre Zwischenablage zu kopieren, und kehren Sie dann zu Ihrer Webflow-Website zurück.

6. Öffnen Sie das Menü Add und wählen Sie Code Embed. Fügen Sie den Einbettungscode ein und positionieren Sie den Block auf Ihrer Website. Klicken Sie auf Publish — und schon ist der Slider live auf Ihrer Seite. So einfach ist das.

Wie Sie sehen, ist der kostenlose No-Code-Weg deutlich einfacher als die Cloneable-Option. Die Gestaltung ist unkomplizierter, Sie müssen sich keine Gedanken über benutzerdefinierte Attribute, strenge Klassennamen oder JavaScript machen — und es funktioniert einfach. Wenn Sie etwas ändern möchten, gehen Sie zurück zu Jotform und bearbeiten Sie die Einstellungen Ihres Vorher-Nachher-Sliders.

Option 3: Manuell mit Webflow Interactions erstellen

Für Webflow-Puristen, die volle Kontrolle wünschen und weder fremdes JavaScript noch ein externes Widget verwenden möchten, lässt sich ein Slider auch mit Webflows nativer Interactions-Engine IX2 erstellen. Einen benutzerdefinierten Code-Slider in Webflow zu bauen ist mit Abstand die fortgeschrittenste und komplizierteste Methode, bietet Ihnen aber die vollständige Kontrolle über Aussehen und Verhalten.

Um Ihren eigenen Webflow-Bildervergleich-Slider mit IX2 zu erstellen, müssen Sie zwei Bilder in einem relativ positionierten Container übereinanderstapeln, wobei jedes Bild in einem eigenen Div-Block liegt. Beim oberen Bild fungiert der Div-Block als Maske.

Als Nächstes müssen Sie für die Webflow-Vorher-Nachher-Interaktion eine Mouse-Move-Interaktion erstellen. Setzen Sie den Trigger auf Mouse X und das Ziel auf den Masken-Div. Legen Sie die animierte Eigenschaft auf Width fest und lassen Sie sie zwischen 0 und 100 Prozent variieren. So steuert die X-Achsen-Bewegung der Maus die Überlappung zwischen den beiden Bildern.

Wenn Sie einen Trennregler zwischen den beiden Bildern haben möchten, müssen Sie diesen natürlich selbst erstellen. Und ihn perfekt mit der Mausbewegung zu synchronisieren, erfordert fortgeschrittene Webflow-Animationskenntnisse.

Webflows integrierte Tools können zwar funktionieren, aber alles richtig hinzubekommen erfordert viel Feinarbeit und ein tiefes Verständnis von Webflow. Außerdem müssen Sie eine separate Animation einrichten, wenn der Slider auch auf Mobilgeräten funktionieren soll. Was Sie an Kontrolle gewinnen, büßen Sie an Komfort ein.

Erweitern Sie Ihre Webflow-Website mit smarten No-Code-Widgets

Der schnellste, einfachste und komfortabelste Weg, einen Vorher-Nachher-Slider in Webflow hinzuzufügen, ist das Jotform Vorher-Nachher-Slider-Widget. Es hat keinen der Nachteile eines Webflow-Bildervergleich-Cloneables und ist deutlich einfacher als die Erstellung eines eigenen Sliders mit IX2. Eine robuste, serverlose Lösung spart Ihnen viele Entwicklungsstunden und gewährleistet jedes Mal ein solides responsives Design.

Darüber hinaus bietet Jotform eine Reihe weiterer kostenloser Website-Widgets, mit denen Sie Ihre Website auf das nächste Level bringen können. Ob Sie Google-Bewertungen, Barrierefreiheits-Steuerungen, einen einfachen Nach-oben-Button oder Dutzende anderer nützlicher Funktionen hinzufügen möchten — durchstöbern Sie das Verzeichnis. Sie können auch die Jotform-Webflow-Integration nutzen, um Jotforms leistungsstarke Datenerfassungstools direkt mit Ihrer Website zu verbinden.