Welcome, Hunter! 👋 Enjoy 50% OFF annual plans with code PRODUCTHUNT — limited time ⏳
50% OFF annual plans — code PRODUCTHUNT

Before and After Slider for Elementor

Compare before-and-after visual changes on your Elementor website to show transformations, illustrate progress, and present clear, impactful results.
4.8 rating
10,000+ reviews
Free plan available
Create Widget for Free
No credit card needed
Before and After Slider for Elementor

Create your Before and After Slider widget

Configure your Before and After Slider and add it to your Elementor website for free!

Screenshots

Before and After Slider for Elementor
1 / 6

Embed Before and After Slider on Elementor with the Elfsight widget

Before and After Slider by Elfsight will help you compose impressive sales-efficient images for your site. Visitors will have a chance see at once all the results that your products or services introduce. Merely upload before and after photos to Before and After Slider for Elementor and they will come out with a divider which is movable to check the difference. You can create unlimited sets of photos, and write captions and labels. The sliding direction offers two options: horizontal or vertical, and you are free to set the most fitting picture ratio. Your visitors will definitely order, once they capture the actual result| of your products!

With comparison slider, start strong business growth and increased sales

The basic widget features include

  • Shape any amount of Before and After sets of pictures
  • Add captions with text formatting options to each image
  • Two layouts: List and Carousel
  • Horizontal or vertical orientation of the divider
  • Click and drag or simply hovering to move the divider
  • Swiping on touch screen devices

You can see whet the widget offers using the demo

How can I embed Before and After Slider on my Elementor?

Simply follow these steps given below to embed the widget.

  1. Managing our free configurator and start creating your customized instrument.
    Find the suitable look and characteristics of the widget and apply the edits.
  2. Get the unique code appearing in the box on Elfsight Apps
    Right after the configuration of your tool is complete, copy the exclusive code in the appeared window and keep it for future use.
  3. Initiate employment of the tool on your Elementor web page
    Integrate the code you’ve saved before into your homepage and save the adjustments.
  4. The installation is fully ended
    Go to your page to view how’s the tool performing.

If you run into inquiries or come across any difficulties, do not be afraid to get in touch with our customer service team. Our consultants are longing to help you with all the questions you may have on the widget.

Do I need Elementor Pro to use Before and After Slider?

You can add the Store Locator widget using Elementor Free while some advanced display and layout options may require Elementor Pro.

Does the Before and After Slider support vertical and horizontal dividers?

Yes, both vertical and horizontal divider directions are supported, allowing you to choose the best orientation for your Elementor layout.

How can visitors interact with the divider in the slider?

The widget supports Drag and Click, as well as Hover interaction modes, letting Elementor visitors move the divider easily.

Can I add clickable links inside image captions?

Yes, captions support links, allowing you to direct users to product pages, services, or case studies within your Elementor website.

Can I set the initial divider position?

Yes, the Elfsight Before and After Slider widget lets you define the default divider position, controlling which side appears first.

What image formats are recommended for best performance?

The widget works best with optimized JPG or PNG images, following Elfsight’s size and resolution guidelines for Elementor pages.

Does Elfsight automatically compress or optimize images?

No, images are displayed exactly as uploaded, so it’s recommended to optimize files before adding them to the widget.

Can I use the Before and After Slider for mockups or designs?

Yes, the widget supports any paired images, making it suitable for mockups, renders, design updates, and visual comparisons.

Can I compare more than two images at the same time?

No, each slide compares two images only, so showing multiple stages requires adding several slides in sequence.

Pricing

14-day money back guarantee. Risk-free, you can cancel at anytime.
Elfsight Apps
Cross-platform version that works on any website
from $0 / month
start with free plan
Unlimited websites
Free customer support
Charge-free installation service
Great deal for multiple apps
100% customizable