Search
Close this search box.

How to Place Blog Post Title Over the Featured Image in Divi Blog Module

For a simple module, Divi’s Blog module is quite a powerful one. You can create any type of page with blog feeds by using Divi’s Blog module. You can even use the module in the footer area if you want to add a related posts section at the bottom of your blog post template to keep the users on your site longer. After some time of using the default Blog module, you may want to style and customize how the blog feeds are displayed.

In Divi, by default the Blog module is displayed in the following orders (top to bottom):

  • Post Featured Image
  • Post Title
  • Post Meta
  • Post Excerpt

With this tutorial, we will show you how to place the blog title, meta, and content just over the featured image thumbnail. Let’s get into it!

Placing Blog Post Title, Meta, and Content Over the Featured Image in Divi Blog Module

Step 1: Adding Custom Code to Divi Theme Options

Firstly, start by navigating to Divi ā†’  Theme Options ā†’  Integrations, then place the following custom code in the Add code to the <head> of your blog code area.

<script>
    (function($) {
        $(document).ready(function() {

            $(".wpb-blog .et_pb_post").each(function() {
                $(this).find(".entry-title, .post-meta, .post-content ").wrapAll('<div class="wpb-blog-text"></div>');
            });

            //Do the same for ajax
            $(document).bind('ready ajaxComplete', function() {
                $(".wpb-blog .et_pb_post").each(function() {
                    $(this).find(".entry-title, .post-meta, .post-content ").wrapAll('<div class="wpb-blog-text"></div>');
                });
            });

        });
    })(jQuery); 
</script>

Then save the changes by clicking on the Save Changes button.

What the code above does is combine the 3 parts of the blog module which are the title, the meta, and the content into one element.

Step 2: Adding a Custom CSS class

Once you’ve added and saved the previous custom code, create or edit a page with the Divi Builder to add the blog module with a grid layout. If you already have the module in place and want to customize it, you can continue to open up the Blog settings panel, navigate to the Advanced tab, and open the CSS ID & Classes block to add the following custom CSS class.

  • wpb-blog

Step 3: Adding a Custom CSS

Once you’ve added the class for the blog module, now to add the custom CSS to move the combined element from step 1 over the featured image. The custom CSS will also adjust the margin and padding and add an overlay to the featured image to make the text stand out more.

Once you’re ready, copy the following code then place it in your Divi ā†’ Theme Options ā†’ General (first tab) ā†’ Custom CSS.

/*move wrapped title, meta, and text up over the image*/

.wpb-blog-text {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 100%;
	padding: 30px;
	z-index: 1;
}


/*keep the moved items positioned with their parent items*/

.et_pb_blog_grid article {
	position: relative;
}


/*remove spacing around entire blog post*/

.et_pb_blog_grid .et_pb_post {
	padding: 0px;
}


/*remove negative margins on blog featured image*/

.et_pb_image_container {
	margin: 0;
}


/*remove the margin below the featured image frame*/

.et_pb_post .entry-featured-image-url {
	margin: 0;
}



.et_pb_blog_grid .entry-featured-image-url::before {
	content: '';
	position: absolute;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.5);
}

Continue by clicking the Save Changes button to save your changes.

By now, your blog module will have the title, meta, and content over the image. However, you may want to adjust some settings to make the blog feeds more appealing than the below image.

Step 4: Make Some Adjustments to the Blog Module

Choose the Element You Want for the Blog Module

You can always choose the element you want to show for your blog module. If you want to have blog feeds that consist only of the featured image, title, and meta you can do so by disabling the Show Excerpt option on the Content tab ā†’ Elements. And, you also can increase the element it shows, like the Read More button or Show Comment Count.

Light Up the Text

As you can see in the above image, the text is almost unreadable. Let’s change the color of the text to white or any other light color you want. If you want to follow our blog style, open up the Blog Settings ā†’ Design, and make adjustments as follows:

  • The Title Text

We set the Title Text Color to white and use Title Text Shadow with a dark color glowing effect.

  • The Body Text

The body text usually overflows from the bottom of the image as there don’t have enough room for this in the grid layout. Maybe you can shorten the content by going to the Content tab ā†’ Excerpt Length and inputting the number of letters you need there.

For the Body Text Color, we choose a bit of grayish color (#D6D6D6) and use Body Text Shadow with a dark color glowing effect. The read-more text by default follows this color. But, you can change it in the Read More Text block ā†’ Read More Text Color.

  • The Meta Text

We set the Meta Text Color to light blue (#88D9DD) and use Title Text Shadow with a dark color glowing effect.

Remove Blog Feeds Border

By default, Divi adds a gray-colored 1px border every time you use the blog module. You may want to remove that by going to the Design tab ā†’ Border then setting the Grid Layout Border Width to 0px.

Step 5: See the Result from the Frontend Also

Sometimes there are discrepancies between the builder and the frontend result when we use custom codes to customize Divi elements.

Divi Editor
Frontend

As you can see from the above images, in the Divi editor, the content is not positioned correctly in the middle of the featured image. While from the frontend the content is displayed perfectly as we want it to.

The Bottom Line

After some time of using the default blog post module, you may want to style and customize how the blog feeds are displayed. This tutorial shows you one of the customizations you could use for your blog module so you will have a blog module with its content over its featured image.

This page may contain affiliate links, which help support our project.Ā Read our affiliate disclosure.
Picture of Hendri Risman

Hendri Risman

Hendri is a WordPress expert and a writer staff at WPPagebuilders. He writes solutions on how to get things fixed in WordPress a lot. Mostly without involving a plugin.
Want to turn your WordPress knowledge into revenue?Ā OF COURSE!

5 thoughts on “How to Place Blog Post Title Over the Featured Image in Divi Blog Module”

  1. Hi Iā€™m having issues because it only works on the initial page-load, and stops working as soon as you click to go to the next page. Can you help with this problem, please?

    Reply
    • Hi Tatiana,
      Maybe you can try to add the code to the code module instead of the Divi Theme Options.
      copy the first code as it is, and copy the second code inside a style tag.
      Hope that fixes your issue.

      Reply
  2. Hi Hendri. This is very helpful. Thank you.
    Do you have any suggestion on how to modify this so it instead overlays an image (say, “image.png”) over the featured image?

    Regards,

    Jonathan

    Reply
    • Hi Jonathan,
      To add an image overlay over the featured image, you can add the following CSS snippet after the background-color line and before the closing bracket from the code above.

      background-image: url(yourimageurl.jpg);
      background-size: 100%;
      opacity: 0.4;

      Replace your image url with your image URL, and change its opacity to your liking with a maximum value of 1.

      Reply
  3. Thanks for a good article.

    Can I do any changes to this code and get it to work with projects as well. Which I use Portfolio module to display.

    Regards Jimmy

    Reply

Leave a Comment

Share This
Save your Divi assets to the cloud and access them from anywhere.
Hey šŸ‘‹šŸ»
Do you have a WP blog?
If so, you may need these. All the resources you need to grow your blog.

Your popup content goes here

50%

Where should we send the template?

After entering your email address, you will be added to our newsletter subscribers. You can unsubscribe anytime.

Want to Build Passive Income Like the One on the Screenshot Below?

Click the button on the right side to learn how šŸ‘‰šŸ»
5 easy steps to turn your WordPress knowledge into monthly recurring revenue.

Click the above button to close the popup.