Up next in 10
How to Show Before & After Photo in WordPress with Slide Effect For Free_ Interactive Picture ?
6K views
Oct 31, 2023
In this engaging video tutorial, you'll learn how to create captivating before and after photo comparisons in your WordPress website with a free and interactive slide effect. This visually appealing feature allows you to showcase transformations or changes effectively, engaging your audience and making your content more dynamic. Whether you're a blogger, photographer, or website owner, this step-by-step guide offers practical insights into adding an interactive picture feature to your website, enhancing user experience and visual storytelling without any extra costs. Don't miss out on this valuable resource for creating eye-catching before and after comparisons on your WordPress site.
View Video Transcript
0:00
What's up guys
0:02
Here's Claudio from VisualMoto, WordPress themes. And in today's video, you're going to learn how to add this interactive picture style
0:08
like I slide up for a before and after picture style. This is very useful in the case that you are presenting some features like photo filters, for example
0:18
or other services style. So it's interactive, everybody likes this and you can do this for free
0:25
and this is what you're going to learn into this video. But before I can continue, please, take a moment
0:29
Please take a moment to hit the subscribe button, like this video and share this content if a friend of first
0:33
I have no idea how much it helps us because I bring the early videos about WordPress, SEO, plugins, optimizations and many more topics in order to use internets on your sites favor
0:42
So let's get this started. First of all, we're going to move to our WordPress dashboard, okay
0:48
And from the dashboard, review the left side bar of menus, hold your mouse over plugins, and click on add new
0:55
Once you are right here, review the upper right corner next to keyword in the field college
0:58
search plugins we're going to type ultimate before and after image slide this guy
1:05
right here okay by them thick click on install then click on activate button this is
1:14
going to redirects you to uh to the plugins list the plugin going to let you to collect data
1:21
have no need to alloy this you can clear this notice as well and as
1:29
sudden you activate the plugin you're going to be able to see under your comment section
1:33
into the left side bar a new button called it before and after slider let's start creating
1:40
one slider after this we can move to customizing it okay so add new now you have to apply a title
1:48
in my case going to be before one but you are up to choose this title okay We have method one using two images method two using one image or method three using
2:01
three images, okay? I prefer the method one. It's the simpler solution, but you can try yours and see what fits better for you
2:09
And first of all, we have to upload the before image. So the before image is going to be this one, for example, the black and white image
2:17
and the other one going to be the color red image for example okay I'm going to create an example
2:23
like this one so my first image is going to be this black and white you can apply an image out
2:28
text this is very good for SEO okay we have a video explaining this after this go to after
2:36
image apply the color red one we can apply a title description I read more link I read more
2:47
link target okay they read more text we can change the orientation we can change this this
2:57
template for the style of the the arrow I'm gonna set this all as the full just so we
3:04
can apply this on the page so just click on publish button into the upper right
3:09
corner of our screen then we have the short code right here copy this short code
3:15
And then we're going to apply this into a page or a post where I would like to apply this
3:20
I can apply this using any plugin that you want. You just have to enter this short code into any section
3:25
Can be a widget, can be a block, can be WP Baker element, element or widget
3:32
Or it can be even a post in the case that you want. Let me apply this into some posts
3:36
So I can show you. I think this post right here. So here is the post Let me apply this short code Let me update the post and let reveal this
3:56
And here is my image. Can you see? Before and after. Before and after
4:05
Really, really simple. What else we can do using this plugin? Now let's play with the settings
4:11
First of all, let's change the orientation. Now, before and after goes to this style, okay
4:24
We can change the arrow style. I think this one is wonderful
4:33
But you can choose the one that fits better for your design. Looks like this one is a pro feature so we cannot change this yet
5:02
No problem, let's keep this for free. Everyone knows there's no free lunch, no problem
5:11
What else you can do? We have options. The default of set, the default label, we can change the text before and after
5:20
We can auto slide in the case that you want. We can on screw change the slider
5:25
We can move this to full screen. Click to move, show overlay and skip lazy load
5:37
This is good for performance okay Let me update And we have any style arrow So we can change the background the text color the after color the slider overlay color
5:52
and other important things to match this with your site color, with your site design
5:59
We have category, we have settings, and we have a gallery generator. We're going to explore this into another video, but by now, as you can check
6:08
we can create an amazing style for free. And that is, I hope you guys enjoy this video
6:14
Feel free to use the comment section below in the case that you have any question
6:18
And don't forget to check out the VisualMoodle boardless WordPress plugin in order to gain widgets, elements, templates and tools
6:26
To build up your site using Elementor or Gutenberg editors. To install this is completely free
6:32
Just go to our WordPress dashboard, plugins, add new, search for our borders, click on install and activate
6:37
and activate it's completely yours and free moreover in the case there are needs of the
6:42
best free WordPress team go to our WordPress dashboard appearance themes and new
6:47
search for Enzu click on install and activated it gonna gives you amazing prep buildup size that
6:52
you can import if a single click also many customization options folder typography and many
6:57
pro features that not even some pro WordPress team offers everything for free
7:03
moreover in the case that you want to go premium in order to save your time
7:07
count on our full support, unlock access to your full template library, premium icon blocks
7:13
premium packs, premium design assets, and many, many more pro features. Just go to visualmodo.com, purchase the VisualMoto Pass and go premium
7:22
And that is. I hope you guys enjoy this video. Don't forget to subscribe the channel and I see you tomorrow
7:27
All the best
#Clip Art & Animated GIFs
#Online Communities
#Online Goodies