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.Â
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:
- 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
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.
0 Comments