How to change the number of columns in Divi Portfolio Module

In this ever-growing World having a site that shows your growth, progress, and qualities is a great to impress clients. Divi helps users and designers to represent their qualities through its modules.

Divi has two native modules that can help you create your portfolio. We have both the Portfolio and Filterable Portfolio modules. Both allow you to present your portfolio in two ways. While the Portfolio Module is a fantastic approach to display your work, the Filterable Portfolio Module enables you to display more of it.

It includes a filter that will help you exhibit your work in a more organized manner. Depending on the layout you choose, our portfolio modules show your work in either one or four columns by default.

However, in this tutorial, we will use CSS to modify the columns in Divi’s portfolio module.

Results:

Two-Column Portfolio:

Three-Columns Filterable Portfolio:

Five Columns Filterable Portfolio:

After adding a Filterable Portfolio go to Filterable Portfolio Settings > Design > Layout and select Grid in Layout:

Creating Two Columns Filterable Portfolio:

Go to the Filterable Portfolio Settings > Advanced > Custom CSS ID & Classes and add the following CSS Class:

hey-two-columns

Then go to the Page Settings > Advanced > Custom CSS and paste the code there:

/* Hey-Divi 2-Columns Portfolio Layout */
@media (min-width: 981px) {
.hey-two-columns .et_pb_grid_item {
width: 47.25% !important;
margin-right: 5.5% !important;
}
.hey-two-columns .et_pb_grid_item:nth-child(3n) {
margin-right: 5.5% !important;
}
.hey-two-columns .et_pb_grid_item:nth-child(2n) {
margin-right: 0 !important;
}
.hey-two-columns .et_pb_grid_item.et_pb_portfolio_item:nth-child(4n+1) {
clear: none !important;
}
.hey-two-columns .et_pb_grid_item.first_in_row {
clear: unset;
}
} 

Creating Three Columns Filterable Portfolio:

Go to the Filterable Portfolio Settings > Advanced > Custom CSS ID & Classes and add the following CSS Class:

hey-three-columns

Go to the Page Settings > Advanced > Custom CSS and paste the following code there:

/* Hey-Divi 3-Columns Portfolio Layout */
@media (min-width: 981px) {
.hey-three-columns .et_pb_grid_item {
width: 29.66% !important;
margin-right: 5.5% !important;
}
.hey-three-columns .et_pb_grid_item:nth-child(3n) {
margin-right: 0 !important;
}
.hey-three-columns .et_pb_grid_item.et_pb_portfolio_item:nth-child(4n) {
margin-right: 5.5% !important;
}
.hey-three-columns .et_pb_grid_item.et_pb_portfolio_item:nth-child(4n+1) {
clear: none !important;
}
.hey-three-columns .et_pb_grid_item.first_in_row {
clear: unset;
}
}

Creating Five Columns Filterable Portfolio:

Go to the Filterable Portfolio Settings > Advanced > Custom CSS ID & Classes and add the following CSS Class:

hey-five-columns

Then go to the Page Settings > Advanced > Custom CSS and paste the following code there:

/* Hey-Divi 5-Columns Portfolio Layout */
@media (min-width: 981px) {
.hey-five-columns .et_pb_grid_item {
width: 15.6% !important;
margin-right: 5.5% !important;
}
.hey-five-columns .et_pb_grid_item:nth-child(3n) {
margin-right: 5.5% !important;
}
.hey-five-columns .et_pb_grid_item:nth-child(5n) { 
margin-right: 0 !important;
}
.hey-five-columns .et_pb_grid_item.et_pb_portfolio_item:nth-child(4n+1) {
clear: none !important;
}
.hey-five-columns .et_pb_grid_item.first_in_row {
clear: unset;
}
}

Conclusion:

As we wrap up your training, I hope you’ve grasped how we can utilize CSS to customize the portfolio module of Divi. That might include posting your work online in the form of a digital portfolio! We hope this course helps you develop your portfolio.