Title: Before After Image Author: Scott Paterson Published: September 8, 2022 Last modified: August 22, 2026 --- Search plugins ![](https://ps.w.org/majestic-before-after-image/assets/banner-772x250.png?rev=3565217) ![](https://ps.w.org/majestic-before-after-image/assets/icon-256x256.png?rev=2781786) # Before After Image By [Scott Paterson](https://profiles.wordpress.org/scottpaterson/) [Download](https://downloads.wordpress.org/plugin/majestic-before-after-image.3.0.2.zip) * [Details](https://srd.wordpress.org/plugins/majestic-before-after-image/#description) * [Reviews](https://srd.wordpress.org/plugins/majestic-before-after-image/#reviews) * [Installation](https://srd.wordpress.org/plugins/majestic-before-after-image/#installation) * [Development](https://srd.wordpress.org/plugins/majestic-before-after-image/#developers) [Support](https://wordpress.org/support/plugin/majestic-before-after-image/) ## Description Before After Image lets visitors drag a handle to compare two images side-by-side. Works in three ways — use whichever fits your site: * **Shortcode** — You can you shortcodes on any post or page. Use the built-in shortcode builder to generate shortcodes easily. * **Elementor widget** — drag and drop the widget onto any page with full style controls. * **WooCommerce** — attach a before/after comparison to any product directly from the product editor. [View Demo](https://demos.wpplugin.org/before-after-image/) Full usage instructions, shortcode options, and WooCommerce setup steps are available inside the plugin under the **Before After Image** menu. ### Key Features * Works standalone via shortcode — Elementor and WooCommerce are both optional * WooCommerce product integration with per-product settings * Elementor widget with full style controls * Horizontal and vertical orientation * Handle movement by drag or mouse hover * Customisable before/after labels (on hover, always, or never) * Enable/disable overlay * Default handle offset position * Six handle styles * Handle types: Arrows or Text * Slider colour — white or black (line, handle, and arrows) * Image size option * Typography and colour options (Elementor) * Touch and pointer-event support ### Before After Image Pro Want more features? Check out **Before After Image Pro**: * **Auto-Slide Animation** — Grab attention with an automatically sweeping handle. Configure speed and pause-on-hover behavior. * **3-Image Comparison** — Show before, during, and after with two draggable handles. * **Full-Screen View** — Let visitors zoom in with a button to expand the slider to full screen. * **Custom Colors** — Fine-tune the line, circle, and arrows independently to match your brand. * **Rounded Corners** — Add subtle to fully rounded corners for a polished look. * **Shortcode Manager** — Save and reuse slider configurations with `[mbai_preset id="..."]` shortcodes. * **Premium Support** — Get priority support and automatic updates. [Get Before After Image Pro](https://wpplugin.org/downloads/before-after-image-pro/) ## Screenshots [⌊Shortcode builder⌉⌊Shortcode builder⌉[ Shortcode builder [⌊WooCommerce page with slider as product image⌉⌊WooCommerce page with slider as product image⌉[ WooCommerce page with slider as product image [⌊Elementor Widget⌉⌊Elementor Widget⌉[ Elementor Widget ## Installation #### Using The WordPress Dashboard 1. Navigate to the Add New Plugin page. 2. Select `majestic-before-after-image.zip` from your computer. 3. Install and activate. #### Using FTP 1. Extract `majestic-before-after-image.zip`. 2. Upload the `majestic-before-after-image` folder to `/wp-content/plugins/`. 3. Activate via the WordPress Plugins dashboard. After activation, open the **Before After Image** menu for usage instructions. ## FAQ ### Does the plugin require Elementor? No. The plugin works on its own via the `[mbai_before_after_image]` shortcode. Elementor is optional — the drag-and-drop widget is available when Elementor is active. ### Does the plugin require WooCommerce? No. WooCommerce is optional. When active, a meta box appears on each product so you can enable the comparison widget per product. ### Does this plugin work with all themes? Yes. ### Where do I find the shortcode options? Open the **Before After Image** menu and click the Shortcode tab for a full list of options with descriptions. ## Reviews ![](https://secure.gravatar.com/avatar/040a3a7e232ef93b3021e3c7bbdb92b1f2f375f3c449059f019587b7de58208e? s=60&d=retro&r=g) ### 󠀁[Best WordPress Before and After Comparison Slider](https://wordpress.org/support/topic/best-wordpress-before-and-after-comparison-slider/)󠁿 [ambivertfellow](https://profiles.wordpress.org/ambivertfellow/) August 18, 2024 I was looking for a before & after comparison plugin (Twenty20) to build a portfolio page on my website. I have tried other plugins, but they were lack in functionality or forcing me to pay annual fees for something so simple, and then I found this plugin. It has all functions and It's 100% free and works just fine. I looked up the author of this plugin, Mr.Manesh Timilsina, Good Sir, Thank you very much. A simple google search of your name helped me find your website, maneshtimilsina[dot] com and I will contact you for fixing some issues on my own website, that I'm having a hard time trying to fix. I recommend this plugin for anyone. ![](https://secure.gravatar.com/avatar/445c596df4b51cc4880e66ef2510ca5a57506bbabc40ba6f98f06a3a436efe25? s=60&d=retro&r=g) ### 󠀁[great](https://wordpress.org/support/topic/great-15989/)󠁿 [chineshgroup](https://profiles.wordpress.org/chineshgroup/) November 23, 2023 4.9 ![](https://secure.gravatar.com/avatar/9c92fd61f41be66362a0ca467fcbfd58c2e91740a6bcd616885311d8de32a011? s=60&d=retro&r=g) ### 󠀁[Before/After](https://wordpress.org/support/topic/before-after-2/)󠁿 [jespo77](https://profiles.wordpress.org/jespo77/) December 12, 2022 Doing everything I need it for. Good job! [ Read all 4 reviews ](https://wordpress.org/support/plugin/majestic-before-after-image/reviews/) ## Contributors & Developers “Before After Image” is open source software. The following people have contributed to this plugin. Contributors * [ Scott Paterson ](https://profiles.wordpress.org/scottpaterson/) * [ WPPlugin LLC ](https://profiles.wordpress.org/wp-plugin/) [Translate “Before After Image” into your language.](https://translate.wordpress.org/projects/wp-plugins/majestic-before-after-image) ### Interested in development? [Browse the code](https://plugins.trac.wordpress.org/browser/majestic-before-after-image/), check out the [SVN repository](https://plugins.svn.wordpress.org/majestic-before-after-image/), or subscribe to the [development log](https://plugins.trac.wordpress.org/log/majestic-before-after-image/) by [RSS](https://plugins.trac.wordpress.org/log/majestic-before-after-image/?limit=100&mode=stop_on_copy&format=rss). ## Changelog #### 3.0.2 – 10 June 2026 * Improved: Welcome banner styling — now white with subtle border for better integration * Improved: Pro features sidebar — increased font size and added subtle shadow for better visibility * Improved: Pro features list order — moved 3-image comparison to second position for emphasis #### 3.0.1 – 8 June 2026 * Removed: Admin notice shown when Elementor is not active – this was not hiding correctly #### 3.0.0 – 8 June 2026 * New: Standalone shortcode `[mbai_before_after_image]` — no Elementor or WooCommerce required * New: WooCommerce product integration with per-product meta box * New: In-plugin help pages (Before After Image menu) with shortcode reference, Elementor guide, and WooCommerce setup steps * New: Custom vanilla JavaScript engine replaces jQuery-dependent event.move.js and twentytwenty.js * New: Single self-contained CSS file replaces the third-party twentytwenty.css * Removed: `third-party/` folder (event-move, twentytwenty) — no longer needed * Updated: All CSS class names migrated from `.twentytwenty-*` to `.mbai-*` (legacy aliases kept for backwards compatibility) * Updated: Elementor widget updated to use new class names and vanilla JS engine * Updated: Plugin header — `Requires Plugins: elementor` removed (Elementor now optional) * Updated: Requires PHP lowered to 5.6 * Fixed: Widget hidden when Elementor “Align Self” is set to anything other than Stretch * Improved: Touch support rewritten using native pointer events * Improved: ResizeObserver replaces window resize event for more efficient layout updates #### 2.0.4 – 21 April 2026 * WP Compatibility 6.9 * Code improvements #### 2.0.3 – 09 Sep 2025 * Minor JS fixes #### 2.0.2 – 08 Sep 2025 * WP Compatibility 6.8 * Admin page update #### 2.0.1 – 27 Nov 2024 * WP Compatibility 6.7 * Update packages #### 2.0.0 – 31 Jul 2024 * WP Compatibility 6.6 * Upgrade dependencies #### 1.0.12 – 28 June 2024 * Fix PCP issues #### 1.0.11 – 17 June 2024 * Update admin page and URL #### 1.0.10 – 02 August 2023 * Update author info and links #### 1.0.5 – 25 May 2023 * Update Admin Notice package #### 1.0.4 – 19 Feb 2023 * Fix PHP 8 issue #### 1.0.3 – 13 Sep 2022 * Fix PHP issue #### 1.0.2 – 30 Sep 2022 * Update dashboard * Minor bug fixes #### 1.0.1 – 8 Sep 2022 * Update screenshots * Minor bug fixes #### 1.0.0 – 1 Sep 2022 * Initial release ## Meta * Version **3.0.2** * Last updated **2 months ago** * Active installations **1,000+** * WordPress version ** 6.2 or higher ** * Tested up to **7.1.3** * PHP version ** 5.6 or higher ** * Language * [English (US)](https://wordpress.org/plugins/majestic-before-after-image/) * Tags * [before-after-image](https://srd.wordpress.org/plugins/tags/before-after-image/) [comparison](https://srd.wordpress.org/plugins/tags/comparison/)[elementor](https://srd.wordpress.org/plugins/tags/elementor/) [shortcode](https://srd.wordpress.org/plugins/tags/shortcode/)[woocommerce](https://srd.wordpress.org/plugins/tags/woocommerce/) * [Advanced View](https://srd.wordpress.org/plugins/majestic-before-after-image/advanced/) ## Ratings 5 out of 5 stars. * [ 3 5-star reviews ](https://wordpress.org/support/plugin/majestic-before-after-image/reviews/?filter=5) * [ 0 4-star reviews ](https://wordpress.org/support/plugin/majestic-before-after-image/reviews/?filter=4) * [ 0 3-star reviews ](https://wordpress.org/support/plugin/majestic-before-after-image/reviews/?filter=3) * [ 0 2-star reviews ](https://wordpress.org/support/plugin/majestic-before-after-image/reviews/?filter=2) * [ 0 1-star reviews ](https://wordpress.org/support/plugin/majestic-before-after-image/reviews/?filter=1) [Your review](https://wordpress.org/support/plugin/majestic-before-after-image/reviews/#new-post) [See all reviews](https://wordpress.org/support/plugin/majestic-before-after-image/reviews/) ## Contributors * [ Scott Paterson ](https://profiles.wordpress.org/scottpaterson/) * [ WPPlugin LLC ](https://profiles.wordpress.org/wp-plugin/) ## Support Got something to say? Need help? [View support forum](https://wordpress.org/support/plugin/majestic-before-after-image/) ## Donate Would you like to support the advancement of this plugin? [ Donate to this plugin ](https://wpplugin.org/donate/)