To deploy the Blog Module within the Sidebar of a Theme Builder Custom Body template designed to manage All Archives follow these steps:
Go into Divi > Theme Builder
Edit All Archive Pages > Custom Body (or create a new one)
Create a new 80:20 Row
Insert a Blog Module in the left Column (enable its Content > Posts For Current Page)
Insert Blog Module in the right Column
Set the right Column Blog Module > Elements to show only Featured Image and Date
Go to the Blog module -> Advanced tab -> CSS Class and add a new CSS class. In our example, we will use the et_sidebar_blog_posts CSS class.
For more details on how to add a custom CSS class, you can also visit this article: How To Add Additional CSS Classes To Divi Modules.
Insert this CSS code into Theme Options > Custom CSS box and click the green "Save Changes" button to save changes.
/* Start ET sidebar posts Blog Module */
.et_sidebar_blog_posts .entry-featured-image-url {
width: 80px;
height: 80px;
float: left;
margin-bottom: 0!important;
overflow: hidden;
}
.et_sidebar_blog_posts .entry-featured-image-url img {
width: 100%;
height: auto;
object-fit: cover;
}
.et_sidebar_blog_posts .entry-title,
.et_sidebar_blog_posts .post-meta {
width: calc(100% - 80px);
float: left;
padding-left: 20px;
}
.et_sidebar_blog_posts .et_pb_post:not(:last-child) {
border-bottom: 1px solid #0070fc;
padding-bottom: 20px;
margin-bottom: 20px;
}
/* End ET sidebar posts Blog Module */Save theme options and load a Post Category page on the website frontend - the Blog Module will show in the Sidebar of All Archive Pages:
