Intro
Elementor Image Comparison widget is built to give you the ability to compare two images. You can select vertical or horizontal orientation. In addition, you can customize the drag tool itself by choosing whether if you want it to be a circle or rectangle.
We have prepared interactive examples for you on this demo page.
Requirements:
- You will need Premium Addons PRO plugin installed and activated on your website.
- Also, make sure that this widget/addon is enabled so you can find it in the Elementor editor. Check this article to know how to do that.
- Premium Addons works only with Elementor Page Builder plugin so you will need to have it installed and activated as well.
Key Features
- Original Image
- Modified Image
- Display Options
1. Original Image and Modified image
The settings for the two images used in the comparison are identical.
- Choose image: Select or upload an image via the Media Library.
- Label: Enable or disable the label.
- Text: Add the label text.
- Horizontal Offset: Adjust the offset using pixels, em or %.
- Vertical Position: Select the vertical position of the label. Choose from top, middle and bottom.
2. Display Options
- Image size: Select from the following image sizes:
- Thumbnail – 150 x 150
- Medium – 300 x 300
- Medium Large – 768 x 0
- Large – 1024 x 1024
- Post-thumbnail – 1568 x 9999
- Full
- Custom -Enter values for width and height. You can crop the original image size to any custom size. You can also set a single value for height or width in order to keep the original size ratio.
- Orientation: Select the orientation of the images: Vertical or horizontal.
- Visible Ratio: With the visible ratio option, you can select how many of the images should be visible. This is also the position of the drag handle and separator. A value of 0.5 will show one half of each image.
- Show Drag Handle: Enable or disable the drag control.
- Show Separator: Enable or disable a line that separates the images.
- Interaction Mode: Select how the user can interact with the image comparison control. Move the control using mouse move, mouse click, or mouse drag.
- Overlay Color: Enable or disable an overlay color.
Style
- First Label
- Second Label
- Drag
- Arrows
- Separator
- Container
1. First Label and Second Label
The settings for the two labels are identical.
- Color: Select a text color for the labels.
- In the Typography settings you can:
- Select from a large number of font families.
- Select the font size in either pixels, em, rem or vw.
- Select the font-weight: From 100 (thin) to 900 (very thick), default, normal or bold.
- Transform the text to Uppercase, lowercase, capitalized, default or normal.
- Select a font style: Normal, italic or oblique.
- Select a text-decoration: Default, underline, overline, line through, none.
- Adjust the line-height.
- Adjust the letter spacing.
- Background Color: Select a background color for the labels.
- Border Type: Select between the following border types, as well as the color and the width of the border on each side of the labels container:
- None
- Solid
- Double
- Dotted
- Dashed
- Groove
- Border radius: Increasing the border-radius will add circular corners to the label container. You can adjust the border-radius in pixels, % or em.
- Box Shadow: Add a shadow around the container. Select the color and the following settings:
- Horizontal position
- Vertical position
- Blur
- Spread
- Position: Outline or Inset
- Shadow: -Add a shadow behind the label’s text. Select from the following options:
- Color
- Horizontal position
- Vertical position
- Blur
- Padding: Padding is the space between the label’s text and the edge of the label’s container. Increasing the padding will make the background larger. Adjust the padding using pixels, em or %.
2. Drag
- Width: Set the width of the drag control that separates the two images. Adjust the width in pixels or em.
- Height: Set the height of the drag control that separates the two images. Adjust the height in pixels or em.
- Background Color: Pick the background color and opacity.
- Border Type: Select between the following border types, as well as the color and the width of the border on each side of the control:
- None
- Solid (Default)
- Double
- Dotted
- Dashed
- Groove
- Border radius: Reducing the border-radius will change the shape of the control. A border radius of 0 will make the control square. You can adjust the border-radius in pixels, % or em.
- Box Shadow: Add a shadow around the control. Select the color and the following settings:
- Horizontal position
- Vertical position
- Blur
- Spread
- Position: Outline or Inset
- Padding: Padding is the space between the arrows in the control and the edge of the control. Increasing the padding will make the control larger. Adjust the padding using pixels, em or %.
3. Arrows
- Size: Adjust the size of the arrows.
- Color: Pick a color for the arrows.
4. Separator
- Color: Select a color for the separator line.
- Spacing: Adjust the space between the first and second parts of the line. The line is split at the drag control.
- Height or Width: Adjust the thickness of the line, depending on if the line is vertical or horizontal. Adjust the thickness using pixels or em.
- Box Shadow: Add a shadow around the container. Pick a color and set the following settings:
- Horizontal position
- Vertical position
- Blur
- Spread
- Position: Outline or Inset
5. Container
- Border Type: Select between the following border types, as well as the color and the width of the border on each side of the widget:
- None
- Solid
- Double
- Dotted
- Dashed
- Groove
- Border Radius: Increasing the border-radius will add circular corners to the widget. You can adjust the border-radius in pixels, % or em.
- Box Shadow: Add a shadow around the container. Pick a color and set the following settings:
- Horizontal position
- Vertical position
- Blur
- Spread
- Position: Outline or Inset
- Margin: Margin is the space between the widget and the rest of the page content. Adjust the margin using pixels, em or %.
