Widgets: Before & After

Widget Categories: Media

The Before & After widget enables you to show two images, side by side, for an eye-catching and engaging visual comparison. The widget includes a customizable slider to move between the two images.

For information on adding widgets, see Add Widgets.

Tip

Fore more information on widgets and the widgets library, see Widgets: Library and Overview.

Content Editor

To access the content editor, right click the widget and select Edit Content. Click the element to open the floating menu, then click the option for the content editor.

  1. Click + Image to add the before and after images.

  2. (Optional) Customize the labels for the images. To hide the labels, click the eye (orange eye icon) icon.

  3. Type Alt text for the images. Type your own alt text.

Design Editor

To access the design editor, right-click the element, and click Edit Design. Click the element to open the floating menu, then click the option to edit design.

  1. To customize the images and slider, click Images & Slider.

  2. 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 Screen Sizes and Devices.

For information about design options that are not specific to this widget (for example, layout, style, or spacing), see Widget Design.

Examples

Example of how side by side images display in the before and after widget
Example of how side by side images display in the before and after widget