Before-After Widget

A Before-After widget allows you to display the variance between two desired images by dragging the widget slider. The main requirement for the images is that they must have the same aspect ratio (e.g., if the first image is 1000x700 px, the second image should also be 1000x700 px).

Watch video:

  1. Click on the plus button at the left top corner.
  2. Select the Before-After widget from the Images section.

There are 2 main ways to add images to the Before-After widget:

  1. Select images from the Assets tab.
  2. Upload images from your device.

Additionally you can:

  1. Select an image from another project's assets.
  2. Add an image from Unsplash.

How to adjust the Before After widget?

  1. Locate the Before-After button with the gear icon in the properties panel on the right side. Click on it.

Before-After Settings

Here you can rearrange the images order of the Before-After widget by dragging one of your images to the desired place.

To open the image configuration panel, simply click on the desired image.

Focal point

The focal point allows you to determine the viewpoint for the cropped image.

There are 2 ways ‌you can adjust the focal point position:

  1. By dragging the blue circle directly on the image preview field in the settings menu.
  2. By entering the X and Y values into the fields located directly below the image preview field.


You can download your image by clicking the 'Download' button below the image preview field.


You can remove your image by clicking the 'Remove' button below the image preview field.

Image URL

You can also change the image by replacing the existing URL with the URL of another image.

Here you can find some Before-After widget use cases.

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Still need help? Contact Us Contact Us