Before and After Slider Widget for your website
Show visual transformations with an interactive comparison slider. Jotform's Before and After Slider widget lets you add image pairs, choose horizontal or vertical reveal direction, set drag or hover interaction, add labels and captions, enable fullscreen viewing, and embed the result on your website without code.
So erstellen Sie ein Before and After Slider-Widget
Add image pairs
Paste before and after image URLs, then write clear labels and captions for each comparison.
Customize the reveal
Choose horizontal or vertical direction, set the initial divider position, and use drag, click, or hover interaction.
Embed it on your website
Adjust size, ratio, colors, fullscreen behavior, and display rules before publishing the widget.
Show transformations with a comparison widget that fits your page
Compare before and after images
Place two images in one frame so visitors can instantly understand renovation, design, beauty, repair, or product changes.
Use horizontal or vertical reveal
Switch the divider direction to match the subject matter and let visitors inspect changes with drag, click, or hover movement.
Create a small transformation gallery
Add up to three image pairs and enable carousel navigation so visitors can browse multiple project stages or case studies.
Match your website style
Control width, image ratio, corner radius, divider size, colors, labels, captions, custom CSS, fullscreen mode, and mobile visibility.
Warum sich Jotform Website Widgets auszeichnen
Mit den Widgets von Jotform wird Ihre Website interaktiver und Sie steigern Ihre Conversion-Rate. Zur Auswahl stehen zahlreiche Tools wie Sternebewertungen, Slideshows mit Erfahrungsberichten, Pop-ups mit Social Proof und eingebettete Medien. Fügen Sie Widgets zu Ihren Formularen oder Landingpages hinzu, um Daten zu sammeln, Erfahrungsberichte anzuzeigen und Leads zu gewinnen – ganz ohne Programmierkenntnisse.
Fügen Sie Jotform-Widgets mithilfe eines Einbettungscodes in Ihre Website ein. Passen Sie das Widget an, sehen Sie sich die Vorschau an und fügen Sie den Code in jede Seite ein, die benutzerdefiniertes HTML oder Einbettungsblöcke unterstützt – ganz ohne Entwicklerinnen oder Entwickler.
Mit Jotform Website Widgets sammeln Sie Leads, zeigen Kundenfeedback, präsentieren Social Proof, binden Medien ein oder fügen nützliche Webseiten-Tools hinzu. Über jedes Widget können Besucher direkt auf Ihrer Website mit Ihrem Unternehmen interagieren.
Wenn Sie Unterstützung bei der Einrichtung, Anpassung, Einbettung oder Fehlerbehebung Ihres Widgets benötigen, steht Ihnen das Kundensupport-Team von Jotform rund um die Uhr zur Verfügung. So können Sie beruhigt weiterarbeiten, denn Sie wissen: Hilfe ist da, wenn Sie sie brauchen.
Where to use your Before and After Slider widget
Add the widget anywhere a visual comparison helps visitors trust the result, understand quality, or make a decision faster.
Renovation and interior design pages to show completed project transformations.
Beauty, wellness, and fitness sites to compare visible client or treatment progress.
Product pages to highlight upgrades, restorations, edits, or feature improvements.
Portfolio and case study pages to make results more tangible than text alone.
Real estate listings to compare staging, repairs, landscaping, or remodel work.
Creative service pages to show retouching, mockups, design revisions, or brand refreshes.
Gewinnen Sie Leads als zahlende Kunden mit dem Jotform Formulargenerator
Nutzen Sie Jotform, um aus jedem Kontakt eine konkrete Maßnahme zu machen. Erstellen Sie leistungsstarke Formulare, mit denen Sie Leads erfassen, Zahlungen abwickeln und Antworten automatisieren – und das alles an einem Ort. Jede Antwort landet in Ihrem Jotform Posteingang, von wo aus Sie nachfassen oder Ihre bevorzugten Apps verbinden können.
Jetzt starten – Kostenlos!
FAQ
What is a Before and After Slider widget?
A Before and After Slider widget displays two related images in one interactive frame. Visitors move a divider to reveal more of the before or after image and compare the transformation.
Can I choose the slider direction?
How can visitors move the divider?
Can I set the initial divider position?
Can I show more than one comparison?
Can I add labels and captions?
Does the widget support fullscreen viewing?
Does it work on mobile?
Do I need to write code?