Image Comparison

Image Comparison presents before and after images with a movable separator. Use it to compare two views of the same subject.

Add and configure Image Comparison

1. Click Add, choose Image Comparison, and place it in the container.
2. Choose the Before and After images under Content > Content.
3. Configure Labels so visitors can identify the two views.
4. Set Design > Settings, Separator, and Labels.
5. Save your changes.

This element has no children; use its own controls.

Controls

Responsive varies by breakpoint; Hover has a hover value; Shared applies across both. Linked controls have their own reference. In conditions, = means “is” and ≠ means “is not.”

Content > Content

Setting	Purpose and options	Behavior
Before	WordPress media.	Shared
After	WordPress media.	Shared
Labels > Before	Enter the before.	Shared
Labels > After	Enter the after.	Shared

Design > Settings

Setting	Purpose and options	Behavior
Initial Position	Set initial position. Range: 0–1.	Shared
Start On Hover	On/off.	Shared
Auto Animation	On/off.	Shared
Animation Speed	Set animation speed. Range: 1–10. When: Auto Animation is set.	Shared
Vertical Mode	On/off.	Shared

Design > Separator

Setting	Purpose and options	Behavior
Hide	On/off.	Shared
Color	Color or supported fill. When: Hide is unset.	Shared
Width	Width. When: Hide is unset.	Shared

Design > Labels

Setting	Purpose and options	Behavior
Hide	On/off.	Shared
Position	Start, Center, End. When: Hide is unset.	Shared
Background	Color or supported fill. When: Hide is unset.	Shared
Typography	typography controls.	See linked controls
Padding	spacing controls.	See linked controls

Design > Spacing

Setting	Purpose and options	Behavior
Spacing	spacing controls.	See linked controls

Troubleshooting