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.

Last updated

Was this helpful?