Elementor How To Add Text Over Image Easily
Get Premium

Elementor How To Add Text Over Image Easily

Element.How also offers premium tutorials! Check them here:

Elementor How To Add Text Over Image Easily

Table of Contents

Adding text over an image is an important way to make the the website more visually appealing. In this blog we are going to learn how to add text over image in Elementor.

Now let's see how to easily implement text over image in Elementor in a matter of minutes.

Add a new section in the page.

How To Add Text Over Image in Elementor

Elementor How To Add Text Over Image Easily 1

Elementor How To Add Text Over Image Easily 2

  1. Click on the Add New Section in the page.
  2. Next, select the simple plain structure of the section which is the first among the options. You can select select other structures as well. We are choosing this for the sake of simplicity.
  3. After that click on the Edit Section icon in the section which brings up the edit section pane to the left.

Insert the image to the background of the section.

Elementor How To Add Text Over Image Easily 3

  1. Go to the Style tab of the Edit Section pane and expand the "Background" dropdown.
  2. Select the Background Type as "Classic".
  3. Now, click on the "+" icon in the image attribute to add image to the section.

Drag and drop an image to the Upload Files section.

Elementor How To Add Text Over Image Easily 4

  1. Click on the "Upload Files" tab in the "Insert Media" pop up .
  2. Then drag and drop the image file over the pop up.

How To Add Text Over Image in Elementor

3.  Click the uploaded image from the "Media Library.

4.  After that, click on the "Insert Media" button to insert the image to the section.

Elementor How To Add Text Over Image Easily 5

Adjust the image positioning.

To do this, we need open up the Edit Section panel for the section.

How To Add Text Over Image in Elementor

  1. Click on the Style tab and open the Background drop down.
  2. Change the Position attribute to "Center Center", Repeat to "No-Repeat" and Size to "Cover".

Add a heading in the section.

Elementor How To Add Text Over Image Easily 6

After clicking the "+" symbol, the add sections panel will appear to the left. From there you can add any section you want overlay over the image.

Elementor How To Add Text Over Image Easily 7

Now drag and drop the "Heading" to the section. A text section will appear over the image.

Write your desired text on the title attribute.

Elementor How To Add Text Over Image Easily 8

Under the content tab, write your text in the title attribute.

Elementor How To Add Text Over Image Easily 9

After this, set the Alignment to the "Center" so that the text is centered at the middle of the section.

How To Add Text Over Image in Elementor

Conclusion

Alright! Now you know how to add text over image in Elementor.

Elementor How To Add Text Over Image Easily

Element.how also provides premium tutorials showing awesome advanced designs, check them out here.

Looking for something else? Search across 2927 Elements right here:

And get exclusive Elementor related discounts here

Checkout the Elementor Addon Finder directly

11 Responses

  2. When minimizing or increasing the browser window size, this text overlay text will not remain "locked" with the image unless the image is set to "default" position under the style menu. If the image is set to "center center" or any other positon setting, and you drag to minimize or increase the size the browser window, this text will slip out of the overlayed positon it was intended to be in. Can this be fixed or there something Elementor rookie that I'm missing?

  4. OK this is when you're using an image as a background. I'm trying to add text to an image. I can only put it at the top or at the bottom of the image. I want it in the middle left.

    1. Consider adding your text in the image with photoshop (or similar software) , if adding your image as a background (in a section, column, or inner section) is not an option!

Leave a Reply