How to Change the Column Count in Divi’s Filterable Portfolio Module

Posted on November 15, 2022 by 12 Comments

How to Change the Column Count in Divi’s Filterable Portfolio Module
Blog / Divi Resources / How to Change the Column Count in Divi’s Filterable Portfolio Module

As a designer or creative, itโ€™s always a good idea to have a portfolio to show your work online. In the digital era that weโ€™re living in, building a personal brand is a great way to set yourself apart from the competition. Bearing this in mind, using Divi to create your portfolio website is a great idea. Divi has two native modules that can help you build your portfolio. We have the Portfolio Module, as well as the Filterable Portfolio Module. Both allow you to showcase your portfolio in two ways. While the Portfolio Module is a good way to show your work, the Filterable Portfolio Module allows you to showcase more of your work and comes with a filter that will enable you to better present your work in a more organized way. By default, our portfolio modules showcase your work in either one or four columns, depending on the layout you choose. However, in this tutorial, weโ€™ll be using CSS to change columns in Diviโ€™s portfolio module.

In this tutorial, weโ€™ll be using Diviโ€™s Filterable Portfolio Module within the FREE Print Designer Layout Pack. Specifically, weโ€™ll be using the Print Designer Gallery Page Template from the layout pack. There are two layout styles within Diviโ€™s portfolio Modules. The Grid Layout comes with four columns. The Full Width Layout comes in one column. Weโ€™ll be using the Grid Layout and CSS to change columns in Diviโ€™s portfolio module. With CSS, weโ€™ll change the columns within the module to 2, 3, 5, and 6 columns. The module will also be mobile responsive for both tablet and mobile devices.

Examples of Different Columns in the Filterable Portfolio Module

Hereโ€™s the end result of the work that weโ€™ll be doing in this tutorial:

Change Diviโ€™s Filterable Portfolio Module to 2 Columns

Change columns in Divi's portfolio module to 2 columns

Modify Diviโ€™s Filterable Portfolio Module to 3 Columns

Change columns in Divi's portfolio module to 3 columns

Update Diviโ€™s Filterable Portfolio Module to 5 Columns

Change columns in Divi's portfolio module to 5 columns

Edit Diviโ€™s Filterable Portfolio Module to 6 Columns

Change columns in Divi's portfolio module to 6 columns

Styling the Filterable Portfolio Module

Before we apply CSS to change the number of columns within our Filterable Portfolio Module, we must first style it to match our template.

Changing the Layout

To start, we must change our module layout. To do this, we click on the gear icon to enter the module settings for our Filterable Portfolio Module.

Edit the layout of the Filterable Portfolio Module

Next, we click on the Design tab. When we enter this tab, we will now click on the Layout tab. Then, we will change the layout of the module from Fullwidth to Grid.

Change the layout of the module from Fullwidth to Grid.

Here, we can see the default Grid Layout contains four columns.

The default Grid Layout contains four columns

Style Portfolio Image Thumbnail

Now that we have our Grid Layout in place, letโ€™s style the portfolio image.

Styling the Image Overlay

First, we begin by styling the Overlay. Scroll down and click on the Overlay tab. Use the following settings to add a white, translucent overlay to the Image:

Overlay Settings:

  • Zoom Icon Color: #000000
  • Hover Overlay Color: RGB(255,255,255,0.9)
  • Hover Icon Picker: Refer to the screenshot below

Styling the Image Overlay

Adding Image Border

After styling the Overlay, we will add a border. To do this, scroll down to the Image tab. Use the following settings to style the border:

Image Settings:

  • Image Border Width: 8px
  • Image Border Color: #ffffff
  • Image Border Style: Solid

Let's style the portfolio image border

Styling Title Text

Next, we will style the Title Text within the module. Letโ€™s scroll down to the Title Text tab. Next, weโ€™ll use the following settings to style the title:

Title Text Settings:

  • Title Font: Inter
  • Title Font Weight: Light
  • Title Text Color: #000000
  • Title Text Size: 28px

Styling Title Text

Notice that we are using the same font that is used through the Print Designer Layout Pack.

Styling and Adding CSS for the Filter Criteria Text

For the Filter Criteria Text, weโ€™ll be using a few lines of custom CSS within the Advanced tab of the module settings. Before we add the CSS, letโ€™s style the setting. First, weโ€™ll apply the same font family and color to the Filter Criteria Text.

Filter Criteria Text Settings:

  • Filter Criteria Font: Inter
  • Filter Criteria Font Weight: Light
  • Filter Criteria Font Size: 14px

