Image With Zoom
Image With Zoom displays an image with a zoom effect. Use it when visitors benefit from inspecting a picture more closely.
Add and configure Image With Zoom
- Click Add, choose Image With Zoom, and place it in the container.
- Choose Content > Controls > Image.
- Set Image Size, Alt, and Lazy Load.
- Configure Design > Container and Effect.
- 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 > Controls
| Setting | Purpose and options | Behavior |
|---|---|---|
| Image | WordPress media. | Shared |
Shown when Image is set.
| Setting | Purpose and options | Behavior |
|---|---|---|
| Image Size | Registered WordPress or custom image size. | Shared |
| Alt | Enter the alt. | Shared |
| Lazy Load | On/off. | Shared |
Design > Container
| Setting | Purpose and options | Behavior |
|---|---|---|
| Width | Width. | Responsive |
| Borders | borders controls. | See linked controls |
Design > Effect
| Setting | Purpose and options | Behavior |
|---|---|---|
| Zoom Scale | Set zoom scale. Range: 1–5. | Shared |
| Cursor | Default, Zoom-In, Move, Crosshair. | Shared |
Design > Spacing
| Setting | Purpose and options | Behavior |
|---|---|---|
| Spacing | spacing controls. | See linked controls |
Troubleshooting
Zoomed details look blurry
Choose an image with enough resolution for the enlarged view and review Image Size.
The effect is difficult to use on a phone
Test the saved touch interaction. Keep the image and its description useful without relying on the zoom effect.