WordPress has this great Gutenberg block called a Cover Block. The Cover block displays an image or video you can add text and other content on top of — it’s great for headers and other banner-style displays. And that’s super cool, but if you’re a Divi Theme user you may have noticed Divi doesn’t come with a Cover Block Module. In this article, I’m going to cover how to build a Cover block using the Divi builder on your own.

Before I get into my tutorial, it’s worth noting that Elegant Themes (the folks who created the Divi Theme) have their own tutorial on the subject. It shows you step-by-step how to build a 3-column design of images overlayed with text. It’s pretty cool and might be exactly what you need, but it’s a little different than what I’m about to show you here.

Overview

What are we building?

We’re building a single image, with an overlayed transparent background, and some text elements layered on top. I’m going to show you exactly how to create a 1-column single-image overlayed with text and social media icons. 

Here’s what it’s going to look like when it’s finished. 

Step-by-step

• Add a 1-column row
• Add an image
• Add overlay background
• Add text
• Add social follows

During each step, we’ll do a little style customization, but it’s really this easy.

Step 1: Add a 1-column row

From the Divi Builder, add a new 1-column row.

Step 2: Add your image

The first thing to add inside the row is your image.

Add an image module.

Add an image module to the row.

Insert your image

In the image module, choose your image.

Align Center

From the image module’s Design tab, set the module’s alignment to be centered.

Step 3: Add overlay background color

Next, add a Divider module below the image module. This will provide the overlay’s background color. We’ll be adjusting the background color, width, height, and positioning of the Divider to make it sit on top of the image.

Add a Divider module

Add a Divider module.

Hide the Divider

Toggle off the divider line because you don’t need it to create the effect.

Set the background color

Now, set the Divider’s background color. You want it dark enough to make the overlay text readable and transparent enough to see the image. For this tutorial, I’ve chosen to use black at 25% opacity, otherwise known as: rgba(0, 0, 0, 0.25)

Adjust the sizing

In order for the background color to overlay the entire image we’re going to adjust the Divider’s width and height. From the module’s Design tab -> Sizing options, set both width and height to 100%.

Adjust the position

Adjust the Divider’s position to place the background color on top of the image, creating the overlay effect. From the Divider module’s Advanced tab -> Position settings, set the position option’s value to absolute.

Great work. You’ve added an image and overlayed it with an opaque colored background. The next few steps involve adding text and a social media module on top of the background color. It’s kind of like building a layered cake.

Step 4: Add text

Now that you have an image with a colored overlay, it’s time to add some text.

Add a Text module

Add a new text module and give it some text. Here, I’ve added an H2 heading and a paragraph to simulate a common patter of someone’s name and job title.

Adjust text color and alignment

Adjust the text to be center aligned. To ensure it’s readable on top of the darker background color set its color to Light (or set a specific color of your choosing from the text’s Design tab).

Position the text

Similar to what you did with the Divider module, you need to adjust the position of the text module.

From the Advanced tab -> Position settings, set the position to absolute and from the grid display select the bottom-center location.

Additionally, set the vertical offset to 20%. You can play around with this setting, but a vertical offset of 20% provides enough space below the text to place social media icons.

Awesome. That’s all for adding text over the image. You could stop here if it’s all you need. We’ve kept everything confined to Divi’s modules, so you could even apply advanced styling or add animated effects if you want because Divi makes that easy for you.

Step 5: Add social media icons

Okay Sparky, it’s time to add social media icons to round out the design.

Add a Social Media Follow module

Position the Social Media module

Same as you did with the text module, you need to adjust the alignment settings of the Social Media Follow module to place it on top of the overlay background color and aligned to the center of the image.

From the Advanced tab -> Position settings, set the position option’s value to absolute. Select the bottom-center position from the grid interface.

To lift the icons off the baseline, set the vertical offset value to 10%. This will place the module directly below your text.

Center the icons

There’s one extra step to centering the Social Media Follow module’s icons. You still need to center align the module.

From the module’s Design tab, set the alignment to center.

Super work! You’re like 99% done with creating an image with text (and social media icons) overlay using the Divi Theme’s Divi Builder. All that’s left is a little housekeeping and tightening up the spacing to prevent any undesired surprises.

Step 6: Housekeeping

The last things to do are organizational and best practice. You’re going to add custom labels to the layers to make it easier for yourself if you ever need to come back and edit things. And, you’re going to remove the default bottom spacing from each of the modules because sometimes it causes issues with the layout and you don’t want to worry about that.

Name the layers

From Divi’s Layers panel, give your layers recognizable names.

Remove Bottom Margins

Click into the settings for each module you’ve added and remove the bottom margins.

From each module’s Design tab -> Spacing settings, set the Margin bottom option’s value to 0 (zero).

Do this for the image, text, and social media follow module. You can skip the divider module because of its sizing, but it won’t hurt if you remove that margin too.

Last Step: Row space

The very last thing you want to do is adjust the width of the row. If your image is always the full-width of the page you can skip this, but there’s a good chance your image is narrower (like mine) and you want to confine the overlay to the bounds of the image.

Adjust the Row width

Open the row’s settings panel. From the Design tab -> Sizing settings, set the row’s width equal to the width of your image. My image is 426px wide, so I set my row to 426px wide.

Additionally, set the row’s max-width to 100%. This way, the image will be responsive and won’t stretch horizontally outside of the viewable area. 

That’s all, folks.