Styling for the Filter Criteria Text

For now, weโ€™re going to save our changes by clicking on the green checkmark of the Filterable Portfolio Moduleโ€™s modal box. However, weโ€™re not finished with the Filter Criteria Text just yet. Weโ€™re going to navigate to the Page Settings to start building the custom CSS for our project. To do this, we click on the purple circle with the meatball menu in the center of our screen.

Entering the Page Settings

Once we have clicked this button, weโ€™ll be able to click on the gear icon. The gear icon will take us into the Page Settings modal box.

Into the Page Settings modal box

Once in the Page Settings modal, click on the Advanced tab. Next, paste the following CSS into the Custom CSS box:

/* Change background color of filters */
.et_pb_filterable_portfolio .et_pb_portfolio_filters li a {
background: none;
border: none
}

.et_pb_filterable_portfolio .et_pb_portfolio_filters li a:hover {
background: #ffffff;
color: #323741 !important;
}

Notice that we are commenting our CSS! Donโ€™t forget to do so as weโ€™ll be coming back to add to our CSS as we progress through this tutorial. Save your changes by clicking on the green tick button at the bottom of the modal box. Now, letโ€™s move back into editing the Filterable Portfolio Module.

Styling Meta Text

Weโ€™ll now be styling the meta text that appears below the portfolio itemโ€™s title. We want to make it stand out a bit more from the title. To do this, weโ€™ll navigate to the Design tab of the Filterable Portfolio module and scroll down to the Meta Text tab. As with the other text components of our module, weโ€™ll be using the font family Inter. Weโ€™ll follow this up with the supporting design selections listed below:

Meta Text Setting:

  • Meta Font: Inter
  • Meta Font Weight: Regular
  • Meta Font Color: #0102fa

Style Pagination Text

Next on the styling block will be the Pagination Text of our module. Weโ€™re going to call back our Printer Designer Layout Pack by using the same font. However, weโ€™re going to add a hint of our blue to the hover of this aspect of the module. Also, weโ€™re going to create some interest by making the pagination text significantly larger than its current size.

To do this, firstly, weโ€™re going to scroll down to the Pagination Text tab and click on it. Next, weโ€™re going to use the following styling settings:

Pagination Text Settings:

  • Pagination Font: Inter
  • Pagination Font Weight: Light
  • Pagination Text Alignment: Right
  • Pagination Text Color: #000000
  • Pagination Text Color (Hover): #0102fa
  • Pagination Text Size: 28px

Style Pagination Text

Weโ€™re going to go a step further with our Pagination Text. We want to remove the default border that appears on top of the Pagination Text. To do that, weโ€™re going to click on the Advanced tab within our modal box. Then, weโ€™re going to add the following line of CSS:

Portfolio Pagiation CSS:

border: none;

Portfolio Pagiation CSS

Once youโ€™ve done this, we can now move on to adding some custom CSS to add the finishing touches to our module. Click on the green checkmark button to save your changes. You can go ahead and also save the page as well, just in case you werenโ€™t saving your work along with the tutorial (donโ€™t forget to do so!).

Customizing the Filterable Portfolio Module with CSS

Now that weโ€™ve finished designing our Filterable Portfolio Module in Divi, weโ€™ll now be using CSS to change the number of columns that weโ€™ll have in our module. But first, weโ€™re going to make one minor tweak. Weโ€™re going to use CSS to remove the initial transition that comes default with the module.

To do this, weโ€™re going to move into the Page Settings to access the Custom CSS tab.

Entering the page settings

Then, weโ€™re going to add the following CSS to our Custom CSS:

/* Remove transition */
.et_pb_filterable_portfolio .et_pb_portfolio_item.active {
transition: none;
}

.et_pb_portfolio_item {
animation: none!important;
transition: none !important;
}

We add this underneath the previous CSS that we added for the styling of the filters. This is what our Filterable Portfolio now looks like, with all our styling edits.

Four column filterable portfolio, styled

Now, letโ€™s change the column number from 4 to 2.

CSS Design Changes for Our Filterable Portfolio Module

Firstly, one important fact to remember when using this module, is to take note of the number of posts that you want to showcase on each page. For our CSS to work correctly, remember to showcase a number of posts that is divisible by the number of columns that you have. For example, if you want to show your portfolio in 6 columns, it would be best to show a minimum of 6 posts in your post count. If you would like to show more posts, it would be best to do 12, 18, 24, etc. posts within the module.

You can find the post count within the Content tab of the Filterable Portfolio and Portfolio Modules.

