Before And After Slider In Elementor No Plugin HTML CSS
Hi guys in this Tutorial I’m going to show you how to add a before and after slider bar in Elementor. It only takes a couple of minutes to do. So don’t forget to hit that like and subscribe button and let’s get into the Tutorial.
Okay guys the first thing we’re going to do is set up our page and we do that by adding a new section. We’re going to add two columns.
Now we need to add a HTML widget and we do that by typing in the search bar in the top left hand side HTML. Once you see the HTML widget drag and drop it into your page. Now all you need to do is paste in the HTML code that you can find at the bottom of this Tutorial. I will walk you through this bit of code in a minute but what I’m going to do next is ADD our CSS code to add CSS into Elementor.
You will need Elementor Pro there is a link for that in the bottom of the Tutorial. What we need to do now is click on advanced in the top left hand side and scroll down to custom CSS. Now all that’s left to do is paste in our custom CSS code that you can find below. Unlike other bits of code you won’t be able to see the end result in Elementor page builder.
To do that you’ll need to click on the preview button in the bottom left hand side next to the publish button. Once the page loads you’ll be able to see your before and after image. In the centre is your slider bar and if you move it to the left it will say after. If you move it to the right it’ll say before now you probably don’t want my pictures on your website.
So I’m going to now show you how to change the images displayed in the before and after slider bar. To do that we need to go back into Elementor Pro and we’re going to have to click on content in the top left hand side. Now we’re going to have to go into our WordPress media gallery. We’re going to have to copy the URL for the image that we want to display.
Now back in our code we’re going to go and highlight the first URL in the third block of our code. Now all we need to do is paste in our new image URL. This is what’s going to be displayed on the before side of our slider. Now all we need to do is go and copy our URL for our second after image. Like before we’re going to highlight our second URL and we’re going to paste in our new one.
I will show you how to change this size of our image later in the Tutorial. But what I’m going to do now is make sure our images have changed within our code. To do that we need to click on the preview button in the bottom left hand side of our screen next to the publish button. You’ll notice once our preview page loads our image has changed. What I’m going to do now is make our image bigger and I do that by going back into our Elementor page builder.
To make our size changes go into a HTML code and at the bottom. It will say width and height by increasing or decreasing these numbers which make our image bigger or smaller on the page. If we move up slightly we’ve got our slider bar starting position at the moment is set to 50%. If I change it to 60% it will move slightly more towards the left of our screen with these changes made.
If I preview our page you’ll notice that our image is bigger and our starting slider bar position has moved. If we want to add more before and after images through our page we need to go back into Elementor Pro. Like before we need to set up our page for our second block of HTML. So I’m going to drag in another spacer and I’m going to add another HTML widget and like before I’m going to copy and paste in a HTML code and our CSS code.
Now in theory this should be enough to make both our slider bars work. Our only differences at the moment is the images that we’re using in our HTML code. Unfortunately this is not the case and we need to make a couple of changes in our HTML code. To make our second image slide bar work all we need to do is go into the third block down in our code. Once there we’re going to add an additional letter to our class and in the line directly below where it says ID.
We’re going to add an additional letter here with these two changes made. We’re going to go to this section of our code and whatever’s written in our ID. We’re going to have to repeat here I only added the letter A. So I’m going to type in a and I’m going to preview our page. Once loaded you’ll see that we’ve got both images added to our page. I’ll show you how to create the text in the top corner here in a minute.
But as you can see we can independently move both our slider bars to correct the text. Go back into Elementor and move our column then when we preview our page. Again you’ll see that our text has moved you might be wondering why use HTML instead of using another plugin. Well plugins can conflict on your website which can lead to them breaking and they can make your site run slower. So it’s definitely worth using Alternatives where you can.
Remember if you do want to use this code on your website you will need Elementor Pro. If you haven’t got Elementor Pro there is a link at the top of the description it is an affiliate link. It doesn’t cost you any more to use but it does give me a very small percentage of Elementor’s profits if you choose to sign up. If you have found this Tutorials useful please do hit that like And subscribe button and if you’ve got any questions come and hit me up in the comments box below.
That’s it for this one thanks for watching.
And I’ll see you in the next one.
