Bogdan Bendziukov

<p>Image Split is a friendly, lightweight way to show <strong>before and after</strong> photos, product comparisons, or makeovers — all with a smooth draggable slider visitors can move with a mouse, touch, or keyboard.</p>
<p>Unlike clunky embeds or heavy page builders, Image Split:</p>
<p>🧩 <strong>Fits your workflow</strong> — Drop in a block (in posts or under Appearance <span aria-hidden="true" class="wp-exclude-emoji">→</span> Widgets), or paste a shortcode.<br />
🎨 <strong>Looks polished</strong> — Horizontal or vertical layout, ruler styles (line, bar, circle), and labels you can style to match your brand.<br />
♿ <strong>Stays accessible</strong> — Keyboard navigation and ARIA support so more people can use your comparisons.<br />
⚙️ <strong>Saves time</strong> — Set global defaults under Settings <span aria-hidden="true" class="wp-exclude-emoji">→</span> Image Split so new comparisons start with your look.</p>
<p>Need product pages or Elementor? <strong><a href="http://pluginarium.com/image-split/#premium" rel="nofollow ugc">Premium</a></strong> adds WooCommerce and Elementor, plus deeper per-item customization.</p>
<p><a href="http://pluginarium.com/image-split" rel="nofollow ugc">Image Split official website</a> | <a href="http://pluginarium.com/image-split/image-split-documentation" rel="nofollow ugc">Plugin documentation</a></p>
<h3>✨ Free features ✨</h3>
<ul>
<li><strong>Gutenberg block</strong> — Pick Before and After images, tune the ruler, and place labels without leaving the editor.</li>
<li><strong>Shortcode</strong> — Use <code>[image_split]</code> anywhere shortcodes run, with optional attributes for layout and styling.</li>
<li><strong>Widget areas</strong> — Add the same Image Split block under Appearance <span aria-hidden="true" class="wp-exclude-emoji">→</span> Widgets (block-based widget editor).</li>
<li><strong>Orientation</strong> — Horizontal or vertical comparison.</li>
<li><strong>Ruler styles</strong> — Line, bar, or circle; custom color and width.</li>
<li><strong>Labels</strong> — Before/After text with position, color, background, and font size.</li>
<li><strong>Global defaults</strong> — Settings <span aria-hidden="true" class="wp-exclude-emoji">→</span> Image Split for site-wide starting values.</li>
<li><strong>Responsive & touch-friendly</strong> — Works on phones and tablets.</li>
<li><strong>Lazy-loading friendly</strong> — Plays nicely with common lazy-load setups.</li>
<li><strong>Accessibility</strong> — Keyboard and ARIA support.</li>
</ul>
<h3>⚜️ Premium features ⚜️</h3>
<ul>
<li><strong>WooCommerce</strong> — Enable Image Split per product on the single product page, using gallery images or custom attachment IDs.</li>
<li><strong>Elementor widget</strong> — Drop Image Split into Elementor-built layouts.</li>
<li><strong>Full customization</strong> — More options to override defaults per block, shortcode, or product.</li>
</ul>
<p>Unlock product pages, Elementor, and advanced controls — upgrade when you’re ready.</p>
<p><strong><a href="http://pluginarium.com/image-split/#premium" rel="nofollow ugc">Explore the Premium version here.</a></strong></p>
<h3>How does Image Split work?</h3>
<p>You choose two images (before and after). Image Split renders them as one comparison with a movable divider. The free plugin ships the block (for content and widget areas), shortcode, and global defaults; Premium adds WooCommerce and Elementor integrations built for stores and visual builders.</p>
<p><a href="http://pluginarium.com/image-split/image-split-documentation" rel="nofollow ugc">Full documentation is available here.</a></p>
<h3>Shortcode</h3>
<pre><code>[image_split before="123" after="456" orientation="horizontal" offset="0.5" ruler_style="line" ruler_color="#ffffff" ruler_width="4" label_before="Before" label_after="After" label_position="bottom-left" label_color="#ffffff" label_bg_color="rgba(0,0,0,0.5)" label_font_size="14"]
</code></pre>
<ul>
<li><strong>before</strong>, <strong>after</strong> — attachment IDs (required)</li>
<li><strong>orientation</strong> — <code>horizontal</code> | <code>vertical</code></li>
<li><strong>offset</strong> — 0 to 1 (default 0.5)</li>
<li><strong>ruler_style</strong> — <code>line</code> | <code>bar</code> | <code>circle</code></li>
<li><strong>ruler_color</strong>, <strong>ruler_width</strong> — color and width in px</li>
<li><strong>label_before</strong>, <strong>label_after</strong> — text</li>
<li><strong>label_position</strong> — Before label: top-left, top-right, bottom-left, bottom-right, center-left, center-right</li>
<li><strong>label_after_position</strong> — After label (same options)</li>
<li><strong>label_color</strong>, <strong>label_bg_color</strong>, <strong>label_font_size</strong></li>
</ul>
<h3>WooCommerce (Premium)</h3>
<p>On the product edit screen, under <strong>Product data</strong> <span aria-hidden="true" class="wp-exclude-emoji">→</span> gallery / Image Split options:</p>
<ul>
<li><strong>Enable Image Split</strong> — Show the slider instead of the main product image on the product page.</li>
<li><strong>Before/After image ID</strong> — Use <code>0</code> to take the first two gallery images automatically.</li>
</ul>


