The Porto Image Comparison element allows you to visually compare two images using an interactive slider. It is ideal for showcasing design changes, photo edits, renovations, or any before-and-after transformation.
This element is fully supported in both Elementor and WPBakery Page Builder.
How It Works
- The Before Image is shown on one side of the slider
- The After Image is revealed as the handle is moved
- Users can interact with the slider using drag, click, or hover, depending on configuration
Content Options
Images
| Option | Description |
|---|---|
| Before Image | Image displayed before interaction |
| After Image | Image revealed by moving the handle |
Overlay Settings
| Option | Description |
|---|---|
| Hide Overlay | Removes the overlay layer completely |
| Overlay Color | Color applied over images (hidden when Hide Overlay is enabled) |
Handle Settings
| Option | Description |
|---|---|
| Handle Orientation | Horizontal or vertical comparison direction |
| Handle Offset | Default starting position of the handle |
| Handle Movement Control | Interaction behavior (Drag & Click, Drag Only, Hover) |
| Icon Class | Icon displayed on the handle (e.g. Font Awesome class) |
Style Options (Style Tab)
The following options control the appearance of the comparison handle.
| Option | Description |
|---|---|
| Handle Color | Color of the handle line and icon |
| Handle Background Color | Background color behind the handle |
| Handle Size | Overall size of the handle |
| Handle Thickness | Thickness of the dividing line |
| Handle Radius | Border radius of the handle for rounded styles |
Best Practices
- Use high-resolution images with the same dimensions for best results
- Choose Hover movement control for modern, interactive designs
- Disable overlay when image clarity is critical
- Keep handle size proportional to image dimensions
