New here? Get 40% off Lifetime plans.

See pricing
Skip to content
Get Divi Torque Buy Now

Site-wide Divi ExtensionFree

Divi Before & After Slider

Compare two images with an interactive slider.

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.

BeforeAfter

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.

Black and whiteColour

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.

As shotCorrected

Vertical

The handle runs left to right and you drag it up and down. Same module, one setting changed.

BeforeAfter

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.

FlatGraded

Style 2

The knob is filled with the handle colour, and the arrows take a separate colour of their own.

MonoColour

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.

As shotCorrected

Starts at 0.8

The reverse. Ten steps run from 0.0 to 0.9, so the handle can start almost anywhere.

Washed outWarm

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.

MonoColour

Labels on hover, and no dragging

Labels appear on hover, and Move On Hover lets the pointer drive the handle without holding it down.

FlatGraded

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. Start free and upgrade when you need the rest.

Free

Divi Torque Lite, on unlimited sites.

$0

Free forever · no card needed

Download

Includes

  • 41 Divi modules
  • 1 extension (Sharing Buttons)
  • Unlimited websites
  • Works in the Divi 5 builder
  • Community support

Unlimited Best value

Every module, on every site you build.

$79 $47.40 /year

Save $31.60 · 40% off

Buy Now

Everything in Free, and

  • All 98 modules
  • All 7 extensions
  • Unlimited websites
  • 1 year premium support
  • 1 year product updates

Unlimited Lifetime

Pay once. Keep it forever.

$249 $149.40 once

Save $99.60 · 40% off

Buy Now

Everything in Unlimited, and

  • Pay once, updates forever
  • Remove Divi Torque branding
  • Premium support
  • 30-day money-back guarantee
  • Lifetime honored forever, in writing
  • Secure checkout