Smart Before After Viewer - Responsive Image Comparison Plugin — is a powerful tool designed to effortlessly create and display interactive before-and-after image sliders on your WordPress website. It provides a highly engaging way for your visitors to visualize changes, improvements, or transformations. Whether you're showcasing photo editing, product redesigns, or renovation results, this plugin makes the comparison visually striking and easy to understand. This plugin is fully responsive, ensuring a seamless experience across all devices, from desktops to smartphones. It's built with ease-of-use in mind, featuring a simple shortcode generator that allows you to embed comparison sliders anywhere on your site without any coding knowledge. With extensive customization options, you can tailor the look and feel of the slider to perfectly match your brand's aesthetics, adjusting colors, labels, and interaction modes.
Why This Is Important
In today's visual-driven web, simply showing two separate images isn't enough. Users are 80% more likely to engage with interactive content than static images. A "before and after" slider directly addresses this by putting the user in control, increasing time on page and improving user experience. For businesses like photo retouchers, home renovators, or medical clinics, this isn't just a gimmick—it's a conversion tool. A study showed that interactive product displays can increase conversion rates by up to 40%. By visually proving the value of your work, you build trust and turn skeptical visitors into confident customers.
Features
- Fully Responsive & Touch-Friendly: Adapts perfectly to any screen size and supports touch gestures on mobile devices.
- Horizontal & Vertical Modes: Choose the orientation that best fits your images and layout.
- Easy Shortcode Generator: No coding required. Easily create and customize sliders from the WordPress editor.
- Customizable Labels & Colors: Change the "Before" and "After" text and style the slider to match your site's branding.
- Multiple Interaction Options: Supports click-and-drag, hover, and a simple handle slider for comparison.
- Lightweight & Optimized for Speed: Built with performance in mind to ensure it doesn't slow down your website.
- Gutenberg Block Ready: Seamlessly integrates with the modern WordPress block editor for an intuitive workflow.
- Unlimited Sliders: Create as many comparison sliders as you need on your site.
- SEO-Friendly: All images include proper alt tags and attributes to maintain your site's SEO value.
- Cross-Browser Compatibility: Works flawlessly on all major browsers like Chrome, Firefox, Safari, and Edge.
Free vs. Pro Version Comparison
| Feature | Free Version (This one) | Official Pro Version |
|---|---|---|
| Basic Before/After Slider | ✅ | ✅ |
| Responsive and Touch-Enabled | ✅ | ✅ |
| Horizontal & Vertical Mode | ✅ | ✅ |
| Customizable Labels | Limited text | Full customization & styling |
| Shortcode & Widget Support | ✅ | ✅ |
| Video & GIF Comparison | ❌ | ✅ |
| Advanced Animation Effects | ❌ | ✅ |
| Premium Technical Support | ❌ | ✅ |
How to install the plugin?
- Download the plugin archive using the button above.
- Navigate to Plugins > Add New in your WordPress dashboard.
- Click "Upload Plugin" at the top and select the downloaded ZIP file.
- Install, activate the plugin, and follow the quick setup wizard instructions.
FAQ
Is this plugin compatible with page builders like Elementor or Divi?
Yes, absolutely. The Smart Before After Viewer plugin works seamlessly with all major page builders. You can easily insert the comparison slider into your layouts using the provided shortcode. Simply add a Shortcode or HTML element in your favorite builder and paste the generated code.
Will this plugin slow down my website's loading speed?
The plugin is designed to be lightweight and efficient. It only loads its necessary scripts on pages where the shortcode is actually used, preventing unnecessary overhead on the rest of your site. As always, for best performance, ensure your "before" and "after" images are properly optimized and compressed before uploading.
Can I use different-sized images for the "before" and "after" comparison?
For the best visual results, it is highly recommended to use two images with the exact same dimensions. If the images have different sizes, the plugin will attempt to align them, but it may result in an uneven or distorted comparison. Always crop and resize your images to match before creating a slider.
How do I customize the text labels like "Before" and "After"?
You can easily customize the labels directly within the shortcode. When you generate a new slider, there are attributes available to change the default text. For example, you can modify the shortcode like this: [bafg before_text="Original" after_text="Retouched"]. This gives you the flexibility to use labels that are more relevant to your specific use case.
