Out of the box, the Blog Module has two options for the layout and how the posts are being displayed:
Fullwidth - all posts are displayed fullwidth
Grid - all posts are displayed in a 3 column Grid layout
With a small customization, you can have the Blog Module display the Featured Image on the right while each post's details are displayed on the left.
Open the Blog module setting by clicking on the Gear icon
Go to Design Tab → Layout and choose Fullwidth
Go to Advanced Tab → Custom CSS → Free Form CSS
Add this CSS code:
@media (min-width: 768px) {
selector article.has-post-thumbnail {
display: grid;
grid-template-columns: 30% auto;
grid-template-rows: repeat(4, auto);
gap: 0 20px;
}
selector article.et_pb_post {
margin-bottom: 20px
}
selector article.has-post-thumbnail .entry-featured-image-url {
grid-row: span 5;
margin-bottom: 0;
}
}
Code Explanation:
In the above code, we use CSS Grid to create a custom 2 columns layout.
The first column of the grid is 30%, which displays the Post's Featured Image.
The second column will be as wide as the remaining space, and it will be used to display the rest of the Post information:
Post's Title
Post's Meta
Post's Excerpt
Post's read more button
If you want to use a different size of the Featured Image, edit this CSS property:
grid-template-columns: 30% auto;
And change the 30% width value.
Note: In the above CSS code, we will notice a Warning Unknown property gap . Please ignore that warning. The warning shows that the syntax checker is not able to recognize a perfectly valid CSS property gap.
The result can be seen in the screenshot below:
