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
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.
Last updated
Was this helpful?