Today we want to share with you an interesting hack to improve the legibility of the images that have a text over it in Divi. This tutorial is in our  Divi Basics and has been written for users that have just begun in Divi. Nevertheless we can tell you that there are a lot of people that do not know this hack in order to improve its legibility.

There are many ways of adding text to our images but we are going to start with the most simple one. We would create a section or row with an image in the background and we would add a text module inside it. In addition we will add some space and we will center the text to have the same result as this one:

The most important part here is to add the same space both up and down so the title stays centered and also some space on each side to avoid the text being close to the edges.

Even if you align the text with the center we recommend you to add some space to sides to avoid the text being too close to the edges on mobile devices.

Add an overlay layer to our image

As I showed you in our previous image, the text is not quite legible, right? This is not normal and this is why I am going to show you how to fix it! 

Adding an overlay layer

Divi allows us to add several background: image, video, solids, gradient, etc. Today we are going to use the gradient so we can add an extra layer that will grant our text to be more legible. So the gradient appears on top of the image, don’t forget to enable the option “Place Gradient Above Background” as it is shown in the image. Otherwise you won’t see any changes. 

As we have seen in the previous example the gradient that we have used is pretty subtle. In both sides of the gradient we’ve used the black colour with a 20% opacity,  this is why the result of the image was a bit darker than the other one. We can also use different colours or just adjust the intensity of any of these.

What do you think about this hack? Interesting? Basic? Leave us your opinion below. 🙂