1. Home
  2. Docs
  3. Image Elements
  4. Image Comparison

Image Comparison SA Element

Image Comparison is an awesome creative element that is built to give you the ability to compare two images as you can compare by using a vertical or horizontal orientation. In addition, you can customize the drag tool itself by choosing whether if you want to see the image full-frame or half. Here in this tutorial, you’re going to learn how to use the Image Comparison element into Elementor Page Builder. So let’s get straight into it:

 


If you don’t know how to activate elements and start using it, then check the tutorials below:

Ξ Activate/De-activate Elements

Ξ Using Elementor Addons in Elementor


 

How to Customize the Image Comparison Element

 

»Content

 

Images

⇒Label Before: Add the text for the before label of image comparison overlay.

: Upload a media here for the before image of the image comparison.

⇒Before Image ALT Tag: Add the before image ALT tag.

⇒Label After: Add the text for the after label of image comparison overlay.

: Upload a media here for the after image of the image comparison.

⇒After Image ALT Tag: Add the after image ALT tag.

 

Settings

⇒Original Image Visibility: Customize the original image visibility score.

⇒Orientation: Set the image comparison orientation either vertical or horizontal.

⇒Wants Overlay? Do you want the overlay effect on your image comparison? Then enable it.

⇒Move Slider On Hover: If you like to move the comparison handle/slider on hover, then enable it here by selecting Yes.

⇒Move Slider On Click: And if you prefer to move the comparison handle/slider on click, then enable it here by selecting Yes.

 


»Style

 

Image Container Style

⇒Set Max-width for the Container?: Want to set the max-width for the container? Then select Yes and customize the container max-width for different dimensions.

⇒Container Max-width: Customize the image container max-width for different dimensions.

⇒Border Type: Select a border type from the list according to your preference. And then set the border width for the top, right, bottom and left of the image container for different dimensions. You can link the values together or customize them individually.

⇒Border Color: Add a custom color to the border.

⇒Border Radius: Set the border radius for different dimensions.

 

Handle

⇒Icon Color: Customize the icon color of the handle for Normal & Hover view.

⇒Background Type: Set the background type either Classic or Gradient. And then customize the background styles according to your preference.

⇒Classic Background Type: The following options are available for the classic background type:

→Color: Add a custom solid color to the background of the image comparison handle icon.

→Image: If you want to add a background image for the handle icon, then upload it here.

 

⇒Gradient Color Type: The following options are available for the gradient settings:

→Color: Add a custom gradient color to the icon background of the handle.

→Location: Set the location for the color to be spread.

→Second Color: Add the second gradient color to the icon background of the handle.

→Location: Set the location for the second color to be spread.

→Type: Set the type of gradient color either linear or radial gradient.

→Angle: Customize the gradient angle for the handle icon.

 

⇒Border Type: Select a border type from the list according to your preference. And then set the border width for the top, right, bottom and left of the handle for different dimensions. You can link the values together or customize them individually.

⇒Border Color: Add a custom color to the border.

⇒Border Radius: Set the border radius for different dimensions.

⇒Box Shadow: Customize the box-shadow color, set the horizontal and vertical value of the shadow, control the blur radius and spreading, and set the position either outline or inset.

 

Divider

⇒Color: Add a custom color to the image comparison divider bar.

⇒Width: Set the width of the divider bar for different dimensions.

 

Label

⇒Align: Set the alignments of the image comparison labels.

⇒Text Color: Add a custom color to the label text for both before and after label.

⇒Background Color: Add a custom background color to the label text for both before and after.

⇒Border Type: Here, select a border type from the list according to your preference. And then set the border width for the top, right, bottom and left of the label contents for different dimensions. You can link the values together or customize them individually.

⇒Border Color: Add a custom color to the border.

⇒Border Radius: Set the border-radius around the labels for different dimensions.

⇒Typography: Set the typography options for the labels.

⇒Padding: Set the padding value for the top, right, bottom and left around the labels for different dimensions. You can link the values together or customize them individually.

 


»Advanced

Set the Advanced options that are applicable to this widget

Still can’t figure out? Don’t worry, we got your back! Just watch the video tutorial below to have a precise understanding of the Image Comparison Element.


Was this article helpful to you? Yes No

How can we help?