Adjusting the number of columns in your Blog Module can help you create a more visually appealing and organized layout for your blog posts.
In this article, we will guide you through the process of changing the number of columns in the Blog Module using custom CSS code.
By default, the Blog module shows 3 columns of posts per row when there's no sidebar on the page:
Change the Number of Columns in the Blog Module using the Grid Layout
Open the Blog module's settings by clicking on the Gear Icon
Go to Design Tab → Layout and choose Grid
Go to Advanced Tab → CSS ID & Classes → CSS Class
Set the CSS class dt-4-columns-blog
In Divi → Theme Options → General Tab → Custom CSS, add the following CSS code:
@media (min-width: 981px) {
.dt-4-columns-blog .et_pb_salvattore_content[data-columns]::before {
content: '4 .column.size-1of4' !important;
}
.dt-4-columns-blog .column.size-1of4 {
width: 24% !important;
margin-right: 1%;
}
.dt-4-columns-blog .et_pb_post {
margin-bottom: 11px;
}
}
The result can be seen in the screenshot below:
Change the Number of Columns in the Blog Module using the Fullwidth Layout
Open the Blog module's settings by clicking on the Gear Icon
Go to Design Tab → Layout and choose Fullwidth
Go to Advanced Tab → Custom CSS → Free Form CSS
Copy/paste the following CSS code:
@media (min-width: 981px) {
selector.et_pb_module {
--no-of-columns: 4;
--gutter: 20px;
--padding: 19px;
}
}
@media (min-width: 768px) and (max-width: 980px) {
selector.et_pb_module {
--no-of-columns: 3;
--gutter: 20px;
--padding: 19px;
}
}
@media (max-width: 767px) {
selector.et_pb_module {
--no-of-columns: 1;
--gutter: 20px;
--padding: 19px;
}
}
selector.et_pb_module .et_pb_ajax_pagination_container {
display: grid;
grid-template-columns: repeat(var(--no-of-columns), 1fr);
gap: var(--gutter);
}
selector.et_pb_module .et_pb_post {
margin-bottom: 0;
border: 1px solid #d8d8d8;
padding: var(--padding);
}
selector.et_pb_module .et_pb_post .entry-featured-image-url {
display: block;
margin: calc(-1 * var(--padding)) calc(-1 * var(--padding)) var(--padding) calc(-1 * var(--padding))
}
selector.et_pb_module .et_pb_ajax_pagination_container div:last-child {
grid-column: span var(--no-of-columns);
}
Notes:
The above CSS code uses CSS Grid and CSS variables. When the code is added to Advanced Tab → Custom CSS → Free Form CSS, the syntax checker will flag many of the rules as invalid. Please ignore that.
If you need to change the number of columns, change the value of the --no-of-columns property inside each of the media query
The above code will change the Blog module's Fullwidth layout to:
4 Columns layout on desktop
3 Columns layout on tablet
1 Column layout on phone
The result can be seen in the screenshot below:
