Enhancing some of the stock Divi modules is easier than you think, with just a little bit of code, we can make some pretty awesome changes to give your Divi site more of a custom feel that wows your clients! In this week’s tutorial, we are going to show you How to Add a Filtered Portfolio Triggered by any Divi Module using jQuery and CSS.

You can use the tutorial to have the stock Divi Filterable Portfolio Module filter the Projects by clicking on a Blurb Module, Text Module, or any other Divi Module you decide. We will also talk about the code a little so that you can even further customize the way your Filterable Portfolio Module works and is displayed.

Video Tutorial

Adding Projects to Your Portfolio

The first thing we need to make sure of is that you already have some projects assigned to categories on your Divi site. You might already have them set up, but just in case you do not, follow the steps below to get set up for the rest of the tutorial.

Create Project Categories

Head over to Projects > Categories > Then Add Your Categories.

Make sure to make a note of the Category Slugs, because we will use this in our code and layout.

Add Some Projects

Head over to Projects > Add New¹.

Add a Title², Description³, and Featured Image⁴.

Assign a Category⁵.

Publish⁶ the Portfolio.

Repeat this process until you have about 4 Portfolio items for each category.

Create and Style Your Filter Trigger Modules

So we need a place where we will display this unique Filtered Portfolio Triggered by any Divi Module. so you can either use an existing page that you have created, or you can create a new one from scratch. Whichever you choose, we suggest you place it in it’s own section on said page.

Add a Divi Filterable Portfolio Module

In a new single column row, add a Filterable Portfolio module.

On the Design Tab, set the Layout Style to Grid.

Head to the Advanced Tab and add the CSS Class divi-engine-filter, which we will be using in our code.

Under Custom CSS, scroll down to Portfolio Filters, and add the line display: none; as we are busy replacing that with our very own fancy filters.

You can style the rest of the module however you like.

Add a Divi Text Module

In a new three column row, add a Text module in the first column.

Type the Name of the first Category you created earlier in the Body.

Head to the Advanced Tab and add the CSS ID which is the same as your first category slug , this was filter-item-1 in our example, but your will be whatever you set it to.

You can style the rest of the module however you like.

Now make 2 copies of this text module and drag each one into its own column.

For each copy, change the text in the body to reflect the Category name, and change the CSS ID to the appropriate slug for that Category.

Open the Settings for the 3-Column Row and on the Advanced Tab, add the CSS ID custom-grid-control. Our jQuery will wait to see if we click on any of the filters in this row.

Add the Custom jQuery

Now it gets interesting, we are going to add some jQuery which will wait for us to click one of the trigger modules that we created in the previous steps, and then filter by that Category. We will also use some magic to add a CSS class that will indicate which filter is active.

Add a Code Module

Add a Code Module below your Filterable Portfolio Module.

Copy and Paste the code below between opening and closing <script> tags in the code module.

You need to modify the code on lines 4, 5, and 6 to match your Category slugs if they are different from ours.

Add the Custom CSS

To make sure that everything works correctly and is displayed as we intend to, we need to use some CSS to pull it all together.

Add a Code Module

Add a Code Module below your jQuery Code Module.

Copy and Paste the code below between opening and closing <style> tags in the code module.

And that is it, if you now publish and view this page on the frontend, you should have a shiny new filterable portfolio that filters when you click on the text modules.

You can modify the code in the CSS Code Module to change various visual elements.

For example, if you changed the width property in the .divi-engine-filter class from 25% to 33.3%, you will have 3 columns instead of 4 columns.

You can also make changes to the .de-active class to change the way you indicate which filter is selected.

For more on that, or if you get stuck, definitely check out the video at the top of this post.

You can also download a working version of this layout by checking out this post -> FREE Filterable Portfolios Layouts for Divi.

Filter, ENHANCE!

Conclusion

We really hope this guide on How to Add a Filtered Portfolio Triggered by any Divi Module will be a great asset to your workflow in creating some amazing websites. Be sure to check out the video at the top for a little more details and an explanation of the code we used. It can also be helpful if you get stuck.

Until next time, folks!