Een voor-en-na-slider toevoegen in WordPress

Ben je stylist, decorateur, retoucheur of een andere professional die de visuele resultaten van je werk wilt laten zien? Een WordPress voor-en-na-slider op je website is eenvoudig in gebruik en communiceert direct waarde. Helaas heeft het platform voor WordPress-gebruikers geen ingebouwde slider-functie.

Toch is het niet onmogelijk om een slider aan WordPress toe te voegen. Je hebt drie opties: een plug-in van een derde partij gebruiken, een gratis lichtgewicht externe widget gebruiken, of zelf een slider bouwen door aangepaste code te schrijven.

In dit artikel lees je hoe je met alle drie de methoden een WordPress voor-en-na-slider toevoegt, zodat je weet welke methode het beste bij jouw wensen past.

Watch on youtube

How to Add a Before and After Slider in WordPress

Optie 1: Installeer een WordPress slider-plug-in 

Een van de meest gebruikelijke manieren om een voor-en-na-slider toe te voegen, is het gebruik van een WordPress-plug-in. Deze aanpak heeft echter een paar nadelen.

Sommige plug-ins voegen extra CSS en JavaScript toe aan je hele site, waardoor de laadtijd van pagina’s toeneemt. Bovendien dwingen “zware” paginabouwers, zoals Elementor, je om de slider te beheren via complexe shortcodes (tekstgebaseerde, WordPress-specifieke codes), wat voor beginners een regelrechte nachtmerrie kan zijn. Als je per ongeluk een deel van de code verwijdert, werkt de slider meteen niet meer. Daarnaast hanteren sommige plug-ins een freemium-verdienmodel, waarbij geavanceerde functies alleen beschikbaar zijn achter een betaalmuur.

Plug-ins zijn niet voor elke gebruiker geschikt, maar ze vormen een solide oplossing als je technisch onderlegd bent en vertrouwd bent met WordPress. Volg deze instructies om een WordPress voor-en-na-plug-in te installeren:

1. Installeer de plug-in: Ga naar het WordPress-dashboard en klik op Plugins. Voer “voor-en-na-slider” in de zoekbalk in en selecteer de plug-in die je wilt gebruiken uit de zoekresultaten. (Er zijn er tientallen. Bekijk een lijst met de beste WordPress-plug-ins voor andere soorten taken.)

Volg de aanwijzingen om de plug-in te installeren. (De exacte installatie-instructies zijn afhankelijk van de specifieke plug-in.)

Houd er rekening mee dat veel plug-ins weliswaar gratis zijn, maar dat andere plug-ins eenmalige kosten hebben. In de meeste gevallen kun je ze alleen gebruiken met een betaald WordPress-abonnement.

2. Maak de voor-en-na-slider: Open de plug-in vanuit het WordPress-dashboard. Kies de optie om een nieuwe voor-en-na-slider te maken. Upload je voor- en na-afbeeldingen. Gebruik volgens de beste werkwijze afbeeldingen met dezelfde uitsnede en afmetingen.
3. Pas de voor-en-na-slider aan: Met de meeste plug-ins kun je instellingen aanpassen, zoals afbeeldingslabels, beginpositie, uiterlijk van de schuifknop en de oriëntatie van de slider. Pas je instellingen aan en sla ze op.
4. Voeg de voor-en-na-slider toe aan je WordPress-site: Open de WordPress-pagina waarop je de slider wilt laten verschijnen. Afhankelijk van de plug-in kun je de slider toevoegen door een speciaal WordPress-blok te maken of door een shortcode aan de pagina toe te voegen.

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

Als je geen zin hebt in omslachtige shortcodes of zware plug-ins waardoor je WordPress-site traag laadt, is een slider-widget zonder code je beste optie. De Jotform Before and After Slider Widget is volledig gratis en eenvoudig te gebruiken. Omdat de widget serverless is, heeft hij helemaal geen invloed op de snelheid van je site. Bovendien werkt hij perfect op zowel een desktop als een smartphone.

