The Image Compare widget by Atomic Addons lays two images on top of each other and splits them with a bar. Visitors drag the bar to reveal more of one image or the other, which suits before and after photos of a renovation, a retouched picture or a redesign. This guide covers adding the widget, picking the images and setting how the slider behaves.
Enable the Image Compare Widget
Image Compare is a Free widget and works with the free Atomic Addons plugin. Switch it on from the plugin dashboard:
- 1
Go to WordPress Dashboard → Atomic Addons.
- 2
Click the Widgets tab.
- 3
Search for Image Compare. You can also open the Creative category.
- 4
Turn the Image Compare widget on.
- 5
Click Save Settings.
Add the Image Compare Widget
- 1
Open the page in Elementor (Edit with Elementor).
- 2
In the widget panel, search for Image Compare. The widget sits in the Atomic Addons category.
- 3
Drag it into the page and set it up with the controls below.
- 4
Click Publish (or Update).
Layout
Open the widget and go to Content → Layout:
- 1
Before Image: The first image. It sits on the left, or on top in the vertical orientation.
- 2
After Image: The second image, on the right or at the bottom.
- 3
Image Resolution: Which image size WordPress serves for both images, Full by default.
- 4
Before Label: The label on the before side, “Before” by default.
- 5
After Label: The label on the after side, “After” by default.
Use two images of the same size and shape. The widget takes its height from the before image, so a different shape in the after image is cropped or leaves a gap.
Additional
Content → Additional sets how the slider looks and moves:
- 1
Orientation: Horizontal (the default) puts the bar upright and moves it left and right. Vertical lays the bar across and moves it up and down.
- 2
Before Image Visiblity: Where the bar starts, as a percentage: 70 by default, so the before image fills 70% of the width when the page loads.
- 3
Overlay: On by default: darkens both images slightly and shows the Before and After labels. Turn it off to show the images as they are, without labels.
- 4
On Hover?: With Overlay on: shows the labels only while the pointer is over the images. On by default; turn it off to show them all the time.
- 5
Slide on Hover: Moves the bar with the pointer, without clicking. Off by default, so visitors drag the bar.
- 6
Add Circle In Bar?: Puts a round handle in the middle of the bar. Off by default.
- 7
add Circle Blur?: With the circle: blurs the image behind the handle.
- 8
Circle Shadow?: With the circle: adds a shadow to the handle.
- 9
Smoothing?: On by default: the bar glides to where the visitor drags or clicks instead of jumping.
- 10
Smoothing Amount: With smoothing: how long the glide takes, 100 to 1000 milliseconds. 400 by default.
Visitors can also move the bar with the keyboard: Tab to the handle and use the arrow keys (hold Shift for bigger steps), Page Up and Page Down, or Home and End to jump to either edge.
Style the Image Compare
The Style tab has one Style section:
- Overlay Color — with Overlay on: the color laid over the images.
- Before and After tabs — the background and text color of each label.
- Bar tab — the Bar Color of the bar and its arrows, white by default.
- Padding, Border Radius and Typography — the shape and text of both labels.
Can't find what you need?
Our support team can help with setup questions and anything the docs don't cover yet.