Elementor – Loop Grid Crash Course – Elementor WordPress Tutorial

Zoeken in video let’s do a quick crash course on Elementals Loop grid for anyone that is still getting used to it or hasn’t delved into it it’s super simple and we’re going to crack it right now I’ve already created some example post inside of Wordpress there’s nothing Fantastical about them they got a title they might be a description but they do have a featured image and I’ve also assigned them to some categories so over here we’ve got a range of categories and I’ve put them to different ones cuz I’m just going to show you how you can bring them over in a loop grid I mean why would you use a loop grid anyway you already have widgets inside of Elemental for posts and archive I’m going to very quickly show you why they’re not such a good thing and why the loop grid gives you so much more power but remember you got title you might have a description we got categories and we’ve got featured image as well now I’m going to jump into a blank page now for the loop grid to work you do need to be using flexbox containers and by default that should already be active within Elemental but if you’re still using section and columns go over to WordPress Elemental settings the features and make sure you’ve enabled flexbox containers if I go over here and I go and type Loop you’re going to see Loop grid and loop Carousel and everything I show you here you can do with the carousel so if you want to have your post moving left and right or whatever let’s start off with the post widget cuz this is the one a lot of people tend to be using and what you get is the featured image you might get some description coming in maybe if you’re already showing it you get a title you get some meta to data and a read more button if I go to the style tab I’m just going to make my content title be a little bit darker you can Tinker with the width of the images you can tinger with the ratio of the image as well you can change the title or the exerpt are you going to show any of that if you suddenly said to me I want the title to be above the featured image you can’t do that unless you use a third party plug-in maybe you want to put the read more button above or maybe you want to have like a pill or a button maybe you want to have another image from the post visible on here as well you are very much restricted and even though you do have these different skins like you got classic you got cards which looks like that which is very very big or the full content which I wouldn’t always recommend you do unless you’re going to show all your posts you are very very limited and yeah I know you can modify how many posts you’re showing so for a good long while this is what we were using and you might have used a third party plugin to refine this but whatever since we had the loop Grid or long time ago now that is what you should be using and you don’t just use it for your posts you can use it for your products you can use it for demonstrating categories as well it is super powerful and super useful let’s get rid of this and add in a standard Loop grid go back over to our widgets and I’m going to type in Loop and like I said what I do in the loop grid you can do in the loop Carousel as well let’s go and drop in the loop grid here now you’re told to create a template and this might scare people oh I’m not used to doing templates why do I have to do this don’t be this is no different to you building like a container and the idea with the loop grid is it keeps looping through that template and it applies it to your post now you can have different templates applied as well but we’re going to keep this simple start off with a standard template and then I’ll show you the alternate template and by the way go and check out our $1 business packs if you want to help you your client and your business to be more successful with load of ideas and things that we use on a daily basis now before we jump into modifying the template you do get to choose whether you’re working with post products or maybe the post or product taxonomy what’s the difference well that’s going to be your WordPress post that’s going to be your woo commercy products this one is going to be the taxonomy so maybe I want to have a loop grid of just the category so it say Consultants flowers home it will just show that but let’s just keep it simple and go for post we could click create template here we could click it over there and we start from aesh or we could actually go and select one so I’m just going to type in Loop cuz I’ve got loads of templates there this is my fake example tutorial website so you could if you want go and pick one so if I was to pick say this one here it’s going to bring over a very basic rubbish looking template if you’ve already built it you can summon it back again I’m going to get rid of that cuz we’re going to build one from scratch let’s go and hit create template it’s going to ask you if you want to save you just go and say yeah and then this is it you literally have now a blank screen and if I go and do the Navigator you’ll see here there is nothing there so here’s the very first thing I’m going to do I’m going to go and add in the post title so there was a container there now sometimes when you go to edit it will already have the container there what it’s returned is the latest post title which was post 12 now if you had it in the other way around like a sending order you’d have post one but by default it always shows the latest post I’m going to show you how to modify that later on but all we’re going to do at this stage is just bring over what we want to show and then we’re going to refine how it looks we’ got a post title if you had a post exerpt we could bring that over I actually am not going to show the post exerpt I mean if you want to modify it you could do you know go over to style you know your typography your text color left Al line right line I’m not going to show that so I’m just going to get rid of it and by the way I accidentally clicked it outside of the container so it went and dropped in another container but normally it would just go into the same container got post title post exert you can actually bring over all of the content as well so maybe you don’t just want to show like a sample or an exert of that so you could do that I’m going to get rid of that for a moment we’ve got featured image and we’ve got post info now these two are pretty important so I’m going to add in the featured image and we’re also going to go and add in some post info so you can see over here on the Navigator we got title featured image and post info I’m going to go to the Post info and I’m just going to make it be a little bit easier to see so what we get are the offer the date the time and the comments you can rearrange them or you could get rid of some of them so maybe you don’t want to see them at all but what if you now want to convert that to show you the category cuz do you remember I said that my posts were assigned to a category I’m going to go and click on offer and I’m going to change the type to be terms and over here I’m now going to pick my category so let’s go and pick it consultants and flowers so post 12 if we go back over to my post and I’ve jumped out of it we go over here you will see consultants and flowers for the category it’s now showing it do I want to have an icon yeah I could either pick a custom on or I can hit nonone do want to have this linking over so when this is active if you click consultant it will now take you to a page that shows you all the other consultant posts or flowers as well I’m going to just take it off I mean I’m just showing you that you could have it there and again you could modify the typography you’ve got all your settings here you know it’s no different to what you would normally be doing change the size the letter spacing the word spacing all of that what’s really good about this though is that I have pretty good damn control over what I’m doing and you’re going to say but couldn’t you do this in the post one as well because you were able to modify the typography and the positioning yes but I can now pick the post info and stick it under the title like that can you see what we just did there I can take the post tile and maybe stick it underneath the image or in between I could even go and take this title well let let me show you in stages right if I take this speech and image let’s go and convert it to be a full let’s go to the style of this I could maybe now make it be a round image 300 like that and set it to be a cover change the radius to be a th000 there’s so much you can do here whereby with the post widget you are restricted to the structure so if I was to now make this like be super tiny say 50/50 I mean that’s a ridiculous thing to do with your featured image but I just want to get across what we’re doing here if I was to now just pop this back to be something like that so now we got the title the image and uh the categories like this if I go to my container and I now turn it to a row we have got a crash course video on how to understand flexbox containers please go and watch it I’ll pop a link to that in the video description if you’re a bit unsure but if you were to now look at this and I go and hit the wrap I’ve now got my title obviously I’d make the title be smaller but I’ve got my title image and then my categories I’ve got literally full on control over how I want to make this look I can go to The Container I can go and give it a background image let’s just go with something that’s off white I’m going to give it a border of 20 and I’m now going to go and add in some padding and we’ll go with something like 10 like that if I go and hit save and back you’re now going to see what happens to all the other posts so look here’s my post now think of how it looked when we had the post widget and how boring and flat it looked and everything I can do what I want here I can modify the color I could drop in icons I can do anything I want but this is really really simple I’m now just going to show you a few of the things you should bear in mind because at the moment if you click this it’s not really going to go anywhere so I’m now going to go and get a button widget and by the way I have hit edit template so I’m back into my template so I’m now going to go and drop in a button say over here in fact let’s just go to our container and I’m going to set it back to be a column so everything is stacked so here we got a button you can stylize button to be however you want do you want to have a background color do you want to have a transparent color or whatever the idea is is that when you’ve added in this button let me click on it here over here where you have the link you don’t want to set it to go to a certain page because it will repeat that for every single post okay what you want it to do is to go to the exact post that you are clicking so what you do is you click the dynamic tag over here and you just click post URL it’s literally written for you there you click that that will now go to the relevant post and then when we hit update and then I hit save and back that will now repeat look at that click here if I was to go over there if you just look in the bottom left you will see down here the link so you can see it says post 12 over there it says post 11 and there it should say Post 10 and that is exactly what it would do but you can make this be even even clever right if we go and hit edit template and I now go to the title that’s the post title we could make make it smaller I can change the HTML tag at the moment when you click that it doesn’t go anywhere well I could again go to the link go to Dynamic tag and say post URL I could go to the image and go to the content that’s not really going anywhere either so I could go into to non go and hit custom URL hit the dynamic tag again and do Post URL so when you now update and we go save and back and we preview this if I click over here that’s not going to take you anywhere remember I said I don’t want to add any links to my post info meta which was the category but over there we get a link we’ll also get a link on the image and we also get a link on the title so if you don’t want to have a button because you just don’t want to have a button you don’t have to do that let me I just show you a few final other tricks that you can do so we’re going to go to the edit template let’s go back over to where we have our categories over here if I go to the content we have our terms I’m going to click that and you’ll notice here that I did not mention the for cuz I wanted to wait until we get to that stage so I’m now going to say over here category and we now have the word category appear before that how cool was that or how about I go back to my image get rid of the Border radius modify the height of the image to be 180 I’m going to go and set it to be a top Center so you get you know quite a bit of control over it I could swap the title and the image over so now the title is below and then I could go to the image now there’s many ways to do this you could use like some absolute position but I’m going to show you a really really simple way cuz some people don’t like to always use absolute so I’m going to go to my title and where we have the top margin I’m just going to decrease it and it will now move over the image like that let’s go for 65 let’s add in a little bit of left margin as well by the way you will have noticed that all of these went funny don’t worry cuz we’re only working on the single template at the moment and then I’m going to make my title be a white color now I know what you’re going to say this is not going to be exactly clear as to what we see but I just want to show you how this would work so if I now do save and back you will now see my title is kind of over all of my images over there again this is something you would have used a thirdparty plugin for if you were trying to do this with the standard post widget and that is why the loop grid is massively your friend for what you want to be doing here and of course if I go back into edit template if I wanted to go and drop in say another heading maybe down here and I go and say our latest post I’m just going to shrink the wording down obviously you would modify this for the mobile as well and I’ll quickly show you that we go to responsive mode you would Tinker with it so make sure the sizing the whips and everything are okay for your different breakpoint and devices but I’m just showing you the desktop at the moment so if I hit save and back because I’ve gone and said the word our latest posts it now repeats it so when you go and stick in an icon or an image that you want to repeat it will show it there but if you ensure that you’re using like the post info or the metas or the title or the images it will only pull over what is relevant for that particular post now what if though you wanted to have a different style when you get to say Post Number 10 maybe every third post or maybe every other post you want a different style this again is the beauty of loop grid and by the way we haven’t even got on to the query settings yet where you have a ton more control and you’re going to love that when we get to it so let’s just go in and click on our Loop grid so at the moment we are using Loop item 3491 that’s what it’s gone and created because when we did create template it goes and assigns these random numbers well they’re not totally random but it assigns these numbers and we do at and at the moment we’re showing three posts and if I change that to be four you’ll have four and if I change that to be two you’ll have two by the way the reason why it’s gone off the screen over there is just because of my um resolution that I’m using at the moment now want to show you how you could apply a completely different template now to make this easier for yourself I’m going to edit our current template and you may feel like God you keep going back and forth I’m just showing you how easy it is and how there’s no delay in what we’re doing I’m going to copy this entire container I’m going to create another version but I’m going to just reuse what I’ve already got let’s just go and hit save and back so I’ve now copied our template container let’s ensure that we have clicked onto our Loop grp grid which is over here and we’re not going to edit this we are now going to apply an alternate one like this oh by the way I should mention you do have the masonry effect so if you had posts that had different Siz titles if you are not going to have them all consistently sized based on the size of your container and you went for masonry you’d get like the brick effect so you might have some like that some like that some like that a little bit bigger that’s okay I tend to say just ensure everything is equal height so we are now going to apply an alterate template so we click that and it will now basically allow you to pick another template so if I was to go and say pick one of my other rubbishy ones in fact why don’t we just do that right let’s pick one of my other rubbish ones right so I’ve now enabled this other template so that’s the one we’re currently using 3491 and I’ve now said use 3321 but I haven’t said where or when to use it so I’m now going to say use that for every second and you will now get a different style in that’s a rubbish one let’s not go for that cuz there’s practically nothing there it’s just a title that was a bad example let’s go for this one so we get a title and a big red button that will apply for every second post so Post Number Two 4 6 8 10 12 in fact it’s the other way around because we’re in descending order so it’ll be 11 then it will be 9 then it will be seven okay so it’s every two now the reason why it’s not repeating is cuz it does say a apply want so when I untick that can you now see the style we got let me just get rid of this screen over here so 119 and seven now have a completely different style but if you had ticked this over here apply ones and let’s now go for maybe number three to post number three so can you see how you can apply completely different styles but here’s what is really really cool we’re not going to use this okay so I’m going to get rid of that we are actually going to create a brand new one so create template so I’ve just shown you how easy it is to create a template just using container I’m going to go here and I’m going to paste that is our original container that we had already built don’t worry about the wording and all of that cuz it’s just slightly off because of the size of the image I’m going to uh take this title I’m going to get rid of those margins that I did over there I’m going to pop it back into be dark and we’re going to pop it over the image like that and I’m actually going to get rid of the post info and you know what I’m going to get rid of the button as well and I may do something a little bit crazier where I’m going to go to the style I’m going to make this be uh no we won’t go like that that’s way too Brash we’ll just go with that so I’ve given it a completely different style and I could do the same to the image as well right I could give this some bounded bounded rounded corners or anything so I’ve now created a different template I then click update when I go back to my page I will now see that other template and it kicks in that position number three and it applies it once I’m going to change it to be number one let’s just get rid of the Navigator so my post 12 now has a different look again you would have been playing with third party or other premium plugins to start applying alternate style but notice here it says column span one I’m going to change that to be a two look at post 12 now now I have intentionally just stuck in the image but if I had thought about this more and set my image width to be a certain size and maybe added in more content or whatever this is what you would be seeing post 12 11 109 8 and seven in fact I can go and add in a few more so let’s go and add in um make it a bit more bigger number there you go look can you see out on your post page or even your product maybe you really want to get across how amazing your latest post or product is this is what you would be doing you would have an alternate template and you’d be spanning it to just show a load more and if I was to go and change this to be a three well look at that it’s now gone all the way across so now I’m really getting across that you want to be reading our post in the old days you would have two post widgets maybe You’ have one post widget which had a column of three and you had another post widget which was just one post and one column so you were duplicating the post widget twice there but this just allows you to sort it out let’s just stick it all back to one for now so we can see things nice and easily let me know in your comments if anything I’ve shown you at the moment did not make sense and go and check out our $1 business packs the link is in the video description now the very final thing I want to show you on here is that if we again click on the loop grid and we go to query this is where the loop grid becomes mega mega powerful we’re currently looking at posts I could pull through pages I don’t really think I should do because it’s going to look ridiculous because there’s no images or featured images assigned to them you can just about to see the titles card shop uh check out you know test and stuff like that it’s not a good thing to do if you got a custom post type which I will talk about in the later video you would go and select that here as well if you had products you would go and pull over your products and it would start to bring over your products and their descriptions or titles or however you set it but I’m just going to leave this as post for now but this is the really really powerful bit okay how are we ordering it by date title or how it was added are we doing ascending or descending order you go in hit as sending and look we now have post one and things go and shift around a little bit what are you going to include or exclude now you may look at this and go well what does that mean don’t we want to include everything remember I said we had different categories and I’ve got some here that I’ve got room and some that haven’t if I go in here and I go and pick term and by the way you could pick offer as well but I’m just going to go here now and I’m going to type in room I can now select my category now watch this watch the posts okay when I pick room we’ve only got three posts with room you’re going to say that does not say room it’s an alternate template remember I remove the category but trust me that has got room in there what if I was to say actually it’s got to be room and flowers I could do so I can pick multiple categor so now you have to satisfy room check or flowers or room or maybe you’re just flowers can you see how they’re coming through that’s how cool this is but at the same time you may also want to exclude so I could go to exclude and say show me everything but I actually don’t want you and you have the option for current post manual selection term or offer I’m going to go to term and I may say definitely do not show me any uncategorized you know most people fail on that there’s like a dummy or a fake post somewhere get rid of it and maybe we don’t want to have flowers okay let’s get rid of all the flower post there we go and I tell you what let’s get rid of the office as well that’s probably going to leave me with practically nothing there I bet or maybe just one or two posts there we go just got one post that’s the only post that satisfies all that c uh that criteria why would you do that maybe you’ve got a page which is all about case studies you just show just the case studies maybe you’ve got like 20 product categories but you don’t want to show hats on this shop page because you got a completely separate designed page for your hats it’s got a completely different look you know images and content and videos and whatever fine include and exclude what you want to go for but that’s not all you can do in the include the options are pretty self-explanatory but when you go to exclude you have an offset appear you also have avoid duplicates but the offset is the really really key one here notice here it says post 12 11 10 9 87 watch what happens when I offset by one post 12 disappears now post 11 has the alternate template cuz we said apply for the very first post and we can remove that as well but now offset means skip the first one if I go and say skip three it’s going to skip the first three in the date descending order so now we start at post n so maybe you’re going to have two Loop grids on your page you don’t want to mess around too much with alternate templates maybe post one is going to look like a certain way and post two and three will look a certain way and post three is where you’re now doing maybe a standard gridlike look like this you know with just boxes and columns and whatever so you may want to offset your first three you can offset your first five you can offset as many as you want look we’ve now jumped over to seven so there are features available