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.
I’m going to switch this “Layout” to “Grid” and I’ve got about 20 posts in here.
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.
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.”
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.
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.
Now, jumping into the “Design” elements.
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.”
We can change the “Title Font,” the “Title Font Size,” you can change the “Title Text Color,” “Title Letter Spacing,” “Title Line Height.”
“Meta Font,” this is just all the information.
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.
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.