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.