Create a before/after comparison

Follow these steps

1. 1

   Add both images

   PropertiesBefore (Left)

   Insert Before/After from Elements > Media. Assign a file or gallery image to each side. Removing an incorrect photo clears that side only.

2. 2

   Configure the divider

   PropertiesSlider settings

   Choose horizontal or vertical direction and set the initial position as a percentage. Let readers see both states initially. Adjust divider color and corner radius.

3. 3

   Edit labels

   PropertiesLabels

   Edit the before/after labels and place them over, above, or below the images, or hide them. Hidden visual labels do not remove the need for accessible image descriptions.

4. 4

   Describe each state

   PropertiesAccessibility

   In accessible authoring, describe what each image shows. Explain the changed detail instead of using only “before” and “after.”

5. 5

   Test the comparison

   EditorPreview

   Move the divider to both ends and check orientation, initial position, and labels. Recheck alignment when changing the block’s size.

Related lessons

• Interactive blocks
• Add buttons and links