 Last week we got our first look at Elementor's new Loop Builder coming in the 3.8 update. And I couldn't wait to geek out on it because this is a feature I have been waiting for and hoping for for a long time. So what I did was I wanted to put this through a real test. I really wanted to thoroughly test it out. I wanted to find out its possibilities, its limitations. I want to find out its pros, its cons, what do I like and what do I see that I would hope would be added or fixed in the future. Now for my tests, I also tested it out with JetEngine. I wanted to see how does this work with custom post types, content types, also WooCommerce. Now I know that WooCommerce isn't supported yet. The Elementor team did say that is on the roadmap and they have plans to add WooCommerce support later on. But still, I just wanted to see how it worked. And just one thing really quick, it's important to know that the 3.8 update with the Loot Builder has only rolled out to Elementor cloud websites. Elementor though did say it'll be a couple of weeks and everybody will be getting the 3.8 update. And if you are watching this couple of weeks after I made this, well, then you got it already. You're good to go. What's up everyone? I'm Jeffrey at Lightbox and I'm looking forward to showing you a closer look at Elementor's Loot Builder going through this tutorial and then also sharing with you my feedback, my pros and cons and my final thoughts. All right, let's go ahead and have some fun. For my tests, I use this website right here and I created several different grids. So this one, the first one, I created what was a basic grid right over here. I wanted to try out some different styles, but then I also wanted to put like a sidebar list right here that is vertical. This to me is really important. This is useful, especially inside like single blog posts and things like that. The second test that I did was going to be creating something a little bit more creative, something I've seen a lot of post skins use and this is this style, a grid right here. So I was able to achieve this and I did not write any CSS while doing this. I did it all with an Elementor Loot Builder. The third test was what looks like a basic grid right here and having the load more. But what I wanted to do on this one was I wanted to test out how does the equal height work? How does it work if we wanted to put box shadows or if we wanted to add borders or backgrounds? And that's when I found out that equal height does not work on this. So that is something that I hope gets added later because right now, if you were to add box shadows, borders, backgrounds, it's going to look all off. Unless if you use a workaround like setting a minimum height to the column, but that is terrible for responsiveness, I don't like that method. So right now, I don't feel like it's really good to add a border, a box shadow or background color. So that was a test behind this one. Then the next one, and this is the one we are going to do together, and that is building the archive page. And again, we're going to use different types of layouts right here. We're going to pair together these basic two right here. They're like basic grid styles with a large grid and then with a vertical list right here. And I use self.com as my inspiration. Now part of my design process is I'm always looking at design. I love design. So anytime I see a website that I love, the design is dope. I always bookmark it and I have my folders for it. This is one whose blog I think is just really awesome. And my experience from replicating this and building this page right here was that it was so easy and so fast, especially after I built these other grid layouts right here. By the time I came to this archive page and got used to the loop builder and how to use it, I was just blown away by how easy it was and how quickly I was able to build something like that. So let's go ahead and build this page really quickly. So we're going to go back here to our theme builder. I'm going to add another archive or we're going to check this off. Now I'm going to use this one to really quick like copy and paste this container. And also note that only containers work. This is only containers, no more sections, no more columns. But when I was doing this containers has moved up to beta. I found a lot of the issues I was facing the containers were gone. I didn't find any issues in the containers on this. So that was a big bonus while doing this containers worked, which was awesome. All right. So let me quickly style up the background on this because I use a lot of different styles for this test. Now let's go ahead and add a container. I'm going to choose this container right here because we want to put in one side loop right here, one large loop in the middle and one vertical loop here on the right. So let's select that. And let me just fix this up really quick. I want to fix up my padding. Next up, I want to add my loops into these. So I'm going to go here and type in loop. Let's drop in the loop grid widget. And from here, you can go ahead and select on create a template. So I'm going to select on create a template. Let's go ahead and save those changes. The first step I'm going to do is to drop my image inside here. And then I'm going to go to my dynamic tag and select on featured image. All right, let's go ahead and save that and go back. And right off the bat, we do see one bug here. Now there are going to be other bugs that will come up probably inside this video. It's a beta it just launched. But this is one of the bugs that I found right here. So let's go to the loop grid options. I'm going to just select on one. And I'm going to select on two. I only want to do that to get my visual right here. Now let me add in my second loop, drop that right in here. And the reason why I'm adding an image right here, I found it was quicker because right now I don't have the options that I want. Now the options I want to do is to change the column so I could get a look at it because right now it's in three columns by default. The only way we could go over here and select on the options and change the columns is by after creating a template. So let's go ahead and create that template. Select on save. And then again, I'm going to drop the image right in here just to get it started. And then select on save and back. And then I'm going to change that as well. I'm going to change my columns to one. And I'm going to change my post to one as well. We're just replicating this layout right here. Let's go ahead and drop another loop right in here. And we're going to repeat. All right, select on dynamic tag, save and back. And let me go ahead and change this to one, and then we'll put four right over here. Now that we have our structure built and we have our different loops inside here, we'll go into each one of them and add in our elements. So I'm going to go over here to edit template. And let's take a look at our example real quick, what we're going to add on this one is going to be a category, the blog title, a divider, an excerpt, and then also the author. So let's start then with the category, we're going to use post info, when to remove all those. Let me go here to terms, select on categories, remove the icon, and then we're going to style it up. I'm going to go over here to text. All right, and then let me give it a color. Next up, let's add the blog title. We're going to use a heading widget. There it goes. Select on dynamic tag, and then go down here to post title. Here also on the link, you want to select on post URL as well. That way when people click on it, they could go to the blog post. Let's go ahead and select our color and then put our style right here. Next up, we're going to put a divider. So I'm going to put the divider widget right here. And then after that, we are going to put our excerpt, so I'm going to put my post excerpt right here. Let me click on this, and then I'm going to give it a length of 12 right here. All right, next up, we're going to put our author. Let's go to post info. And let's turn off all these right over here, I'm going to remove that icon. And the before I'm going to put by give it a space right there. Now we just style this up. So let me go to my image, we just add some bottom padding right here. Same thing on this one, I'm going to go add some bottom padding. This one is just 12. All right, we're good on this one, but on the divider, let me style this one up right here. I'm going to change it to a different blue color. And I'm going to make this gap 20, so it's 20 pixels on top and bottom. I try to keep my pixels the same, you know, they're 12, 16, 20, I go by multiples of four. It's just my system. Oh yeah, and then let's go here to the divider and make it 100 pixels. Now the excerpt, let's go to our style, choose our color. I'm going to give a body text, but I got to fix this one right here. I want it to be a 1.5. And then I'm going to give it padding on the bottom 12, then right here, I'm going to style it up. Go ahead and get the color and the font style right here, and we can save and go back. And now we could go into our loop grid to our settings and you can see first off, we got this long name right here. Now one thing I found was it is important to set a name for them because I found that once I started building a lot of these, it was hard to identify. So I think building a system with having names that creates an easy to identify process is important to do that. Let's go back to edit the loop template. And from here down in the settings on the template, we could click on this and we could give it its name. I'm just going to call it its name. Let's go ahead and update that save and go back. And now if we go back here to our template, you can see we have our name right there. All right, so for something like this, we only want two items. So keeping them one column and two right here. Now this is where the power I found came in and that's going to be inside the query. This is super powerful. For this one, we're just going to have the two newest posts right here. But we have all these different settings like I'm going to turn on the avoid duplicates. We do have the offset. We're going to use the offset for these other ones right here. But we have lots of different options here, as well as a pac nation. So this part right here, the query and pac nation, I felt is solid. That was one of my huge pros and pluses for it. All right, let's go ahead and set our spacing. I'm going to give this 40 pixels. And we are already finished with this column. Now let's go to the second one, I'm going to go into edit template. First off, I'm going to edit this image. Now I forgot to do that on this image here. We want to make sure to give it a URL, we're going to give it the post URL right here. So that way, if someone clicks on it and go to the blog post, I forgot to do that on this one. So always make sure to make sure at least the image and the title have that. Now another option is now, we could always go to the container and inside the container, we could go to our additional options. And we could choose a link right here. The only thing is if you're going to choose a link, make sure that none of these also have links. So say the category, you'd have to turn off the link for the category. Same thing with the author. If you don't turn them off, it is going to break everything. All right, I'm not going to use that right now. I'm just going to put it back on default. We got our link set up here. Let's go ahead and set up our height. And then here for the object fit, I'm going to go to cover. Now let's add in all the other elements. It's going to be the same as this one right here. Now I would love to copy and paste this over here that would make things so much faster. But I found copying and pasting elements and styles doing this, it breaks everything. So that was one of my cons that I found. I found I could not copy and paste to speed up my workflow. I had to do each one of them individually. So let's go ahead and do the same thing as we did on the other ones. Okay, so just to speed everything up, it was the same exact process as styling these ones up right here and adding in all the elements. Now we got these both finished. Let's create our vertical. Let's go over here to edit template. I'm going to remove the image. We're not using that. I'm going to add a tag. We remove those, go here to our terms, select on categories, remove that icon. I'm going to center that in the middle. I'm going to go to text. Let's give it a color. I'm going to give it a brighter blue color this time and let me add in my font style. Next up, I'm going to put in my title. All right, so real quick, I noticed something is happening here. Here's another bug that I found. Now I found when I first started off from scratch and I didn't have any other loops built. Whenever I started making updates right here, the rest of the loop would update and that was awesome. But something happened in the middle of me testing everything, where that stopped happening, where I had to refresh it or take a look in the front end, like the updates weren't happening in the Elementor side of the builder, but I think that's a bug. I think it is because at first it was beautiful because I would say delete the image, the images would all delete. I would add in a title. All the titles would add. That was sweet. I think that is how it's supposed to work. Let's hope it does work like that coming up soon. All right, so real quick, let's go back here to our dynamic tags, create a post title, keep it on H2, let's give it a link and link it to the post URL. Let's center it. And let's also give it its styles and I'm going to use this small style right over here. All right, and then I'm going to add the author underneath it. So let's go back here to post info, drop that underneath. And let's go here, remove that icon, center it, let's style it up. All right, now we just need to fix these styles up, adding some spacing on it. Let's see our example, how they did it. Okay, it looks like about 12 and 20. So we're going to give this a padding bottom of 12. Here we're going to give a padding bottom of 20. And then one more thing, you can see we have these dividers right here. So let's add in a divider at the bottom. So I'm going to go down here, put in a divider. All right, so it looks like we're all good on the styling side here. Let's save it and go back. And then what I would end up doing is fine tuning it. That's what I did on the other one that I built. Now we got this going right here. Next up, we need to add this latest news on top, super easy to do. So let's just add a title here on top of our loop. We're going to make this an H3, we're going to center it, let's style it up really quick. All right, let's go ahead and get it to text, latest news. Let's space it down on the bottom, I'm going to give it a 40 to give it plenty of space. And then we need to add borders in between. So we would go here to the middle container. Let's go here, let's go to our style to our border. Let's turn this on to solid. Let's unlink those give one pixel right one pixel left. And let's choose our color, which is down here, something light, a save and close. And let's take a look at the front end. And here we go, we have it all laid out. Now the last thing we would need to do for this is to set up our query. So we're going to leave this first one alone because this is going to be post number one. This is going to be post number two, but we want this to be post number three. So let's go here to our loop settings. Go to your query. Let's go over to exclude and then offset by two. What that means is going to skip to post, which are these two making this number three. And then we would do the same thing over here. Let's go to this loop, go to the query, go to exclude. And then we're going to do three. So now we don't have any replicates over here. Let's go ahead and update that, save it. Take a look at the front end. And there we go. We got an archive page with a beautiful layout right here. And all this was done with the loop builder, which is super easy. I'm telling you, once I got used to this and I did it a few times, I was able to do it so fast. So big bonus, good job elements or this part's dope. Now let's take a look at something really quick. I'm sure many of you are asking, that's custom post types. And here is a custom post type I created with jet engine. Let's see what happens when I add this in with the loop builder. So I'll add my loop widget here. And then let's create a template. And I'm going to start the same. I'm going to go ahead and add in an image widget, use the dynamic tags. I'm going to go down here to my custom image. I have one right here. This is for an avatar. This is for my user profile. Custom post type I created, but when I put it in, nothing happens. Same thing with titles. Go here to my dynamic tags. Let me go down to my custom fields I created. And here are some more things from my user profile, got my user profile name. Same thing. There's nothing on it. And nothing happens. So that doesn't work. And then if I were to go here, let's go back to my image. I'm going to go back to the dynamic tags and let me go to WooCommerce product image. Same thing. It's just nothing happens. Now I already knew about WooCommerce not going to work right now. Elementor did say that that is coming later. But I can confirm that custom post types with jet engine don't work. Then Paul from WP Tuts, he also tested out ACF and ACF also is not compatible yet. I did notice this, however, if I go down here to my settings, I have an option right here for query. And here it has a source type right now it only shows posts. So maybe later when they are updating and maturing the loop builder, maybe it'll have options for WooCommerce custom post types here. You'll have to see what happens and how this is implemented. All right, my pros and cons and final thoughts. And just one thing to note that everything has pros and cons to it, everything. And I'm going to be not as harsh with my cons because this is a beta so I'm really not going to slam all the bugs that I found in it because those are expected in beta launches. But here are the things that I really liked about it. I'll start with the pros first. The first one is it is very easy and straightforward. I love the way that it's implemented. I think that it was implemented in an elemental way that is easy to use. Now there are two ways you could build a loop. You could build it right on the page and just add your loop widget or you could build it inside a theme builder template. I found using it in the page just right in the page and just dropping that widget right into the area. You're going to add your grid. It was so easy to use and it worked for me a whole lot better, especially productivity wise because I was able to build my loop right there inside the layout and that just made things a whole lot easier and quicker. My second big pro is that it was easy pairing multiple loops together and being able to create these creative layouts. The query part is powerful. That is a huge pro right there and being able to pair these different loops together. This is just going to open up the possibilities for everyone. It worked very well in that way. I think as long as anybody gets used to using dynamic tags and the query options, your world is going to open up as far as building blogs, layouts and in the future listing websites and product sites as well. The next one is a big pro for me and I'm sure a big pro for many of you out there. It's probably a con for some plugin developers, unfortunately, and that is going to be we're going to be able to ditch some of the add-ons that we had to use for the same feature. Now, we're going to have to wait for it to mature first because it's just not there yet. There are still some things lacking, which I'm about to go through in a moment. But I do see once this has matured, there's going to be no need for adding plugins that do the same exact thing. I love that. I am all for reducing clutter. I try to keep my websites minimal and clean. So any opportunity I get to reduce plugins, I am all for and I'm always looking for those opportunities. And then my last big pro, that is going to be, well, the HTML markup. It's not bad. It's not super great, but it's also not bad. And when I compared it to, say, a loop builder that I built with JetEngine, it's a whole lot better than that. So that part is good and that goes inside my pros list. Now, let's move on to the cons. And there are a few of those as well. I'm not going to go too big into the bugs, but I did find quite a few bugs. And there's some of them that were a bit obvious. And some of them that I felt, too, would still hold me back from putting this on a live production site. Now, it was just launched. This is expected. It's in beta. But hopefully these bugs get fixed in the next few updates. That way we can start putting them into live websites. So con number one, no carousels. I heard carousels are coming out inside the future, but still it was launched without carousels. And this is very limiting because a lot of times we want carousels or sliders with our blog posts, like say you want to put a post section on your homepage, that is very limiting right there. Con number two, no equal height. That's something else that is lacking. That is really needed because we need that equal height in order to properly build cards. You might want to build cars with box shadows, borders, backgrounds. I mean, we could use a man height on the columns, but that's really bad for responsiveness. I don't like using that option. So we do need an equal height. The third one was not having filters. Now this isn't a big con. I really wasn't expecting it. But filters would be something nice to have like category filters or something like that. I did kind of test it with jet filters. But since the CPTs weren't working with jet engine, I didn't go too deep. I just wanted to see if it was possible and it isn't. Jet filters doesn't work. Maybe later when custom post types are supported, I'll check out like WP faucet or other filters as well. But for right now, I don't see filters working on it. The next one is I really wish that WooCommerce and custom post types came working out of the gate. Those are really important to have. So without those, it is a bit limiting. Like all we could do is build blog posts. We can't really do listings. We can't really build our WooCommerce sites. But I understand this is just the start of it. Just something I wish would have had some support. And then the next one is the copy and paste. So for me, I use copy and paste a lot in Elementor. It speeds up my workflow and I found copy and paste just caused issues. For example, if I wanted to build a layout using multiple different grids. And even if this grid and this grid would be the same, it would be so much easier to copy and paste styles. But you can't do that. Like anytime I did that, it just messed things up. So I had to go in and style up this grid, this loop right here. Even though this other one was the same, I'd have to go in and do all the details and style that one up individually as well. Now I don't know if this is a bug or if this is just something that's just not going to work. But this is what I found that was a bit of a pain point for me. But with all that said, my thoughts on this is that I'm really happy with it. I'm really happy with it. I'm just glad Elementor has given us a new feature that for somebody like myself that builds websites for clients, builds websites on a daily basis. This is something useful that is really going to help out our workflow that is really going to help out how we build websites, opening up possibilities, especially for non coders and web designers, you're going to be open to building all these different layouts you weren't able to do, not unless if you started adding additional plugins. And with this, I found this way of doing it built in much easier than using any of the others that I've tried. And then for us developers, we could do the same, but we could write CSS and we could do stuff to really make these grids look dope. I just hope it doesn't take too long to mature and to have these features we need to have the carousel, custom post types, jet engine to have these features are really necessary added in here. I hope it doesn't take too long. That's my only thing. I hope that this comes out soon. Because in the meantime, we're going to be building websites for clients and probably going to have to use alternatives for loop builders or just the basic, you know, kind of boring post widget when we could be using this one. I hope we get to that point where this is ready for live websites really soon. So we're not stuck in that limbo stage or having to redo them later on in the future when it does mature. That's my feedback, my results, what I got from using the loop builder for a full on couple of days. What are your thoughts? How do you feel about it? What do you want to see come inside there? Is there something missing that you see? Drop them inside the comments and just a heads up. I got another video coming out comparing Elementor's loop builder with Bricks loop builder. I'm right now doing a lot of work with Bricks. I'm testing it out. I'm really loving Bricks. I still love Elementor. I'm just adding a new tool to my arsenal. So right now I'm testing out and working with Bricks loop builder. I'm going to be running it through the same tests as Elementor's and I'm going to do the same thing. I'm going to give my list of pros, cons, possibilities, limitations, we're going to take a look at the HTML, the markup, we're going to see how the code compares to each other because I just think it would be fun to do and very informative for everyone. And if you like content for web designers and web developers, then please make sure to subscribe. It's much appreciated, much love. Thank you so much for watching and I'll be back again soon.