Image Comparison

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: #

  1. How to Activate Image Comparison
  2. How to Configure the Content Settings
    2.1. Images
    2.2. Settings
  3. How to Style Image Comparison
    3.1. Image Container Styles
    3.2. Others
  4. Final Outcome

1. How to Activate Image Comparison #

To use this Essential Addons element, find the EA Image Comparisonelement from the Search option under the ELEMENTS tab. Simply just Drag & Drop the EA Image Comparison’ into the Drag widget hereor the ‘+’ section.

Image Comparison

After you are successfully done with step 1, this is how the element is going to look like.

Image Comparison

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.

Image Comparison 1

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.

Image Comparison

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.

Image Comparison

3.2. Others #

You can also add styling to ‘Handle’, ‘Divider’ & ‘Label’ by changing the color, typography & many more as per your preference.

Image Comparison

4. Final Outcome #

By following the basic steps and a bit more modifying, you can style your Image Comparison as per your preference.

Image Comparison

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.

Get Started Now

Powered by BetterDocs