Divi Blog Sidebar List Of Recent Posts
Everyone likes a fun and practical tutorial, and this one describes both of those. We are going to use a Divi blog module and put it in our sidebar area and display recent posts. Without this method, you would need to use a widget, but this method gives us much more freedom. Be sure to check out all the blog related tutorials in our Divi Blog tutorial series, and we have more to come!
How To Show Recent Posts In The Sidebar Area With The Divi Blog Module
Setup
Set the Blog module to fullwidth under the Design tab>Layout (this is already set by default). You can style the title text and meta however you want. Also note that I only have the Image, Title, and Date showing.
You probably want to do this on the main blog Archive page or in a Theme Builder Template. Note that this is not a widget, so if you are using widgets for other things, just place this module above or below the sidebar module on your blog page or Theme Builder template.
Add The Custom CSS Class
Next, add a custom CSS class in the module. Go to the Advanced tab to the Custom CSS ID & Classes toggle and add “pa-blog-sidebar-list” to the CSS Class input field.
Copy & Paste The CSS Snippet
If you are using our free Divi child theme, place this snippet into the style.css file. Otherwise, place this in your Divi>Theme Options>Custom CSS code box. If you need help, check out our complete guide on Where To Add Custom Code In Divi.
/*set the image width*/
.pa-blog-sidebar-list .entry-featured-image-url {
width: 100px;
float: left;
margin-bottom: 0!important;
}
/*set the text width*/
.pa-blog-sidebar-list .entry-title,
.pa-blog-sidebar-list .post-meta {
width: calc(100% - 100px);
float: left;
padding-left: 20px;
}
/*make the image square*/
.pa-blog-sidebar-list .entry-featured-image-url {
padding-top: 100px;
display: block;
}
.pa-blog-sidebar-list .entry-featured-image-url img {
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
object-fit: cover;
}
/*adjust the spacing and add a border between the posts*/
.pa-blog-sidebar-list .et_pb_post:not(:last-child) {
border-bottom: 1px solid #dddddd!important;
padding-bottom: 20px;
margin-bottom: 20px;
}Here is how this will look!
You may notice that we made the image square. We set it to 100px height and width, so if you want to change this, just change 100px to something else every place you see it in the code.
And of course we adjusted the title text, meta text, and made the image rounded corners in the module settings.
That was a fun one, right?
Looking for some help! I have the exact code pasted in above with your instructions. However, i need there to be less space between the blog posts. Any idea what I can do?
Adjusting the padding-left and padding-bottom like you do in the video doesn’t work for this one, the changes just don’t do anything. Top of link included in post.
Thanks!
Hi Spencer,
Yes that is already part of the tutorial, you can see the margin-bottom: 20px; at the bottom of the snippet, just adjust that however you want it (the default in Divi is 60px which we are overriding).