Divi: How to customize an element of the "Filterable Portfolio" module grid

Would you like to know how to customize the grid elements of the Filterable Portfolio module of Divi ? Follow us in this tutorial...

Have a zone on your Website to showcase your work is important. If you are a stylist, you can create several projects on your Website WordPress to show off your concepts. If you're a brand builder, you can use a portfolio to showcase your work. Moreover, we can even go further and add different categories for our projects. It's here what does Divi's Filterable Portfolio module do? .

With this module, we are able to display our hard work in an easy and organized way. 

In today's tutorial, we'll customize the individual grid elements of the Filterable Portfolio module. We will use layouts from free layout packs Divi Conference et Divi Online Yoga Instructor provided with every purchase of Divi . 

As with everything about Divi, we have the ability to customize this module to suit our needs and desires. However, before we get into styling, let's learn a bit more about the module.

What is Divi's Filterable Portfolio module?

Projects are part of a custom post type that works the same as posts. You can find them in your WordPress dashboard.

This is where you will create your individual projects that will populate your Filterable Portfolio module. The module gives us two ways to show our projects: in a grid format ou in a full-width format. For us, we will use and customize the grid format. 

With the Filterable Portfolio module, we will be able to present our most recent projects. Users of our site will see a filter bar at the top of our portfolio grid. From there, they can browse through the different portfolio categories that we allow to display in the module.

Here is an example grid configuration of the module with some sample projects:

Areas to consider when creating Divi's filterable portfolio

Like all mods Divi, the Filterable Portfolio module comes with a number of features that we can customize to our needs and wants. Thus, most of the features that come with the module can be modified in the tab Design from the module settings modal. We can edit the following areas and more:

• Project title
• Project category
• Vignette
• Filter text
• Thumbnail on hover
• Pagination

This is not a complete list, and we haven't even started talking about how CSS added deeper customizations to this module!

How we will customize Divi's Filterable Portfolio module

As mentioned earlier, for this tutorial we will be using two layouts: Divi Conference et Divi Online Yoga Instructor. Below you can get an overview of the work we are going to do during this tutorial.

Arrangement of the elements of the "Divi Conference" layout

Arrangement of the elements of the "Divi Online Yoga Instructor" layout

You can easily download both layouts from Divi Builder. 

Now let's get started!

See also: Divi: Choose between the grid and full-width layout of the Filterable Portfolio module

Customization of Divi's Filterable Portfolio module: "Divi Conference Edition"

First, we will need to install the event page template from the Divi Conference Layout Pack. After creating your new page in WordPress and activating the Divi Builder, we will enter the Divi Library.

Enter the Divi Layout Library

Click on the icon « Load From Library to enter the Divi Layout Library

Locate the layout in the Divi Layout Library

Using the search function in Divi's layout library, are looking the disposition " Conference Event Page"

Install layout

Once you have selected the layout, click the " Use This Layout to install the layout into your page.

Remove and Replace Image Module

We'll be removing the Image module shown below to make room for the Filterable Portfolio module that we'll be customizing. Click on the " Delete after hovering over the image to delete the photo.

Insert Divi's Filterable Portfolio module

With the Image module removed, we can now make room for our Filterable Portfolio module. We are going to click on the icon “ Add-Module (the gray plus sign), then select the module in the module modal box that appears.

Setting the number of posts and portfolio layout

By default, this module will present your work in a single column. However, we will use the grid layout which comes by default with 4 columns. 

As such, we recommend choosing a multiple of 4 (4, 8, 12, 16, etc.) as the number of posts for your portfolio. 

For this tutorial, we will use 12 projects in our grid.

Start customizing Divi's filterable portfolio: Title and Meta Text

Now that our projects are displayed in a grid, let's link some of the design elements of our selected template. In this case, we will use the style provided with the Divi Conference Layout Pack in our new module.

Text style

• Text Alignment: Centered
• Text Color: Dark

Title text style

• Title Heading Level: H2
• Title Font: Krona One
• Text Color: #000000

Meta text style

• Meta Font: Default (Open Sans)
• Meta Text Color: #ff6651

Now that we have our style in place for the titles in the portfolio grid, let's make some changes to the actual shape of the project thumbnails themselves.

Change project thumbnail border and rounded corners

In our Divi Conference Layout pack, we use a unique combination of rounded corners to give a unique shape to some of the keyframes in the pack. Let's apply this style to the thumbnails of our module.

