Written by: Madeline B. Last updated: 30 Sep., 2025 |
The comparison slider section in B12 lets you display two images side by side with a draggable slider — perfect for before-and-after examples or product improvements. This interactive element helps you showcase visual transformations or comparisons clearly and professionally.
Follow the steps below to add a comparison slider to any page on your website.
Adding a comparison slider
1. In the left sidebar, select 
Website
Pages
2. Select the page where you want to add the comparison slider, then click Add section.
3. Under Section categories, select About.
4. In the section layout selection tab, scroll down and choose the very last layout, then click Continue.
7. Add your images in the left sidebar. Upload your Before and After images by clicking Replace.
8. Be sure to click Publish in the upper right-hand corner of your editor to ensure your edits are live.