The Before and After Widget lets you display two images together so visitors can compare them using an interactive slider. It’s useful for showing transformations, results, improvements, or differences between two images.
Create a Before and After Widget
From your GetWidget dashboard, click Add Widget at the top left.
Select Before and After Slider from the available widget options.
Once the widget is created, you can customize it using the Content, Style, and Layout tabs.
Content
The Content tab is where you add the images and labels for your before and after comparison. Click Add Image Set to add a Before Image and an After Image.
You can add labels to both images using the Before Label and After Label text boxes. These will show next to each image.
Quick styling using Brand Import
The Style tab lets you customize the appearance of your Before and After Widget.
Under Brand Import, you can import styling from your website. Enter your website URL and click Import. GetWidget will use your website to import the available brand styling. This is quickest way to style your widget.
Custom Styling options
If you want to go the custom way, you can configure each design options manually.
Under Label Styling, you can adjust the size of the labels displayed next to your images. You can also change the background color behind the labels.
Under Divider Styling, you can customize the appearance and position of the slider divider.
Divider Color | Choose the color of the divider. |
Divider Initial Position | Set where the divider starts when visitors first view the widget. |
Divider Width | Adjust the thickness of the divider. |
Hide Arrows | Turn this option on to hide the arrows displayed on the divider. |
Layout
The Layout tab contains settings for how the widget is displayed and how visitors interact with it. Under Layout Style, choose how multiple image sets are displayed. List view displays the image sets one after another. Carousel displays the image sets in a carousel that visitors can navigate through.
Under Divider Direction, choose the direction of the before and after comparison: Vertical moves from left to right, while Horizontal moves from top to bottom.
Choose the Image Ratio used to display your before and after images.
Under Label Position, Choose where the image labels appear: Top, Center or Bottom.
Under Interaction Behavior, choose how visitors control the before and after slider.
Click & Drag | Visitors can click and drag the divider to compare the images. |
Hover | The divider responds as visitors move their cursor over the widget. |
Still need help?
Contact us