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.