The Before & After enables you to show two images, side by side, for an eye-catching and engaging visual comparison. The includes a customizable slider to move between the two images.
To add the :
- In the left panel, click Widgets.
- Click and drag the Before & After into your site.
To learn more about adding s to your site, see Add Widgets.
Content Editor
To access the content editor:
- Right-click the , and click Edit Content.
- Click + Image to add the before and after images.
- Type labels for the images. To hide the labels, click the eye (
) icon. - Type Alt text for the images. You can either type your own alt text or click the Sparkle (
) icon to use the AI Assistant to generate alt text. Repeat for both the before and after images. The Sparkle icon will be disabled if an image is not selected.
Note
You must be on a Team plan or higher and have AI permissions to use the AI Assistant.
Alt text generated by the AI Assistant is in the same language as the page’s current language.
Design Editor
To access the design editor:
- Right-click the , and click Edit Design.
- To customize the images and slider, click Images & Slider.
- To customize the label style and text, click Labels.
Make sure the design settings you define are correct per device. Settings such as spacing, image size and more are defined per device. For more information, see Edit by Device.
For information about design options that are not specific to this (for example, layout, style, or spacing), see Widget Design.
Examples
