 Do you also get bored with the same three options that we get in Elementor's Post Widget? Not much room to be creative there. And then you might be like me and try using other Elementor add-ons for their blog post widgets. That way you could add more style and do more as far as how you're gonna show your blog post grids and sliders on your website. Problem is, no matter what widget we use, we're always stuck with whatever options they give us. But what if I were to tell you, there is a really easy way for you to build your post grids or your post sliders. Even your WooCommerce product grids and sliders, you could build them any way that you want. You could structure them, you could, anyway, any way you could imagine, you could build it. Well, you can. And I'm gonna show you how to do that inside this video with Jet Engine and using their listings. This is gonna be so easy and I guarantee you, once you see how to do it and how easy this is and what the possibilities that you have with it, you're not gonna go back to any add-on or even use the default post widget because now we could build our blog post the way that we like. Now, if you've been following my channel and you know me, you know that I try to show how to use Elementor without relying on add-ons. And that is because I choose not to rely on add-ons. I wanna keep my websites fast and clean. But still, using Elementor, one of the benefits are there are some really great add-ons to use. Jet Engine by far is the most used add-on that I use whenever building Elementor websites. So if there was a must-have add-on to get, I definitely would go with Jet Engine or even the whole Croco Block Suite. So if you already got Jet Engine and you already got Elementor, well, you're ready to go. And if you don't yet, there are links inside the description. All right, let's go ahead and get started and have some fun. And this is a website we're gonna add our blog post grid on. So if we go down here on the bottom, we got our latest post section down here, let's add our grid. So I'm gonna go up here to edit with Elementor. And just for reference, let's go ahead and add in Elementor's default post grid. So I'm gonna go here to my widgets, put in post. And we're gonna see here, here is our post widget. Now by default, we have this layout right here, which is our classic skin. We also have the cards. And then we have the full content. Full content is basically unusable. So I feel like really there's only two options. And here are the limitations right here. So here we can style it up and make it look cool. But we can't really change things. For example, we have the terms up here. We got our categories and that's pretty cool. But if we wanted to use the classic, we don't have that option right there. And let's say you wanna put the date on the top and you want the title down here. Well, you can't rearrange that. How without writing a bunch of CSS? So we are gonna build our own and structure it the way that we want. If we want the date on the top, we could put the date on the top. However we want it, we're gonna be able to build it. So let's do that now. All right, I'm going to delete this and let's go back to our dashboard. And here I already have JetEngine installed. After you've installed it, you're gonna see these options here. We're gonna do this in listings. So select on listings. And from here, click on add new. And we have a few options here. We're gonna leave it on post because we are pulling post queries. And then here we have the post type. Since we're gonna be doing one for our blog post, just leave it on post. Now, when we do do one for our products in WooCommerce, then we would select on products. And there's a whole lot of different options. We could also use custom post types. That's getting into more advanced and that would be a whole longer tutorial. We're gonna stick to just making a blog post grid for this tutorial and a WooCommerce product grid. The R timestamps down inside the description so you could jump around or come back to find the sections that you need. All right, let's go ahead now and give it a name. I'm gonna call this post grid one. And then we could choose, we could do this either on Elementor or Gutenberg. We're gonna leave it on Elementor because we are building our site on Elementor. What we are gonna do here is we're gonna create just one grid item. That's all just one. And with the listing widget does, it's going to repeat that item for us, making it a grid or a slider. So let's go ahead and get started. I'm gonna first start with an image here and let me use a dynamic tag and I'm gonna put post featured image. Let me go ahead and style this up a bit really quick. I'm gonna make this 300 pixels height and I'll leave it at the max width and I'm gonna set this to cover. Next up, let me go ahead and add our post title right here. I'm gonna use a heading tag and then I'm gonna click on the dynamic tag and select post title. I'll style it up really quick. Let me go back to the column over here and remove the spacing because I'm going to do a few things here. Next, I wanted to add the date above the title. That was one of the things I couldn't do on the Elementor post widget. So let me do that. I'm gonna click in terms right here. I'm gonna move this post info. I'm gonna put it above my title and this is just me playing around right now. I'm just showing the possibilities of what could be done. All right, let me go ahead and set this up. I don't want any icon on it. Let me fix my text, give it a color. I'll go ahead and give it orange. Let's just now, let's make it blue and give it our settings here. Let me add some spacing underneath the image. All right, and now I'm just gonna add a read more button right here. So let me put a button and then here as well, I could go ahead and click on dynamic for the link and we're gonna do post URL. And let me put read more. Let me add some spacing here. All right, let me style this up a bit so it looks kind of cool. And now I wanna add the category tag. I wanna put that up over here above the image. I think it looks cool showing the categories. Let me go ahead and do that by typing in post and we're gonna use the post info widget. I wanna put this above the image. Let me click off these three. I'm gonna go here and I'm going to select terms. And then I am going to choose categories. And let's remove this icon and style it up. All right, I want this to stand out a bit. So let me go ahead and use my global styles. I'm gonna go here to my width, put it in line right here, add some padding on it. Let's do four and then maybe 20 and 20 on the right and left. And now let's add some background color on this. Gonna give it that dark blue so it stands out. And I'm just doing this quickly to show how this all could be done. Let me do a negative margin on the bottom to pull it down. All right, it's hiding behind there. So we wanna go over to Z-index and put it on top. Let me just go ahead and put out one. If one doesn't put yours on top, then move up to 10 to 100 in order to put that element on top. And now we already have something built that we just could not do with Elementor. And again, we could do this any way that you want. You could structure it, build it. You are essentially building your post grid here. Now, let me show you how this all works. Let's update this. We're gonna go over to our Elementor page and our homepage right here. I'm gonna refresh it. Let me go back down to where we're gonna add our blogs. Now, go down here to your listing elements and we're gonna use the listing grid. This is where the magic happens. What this listing grid does, it takes what we built here inside our listing and it repeats it. So if we're using blog posts, it's gonna repeat the style through all the blog posts. If we're using WooCommerce products, it'll repeat it through the products. There's much more. We can use custom post types, listing websites, real estate websites, all kinds of things. Now, we're gonna keep it simple on blogs and WooCommerce products right now. All right, so go back to the homepage. And in our listing grid, we wanna go here to our listing, type it in the name and we wanna select that name. And you see, our blog posts now have been generated here. And then we have full control down here on how do we wanna display it? Do we want four? Do we want three? We can set it up for mobile. We can go through. We have all these options right here, equal height. We could go ahead and set this to be equal. We got the load more. We could do it by infinite scroll. We could do it by click. So we have all those options we will find inside like a post widget normally, but we also have a lot more in here, especially when it comes to the post query and the terms query. Now, that's a whole other tutorial. There's a lot to unpack in there. We're gonna keep this one easy, something that anybody creating a post grid could use right now. Now, one of the thing I would like to show you is the slider. Now, we could also turn this into a slider as well. All right, and let me show you again, just a little bit more on how this works. If we go back to our post grid, let's say we don't even want something in the blog post. We could put anything in here. And let me just show you what I mean by anything. Let me put in another text widget here. We can add anything and it will loop. Let's go ahead and update that. And if we go down here, now whatever we put in here is gonna automatically repeat and loop. But as long as we put a query in here, like a post query or product query or even custom post type, it's gonna pull that data and that's how we get these right here. And one thing I like to do as well is I like to make my changes and updates right here inside the list. Like, let's say I want to change this text right here. It's a bit light. Let me go here and change it to something more thick, update it, and then you're gonna see the live changes happening right here inside your grid. With this method here, we could do whatever we want. There are so many possibilities. You could create a sidebar list. You could create something that's vertical and stacked. You could create a big image with the title on top of the image. There's so much that you could do. So it's just like building out an Elementor page except you are now building out a section for your blog post grid, one individual item, and then you're gonna repeat it using JetEngines listing grid widget. All right, now let's go ahead and check out WooCommerce products really quick and see how that works. We're gonna go back to our listing items. I'm gonna add a new one. We're still gonna leave the listing source at post, but for the post type, we are gonna go down here to products. And let's add this WooGrid. We're gonna leave it on Elementor, but again, we could do Elementor or Gutenberg with this, which is super dope. All right, let's create the listing and let's build our product grid. So I'm gonna do a section right here. I'm gonna start off like I did with the other one. I wanna make this small just for the visual. I'm going to add an image up over here. I'm gonna go over here to the dynamic tag and down here, I'm gonna go to WooCommerce and choose product image. Now I can style it up. I'm gonna change the height to 300. Let me make sure the width is at 100% and then I'm gonna change this to cover. Now let me go ahead and add the product title right here. Now you could do this with the heading widget and just use a dynamic tag. You could go here, let me scroll down to our WooCommerce section and we could put in the product title. And let me style this one up really quick. I'm gonna change text color just so that way it looks decent right here. Now I wanna go ahead and add the price. Again, I'm gonna use the heading widget here. Also make sure to change the HTML tag so that way they're right. I would use a div right over here. On the product title, I would use an H2, that's all good. Right here though, let's go back to where we're gonna put our price and we're gonna use the dynamic tag again. Scroll down to the WooCommerce section, put product price right here. Now let's style this one up also and I'm going to, let me see, give it that color right there. I'm going to fix my widget spacing here in my columns so I have more control over it and I could go to my image and let me adjust the padding on the bottom of my image. Same thing on my title. All right and let me go ahead and add a buy now button. So we'll scroll down here to our WooCommerce section and now we could add the add to cart button. We're gonna put that right down over here and let's style this up a bit right here. Let me add my button text right here. Let me change the text color. I'm gonna put white in the background color. I'm gonna give it this navy blue. My border radius was cleaned that up right there. Let me add padding down here. Let's go ahead and click on update and put this in our front end and now I'm gonna do the same. Go down here to the listing grid widget and let's drop the listing grid widget down here. Underneath listings, it was WooGrid. All right, select that. And now we got our products. I only got two products that I put on this demo site right here but all your products will generate. And the same thing, whatever you add in here you could add in, let's see here on the top. Let's add a category tag right here. Go back down to WooCommerce, product terms. Click on product terms and we're gonna use product categories right here. Let me go to advance, remove this B4 text right here. I'm gonna change this right here to an H4. I'm gonna fix a color on it. Let me put an orange. Let's use some tiny text. Let's use some padding right here. I'm gonna make this inline. Let me give it a background and then I'm gonna use a negative margin on the bottom to pull this over the image. And let's make sure to give it a higher index. And there we go. We got our own grids that we built for WooCommerce. Same thing, we can make this into a slider as well. That's it. Now the freedom is yours. You could create your product grids, your post grids, any way that you like without having to write any code. And if you think this was cool, well wait until I show you how we do this with Bricks Builder coming up next. Now I do have a tutorial coming out this week showing how to do this with Bricks Builder with the query loop builder, which is the same functionality that is just built into Bricks with no add-ons needed. And I know a lot of us Elementor users are praying for Elementor to build this into Elementor where we won't need Jet Engine in order to do it. So I am gonna have that coming out this week. I'm also wanna do a comparison between the two for the Elementor users that are also experimenting with Bricks. So if you like this, then make sure to subscribe, like, drop your questions aside of the comments, I get back to everyone, and I'll be back again soon. Thank you.