How to set up and style the Scroll Image Comparison widget in Elementor.
Scroll Image Comparison shows a before and an after image on top of each other. As the visitor scrolls down the page, the divider moves across and reveals the after image, with no clicking needed. Visitors can also drag the divider themselves.
Part of: Bright Addons Pro.
| Option | What it does |
|---|---|
| Before Image | The image shown first, on the left or top side of the divider. |
| Before Label | The label on the before image. |
| After Image | The image revealed as the divider moves. |
| After Label | The label on the after image. |
| Image Size | The image size used for both images. |
| Divider Moves | Left to right or Top to bottom. |
| Height | A fixed height in px or vh, per device. Leave empty to use the height of the After image. |
| Option | What it does |
|---|---|
| Divider Starts At (%) | Where the divider rests before the movement. 100 shows only the Before image. |
| Divider Ends At (%) | Where the divider stops. 0 shows only the After image. |
| Start When the Widget Top Is At (% of screen) | The movement starts when the top of the widget reaches this point of the screen. 100 is the bottom. |
| End When the Widget Top Is At (% of screen) | The movement ends when the top of the widget reaches this point. |
| Smooth Movement | Eases the divider toward its place instead of jumping with every scroll step. |
| Play Once | The divider stays where it ended when the visitor scrolls back up. |
| Let Visitors Drag the Divider | Visitors can move the divider themselves. After a drag it stays where they left it. |
| Show Labels | Shows the before and after labels. |
| Label Position | Top, Middle or Bottom. |
| Show Handle | Shows the round handle on the divider. |
| Handle Icon | The icon inside the handle. |
One license gives you every Pro widget, all 10 extensions, the Theme Builder and priority support. From $10 a year, with a 14-day money-back guarantee.
These sections are in the Style tab.
border radius and box shadow.
divider color and width, handle size, background, icon color and radius.
typography, color, background, padding, border radius and distance from the edge.
No. The divider moves on its own while they scroll. Dragging is optional.
Yes. Set Divider Starts At to a low number and Divider Ends At to a high one, and the before image takes over instead.
Yes. It follows the scroll on phones too, and in the left to right layout visitors can also drag the divider sideways without stopping the page from scrolling.
Image Comparison in the free plugin is moved by the visitor. Scroll Image Comparison moves by itself with the page scroll, and can also be dragged.
Check the troubleshooting guide, or contact support with the page address and what you expected to happen.
Troubleshooting guideYearly and lifetime plans. Use this code at checkout:
14-day money-back guarantee. Ends Monday 30 November at 23:59.