# How to create a Before and After Widget?

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.