Starter
For a handful of client sites.
Billed once. Yours forever.
$39/yr
Billed yearly.
Native Divi 5 Module
Divi Before & After Slider
Compare two images with an interactive slider.
Ask AI about the Divi Before & After Slider module
Why use the Divi Before & After Slider module?
Two photographs side by side make people compare from memory. A slider makes them compare in place, on the same pixels, which is the whole reason a retoucher, a builder or a dentist puts one on a page.
This module takes two images and one handle. Drag it and the second image is revealed underneath the first. Everything else, the labels, the handle, where it starts and which way it runs, is a setting.
The slider beside this is the live module. Drag the handle.
What you get out of it
Compare in place, not side by sideOne frame, one handle. The eye never has to hold one image in memory while it looks at the other.Runs either wayHorizontal splits left from right, vertical splits top from bottom. It is one setting, not a different module.The handle is yoursAn outlined knob or a filled one, your own handle colour, and on the filled style an arrow colour of its own.Labels that say what they areBoth labels take their own text and background, and they can stay on the image or appear on hover.Reachable by keyboardThe free module exposes the handle as a slider control, so arrow keys, Home and End move it without a mouse.Free, and native on Divi 5It ships in Divi Torque Lite on WordPress.org and in Divi Torque Pro, built on the Divi 5 engine rather than shimmed from Divi 4.
Everything the Divi Before & After Slider module does
Every option below ships in the free plugin, and in Divi Torque Pro.
A before image and an after imageHorizontal or vertical splitTen starting positions, 0.0 to 0.9Two handle stylesHandle colourArrow colour on the second handle styleMove the handle on hover, without draggingHover overlay on or offLabels always visible, or on hoverYour own text for each labelA background colour for each labelLabel padding, width and height per breakpointA full font group for the label textA border group for the label boxKeyboard control with arrows, Home and EndCustom CSS hooks for both images and both labels
See the Divi Before & After Slider in action
Every slider below is the live module, not a picture of one. Drag any handle, or focus it and use the arrow keys.
One photograph, two grades
The same frame fetched twice, once in black and white and once in colour. Drag the handle across it.
Split it either way
Horizontal is the default. Vertical suits a tall subject, or a room shot where the change is in the ceiling or the floor.
Horizontal
The handle runs top to bottom and you drag it left and right. This is the default.
Vertical
The handle runs left to right and you drag it up and down. Same module, one setting changed.
Two handles to choose from
Style 1 leaves the knob open, Style 2 fills it in. Only Style 2 gives the arrows a colour separate from the ring.
Style 1
The knob is an outlined ring. The handle colour draws both the ring and the arrows.
Style 2
The knob is filled with the handle colour, and the arrows take a separate colour of their own.
Decide what people see first
The starting position is a setting, so the slider can open mostly showing the before, mostly showing the after, or halfway.
Starts at 0.2
Most of the after image is showing, so the eye lands on the result first.
Starts at 0.8
The reverse. Ten steps run from 0.0 to 0.9, so the handle can start almost anywhere.
Labels, and moving without dragging
Each label carries its own text and background. Move On Hover means the handle follows the pointer with no click at all.
Labels always on
Both labels sit on the image the whole time, each with its own text and background colour.
Labels on hover, and no dragging
Labels appear on hover, and Move On Hover lets the pointer drive the handle without holding it down.
Building one takes about a minute
Three steps, and none of them involve custom CSS.
1Drop in the moduleAdd Before & After Slider to any row. The Before and After panels each hold one image.2Upload a matching pairUse two images of the same scene at the same size. The module lays one over the other at their natural size, so a mismatched pair will not line up.3Set the handle and the labelsChoose horizontal or vertical, pick a handle style and colour, set where the handle starts, and write the two labels.
Questions people ask first
Short answers, all of them checked against what the module actually does.
Is the Before & After Slider module free?Yes. It ships in Divi Torque Lite on WordPress.org, and in Divi Torque Pro. Nothing on this page is behind the paid plugin.Does it need Divi 5?It is a native Divi 5 module, built on the Divi 5 engine rather than shimmed from Divi 4. Layouts built with the Divi 4 version convert across.Do the two images have to be the same size?Yes, and it matters more than anything else on this page. The module places the before image over the after image at their natural size, so a pair that differs in dimensions or crop will drift as you drag.Can it start somewhere other than the middle?Yes. The starting position is a list of ten steps from 0.0 to 0.9, so you can open the slider showing mostly the before image or mostly the after.Can people use it without a mouse?Yes. The handle is exposed as a slider control with a tab stop, and the arrow keys, Home and End move it. Shift with an arrow key moves it in larger steps.Can I put a caption under it?Not inside the module. It holds the two images, the two labels and the handle, and nothing else. Put a Divi Text module underneath it for a caption.
Simple, honest pricing
Every plan unlocks all 98 Divi modules on unlimited websites. One licence covers every site you build.
4.7★ from 116 reviews on WordPress.org
Unlimited
Every site you will ever build.
Billed once. Yours forever.
$79/yr
Billed yearly.
Divi Torque+ AI
Everything in Unlimited, plus a second plugin: Saddle Pro, so AI agents can build your site.
Billed once. Yours forever.
$99/yr
Billed yearly.
- 30-day money-back guarantee
- Lifetime honored forever, in writing
- Secure checkout