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.

Hemant Nandrajog (instruite)

<p>Before After plugin integrates modified version <a href="http://www.catchmyfame.com/2009/06/25/jquery-beforeafter-plugin/" title="jQuery Before/After Plugin" rel="nofollow ugc">jQuery Before/After Plugin</a> in the wordpress.<br />
It can be used to show the difference between edited and original photo, before and after photos of changes, etc.</p>
<p>Please check ‘Other Notes’ for the Usage instructions to see how to use it on your blog</p>
<p>Demosites:</p>
<p><a href="https://www.instruite.com/blog/2016/02/16/before-after-works/" title="Demo with Latest version" rel="nofollow ugc">Demo with Latest version</a><br />
<a href="http://www.instruite.com/blog/2011/05/18/photostrying-photoshop-filters/" title="Operation on custom theme" rel="nofollow ugc">Operation on custom theme</a></p>
<p>Author info:<br />
Follow me on <a href="http://twitter.com/instruite/" title="Follow instruite on twitter" rel="nofollow ugc">Twitter</a> or become my Friend on <a href="http://www.facebook.com/instruite/" title="Instruite's Facebook page" rel="nofollow ugc">facebook</a><br />
Also on <a href="https://plus.google.com/108357740742566610994/" title="Follow instruite on Google+" rel="nofollow ugc">Google+</a></p>
<h4>Usage</h4>
<ul>
<li>Write the content of your post other than the images</li>
<li>Switch to ‘HTML-editor’ mode of the post editor area</li>
<li>Click ‘BeforeAfter’ button (This will start the ‘[beforeafter]’ shortcode)</li>
<li>Add the photos to your post through the wordpress image/media uploader</li>
<li>1 photo should be left align when you insert the images on your post, the other one can be aligned right/center/none</li>
<li>The ‘left-aligned’ photo is taken as before photo so please align your photos accordingly</li>
<li>After you have inserted the two images in the post Click ‘BeforeAfter’ button again to close ‘[/beforeafter]’ shortcode.</li>
<li>You can add more content to your post after closing the ‘[/beforeafter]’ shortcode</li>
<li>The content other than image information withing the ‘[beforeafter]…[/beforeafter]’ is ignored when the shortcode is executed, in other places like home page archive page the content will be shown as is in the post.</li>
</ul>


Before After

Before After plugin integrates modified version [jQuery Before/After Plugin](http://www.catchmyfame.com/2009/06/25/jquery-beforeafter-plugin/ "jQ …

Before + After Images for Divi vs Before After