Hoe voor en na foto’s te tonen in WordPress (met Slide Effect)

Wilt u de voor- en na foto’s op uw website weergeven? Een voor- en na foto kan handig zijn om naast elkaar twee identieke afbeeldingen te vergelijken met kleine verschillen. 

In dit artikel zullen we vertellen hoe je gemakkelijk voor- en na foto’s in WordPress kunt laten zien.

Hoe werkt het voor- en na-foto-effect?

Normaal gesproken gebruiken mensen Photoshop om een ​​afbeelding vóór en na te maken. Het is een enkele foto die voor- / na-effecten laat zien en u kunt deze als een statische afbeelding toevoegen aan uw WordPress-website.

Een functionele fotoslider is een interactieve manier om 2 verschillende versies van een vergelijkbaar beeld op volledige grootte weer te geven. U kunt de schuifregelaar verplaatsen om beide afbeeldingen naast elkaar te vergelijken.

Laten we eens kijken hoe je voor- en na foto’s eenvoudig kunt weergeven in WordPress.

De voor- en na foto weergeven in WordPress

Het eerste dat u hoeft te doen, is de Twenty20 Image Before-After- plug – in installeren en activeren .  Na activering moet u een pagina / bericht maken of bewerken in uw WordPress-beheergebied waar u de voor- en naafbeelding wilt weergeven. Klik nu op de knop Twenty20 toevoegen boven de teksteditor.

Het opent de WordPress Mediabibliotheek in een pop-upvenster. Van hieruit moet je twee afbeeldingen selecteren voor de schuifregelaar vóór en achter.

Zodra de afbeeldingen zijn geselecteerd, klikt u op de knop Invoegen .

Vervolgens worden de tekstvelden weergegeven om inhoud toe te voegen bovenop de voor- en na foto’s. U kunt ook een breedte toevoegen voor de schuifregelaar, offsetwaarde, schuifregelaarrichting en meer.

Klik daarna op de knop Shortcode invoegen om de voor- en nafoto toe te voegen aan uw WordPress-pagina.

U kunt ook de Twenty20-beeldwidget gebruiken om de voor- en na-foto weer te geven in uw WordPress zijbalk. Ga eenvoudig naar de sectie Vormgeving »Widgets in uw WordPress-beheerder en sleep vervolgens de Twenty20-schuifregelaar-widget in het widgetgebied van uw zijbalk.

De Twenty20 Slider-widget heeft vergelijkbare instellingen voor de voor- en na-foto zoals we hierboven in deze handleiding hebben gedeeld. U kunt de twee afbeeldingen één voor één selecteren in de widgetinstellingen om de schuifregelaar voor en na foto’s te maken.

Nu kunt u uw website bezoeken om de voor- en na-foto in actie te zien.

Terwijl de gebruikers de hendel naar elke afbeelding schuiven, wordt de andere afbeelding zichtbaar. Gebruikers kunnen de schuifregelaar helemaal naar rechts of links nemen om de volledige voor- en naafbeelding te bekijken. Naarmate de gebruikers de labels voor en na verschuiven, verdwijnen de labels automatisch.