Before and After Slider Gallery

4 min readUpdated 7 August 2026

Show a transformation (a renovation, a treatment, a clean-up) with a slider visitors drag between two photos.

Adding one

1In the editor, open Add Elements and choose Before and After from the Gallery group.
2Hover the element and click the pencil icon to open the panel.

Adding your images

In Slides you'll find two cards, Before and After. Click either to open it:

Image: click to choose your photo
Show Title: whether a label appears on that image
Title: the label (Before appears bottom-left, After bottom-right)
Heading tag: H1, H2 or H3
Alt: a short description for screen readers and search engines (see Alt text on photos)

One comparison per element. To show several transformations, add several Before and After elements to your page.

Heading and description

Show Title, Gallery title and Heading tag add a heading above the slider. The description underneath is edited by clicking it directly on the page, where you get the full text toolbar.

Layout

Width (%): how much of the column the slider fills
Height (px): how tall the image area is

Tips

Use two photos of exactly the same size, angle and framing. This is the single most important thing. Both images are cropped from the centre to fill the same frame, so photos of different shapes won't line up and the effect is lost.
Shoot from the same spot with the same zoom and lighting where you can.
Upload large images, at least 1920px wide.
Replace the placeholder text. New elements arrive with sample titles and alt text that will publish as-is if you don't change them.
On phones the slider becomes two stacked images, Before above After: there's no dragging on small screens, and the Height setting doesn't apply.
Visitors can click anywhere on the image to jump the divider there, as well as dragging the handle.
The slider always starts in the middle, and resets there each time the page loads.

Was this helpful?

Last updated: 7 August 2026

Grid Gallery

Display a wall of photos visitors can enlarge and filter by category, with masonry or grid layouts, per-image titles and descriptions, tagging, and lightbox styling.

5 min read

Spotlight

Turn a grid of photos into an interactive showcase: click a tile to expand it full-screen with the full story. Ideal for team profiles, case studies and portfolios.

6 min read