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?

12

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.

Join Our NEW Divi Facebook Group!

The Divi Teacher Logo

Recent Posts

Leave A Response!

Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments

Shop Our Divi Products!

Child Themes • Plugins • Layouts

Visit The Shop

become partners with Pee Aye Creative

Partner With Us

We are looking for you!

Learn More

Divi Tutorials On YouTube

Join over 3,700 others and subscribe to our helpful Divi videos!

Visit Our Channel

Pin It on Pinterest

0

Your Cart