2fox4oliver

<p>Von Oliver Deppe von <a href="https://www.2fox4.de/wordpress-plugins/" rel="nofollow ugc">2FOX4</a>.</p>
<p><strong>2FOX4 Before After</strong> lets you create beautiful, interactive image comparisons with a draggable slider. Perfect for showcasing transformations, renovations, photo edits, and any kind of visual before/after comparison.</p>
<h4>Features</h4>
<ul>
<li><strong>Three ways to use:</strong> Gutenberg Block, Shortcode, and Elementor Widget</li>
<li><strong>Two comparison modes:</strong> “Slider” (images move with the divider) or “Reveal” (both images stay fixed, divider reveals one over the other)</li>
<li><strong>Horizontal & Vertical mode:</strong> Choose the slider orientation that fits your layout</li>
<li><strong>Adjustable start position:</strong> Set where the divider appears on load (0–100%)</li>
<li><strong>Custom labels:</strong> Add “Before” and “After” text overlays (or any custom text)</li>
<li><strong>Divider color:</strong> Pick any color for the divider line and handle</li>
<li><strong>Hover mode:</strong> Slider follows the mouse cursor instead of requiring a drag</li>
<li><strong>Touch support:</strong> Works perfectly on mobile devices with touch gestures</li>
<li><strong>Loading animation:</strong> Smooth entrance animation when the slider appears</li>
<li><strong>Custom CSS class:</strong> Add your own class for additional styling</li>
<li><strong>Keyboard accessible:</strong> Navigate the slider with arrow keys</li>
<li><strong>Lightweight:</strong> No jQuery dependency on the frontend, pure vanilla JavaScript</li>
</ul>
<h4>Shortcode Usage</h4>
<pre><code>[bfas_before_after_slider before="URL" after="URL"]
</code></pre>
<p>Full example with all options:</p>
<pre><code>[bfas_before_after_slider before="https://example.com/before.jpg" after="https://example.com/after.jpg" start="30" mode="reveal" orientation="horizontal" label_before="Before" label_after="After" divider_color="#ffffff" hover="0" animate="1" css_class="my-class"]
</code></pre>
<h4>Shortcode Parameters</h4>
<ul>
<li><strong>before</strong> (required) — URL of the before image</li>
<li><strong>after</strong> (required) — URL of the after image</li>
<li><strong>start</strong> — Start position in percent (default: 50)</li>
<li><strong>mode</strong> — “slider” or “reveal” (default: slider). In reveal mode, both images stay fixed and the divider reveals one over the other.</li>
<li><strong>orientation</strong> — “horizontal” or “vertical” (default: horizontal)</li>
<li><strong>label_before</strong> — Text label for the before side</li>
<li><strong>label_after</strong> — Text label for the after side</li>
<li><strong>divider_color</strong> — Hex color for the divider (default: #ffffff)</li>
<li><strong>hover</strong> — Set to “1” to enable hover mode (default: 0)</li>
<li><strong>animate</strong> — Set to “1” for entrance animation (default: 0)</li>
<li><strong>css_class</strong> — Custom CSS class for the container</li>
</ul>
<h3>External services</h3>
<p>This plugin includes a voluntary donation link that points to PayPal (paypal.com). The link is displayed inside an admin notice (“Buy me a coffee”) and does not transmit any data automatically. No connection to PayPal is made unless the site administrator clicks the link themselves.</p>
<ul>
<li>Service provider: PayPal (Europe) S.à r.l. et Cie, S.C.A.</li>
<li><a href="https://www.paypal.com/de/webapps/mpp/ua/useragreement-full" rel="nofollow ugc">PayPal Terms of Service</a></li>
<li><a href="https://www.paypal.com/de/webapps/mpp/ua/privacy-full" rel="nofollow ugc">PayPal Privacy Policy</a></li>
</ul>


2FOX4 Before After

Compare two images with an interactive before/after slider. Supports Gutenberg, Shortcode and Elementor.

Jewel Theme

Liton Arefin

<p><a href="https://master-addons.com/demos/image-comparison/" rel="nofollow ugc">Image Comparison Elementor Addon</a> is a Plugin that gives you the control to add before and after image. You will get the full control to customize everything you need for image or photo comparison.</p>
<h4>Features of the plugin</h4>
<ul>
<li>Visible Ratio option</li>
<li>Vertical & Horizontal Orientation</li>
<li>Enable or Disable Overlay</li>
<li>Customize Before & After Label</li>
<li>Border , Border Radius, Padding, Margin options</li>
<li>Typography, color settings available </li>
</ul>
<p>To use “Image Comparison Elementor Addon” you will have to activate Elementor plugin in your WordPress first.</p>
<p>Here is the Download link for <a href="https://wordpress.org/plugins/elementor/" rel="ugc">Elementor</a> WordPress Plugin.</p>
<h3>Common Problems with Solutions:</h3>
<p>Elementor not loading problem<br />
– There are various reasons for Elementor not loading issue. For more details please check the Tutorial below.<br />
Increasing PHP Memory limit from wp-config.php or php.ini file is simplest solutions. But there are others too –<br />
<a href="https://master-addons.com/elementor-editor-not-loading-issue/" rel="nofollow ugc">View Tutorial</a></p>
<h3>Liked Image Comparison Elementor Addon Plugins?</h3>
<p>Rate us on <a href="https://wordpress.org/support/plugin/image-comparison-elementor-addon/reviews/#new-post" rel="ugc">WordPress Forum 🙂</a></p>
<h3>Support</h3>
<p>Join our <a href="https://www.facebook.com/groups/2495256720521297/" rel="nofollow ugc">Master Addons Community</a><br />
Learn from our Tutorials on <a href="https://www.youtube.com/channel/UCAPfTXvzbNebKsB322Iz6HQ" rel="nofollow ugc">Youtube Channel</a><br />
Like on our <a href="https://www.facebook.com/masteraddons/" rel="nofollow ugc">Facebook Fan Page</a><br />
Get Faster Support from <a href="https://master-addons.com/contact-us/" rel="nofollow ugc">Dedicated Support Forum</a></p>
<h3>Source Code</h3>
<p><a href="https://github.com/litonarefin/image-comparison-elementor-addon" rel="nofollow ugc">Source Code</a></p>
<h3>Support</h3>
<p><a href="https://jeweltheme.com/contact/" rel="nofollow ugc">Support Forum</a><br />
<a href="https://jeweltheme.com/contact/" rel="nofollow ugc">Pre-Sale Questions</a></p>
<h3>✋Want More –</h3>
<p>If you like our image-comparison-elementor-addon plugin then why not check some other plugins that developed by us:</p>
<p>🚀 <a href="https://wordpress.org/plugins/adminify/" rel="ugc">WP Adminify:</a> – The best WordPress Dashboard Customization plugin available in the market. With this plugin you will get 18+ modules like Dark Mode, Menu Editor, Folders, Dashboard Widget Manager, Login Customizer, Admin Columns, Activity Logs and many more.</p>
<p>🚀 <a href="https://wordpress.org/plugins/ultimate-blocks-for-gutenberg/" rel="ugc">Master Blocks:</a> – “Master Blocks” is a powerful WordPress plugin designed to enhance the functionality of the Gutenberg block editor. With this plugin, users can unlock a wide range of new blocks, offering greater flexibility and creativity when designing and customising their website’s content.</p>
<p>🚀 <a href="https://wordpress.org/plugins/master-addons/" rel="ugc">Master Addons:</a> – One of the best Elementor Addon plugin that packed with 70+ elements and extensions. You will get all essential elements to design any type Website.</p>
<p>🚴🏻‍♂️ <a href="https://wordpress.org/plugins/image-comparison-elementor-addon/" rel="ugc">Image Comparison for Elementor:</a> – This plugin dedicatedly made for image comparison element. You will get a multiple variation for image comparison. Showcase your before after work easily with the help of this plugin.</p>
<p>🍡 <a href="https://wordpress.org/plugins/wp-awesome-faq/" rel="ugc">Master Accordion:</a> – If you are a default WordPress user and need a proper accordion plugin then Master Accordion is for you. You can add as much accordion as you need in multiple way.</p>
<p>🏕 <a href="https://wordpress.org/plugins/prettyphoto/" rel="ugc">WordPress prettyPhoto:</a> – This plugin helps you to enable lightbox for your any media file, flash, YouTube, iframes and ajax. Just enable PreetyPhoto in your desired media file and you are done.</p>


Image Comparison Addon for Elementor

Image comparison addon for elementor page builder plugin. Install & get image after before element. Drag and Drop the image comparison element and …

2FOX4 Before After vs Image Comparison Addon for Elementor