Before + After Images for Divi


Before + After Images for Divi adds a new Divi Builder module that allows the user to create a simple composite Before/After image from two images at a set size.

  • Compatible with the Visual Builder.
  • Uses cropped image sizes within the Divi Builder module (image size selection).
  • Supports lazy loading.
  • Mobile responsive.
  • Lightweight.


This plugin is designed to work with the Divi Builder plugin or a theme such as Divi or Extra by Elegant Themes (affiliate link).

My Plugins for Divi

Supporting Before + After Images for Divi

If you found this plugin helpful, please support the developer with a small donation:


Plugin created by Aaron Bolton. Before + After Images for Divi brings the power of TwentyTwenty by Zurb to your Divi Builder installation.


  • Visual Builder module.
  • Image size selection.


  1. Upload “before-after-images-for-divi” to the /wp-content/plugins/ directory.
  2. Activate the plugin through the “Plugins” menu in WordPress.
  3. Add a new “Before + After Image” module to any Page or Post that uses the Divi Builder.
  4. Add a Before image and an After image to the module.
  5. Select an image size in the module under the “Advanced” tab.
  6. Click the green check to save the module.
  7. Click the green “Save” button in the lower right-hand corner of the screen to Save changes.


Very good

The plugin deserves the five stars, great job thank you. We hope to see more options please!

Simple. Perfect. Time saver

I spent hours yesterday trying to figure out how to do something even simpler than this plug-in -- a hover that revealed the before pict. This plug-in did exactly what I wanted in a very simple way. Great job!

Just what I needed

Simple to install and simple to use. Does exactly what I was after and looks slick in the process. Thanks for sharing.

Works Great

Awesome job. Great implementation of a classic script, works great in Divi as a module. No issues, just worked. I can't stand it when people take open source scripts, wrap them up as their own, and then try and sell them. I saw various versions of ZURB's Twenty20 script in at least a dozen "premium" paid-for plugins before I found this one. Huge KUDOS to this author for not being one of "those people" and actually doing something nice for the community.
Read all 4 reviews

Contributors & Developers

“Before + After Images for Divi” is open source software. The following people have contributed to this plugin.




  • Bug Fix: Fixed multiple errors shown when WP_DEBUG is set to ‘true’.


  • Bug Fix: The composite image will now obey the Image Alignment setting in the Divi module.


  • Bug Fix: Fixed image loading order on front-end and back-end (Visual Builder).
  • Bug Fix: Hid srcset and size attributes if none are returned to improve W3C validation.


  • New Feature: Change the default position of the slider.
  • Acknowledgements: Thank you to @jasonbear on for testing, feature feedback and bug reports.
  • Bug Fix: Fixed W3C validation error due to a missing numerical value (i.e., “$size_width” is not parsing).
  • Bug Fix: Removed http:// prefix on placeholder image URL to prevent non-secure image from breaking SSL in Visual Builder.
  • Bug Fix: Miscellaneous fixes related to lazy load support.


  • Feature Update: Added support for lazy loading scripts. Loading Before + After images will now be properly deferred.


  • New Feature: Change the “Before” and “After” label text
  • Bug Fix: Improved compatibility with Jetpack, a3 Lazy Load, and Lazy Load by WP Rocket


  • Initial Release