The Easiest Way to Add the Before and After Slider to Your Website
The before and after images are vastly used for marketing purposes in a very wide range of industries. There are no words that can better describe the effect a certain process has than an image that shows precisely how someone or something looked before and after that process. Even in businesses that don’t revolve about products whose effects are visible, it is possible to use this feature in a humorous way.
Let’s say you are running a restaurant – you could show how a person looks before eating at your palace and how delighted they look after tasting your delicacies. The possibilities before and after slider offers in terms of depicting the benefits and advantages of your products/services are limitless. It is all up to your imagination.
Just like adding parallax effect to your our pages makes your website look modern, the before and after slider makes it hard to forget as images tell more than 1000 words can.
Plus, you can add this feature to your website by yourself. In this article, we will show you how to create a before and after slider with the popular, free Before/After Comparison widget.
Stay tuned to read more about:
Qi Addons for Elementor is an intuitive tool that allows you to add a broad range of gorgeous elements to your website effortlessly. It comes with a very practical, user-friendly interface, and both newbies and advanced users will find it easy to use. What’s particularly great about Qi is the fact that besides so many useful features, it also provides you with a dash of contemporary elegance.
The process of installing the QI Addons for Elementor is no different from any other plugin installation. Should you have any questions about it, make sure to check the link we provided above, and you can also write to us in the comment section.
Since this is an Elementor plugin, make sure to switch to Elementor editor when creating a new post. All the Qi Addons widgets will be neatly displayed in the left-hand elements menu. Simply scroll down the menu to find them.
The Before and After Slider widget offers a simple and effective way to show two images in the same frame. Find it in the sidebar menu on the left, by typing the widget name in the search field or by browsing the widgets in the menu.
To add the Before/After comparison Slider, drag and drop the Elementor element to the desired place. When the widget is added, all the settings will be on the left side and within the Content and Style tabs are all the options related to the slider.
Now, you need to add the before and after images to the slider. First, we are adding the before image – hover over the image field and the Choose Image option will show or just click the small plus icon in the middle of the field.
You can choose an image from the media library or upload an image to your media library if necessary. Just drag and drop the selected picture and it to the media library if it isn’t already there then select it and choose.
After you inserted the desired images, you can continue to customize the before/after slider by changing the text that will display in the circle in the middle of the slider. You can write an instruction here, or a more catchy message, it is up to you and your website style. You can also choose whether you want the text to be vertically or horizontally aligned.
If you want to adjust where the border between the before and after image will appear on the slider, you can enter the desired Offset value in the field. The default value is 50% which means that the default border is right in the middle of the image. This is what the slider can look like if you adjust the offset:
Now, it is time for more finetuning of the before-after slider. Let’s see what else you can customize to make the slider look just how you need it to look. Click the Style tab to explore more options.
If you want to move the circular handle from the center of the picture, just use the slider to adjust the Handle Top Offset value. You will immediately see live changes so you can easily decide what works best for you. You will also adjust the circle size in the same way, as well the border between the before / after version of the picture.
You can also click on the Nabdle Text Color to create your shade of the color for the text in the circle, also choose the text font in the same way. Lastly, you can also customize the circle color in the same way.
In the Advanced tab, you will find many more options to make the slider more attractive and catchy. These options are not exclusive for this widget only, they are default Elementor options that you can use to edit other widgets on a page too.
Let’s illustrate some of the most interesting ones. Feel free to test all the options, as you will see all the changes that you make live, so you can instantly learn what each option does to the slider and whether it works for you.
If you open the Advanced menu, you will see the options for setting margin and padding. You will notice a small laptop icon next to each option which allows you to set different values for margin and padding on different devices – laptop, tablet, or mobile.
Motion Effects are particularly interesting and you have a really wide choice of more than 35 motion effects to select from. You also have the possibility to set different animations to show on different devices. After you choose the animation type, you can also adjust its duration and delay if you find it necessary.
Now click the Transform tab to discover more effects you can use. From rotating to skewing and horizontal and vertical flipping, there are many things you can do to change the display of the slider.
In the Border tab, you will find options that will allow you to decorate the sider by adding shadow picture borders in the colors that you select. You can also choose to add a shadow effect around the slide box and set the shadow effect output.
The options in the Mask tab are very handy. You can set here for the slider to be displayed in different shapes – circle, flower, sketch, triangle, blob, hexagon, or even add a custom shape. It is also possible to adjust the size and position of the selected shape.
Pay special attention to the Responsive tab, as this is very you can choose the slider not to be displayed on selected devices.
This is what the slider looks like on the page after we adjusted it for our needs:
For more more info take a look at this video:
In Conclusion
As you can see, adding the before and after slider on your pages is not rocket science. Now you can let your imagination run wild and create some impressive visual representation of the effects your work, products, or services may produce. In case you have a question, comment, or inquiry of any kind, feel free to reach out to us at any time.
We hope this article was helpful. If you liked it, feel free to check out some of these articles as well!
