Overlapped Images
Overlapped Images displays several images in an overlapping arrangement. Use it for a compact visual group such as portraits or a project collage.
Add and configure Overlapped Images
- Click Add, choose Overlapped Images, and place it in the container.
- Populate Content > Content > Images and review Lazy Load.
- Configure Design > Size, Spacing, and Misc.
- Check the image order and overlap at smaller widths.
- 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 |
|---|---|---|
| Images | Add, edit, remove, and reorder images. | Shared |
| Images > Image | WordPress media. | Shared |
| Images > Image Size | Registered WordPress or custom image size. | Shared |
| Images > Alt | Enter the alt. | Shared |
| Images > Width | Width. | Responsive |
| Images > Height | Height. | Responsive |
| Images > Position | Top Left, Top Right, Bottom Left, Bottom Right, Custom. | Shared |
| Images > Custom Position | Set custom position. When: Position = Custom. | Responsive |
| Lazy Load | On/off. | Shared |
Design > Size
| Setting | Purpose and options | Behavior |
|---|---|---|
| Width | Width. | Responsive |
| Height | Height. | Responsive |
Design > Spacing
| Setting | Purpose and options | Behavior |
|---|---|---|
| Spacing | spacing controls. | See linked controls |
Design > Misc
| Setting | Purpose and options | Behavior |
|---|---|---|
| Allow Overflow | On/off. | Shared |
| Default Image Width | Default image width and unit. | Shared |
Troubleshooting
The overlap hides a face or subject
Review image order, size, and overlap spacing, and choose source images with suitable framing.
The group is too wide on a phone
Reduce image size or adjust spacing at the affected breakpoint.