Divi Filterable Portfolio - The Basics

hey it's tom from wpwithtom.com and in this video i'll be going over the basics of the divi filterable portfolio module [Music] so before we dive into the tutorial here i just wanted to say that i have a special affiliate link discount for 10 off your purchase of divi if you don't already have it i highly recommend checking it out and you can go to this discount through wp with tom.com divi and i also just wanted to mention that i'll be covering every one of the divi modules on my channel here in a big playlist so if you're interested in seeing more of these module tutorials on the basics of how to make things with them be sure to subscribe to the channel and with this quick intro out of the way let's dive into the divi filterable portfolio module so if you're unsure what this module is it basically allows you to display different images from a portfolio that you can show in different ways by going through the category so i'm going to go into that a little bit here so let's just go down on this mock website here i'm going to go and click add new section i'll make it a regular section and i'll just make it a single row right here and then once this adds we're going to have an option to insert our module so we're going to go down to filterable portfolio and we're going to click on that so by default mine adds in right here and this is what it looks like with these images so what i'm going to do is i'm actually going to show you how to add the post here or the projects here and then i'm going to go through the process of editing this so right now i'm going to just go back into the dashboard here and then we'll go down to where it says projects here on the left side of the dashboard now if you don't know how to add media files you're going to want to add files firstly media add new and here i've added a bunch of different things within the actual library right here and i've added these different logos for different companies so i'm going to go through how to make those in this example and i'm going to go through the process of adding a couple more so if we go to projects right here you can see all the projects that i have right now there's 10 in total i'm going to go and click add new and i'm just going to show you how to add a couple for yourself if you don't know how to do this already so right here i'm going to go over to featured image and i'll select the featured image and i'll use one that's already in the library here so i'll use twitter and then i'll just insert this in as the featured image i'll make the title also say twitter and then over here is an important part so where it says categories you're going to need to either add new categories or select existing ones so i'm just going to go and add a logo right here and then i'll click publish and basically that means when we go to the logo section over here it will be under that section but it won't be under design and seo in these other categories so now if we go back here to view post you can see that twitter is now here and i'll just go and add the last one that's going to be youtube as an example and i'll add a title youtube right here and i'll go over and i'll make it say logo set featured image and i'll add in the youtube icon as well and i'll publish that so that is how you would add it with the categories and it pulls from these categories to make up this feature here in this filterable portfolio so what you can do here within the filterable portfolio is you can choose the number of post counts so i'm going to move it and put 12 right here and here you can choose which ones are included you can actually select all of them if you want and i'm going to go over right here to where it says design i'm going to hop back and forth here but i'll go over to design real quick i'll change the layout so it says grid and now you're going to have a better view of the different icons that are going to be displaying so this is when they're all displaying right here and then if you want to only design only these ones under design would display logo i've made all of them have the category of logo and then seo only these four would display for seo so it depends on which category you click for what shows up here so if we go back over here to content we can go through the process of changing this so if we go here you have these options and then another option that you might want to consider if you go down to elements under content is you can display the categories or not so right now it says logo logo and this one says design logo seo so if you wanted to remove the categories now it just says the name of the image which is the name of the company that the logo is featuring here so i like it without the categories displaying here but you can still pull by the categories when you filter so it's up to you if you want to have that or not pagination if you displayed more than 12 so let's just say you actually only want to display six here but you have 12 different images or projects that you want to display here it would say page 1 page 2. so it's an option to have that since i have 12 images or projects and i'm only displaying 12 i don't need to even worry about this but that is something you might want to be aware of and you can choose to display the title or not i'm going to leave the title there in this case so next i'm going to move over to design i already went to layout and changed it to grid which we're seeing right now and then we have a few different other options so if we were to go down and go to overlay right here we can change the overlay so if you see when we hover over an image it changes it to this white background you barely can see the icon anymore with this blue button on top so right here the zoom icon color is actually this one if i want to click on add color and let's just say i make it white you can see that now it's white over it you barely can even see the icon but if you went and changed the hover color right here right now this hover color is this white color you're seeing around you can change that and the rest of my site is orange so if you see up here it's this orange color in this mock website it's orange and white so what i'm going to do is make this an orange color i'll probably make it a little bit different color than what it is right now and maybe i'll make it a little more transparent so when you hover over it you can see this orange with the white button it's totally up to you how you want this to look but you can change it as needed to fit the style of your website i just want to show you how to do that real quick right there and then if we wanted to go down a little bit more we can go down and go to the text area right here and here i'm going to go text alignment center and that's going to center all the text under these images it's also going to center it up here as well within this section so now we're centered up here and we're centered under the images i really like how that looks overall next i'm going to go down to the title and we can change things like the title font right here you can change to all different fonts there's so many different options within divi you can change the font weight as well so in this case i'm going to just go and make it semi-bold underneath there you can change that if you want as well do something different and after you've made a change and you're happy with that i'm actually going to go up and close this and go down to where it says filter criteria text so right here that's going to be this text up here so if we want we can make this bigger i'm going to go and just make it bold for now i'm going to change the text color to be a little bit of a darker orange color to fit with the site a little bit better so i'm going to go and just pull this wheel over drag it over until i find a color that i like i'm going to make the font style all capitalized i think it looks a little bit better like that and i will also go and change the font make it a little bit bigger so i'll just go with i don't know 18 pixels here i think looks pretty good and the letter spacing right here is going to affect the size of this so you can see when you adjust the letter spacing it changes the look i'm going to go and i'll just make it 3 in this case here we have the line height and if you do that it's going to increase the size of these little boxes so if you see if you went like this and make it larger it makes the bar the boxes around it larger as well i'm going to go and i'll just make it 1.8 in this case so you can see pretty clearly how that looks and if you want to you can go through and edit other settings within here maybe the animation or something like that but i'm just going to go and click save changes for now and i also just quickly want to show you one thing before i wrap this up so you can see that some of these images like this one over here has a white background by default and this chrome one right here if you wanted to make it stand out a little bit different or a little bit better you can go right up here in the section settings go to background and you can change the background color right here so it stands out a little bit more than just having the white on white where you can't really see where the border of the icon is in this case so i'll just go and click save right there and now again if you want you can go and click through these so design which are these ones logo would show these ones and seo would show these ones again that's all based on what the categories are so if i click on chrome right here and i go into the categories it's in all three so that will display in all three see it's in seo right here it's in logo over here and then in design as well so it's right here but if i were to take it out of one of these three categories it would no longer display it so that's how it works it's very simple and straightforward and to make the final changes go into effect you want to make sure you save it down here once you're happy with the final design and look of your filterable portfolio module here so i really hope this helped and you enjoyed this quick video here about this module if you did enjoy it please consider giving the video a thumbs up and subscribing for more wordpress and divi related tutorials thanks for viewing and have a wonderful [Music] day [Music] you

Channel: WP Venture

Views: 1,921

Keywords: Divi Filterable Portfolio, divi filterable portfolio module, divi portfolio, filterable portfolio module, filterable portfolio divi, filterable portfolio, divi module, divi

Id: xXmdyjBTTUI

Length: 10min 18sec (618 seconds)

Published: Wed Dec 16 2020