The Before/After widget in website builder
Use the Before/After widget to showcase recent updates you've introduced. It's especially useful for fields like beauty, renovation, design, or other service industries, helping potential clients see the tangible outcomes of your expertise.
In this article, we will talk about how to add and customize the Before/After widget.
Add the widget
In the website builder, select the page to which you want to add the widget. Click Add widget and select Before/After.
Add images
In the widget settings, upload the Before and After images. Decide how to add your images:
| File manager | Opens the file manager where you can select an existing image or upload a new one. |
| Stock manager |
Opens a modal window where you can choose an image from Unsplash’s free stock photos. You can search by image name, select an image from the list, and click Select at the bottom to add it to your page. |
You can customize and manage uploaded images. Here is what you can do with your image:
| Edit |
Click the image icon. Read more: How to edit images using the website builder. |
| Upload new | Click the upload icon. |
| Delete | Click the trash can icon. |
Customize the widget
To make sure the widget matches your website’s style, you can customize its appearance.
Once you’ve added your images, the following settings will appear:
| Handle direction and color | Choose the handle direction to compare the images: Vertical (left/right) or Horizontal (top/bottom)
You can also choose the color of the handle and the line dividing the images. |
| Initial position | Set how much of each image will be visible when the page loads. For example, 50% will show equal parts of both the “Before” and “After” images.
To adjust this, use the slider or enter a percentage. |
| Width | Set a widget width within the block (in pixels). |
| Content alignment | Set a widget alignment: left, center, or right. |
To save your changes, click Publish.
Copy element ID
Every image has an ID that distinguishes it on the page. With it, you can add styles and scripts, show pop-ups, and track events for this element.
To copy an ID, click it. To edit an ID, click the pencil icon.
Read more: Block and widget ID.
Last Updated: 24.07.2025
or