The Swipe tool is an overlaid slider that allows visitors to make comparisons between two images, usually a before-and-after version of the same setting, with the two images superimposed.

A slider allows users to see more or less of one image or the other. This tool provides and elegant solution to help users visualise planned changes or review historical progress.

🖼️ Examples

Here's some examples of how you can configure the Swipe tool:

Before: Before After: After

⚙️Settings

Settings you can configure in the Swipe tool:

Basic

  • Image On - sets an image file for the image on the left/top
  • Label As - sets a label that appears on the image (i.e. ‘before’ or ‘after’)
  • Alternative Description - sets alt text to be used to assist people with screen readers
  • Image Two - sets an image file for the image on the right/bottom
  • Label As - sets a label that appears on the image (i.e. ‘before’ or ‘after’)
  • Alternative Description - sets alt text to be used to assist people with screen readers

Display

  • Swiper Position - sets how much of the first image is visible by default. The default is set to 50%.
  • Comparison Orientation - sets whether the tool will be compared left to right or top to bottom
  • Size - sets the display size of the tool
    • Small
    • Medium
    • Large
    • Auto - expands to fit the entire content area size
  • Position- sets the alignment of the tool
  • Visual Diff Border - changes the appearance of the border between images.

Advanced

  • Block Title - sets an optional title for the block .
  • Block Description - sets an optional description for the Block that will appear below the Block Title.
  • Block Description Position - selects the description to appear at the top or bottom of the image.

🎯 Key Actions

Key actions you can perform in the Swipe tool:

  • Under the Basic tab, select the Choose Image field under Image One.
  • The File Manager will open, from which you can upload an image or choose an existing image.
  • When you have selected your image, repeat the same step under Image Two.
  • When both image fields are filled, select the blue Add button.
  • You can swap images any time by navigating to the desired image under the Basic tab.
  • Left click the image and select Clear.
  • This will return the field to a blank Choose Image field, from which you can select or upload a new image.
  • When complete, select the blue Add button.