This SOP provides a step-by-step guide on how to set up filterable photo galleries using Divi. It covers creating categories for photos, assigning those categories to images, and adding the gallery module to a webpage for optimal user navigation.
Hey guys, um, there's a new feature in Divi where we can have these kind of filterable photo galleries. So, you can have a bunch of your photos of past events, and then maybe you don't want to see all events, you just want to see specific ones. You can add all of these different tabs in here just so people can filter through these. Now, I'm going to show you guys how to, uhm, create the categories in your photo library. and how to, uhm, add this module to one of your pages. Now, the first thing I'm going to do is I'm going to go to the media library. And I just have this open in a new tab, but if you go to the media tab in the library, you'll see it there. And I want to create a new category. So, here's the categories on the left. So, I'm going to click right there. And let me grab the category that I want to create. Now, the category can be whatever you want. Uhm, just know that this right here is going to be what people see on the front end of your website. So, that's going to be what shows on these tabs. So, you want it to be something that will help the end user know that, know what exactly they're looking at, but also help you in the back end as well. So, this is the title of a youth event. So, I'm going to add that, and then I'm going to add the new category. There we are. Uhm, and then I'm going to go over to the left. I'm going and I'm going to select all of the photos from that event, and then we're going to add those categories, or that particular category. So, I believe all of these are it, but I just want to double check. Okay, so now I'm going to do, go in and add these categories one by one. So, if you click on the photo and scroll down, you can select the category that you want. And then, you can just click through with the arrows. Unfortunately, because this is such a new feature, there isn't a way to bulk add the categories. You just have to do it one by one, like this. Which, that's not the best thing, but it is worth it. So, I'm going to pause this while I add those, and I will be right back. Okay, now I'm gone through and added that category to all of the images that I want, and so now I want to go back to this page. Now, since I just created the category, I need to reload this page to make sure it's added. Okay, so now we can hit the settings button right here, and we can see that there is a whole nother category that hasn't been checked. So we want to check that, and then it will add it to our list. So let me hit the checkbox, and then I can hit save. And then we should be able to see it on the front So let's reload this page. And here we go. So now we have that entire category in here. We have a load more button and all of that fun stuff. So now let's say that you love this feature, but you want it on some of your other pages. Uhm, I can show you how to do that very quickly. Now if you like all of these styles, uhm, we can hit these three dots and copy the module and then go to whatever page you want. Hit the three dots in another one of the modules on that page and then you can paste the module. See, there we go, we just pasted it and now we have two. It's going to make me scroll for a while. But yeah, now you can see that we have two. But, I obviously do not want two on the same page. Let me hit the check button. But let's say you're building one from scratch. Maybe you're working on a different site or you want it to be a little bit different. You can click this plus button. And I'm going to type in filter. And this is the one that we want. The supreme filterable gallery. So we're going to select that option. And it automatically defaults to all right here. And I want to toggle this on. And by turning on the use dynamic images, that's how we're able to do categories. And you don't have to select every single one of these. Let's say I have youth categories that I want to use. Or I have kid categories that I want to use them on the kids' face. I can show just those ones. So maybe I just want a Christmas themed box. So I can turn that on. Um, I can make it as many columns as I want. I'm going to make this one four. Now you can see that this image, they're all a little bit blurry. So what you'll want to do is you will hit this button and that makes it clear. So you want the large, not cropped. That's what we're going to use. You can also change the gaps. Like for this one, they're a little bit wider. So let's put in 50. There you go. Those are pretty big gaps, but we're going to go with it for right There we go. And then you can change the row heights and all that. I would probably leave that alone. You can kind of change the layout so that they're a more strict, uhm, I like the mosaic look, so that's what I'm going to go with for right now. And then you can kind of change all the elements that show. Uhm, none of these images have text, so we're going to turn that off. Uhm, we don't have any of this. I do want to use the lightbox, and I'll show you why in a moment. I'm not going to turn any of these on, but I am going to turn this one on as well. And then, if we, we go to Configuration, we can change the order of the ones that show. And all of that. Now, on this page, I'll show you what it looks like on the lightbox. So, when you hover over, you can see it zooms. That's one of the features. But if I click on them, it'll kind of let me click through the images like that. So, it just gives your user options. Now, if I don't update one of these areas, it's going to limit the amount of photos that it shows. I'm going to change it to ascending, um, but it's, right now, it's only showing 10 photos, and it does not care that I have multiple categories in here. It's only showing that one because I don't have this number changed. So, I'm going to change this to a higher number. There you go, and you can see that second category popped up. Uhm, I also want to check the elements. I do want to turn this one on, I lied. And that just makes it so that they can filter and see all event photos. And, you can change the text, so, like, uh, Christmas photos. See, you can, it, it changed that tab right there. Now, the, uh, pretty much the only other thing that you'll want to style is the text. The category tabs. And I typically, you can see that I styled these to look like the buttons on the rest of the site. And that just kind of makes everything go together. So we can go to our colors. This is that blue. And this And then I'm going to change the text to the same blue, just so that they go together. Uhm, I can increase the margins a little bit. And that just creates more space. And then I want that text to be a little bit bigger. There we go. Now it looks a little funky because I have sharp corners and around the rest of the site I have rounded corners. So let's scroll down. Don't type in a hundred right here and that will give me that oval shape. Now if I wanted a border on the buttons, I can do that too. There we go. And the border will default to the same color as the text. So on this one, it's white. On this one, it's blue. I can make it blue on all of them if I want. Here we Um, the only other thing is the load more text, which I forgot about that and the elements. So let's scroll down. A little bit. There we go. That's what this is. And that's that load more button. So I want that to match what I have up here. So I'm just going to go to design load more. And I'm going to increase that padding like I did. Uhm, you can make it align to the left, the right, or the center. I like the way it's centered right here. Just because that's my taste. And then we can change this to 20. And you'll see that it made the text bigger down here. But I want to change this to, whoops. You can see it doesn't really matter either way. There we go. Now I can change the border. The global blue that I've been using and I just realized that I forgot to change the text color as well. There we go. And there we go. So that's how you add all that. That is a lot of steps to do without hitting this check button once. So you might want to change one or two things. Hit the check button and then open the settings again because you don't want to change a whole bunch of things and then lose it because your internet's too So that's how you add that. If you have any questions at all, please let me know. But other than that, you have a great day. And as always, don't forget to hit your save button.