Divi Machine 6 - Custom Loop Layout, Archive Page and Repeater Module

hi my name is pete and welcome to this tutorial for divi machine in this one we're going to be talking about a custom loop layout now this is quite important for you to understand uh when creating these websites so if there's one video to watch it's this one okay so let's jump straight in so a custom loop layout what is a custom loop layout what does it do so it displays the posts that you want for that for for that custom post let's jump over to a website called motors.com uk it's not the best looking website in actual fact i don't even want to use this website too much but i just i just wanted to show you one so this shows you all the cars that like so here if we look at cars you know he has all and the reason why i've just been i've put up this one is because we we building a cars website as i've mentioned before it does isn't just specific to cars what we want to do is we want to create we want to use a module to show all the different cars like this on a page but we want complete control on what is shown on each of these cards on each of these grid cards okay so we want to have the title we maybe want to have the year we want to have an image the price we want to have i'm just using these guys for example we want to have you know some more details over here and we won't have a button for example so all of this can be created with the custom loop layouts and what you do is you create a one layout in the divi library which would be called the loop layout and this one layout will will have all the modules that you want to show for each that will be repeated for each post so in that you would show you would add the title you would add an advanced custom field item you would add the thumbnail you'd add another advanced custom field item for the for the price and so on you'd add the view post button module and then you tell the archive loop module for each post display this template okay so let's just remove that website for now i don't want to kind of confuse you too much so let's let's just go ahead and start this okay so let's head over to the divi library and let's create a new layout called loop layout you can call it whatever you want make it a section and submit okay so let's just do a very very very simple one you want everything to be forward really unless you want to create a repeater like for yeah so let's get there okay so the first thing i want to do is i want to add a thumbnail so you can actually just type in thumbnail and that will pull up the thumbnail module i can use the visual builder if i want but with a custom loop layouts and i actually prefer the back end borders so i'm just going to be using this you can choose the the image size and if you want to link it to the single page which i do so when it when somebody click when somebody clicks on the image it's going to take me to the single page the image style defaults has a overlay image only so no overlay or flip image i quite like the flip image so what will happen is it will well actually let's just leave it as no flip image so with flip image you can you can specify in another advanced custom field that when you um so that when you hover over the image it will then just flip over to that image so it's quite nice if you do like a team members section and you want to have like i don't know like one pose and then when somebody hovers over the pose changes you can get some really interesting you know team member profiles like for your agency in that way but i'm just going to do you know no image no overlay for now so i have a thumbnail and i want a title so i want to post title i don't want h1 for seo purposes i want to have maybe an h3 or h4 and i also want to link back to the single page and finally let's add an advanced custom field item just to show you how this works um i want to make this price i'm not going to show the label pretty far the text yes prefix i'm going to add a pound symbol and then let's add this image which isn't the best but let's just leave it like that for now and update okay great so we've created this loop layout now how do we go and you know tell the how do we go and create this this post loop that then we'll use this so i'm just going to go through to the let's just go through to the the divi theme builder and in here i want to create a new template for the cars archive page the archive page is this page so it'll be your url forward slash and the slug so in my case it's forward slash cars on this archive page well in here i want to go ahead and oh am i editing i'm editing the single page sorry so i want to build a new body for the archive page i want to be doing the the simplest version which is simply just an archive loop so make it full archive loop in here you need to choose the post type so the post up is cars and now i can specify this custom loop layout so i want to choose loop layout okay so check that out so what has done is just pulled in the image the title the price and sorry the the the thumbnail the title and the price if we go back to the see the divi builder you'll see here we have thumbnail title and price if you look at it like this thumbnail title process but in the theme builder thumbnail type thumbnail thoughts or browse okay so you can kind of get an idea on how that works so wait let's just save this for now and i think with the daily builder i don't really you have to save over there as well let's reload this page now and you'll see oh there's some debugging i was doing so uh let me just remove that for a sec okay let's be gone now that was just some debugging okay so here we go so i have all the all the cars now we can get a bit more interest in and we can start to in the loop layout we can start to add things like box shadow for the radius if we update that you will see what's going to happen here there we go that looks pretty cool one thing is there's a bit of space underneath here so why is there space now this is really handy for you to work this out as well i know why there's space but i want i want you know just so you can get an idea what we have is we have a section and a row inside the loop layout if you look over here if we inspect the page you can actually see the section all sections throughout the divi websites have padding because you're using a section inside this this uh post this section has padding so you if i don't if you ever use the inspect tool but if you hover over uh something that tells you what it is if there's green like you can see over there that's padding and if i look on the right hand side i can see there we go the padding is 54. you can actually you know edit the the padding there and there but let's just go through to this loop layout and in the section go spacing padding top and bottom i want to put 0 and update this reload there we go so that padding is gone now so here we can see how we can we can change the appearance of each of these cards to exactly how we want so here i can add a view view view button so view cars so this viewpost views view post button you can also have a custom url end so let's say if you want to have it so at when it goes to page it scrolls down you can add a exclamation mark a hashtag you know i don't know contact whatever you and then it'll scroll down to that the section with the rd contact for more information about that check out you know anchor points with divi yeah i can also you know specify custom design which i want to do right now just to keep it consistent and let's reload this okay so you know i'm just doing this very quickly so you can kind of get an idea um one cool thing about this uh this archive loop module is it i'll show you some settings in there um which you can get an idea so the first setting is the post top so we're going to be choosing cars custom loop out is the layout we specify the filter update animation style so when we include the filter module this will come into play and there's different styles that you can have so when you're filtering posts it can have like a different animation so like things spinning or you know there's a color for that now if there's no posts you can actually create a layout in the divi library to show when you have no posts so you can have a nice you know nice image saying you know and then saying sorry there's no cars available you know please search so again loop options here we can choose what we want to display like post count you can include so this will be how many posts are showing if you want to show all posts go minus one and it'll show all of them or you can go six for example only show six uh include categories so here we can say okay i only want to show specific categories you can add it there comma separated likewise with tags see here i can actually do suv i think would be one maybe not i'll have a look in a sec uh you can also filter by advanced custom field type so you can filter by make or just leave it as default oh so yeah so you have to so let's say press and then you can filter only for that price so i don't know let's make let's say only bmw and then it'll only show bmw cars but we don't we want to show all cars sort order and order element options here we can have a load more button and this will load more posts let's just at the same time add some custom styling for this red and there we go so we have a load more button load more and in the load more loading text so when you click on it when it's loading the post it'll add have some more text good options okay so here we have grid or masonry so these are the two options because we have this little bump over here let's just show you masonry so you can get an idea of how it works but i probably would want to have the name on one row grid columns so we can change the grid columns so three four i'm going to leave it as four for now so you can see that so the actual benefit of this is you can actually specify the grid columns on desktop the grid columns on tablets and on mobile so mobile you can have two if you want so you can be very specific on how many you want to show for each size in the design tab there's several other options there that you can use so let's just save this now and we should have a masonry and we should have a load more button at the bottom okay so right now it isn't going to show masonry because they're all the same size and there's load more so let's click load more comes in load more and there we go we have all the posts that are loaded so that's quite nice way to you know to have a fast loading website i guess because you can load just six posts if that's what you want and then you can keep loading more okay so i hope this makes sense for the with the archive loop module and the custom loop layout uh where we can also get interest in is um let's just remove this image because i already don't like this image now i'll create a better style and let's add a repeater module so you get you get your idea of how this works so the repeater module let's add a new advanced custom field and here i want to have seats i'll just have the label for now or let's let's leave the label off and i'll just put it i'll just put an icon for now just so you can see um let's just find a random one it doesn't really matter okay so we have seats okay just gonna okay so here we go we can actually label this so seats duplicate that um and i'm gonna do yeah now see it's uh seats and doors let's do seats and doors um and i'm gonna have it as another one okay so what i've done is i've specified two advanced custom field items and i want to show them that i want to have it repeated so instead of you having to add you know instead of you having to add okay i want to have two columns and i want to have one advanced custom field there and then other advanced custom field there you can use the repeater module for this and then here you can specify the grid columns so here i just want to have a two on tablet i want to have two and on mobile i want to have two so it's much easier than having to you know to use other bits of code to stop the view from stacking things here you do it yourself the other thing is that the gutter width so i would say let's push it down all the way to one so there's no gutter the design you know you can modify all that but let's just let's just see how this looks move it above the button and update okay so here we could also you know align them on the left if you want and get the design exactly change the color of the icons to exactly how you want but here you can see how you can you can have repeated modules and if i just inspect this and make the page go smaller you see it stays as to on mobile as well so that's because in the settings i've specified that so that's that's the beauty of the repeater module and how you can really use it to your benefits and that is how you you create a custom loop layout i.e a custom layout for your posts on a loop which is what what we call it uh in wordpress a a loop query which is you know what this is queries all the posts and puts it into a loop so for each post show this show this show this show this show this so for each post show thumbnail title price repeater module and a button and that will be that will be used as a base template for each post within the archive loop module okay so i hope this has been been uh helpful to you i hope you know you can hope this makes sense it's very similar with our other plug-in body commerce which we use for e-commerce and woocommerce and we we give you the same functionality in there as well so they they kind of cross over in terms of how you do this but it really helps you to create a unique looking website that with a divi builder and it's and it's a brilliant way to do it so any questions you know please there may be some questions so please in the comments or please email us at support divi engine.com and we do it will be worthwhile for you to check out um you know any videos regarding the custom loop layouts and body comments as well because it applies to understanding how this works yeah so by all means please check out those videos as well it'll give you a help so yeah have a great day and we'll see you in the next video

Channel: Divi Engine

Views: 8,079

Keywords: divi machine, divi, custom post, acf, divi enigne, custom fields, ajax filter, ajax load more, search forms, divi listings

Id: PJUcv94DXDs

Length: 19min 23sec (1163 seconds)

Published: Wed Jul 01 2020