Have you ever wished you knew how to display text above an image with Elementor ?

In this new tutorial, we will show you how to do it.

If you have no idea what we want to talk about today, we invite you to watch the following video:

Then let's go back to why we are here.

To complete this tutorial, you will need the Pro version of Elementor, because we will be using custom CSS code which is only supported by this version ofElementor.

Also discover our guide on: How to create an image gallery with Elementor

Let's create a new section with a 3 column structure, then in the panel, let's define the Height on Min Height, And then Minimum height let's click on VH and set the slider to 100.

Let's select the middle column, and in the tab Style, in the section Background let's click on Classic for the Background type, then select a dark color.

Let's put in this column the Internal Section Widget. The Internal Section widget is by default configured with 2 columns, let's delete one of them. Let's configure the rest in the panel by modifying its Height on Min Height and Minimum height let's set the cursor to 400.

Read also: Elementor: How to Zoom a Profile Card

Then, on Vertical Alignment select Environment.

Then drop the Title widget in the inner section let's enter as Title Photograph, and on Alignment, let's Choose Center.

In the tab Style let's modify the color of the Title so that it is visible if it is not,

Let's drop a Text Editor widget below the Title widget. Then, in the tab Style, on Alignment choose Center. Let's also change the color of the text so that it is visible.

See also: Elementor: How to add a divider to create a section

Let's select the middle column and in its tab Style, reset the background color and load an image, then Position select Centered Centered, Repeat on Non-Repeat, Cover on Select.

In the section border let's modify all border radii out of 12. In box shadow, set the slider to 0 for Horizontal in 0 for Vertical, to 40 on Blur, to -10 on broadcast. You should see a beautiful shadow effect under your image.

Public chat Background overlay, select Classic for the Background type and color choose one black color, on Opacity, let's set the slider to 0.55

In the tab Advanced, let's enter 20 for all Margins.

Let's select our Internal section and go to its tab Advanced in the Custom CSS section copy and paste the following code snippet:

/*Afficher ou masquer un contenu au survol*/
selector{
    opacity: 0;
    transition: 0.5s ease-in-out;
}
selector:hover{
    opacity: 1;
}

(If you don't have this section then you don't have the Pro version, if you want to continue you need to upgrade your version).

Let's once again select the middle column of our section, In its tab Style, and in the section Background overlay, check that we are on the tab NORMAL, let's lower Opacity à 0.

Then click on the tab OVERVIEW, Then on Classic for the background type and color, select a dark color, then theOpacity on 0.55, and for Transition Duration let's set the slider to 0.5.

Here is the final result of our manipulation.

Let's duplicate our column 2 times and delete the other 2 empty columns. All that remains is to change the background image as well as the contents text editors for the 2 new columns.

Preview your work on Tablet and Smartphone to see how it looks. Then save or update it.

So. You have just displayed a text above an image with the Page Builder Elementor.

Get Elementor Pro Now!

Conclusion

So ! That's it for this article that shows you how to display text above an image. If you have any concerns about how to get there let us know within Comments.

However, you can also consult our resources, if you need more elements to carry out your projects of creation of Internet sites, by consulting our guide on the WordPress blog creation or the one on Divi: the best WordPress theme of all time.

But meanwhile, share this article on your different social networks.

...