How to Configure and Style Image Comparison #
EA Image Comparison lets your viewers easily compare between two images. This is a great way to put a new product and an old product side by side and let visitors see the difference.
How to Activate Image Comparison #
To use this Essential Addons element, find the ‘EA Image Comparison‘ element from the Search option under the ‘ELEMENTS‘ tab. Simply just Drag & Drop the ‘EA Image Comparison’ into the ‘Drag widget here‘ or the ‘+’ section.
After you are successfully done with step 1, this is how the element is going to look like.
How to Configure the Content Settings #
Under the ‘Content’ tab, you will find the ‘Images’ section.
From the ‘Images’ section, you can upload your prefered Before & After Images, modify the label and add an alter tag for the images.
From the ‘Settings’ section, you can increase or decrease the ‘Original Image Visibility’.
Besides, you can use the drop-down menu to change the ‘Orientation’ from out of these two: Horizontal & Vertical. By default, it is set to ‘Horizontal’.
You can turn on or off the toggle to change ‘Overlay’, ‘Move Slider on Hover’ and ‘Move Slider on Click’ settings.
Click to see Live Demo #
How to Style Image Comparison #
Switch to the ‘Style’ tab to style all the features of Image Comparison.
Image Container Styles #
From the ‘Image Container Styles’ section, you can use the toggle to enable or disable the ‘Max Width for the Container’. You also have the option to add Border & style it.
You can also add styling to ‘Handle’, ‘Divider’ & ‘Label’ by changing the color, typography & many more as per your preference.
Final Outcome #
By following the basic steps and a bit more modifying, you can style your Image Comparison as per your preference.
This is how you can easily create a comparison layout for images to showcase on your website using EA Image Comparison.
Getting stuck? Feel to Contact Our Support for further assistance.