Before / After image

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.

Activate 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.

Widget options

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.

Style tab

Customize the appearance of your Before/After images, labels, and the slider handle under this tab.

Usage tips

  • Use high-quality images for a clear comparison.
  • Ensure the images have the same dimensions for a seamless experience.
  • Optimize your image with loseless compression for best performance.

Conclusion

The Before/After Image Widget is a powerful tool for visual storytelling, enabling users to easily compare two images. With extensive customization options, you can tailor the appearance to match your website’s design and user experience needs.