All Collections
FAQ's and Troubleshooting
How to change the Blog Module layout to have the featured image on the left and post info on the right
How to change the Blog Module layout to have the featured image on the left and post info on the right

Changing the default Blog module FullWidth Layout to have the Featured Image on the left, and the post content on the right

Eduard Ungureanu avatar
Written by Eduard Ungureanu
Updated over a week ago

Step 1: Add the Blog module to the page, and ensure its layout is set to be Fullwidth in the module's modal settings window → Design Tab → Layout:

Step 2: In Advanced Tab Custom CSS Free Form CSS, copy/paste the following 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;
}
}

The result will be:

Code Explanation:

In the above code, we are using CSS Grid to create a custom 2 columns layout. The first column of the grid is 30 and it is used to display the Post's Featured Image. The second column will be as wide as the remaining space, and it is 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 changed the 30% width value.

Note: In the above CSS code, we will notice a Warning Unknow property gap . Please ignore that warning. The warning shows due to the syntax checker of not able to recognize a perfectly valid CSS property gap.

Did this answer your question?