De Before and After Slider Widget van Jotform biedt een visuele interface waarvoor je geen code nodig hebt. Upload gewoon twee afbeeldingen in de widgetbouwer, pas de kleuren van de sleepknop aan en stel de standaard beginpositie in. Kopieer vervolgens de code en plak die in WordPress.

Hier lees je meer details:

1. Voeg afbeeldingsparen toe: Ga naar de pagina van de Jotform Before and After Slider Widget en upload je voor- en na-afbeeldingen in het instellingenvak van de widget. Bewerk de titel van je widget en geef aan welk type interactie je wilt bieden (slepen en klikken of zweven). Klik of tik op Doorgaan.

2. Pas de slider-instellingen aan: Je kunt instellingen aanpassen, zoals de beeldverhouding, de hoekafronding, de dikte van de scheidingslijn en de kleuren van de slider. Scrol omlaag om al je specificaties te selecteren.

3. Haal de insluitcode voor de slider-widget op: Klik of tik op Try It on Your Website for Free. Jotform geeft je een insluitcode voor de slider-widget. Klik of tik op Copy. Jotform vraagt je om je aan te melden of in te loggen om de code te krijgen.

4. Plak de insluitcode van de slider in WordPress: Ga naar je WordPress-site en voeg een Custom HTML-blok toe via de Block Inserter. Plak de insluitcode in het HTML-blok. Klik of tik op Update. WordPress voegt de voor-en-na-slider-widget automatisch in op je WordPress-site.

Optie 3: Programmeer een aangepaste HTML/CSS-slider 

Ben je een WordPress-purist die plug-ins van derden en externe widgets liever vermijdt? Dan kun je een slider helemaal zelf bouwen met pure code.

Deze methode is technisch gezien gratis en native in WordPress, maar het is niet eenvoudig. Je hebt gevorderde ervaring met het schrijven van code nodig, vooral als je wilt dat websitebezoekers de slider ook op een smartphone kunnen gebruiken. Bovendien kan één enkele programmeerfout ervoor zorgen dat de slider niet meer werkt en dat onder meer de responsiviteit op smartphones wordt aangetast.

Zo voeg je met aangepaste code een voor-en-na-slider toe in WordPress:

1. Upload de voor-en-na-afbeeldingen: Voeg beide afbeeldingen toe aan de WordPress Media Library.
2. Maak de aangepaste HTML/CSS-code voor de slider: Schrijf de HTML/CSS-code om de slider te structureren en op te maken. Mogelijk heb je ook JavaScript nodig om interactief slepen en vegen toe te voegen.

Je kunt deze code zelf schrijven, samenwerken met een collega die ervaring heeft met programmeren, of een AI-tool gebruiken om de code te genereren.

Kopieer de code.

3. Voeg de code toe aan je WordPress-site: Voeg in je WordPress-site een Custom HTML-blok toe en plak je code in het blok. Voeg indien nodig CSS en JavaScript toe via het WordPress-thema of de instellingen van je site.

Verbeter je WordPress-site met slimme widgets zonder code 

Als je prioriteit wilt geven aan de snelheid en veiligheid van je site, de kosten laag wilt houden en complexe code wilt vermijden, is de Before and After Slider Widget van Jotform een uitstekende manier om rijke, interactieve media aan je website toe te voegen. De widget is volledig gratis, ideaal voor zowel beginners als professionals en vereist geen enkele regel code.

Maar dat is nog niet alles wat Jotform te bieden heeft!

In de Jotform Website Widgets-map vind je meer dan 150 gratis website-widgets waarmee je je WordPress-site kunt verbeteren. De Visitor Counter Widget is bijvoorbeeld een mooie manier om te laten zien hoe populair je site is, terwijl de Countdown Timer Widget helpt om urgentie te creëren rond belangrijke evenementen en campagnes.

Jotform biedt ook duizenden WordPress-formulieren, zoals contactformulieren, leadgeneratieformulieren en bestelformulieren. Voeg ze toe aan je site om belangrijke bezoekersgegevens te verzamelen.

Jotform heeft een gratis abonnement. Probeer het uit om de widgets te ontdekken en te zien hoe eenvoudig je de functionaliteit van je WordPress-site kunt verbeteren zonder in te leveren op prestaties of code te schrijven.