Image Comparison

A mighty fine tool for any E-commerce site, allowing customers to compare between two products with a simple slide.

Using Image Comparison #

Make sure you have the Image Comparison widget enabled from your Dashboard > Droit Addons > Elements.  

Step 1 #

Let’s start by searching Image Comparison from the left-hand side menu, and dragging the widget to your preferred section.

Image Comparison widget on Elementor

Step 2 #

Start by adding before and after images to your image comparison section. Upload two different images or select from the existing library and add slider icon for both sides. 

Comparison widget - Content menu
Comparison widget - Content menu

Step 3 #

Next up you can edit how your visitors will interact with the image comparison slider from the setting option.

Comparison widget - Settings menu

You can make the slider vertical or horizontal, add the Move slider on mouse hover functionality, and overlay.

Comparison widget - Settings menu

Live Copy & Paste #

You can follow all the steps above and create your Image Comparison section, or if you’re interested in skipping some steps, you can visit the Image Comparison widget’s live demo page and simply copy one of three preset styles from the Live Copy button. And paste it in your preferred section.

That’s it.

Powered by BetterDocs