For a certain type of business such as a photo editing service, adding an image comparison can be a useful tool to describe your service. You can add the image comparison to the homepage, landing page or any page where you talk about the service you offer.
Elementor indeed does not offer any widget or functionality to add image comparison, but you can get it using an add-on. There are additional modules Elementor which 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 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 Comparison Pictures which you can use to add image comparison to Elementor page.
How to Add Image Comparison in Elementor
Make sure you have the JetElements add-on installed and activated before you begin. If you are new to Elementor, you can read our previous article to learn how to use Elementor.
We will directly add the widget Comparison Pictures in this article.
Before you start, you can prepare two images to compare. For example, you can prepare a before image and an after image. Once you're ready, just drag the widget Comparison Pictures in the Elementor edit box.
By default, JetElements Image Compare widget creates two image comparisons. If you just need to create an image comparison (two images to compare), you can delete one of the existing image comparisons.
Read also: Elementor: How to Add Lottie Animation
To add the before and after image, open the existing image comparison (by clicking on it) to edit the contents. Simply select the previous image on the before picture section and select the image after on the after picture section. As you can see, you can also override the labels for each section.
Once the selection of images is complete, you can open the block Settings to set the starting position of the separator. If you want to add more than one image comparison, you can set the Carousel Settings.
Then you can style your image comparison by switching to the tab Style. You can open five adjustment blocks to style your image comparison. But if you only need to add an image comparison, you just need to open the first three blocks.
- General
You can open this block to set padding, box shadow, border type and border radius.
- Label
You can open this block to style 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), etc…
- Handle
You can open this block to style the handle. You can set things like handle alignment, control width, control height, handle color (whether normal state or on hover), and so on.
If you add more than one image comparison, you can also open the blocks Carousel Arrows et Carousel Dots to style arrows and navigation points.
That's it. You can click the button PUBLISH / UPDATE for publish /edit your page once you are done editing it.
Get Elementor Pro Now!!!
Conclusion
Here ! That's it for this article that shows you how add image comparison in Elementor. If you have any concerns about how to get there let us know within Comments.
However, you can also consult our resources, if you need more elements to carry out your projects of creation of Internet sites, by consulting our guide on the WordPress blog creation or the one on Divi: the best WordPress theme of all time.
But meanwhile, share this article on your different social networks.
...
