Elementor How to Add Text Over Image

There are numerous reasons why brands add text over an image. It might be because they want to ensure that no one else can use an image that they have rights to. Or it could be because they want to add details to the image to showcase specific features.

Or it might be that you want to just have some fun with the images and make them more unique.

There are several options when it comes to adding text over images. For one option you can have the image edited inside another program, like Paint, Paint.net, or Canva. This can be a great option because you can then use another program like RIOT to optimize the content so it loads more quickly.

However, there are other options, those which are included on Elementor, which means that if you have the image already installed on the website, you can make a quick change and get the text on. Or you can do it natively in Elementor for ease.

So the first option is to open the page within the Elementor edit screen. Then you can search for the drag-and-drop image widget and place it into the column. Choose your image from the media library or upload a new image.

Then you need to find, drag and drop a heading widget below the image on the page. You should then edit the text with ease. Within the advanced tab, you can unlink the margin properties and apply a negative top margin (i.e. -20), and then you can set the Z Index to a number greater than the image.

Another option has you drop the Heading Widget to any column or section and then edit the text. From the column style tab, you can choose a background. Then you can use the image option, selecting an option from the library or uploading a new image.

Once uploaded, you can set the background-size to contain or cover. In the advanced tab, unlink the padding properties and apply top and bottom padding. This will allow the image to retain the shape for the table/mobile users.