Add a before-and-after photo

A before-and-after photo puts two pictures in one spot. Visitors drag a slider across it to compare them. It works well for remodels, repairs, cleaning, landscaping and anything else where a change is the point.

Before you start

• Take both photos from the same spot and angle, in similar light, so the comparison is fair. See Take good photos with your phone.
• Make both photos the same shape and size.
• If the customer or their home can be recognized, get their OK first, in writing. An email or a text is enough.
• Only show work you did, and show it as it was.

Steps

1. Log in to your site editor and open the page.
2. Add the Before & After widget where you want it. See Add a widget to a page.
3. Click the widget, then choose the content option in the small menu that appears. You can also right-click it and choose Edit Content.
4. Click + Image and choose the before photo. Click + Image again for the after photo.
5. If you want, change the words on the two labels. To hide a label, click its eye icon.
6. Type Alt text for each photo, a short description of what it shows. See Write alt text in plain words.
7. To change how it looks, open the design settings (the design option in the small menu, or right-click and choose Edit Design). Click Images & Slider for the photos and the slider. Click Labels for the label style and words.
8. Look at the phone preview. Spacing and image size are set separately for each device, so check phone and computer.
9. Publish. If you don't see a Publish button, tell us and we'll publish it for you.

Tips

• If the two photos don't line up, retake them or crop them to match. See Crop or rotate a photo.
• Short labels such as "Before" and "After" are clearer than a sentence.
• Use one comparison per spot. A few, spread down the page, are easier to take in than a wall of sliders.

Need a hand?

Email both photos to hello@zossoz.com with your business name and the page, and we'll take care of it. We reply within one business day. If it needs more than a small change, we tell you in writing what it would take before we start. See Request a change.