booster addons
creative elementor bundle
Purchase Now
Purchase Now
Purchase Now

Home - Widgets - Image Comparison

Image Comparison

Preview Widget
Preview Widget
Getting Started
Images
Settings
Styling

More Widgets

• Image Swap
• Modern Image
• Hotspot Image
• Showcase Image

# Getting started

The image comparison widget from Booster Addons is a great tool to show a transformation using two images and mouse mouvement. Choose from multiple layout settings and style everything to create your own design.

Read more about this widget down below.

Images

Under the content tab, you will find the images section.This is where you will upload your two images.

  • Before Image : The image that you want to use as the prior to the transformation image.This image will appear on the left side of the widget.
  • After Image :  The image that you want to use as the after transformation image.This image will appear on the right side of the widget.

Settings

The second section in the content tab is the settings section.This section provides you with the options to customize the layout and text, as well as to choose the mouse behavior that you want to use to switch between your two images.

  • Orientation : Choose the orientation of your widget.The options are vertical and horizontal.
  • Before Label :  The text that will be displayed on the before image.
  • After Label :  The text that will be displayed on the after image.
  • Enable Overlay : Enable this if you want to display an overlay on hover.Note that disabling this will also displayed the text labels as they are part of the overlay.
  • Move On Hover : Enable this if you want to switch between the before and after images using mouse hover.
  • Handle Only : Enable this if you want the user to only be able to control the transformation using the handle.
  • Click To Move : Enable this if you want to control the transformation mouvement by clicking on the images.

Styling

Under the styling tab section, you will have the full control over the styling & design of widget text and handle.Customize the typography, colors, border...

  • Labels Styling

Change the labels text properties, colors, and positions.

-Typography : Choose from hundreds of google font families and change the font size and text properties.

-Before & After : Click on which label you want to style.Note that all the options below will only affect the selected label.

-Background & Color : Change the text for both the text and the label background to create a unique design next to your images.

-Position & Margins : Change the vertical position for your labels and change the space between the widget elements using margins.

  • Handle Styling

Change the separator size and customize the handle design for the normal, hover , and dragging states.

-Size : Alternate the separator size as well as the handle border size.

-Default/Hover/Dragging : Choose which handle style you want to style.Note that all the options below will only affect the selected state.

-Colors : Change the color for the arrows that are displayed on the handle as well as the background, handle border, and separator colors.

-Handle Scale : This option is only available when the hover or dragging states are selected.You can change the handle size to add more style to your widget.

Get Help From Professionals

Can't find what you are looking for?

If you can't find what you are looking for any our documentation website, please feel free to open a support ticket  & get help from our support team.

Open a Ticket
Open a Ticket

WHO ARE WE ?

We are a group of talented WordPress developers & designers from Earth our main goal is to create great products & provide the best services to our customers.

BOOSTER ADDONS

CREATIVE ELEMENTOR BUNDLE

FOLLOW US

Email : contact@certaindev.com

WebSite : Certain Dev

Made with love from Earth!

Certain Dev | all rights reserved © 2020