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.

Share:

Share on facebook
Share on twitter
Share on linkedin
Comments