A Simple Compact Blog List
I recently saw a question in a Divi Facebook group asking how to design a simple list of Divi blog posts. I already have several tutorials about the blog list like Create A Divi Blog List and Create A Divi Blog Sidebar List. But these are different than what the person wanted, so I immediately wanted to create it for fun and to share it with you. So 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.
▶️ Please watch the video above to get all the exciting details! 👆
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:
- Add the Divi Blog module to your layout
- Disable “Show Featured Image”
- Disable “Show Author”
- Disable “Show Date”
- Disable “Show Categories”
- Disable “Show Excerpt”
- Disable “Show Pagination”
Design Tab
In the Title Text toggle, adjust the following:
- Set the “Font Weight” to Bold
- Change the H2 “Title Text Size” to 20px Desktop, 18px Tablet, and 16px Phone
- 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.
3. Add The CSS Snippet In Divi
The last step is to copy and paste the CSS code snippets below into your Divi website.
Where To Paste The CSS Code
1. Divi Assistant
If you are using our Divi Assistant plugin, simply paste the code in the CSS tab in the custom code window in the Divi Visual Builder.
2. Child Theme
If you are using a child theme, paste this code into the style.css file. If you don't have a child theme, you can generate a child theme directly on your site or download our free child theme.
3. Divi Theme Options Integration
Otherwise, paste this code in your Divi>Theme Options>Custom CSS code box.
If you need help understanding where to paste the code, please check out our complete guide about 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.
This is very helpful. I’m working on something that is very similar, but can’t figure out how to do one thing.
I’m trying to display a single blog entry in a featured area above the main nav. I’ve used your code with some style differences, which include changing the icon to a “Read Blog” button. I’ve also set the title text to be centered.
However, I’d like the Read Blog button to appear 20px to the right of the title, no matter how wide the title may be. If you like, you can see the dev version of what I’ve managed so far here:
https://dev-max-retail.pantheonsite.io/
Is there was way for the button position to adjust based on the length of the latest post title?
Thank you for any insight you can share!
Hi Bill!
I have checked the page and not able to see compact Blog list. Did you remove it? If yes, can you add it again?
Thank you, Hemant. I’m out of my office the rest of week, so I will jump in on Monday. I appreciate the help~
Hi Bill!
Please use the following code:
.pa-blog-compact-list .et_pb_post .entry-title a{
margin-right: 50px;
}
.pa-blog-compact-list .et_pb_post{
text-align: center;
width: fit-content;
}
.pa-blog-compact-list{
text-align: center;
display: flex;
justify-content: center;
}
You can adjust the code for mobile device.
Let me know how it goes!
Following up, I have implemented this on a test site here:
https://test.bill-cameron.com
This is a different client, but I looking for the same thing, if possible. One thing I noted was when I tested with a longer post title, the title text extended below the Read The Blog button element.
If what I’m looking forward isn’t possible, no worries. Heaven knows I’ve been tinkering off and on for days without zeroing on what I’d like it to do! 🙂
My apologies. I’m not the only person working on the site and one of the other folks committed changes that overwrote my test. I will set it up on a different site that only I have access to so there’s no danger that will happen again. As soon as I get it sorted, I’ll repost.
Thanks for checking, and sorry about the mix-up.