How to set up the image comparison section

The image comparison section allows customers to interactively compare two images using a smooth before-and-after slider.

Section settings

Heading: Set a title for this section. This is optional.

Subheading: Set a subtitle for this section. This is optional.

Heading alignment: Select the alignment for the heading and subheading. Options: Left, Center, Right.

Layout

Section width: Adjust whether this section should span the full width of the page (100%) or be contained within a limited layout. Applies on desktop. On mobile, the section spans the entire width of the screen.

Section inner max width (px): Set the maximum width of the content inside this section in pixels.

Section left/right gutter: Adjust the left and right spacing of the section relative to the viewport edge on narrow screens.

Vertical inner spacing: Adjust the spacing between the content and the top/bottom edges of this section in pixels.

Vertical outer spacing: Adjust the space between this section and the sections above and below it in pixels.

Image comparison area border radius: Adjust the roundness of the corners for the image comparison area.

Before image: Select or upload an image for the “before” state. You can also browse free images via the Explore free images link.

After image: Select or upload an image for the “after” state. You can also browse free images via the Explore free images link.

Orientation: Choose the orientation for the image comparison. Options: Horizontal, Vertical.

Styles

Section heading color: Choose the color of the section heading.

Section subheading color: Choose the color of the section subheading.

Section background color: Choose the background color for the image comparison section.

Divider color: Choose the color of the dividing line between the images.

Divider thumb background color: Choose the background color of the divider thumb.

Divider thumb icon color: Choose the color of the icon inside the divider thumb.