Hoe vergelijk ik twee foto’s met de voor-en-na-slider?
Robert Oosterloo
Bijgewerkt op · 3 min lezen
Een verbouwde keuken, een opgeknapte tuin, een behandeling in de salon: met de Voor & na slider zie je het verschil in één beeld. De bezoeker sleept een schuifknop over de foto en ziet links de situatie ervoor en rechts erna. Zo stel je hem in.
In het kort
- Voeg in een kolom het blok Voor & na slider toe.
- Kies de Voor afbeelding en de Na afbeelding. Zonder beide toont het blok niets.
- Optioneel: een Voor label en Na label.
- Gebruik twee foto’s met dezelfde breedte en hoogte, vanaf hetzelfde standpunt.
Stap 1: Voeg het blok Voor & na slider toe
Klik in een kolom op het plusje, zoek op voor of slider en kies Voor & na slider. Bovenaan de instellingen staat de opmerking: “Voor het beste resultaat zorg je ervoor dat de voor en na afbeeldingen dezelfde breedte en hoogte hebben.” Neem die serieus, zie de tips hieronder.
Stap 2: Kies de voor- en na-afbeelding
Kies bij Voor afbeelding de foto van de oude situatie en bij Na afbeelding de foto van het resultaat. Beide zijn verplicht: met één foto toont het blok niets.
Nog geen website op leflite?
Wij bouwen hem samen met jou. Daarna pas je alles zelf aan, precies zoals in dit artikel.
- Online binnen een week
- Hosting, SSL en back-ups inbegrepen
- Vanaf €49,95 per maand
Stap 3: Vul de labels in
Bij Voor label en Na label typ je een kort woord dat in de hoek van de foto komt, bijvoorbeeld “Voor” en “Na”, of “2019” en “2026”. Het voor-label staat linksboven, het na-label rechtsboven. Laat ze leeg als je geen labels wilt.
Stap 4: Kies de Afbeelding grootte
Bij Afbeelding grootte kies je welke versie van de foto’s het blok gebruikt. In een brede kolom is Large of Volledige grootte (met foto’s van rond de 1200 tot 1920 pixels breed) mooi scherp.
Zo werkt het voor je bezoeker
De slider begint in het midden. De bezoeker sleept de ronde knop naar links of rechts, of klikt op een plek in de foto: de scheidingslijn springt daarheen. Op een telefoon werkt slepen met de vinger.
Tips voor goede foto’s
- Zelfde standpunt: maak de na-foto vanaf precies dezelfde plek en hoogte als de voor-foto. Markeer de plek, of gebruik een statief.
- Zelfde formaat: snijd beide foto’s bij naar dezelfde breedte en hoogte, bijvoorbeeld 1600 x 900 pixels. De hoogte van de slider volgt de na-foto. Is de voor-foto anders van verhouding, dan klopt het beeld niet.
- Zelfde licht: fotografeer bij vergelijkbaar daglicht, zodat het verschil echt over het resultaat gaat.
- Licht bestand: verklein de foto’s voor je ze uploadt, zie afbeeldingen uploaden in het juiste formaat.
Tip: heb je veel projecten met een voor- en na-foto? Zet dan per project een voor-en-na-slider, of toon de resultaten in een fotogalerij en kies één project uit voor de slider.
Lukt het niet?
- Ik zie niets op de pagina. Kies zowel een Voor afbeelding als een Na afbeelding. Met één foto toont het blok niets.
- De foto’s verspringen of passen niet. De foto’s hebben verschillende afmetingen. Snijd ze bij naar precies dezelfde breedte en hoogte en upload ze opnieuw.
- De foto’s zijn wazig. Kies een grotere Afbeelding grootte.
- Voor en na staan omgedraaid. Wissel de foto’s in de velden Voor afbeelding en Na afbeelding.
Meer over beeld op je website lees je in alles over afbeeldingen en video. Kom je er niet uit? Neem contact met ons op.
Deel dit artikel
Robert Oosterloo
Robert Oosterloo is eigenaar en UX/UI-designer van Lef Creative in Kollum. Hij ontwerpt websites, webshops en software voor ondernemers in Noord-Nederland.
Lees ook
Een slider instellen
Een video als achtergrond
Een foto als achtergrond van een sectie
Ook zo’n website?
Je leest hier hoe makkelijk je een leflite-site zelf bijhoudt. Wil je er ook een? We denken vrijblijvend met je mee.
Liever direct contact? Bel Robert op 06 35 66 47 73 of stuur een WhatsApp.