Image

• Picture :
  • Rounded Corners: 50px 50px 50px 0px
  • Border Styles: all
  • Border Width: 3px
  • Color: #000000
  • Border Style: solid

This will give our thumbnails a shape that matches the rest of the other images in the layout pack.

Customizing the Hover Overlay

Let's go one step further with our styling and make a slight change to the default overlay that comes with this module. We will change the color as well as the icon that is used right out of the box.

Overlay

• Zoom Icon Color: #bcf5fd
• Hover Overlay Color: #ff6651
• Hover Icon Picker: Zoom

As you can now see, we've added the brand colors for this layout to the overlay, as well as changed the icon that Divi provides by default for the overlay feature on hover in this module.

Customizing pagination

We will now start using small snippets of CSS to add additional customization to our Filterable Portfolio module. First, we will customize the pagination of this module. Next, we'll remove the border that appears above it with a single line of CSS

Pagination text

• Pagination:
  • Font: Krona One
  • Text Alignment: centered
  • Text Color: #ff6651, #000000 (Hover)

For our CSS, we'll switch to the tab Advanced of our module. Second, we will click on the tab Custom CSS. Next, we'll enter the following code snippet to remove the border above our pagination, giving it a cleaner look.

Portfolio pagination

border-top: 0px;

Using Divi Settings and CSS to Customize Filter Text

For the filter text, we'll take it up a notch. We are going to use CSS to change the background as well as the hover effects. 

We want to have a perfect continuity between the newly added module and the style of the layout pack. First, let's enter our Divi settings for the font.

Filter Criteria Text

• Filter Criteria:
  • Font: Krona One
  • Font Color: #ffffff, #000000 (Hover)

As it stands, our filter seems to be gone. Indeed, in its default state, it is white text on a white background. However, we'll change this with custom CSS in two places. 

First, we'll add a CSS snippet in the page settings that will add a background to the filter text. Second, we will customize the active portfolio filter using the tab Advanced of the module.

To access page settings, click the three dots in the middle of the screen. Then, select gear icon which will open the page settings. Then you navigate to the Custom CSS tab and enter the following to add a background to the filter text.

Custom CSS

In this CSS snippet, we are targeting the background color of the filter. We also target and style its hover state. Next on the agenda, let's add some more CSS to the module and highlight our Active Filter tab.

/* Change background color of filters */
.et_pb_filterable_portfolio .et_pb_portfolio_filters li a {
background: #000000;
}
.et_pb_filterable_portfolio .et_pb_portfolio_filters li a:hover {
background: #ffffff;
}

Portfolio filter active tab style

The active tab of the fportfolio ilter draws users' attention to the current portfolio category they are visiting. Currently this filter has white text and a light background. 

We will go to the tab Advanced of the Filterable Portfolio module and add text to the default and hover states of this feature. Here are the CSS properties that we will add in a default state:

background: #ff6651;
color: #ffffff !important;

State on hover

On hover, we'll change the background to black.

color: #000000!important;

Final look of the design of Divi's filterable portfolio with "Divi Conference"

Here is the final look!

And now, here's what it looks like when you hover!

Customization of Divi's Filterable Portfolio module: "Divi Online Yoga Instructor"

As with the Divi Conference Edition, find your layout in the Online Yoga Instructor Layout Pack inside Divi Builder. 

We will be using the Landing Page Layout for this tutorial. Scroll down to the Section Classes section with the title Section All Upcoming Classes.

Inserting the Filterable Portfolio module

From here, we'll remove the rows with the classes. Click on the purple icon with three dots on it . Then, select the wireframe view. Finally, you'll delete the two rows containing three columns.

Then we will replace them with a single column in the row inside. Then, we will add our Filterable Portfolio module.

As in the previous example, we will use the grid layout for this module with a multiple of 4 for the number of posts. 

Now let's do something a little different with the information we present on the map. 

In the tab Content, navigate to Element  and deselect Show Categories . This means that the Portfolio module will only display the name of the project without the name of the category it is in.

Customization of filter criteria text, project title and pagination text

Let's define the style base for the text parts of our module. The body text of this layout is Without Open and the font used for the main headings is Cinzel. Therefore, we will be using a combination of these two fonts throughout the styling process.

texts

• Text Alignment: Centered
• Text Color: Light

Title text

• Title Font: Cinzel
• Title Text Color: #ffffff

Filter criteria text

