Code by Day | Explore By Weekend

How To Make A Compact Sidebar List Of Recent Blog Posts With The Divi Blog Module Tutorial by Pee Aye Creative

How To Show A List Of Recent Blog Posts In The Sidebar Area With The Divi Blog Module

In this tutorial you will learn how to make a beautiful compact sidebar list of recent blog posts using the Divi Blog module.

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! 

how to make a compact Divi blog sidebar list of recent posts

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?

20
Last updated Jan 3, 2021 @ 12:47 pm

Please share this post!

Nelson Lee Miller (aka The Divi Teacher)

Nelson is the owner of Pee-Aye Creative Co in the beautiful state of Pennsylvania. He loves helping small businesses, exploring, building websites with Divi, and teaching others.
Divi Adventure Club Product And Course Membership by Pee Aye Creative

Become A Member!

Gain access to everything we offer!

Learn More

Recent Posts

Leave A Response!

Subscribe
Notify of
guest
2 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Spencer Bomboir
1 month ago

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!

Shop Our Divi Products

Plugins • Courses • Templates

Visit The Shop

Divi Adventure Club Product And Course Membership by Pee Aye Creative

Become A Member!

Gain access to everything we offer!

Learn More

Divi Tutorials On YouTube

Join over 4,800 others and subscribe to our helpful Divi videos!

Visit Our Channel

Pin It on Pinterest

0

Your Cart