Keeping your website visitors informed about news in your company or in the business, in general, is a very important thing. That’s why having a blog on your website is a beneficial thing. Most recent posts section makes fresh information easily accessible to your visitors.

Divi already has a built-in module called Blog Module. With a few tweaks and a little bit of CSS, your recent post section can really come to life. In this article, I’m going to guide you through each step of creating recent post section same as one on the Glimmernet Technologies website.

First, we need to pick the page where we want to display our recent posts. We add the section and the row with as many columns we like. On our website, we decided to show four most recent posts so we went with four column row.

Row Module settings

After that, we want to set up our Row Module settings. We open the settings for our Row module and in Design tab, we want to turn on following options: Make This Row Fullwidth, Use Custom Gutter Width and Equalize Column Heights.

Blog Module Settings

Content

In each column, we want to add Divi’s Blog Module which shows only one post, so we set Posts Number to 1. Offset Number for the first module is set to 0, on the second to 1, third is set to 2 and the fourth to 3.
In the Elements section of the Blog Module Setting only Show Featured Image option should be turned on.

Design

In the Design tab, we need to set Layout to Fullwidth, text orientation to left, text color to light, h2 title size and body text size to 17px and 14px respectively. Rest of the settings we can leave on default values.

Advanced

After that in the Advanced tab for each Blog Module, we add class name recent-post-blurb. This CSS class is going to allow us to reference our code to these specific modules. Now we just need to add the following code to our CSS file:

.recent-post-blurb{
    position: relative;
    overflow: hidden;
}
.recent-post-blurb article{
    margin-bottom: 0;
}
.recent-post-blurb .post-content{
    display: none;
}
.recent-post-blurb .entry-title{
    padding-bottom: 0;
}
.recent-post-blurb .entry-featured-image-url{
    margin-bottom: 0;
}
.recent-post-blurb:hover .post-content {
    display: block;
    position: absolute;
    bottom: 0;
    padding: 10px;
}
.recent-post-blurb .entry-title a{
    position: absolute;
    bottom: 0;
    padding: 10px;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    min-height: 20%;
    transition: min-height .3s ease-in-out;
}
.recent-post-blurb:hover .entry-title a{
    min-height: 100%;
}

This code moves title over the featured image and hides post excerpt in the default state. Once we hover over the one of the posts title height is going to 100% and an excerpt is shown.
Depending on your setup you can use media queries to hide excerpt on certain screen sizes.

If this helped or if you have any questions, leave us a comment below!