Image Split – Before/After Image Comparison Slider

Before/after image comparisons with a draggable ruler. Block (including widget areas), shortcode. Premium: WooCommerce and Elementor.

Zayed Baloch

Hammal Albulushi

Naeem Noor

<p>Twenty20 is a professional-grade image comparison tool that helps you showcase transformations in a highly engaging way. Perfect for:</p>
<ul>
<li>Photography portfolios</li>
<li>Real estate before/after</li>
<li>Renovation projects</li>
<li>Design makeovers</li>
<li>Product comparisons</li>
<li>Restoration work</li>
<li>Medical procedures</li>
<li>And much more!</li>
</ul>
<h4>Video Tutorial</h4>
<p><span class="embed-youtube" style="text-align:center; display: block;"><iframe loading="lazy" class="youtube-player" width="750" height="422" src="https://www.youtube.com/embed/1cQ9rhL-t70?version=3&rel=1&showsearch=0&showinfo=1&iv_load_policy=1&fs=1&hl=en-US&autohide=2&wmode=transparent" allowfullscreen="true" style="border:0;" sandbox="allow-scripts allow-same-origin allow-popups allow-presentation allow-popups-to-escape-sandbox"></iframe></span></p>
<h4>Live Demo</h4>
<p>Check the <a href="https://zayedbaloch.com/twenty20-image-before-after-wordpress-plugin/" title="Twenty20 Live demo" rel="nofollow ugc">Live Demo</a>.</p>
<h4>Key Features</h4>
<ul>
<li>Responsive design – works perfectly on all devices</li>
<li>Horizontal and vertical sliding options</li>
<li>Customizable slider position and orientation</li>
<li>Custom “before” and “after” labels</li>
<li>Adjustable image widths and alignments</li>
<li>Mouse hover sliding effect</li>
<li>Touch-enabled for mobile devices</li>
<li>Multiple sliders per page</li>
<li>Widget support for sidebars</li>
<li>SEO-friendly with proper alt tag support</li>
<li>Accessibility compliant image comparisons</li>
</ul>
<h4>Page Builder Support</h4>
<ul>
<li>Elementor</li>
<li>WPBakery Page Builder (Visual Composer)</li>
<li>Flatsome UX Builder</li>
<li>Classic Editor</li>
</ul>
<h4>Perfect For</h4>
<ul>
<li>Photography before/after edits</li>
<li>Home renovation comparisons</li>
<li>Web design makeovers</li>
<li>Product transformations</li>
<li>Restoration projects</li>
<li>Beauty transformations</li>
<li>Real estate renovations</li>
</ul>
<h3>Usage</h3>
<h4>Shortcode Example</h4>
<p><strong>Quick Example</strong></p>
<pre><code>[twenty20 img1="" img2="" direction="vertical" offset="0.5" align="right" width="60%" before="Before" after="After" hover="true"]
</code></pre>
<p><strong>Shortcode Parameters</strong></p>
<ul>
<li><code>img1</code> – image ID.</li>
<li><code>img2</code> – image ID.</li>
<li><code>offset</code> – range from 0.1 to 1.0.</li>
<li><code>direction</code> – <code>horizontal|vertical</code>.</li>
<li><code>align</code> – <code>none|right|left</code>.</li>
<li><code>width</code> – supports both <code>px</code> and <code>%</code>.</li>
<li><code>before</code> – text for the “before” label.</li>
<li><code>after</code> – text for the “after” label.</li>
<li><code>hover</code> – <code>true</code> or <code>false</code>.</li>
</ul>


Twenty20 Image Before-After

Simple and clear implementation of the Twenty Twenty by Zurb script.  Thanks for saving me a few hours.

Works Well

Professional before & after image comparison slider for WordPress. Create engaging visual comparisons with an intuitive drag & drop interface.

Image Split – Before/After Image Comparison Slider vs Twenty20 Image Before-After