You can create layered image layouts within blocks that have standalone images. This lets you add an extra image on top of an existing one, enriching a standard illustration with additional elements, an interesting background, and more.
Note: this is a beta feature. We welcome feedback while we continue to refine it.
Here’s how it works:
- In the editor, click the image you want to work with to open its controls.
- In the control panel, click the Create layout icon to add a widget to the image (hover over the icon for a short explanation of the feature).
- Customise the widget as needed.
Tip: once you add a widget to a block, all images in that block switch to absolute positioning – meaning you can move them freely and adjust width, height, focal point and other properties.
Editing the image widget
Click the widget to access its settings panel and size controls.
To insert a new image into the widget, use the same steps as for other images: click the Upload Image icon, then choose a file from your computer or the image library.
Cropping is also supported in the image widget.
In the media settings you can:
- Replace the image in the widget
- Add alt text
- Set a click action
To change how the widget’s image sits relative to other elements in the block, click Reorder, which controls whether the widget’s image sits above the base image or behind it.
Note: if you choose Move backward, your main image needs a transparent background for the widget to be visible.
To remove the widget from the canvas, click the Delete icon.
Moving and resizing the widget
To move the widget, drag it by the white dot in its centre to the desired position within the main image. To resize it, drag the white handles on its edges.
Adding a new layer
- Add a Custom block with an image.
- Click the image to activate its control panel.
- Click Create layout to add a new image container on top of the existing one.
- You can now upload a new image into the container and move or resize it independently (or stretch it – see below).
Selecting and editing layers
When several layers overlap, the layer selector helps you reach images underneath without disturbing the ones on top.
- Click an image to open its control panel.
- Use the Layer selector to choose which image you want to edit – the selected layer is highlighted.
- Once selected, drag it around the canvas to position it within the container.
As you move a layer, red vertical and horizontal guide lines appear to help you align it with other images or the group’s edges:
- Red lines show alignment with other images.
- Blue lines show the edges of the group container.
If you release the image while the blue lines are showing, it snaps automatically to the group’s edges.
Tip: for complex compositions, it’s often useful to move an element strictly along one axis – hold Shift while dragging an image to move it only horizontally or vertically.
Managing layer order
For easier layer management, the control panel offers two options: Move forward (moves the image up one layer) and Move backward (moves it down one layer). These apply instantly without closing the panel. Move forward is disabled if the image is already the top layer; Move backward is disabled if it’s already the bottom layer.
Duplicating layers
Duplicate an image layer by clicking Duplicate in the control panel – the new copy is placed directly on top of the original, ready to edit or move.
Stretching images
The Stretch feature lets an image automatically fill the entire container. The first image (Layer 1) in a layered group is stretched by default. When you add a new image (Layer 2 or higher), a Stretch icon appears in its top-right corner.
- Hover over the icon to see the Stretch label.
- Click it, and the image stretches to fill the group’s full width and height.
To undo stretching, click the same icon again (now labelled Unstretch).
Note: while stretched, an image can’t be resized or moved manually. You can stretch or unstretch several images within the same group. If an image is smaller than 67px, the Stretch button automatically repositions itself to stay visible.