Table of Contents
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.
Table of Contents: #
- How to Activate Image Comparison
- How to Configure the Content Settings
2.1. Images
2.2. Settings - How to Style Image Comparison
3.1. Image Container Styles
3.2. Others - Final Outcome
1. 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.
2. How to Configure the Content Settings #
Under the ‘Content’ tab, you will find the ‘Images’ section.
2.1. Images #
From the ‘Images’ section, you can upload your prefered Before & After Images, modify the label and add an alter tag for the images.
2.2. Settings #
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 #
3. How to Style Image Comparison #
Switch to the ‘Style’ tab to style all the features of Image Comparison.
3.1. 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.
3.2. Others #
You can also add styling to ‘Handle’, ‘Divider’ & ‘Label’ by changing the color, typography & many more as per your preference.
4. 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.
