The Compare image widget is a simple tool to compare images in a slider. Before and After images comparison allows you to showcase the benefits of products, the results of the work or services, and some item improvements to make your website more interactive and catchable. Feel free to add an unlimited number of comparisons on one page
For further work, you need Elementor to be installed on your site. You can download it from wordpress.org
Open or create a page using Elementor and drag the widget to a page using the Elementor editor to start customizing. In the left pane of the editors, you can customize the widget to the style of your site. Each of the tabs presented a specific group of settings:
Content Tab
In the Content section, you can manage basic settings of the Compare image widget such as image uploading, compare line and its position, slider height, offset, etc.
General
- Default offset – specify the default shift(px, %) of the dividing line using the slider.
- Slider height – specify slider height for different devices.
- Overlay – the toggle to enable/disable the image overlay. The option allows you to select how the overlay is displayed: on hover or always.
- Move handle – choose how to control the compare line: Click, Hover, Swipe.
- Line position – select the position of the compare line: Horizontal, Vertical.
Imager
The block for uploading before and after images of the compare slider.
Before/After
- Label after/before – input field for the text of the Before/After image.
- After/before image – select the Before/After image from the media library or upload new files.
- Image Size – choose one of the provided image sizes or specify your own.
Compare line
The section for selecting the navigation icons of the compare line. You can select any icon from the Font Awesome library or upload your own SVG.
Style tab
On the style tab, you can manage the element styles of the Compare image widget like a background, borders, labels offset, padding/margin, typography, etc.
After image/Before image
- Margin – the setting allows managing the margin of the current element in different units(px, %, em) for desktops, tablets, or phones.
- Padding – the setting allows managing the padding of the current element in different units(px, em, %) for desktops, tablets, or phones.
NORMAL/HOVER
The block style settings for different states.
- Background Type – the setting changes the background of the current block. You can choose a color, gradient, or background image.
- Border Type – select one of the available border types (solid, double, dotted, dashed, groove) for the current box and adjust the width, color, and radius according to your needs. Pick “None” to remove the border.
- Border Radius – specify the radius of the current block items for all devices or separately for desktops, tablets, or mobiles.
- Box Shadow – the setting creates a shadow from the current block and it can be adjusted according to your needs specifying color, blur, horizontal and vertical shift.
Label before/Label after
- Margin – the setting allows managing the margin of the current element in different units(px, %, em) for desktops, tablets, or phones.
- Padding – the setting allows managing the padding of the current element in different units(px, em, %) for desktops, tablets, or phones.
- Label offset x – specify the offset of the before/after label along the X-axis using the slider. This can be configured for different devices separately.
- Label offset y – specify the offset of the before/after label along the Y-axis using the slider. This can be configured for different devices separately.
- Typography – this group of settings controls everything about typography: font-size, font-weight, line-height, decoration, and other parameters.
NORMAL/HOVER
The block style settings for different states.
- Color – specify the text color and opacity using the color picker.
- Background Type – the setting changes the background of the current block. You can choose a color, gradient, or background image.
- Border Type – select one of the available border types (solid, double, dotted, dashed, groove) for the current box and adjust the width, color, and radius according to your needs. Pick “None” to remove the border.
- Border Radius – specify the radius of the current block items for all devices or separately for desktops, tablets, or mobiles.
- Box Shadow – the setting creates a shadow from the current block and it can be adjusted according to your needs specifying color, blur, horizontal and vertical shift.
Overlay
- Background Type – the setting changes the background of the current block. You can choose a color, gradient, or background image.
- Bland mode – select one of the available blend modes from the list.
- Hover transition duration – specify the speed of animation transition in seconds using the slider.
Compare line
- Compare line width – set the compare line width using the slider. This can be configured for different devices separately.
- Color – specify the line color and opacity using the color picker.
Compare line button
- Padding – the setting allows managing the padding of the current element in different units(px, em, %) for desktops, tablets, or phones.
- Icon before size – set the icon size for the “Before” navigation of the compare line. This can be configured for different devices separately.
- Icon after size – set the icon size for the “After” navigation of the compare line. This can be configured for different devices separately.
- Space between icons – specify the space between navigation icons of the compare line.
- Typography – this group of settings controls everything about typography: font-size, font-weight, line-height, decoration, and other parameters.
NORMAL/HOVER
The block style settings for different states.
- Before Icon Color – specify the icon color and opacity using the color picker.
- After Icon Color – specify the icon color and opacity using the color picker.
- Background Type – the setting changes the background of the current block. You can choose a color, gradient, or background image.
- Border Type – select one of the available border types (solid, double, dotted, dashed, groove) for the current box and adjust the width, color, and radius according to your needs. Pick “None” to remove the border.
- Border Radius – specify the radius of the current block items for all devices or separately for desktops, tablets, or mobiles.
- Box Shadow – the setting creates a shadow from the current block and it can be adjusted according to your needs specifying color, blur, horizontal and vertical shift.
Advanced Tab
The advanced tab allows you to flexibly configure everything that relates to the design of the plug-in wrapper. The settings on this tab are entirely similar to the native Elementor widgets and will be convenient for experienced users of the Elementor. Learn more about Advanced Tab settings from Elmentor’s official documentation.
Save changes
Do not forget to save changes after completing the widget setup. To do this, click on the Update button at the bottom of the page.
