Bolton Studios LLC

<p>Create before-and-after image sliders in Divi easily with <em>Before + After Images for Divi</em>.</p>
<ul>
<li>Compatible with the Visual Builder.</li>
<li>Compatible with lazy load plugins (excludes slider images).</li>
<li>Supports cropped image sizes (image size selection).</li>
<li>Mobile responsive.</li>
<li>Lightweight.</li>
</ul>
<h4>Requirements</h4>
<p>This plugin is designed to work with the Divi Builder plugin or a theme such as Divi or Extra by <a href="https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=48997&tid1=baie" rel="nofollow ugc">Elegant Themes</a> (affiliate link).</p>
<h4>My Plugins for Divi</h4>
<ul>
<li><a href="https://wordpress.org/plugins/before-after-images-for-divi/" rel="ugc">Before + After Images for Divi</a></li>
<li><a href="https://wordpress.org/plugins/image-size-selection-for-divi/" rel="ugc">Image Size Selection for Divi</a></li>
</ul>
<h4>Supporting Before + After Images for Divi</h4>
<p>If you found this free plugin helpful, please support the developer with a small donation:</p>
<ul>
<li><a href="http://ko-fi.com/boltonstudios" rel="nofollow ugc">Buy me a coffee</a></li>
</ul>
<h4>Credit</h4>
<p>Plugin created by Aaron Bolton. <em>Before + After Images for Divi</em> brings the power of <a href="https://zurb.com/playground/twentytwenty" rel="nofollow ugc">TwentyTwenty by ZURB</a> to your Divi Builder installation.</p>


Before + After Images for Divi

Create before-and-after image sliders in the Divi Visual Builder easily.

Scott Paterson

WPPlugin LLC

Nilambar Sharma

Manesh Timilsina

WP Concern

<p>Before After Image lets visitors drag a handle to compare two images side-by-side.</p>
<p>Works in three ways — use whichever fits your site:</p>
<ul>
<li><strong>Shortcode</strong> — You can you shortcodes on any post or page. Use the built-in shortcode builder to generate shortcodes easily.</li>
<li><strong>Elementor widget</strong> — drag and drop the widget onto any page with full style controls.</li>
<li><strong>WooCommerce</strong> — attach a before/after comparison to any product directly from the product editor.</li>
</ul>
<p><a href="https://demos.wpplugin.org/before-after-image/" rel="nofollow ugc">View Demo</a></p>
<p>Full usage instructions, shortcode options, and WooCommerce setup steps are available inside the plugin under the <strong>Before After Image</strong> menu.</p>
<h3>Key Features</h3>
<ul>
<li>Works standalone via shortcode — Elementor and WooCommerce are both optional</li>
<li>WooCommerce product integration with per-product settings</li>
<li>Elementor widget with full style controls</li>
<li>Horizontal and vertical orientation</li>
<li>Handle movement by drag or mouse hover</li>
<li>Customisable before/after labels (on hover, always, or never)</li>
<li>Enable/disable overlay</li>
<li>Default handle offset position</li>
<li>Six handle styles</li>
<li>Handle types: Arrows or Text</li>
<li>Slider colour — white or black (line, handle, and arrows)</li>
<li>Image size option</li>
<li>Typography and colour options (Elementor)</li>
<li>Touch and pointer-event support</li>
</ul>
<h3>Before After Image Pro</h3>
<p>Want more features? Check out <strong>Before After Image Pro</strong>:</p>
<ul>
<li><strong>Auto-Slide Animation</strong> — Grab attention with an automatically sweeping handle. Configure speed and pause-on-hover behavior.</li>
<li><strong>3-Image Comparison</strong> — Show before, during, and after with two draggable handles.</li>
<li><strong>Full-Screen View</strong> — Let visitors zoom in with a button to expand the slider to full screen.</li>
<li><strong>Custom Colors</strong> — Fine-tune the line, circle, and arrows independently to match your brand.</li>
<li><strong>Rounded Corners</strong> — Add subtle to fully rounded corners for a polished look.</li>
<li><strong>Shortcode Manager</strong> — Save and reuse slider configurations with <code>[mbai_preset id="..."]</code> shortcodes.</li>
<li><strong>Premium Support</strong> — Get priority support and automatic updates.</li>
</ul>
<p><a href="https://wpplugin.org/downloads/before-after-image-pro/" rel="nofollow ugc">Get Before After Image Pro</a></p>


Before After Image

Before After Image with a draggable handle. Works with Elementor, WooCommerce, and shortcode.

Before + After Images for Divi vs Before After Image