V4 Early Bird: up to 25% off Annual, up to 30% off Lifetime, and 2x site activations on every plan. Ends Oct 17.V4 Early Bird: up to 30% off + 2x sites · ends Oct 17. See plans →
Get Animation Addons Pro
Classic Elementor widget · Free

Image Comparison for Elementor A before and after slider with a handle visitors drag

The Image Comparison widget is the Elementor image comparison tool for before and after photos. It puts a before image and an after image in one frame, split by a line visitors drag. Use it as an Elementor before after slider for photo edits, treatments, renovations and product changes, with captions and three buttons that jump to either side.

Try it free See the live demos
  • Free on WordPress.org
  • Drag handle
  • Before and After captions
  • Expand left, 50/50, Expand right

Classic widget · Elementor 3 and 4Updated

Live demos

Image comparison designs, live

Three ways to use an Elementor before after slider, each on a small site. Drag the circle, use the buttons, or focus the handle and press the arrow keys.

ShallyShopGlow SerumJournal
Glow serum, four weeks

Drag to see the difference

Treatment results

Skin care before and after slider

A product page for a skin care serum. One wide photo with a thin white line and a circle. When it scrolls into view, the before image opens to the middle with a small bounce and the handle follows. It is an Elementor before after image comparison with nothing else on top.

Drag the circle

In the panel, set Alignment to Center, Width to 1290 px, Height to 650 px and Line Color to #FFFFFF.

Sahara FilmsFilmsPostContact
Colour grading

Raw footage and the final grade

Colour grading

Before and after slider with captions and buttons

The post production page of a film studio. Captions sit in the top corners and three buttons at the bottom. Each button slides the handle in half a second. Drag past the middle and only the caption of the side you reveal stays.

Use the three buttons

In the panel, set Show Caption to Show, Before Caption to Before, After Caption to After and Show Button to Show.

Maison FormeProjectsPhotoJournal
Photo editing

From raw file to final photo

Photo editing

Rounded frame in warm colours

A photographer shows a raw file next to the final photo. The frame has rounded corners and a soft shadow, the line and circle are warm, and the captions are light labels with dark text.

Drag or press the arrow keys

In the panel, set Alignment to Center, Max Width to 760 px, Border Radius to 18 px and Line Color to #E8BF96.

Features

Key features of Image Comparison

What the widget gives you, each tied to a setting in the Elementor panel.

Drag to compare

Build an Elementor before and after image slider: visitors drag the handle across the frame. The Before Image fills the left of the line and the After Image the right.

An intro that shows the handle

On page load the before image opens to the middle with a small overshoot, then the handle follows. Visitors see at once that the image can move.

Before and after captions

For an Elementor before after slider with captions, turn on Show Caption and type a Before Caption and an After Caption. Past the middle, only the caption of the side being revealed stays.

Three control buttons

Show Button adds Expand left, 50/50 and Expand right. Each slides the handle in half a second.

Size and alignment

Set Width, Max Width and Height per device, and place the slider with Alignment.

Image frame

Give the slider a Border, Border Radius and Box Shadow in the Image style section.

Handle style

Set the Line Color, and the Circle background, border and radius in the Handler section.

Caption and button styling

Style the Caption and Button labels with colour, typography, background, padding and margin. Both images accept dynamic tags, so a before after slider can read from custom fields.

Step by step

How to add a before after slider in Elementor

Five steps to add the Elementor image comparison widget. The bold names are the labels in the Elementor panel.

  1. Install Animation Addons for Elementor from WordPress.org, then turn on Image Comparison in Animation Addons → Elements. Make sure GSAP and Draggable load on the page.

  2. In Elementor, search the panel for the Image Comparison widget and drag it onto the page.

  3. Pick the Before Image and the After Image. Two photos with the same size and framing line up best.

  4. Turn on Show Caption and Show Button if you want labels and the three buttons, and set Alignment.

  5. In the Style tab, set Width and Height in pixels for each device, then style the Handler, captions and buttons. Preview and drag the handle.

Try it free Free on WordPress.org · Works with Elementor Free
FAQ

Questions about Image Comparison

How do I add a before after slider in Elementor?

Add the Image Comparison widget, pick a Before Image and an After Image, and preview the page. Visitors drag the handle to compare the two images. No code is needed.

Is the Image Comparison widget free?

Yes. It is a free Elementor before after slider, part of the free Animation Addons for Elementor plugin on WordPress.org. It works with Elementor Free.

Does the widget need GSAP?

Yes. The drag, the intro and the buttons use GSAP and its Draggable plugin. The free plugin does not include them; Animation Addons Pro loads them, or any plugin that adds GSAP and Draggable.

Why is my image comparison not working?

The usual cause is a missing script. An Elementor image comparison not working in the browser means GSAP or its Draggable plugin is not on the page. Load them with Animation Addons Pro or another plugin and the handle moves.

What do the three buttons do?

Expand left slides the handle to the right edge, so the before image fills the frame. Expand right shows only the after image. 50/50 returns to the middle and shows both captions.

How do the captions behave?

They drop in after the intro. Drag past the middle and only the caption of the side you reveal stays; the other slides up out of view.

Is the Elementor before after slider responsive?

Yes, if you set Width and Height in pixels for each device. The images are sized to the Width you set, so pixel values keep the before and after images lined up.

Can the image comparison slider go vertical?

Not this classic widget: it compares left and right. The free Atomic Image Compare for Elementor 4 has a vertical direction, a start position and click to move.

Does it work in Elementor 4?

Yes. It is a classic widget, so Elementor 4 lists it with the legacy widgets. For the new editor there is also the free Atomic Image Compare.

Which images work best?

Two photos with the same size and framing. The before image is cut off at the handle over the after image, so matching framing keeps the change easy to see.

Animation Addons Pro · Elementor 4

Show the change, let them drag

A before and after slider with captions and control buttons, built and styled in Elementor.

Get Animation Addons Pro Try it free
  • 15-day money-back guarantee
  • Rated 4.6 / 5 on WordPress.org
  • No Elementor Pro needed
  • Elementor 3 & 4 in one license