How To Design A Compact List Of Divi Blog Posts Tutorial by Pee Aye Creative

How To Design A Compact List Of Divi Blog Posts

In this tutorial I will show you how to design a compact list of Divi blog posts using the Divi Blog module and some CSS styling.

Join subscribers on our YouTube channel and enjoy other Divi video tutorials!

1. Set Up And Design The Blog Module

The first step is to set up the blog module design settings. After this, we will add some required CSS, but first, let’s get the settings adjusted. I’ll list each step here.

Content Tab

In the Content toggle, adjust the post count to your preference. I am choosing 5 for this tutorial.

In the Elements toggle, disable everything:

  1. Add the Divi Blog module to your layout
  2. Disable “Show Featured Image”
  3. Disable “Show Author”
  4. Disable “Show Date”
  5. Disable “Show Categories”
  6. Disable “Show Excerpt”
  7. Disable “Show Pagination”

Design Tab

In the Title Text toggle, adjust the following:

  1. Set the “Font Weight” to Bold
  2. Change the H2 “Title Text Size” to 20px Desktop, 18px Tablet, and 16px Phone
  3. Set the “Title Text Color” to #0070fc on hover

For all of these values, you can change them to fit your branding and preferences. I am simply providing the values used in the video tutorial for you to follow. 

2. Add A Custom CSS Class To The Divi Blog Module

The next part of the tutorial is adding the CSS to complete the styling. But first, we need to add a custom CSS class to the Divi Blog module. This will connect the code snippets to the specific Blog module that you are designing, and make sure it does not affect other Blog modules on the site.

Open the Divi Blog module settings and go to the Advanced tab and open the CSS ID & Classes toggle. From there, copy and paste or write “pa-blog-compact-list” into the CSS Class input field, as shown in the screenshot.

add a CSS class to the compact Divi blog list

3. Add The CSS Snippet In Divi

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.

/*add the border and spacing around the entire blog list*/
.pa-blog-compact-list.et_pb_posts {
	border: 2px solid #f0f3f6;
	border-radius: 10px;
	padding: 30px 30px 20px;
}

/*adjust the spacing and add the border after each blog post*/
.pa-blog-compact-list .et_pb_post:not(:last-child) {
	margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid #f0f3f6;
}

.pa-blog-compact-list .et_pb_post:last-child {
	margin-bottom: 0px;
}


/*make the title link spread over the entire post to make it clickable*/

.pa-blog-compact-list .entry-title a:before {
	position: absolute;
	display: block;
	content: "";
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	z-index: 1;
}


/*add the arrow icon on each blog post*/
.pa-blog-compact-list .entry-title a:after {
	content: "\35";
	font-family: ETModules;
	font-weight: 800;
	font-size: 1em;
	line-height: 1em;
	color: #777b88;
	background-color: #f0f3f6;
	position: absolute;
	top: 2px;
	right: 0px;
	padding: 2px;
	border-radius: 50%;
	width: 1em;
	text-align: center;
}

/*change the icon color on hover*/
.pa-blog-compact-list .entry-title a:hover:after {
	color: #0070fc;
	transition: all ease .3s;
}

Code Explanation

The code used here is pretty simple, and I have added notes as comments within the code for each snippet. 

The first part of the code is adding the border and spacing around the entire blog list. 

The second part is adjusting the space and adding the border below each individual post.

The third part of the code is making the entire width of the blog post clickable as the link. Otherwise, only the part where the title text is would be clickable.

The fourth part is adding the icon to each blog post link. The styling can be adjusted to your preference, like the color, background color, or other values. You can also adjust the hover color as needed.

Last updated Jul 25, 2023 @ 12:23 pm

Subscribe

Each month we send out a roundup email newsletter with the latest tutorials, product updates, helpful resources, and any other industry or personal news. Occasionally we send an extra separate email here and there if we just can’t wait! So that’s what you will get if you subscribe, and you can always unsubscribe at any time if you just can’t take it anymore :)

Blog Post Optin

Please share this post!

Nelson Lee Miller (aka The Divi Teacher)

Nelson is the owner of Pee-Aye Creative in the beautiful state of Pennsylvania. He loves helping small businesses, exploring outdoors, building websites with Divi, and teaching others.

Leave A Response!

By commenting you agree to our Blog & YouTube Comments Policy

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *

Recent Posts

0

Your Cart