#before and after image slider
Are you looking for the best before and after image slider for your website? Worry no more! Cause we have the right solution for you. Today, we are going to show you how you can make one easily using Elementor.
A before and after image slider creates a slideshow by placing two similar images side-by-side. With a slider bar, you can drag it back and forth to see both comparing images. After all, it is an interesting way to showcase newly arrived products, the growth of your company, or special meanings. Not only it makes your visitors attracted to it, but also it shows the effects of your product or service. Indeed, it is a pretty good piece of a tool!
Generally, people use photo editor tools to make this type of effect. But using a simple Image Compare widget, you can easily achieve this feat. Note that, the company Element Pack has developed this widget. This widget is a fully functional image slider that helps you show 2 different versions of the same image. Furthermore, you can use it in any way you like.
No more chitchat. Let’s get into it!
Insert & Customize Before and After Image Slider
Inserting Widget
First, go to your web page where you want to use this slider. As we are doing this using elementor, make sure to install Elementor and Element Pack Lite plugins into your dashboard. However, we will not talk about installing procedures in this blog.
Though it is not worth mentioning, still beginners might find it hard. Just search for the Image Compare widget in the widget menu. When you see it (it has ElementPack logo on it), drag and drop it into a section in the editor.
Customizing the Layout of the Image Slider
Once you drop it, you will see the default setup of the slider at the start. However, this is the Layout section in the Content tab. You can choose any type of image for the image slider to show it here.
Let’s change the pictures. For starters, let’s select normal ones.
Once you insert an image, you can change their size from Image Size option. Generally, the larger the image, the more space it will take. For an image with a 1000-pixel height but only 500-pixel width, it will increase the slider length by a 1000 pixel.
Moreover, you can change the ‘After’ & ‘Before’ tags from here. Let’s talk about this part later and move on to the next section.
Interface Settings
Go to Content Tab> Additional
The Additional option is also known as interface settings. From here, we can change the slider bar orientation to either Vertical or Horizontal. Also, you can change the ‘before image‘ visibility. The Overlay switcher turns on/off overlay on the whole before and after image slider.
Once again, there are some things to talk about in this section. Notice that, you can add a circle in the middle of the slider bar. Also, you can add a blur effect to the circle.
One more interesting thing here is, you have the option to smooth the hover-drag of the slide bar. Turn on the switcher Smoothing? to smooth the hover-drag. However, you can adjust the sensitivity of the image slider bar with the scroll button below.
<a class="bdt-ep-advanced-icon-box-readmore bdt-ep-attention-button" href="https://bdthemes.com/giveaway/" target="_blank" rel="noopener">
Join Give Away Program
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="elementor-section elementor-top-section elementor-element elementor-element-742d147c elementor-section-boxed elementor-section-height-default elementor-section-height-default magic-button-disabled-no" data-id="742d147c" data-element_type="section" data-e-type="section">
<div class="elementor-container elementor-column-gap-default">
<div class="elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-30596dde" data-id="30596dde" data-element_type="column" data-e-type="column">
<div class="elementor-widget-wrap elementor-element-populated">
<div class="elementor-element elementor-element-5d8520b9 elementor-widget elementor-widget-text-editor" data-id="5d8520b9" data-element_type="widget" data-e-type="widget" data-widget_type="text-editor.default">
<h3 id="h-change-the-outlook-of-your-before-and-after-image-slider">Change the Outlook of Your Before and After Image Slider</h3><p>Up to this point, all those settings you saw were basic settings. Now, let’s put some colors on your image slider. With the <strong>Style Tab</strong>, you can easily do it.</p><figure class="wp-block-image size-large"><img width="1024" height="386" class="wp-image-14448" src="/blog-media/how-to-make-a-before-and-after-image-slider-using-elementor/5-16-1024x386.png" alt="Styling the image slider" title="Styling the image slider"/></figure><p>Look closely, on the arrow mark, you can see options for 3 parts of the image slider; Before, After, and Bar. However, the color settings are same for these three. Also, you can add padding and change the border radius of the Before & After tag.</p><p>Ops! I forgot to mention the <strong>Overlay </strong>option at the top. Like the image above, you can add any overlay color from the color spectrum. Additionally, you can change the fonts of the tags from <strong>Typography</strong>.</p><h2 id="h-extra-examples-of-the-before-and-after-image-slider">Extra Examples of the Before and After Image Slider</h2><h2 id="h-extra-examples-of-the-before-and-after-image-slider"><img width="1024" height="420" class="wp-image-14452" style="font-family: var( --e-global-typography-text-font-family ), Sans-serif; font-weight: var( --e-global-typography-text-font-weight ); color: #292929; font-size: 18px;" src="/blog-media/how-to-make-a-before-and-after-image-slider-using-elementor/8-14-1024x420.png" alt="Example of the image slider" title="Example of the image slider"/></h2><p>Image Compare widget is a fun tool you can play around with. Showing comparative images to your visitors can also be productive. As the image above, you can show different color comparison of the same product.</p><figure class="wp-block-image size-large"><img width="1024" height="317" class="wp-image-14454" src="/blog-media/how-to-make-a-before-and-after-image-slider-using-elementor/6-21-1024x317.png" alt="Example" title="Example"/></figure><p>Similarly, you can show different products as comparative prices or new looks.</p><figure class="wp-block-image size-large"><img width="1024" height="606" class="wp-image-14456" src="/blog-media/how-to-make-a-before-and-after-image-slider-using-elementor/9-15-1024x606.png" alt="Mobile Response check of the image compare widget" title="Mobile Response check of the image compare widget"/></figure><p>Also, remember to see the image slider in mobile and tablet view. Likewise, you can observe how your visitors will see it.</p><p>That’s it! I hope you have grasped the whole thing. You can also <a href="/demo/element/image-compare/" target="_blank" rel="noopener">visit</a> our knowledge base for additional support. This blog aims to give you bits and pieces of information for your benefit. So, if you are able to achieve your goal, it is our pleasure. Thanks for having patience. Have a great day.</p><h2 id="h-50-discount-on-the-best-elementor-widget-pack-grab-it-now">50% Discount on the Best Elementor Widget Pack! Grab It Now!!</h2><figure class="wp-block-image size-large"><img width="1024" height="491" class="wp-image-14464" src="/blog-media/how-to-make-a-before-and-after-image-slider-using-elementor/EP-3-1024x491.png" alt="Element Pack" title="Element Pack"/></figure><p><a href="http://www.elementpack.pro" target="_blank" rel="noopener"><strong>Element Pack</strong></a> is a widget pack solution for <strong>Elementor</strong> page builder. With <strong>190+ widgets</strong>, <strong>270+ ready pages</strong>, and <strong>1800+ ready blocks</strong>, Element Pack is now in the <strong>Top 5</strong> worldwide.</p><p>Hope this blog answers your needs. Get into our newsletter to stay updated about all new posts.</p><p>Stay Home, Stay Safe.</p> </div>
</div>
</div>
</div>
</section>
<section class="elementor-section elementor-top-section elementor-element elementor-element-b961152 elementor-section-boxed elementor-section-height-default elementor-section-height-default magic-button-disabled-no" data-id="b961152" data-element_type="section" data-e-type="section">
<div class="elementor-container elementor-column-gap-default">
<div class="elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-dd1ced1" data-id="dd1ced1" data-element_type="column" data-e-type="column">
<div class="elementor-widget-wrap elementor-element-populated">
<div class="elementor-element elementor-element-319c0ca elementor-widget elementor-widget-heading" data-id="319c0ca" data-element_type="widget" data-e-type="widget" data-widget_type="heading.default">
<h2 class="elementor-heading-title elementor-size-default">Read more WordPress blogs</h2> </div>
<div class="elementor-element elementor-element-a3eabe9 elementor-widget elementor-widget-bdt-post-list" data-id="a3eabe9" data-element_type="widget" data-e-type="widget" data-widget_type="bdt-post-list.default">
<div class="bdt-post-list-wrap" data-show-hide="{"show_title":"yes","show_category":"yes","show_image":"yes","show_date":"yes","human_diff_time_short":"no"}">
<div class="bdt-post-list" id="bdt-post-list-a3eabe9" data-settings="{"taxonomy":"category","post-type":"post","order":"desc","orderby":"date","posts_per_page":6}">
<div class="bdt-item-wrap bdt-flex">
<div class="bdt-item bdt-flex bdt-flex-middle">
<div class="bdt-image bdt-flex">
<a href="/track-wordpress-website-visibility/" title="How to Track and Improve Your WordPress Website Visibility in Search Engines">
<img width="150" height="150" src="/blog-media/how-to-make-a-before-and-after-image-slider-using-elementor/how-to-track-if-your-wordpress-site-is-visible-in-search-engines-150x150.webp" class="attachment-thumbnail size-thumbnail" alt="How to Track and Improve Your WordPress Website Visibility in Search Engines" title="How to Track and Improve Your WordPress Website Visibility in Search Engines"/> </a>
</div>
<div class="bdt-content">
<h4 class="bdt-title">
<a href="/track-wordpress-website-visibility/" class="bdt-link" title="How to Track and Improve Your WordPress Website Visibility in Search Engines">
How to Track and Improve Your WordPress Website Visibility in Search Engines </a>
</h4>
<div class="bdt-meta bdt-subnav bdt-flex-middle">
<span>May 12, 2026</span> <span><a href="/category/tutorials/">Tutorials</a>, <a href="/category/wordpress/">WordPress</a></span> </div>
</div>
</div>
</div>
<div class="bdt-item-wrap bdt-flex">
<div class="bdt-item bdt-flex bdt-flex-middle">
<div class="bdt-image bdt-flex">
<a href="/best-website-layouts-examples/" title="20 Website Layout Examples to Inspire Your Next Design">
<img width="150" height="150" src="/blog-media/how-to-make-a-before-and-after-image-slider-using-elementor/website-layouts-examples-to-inspire-your-next-design-150x150.webp" class="attachment-thumbnail size-thumbnail" alt="20 Website Layout Examples to Inspire Your Next Design" title="20 Website Layout Examples to Inspire Your Next Design"/> </a>
</div>
<div class="bdt-content">
<h4 class="bdt-title">
<a href="/best-website-layouts-examples/" class="bdt-link" title="20 Website Layout Examples to Inspire Your Next Design">
20 Website Layout Examples to Inspire Your Next Design </a>
</h4>
<div class="bdt-meta bdt-subnav bdt-flex-middle">
<span>May 2, 2026</span> <span><a href="/category/tips-and-tricks/">Tips and Tricks</a></span> </div>
</div>
</div>
</div>
<div class="bdt-item-wrap bdt-flex">
<div class="bdt-item bdt-flex bdt-flex-middle">
<div class="bdt-image bdt-flex">
<a href="/wordpress-7-0-release-updates-features/" title="WordPress 7.0 is Coming: The Essential Guide to the 2026 Release, Collaboration Features and AI Infrastructure">
<img width="150" height="150" src="/blog-media/how-to-make-a-before-and-after-image-slider-using-elementor/WordPress-7-0-release-whats-new-1-150x150.webp" class="attachment-thumbnail size-thumbnail" alt="WordPress 7.0 is Coming: The Essential Guide to the 2026 Release, Collaboration Features and AI Infrastructure" title="WordPress 7.0 is Coming: The Essential Guide to the 2026 Release, Collaboration Features and AI Infrastructure"/> </a>
</div>
<div class="bdt-content">
<h4 class="bdt-title">
<a href="/wordpress-7-0-release-updates-features/" class="bdt-link" title="WordPress 7.0 is Coming: The Essential Guide to the 2026 Release, Collaboration Features and AI Infrastructure">
WordPress 7.0 is Coming: The Essential Guide to the 2026 Release, Collaboration Features and AI Infrastructure </a>
</h4>
<div class="bdt-meta bdt-subnav bdt-flex-middle">
<span>April 26, 2026</span> <span><a href="/category/tips-and-tricks/">Tips and Tricks</a>, <a href="/category/wordpress/">WordPress</a></span> </div>
</div>
</div>
</div>
<div class="bdt-item-wrap bdt-flex">
<div class="bdt-item bdt-flex bdt-flex-middle">
<div class="bdt-image bdt-flex">
<a href="/how-can-i-make-a-business-website/" title="How Can I Make a Business Website (Complete Step-by-Step Guide)">
<img width="150" height="150" src="/blog-media/how-to-make-a-before-and-after-image-slider-using-elementor/how-can-i-make-a-business-website-150x150.webp" class="attachment-thumbnail size-thumbnail" alt="How Can I Make a Business Website (Complete Step-by-Step Guide)" title="How Can I Make a Business Website (Complete Step-by-Step Guide)"/> </a>
</div>
<div class="bdt-content">
<h4 class="bdt-title">
<a href="/how-can-i-make-a-business-website/" class="bdt-link" title="How Can I Make a Business Website (Complete Step-by-Step Guide)">
How Can I Make a Business Website (Complete Step-by-Step Guide) </a>
</h4>
<div class="bdt-meta bdt-subnav bdt-flex-middle">
<span>April 25, 2026</span> <span><a href="/category/element-pack-tips/">Element Pack Tips</a>, <a href="/category/elementor/">Elementor</a>, <a href="/category/tutorials/">Tutorials</a>, <a href="/category/wordpress/">WordPress</a></span> </div>
</div>
</div>
</div>
<div class="bdt-item-wrap bdt-flex">
<div class="bdt-item bdt-flex bdt-flex-middle">
<div class="bdt-image bdt-flex">
<a href="/how-to-make-a-website-for-my-business/" title="How to Make a Website for My Business with WordPress in 2026">
<img width="150" height="150" src="/blog-media/how-to-make-a-before-and-after-image-slider-using-elementor/how-to-make-a-website-for-my-business-with-wordpress-in-2026-150x150.webp" class="attachment-thumbnail size-thumbnail" alt="How to Make a Website for My Business with WordPress in 2026" title="How to Make a Website for My Business with WordPress in 2026"/> </a>
</div>
<div class="bdt-content">
<h4 class="bdt-title">
<a href="/how-to-make-a-website-for-my-business/" class="bdt-link" title="How to Make a Website for My Business with WordPress in 2026">
How to Make a Website for My Business with WordPress in 2026 </a>
</h4>
<div class="bdt-meta bdt-subnav bdt-flex-middle">
<span>April 24, 2026</span> <span><a href="/category/element-pack-tips/">Element Pack Tips</a>, <a href="/category/tutorials/">Tutorials</a>, <a href="/category/wordpress/">WordPress</a></span> </div>
</div>
</div>
</div>
<div class="bdt-item-wrap bdt-flex">
<div class="bdt-item bdt-flex bdt-flex-middle">
<div class="bdt-image bdt-flex">
<a href="/how-to-edit-woocommerce-shop-page-with-elementor/" title="How to Edit WooCommerce Shop Page with Elementor">
<img width="150" height="150" src="/blog-media/how-to-make-a-before-and-after-image-slider-using-elementor/how-to-edit-woocommerce-shop-page-with-elementor-150x150.webp" class="attachment-thumbnail size-thumbnail" alt="How to Edit WooCommerce Shop Page with Elementor" title="How to Edit WooCommerce Shop Page with Elementor"/> </a>
</div>
<div class="bdt-content">
<h4 class="bdt-title">
<a href="/how-to-edit-woocommerce-shop-page-with-elementor/" class="bdt-link" title="How to Edit WooCommerce Shop Page with Elementor">
How to Edit WooCommerce Shop Page with Elementor </a>
</h4>
<div class="bdt-meta bdt-subnav bdt-flex-middle">
<span>April 23, 2026</span> <span><a href="/category/elementor/">Elementor</a>, <a href="/category/tutorials/">Tutorials</a>, <a href="/category/woocommerce/">WooCommerce</a></span> </div>
</div>
</div>
</div>
<!-- GRADIENT SPINNER -->
<div id="bdt-loading-image" style="display: none;">
<div class="bdt-spinner-box">
<div class="bdt-circle-border">
<div class="bdt-circle-core"></div>
</div>
</div>
</div>
<!-- GRADIENT SPINNER -->
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
S
Selim Rana
The BdThemes team builds WordPress plugins trusted by 3M+ users worldwide. We write about web accessibility, WCAG compliance, and inclusive design.