How To Add Text Over Image in Elementor

Adding text over images with Elementor can be accomplished in several ways. In this document you will learn two of the most common methods to accomplish this.

Using Negative Margin on the Text

1. Drag and drop an Image Widget into a column and select your image from the media library
2. Drag and drop a Heading Widget below the image and edit your text
3. In the Advanced Tab, unlink the margin properties and apply a negative top margin (example: -40%)
4. Set the Z-Index to a number greater than the image (example: 5)

Using the Text Over a Background Image

1. Drag and drop a Heading Widget to a column or section and edit the text
2. From the column Style Tab > Background use the image option. Select an image from your library or upload a new image
3. Set the background size to Contain, or Cover (some cropping of the image will occur when using this option)
4. In the Advanced Tab, unlink the padding properties and apply a top and bottom padding (example 40%). This will allow the image to retain its shape for tablet and mobile responsiveness
5. Add margin to increase the gap between the background image and the container