After/Before Image

Estimated reading: 2 minutes 355 views

The image comparison widget gives you the ability to compare two images simultaneously. Use the slider on the page to customize the image, which can hide and reveal one image. You can also set horizontal and vertical orientation.

Content

After/Before Image: Image Settings
After/Before Image: Image Settings
  • Compare Style: Set the comparison style as horizontal and vertical.
  • Slider Position: Adjust the divider position.
  • Icon: Select an icon for the divider.
  • Before Image: Select or upload an image via the media library.
  • Image Size: Select from the following image sizes, like Thumbnail, medium, large, etc.
  • After Image: Select or upload an image via the media library.
  • Image Size: Select from the following image sizes, like Thumbnail, Medium, Large, etc.
  • Before Text: Add label text for the Before image.
  • After Text: Add label text for the After image.

Style

General

After/Before Image: General Style Settings
After/Before Image: General Style Settings
  • Icon Size: Adjust the icon size.
  • Icon Color: Choose a primary color for the icon.
  • Slider Color: Choose the secondary color for the slider icon.
  • Separator Color: Select a color for the separator.
  • Separator Alignment: Set alignment for the separator.
  • Separator Width: Adjust the separator width.

Label

After/Before Image: Label Style Settings
After/Before Image: Label Style Settings
  • Position: Select a position to display the image label, like the Top or Bottom position.
  • Typography: Set the typography options for the label text.
  • Color: Set the text color for the image label.
  • Background Color: Select the background color for the label.
  • Border type: Choose the type of border you need for the element.
  • Border radius: Set the border radius to make the label angles smoother and rounder.
  • Padding Set the preferable custom padding for the label text.
Share this Doc

After/Before Image

Or copy link

CONTENTS