Skip to content
Image comparison
Section overview
The image comparison section showcases before/after images with an interactive slider that allows customers to compare differences between two images.
Common use cases
- Demonstrating product transformations or results
- Showcasing renovation or restoration projects
- Displaying different versions or states of a product
- Highlighting effects of treatments, services, or product usage
Usage tips
- Use high-quality images with the same dimensions for best results
- Choose images that have a clear visual difference to make the comparison meaningful
- Consider adding descriptive labels for each image to clarify what viewers are seeing
- For mobile responsiveness, ensure the comparison is still effective on smaller screens
Section settings
| Setting | Description |
|---|---|
| Before image | The image to display in the "before" state |
| Before label | Text label for the "before" image (default: "Before") |
| After image | The image to display in the "after" state |
| After label | Text label for the "after" image (default: "After") |
| Heading | Section title that appears above the comparison |
| Content | Rich text description to provide context for the comparison |
| Button label | Text to display on the optional call-to-action button |
| Button url | Destination URL when the button is clicked |
| Top spacing | Amount of space above the section (0-300px) |
| Bottom spacing | Amount of space below the section (0-300px) |
| Color scheme | Background and text color combination for the section |
| Border color | Color style for section borders |
| Button color | Style and color variant for the call-to-action button |
| Border position | Where borders appear around the section (none, top, bottom, or both) |
| Aspect ratio | Proportional relationship between width and height (1:1, 16:9, or 4:3) |
| Text alignment | Horizontal alignment of text content (left, center, or right) |
| Enable margin | Toggle horizontal margin on or off |
| Enable split | Toggle layout between stacked and side-by-side arrangement |
| Visibility | Control which device types can view the section (all, mobile only, or desktop only) |
Block settings
This section does not contain any blocks.