Hoe u voor en na foto in WordPress kunt weergeven (met dia-effect) - DeLaatbusiness

Hoe u voor en na foto in WordPress kunt weergeven (met dia-effect)

3 min


123

Wil je de voor en na foto’s op je website laten zien? Een foto voor en na kan handig zijn om twee identieke afbeeldingen met kleine verschillen naast elkaar te vergelijken. In dit artikel zullen we delen hoe u eenvoudig een voor en na foto in WordPress kunt weergeven.

Hoe voor en na foto op WordPress te laten zien

Hoe werkt het foto-effect voor en na?

Normaal gesproken gebruiken mensen Photoshop om een ​​afbeelding voor en na te maken. Het is een enkele foto met voor / na-effecten, en je kunt deze als een statische afbeelding toevoegen aan je WordPress-website.

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

Laten we eens kijken hoe u eenvoudig een voor en na foto in WordPress kunt weergeven.

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 / post maken of bewerken in uw WordPress-beheergebied waar u de afbeelding voor en na wilt weergeven. Klik nu op de knop Twenty20 toevoegen boven de teksteditor.

Voeg twintig20 knop toe

Het opent de WordPress Media Library in een pop-up. Vanaf hier moet u twee afbeeldingen selecteren voor de schuifregelaar voor en na.

Voor na afbeeldingen

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 breedte toevoegen voor de schuifregelaar, de offsetwaarde, de richting van de schuifregelaar en meer.

Invoegen voor na foto shortcode

Klik daarna op de knop Shortcode invoegen om de foto voor en na aan je WordPress-pagina toe te voegen.

Je kunt ook de Twenty20-afbeeldingswidget gebruiken om de foto voor en na in je WordPress-zijbalk weer te geven. Ga gewoon naar het gedeelte Uiterlijk »Widgets in uw WordPress-beheerder en sleep vervolgens de Twenty20 Slider-widget in uw zijbalkwidgetgebied.

Zijbalkwidget voor voor en na foto

De Twenty20 Slider-widget heeft vergelijkbare instellingen voor de voor- en na-foto zoals we hierboven in deze handleiding hebben gedeeld. U kunt de 2 afbeeldingen een voor een selecteren in de widgetinstellingen om de fotoschuifregelaar voor en na te maken.

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

Voor en na foto

Terwijl de gebruikers de hendel naar elke afbeelding schuiven, wordt de andere afbeelding zichtbaar. Gebruikers kunnen de schuifregelaar helemaal naar rechts of links bewegen om de volledige afbeelding voor en na te zien. Terwijl de gebruikers schuiven, verdwijnen de labels voor en na automatisch.

Schuif voor en na afbeelding

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

We hopen dat dit artikel je heeft geholpen om te leren hoe je een foto voor en na in WordPress kunt weergeven.


What's Your Reaction?

hate hate
0
hate
confused confused
0
confused
fail fail
0
fail
fun fun
0
fun
geeky geeky
0
geeky
love love
0
love
lol lol
0
lol
omg omg
0
omg
win win
0
win
Erwin@delaatbusiness.com
Dag, Hulp nodig met internet marketing of websites maken? neem dan contact op

0 Comments

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *

Choose A Format
Personality quiz
Series of questions that intends to reveal something about the personality
Trivia quiz
Series of questions with right and wrong answers that intends to check knowledge
Poll
Voting to make decisions or determine opinions
Story
Formatted Text with Embeds and Visuals
List
The Classic Internet Listicles
Countdown
The Classic Internet Countdowns
Open List
Submit your own item and vote up for the best submission
Ranked List
Upvote or downvote to decide the best list item
Meme
Upload your own images to make custom memes
Video
Youtube, Vimeo or Vine Embeds
Audio
Soundcloud or Mixcloud Embeds
Image
Photo or GIF
Gif
GIF format