How to Add Before and After Images for Comparison with Elementor

Today you’ll learn how to add the Image Comparison widget to your website with JetElements plugin. This plugin is the most multifunctional among all Elementor add-ons. It has a lot of high-quality content elements which you can use while building your site. Before we start, make sure that you’ve installed JetElements plugin and open your site in Elementor. Today we’re going to create something awesome!

1. Look for the Image Comparison widget in the search field.
2. Then grab it and drop it onto a new section.
3. On the left in the sidebar menu, you will see the settings block. Here, you can increase the number of slides to show.
   
   
   
4. You can toggle the Pause on Hover option to “yes” and the slide will pause once you hover over the image.
5. Also, you can turn on the Autoplay and adjust its speed.
6. Toggle Infinite Loop to “yes” if you want your slide to change infinitely.
7. Then you can opt for either slide or fade effect.
8. The next step is Show Arrows and Dots Navigations. These are the two options that will help you make the navigation more intuitive and user friendly.
9. Now, let’s go ahead to the Items block and add images.
   
   
   
10. By default, the labels are called “Before” and “After”. However, you can change them to whatever you need.
11. To add images just click on “Choose Your Image” and upload a picture from Insert Media.
12. After the images are added, you can change their ratio simply by grabbing the slides divider in the center and pulling it to any side.
13. Now, move to the style settings.
14. To change the look of labels go to the second tab.
    
    
    
15. Here you can change the colors of before and after labels separately, their horizontal and vertical alignment and background type.
16. Next, go to the handle settings. You can control its width, height, background color, and the handle arrow type.
    
    
    
17. In this block, you can also customize different parameters (including starting position) of the divider between those images.
18. And the last two blocks are style setting of the arrows and dots that allow you to control the slider. These settings should be familiar to you if you have ever created the slider with JetElements.

Final Word

And now we’re done creating images comparison with the help of JetElements plugin. I hope you've enjoyed this guide and found it useful.

Read Also

How to Create a Countdown Timer with Elementor Page Builder

Image Accordion on WordPress with Elementor

Add Instagram Feed to WordPress Page with Elementor Page Builder

5 Image Manipulation Techniques You Can Use to Cut Load Time by 80%