Hoe voeg je een voor-en-na-slider toe in Wix

Potentiële kopers direct de voordelen van je product laten zien is een enorm voordeel, vooral als je online verkoopt. Er is geen verkoper aanwezig — dus je branding, boodschap en visuele content moeten het zware werk doen. Dat is de kracht van de before after slider.

Hoewel Wix een enorme bibliotheek aan ontwerpelementen heeft, bevat de standaardeditor geen aanpasbare voor en na slider. Maar dat betekent niet dat je zonder opties zit. Je kunt een app van derden installeren via de Wix App Market, een gratis externe widget embedden, of er zelf een bouwen met Velo by Wix. Hier lees je hoe elke optie werkt, en waarom de gratis widget voor de meeste mensen de beste keuze is.

Optie 1: Een extensie installeren via de Wix App Market

De meest voor de hand liggende route is de Wix App Market. Zoek op “before and after slider”, klik één keer, en je hebt een werkende vergelijkingsslider op de pagina. Geen embedcodes, geen ontwikkelaarsmodus.

Na de installatie komt het addertje onder het gras. De meeste van deze apps werken met een freemiummodel, en je moet concessies doen op het gratis abonnement. De PURPLE Before & After Slider, een van de beter beoordeelde opties met 4,7 sterren, plaatst een watermerk op het gratis plan. Om dat te verwijderen en aangepaste pijlstijlen en lay-outvormen te ontgrendelen, betaal je $2,50 per maand. Op zich niet veel, maar het stapelt op met elk app-abonnement op je site.

Het grotere risico is onderhoud. Dit zijn kleine externe ontwikkelaars, en wanneer er een stopt met updates, werkt je slider niet meer. Je portfolio- of productpagina is de laatste plek waar je een kapot element wilt hebben.

Wil je toch een app van derden proberen? Zo installeer je er een:

1. Open je site in de Wix Editor en klik op Apps in de linkerzijbalk, klik vervolgens op App Market. Zoek naar “before and after slider.”

2. Klik op de gewenste app en klik vervolgens op Toevoegen aan site. Bevestig met Toestaan en toevoegen.
3. De slider verschijnt op je pagina. Klik erop, open Instellingen, voeg je voor- en na-afbeeldingen toe, pas de schuifgreep en labels aan en klik vervolgens op Publiceren.

Wix beschrijft het volledige installatieproces in de Help Center-handleiding voor het toevoegen van een app aan je site.

Optie 2: Gebruik een gratis no-code slider-widget (aanbevolen)

Wil je volledige controle over de slider zonder maandelijks abonnement? Sla de App Market over en embed in plaats daarvan een gratis externe widget. Je krijgt hetzelfde sleep-om-te-onthullen-effect, meer aanpassingsmogelijkheden dan de betaalde app-abonnementen bieden, en geen verlenging.

De Jotform Before and After Slider Widget is precies hiervoor gebouwd. Je configureert hem in een visuele editor, kopieert een korte embedcode en plakt deze in Wix. Jotform Website Widgets zijn gratis te gebruiken, zonder gebruikslimiet en zonder abonnementsvereiste, dus er verschijnt geen upgrade-melding zodra je slider live staat.

De widget biedt ook meer dan de opties in de App Market. Je kunt horizontaal of verticaal onthullen, wat belangrijk is als je een volledige kamer toont of een voor en na foto van een persoon. Je kunt de startpositie van de scheidslijn instellen, zodat bezoekers precies de kadrering zien die jij wilt. Je kunt ook tot drie vergelijkingsparen toevoegen met ingebouwde navigatie, waardoor één element een compacte casestudy-galerij wordt in plaats van een enkele statische vergelijking. Voor een tandarts die drie patiëntresultaten toont of een interieurontwerper die een gefaseerde renovatie doorloopt, is dat het verschil tussen één embed en drie.

Volg deze stappen om de Jotform-widget aan je Wix-site toe te voegen:

1. Open de Jotform Before and After Slider Widget en voeg je afbeeldingen toe door je bestanden te uploaden of afbeeldings-URL’s te plakken. Voeg voor- en na-labels toe, evenals een bijschrift voor elke vergelijking.

