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.
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.
5 thoughts on “How to Place Blog Post Title Over the Featured Image in Divi Blog Module”
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?
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.
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
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.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