Using the Before/After Image Widget

Want to showcase visual comparisons on your website? The Before/After Image widget in aThemes Addons for Elementor lets you place two images side by side with an interactive slider, perfect for highlighting transformations, design changes, or product results.

In this guide, we’ll walk you through how to activate, configure, and style the Before/After Image widget in aThemes Addons.

Before you get started, make sure you’ve installed and activated the aThemes Addons plugin on your WordPress site along with Elementor.

The Before/After Image Widget allows you to showcase the difference between two images side by side. Ideal for demonstrating before and after comparisons, transformations, or just to compare two related images.

Activating the Widget

This widget is part of the aThemes Addons for Elementor plugin. To activate it, go to your admin area, visit the aThemes Addons dashboard, search for the widget and click on the switch to activate it. It will now be available in your Elementor interface.

Exploring Widget options

Once activated, drag the Before/After Image widget into your Elementor editor. The widget provides several sections to configure images, slider behavior, and styling.

Image section

  • Image Before: Upload or select the “before” image from the WordPress media library.
  • Label: Enter a label for the “before” image, e.g., “Before”.
  • Image After: Upload or select the “after” image from the WordPress media library.
  • Label: Enter a label for the “after” image, e.g., “After”.

Settings section

  • Orientation: Choose between “Horizontal” or “Vertical” layout for your images.
  • Offset: Adjust the slider to control the initial separation between the two images.
  • Hide Overlay: Toggle to show or hide the overlay.
  • Move on Hover: Enable this to make the slider move based on mouse hover.
  • Click to Move: Enable this to require a click for moving the comparison slider.

Customizing the Style Tab

The Style tab lets you customize the appearance of images, labels, and the slider handle to match your site’s design.

That’s it! You’ve successfully set up the Before/After Image widget on your site.

Next, would you like to display your store or office hours? Check out our guide on using the Business Hours widget to learn more.