Add an image compare

Style an image compare

Configuration options

Telling a visual story with a 'before' and 'after' juxtaposition? Image compare sliders offer a slick and fun interaction to bring it to life.

🌅🌌 Add an image compare

There are two different ways you can add an image comparison: as an element or as a section.

As an element:

  • From the top menu bar, click Add Menu (Shortcut: M)

  • Search for and select Image Compare

  • Click and drag the element onto your canvas with your preferred size

As a Section

  • Open the Add menu (Shortcut: M)

  • Select Section

  • Choose Image Compare

  • Click on Add section here on your canvas

🎨 Styling an image compare

Select the image compare element on your canvas to reveal the options in the style panel on the right.

  • Spacing top: Add padding to the top of the Image Compare section in pixels or % to keep spacing between sections

  • Spacing bottom: Add padding to the bottom of the Image Compare section in pixels or % to keep spacing between sections

  • Width: The width of an Image Compare section can't be altered, it'll always be set to cover the 100%

  • Height: Set the height of the Image Compare section in Pixels, % or set it to Auto so that it grows as you add content to it

  • Min H: Sets the minimum amount of height pixels an Image Compare section can be. A red stippled horizontal line inside your section will reflect the minimum height

  • Clip content: Toggle to hide the content that goes beyond the section's edges

  • Resize to fill vertically: Click to set the section's height to 100%

  • Background

    • LE: Change the left-side image

    • RI: Change the right-side image

    • LI: Set the color of the middle line dividing the images

  • Text: Set the handle (or slider) color and size in pixels

  • Margin: Add margin to the handle

  • Padding: Add padding to the handle

  • Border: Set a border color, opacity, and line weight to the handle's container

  • Border Radius: Curve the radius of the border

  • Effects: Add different types of shadows or blur effects (learn more here)

  • Transform: Set the size of the middle line diving the images

  • Icons: Replace the arrows with an icon or an image.

⚙️ Configuration options

Double-clicking on the image compare element on your canvas opens the configuration options. From here, you can hide the handles, and animate the split line.

Parameter

Options

Hide handles

Remove the icon/shapes indicating handles.

Animate split line

Animate the comparison line in horizontal directions, and set an animation duration.

?FAQs

Can I add more than one image on each side?
This is not yet possible. Feel free to add or upvote this feature request on our product roadmap.

Did this answer your question?