Bogdan Bendziukov

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

Code Canel

Turn Ordinary Images Into Compelling Visual Stories – Instantly.
WP Before After Image Slider (also known as BefTer) is the most flexible and performance-optimized before-after comparison slider plugin for WordPress. Whether you’re a photographer showcasing edits, a designer presenting a redesign, a healthcare professional displaying treatment results, or a real estate agent revealing a renovation – BefTer helps you show real impact with zero effort.
Drag. Slide. Convert.
👉 Live Preview: <a href="https://codecanel.com/wp-before-after-image-slider/?utm_source=repo_upgrade&utm_medium=repo&utm_campaign=repo_productpage&utm_id=repo_productpage#features" rel="nofollow ugc">BefTer Live Preview</a> 
👉 Pro Version: <a href="https://codecanel.com/wp-before-after-image-slider/?utm_source=repo_upgrade&utm_medium=repo&utm_campaign=repo_productpage&utm_id=repo_productpage#features" rel="nofollow ugc">Explore Pro Features</a> 
👉 Backend Playground: <a href="http://codecanel.com/wp-before-after-image-slider/backend-demo/?utm_source=wp_org&s=befter-backend-demo" rel="nofollow ugc">Explore Backend Options</a> 
👉 Documentation: <a href="https://codecanel.com/docs/wp-before-after-image-slider/" rel="nofollow ugc">Installation & Setup Guide</a> 
👉 Video Guide: <a href="https://www.youtube.com/watch?v=zkCY5GbscWQ" rel="nofollow ugc">Step-by-Step Instructions</a> 
👉 Support: <a href="https://codecanel.com/contact/" rel="nofollow ugc">Get Help</a> 
👉 Community: <a href="https://www.facebook.com/groups/codecanel" rel="nofollow ugc">Join Our Facebook Page</a>
<h3>Why Use a Before After Image Comparison Slider?</h3>
When words fail to capture your results, visuals deliver the proof.
An interactive before-after slider shows your audience exactly what you’ve achieved – whether it’s a photo retouch, a home renovation, a body transformation, or a product upgrade. It builds instant trust, boosts user engagement, and turns passive visitors into confident customers.
With BefTer, you get:
✅ Interactive, touch-friendly sliders that invite users to explore 
✅ Visual storytelling that builds credibility and trust faster than any text 
✅ Zero coding required – install, upload images, and publish in minutes 
✅ Works with all major page builders – Elementor, Gutenberg, Divi, WPBakery, Bricks, Beaver Builder 
✅ Lightweight and performance-optimized – no impact on site speed
<h3>🆓 Free Features</h3>
The free version of BefTer is packed with everything most websites need to create beautiful, professional image comparison sliders:
✅ Two-Image Comparison Slider – Side-by-side before and after comparisons 
✅ Horizontal & Vertical Slider Layouts – Match your site’s design flow 
✅ Customizable Before/After Text Labels – Personalize slider labels freely 
✅ Label Visibility Control – Show or hide labels as needed 
✅ Overlay Toggle Option – Add an overlay for a polished effect 
✅ Interactive Mouse Hover Effects – Engage desktop users effortlessly 
✅ Slide Trigger Control – Choose drag or hover interaction 
✅ Slide Orientation Control – Horizontal or vertical sliding 
✅ Adjustable Image Sizes – Fit sliders into any layout 
✅ Lazy Loading – Improve page speed with on-demand image loading 
✅ Built-in Shortcode Generator – Embed sliders anywhere in seconds 
✅ Widget Support – Add sliders via WordPress widgets 
✅ Image Alt-Tag Support – SEO-friendly image descriptions 
✅ SEO-Friendly Structure – Built for search engine visibility 
✅ Speed-Optimized Performance – Lightweight with no bloat 
✅ Elementor Widget – Native drag-and-drop integration
<h3>🚀 Pro Features</h3>
Unlock the full power of BefTer with the Pro version – designed for creators, agencies, and businesses who demand more control and advanced visual experiences:
✅ Three-Image Comparison Slider – Add a third image for multi-step comparisons 
✅ Labels for Three-Image Slider – Full labeling control across all three images 
✅ Video Comparison Slider – Compare before-after videos with the same slider experience 
✅ YouTube Video Support – Embed YouTube videos with custom duration settings 
✅ Self-Hosted Video Support – Use your own videos with custom duration control 
✅ Video Controller with Loop & Autoplay – Full video playback control 
✅ Auto Slide (Animated Comparison) – Hands-free animated reveal – no interaction needed 
✅ 8 Pre-Built Slider Templates – Professional, ready-to-use preview styles 
✅ Image Comparison Carousel – Display multiple sliders in a carousel layout 
✅ Popup / Full-Screen View – Immersive distraction-free full-screen slider mode 
✅ Live Slider Preview – See your slider in real time before publishing 
✅ Customizable Line Shape – Style the divider line to match your brand 
✅ Line Color Customization – Full color control for the divider 
✅ Customizable Labels – Advanced styling for label fonts, sizes, and colors 
✅ Customizable Handle – Style the slider handle to fit your design 
✅ Customizable Divider – Full control over divider style and appearance 
✅ Customizable Overlay – Advanced overlay styling options 
✅ Customizable Before/After Background Colors – Brand-matched color schemes 
✅ Adjustable Default Slider Offset – Set where the slider starts on load 
✅ Default Offset Position – Precise control over slider starting position 
✅ Hide Slide Handler – Clean minimal look with no visible handle 
✅ Slider Direction Control – Set sliding direction to horizontal or vertical 
✅ Slider Captions – Add informative text captions to each side of your slider 
✅ Slider Badge – Highlight featured comparisons with a custom badge 
✅ Indicator Image – Add icons or pointers to guide viewer attention 
✅ Priority Email Support – Fast, dedicated support from our team 
✅ Product Updates for 1 Year – Stay current with the latest features 
✅ Lowest Price Guaranteed – Best value in the market
<h3>✨ Standout Features at a Glance</h3>
👉 Two-Image & Three-Image Comparison Sliders 
Highlight transformations side-by-side, or go even further with three-way comparisons for maximum visual impact.
👉 Video Comparison Slider 
Go beyond static images. Compare before-after videos with the same intuitive drag-slide experience.
👉 Auto Slide (Animated Comparison) 
Automatically animate your slider from start to end – a hands-free visual reveal that captures attention the moment it scrolls into view.
👉 One-Image Retouch Slider (Pro) 
Create a before-after effect using just a single image. Apply filters like black & white or blur to generate the “before” state – perfect for photo retouching and color correction showcases.
👉 Image Comparison Carousel (Pro) 
Display multiple before-after sliders in a sleek carousel. Ideal for portfolios, product showcases, and transformation case studies.
👉 Popup / Full-Screen View (Pro) 
Give viewers an immersive, distraction-free experience with full-screen comparison mode.
👉 Live Slider Preview (Pro) 
Preview exactly how your slider will look on the front end before publishing – adjust images, labels, and effects in real time.
👉 Slider Captions (Pro) 
Add context and storytelling to each comparison with customizable captions on both the Before and After sides: 
– Before: Top Left or Bottom Left 
– After: Top Right or Bottom Right
👉 Slider Badge (Pro) 
Highlight featured sliders with custom badges – “New,” “Edited,” “HD,” or any label you choose.
<h3>🔌 Seamless Integration With All Major Page Builders</h3>
BefTer works beautifully with every popular WordPress page builder:
✅ Elementor – Built-in widget for true drag-and-drop integration 
✅ Gutenberg / Block Editor – Use the Shortcode block for instant embedding 
✅ Divi – Insert shortcodes directly inside Divi modules 
✅ WPBakery / Visual Composer – Add shortcodes to any layout with ease 
✅ Bricks Builder – Fast, responsive sliders with zero custom code 
✅ Beaver Builder – Smooth, responsive sliders that blend with your design
No matter which builder you use, BefTer delivers a consistent, seamless experience.
<a href="https://codecanel.com/wp-before-after-image-slider/?utm_source=repo_upgrade&utm_medium=repo&utm_campaign=repo_productpage&utm_id=repo_productpage#features" rel="nofollow ugc">If you want to know more about the powerful functions and capabilities check the link.</a>
<h3>🎯 Perfect For Every Industry That Relies on Visual Impact</h3>
BefTer is trusted by professionals across a wide range of industries:
✅ Photography & Graphic Design – Highlight photo edits, retouching, UI/UX redesigns, and creative makeovers 
✅ Beauty, Wellness & Healthcare – Display skincare routines, cosmetic treatments, dental work, and body transformations 
✅ Home Improvement & Interior Design – Showcase remodeling, renovation, painting, and landscaping projects 
✅ Real Estate & Property Development – Compare staged vs. empty spaces, renovations, and new constructions 
✅ E-Commerce & Fashion – Show product variations, color options, packaging changes, and design upgrades 
✅ Automotive & Mechanical Services – Showcase vehicle restorations, detailing, and tuning transformations 
✅ Education & Research – Visualize scientific changes, historical comparisons, and learning progress 
✅ Food & Culinary Arts – Share recipe development, plating improvements, and food photography before-afters 
✅ Event Planning & Decor – Present event setup transformations, wedding decor, and seasonal reveals
<h3>Video Tutorials</h3>
<iframe loading="lazy" class="youtube-player" width="750" height="422" src="https://www.youtube.com/embed/zkCY5GbscWQ?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>
<iframe loading="lazy" class="youtube-player" width="750" height="422" src="https://www.youtube.com/embed/vPh08uFcKTY?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>
<iframe loading="lazy" class="youtube-player" width="750" height="422" src="https://www.youtube.com/embed/eeCM0E2ggMo?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>
<iframe loading="lazy" class="youtube-player" width="750" height="422" src="https://www.youtube.com/embed/-RL9Lun1kGg?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>
<h3>💬 Support & Community</h3>
We offer full support for BefTer via the WordPress.org support forums and our <a href="https://codecanel.com/account/support/" rel="nofollow ugc">official website</a>.
Before reaching out, please review our <a href="https://codecanel.com/support-policy/" rel="nofollow ugc">Support Policy</a> to understand response times and coverage.
👉 <a href="https://www.facebook.com/groups/codecanel" rel="nofollow ugc">Join our active Facebook Community</a> to stay updated with new features, tips, and announcements.
<h3>🔐 Security Vulnerability Reporting</h3>
We take security seriously. If you discover a vulnerability or bug, please report it immediately using our <a href="https://codecanel.com/contact/" rel="nofollow ugc">Contact Form</a> or by opening a <a href="https://codecanel.com/account/support/" rel="nofollow ugc">Support Ticket</a>. Our dedicated security team will promptly review and address any legitimate issues.
<h3>Our Other Plugins</h3>
👉 <a href="https://wordpress.org/plugins/writerush/" rel="ugc">WriteRush</a> – AI-Powered Content Writer & Complete Social Media Assistant 
👉 <a href="https://wordpress.org/plugins/reading-time-progress-bar/" rel="ugc">Reading Time & Progress Bar</a> – Display estimated reading time and a progress bar on posts
<h3>Privacy Policy</h3>
WP Before After Image Slider – Interactive Image and Video Comparison Plugin for WordPress uses <a href="https://appsero.com/" rel="nofollow ugc">Appsero</a> SDK to collect some telemetry data. Appsero SDK does not gather any data by default. The SDK only starts gathering basic telemetry data when a user allows it via the admin notice. Appsero SDK DOES NOT IMMEDIATELY start gathering data, without confirmation from users in any case. We use this data to troubleshoot problems faster, make product improvements & ensure a great user experience for all our users.

WP Before After Image Slider – Interactive Image and Video Comparison Plugin for WordPress

WP Before After Image & Video Slider for WordPress - Create Stunning Interactive Comparisons in Minutes. Lightweight, Responsive, No Coding Needed.

Image Split – Before/After Image Comparison Slider vs WP Before After Image Slider – Interactive Image and Video Comparison Plugin for WordPress