Before After Widget
The widget helps you show two versions of an image together.
Content
Before & After
Add Before and After Images.
CSS Filters: Choose the desired filters from the dropdown,
Default Offset: Set the image offset.
Orientation: Choose between Horizontal and Vertical images’ orientation.
Move On: Choose how the image should be moved on, the choice is between Pull/Click or on Hover.
Overlay: Slide to YES to enable overlay.
Handle: Slide to YES to enable handling.
Overlay
Visibility: Choose the overlay visibility between visibility on hover and always visible.
Vertical Alignment: Choose the vertical alignment between top, middle and bottom ( for Before and After images).
Label: Add the needed label.
Icon: Upload SVG or choose the icon from the icon library.
Handle
Imitation Handle: Slide to YES to enable the Handle imitation.
Type: Choose between Icons and Label.
Icon Type: Choose between Default and Custom icon types if Icons type is selected.
Label: Add the label for widescreen, desktop, tablet and mobile if Label type is selected.
Style
Overlay
Overlay
Typography: Set a Typography using settings from the dropdown.
Color: Choose the overlay color.
Background Type: Choose the background type and set it.
Horizontal Gap: Set the overlay horizontal gap for widescreen, desktop, tablet and mobile.
Vertical Gap: Set the overlay vertical gap for widescreen, desktop, tablet and mobile.
Padding: Set the paddings for widescreen, desktop, tablet and mobile.
Border Radius: Set the border radius.
Border Type: Choose the border type from the dropdown and set it.
Box Shadow: Choose desired settings from the dropdown.
Icon
Color: Choose the icon color.
Size: Set the icon size for widescreen, desktop, tablet and mobile.
Gap: Set the gap between icon and label.
Handle
Handle Typography: Set a Typography using settings from the dropdown.
Color: Choose the handle color.
Background Type: Choose the background type and set it.
Border Color: Choose the handle border color.
Box Shadow: Choose desired settings from the dropdown.
Size: Set the handle size for widescreen, desktop, tablet and mobile.
Gap: Set the gap between handle and divider.
Border Radius: Set the border radius.
Border Type: Choose the border type from the dropdown and set it.
Divider
Divider Size: Set the size for widescreen, desktop, tablet and mobile.
Color: Choose the divider color.
Box Shadow: Choose desired settings from the dropdown.
Advanced
Set the Advanced options that are applicable to this widget