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.