The Before/After Slider is perfect for comparing two images side by side and highlighting the difference with an interactive slider. Here's how to do it:
Step 1: Add a new section
Add an empty section to your page where you want to place the slider. To do this, click the blue + icon, open the "Blueprints" tab on the left, and insert the empty section.
Step 2: Select the Before/After Slider
Click the + icon in the empty section, search for "Before / After" in the search bar, and insert the element.
Step 3: Insert images
Upload the two images you want to compare.
📌 Please note: Make sure both images were taken from the same distance and angle and are the same size to achieve a harmonious effect.
Step 4: Configure the slider
Now you can further customize your slider.
Instead of the interactive slider, you can also enable "Split view" if you simply want the images to be displayed side by side for direct comparison.
You can add labels to indicate "Before" and "After", for example.
Optionally, you can add a gray overlay to an image to further emphasize the before-and-after effect.
Step 5: Customize the Design
Finally, you can make adjustments to the design.
You can customize the slider icon by specifying the icon, size, color, and radius.
In addition, the divider line can be customized, for example in terms of width and color.
You can also choose whether the comparison should be displayed horizontally or vertically, and specify whether the slider should be moved by dragging or hovering.
You also have the option to set the images to full screen width and height, as well as add rounded corners and shadows.
💡Do you have any feedback about this article? Please let us know through our live chat or at support@onepage.io, so we may keep it up to date. Thank you! 🙂