You can use the new functionality for creating composite layouts in the blocks with standalone images. Thanks to this feature, you can add an extra image to an existing one. In other words, the composite image feature lets you enrich a standard illustration with additional elements, an interesting background, and more.
Note: This is a beta feature. We’d love to hear your feedback as we continue refining it.
Here’s how it works:
- In the editor, select the image you want to work with and click it to open its controls.
- On the control pane, click Create layout to add a widget to the image. (If you hover over this icon, you’ll see a tooltip explaining how the feature works.)
- Customize the widget to your liking.
Tip: When you add a widget to a block, all images in that block switch to absolute positioning. This means you can move them freely, adjust their width, height, focal point, and other properties.
Editing the image widget
To access the image widget settings, click on it. You’ll see a settings panel and resizing options.
To insert a new image into the widget, use the same steps as for any other image:
- Click the Upload Image icon.
- Choose a file from your computer or from the Image library.
Cropping is also supported in the image widget, as described in more detail in our Customizing your images article.
In the media settings, you can:
- Replace the image in the widget
- Add alt text
- Set a click action
To reorganize the image in relation to other elements in the block, click the Reorder icon. You can control whether your widget image overlaps the base image or sits in the background.
Note: If you choose Move backward, your main image must have a transparent background for your widget to remain visible.
To delete the widget from the canvas, click the Delete icon.
Moving and resizing the widget
To move the widget, use drag-and-drop by grabbing the central white dot on the widget and dragging it to the desired position within the main image.
To resize it, grab the white markers on the widget borders and drag to adjust the size.
Adding a new layer
To start layering images:
- Add a block with an image.
- Click the image to call out its control pane.
- 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, as described in the Stretching images section).
Selecting and editing layers
If several layers overlap, the layer selector ensures you can “reach” background images without disrupting the top ones.
- Click an image to open its control pane.
- Use the Layer selector to choose which image you want to edit. The selected layer will be highlighted with a lighter overlay.
- Once selected, drag the image around the canvas to reposition it within the container.
When you move a layer, red vertical and horizontal lines appear to help align it with other images or the composite group boundaries.
- Red lines indicate alignment with other images.
- Blue lines show the edges of the group container.
If you release the image while blue lines are visible, it will automatically snap to the group edges.
Here’s the video of the process:
Tip: When working with 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 (X or Y axis).
This makes it easier to maintain alignment and consistency when positioning elements manually.
Managing layer order
For a simplified layer control, you have two straightforward options on the main control panel:
- Move forward brings the image one layer up.
- Move backward sends the image one layer down.
These actions apply instantly without closing the control panel.
- If the image is already at the top layer, Move forward is disabled.
- If it’s at the bottom, Move backward is disabled.
This keeps the focus on quick, intuitive editing.
Duplicating layers
You can duplicate any image layer by clicking the Duplicate button on the control pane. The new copy will appear directly on top of the original, ready for further editing or repositioning.
Stretching images
The Stretch feature helps you make an image fill the entire container automatically.
The first image (Layer 1) in a composite group is stretched by default. When you add a new image (Layer 2 or higher), you’ll see a Stretch icon (⇔) in the top-right corner of the image.
Here’s how to use it:
- Hover over the icon to see the tooltip Stretch.
- Click it and the image will stretch to the group’s full width and height.
To unstretch an image, click the same icon again (the tooltip will say Unstretch).
Note: While stretched, you can’t resize or move the image manually. You can stretch or unstretch multiple images in the same group. If an image is smaller than 67px, the Stretch button automatically shifts position so it remains visible.
We hope this guide has helped you. If you have any questions left, please contact our Support Team.
Ready to use your new knowledge? – Edit your site!