This tutorial will show you how to add a filterable portfolio to your web page using the Divi Visual Builder for WordPress.  This module is great for showing off your work quickly and easily.

Take A Test Drive

Sign up for a 15 day free trial to our powerful WordPress Hosting Platform.  Take advantage of everything we have to offer for free.  No credit card required!

Text Version Of This Divi Tutorial

Hello, this is Jimi Blevins. Today I’m going to show you how to: “Add A Filterable Portfolio Grid To Your Website Using The Divi Visual Builder.”

So, let’s jump right in. We’re going to add (+) our filterable portfolio module by clicking on the gray plus (+) sign and searching and selecting “Filterable” module.

HowToAddAFilterablePortfolio

I’m going to switch this “Layout” to “Grid” and I’ve got about 20 posts in here.

HowToAddAFilterablePortfolio2

I’m going to bump the number up to 20.

Here in the “Include Categories,” this is where you could set which category so if I wanted the “Desktops,” and the “Landscapes” to show up, I could just select those two categories.

HowToAddAFilterablePortfolio3

A side note here, these categories pull from your project files, so these don’t pull from posts or pages.

These pull from your project, so to have these populate you need to set up projects to have them show up here.

So, next thing we’re going to do, we can turn on or off the “Title.”

HowToAddAFilterablePortfolio4
We can show which category that it’s in, we can also “Show Pagination.” (Which won’t be necessary, so I’ll go ahead and turn that off.)

Add in both of these categories.

HowToAddAFilterablePortfolio5

 

What this portfolio does is, it allows you to filter based on selecting the categories up here. Just a way to organize anything that you’ve got in your portfolio. Let’s say you’re a photographer or a web designer, and you want to show off some of your work, this is a great way to do it in a format that people can easily get to what they’re looking for.

HowToAddAFilterablePortfolio6

Now, jumping into the “Design” elements.

HowToAddAFilterablePortfolio7
The “Hover Icon,” this is the icon that shows up when you’re going for the to view the images or be the project.

We can also change the “Hover Overlay Color.”

HowToAddAFilterablePortfolio8

We can change the “Title Font,” the “Title Font Size,” you can change the “Title Text Color,” “Title Letter Spacing,” “Title Line Height.”

HowToAddAFilterablePortfolio9

Meta Font,” this is just all the information.

HowToAddAFilterablePortfolio10

Then, of course, we can also mess with the filter, text filter for tonight. These are for these elements up here.

I can add a “Background Color” or “Background Image” to the entire module.

I can also “Use Border,” and this will just put a simple border around each individual picture.

HowToAddAFilterablePortfolio11

That pretty much goes through all the options in the “Filterable Portfolio Module For The Divi Visual Builder.”

Once again, I’m Jimi Blevins and thank you so much for watching.