Source: https://divicake.com/blog/before-after-slider-divi-plugin-review/ [Blog](https://divicake.com/blog/)/[Resources](https://divicake.com/category/resources/) # Before After Slider: Divi Plugin Review By Divi Cake·11 December 2018·Updated 26 June 2025·6 min read Before After Slider Divi Plugin Review We may earn a commission from affiliate links in this post. [Disclosure policy](https://divicake.com/affiliate-disclosure-policy/) On this page - [Before After Slider Module](https://divicake.com#before-after-slider-module) - [Before and After Slider Examples](https://divicake.com#before-and-after-slider-examples) - [How to Purchase Before and After Slider for Divi](https://divicake.com#how-to-purchase-before-and-after-slider-for-divi) - [Ending Thoughts](https://divicake.com#ending-thoughts) Before and After Slider for Divi is a third-party plugin that makes it easy to compare two images in the same space. A slider control lets the user manually see a portion of each image by hiding or revealing one image over the other. In this plugin review, we’ll take a look at Before and After Slider for Divi and see how easy it is to use. You can purchase Before and After Slider for Divi in the [Divi Cake shop](https://divicake.com/products/before-after-slider-for-divi/). Spoiler: it’s amazing for its price. ## Before After Slider Module Before After Slider: Divi Plugin Review A new module is added to the Divi Builder called Before After Slider. I’m using it here in the Wireframe view. Before and After Slider for Divi plugin displaying the comparison of two images with a manual slider control. Plugin review highlights the ease of use and availability in the Divi Cake shop. It works like a normal Divi module except it doesn’t show a preview in the Visual Editor. It will show the location and the width of the image, so you can plan and design with it without seeing the images, but it won’t show the height of the container. The images can be much taller than the space it shows. The Content tab includes the before and after images with alt text, the slider before and after labels, background, and admin label. A Divi module that displays image location and width without showing a preview in the Visual Editor. The module does not display the container’s height, allowing images to be taller than the visible space. The Design settings include the slider (including slider direction (choose horizontal or vertical) and start offset), text, spacing, border, box shadow, and animation. A Divi module that displays image location and width without showing a preview in the Visual Editor. The module does not display the container’s height, allowing images to be taller than the visible space. The Advanced tab includes CSS ID & Classes, Custom CSS (the standard default fields), Visibility, Transition Duration (choose the duration, delay, and speed curve), Transition Delay, and Transition Speed Curve (ease in, ease out, or linear). ## Before and After Slider Examples Before After Slider: Divi Plugin Review In this example, I’ve added two versions of the same image (I’ve added an overlay to the second image) with alt text for each image. I’ve left all of the module’s settings at default. Before and After Slider Examples Here’s the row in full-width. I’ll save it and exit the Visual Builder to see the image. Before and after images of a Divi Theme website, separated by a movable line with a circle containing arrows. Drag the circle left to view more of the after image or right to view more of the before image, with the slider initially positioned at 50%. It shows the before image on the left and the after image on the right. Both are separated by a line with a circle that contains arrows to show that the line can be moved. Simply grab the circle and slide left to see more of the after image and right to see more of the before image. Since the Slider Offset Start is 50, the line with the circle is in the center. Before and after images of a Divi Theme website, separated by a movable line with a circle containing arrows. Drag the circle left to view more of the after image or right to view more of the before image, with the slider initially positioned at 50%. Here’s more of the before image. Before and after images of a Divi Theme website, separated by a movable line with a circle containing arrows. Drag the circle left to view more of the after image or right to view more of the before image, with the slider initially positioned at 50%. Here’s more of the after image. Before and after images of a Divi Theme website, separated by a movable line with a circle containing arrows. Drag the circle left to view more of the after image or right to view more of the before image, with the slider initially positioned at 50%. You can see only the before or after image if you slide all to way to the side. It still shows the circle that you can grab and slide. Before and after images of a Divi Theme website, separated by a movable line with a circle containing arrows. Drag the circle left to view more of the after image or right to view more of the before image, with the slider initially positioned at 50%. It also shows an overlay on hover. This isn’t adjustable. It would be nice to create your own overlays, but at this price, I understand why it doesn’t include it. Before and after images of a Divi Theme website, separated by a movable line with a circle containing arrows. Drag the circle left to view more of the after image or right to view more of the before image, with the slider initially positioned at 50%. For this one, I’ve set the Slider Start Offset to 25. The line is automatically set to start at 25% of the image. You can set the offset to any number you want from 0 to 100. That percentage of the after image will show by default. Before After Slider: Divi Plugin Review This one shows the slider vertically. Before and after images of a Divi Theme website, separated by a movable line with a circle containing arrows. Drag the circle left to view more of the after image or right to view more of the before image, with the slider initially positioned at 50%. It works exactly the same- it just slides vertically instead of horizontally. Before After Slider: Divi Plugin Review There are lots of ways to use this feature. Here, I’ve created an image that alerts the reader to a hidden image that they can see if they choose to. I’ve set the offset to 95% so the image peeks through just a little. Before After Slider: Divi Plugin Review This one shows a before and after example of a retouched photo. This is a good way to show your photo editing skills or services. Before After Slider: Divi Plugin Review This one shows two different images so you can compare locations. I’ve added a box shadow and set the offset to 50% so it shows equal portions of the images as it loads. I can see this working for anything you’d need to compare such as graphics, art, real estate, vacation spots, cars, etc. You could even show the same location in the summer and the winter so visitors could get an idea of what the location is like in different seasons. Before After Slider: Divi Plugin Review In this one, I’ve added labels for each image. They only show in the overlay on hover. We don’t have access to the font’s color, but they look great with the overlay. It’s also fully responsive. In this example, I’m viewing the page in different sizes using Chrome’s Developer Tools. I resized it several times and emulated several devices and it worked perfectly every time. In the above example, I’ve moved the slider to show that it still works just fine. ## How to Purchase Before and After Slider for Divi Before After Slider: Divi Plugin Review You can purchase Before and After Slider for Divi in the [Divi Cake shop](https://divicake.com/products/before-after-slider-for-divi/) for $9.99. Support is provided by the [supplier](https://divicake.com/author/divisensei). ## Ending Thoughts Before and After Slider for Divi is intuitive to use. I never needed to look at the documentation and it did everything I wanted it to do. There are a couple of settings that I’d like to see added, such as the ability to see the images in the preview from the frontend builder and change the overlay and font colors, but I’m sure these features would put the plugin in an entirely different price range. It’s a simple plugin that does one thing really well at an amazing price. Placing one image over another is a great way to compare them. It’s excellent for showing any kind of before and after such as projects, artistic skills, and more. It’s also good for showing comparisons such as colors, homes, cars, locations, etc. Before and After Slider for Divi is an easy plugin to recommend for Divi users of all skill levels. Have you tried Before and After Slider for Divi? Let us know what you think about it in the comments. ## Written by Divi Cake Divi 5 tutorials, layouts and fixes from the team that builds Divi sites every week. - [About Divi Cake](https://divicake.com/about/) ## Get the Divi Cake newsletter New Divi tutorials and Divi Cake product news, by email. First name (optional)Email Company website SubscribeSubscribeSubscribe Unsubscribe any time. [Privacy policy](https://divicake.com/privacy/) The sign-up form needs JavaScript for its spam check. Almost done. Click the link in the email we just sent to confirm your subscription. If you are already subscribed, there is nothing more to do. ## Submit a comment Comments are read before they appear. Your email is not published. Comment NameEmail Company website Submit commentSubmit commentSubmit comment The comment form needs JavaScript for its spam check. Thanks. Your comment is waiting for review and will appear here once it is approved. ## Do you need help with … - [Divi 5 migration](https://divicake.com/divi-4-to-divi-5-migration/) - [Divi websites](https://divicake.com/divi-website-development/) - [Divi plugins](https://divicake.com/divi-plugin-development/) - [Fix a site](https://divicake.com/fix-existing-site/) - [Beyond Divi](https://divicake.com/beyond-divi/) - [Technical SEO](https://divicake.com/technical-seo/) - [SEO content](https://divicake.com/seo-content/) ## Newsletter New Divi tutorials and Divi Cake product news, by email. First name (optional)Email Company website SubscribeSubscribeSubscribe Unsubscribe any time. [Privacy policy](https://divicake.com/privacy/) The sign-up form needs JavaScript for its spam check. Almost done. Click the link in the email we just sent to confirm your subscription. If you are already subscribed, there is nothing more to do. ## Save Annually on Divi [Save 69% on Divi VIP](https://divicake.com/go/divi-vip/)[Save 69% on Divi Cloud](https://divicake.com/go/divi-cloud/)[Save 69%, Divi Team](https://divicake.com/go/divi-teams/) ## WordPress Hosting & Tools [100% off on Kinsta for 1 Month](https://divicake.com/go/kinsta/)[Get up to 62% off Bluehost hosting.](https://divicake.com/go/wordpress-hosting-blue-host/)[Save Up to 15% on Rank Math](https://divicake.com/go/rank-math/)[Get 50% OFF on all WPForms plans](https://divicake.com/go/wpforms/) ## More in Resources [ Divi Breadcrumbs Ultimate Resources6 min read ### Divi Breadcrumbs Ultimate A look at Divi Breadcrumbs Ultimate: icon home links and separators, editable category, archive, search, author and 404 text, plus full Divi design settings. 23 October 2026](https://divicake.com/blog/divi-breadcrumbs-ultimate/) [ Best affiliate programs for Divi blogs Resources5 min read ### Best Affiliate Programs for Divi Blogs Nine affiliate programs a Divi blog can actually earn from, what each one pays, and three WordPress plugins for managing the links. 7 October 2026](https://divicake.com/blog/best-affiliate-programs-for-divi-blogs/) [ Best Custom Divi Modules Resources3 min read ### Best Custom Divi Modules Six custom module plugins that still exist and are still sold, and what each one adds to the Divi Builder. 5 October 2026](https://divicake.com/blog/12-best-custom-divi-modules/)