Post Count and the portfolio modules

Before we add our CSS, we need to attach a CSS class to our module. To do this, weโ€™ll re-enter the module settings, click on the Advanced tab and add our CSS class to our module. Weโ€™ll use the class column-portfolio. So that we donโ€™t get confused as we move through this tutorial, weโ€™ll prefix this class with the number of columns that weโ€™ll be creating.

Add our CSS class to our module

Changing the Filterable Portfolio Module to Two Columns

To change the number of columns in our module from 4 columns to 2 columns, weโ€™ll once again, go to the Page Settings. Then, weโ€™ll add the following CSS:

Custom CSS for a Two Column Filterable Portfolio:

/* 2 Column Portfolio */
@media (min-width: 981px) {
.two-column-portfolio .et_pb_grid_item {
width: 47.25%!important;
margin-right: 5.5%!important;
}

.two-column-portfolio .et_pb_grid_item:nth-child(3n) {
margin-right: 5.5%!important;
}

.two-column-portfolio .et_pb_grid_item:nth-child(2n) {
margin-right: 0!important;
}

.two-column-portfolio .et_pb_grid_item.et_pb_portfolio_item:nth-child(4n+1) {
clear: none!important;
}

.two-column-portfolio .et_pb_grid_item.first_in_row {
clear: unset;
}
}

The width of our first selector (.two-column-portfolio .et_pb_grid_item) determines the width of the column. The margin-right property that we use throughout this CSS snippet adds some padding (or gutter) around our portfolio items. Hereโ€™s what our new, two-column module looks like.

Two column filterable portfolio

Using CSS to Change the Filterable Portfolio Module to Three Columns

Now, weโ€™re going to change our module from 2 columns to 3 columns. Hereโ€™s a new CSS snippet to do this:

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

Remember, after adding this CSS, weโ€™re going to have to change the post count to a number that is divisible by 3. Letโ€™s go with 9.

Change the post count for 3 columns

Change the Number of Columns within the Filterable Portfolio Module to Five Columns

Here is the snippet for making our module have 5 columns.

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

Again, remember to change the post count! Weโ€™re going to go with a higher number hereโ€ฆ weโ€™re going all the way up to 15!

Change the post count for 5 columns

Edit the Number of Columns in the Filterable Portfolio Module to Six Columns

Finally, weโ€™re going to change our portfolio to six columns. However, we need to make a small tweak when using the following CSS snippet. Weโ€™re going to go into the module settings one final time and add a line of CSS. This CSS will change the size of the Portfolio Image. The reason we do this is to ensure that we can fit in our padding (gutter) and border within the six column layout.

To do this, weโ€™re going to navigate to the Advanced tab of our Filterable Portfolio module, and add the following line of CSS to the Portfolio Image option:

Portfolio Image Custom CSS:

  • Portfolio Image CSS: width: 90%;

Portfolio Image Custom CSS

Now that we have this CSS in place, we can go back to the Page Settings and add this CSS snippet to make the module have six columns:

/* 6 Column Portfolio */
@media (min-width: 981px) {
    .six-column-portfolio .et_pb_grid_item {
        width:16%!important;
        margin-right: 5px!important;        
    }
 
    .six-column-portfolio .et_pb_grid_item:nth-child(3n) {
        margin-right: 5px!important;
    }
 
    .six-column-portfolio .et_pb_grid_item:nth-child(6n) {
        margin-right: 0!important;
    }
 
    .six-column-portfolio .et_pb_grid_item.et_pb_portfolio_item:nth-child(4n+1) {
        clear: none!important;
    }
 
    .six-column-portfolio .et_pb_grid_item.first_in_row {
        clear: unset;
    }
}

For this snippet, youโ€™ll notice that weโ€™ve changed the measurement of our right margin. The reason we do this is so that we can still maintain the thick white borders that we implemented in the design phase of this tutorial. So, we reduced our margin to 5px. We also used 18 posts within our post count.

Post count for 6 columns

Letโ€™s Wrap it All Up!

As we have come to the end of your tutorial, I hope that you have been able to see how we can customize the default modules that come with Divi by using CSS. As we are living in an ever-growing digital age, itโ€™s always a good idea to invest time in building an online presence. That could look like adding your work online in the form of a digital portfolio! We hope this tutorial will help you make your portfolio unique.

Divi Cyber-monday Sale

It's The Divi Cyber Monday Sale! Save Big For A Limited Time ๐Ÿ‘‡

Save big on Divi and Divi products for a limited time.

