Back to contents

How to add Before and After images to the Elementor-built page with JetElements Image Comparison widget

This tutorial is based on Image Comparison, one of many widgets from JetElements addon for Elementor.

If you are a designer, a photographer or you provide any service, etc., the Image Comparison widget of JetElements plugin will be of extreme use. With the help of this widget, you will be able to visualize the inspiring results of your work. This widget compares two photos, making the results of your work evident.

Image Comparison widget

Creating a comparison slider

Step 1 — First of all, log in to your website. Then, move to the page, where you need to add the Comparison widget. Click the Edit with Elementor option at the top panel.

Step 2 — Search for the Image Comparison widget in the Elementor page builder. Drag and drop it into a new section of your website.

Image Comparison widget

Step 3 — First of all go to the Content > Items block, where you are able to upload the Before and After pictures for each slider. Just click the Add Item button.

If you want, you can add a label to each one. If you add more than one item, the carousel will be created automatically.

Items settings

Step 4 — Move on to the Content > Settings block. Select the number of slides (up to 10) to display on your site at a time in the Slides to Show dropdown. Enable the Autoplay option in order for the slides to change automatically. Then, set the speed in the Autoplay Speed field (in ms).

In case you want the autoplay to stop when you put the mouse cursor over a slide enable the Pause on Hover option. And enable the Infinite Loop option for the slides to change continuously without stopping. Set the slides switching time (ms) in the Animation Speed option.

Effect settings

Step 5 — Proceed to the Effect dropdown to pick either the Slide or the Fade effect.

Step 6 — When it comes to the navigation, you can enable the Show Arrows Navigation so as to showcase the tiny arrows on both sides of the slides and style them up by choosing the suitable arrows in the Preview Arrow Icon and Next Arrow Icon options. There is also the opportunity to enable the Show Dots Navigation option with the aim of displaying dots under the slides.

Show Dots Navigation option

Step 7 — Navigate to the Style block in order to make your Image Comparison widget more attractive. You can style up the Labels, the Handle, the Arrows and the Dots navigation. One of the peculiarities of this widget is that it provides an ability to define the place where the divider will be placed (in %) in the Divider Starting Position option.

Divider Starting Position option

You can be proud of yourself. You have completed this tutorial and now you can easily work with Image Comparison widget!