Divi Machine 11 - Single Page

harpy Tia and welcome to another tutorial for daily machine in the series we've been going through creating a car listing websites however Divi machine is not just limited to call two cause you can create any kind of custom post you want so team members houses testimonials documentation anything like that in this video we'll be focusing on the single pages so in the previous video you may have seen we'd under search understood it's very quick I'm on the search if you either click through straight to the single page at the moment it's nothing much I haven't really done anything to it okay so head over to the theater Divi theme builder in here add a new template oh actually I really will add a new template and then go down to all cars I've already added one in the past video because I was showing you how to use advanced custom field art and module so let's just this is removers also it's blank okay so I want to start off and I'm going to add a just a half a column in the first one I'm going to be showing you the gallery module so the gallery module is a really cool module that allows you to add either a gallery like like Devi has or a slider gallery so the way this works is the first option is you can choose the kind of layout that you want in this part I want to have a slider I want to have a rotating slider or some thumbnails underneath so here I'm going to choose slider in the advanced custom field gallery top so here you can either choose gallery fields with image feels inside this is a a if you using the free version of advanced custom field if you haven't watched the video that way I speak about advanced custom fields and actually creating this free gallery please there we are link in the description check out that video at first make sure that you thought in actual fact make sure you follow us whole whole tutorial and sequence so you could see you know exactly what I'm talking about if you have the pro version of advanced custom field you can actually use this one as well for the purpose of this tutorial I'm using the free version so let's choose that one advanced custom field group name so here I'm going to be choosing my group name which is gallery let's just go over to the custom fields cause I'm just going to show this to you here we have gallery and it's a group auto group top and then they I have this image one image - image 3 again watch the other video I'm not going to explain it again so here I have this so I have this slider I've chosen gallery and the image name is image okay so group and image now it's picked up all these images it's used the featured image for the first one and then all the rest of the ones it's also potent other images you can actually also not include the featured image if you want but I want to use it so slider settings horizontal slider or I can have a single slider I want to have a horizontal slider so the single slider the reason why I shown father is because I have slides the shot I can do one and then it would make it better at the moment I want to have slides to show it let's say for 42 let's do three actually because they're bigger size to scroll so this is how many slides you want to score one time you can actually make this three if you want I want to have it just as one infinite scrolling is quite cool because it'll make it look like this infinite amount of photos so I want to do that one enable now and enable arrows yes naval dots yes scroll speed you can choose the stall speed so yeah that's farm center mode that pushes the image that's that's previewed in the center variable width this is a few images our variable with mine are fine adaptive heart ease if your images are difference in heart it'll adapt automatically what a play yes you can have the images to fade same hard slides yes slide gap I'm just going to do five okay so those are the kind of settings you can play around with to get the slider how you want let's just save this and let's go over to our audio file post and just have a little look see how you can see the image is starting nasty there and you can actually click it and you can open it up like that and see some more so that's a really nice nice way to show you their images you can also customize the design the arrow is you can add custom arrows and custom color for the arrows and same for the dots you can add a custom you know dots added red let's just add red stay with our theme in this section I'm going to add a title got that post title h1 tag I'm just going to title text make it solid make it quite large I think 48 huge okay now the next thing I want to do is I want to have a price so here I want to be using my advanced custom field item in here I want to choose price I don't want to show the label specific settings leave online image icon so here we go I want to add my own image in the previous video I had this terrible had this terrible icon over here but in I just downloaded some new one that I want to use which is this over here upload this image so you can see how it looks pretty large on the left so I can actually change the size so that I want to be 20 pixels liddie and the design of the text you know I wonder image onto the price text to be a bit larger the one thing I want to do is I want to have pretty far my tix I want to do that and I want to have prefix as pound because I'm in the UK they should save us okay so there's a bit of an irregular irregularity which is showing the label this is something that I think is a little but a little bug that I'll fix won't take long to fix this but you can see how it's showing I can also you know adjust the lionheart of this you know text so it pushes it down a bit yeah that looks nice so I have the image in the and the price nasty over there okay so there's other things I could possibly do here I'm just gonna actually go on and edit the car and I'm going to add some tags so let's say the tag I want to add is new add tag and update does I will show you that actually in a separate video because that's going to be using the meta module so let's just carry on let's just leave this section over here and let's go and add another section another row you got a full width right in here I'm going to be adding this module called post content okay so what's this just displays whatever in this section over here okay so you can see it display nicely now you may say that Divi allows you to do users using dynamic content and you may ask what's the point in having this mode well this is where it gets quite interesting how you can actually start using the ability even further on on these templates so you want to have a you want to have one template really for all your cause in an ideal or your or your or your custom post in an ideal situation but let's say you want to use a dippy builder and you know customize the content per custom posts so for my example per car you can you can do that by using the Divi builder on this page over here so how do you do that while you head over to the theme options Divi theme options builder and then enable it on the cause okay so you never on the cause you have this new button over here yeah if you enable the Divi builder now you can start to actually use a Divi builder we do this we want to actually edit it on here so here I can start to edit it now I can say actually I want to have an image this I don't have you know this image over here and then I want to have some text of yeah actually I think I think of I use the visual build on here the chosen seen dummy text for me which I'm going to use okay so let's save that and let's go through to our single page and you will see how it fills that in in this section over here now you may not you may say look this and weird spacing over here if you inspect the page it'll tell you exactly the spacings coming from and I can see over here the section has that green space above in the bottom says green space padding top and bottom and the row by default with Divi is sick - with the 80% so you can see it's not full width over there so where does this come from well this is actually on this page over here so on the actual only a 5 page editing I need to make sure that I'm gonna set the spacing on top and bottom to zero and the row I'm gonna make this custom width or I'll make this 100% and max width I'm just going to do 100% as well update that and then it'll caught that will push that to be forward okay so that's a neat little trick just to show you how you can start you know really making your your single pages unique and bespoke so you use the theme builder for your main template and then if you want to push it further you can actually pull in the content module and use a Divi builder on the actual settings page of that particular custom post if that makes sense so the other modules we'll get into soon let's just show you another gallery module so just so you are aware that when you use a Divi builder in the in the post content module we don't support the version builder for that so you'll just get like we don't support the vision builder with the content so just ignore that but it still works as you can see it still pulls in but at the moment we haven't added compatibility for that so I'm hard to throw this one so let's just duplicate that okay let's add another modulus and another gallery module and yeah I want to have it as a grid okay I want to have images inside which is or group with image fields inside in here my advanced custom field called gallery and image is the group name okay so here we can edit in the grid settings we can choose show title and caption so the title and caption is defined by in the media library so if you go in the media library you can edit the in here I can set ok the title is this and the caption is this so that's where you can edit this but I don't want to show that you can have a group of 4 2 and 1 on mobile so that saves us and we can see there's another gallery as well that's another way you can show galleries you have the slider and then you have that kind of a gallery as well and you can customize you know the overlay and the width and all that then so we have the gallery all about done Kara someone are doing it in the future post metal in the future one post slider future one so here again with the repeater module we could possibly add mass repeater modules of yeah so repeater and advanced custom field so here the first one is going to be doors I can say doors show label no ok image I want to upload an image over here where's my sorry may see my family over there so they maybe upload some images over here my different one so here we go I have a nice little door here and the max width I'm going to do is Teddy pixels okay and then the one thing I was gonna say was in the specific settings okay so um so yeah it's the doors okay so now if I just got that and I can have another I'm gonna add three I think so and out of doors I'm gonna add what else was on the idea mileage pity for my text because the mileage will be you know I have a comma in the image I'm just going to add I don't know that looks beautiful and then the third the third one I'm gonna do I'm gonna have it as feel top and in here I'm gonna choose feel top and in actual fact when I have a fourth one and then here I'm gonna have Gil box and image is going to be a gear box okay so in the this for excuse me there's four items so in the grid color I'm gonna have four on tableau I'm gonna have four and maybe on mobile I'm gonna push it to a two column I'm actually gonna pull this down just above in here above my content so it runs along with that lets save us and take a look at how it looks and as you can see they now appear in an ask four column row wait for Katya four hundred with the archon and the value and you can add the label you can add the prefix so let's say for example you know oh yeah so let's say you have a price one for example you can add you know handle the dollar symbol in here and you can you know you can you can add four eight twelve sixteen values you can make it really interesting so you can have a lot of information with really informative imagery so it's a really nice way to display the content so I think I'm just going to end it there and if you want more specific like information on each model each module please seek out the individual module documentation or video and that should go you know if you're just looking for specific and what how you can apply to the single page now you know how to use the single page templates you can apply any module that that is relevant or the single page and in a way you go so yeah I hope you have a great day and I hope this has been informative and if you have any questions please get in touch and we love to hear from you guys on how you how the plugins be helping you and what you've been building with it so get in touch show us what you've been doing and yeah well and would love to see it speak soon and have a great day

Channel: Divi Engine

Views: 2,129

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

Id: qf5-9111Im4

Length: 18min 38sec (1118 seconds)

Published: Wed Jul 01 2020