Access The Sale
Divi Cyber-monday
Premade Layouts

Check Out These Related Posts

Divi 5 Update: Public Alpha Version 4

Divi 5 Update: Public Alpha Version 4

Posted on November 25, 2024 in Divi Resources

The Divi 5 Public Alpha is available for testing. If you use Divi 5, you’ll notice an update notification for Public Alpha Version 4 today. We release new Divi 5 versions every two weeks, and it gets better each time! If you haven’t tested Divi 5 yet, try it and let us know what you...

View Full Post
New Starter Site for Freelancers (Quick Install)

New Starter Site for Freelancers (Quick Install)

Posted on November 24, 2024 in Divi Resources

Divi empowers you to build the best websites possible, and now, Divi Quick Sites takes website creation to a whole new level. This revolutionary tool lets anyone, regardless of skill level, generate a complete website in under two minutes! Divi Quick Sites provides everything you need to launch...

View Full Post

12 Comments

  1. Hello! Great post, very helpful, this is exactly what I was looking for.

    I have a couple of questions:
    -Is there a way to reduce the space between columns? I set it to 5 but the space between the project columns is too big.
    -In smaller desktop screens the page goes broken. I have a couple of screenshots about it but I can’t add them here.
    -Is there a way to set 2 columns for mobiles with CSS? Even with this changes the mobile keeps showing just 1 column.

    Thank you very much in advance.

  2. Nice workaround, but it should really be a simple setting in the module itself where you can specify the required number of columns for desktop, tablet and mobile.

    • Hello, great work
      But when I paste and copy CSS for 2 column I get error:
      Expected RBRACE.
      and
      “Unexpected Token ‘}’.
      “Unexpected Token ‘}’.
      Does someone knows why?

  3. Nice work for the multiple columns of the filterable portfolio module. However, can this be also applied to the regular portfolio module?

    • Good question! I think it could, but I’d double-check the CSS selectors. They may be different. Try it out and let us know ๐Ÿ™‚

  4. is there a way to change the size of the images

  5. Hi,
    Thanks for this good tutorial.
    After switching to 2-column display mode, my images become blurry. The uploaded images are of very high quality, but I believe that the portfolio module in grid mode (4 sections by default) loads the images in their 400px version. Once we force the display to 2 columns using your CSS, the loaded sizes are still the 400px versions. Hence, the images are stretched and blurry. Do you have a solution, please?
    Thank you in advance.

    • Same issue here. I can’t believe nobody has brought it up sooner. How can we display the original size of images?? Doesn’t look nice for a portfolio to have blurry images :/

      • I am also struggling with this. The two/three-column method is great, but when the images turn blurry and use the thumbnail size this method is not worth it. Unless there is a method to use the original size of the images, but I can’t find this anywhere.

  6. Hello,

    Could this also made possible for mobile view? 2 columns? I like the 5 columns view on desktop and would love 2 or 3 column on mobile. Could you help with this?

    Kind regards

    Vincent

  7. How can I reduce the spacing below rows?

    • Do you mean you want to reduce the spacing of the Filterable Portfolio Items per Row? If thatโ€™s the case, it can be done by adding a margin-bottom property in the code. There are different sets of code there, for example, if youโ€™re using the code for 2-column Filterable Portfolio, you will need to find this part of the code:

      .two-column-portfolio .et_pb_grid_item {
      width: 47.25%!important;
      margin-right: 5.5%!important;
      }

      And just add a margin-bottom: 10px !important; to it like this:

      .two-column-portfolio .et_pb_grid_item {
      width: 47.25%!important;
      margin-right: 5.5%!important;
      margin-bottom: 10px !important;
      }

      This goes the same if you use the 3-Columns Filterable Portfolio code:

      .three-column-portfolio .et_pb_grid_item {
      width: 29.66%!important;
      margin-right: 5.5%!important;
      margin-bottom: 10px !important;
      }

      Also on 5-column:

      .five-column-portfolio .et_pb_grid_item {
      width: 15.6%!important;
      margin-right: 5.5%!important;
      margin-bottom: 10px !important;
      }

      And 6-column Filterable Portfolio codes.

      .six-column-portfolio .et_pb_grid_item {
      width:16%!important;
      margin-right: 5px!important;
      margin-bottom: 10px !important;
      }

      Let me know how that goes.

Leave A Reply

Comments are reviewed and must adhere to our comments policy.

๐Ÿ‘‹ It's The Divi
Cyber Monday Sale!
Get The Deal
Before It's Gone!
Join To Download Today