Potenziellen Käufern die Vorteile Ihres Produkts sofort vor Augen zu führen, ist ein enormer Vorteil – besonders beim Online-Verkauf. Hier gibt es keinen Verkäufer, der überzeugt – Ihr Branding, Ihre Botschaften und Ihre visuellen Inhalte müssen die ganze Überzeugungsarbeit leisten. Genau hier zeigt sich die Stärke eines Vorher-Nachher-Sliders.
Obwohl Wix eine riesige Bibliothek an Designelementen bietet, enthält der Standard-Editor keinen anpassbaren Vorher-Nachher-Slider. Das bedeutet aber nicht, dass Sie keine Möglichkeiten haben. Sie können eine Drittanbieter-App aus dem Wix App Market installieren, ein kostenloses externes Widget einbetten oder mit Velo by Wix einen eigenen Slider von Grund auf erstellen. Im Folgenden erfahren Sie, wie jede dieser Optionen funktioniert – und warum das kostenlose Widget für die meisten die beste Wahl ist.
Option 1: Eine Wix App Market Erweiterung installieren
Der naheliegendste Weg führt über den Wix App Market. Suchen Sie nach „Vorher Nachher Slider”, klicken Sie einmal – und schon haben Sie einen funktionierenden Vergleichs-Slider auf Ihrer Seite. Kein Einbettungscode, kein Entwicklermodus.
Der Haken zeigt sich erst nach der Installation. Die meisten dieser Apps basieren auf einem Freemium-Modell, und im kostenlosen Tarif müssen Sie Kompromisse eingehen. Der PURPLE Before & After Slider, eine der besser bewerteten Optionen mit 4,7 Sternen, zeigt im kostenlosen Plan ein Wasserzeichen an. Um es zu entfernen und zusätzliche Funktionen wie individuelle Pfeilstile und Layout-Formen freizuschalten, fallen 2,50 $ pro Monat an. Auf den ersten Blick nicht viel, aber die Kosten summieren sich mit jedem weiteren App-Abo auf Ihrer Website.
Das größere Risiko liegt in der Wartung. Es handelt sich um kleine Drittanbieter-Entwickler, und wenn einer aufhört, Updates bereitzustellen, funktioniert Ihr Slider nicht mehr. Ihr Portfolio oder Ihre Produktseite ist der letzte Ort, an dem Sie ein defektes Element haben möchten.
Wenn Sie dennoch eine Drittanbieter-App ausprobieren möchten, gehen Sie wie folgt vor:
- Öffnen Sie Ihre Website im Wix Editor und klicken Sie in der linken Seitenleiste auf Apps. Klicken Sie anschließend auf App Market. Suchen Sie nach „Vorher Nachher Slider”.
- Klicken Sie auf die gewünschte App und dann auf Zur Website hinzufügen. Bestätigen Sie mit Erlauben und hinzufügen.
- Der Slider wird auf Ihrer Seite platziert. Klicken Sie darauf, öffnen Sie die Einstellungen, fügen Sie Ihre Vorher- und Nachher-Bilder hinzu, passen Sie den Schieberegler und die Beschriftungen an und klicken Sie anschließend auf Veröffentlichen.
Wix dokumentiert den vollständigen Installationsablauf in seinem Hilfe-Center-Leitfaden zum Hinzufügen einer App zu Ihrer Website.
Option 2: Ein kostenloses No-Code-Slider-Widget verwenden (empfohlen)
Wenn Sie die volle Kontrolle über Ihren Vorher-Nachher-Slider ohne monatliches Abo haben möchten, überspringen Sie den App Market und betten Sie stattdessen ein kostenloses externes Widget ein. Sie erhalten denselben Ziehen-zum-Aufdecken-Effekt, mehr Anpassungsmöglichkeiten als die kostenpflichtigen App-Tarife bieten – und keine Verlängerungskosten.
Das Jotform Before and After Slider Widget wurde genau dafür entwickelt. Sie konfigurieren es in einem visuellen Editor, kopieren einen kurzen Einbettungscode und fügen ihn in Wix ein. Jotform Website-Widgets sind kostenlos nutzbar – ohne Nutzungslimit und ohne Tarifanforderung. Es erscheint also kein Upgrade-Hinweis, sobald Ihr Slider live ist.
Darüber hinaus bietet es mehr als die Optionen im App Market. Sie können horizontal oder vertikal aufdecken – das ist wichtig, wenn Sie einen Raum in voller Länge oder ein Vorher-Nachher-Bild einer Person zeigen. Sie können die Startposition des Trennelements festlegen, sodass Besucher genau den Bildausschnitt sehen, den Sie möchten. Außerdem können Sie bis zu drei Vergleichspaare mit integrierter Navigation hinzufügen und so aus einem einzelnen Element eine kompakte Fallstudien-Galerie machen – statt nur eines einzelnen statischen Vergleichs. Für einen Zahnarzt, der drei Behandlungsergebnisse zeigt, oder eine Innenarchitektin, die eine schrittweise Renovierung präsentiert, ist das der Unterschied zwischen einem Einbettungscode und dreien.
Folgen Sie diesen Schritten, um das Jotform-Widget zu Ihrer Wix-Website hinzuzufügen:
- Öffnen Sie das Jotform Before and After Slider Widget und fügen Sie Ihr Bildpaar hinzu, indem Sie Ihre Dateien hochladen oder Bild-URLs einfügen. Ergänzen Sie Vorher- und Nachher-Beschriftungen sowie eine Bildunterschrift für jeden Vergleich.
- Legen Sie die Aufdeckrichtung, die Startposition des Trennelements und den Interaktionsstil (Ziehen, Klicken oder Hover) fest. Passen Sie Breite, Bildverhältnis, Eckenradius, Trennelement-Größe und Farben an Ihre Website an. Aktivieren Sie den Vollbildmodus, wenn Besucher Details genauer betrachten möchten.
- Kopieren Sie den Einbettungscode.
- Klicken Sie im Wix Editor auf + Hinzufügen und wählen Sie Code einbetten. Fügen Sie Ihren Code-Snippet ein, passen Sie die Größe des Elements an und klicken Sie auf Veröffentlichen.
Die Wix-Anleitung zum Einbetten einer Website oder eines Widgets behandelt die Einschränkungen des Elements, einschließlich der Anforderung, dass Ihr Einbettungscode HTTPS verwenden muss.
Option 3: Einen eigenen Slider mit Velo by Wix erstellen
Wenn Sie sich weder auf eine Drittanbieter-App noch auf eine externe Einbettung verlassen möchten, können Sie den Slider mit Velo by Wix selbst programmieren. Der Ansatz besteht darin, Ihre beiden Bilder im Editor übereinander zu legen, ein Linien- oder Box-Element als Ziehgriff hinzuzufügen, den Entwicklermodus zu aktivieren und JavaScript zu schreiben, das beim Ziehen durch den Besucher mehr oder weniger vom oberen Bild freigibt.
Hier liegt der Haken: Der Seitencode von Velo kann einen Zeiger nicht verfolgen, während er sich über ein Element bewegt. Die verfügbaren Event-Handler für Standard-Wix-Elemente decken Klicks, Fokus, das Betreten und Verlassen eines Elements sowie die Sichtbarkeit im Viewport ab. Es gibt keinen Mouse-Move-Handler und keine Touch-Event-Unterstützung. Ein Zieh-Slider benötigt jedoch beides.
Der ideale Weg ist, gewöhnliches DOM-JavaScript innerhalb eines HTML-iFrame-Elements zu schreiben und Velo nur zur Datenübergabe zu verwenden. An diesem Punkt nutzen Sie denselben Einbettungsmechanismus wie bei Option 2 – nur dass Sie den Code, das responsive Verhalten und jeden Bug selbst verantworten.
Wenn Sie es ausprobieren möchten, folgen Sie diesen Schritten:
- Klicken Sie im Wix Editor in der oberen Leiste auf Dev Mode und aktivieren Sie den Entwicklermodus. In Wix Studio klicken Sie in der linken Seitenleiste auf Start Coding.
- Fügen Sie ein HTML-Einbettungselement an der gewünschten Stelle für den Slider ein und passen Sie die Größe an Ihre Bildabmessungen an.
- Schreiben Sie Ihr Vergleichs-Slider-Markup, Styling und die Pointer-Event-Behandlung innerhalb dieses Elements und testen Sie sowohl Maus-Ziehen als auch Touch-Wischen an jedem Breakpoint.
Optimieren Sie Ihre Wix-Website mit smarten No-Code-Widgets
Das Jotform Before and After Slider Widget ist der schnellste Weg, Ihre Transformationen zu zeigen – ohne Ihre monatlichen Softwarekosten zu erhöhen oder Touch-Events in Velo debuggen zu müssen. Einmal konfigurieren, Code einfügen und weiter geht’s.
Es ist außerdem eines von über 150 kostenlosen Website-Widgets, die Jotform anbietet. Einige weitere, die sich besonders gut für ein Portfolio oder eine Dienstleistungsseite eignen:
- Google Reviews: Platzieren Sie Kundenbewertungen direkt neben Ihrer Arbeit, sodass der Beweis und das Lob auf derselben Seite stehen.
- FAQ: Beantworten Sie die Fragen „Wie lange dauert das?” und „Was kostet es?”, bevor ein Besucher die Seite verlässt, um Ihnen eine E-Mail zu schreiben.
- Popup: Erfassen Sie die E-Mail-Adresse von jemandem, der Ihre gesamte Galerie durchgescrollt hat, aber noch nicht bereit war zu buchen.
- Back to Top: Dieses Widget lohnt sich, sobald Ihre Portfolio-Seite so lang wird, dass das Zurückscrollen zur Geduldsprobe wird.
Jedes wird über dasselbe HTML-Einbettungselement installiert, das Sie bereits für den Vorher-Nachher-Slider verwendet haben – ein zweites oder drittes Widget hinzuzufügen dauert daher nur wenige Minuten.
Wenn Sie Ihre Website noch aufbauen, deckt unser Leitfaden zur Erstellung einer Wix-Website die gesamte Plattform ab, und die Seite zur Jotform-Wix-Integration erklärt Schritt für Schritt das Hinzufügen von Kontakt- und Buchungsformularen. Durchstöbern Sie das vollständige Widget-Verzeichnis und entdecken Sie, was Ihrer Website noch fehlt.
Dieser Artikel richtet sich an Fotografen, Innenarchitekten, Zahnärzte und Agenturen, die Wix nutzen und ihre Arbeitsergebnisse visuell präsentieren möchten – ohne monatliche App-Abonnements zu bezahlen oder sich mit benutzerdefiniertem Code auseinandersetzen zu müssen.
Kommentar abschicken: