 Creating filters like this for your blog posts where we could filter out the different categories and tags. Well, this used to be kind of a pain. I mean, I used to have to add a plugin for this or I would have to find an alternative hack which turned out to be a whole lot of work and was a headache. That pain has been relieved. We now have a solution and it's built right into Element or it is one of their latest features and this is called the taxonomy filter. So let's take a look at it and I'm gonna show you how it works and how to get started. To get started, there's a few things we need to do first. Let's go over here to Elementor and to our settings. And then from here, go over to your features. We gotta make sure a few of these are activated. So make sure your Flexbox container is active. Then we need to make sure over here the taxonomy filter is active. Now these are both inside beta but coming up inside the next update 3.16, Flexbox container is gonna be out of beta which I'm really excited for. And I have tested this, keep in mind this is still in beta but I've used it and it works pretty well. I haven't seen any bugs in it. There's one more thing we do need to turn on though. We gotta make sure we have the loop or the loop builder activated because the way the taxonomy filter works, it only works with the loop builder. All right, next up, I'm gonna go over here to my templates and I've already built one out just so that way we could go faster. It's gonna be an archive. And now the archive is where we have all of our blog posts. It's like the blog page that shows all blog posts. So I'm gonna select on edit with Elementor and I already have my page built. This way we could just focus on adding the filter. Now first, let's take a look over here to what we have. Inside our container over here, all I have is the outer container and the loop grid. That was it. So I just add in the loop grid and I set it up. Now, if you haven't set up a loop grid or don't know how to use a loop builder or the loop grid yet, I'll put a link inside the description and one somewhere up above here that shows how to get started with the loop grid and loop builder. Here now you can see on my blog posts I have the categories on it and these tags like I got this web design, this Elementor Tuts, SEO, Creative Business. These are the different categories that I have and we're gonna create a filter for them. To do that, let's go over here to the widgets. Go ahead and just type in tags and you're gonna see the taxonomy filter come up. I'm gonna drop this filter right here and if you take a look, I wanna keep everything clean. Just one container, the taxonomy filter and then the loop grid, super, super clean. So I'm gonna drop it in here and then over here inside our editor, you see it's asking for a loop grid. It only works with the loop as far as I know. Go down and select it. Now this is the loop grid that I created and then I need to choose what do I wanna filter? You could choose either categories or tags. This I'm gonna go with categories since those are all my categories and we could see it now over here. Now we could choose different directions on them. We could go vertical, which is great if we're gonna create, say, a side by side section. Say you want all your blog posts here on the right and you could create a sidebar or we could have it on top as well. And it's really good that they do give the option for responsiveness on this. This has, it's got a very simple feel to it but as I tested it and I've used it, it has been very well thought out at the same time. I'm really digging this right here. I think this is really well done. So next thing over here, we got our alignments. For this case, I'm gonna align it to the left. We could also stretch it out if you wanna full width and then we're gonna look at setting everything up. There's a couple other features inside of it and then the styling it up. So that way it looks dope. All right, I'm gonna give this padding. Let me go ahead and give it 40 pixels. You know, I'm gonna use rim. I'm starting to use rim more for my padding. So I'm just gonna put a four rim right here. Let's give it some good space. I'm gonna go back over here. Now, I'm gonna align it to the left and then let's go through these settings. First, we wanna make sure that the empty items stay off. We don't wanna show them. You see if I turn it on, now you can see I got that, you know, that default category that comes with WordPress uncategorized but since I always give a category to all posts, we could go ahead and turn that off and it's not going to show it. Same thing with taxonomy children. Some of these might have different levels. They might have a child category. We could either show or hide those. And then we could also add the first item. Now the first item right here is going to be all. We could change it up. Either we could hide it or we could go ahead and put in our own custom text. All posts, you know, put in something like that. We could also limit the number of taxonomies. Super, super useful because maybe you might have like 20 categories. You don't wanna show all of those. So maybe you just wanna show like your top five right here. Let me go ahead and put down three and then we can see how it just shows the top three. Now, if you wanna change the order of these, you could do all that inside of your backend. You would go back over here inside of your dashboard. You could go to your posts and your categories and then you would change these around this order right here. Next up, we have this horizontal scroll. And again, this is just something that was very well thought out. I'm glad that they added this right here. This is gonna be great for mobile because let's say we have like 10. Let's say you got 20 of them. Well, what this does is it allows, I'm gonna enable it. It allows you to scroll or swipe it, you know, left and right. And that is it for the settings. It's very simple, doesn't have much but it has just what we need. I think this is very well thought out. I really do like this right here. Now, let's go over to the style because things are a little bit different over here. Now, first off, there's this already default spacing and I'm not a fan of default space because I wanna have a system around the way I space things. I'm very meticulous inside that way. So I always go over here, I start off and just put padding to zero, not a fan of default padding. So let's set it to zero and now we can control our spacing and this way we can keep everything consistent. So I'll put it to 40 pixels. In case if you are using a design system, this helps out a lot right here. Let's go ahead and set up our typography. I'm gonna use my button text and now we could do, I'm gonna show you a couple of different styles. I'm gonna show you a clean minimal style and then also a pill type of style right here. So if you wanna keep it minimal and clean, let me set this up black right here. Hover, I'm going to make it this blurple color right here and then active. Let's go ahead and also turn the active color. So, and you can see it working right here. It works pretty fast. Which is really good, all right? We got that. Now let's go back over to normal. Actually, let me see, I wanna go to active. I wanna put an underline. So I'm gonna put a border solid. Let me put two pixel border on the bottom. I'm gonna make this blurple as well. And now we got this clean minimal style right here of a filter. You know, you could do other things as well. You can make it into a bar. You know, we could go ahead and do that simply by, let's remove this padding right here. Or we could just do one, two. Yeah, we could do that. I'll go ahead and add some margin right here. Let me go back to my rim, put a margin and then I could go to my background. Put a background color. Let's make this just a little dark right here. I don't wanna make it too dark. So this is a pretty clean and easy to use style right here. You can see how quickly it works. So this is a bit of a minimal style, but let's say you wanna do something a bit more creative and create like a pill shape tab for this. I'm gonna add a background color. Let me put green right here for normal. Okay, let's go ahead and add some padding right here. All right, I'm gonna put four and I'm gonna put 20 and 20. On the right and left. And let's add a border radius. I'm gonna put 50 all around. You know, I'm going to create a little bit more padding on the top and bottom. All right, so now we got our pill shapes and yeah, we could click around on it. All right, next up, we just gotta do the hover. Let's do the background on the hover. What should we make this one? Let's make it purple right here and then same thing for active. All right, we'll make it this purple right here. You know what, I'm not really feeling that. I'm going to go take this to my primary white, make my background color blurful and then I'm gonna do the same over here. I'm gonna make my text white for hover. I'm gonna keep my hover and active the same always, but here we are, we got our filter. Let's take a look at it in the front end. I'm just gonna save and close. I'm only using this for a touch so I'm not assigning it to any page, but here we go, check it out. It's easy to use. This takes like literally just a couple of minutes to set up and they did it the elemental way, definitely focusing on ease of use. All right, so this is only the first look using default WordPress blogs and this is still in beta, but I haven't found any issues or bugs yet. Coming up next, I am gonna be testing this with Jet Engine to see how compatible that is gonna be. I'll let you know how that goes. And if you do wanna know more about loop builders, a loop grid and blogs, well, I got a lot more videos planned, specifically aiming towards blogs and loop grids, so make sure to subscribe. That way we can get notified when they do come out. Also, if you found this helpful, don't forget that YouTube stuff and hook this video up with a like. It does help out with the whole algorithm thing and all that. That is it for this video. I really appreciate you watching and I will be back again soon. Thank you.