Video Comparison is a powerful way to visually showcase differences, transformations, or progress directly on your Elementor website. With the Video Comparison widget, you can create interactive layouts like before and after sliders, side-by-side views, wiper effects, and even multi-video grids. These dynamic comparisons help users clearly understand changes while keeping the experience smooth, engaging, and fully responsive across all devices.
Step #1: Install and activate Unlimited Elements
Before getting started, you will need to purchase Unlimited Elements Pro from the link below to access the Video Comparison widget.
Then follow these steps:
Step #2: Adding the Video Comparison widget to your Elementor website
To make a live video comparison in your Elementor website, install the Video Comparison widget from the Unlimited Elements Widget library.
Step #3: Add Before and After Videos to the Media Library
First, upload the before and after videos to the Media Library. Make sure the videos are optimized for web use, so try to keep the file size as small as possible for better performance.
Step #4: Add the Video Comparison in Elementor page
Now, in the Elementor editor, find the Video Comparison widget and drag it to the desired part of your page.
General Settings
Comparison Mode
Select the desired video comparison mode:
- Slider
- 3 Video
- Wiper
- Side by Side
- Grid(2x2)
Before Video Link
Type or paste the before video link.
After Video Link
Type or paste the after video link.
Initial Position
Set the initial position of slider in percentage.
Playback Mode
Choose how and when the video should play.
- Auto Play
- Start on Interaction
- Play While Interacting
Direction
Choose the direction of slider.
- Horizontal
- Vertical
Trigger
Set the trigger for before after transition.
- Click
- Hover
Handle Type
Select the handle type.
- Bar
- Arrows
- Icon
- None
Show Labels
Show or hide the before and after labels.
Pause When Out of View
Keep this option enabled for better performance.
Auto Slide Comparison Options
Auto Slide
Enable or disable the auto slide option.
Auto Slide Duration (%)
Set the duration of one full slide (0-100 or 100-0).
Auto Slide Resume
Enable this to resume auto-sliding after interaction.
Auto Slide Resume Delay (ms)
Set the delay before resuming the auto slide after interaction ends.
Video Comparison Labels
Loading Screen Settings
Wrapping it Up!
Adding a Video Comparison to your Elementor website is an effective way to present visual content in a more interactive and meaningful way. With multiple layout options and smooth controls, you can highlight differences with clarity while keeping your design modern and user-friendly. It’s a great solution for demonstrating results, comparisons, or creative concepts in a way that captures attention and improves engagement.