How to Add Image Comparison in Elementor

For a certain business type such as a photo editing service, adding an image comparison could be a useful tool to describe your service. You can add the comparison image to the homepage, landing page, or any page where you tell about the service you offer. Elementor indeed offers no widget or feature to add an image comparison, but you can achieve it using an add-on. There are some Elementor add-ons that offer a widget to add an image comparison. Three of which are Essential Addons, Happy Addons, and JetElements. In this article, we will show you how to add an image comparison in Elementor using JetElements.

JetElements itself is a premium add-on for Elementor developed by Crocoblock. It is part of the JetPlugins family. The add-on comes with a widget called Image Comparison which you can use to add an image comparison to the Elementor page or template.

How to Add Image Comparison in Elementor

Make sure you have installed and activated the JetElements add-on before getting started. You can get it on the Crocoblock website for $24 per year. In case you are new to Elementor, you can read our previous article to learn how to use Elementor. We will go straight to adding the Image Comparison widget in this article.

Before getting started, you can prepare two images to be compared. For instance, you can prepare a before image and after image. Once you are ready, simply drag the Image Comparison widget to the canvas area.

By default, the Image Comparison widget of JetElements creates two image comparisons. If you just need to create one image comparison (two images to be compared), you can delete one of the existing image comparisons.

To add the before and after image, open the existing image comparison (by clicking it) to edit the content. Simply select the before image on the Before Image section and select the after image on the After Image section. As you can see, you can also replace the labels on each section.

Once done selecting the images, you can open the Settings block to set the starting position of the divider. If you want to add more than one image comparisons, you can set the carousel settings on the Carousel Settings section.

Next, you can style up your image comparison by switching to the Style tab. There are five setting blocks you can open to style up your image comparison. But if you only need to add one image comparison, you only need to open the first three blocks.

  • General

You can open this block to set the padding, box shadow, and border type and border radius.

  • Label

You can open this block to style up the comparison labels (the “before” and “after” label). You can set things like horizontal alignment, vertical alignment, text color, background color, typography (font family, font style, font size), and so on.

  • Handle

You can open this block to style up the handle. You can set things like handle alignment, the width of the control, the height of the control, the color of the handle (be it the normal state of the hover state), and so on.

If you add more than one image comparisons, you can also open the Carousel Arrows block and Carousel Dots block to style up the navigation (arrows and dots).

That’s it. You can click the PUBLISH/UPDATE button to publish/edit your page once you are done editing it.

This page may contain affiliate links, which help support our project. Read our affiliate disclosure.
Picture of Editorial Staff

Editorial Staff

WordPress page builder tutorials, tips, and resources
Want to save yearly expense up to $219? why not?

Leave a Comment

Haven’t used Elementor Pro yet?