Overlaying elements on your Image elements can be a great way of showcasing your content. The Image Element is a containing element, meaning that you can drag other elements on top of this element. This works similarly to the Container element.

To create an overlay, simply add an Image element into your page, then drag a Heading element, Button, or Text element on top of the Image.

Note: Content you drop onto an Image element is overlaid on the image, so choose the image first. If the Image element has no image, the overlaid content can overlap the content below it on the live page, even though it looks fine in the editor.

The layered element vertical alignment option of the image element allows you to determine where the content in your image element sits. Choose from top, middle or bottom.

Note: the Text Overlay field that previously appeared on the Image element has been deprecated. It now only appears on Images that previously used this feature. As an alternative, the Text element (and others) can be dragged directly onto the Image Element.