Before + After Images for Divi

Description

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.

Requirements

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:

Credit

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

Screenshots

  • Visual Builder module.
  • Image size selection.

Installation

  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.

Reviews

June 27, 2019
I had wanted to add a feature like this to my website for ages. As a Divi Theme user, this one ticked all the boxes for me. It now appears as a Divi Module in my Divi page builder so I can add it anywhere you can add a Divi module. It doesn't affect my page loading speed. It's very easy to set up and looks great on the page. I'm very impressed and it would be good to see other features added as Divi modules in the future. If you use Divi from Elegant Themes, install this! Great work.
March 1, 2019
The plugin deserves the five stars, great job thank you. We hope to see more options please!
December 24, 2018
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!
October 18, 2018
Simple to install and simple to use. Does exactly what I was after and looks slick in the process. Thanks for sharing.
September 7, 2018
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 5 reviews

Contributors & Developers

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

Contributors

Changelog

1.2.3

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

1.2.2

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

1.2.1

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

1.2.0

  • New Feature: Change the default position of the slider.
  • Acknowledgements: Thank you to @jasonbear on WordPress.org 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.

1.1.1

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

1.1.0

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

1.0.0

  • Initial Release