Page section Planned
Drag the line and see the difference.
Renovations, landscaping, detailing, dental work, cleaning. When the before and the after say everything, this section puts the two photos on top of each other with a divider the visitor drags, and works with a keyboard and on a phone.
Works with: Website
On the roadmap. This plugin is planned, not yet in the product. Everything below describes how it will work when it ships, and nothing here is a date.
Before & After Slider
PlannedTwo photos of the same view with a draggable divider, for the trades and treatments where the result is the sales pitch.
- Page section
- Placed on a page by Max or in Edit mode, styled by your branding.
Pick two photos of the same view from your Media Library. Add as many pairs as you have, each with a caption.
On the roadmap. This page describes how it will work when it ships.
The comparison, done right.
-
Drag, tap or press
The divider moves with the mouse, a finger, or the arrow keys, and it is a labelled slider for screen readers with the position announced.
-
Aligned automatically
Two photos of different sizes are fitted to the same frame. A matching viewpoint is on you; the sizing is on the section.
-
Labelled
"Before" and "After" are shown as text on the images and in the accessible name, and each pair can carry a caption.
-
One pair or a set
A single comparison in a hero, or a grid of pairs on a results page.
How it will work.
- Upload the pairs Add before and after photos to your Media Library, ideally from the same spot.
- Place the slider Ask Max for a before-and-after on a service page and pick the pairs.
- Publish On your dev site now and on your domain when you publish.
Good to know
- Without JavaScript the two photos show side by side with their labels, so nothing is lost.
- Both images have alt text describing what changed, so the comparison is described, not only shown.
- The divider starts in the middle, or wherever you set it, and does not animate on its own.
Practical answers before you plan on it.
Read every answerDo the photos need to be the same size?
No. Both are fitted to the same frame. Taking them from the same spot is what makes the comparison work.
Does it work on a phone?
Yes. The divider moves with a finger, and the section fits the screen width.
Can I show several comparisons?
Yes. Add as many pairs as you have and the section shows them in a grid or one at a time.
More in Media & galleries.
View every plugin
Let the result make the case.
Build your website by chatting with AI, then show the before and the after side by side.