• Filter Criteria Font Weight: Bold
• Filter Criteria text Color: #ffffff

Pagination text

• Pagination Font Weight: Bold

This is what our filterable portfolio module looks like right now. It's not much, but we're getting there slowly!

Create a translucent hover overlay

Let’s get inspiration from the different modules and beautiful gradients in this layout. For this, we'll create a translucent hover overlay and customize the icon that also appears on hover.

• Zoom Icon Color: #323741
• Hover Overlay Color: rgba (255 201 165, 0,85)
• Hover Icon Picker: search for a sheet and see the icon above

Adding border to portfolio grid elements with custom CSS

Similar to our first example, we will now use CSS to add more interest to our Filterable Portfolio module. 

Now we'll add a border around each individual item in the portfolio grid. Use the CSS snippet below in the custom CSS part of the page settings to add our border. 

We will also use “border” as the CSS class for this module.

• CSS Class: border

Custom CSS

/* Border */
.border .et_pb_grid_item {
border: 2px solid #ffffff;
padding: 5px;
}

Here we now have our Filterable Portfolio module with a nice border – and padding – around each grid item.

Added CSS to style pagination border

Unlike our previous example, let's add color to the border of our pagination with CSS. This will also go in the area Settings > Custom CSS page .

/* Pagination Styling */
.et_pb_filterable_portfolio .et_pb_portofolio_pagination {
border-top: 2px solid #adc6d9;
}

Filter criteria text style

Similar to the style of our Divi Conference Portfolio module, we want to add jazz to our category filters. Again, we want to draw from the style that is already present in the template provided to us. 

Here is the CSS we will add in our custom CSS section to target the background and hover of our filter bar.

/* Change background color of filters */
.et_pb_filterable_portfolio .et_pb_portfolio_filters li a {
background: none;
}
 
.et_pb_filterable_portfolio .et_pb_portfolio_filters li a:hover {
background: #ffffff;
color: #323741 !important;
}

With these two new additions to our custom CSS, this is what our Filterable Portfolio module is shaping up to look like.

However, notice how the active portfolio filter is lost. It always has a light background with white text on it. Let's go to the module settings and add some CSS to change that.

Custom CSS

Active portfolio filter:

background: #ffffff;
color: #323741 !important;

Remove module animation

To provide a cleaner experience, we will be removing the default animation that comes with the Filterable Portfolio module. For this we will first need to go back into our page settings and add some CSS that will target the portfolio grid elements and remove the sliding transition that happens out of the box.

Custom CSS

/* Remove transition */
.et_pb_filterable_portfolio .et_pb_portfolio_item.active {
transition: none;
}
</code><code>
.et_pb_portfolio_item {
animation: none!important;
transition: none !important;
}

Read also: Divi: How to change the number of columns in a Blog

Change portfolio grid from four columns to three

Our latest CSS addition will be to transform our Filterable Portfolio module from four columns to three. This will give us more room to see our projects. 

Also, we will add an extra line to our module. You will also find the latest CSS snippet that you can use to convert your columns.

Custom CSS

For this last snippet, we will add the CSS ID #three-column-grid to our module. We will still keep our CSS class from before intact.

/* 4 to 3 Columns */
@media only screen and ( min-width: 768px ) {
#three-column-grid .et_pb_grid_item {
width: 28.333%;
margin: 0 7.5% 7.5% 0;
}
 
#three-column-grid .et_pb_grid_item:nth-child(3n) {
margin-right: 0;
}
 
#three-column-grid .et_pb_grid_item:nth-child(3n+1) {
clear: left;
}
 
#three-column-grid .et_pb_grid_item:nth-child(4n+1) {
clear: unset;
}
}

Download DIVI now!!!

Conclusion

As with most Divi modules, the settings that come with Divi can be further developed with CSS. Showcasing your work is an important part of running an online business, blog, or brand. 

As such, having an organized way to display your work is essential. Earn tips that were shared today to take part in your own design journey of Divi's Filterable Portfolio module.

Hopefully this technique will add another useful design skill for future projects.

We hope this tutorial will inspire you for your next Divi projects. If you have any concerns or suggestions, find us in the comments section to talk about it.

You can also consult our resources, if you need more elements to carry out your projects of creation of Internet sites.

Do not hesitate to also consult our guide on the WordPress blog creation or the one on Divi: the best WordPress theme of all time.

But meanwhile, share this article on your different social networks.

...