2. Stel de onthulrichting, startpositie van de scheidslijn en interactiestijl in (slepen, klikken of hoveren). Pas de breedte, beeldverhouding, hoekradius, scheidslijngrootte en kleuren aan zodat ze bij je site passen. Schakel volledig scherm in als bezoekers details willen bekijken.

3. Kopieer de embedcode.

4. Klik in de Wix Editor op + Toevoegen en selecteer Code insluiten. Plak je codefragment, pas de grootte van het element aan en klik op Publiceren.

De handleiding van Wix voor het insluiten van een site of widget beschrijft de beperkingen van het element, waaronder de vereiste dat je embedcode HTTPS gebruikt.

Optie 3: Een aangepaste slider bouwen met Velo by Wix

Als je liever niet afhankelijk bent van een app van derden of een externe embed, kun je de slider zelf coderen met Velo by Wix. De aanpak is om je twee afbeeldingen in de editor te stapelen, een lijn- of boxelement als sleepgreep toe te voegen, de ontwikkelaarsmodus in te schakelen en JavaScript te schrijven dat meer of minder van de bovenste afbeelding onthult terwijl de bezoeker sleept.

Hier zit het addertje onder het gras. De paginacode van Velo kan een aanwijzer niet volgen terwijl deze over een element beweegt. De beschikbare event handlers op standaard Wix-elementen dekken klikken, focus, het betreden en verlaten van een element en zichtbaarheid in de viewport. Er is geen mouse-move handler en geen ondersteuning voor touch-events. Een sleepslider heeft beide nodig.

De ideale route is om gewoon DOM-JavaScript te schrijven in een HTML iFrame-element en Velo alleen te gebruiken om data door te geven. Op dat punt gebruik je hetzelfde embedmechanisme als Optie 2, behalve dat jij de code, het responsieve gedrag en elke bug in eigen beheer hebt.

Wil je het toch proberen? Volg dan deze stappen:

1. Klik in de Wix Editor op Dev Mode in de bovenste balk en schakel de ontwikkelaarsmodus in. In Wix Studio klik je op Start Coding in de linkerzijbalk.

2. Voeg een HTML-embedelement toe op de plek waar je de slider wilt, met de afmetingen van je afbeeldingen.

3. Schrijf je vergelijkingsslider-markup, styling en pointer-event-afhandeling in dat element, en test zowel muissleep als touch-swipe op elk breekpunt.

Verbeter je Wix-site met slimme no-code widgets

De Jotform Before and After Slider Widget is de snelste manier om je transformaties te tonen zonder je maandelijkse softwarekosten te verhogen of touch-events in Velo te debuggen. Configureer hem één keer, plak de code en ga verder.

Het is ook een van de meer dan 150 gratis website-widgets die Jotform aanbiedt. Een paar andere die goed passen bij een portfolio- of dienstverleningssite zijn

• Google Reviews: Plaats klantbeoordelingen naast het werk zelf, zodat het bewijs en de lof op dezelfde pagina staan.
• FAQ: Beantwoord de vragen “hoe lang duurt dit” en “wat kost het” voordat een bezoeker vertrekt om je te mailen.
• Popup: Verzamel het e-mailadres van iemand die je hele galerij heeft doorgescrold maar nog niet klaar was om te boeken.
• Terug naar boven: Deze is het toevoegen waard zodra je portfoliopagina lang genoeg is dat terugscrollen naar boven een klus wordt.

Elke widget wordt geïnstalleerd via hetzelfde HTML-embedelement dat je voor de slider hebt gebruikt, dus een tweede of derde toevoegen kost slechts enkele minuten.

Ben je nog bezig met het bouwen van je site? Onze handleiding voor het maken van een Wix-website behandelt het platform van begin tot eind, en de Jotform-Wix integratie-pagina legt uit hoe je contact- en boekingsformulieren toevoegt. Blader door de volledige widgetbibliotheek en ontdek wat je site nog mist.