Hoe te tonen voor en na foto 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 delen hoe je gemakkelijk voor- en na foto 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 gemakkelijk voor- en na foto in WordPress kan worden weergegeven.

Video-instructies

Als je de video-zelfstudie niet wilt bekijken, kun je hieronder de onderstaande tekstversie blijven lezen:

De voor- en na foto weergeven in WordPress

Het eerste dat u hoeft te doen is de Twenty20 Image Before-After-plugin installeren en activeren. Raadpleeg onze stapsgewijze handleiding over het installeren van een WordPress-plug-in voor meer informatie.

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 Voeg Twenty20 toe knop boven de teksteditor.

Het opent de WordPress Mediabibliotheek in een pop-up. Vanaf hier moet je twee afbeeldingen selecteren voor de schuifregelaar vóór en achter.

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

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 Voeg shortcode toe om de voor- en na foto op uw WordPress-pagina toe te voegen.

U kunt ook de Twenty20-beeldwidget gebruiken om de voor- en na-foto weer te geven in uw WordPress zijbalk. Ga gewoon naar Uiterlijk »Widgets in uw WordPress-beheerder en sleep vervolgens de Twenty20 Slider-widget in uw zijbalk-widgetgebied.

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 gebruiker de hendel naar elke afbeelding schuift, wordt de andere afbeelding zichtbaar. Gebruikers kunnen de schuifregelaar helemaal naar rechts of links nemen om de volledige voor- en naafbeelding te zien. Naarmate de gebruikers de labels voor en na verschuiven, verdwijnen de labels automatisch.

Deze plug-in werkt geweldig met de populaire WordPress-paginabuilders zoals Beaver Builder en Elementor om snel voor- en na foto's op uw webpagina's weer te geven zonder gebruik van shortcodes.

We hopen dat dit artikel je heeft geholpen om voor en na foto's in WordPress te laten zien. U kunt ook onze handleiding over het toevoegen van vergrotende zoom in afbeeldingen in WordPress bekijken.

Als je dit artikel leuk vond, meld je dan aan voor onze YouTube-video-tutorials over WordPress. U kunt ons ook vinden op Twitter en Facebook.