Divi text over an image

Nov 20, 2020 | Divi Resources

How to display text over an image in Divi

In times of modern web design trends, there are multiple times when a designer needs to add fancy texts. And a text over an image is one of them. However, most of the time, users find it very confusing, which requires them to go through multiple steps to accomplish this design need. Therefore, in this blog post, I am going to share with you some simple steps to display text over an image. Plus, I’ll also share how you can add a background color to it.

So, without any delay, let’s see how we can display text over an image.

Divi Text Over an Image on hover


Step 1: Insert text module

To start creating the text over an image, we need to insert the Text module in the builder.

Insert text module

After inserting the module, add the text you want to display over an image.

Add your text over image text

Step 2: Style text

Now, once added the text, move to the Design tab, and inside Text settings, style the text as required.

Text module text styling

For this tutorial, I’ve made the following customizations,

Text Font: Acme

Text Font Weight: Bold

Color: #0c71c3

Text Size: 42px

Text styling values for text over an image

Text Letter Spacing: 4px

Line Height: 1.8em

Shadow: Look in the screenshot

Text Shadow Horizontal Length: 0em

Text Shadow Vertical Length: 0.04em

Letter spacing and other text customization values

The text will look same as the below screenshot after applying the customizations.

Creating text over an image

Step 3: Assign CSS ID

Once you made the text customizations, move to the Advanced tab, and in the CSS ID & Classes.

Advanced tab of the text module for text over an image

Here, in the CSS Class, input clip-image-hover CSS class name, and Save Changes

Assigning class name for text over an image on hover

Step 4: Add CSS

Now, click three dots at the center and then settings (⚙️) icon to open the page’s settings.

Advanced Settings of a Divi page

Then, move to the Advanced tab of the page settings, and the Custom CSS, input the below CSS.

Page's advanced tab

Step 5: Input image URL

Upon inserting the CSS, make sure you input your image URL in the CSS, which you want to be seen when users hover over the text.

Text over an image URL insertion

Step 6: Adjust width of the Text

After image URL insertion, we need to adjust the width of the text. So, when users hover over the text, it doesn’t show below image from a distance. To adjust the width of the text, you need to go to the Design tab of the module >> Sizing >> Width >> and adjust text width according to the requirement.

Text over an image on hover

That’s it; we’ve successfully created our text over an image on hover in Divi. Now, let’s see how we can create text over an image by default.

Divi Text Over an Image


Step 1: Insert DP Fancy Text module on a page

To display text over an image in a Divi website, first, we need to insert the Divi Plus Fancy Text module on a page.

Divi Plus Fancy Text module

Step 2: Select Text Style

After inserting the module, it asks you to choose fancy text’s style in the Fancy Text Content settings of the Content tab. Here, from the available options, select Background Clipping.

Fancy Text module background clipping option

Step 3: Input Text

Now, after choosing the Text Style, input your fancy text in the Fancy Text field.

Text inside Fancy Text module

Step 4: Choose Image to create text Over an Image

To apply text over an image, we need to move to the Design Tab of the module. Then in the Fancy Text Styling settings, choose the image you want below the text.

Fancy Text module image selection for text over an image

Step 5: Apply Text Styling

We’re not done yet, to make the Fancy Text look more engaging, it’s good we apply some text customzation. So, to do that, go to the Text Settings, in the Design tab, and apply appropriate changes.

Text over an image using Fancy Text module

That’s it; we’ve successfully created text over an image using the Fancy Text module. After applying the text styling, the text would look like the below images.


If you want to create Text over an image easily, then try the Fancy Text module of the Divi Plus plugin. Apart from adding an image behind a text, you can customize the text in multiple ways using this module. Get it today, and let me know your experiences in the comment box below.

Posted By:
Vishvendra
Vishvendra believes in the keep learning process and applying those learnings into work. Other than technical writing, he likes to write fiction, non-fiction, songs, and comic ideas. He loves what he writes and writes what he loves. Search his name with "Nathawat," and you'll easily find him over the internet.

1 Comment

  1. Руслана

    As I learned Divi over the years, I ve searched for a solution to add a button over an image. Most of them required adding a separate button module or using the call-to-action module, but that doesn t work because the image is a background image, which crops weird and is not reliable and background images don t help SEO. So I had to come up with my own hack. It s not perfect, but it does work. 

    Reply

Submit a Comment

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.

1 Comment

  1. Руслана

    As I learned Divi over the years, I ve searched for a solution to add a button over an image. Most of them required adding a separate button module or using the call-to-action module, but that doesn t work because the image is a background image, which crops weird and is not reliable and background images don t help SEO. So I had to come up with my own hack. It s not perfect, but it does work. 

    Reply

Submit a Comment

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Don’t miss to add these 100+ cool features to your Divi theme

Don’t miss to add these 100+ cool features to your Divi theme

Divi is a powerful WordPress theme! Its developer-friendly toolkit makes it possible to add additional modules and functionalities to the theme and do more with it. At DiviExtended, we have some Divi Plugins and modules that add more functionalities to Divi. These...

Introducing Flexile, a feature-rich multipurpose Divi child theme

Introducing Flexile, a feature-rich multipurpose Divi child theme

The term Flexile is taken from the Latin word flexilis, which simply means Flexible. And as the name suggests, you can take an idea of what this child theme can do. It’s a multipurpose Divi child theme packed with powerful features and elements that can be used to...