Blog

Text over image in DIVI

Blog

Text over image in DIVI

Text over image in DIVI

Today, we’re excited to unveil a simple yet powerful hack that can significantly enhance the legibility of text over image in Divi. This handy tutorial is part of our Divi Basics series, designed specifically for those who are just dipping their toes into the vast world of Divi. However, it’s surprising how many users remain unaware of this clever trick, which can truly elevate the readability of text on images.

In this tutorial, we’ll walk you through the steps to implement this hack seamlessly within your Divi projects. Whether you’re a newcomer or a seasoned Divi enthusiast, mastering this technique will undoubtedly add another valuable tool to your design arsenal.

So, let’s dive in and unlock the potential to effortlessly enhance the legibility of your text-over-image elements in Divi.

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, like in the case of ‘Text Over Image In DIVI‘. In addition, we will add some space and center the text to have the same result as this one:

Text over image in Divi

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, especially when dealing with elements like ‘Text Over Image In DIVI

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. 

Text Over Image In DIVI

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.

Text Over Image In DIVI

In conclusion, mastering the art of enhancing text over images in DIVI can truly set your designs apart and elevate the overall user experience. As web designers at Destaca Imagen, we understand the importance of not only delivering visually stunning websites but also ensuring optimal readability and engagement. With our expertise and the right tools at your disposal, such as our meticulously crafted plugins and themes for DIVI, you have the power to create immersive online experiences that captivate and resonate with your audience.

So, whether you’re a seasoned developer or just starting out on your design journey, remember that the devil is in the details, and even a seemingly small tweak like improving text legibility can make a world of difference. Explore the possibilities with Text Over Image In DIVI, and unleash your creativity to craft websites that not only look fantastic but also deliver exceptional user experiences. Let’s elevate your designs to new heights together.

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

About Destaca Imagen

CHEMA & ANTO

We are brothers. As a designer and developer, we have decided have to join forces  to create plugins and themes for WordPress.

 

¡Apuntate a nuestra lista!

Los mejores trucos y tutoriales para Divi y WordPress en tu bandeja de entrada

Join our list!

The best tricks and tutorials about Divi in your inbox

On our shop

En nuestra tienda

Suscribe

The best tricks and tutorials about Divi in your inbox

Apúntate a nuestra lista

Los mejores trucos y tutoriales para Divi en tu email

También te podría gustar:

You may also like

Divi Layouts – What are they? How to use them?

Divi Layouts – What are they? How to use them?

Divi layouts are pre-designed pages or page fragments that can be imported directly into the Divi visual builder. These templates allow users to create professional-looking websites quickly and efficiently, without requiring advanced design or programming knowledge....

Unlocking the Potential: Why You Need a Divi Child Theme

Unlocking the Potential: Why You Need a Divi Child Theme

In the fast-paced world of online presence, standing out is key! At Destaca, we understand the importance of making a lasting impression. That's why we're excited to bring you Divi Child Themes that truly empower your website - dive in with us to discover why having a...

Full Height Section in DIVI

Full Height Section in DIVI

How do I create a section that fills the total height of the screen (full screen) in DIVI? In this post we are going to show you how to create the sections that occupy the entire height of the screen. This is ideal for creating more visual webs, powerful call to...

Responsive Font in DIVI

Responsive Font in DIVI

Responsive font in DIVI? Is that even possible? YES!!!! What is more, you can do it with any font type! So today we would like to tell you a bit about the Divi responsive font. We will show you how to adapt the font size to your screen, no matter if you look at the...

How to change the color of menu’s links in Divi

How to change the color of menu’s links in Divi

Divi is a popular WordPress theme that offers a powerful page builder and a wide range of customization options. However, it does have its limitations, and sometimes we need to add CSS code. While we can edit various elements such as link colors, font sizes, letter...

How to change the order of the Divi’s columns in mobile?

How to change the order of the Divi’s columns in mobile?

Divi is a great builder with a lot of options available that will allow us to work on any web project. But sometimes it is necessary to use some CSS if we want to get the best result. In the example of this post we are going to see how to change the Divi column order...

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *

Get 5€ Off now!

Register now and get free coupon code.

 Register Now
Select currency
Euro