How to use Divi premade layouts

one of the greatest benefits of using the Divi builder is the pre-made layouts these are layouts which are professionally designed which you can use in your own designs for your own projects or for your clients and also the images that come in these pre-made layouts are royalty-free you can use them in your projects and not worry about any licensing issues these pre-made layouts make it very very easy for you to build websites really fast so in today's video I'm going to show you step-by-step how to use these pre-made layouts in your own web design project but before we begin if you buy Divi using my affiliate link I will give you access to my Divi blueprint 3 course which teaches you how to use TV and also hard to build professionally designed websites all you have to do is to use the link in the show notes below to purchase Divi and then you can just send me an email and I'll be able to give you that course alright so one more thing in order for you to follow along step-by-step you need to have Divi itself so make sure that you buy Divi first and then install it on your computer now to purchase Divi it's very straightforward as I mentioned the link is in the description below but that link takes you to elegant themes comm where you'll be able to access your account here where it says account and then you can go into account details and you can go to your product downloads download the Divi theme and once you've downloaded it it's quite straightforward to install all you have to do is to come over here click on appearance themes and then all you have to do is to click on add new click upload theme and then navigate to where you've downloaded the theme so once you upload it you have to activate it and pretty much that's all you need to do so now let me show you how to build your websites using these pre-made layouts ok so the first thing you want to do is to start by creating the page so over here let's click add new and let's add a homepage so again you need to decide what sort of website you need to build it could be a restaurant it could be a plumbing website whatever it is you'll be able to find a theme or a premade layout so here if I click on News Divi builder this will take me to the these three options built from scratch choose a premade layout and clone existing page so this is what we need to do here choose a premade layout so once I click on that this gives me now a list of all the premade layouts that are in this library we as you can see here we have 123 layout packs and these are added pretty much every single week so this is updated very very regularly okay so now this is where you get to choose what type of websites you want to build so as you can see there's quite a lot here but in this case let's say we want to build a website interior design website so now you can just come over here or look for a premade layout that's pretty much close to the layout that you need so in this case it's interior design I'm going to come over here click this now what this does it gives me an idea of what these pages look like and as you can see we have the about the blog to contact the home landing portfolio services and shop so now since we're building a home page I'm going to click on home use this layout and this now will download all the elements that make this page work so as you can see here all my elements are in all my images they all in and this is really really cool so pretty much that's it you can click on publish and this page is complete now let's exit the visual builder and take a quick preview of this page so now if I scroll through this is the full page and this is professionally designed it looks really really nice so let's say you want to make some specific changes to this design how do you do that so first of all you want to click on enable visual builder so here you can change this text by clicking here on this gear icon module settings so this is the heading as you can see so let's say you want to remove where it says elegance in and then you just want to leave interior designing there okay so that's what you can do you just remove the text add some text and then over here as well you can come in you can add more text and as you can see it's update here right now let's say you want to make some adjustments to this button again you can you small so over here click on this brush tool this will take you straight to the design settings off the button and let's say you want to change the color of this button here you can just click here anywhere in this place and then you can just scroll or maybe let's make this blue for example like that you want to scroll down the border here as well now we've just adjusted the page I mean the button for our page okay so over here you can also change the the image size though the image type you can pretty much go in and make your custom adjustments but the most important thing here is you were able to create this page pretty much very very fast from scratch using these pre-made layouts now let's say you want to create the about page now all you have to do is to come back over here let's go to our dashboard I'm gonna save it exit so now we're gonna click on add new now let's add our about page click on use Divi builder and again we're here on our premade layout just choose that scroll down until I find my interior design company so this is the about page I'm going to select this about click on use this layout so if you're designing websites for your clients this is the best way to do this because it saves you a lot of time to try and build a website from scratch adding all your padding margins making it compatible with different screen sizes so this comes in with all that baked in so all you have to do if you need to make any adjustments on to this is to actually go in change your images and the text that that comes in pre-made on these pre-made layouts so again here as you can see this page is loaded up it has all the images and now you can go in and change the colors if you need to and again I'm just going to do one quick change here as well so let's say you want to change this play icon all you have to do is to click here on this gear I on this will take you to the settings now over here on the overlay image we can change this image if we need to let's say we want to adds an image of this lady here click upload image and you'll notice that it has been uploaded and then we can go into design play icon we can also adjust the size of this icon because I think that's a bit too big let's reduce that so I've just brought it down a little bit to about let's say 16 we can change the colors here to whatever color that you want and I think blacks will black works really well with this and then you can click Save so the reason why I'm going through this just to show you how easy it is to come in here and make quite a lot of changes now let me show you again one quick way you can also go in and make customizations really fast so sometimes it's quite difficult to know where these changes have been made so let's say for example I come over here but I don't know where most of these changes are made so if you click here on filter and then you click on modified styles what it does it breaks down and just gives you everything that made this actual design so as you can see it's already showing me on the desktop here this was set to 65 pixels I can just go in and reduce that to baby let's say 50 if I need to I can reduce my line height so this takes me directly to where my changes were made in this design makeup which is great so let me save this and let me show you again one more time if I click here on the skier icon to go into my section settings filter and then I can click on modify it Styles and again this is where you can see the changes so here I can see there's padding that has been added to the top and the bottom so I can actually change this to 10% if I need to and you can see here this has been reduced and then over here this shows me the image that was added in here so if I click here I can actually change that image to something now so let's say I want to go with this one here click upload an image and instantly this has been changed so this is where you know you can come in and add your own images to these designs so you don't have you said early use these images although it's okay to just go ahead and use them but you can use your own images now the places I recommend to download these images or to get images from our pixabay and pixels calm in fact let me show you these resources and again these images are royalty-free which means you can use them in your own designs so for example let's say you want to go with any of these images all you got to do is to just click on the image download it and use it on your website so let's say I want to go with this image here free download and the cool thing here as well is it actually shows you the size that you can download so let's say you don't really need a massive size you can just go down to let's say 1280 by 854 click on free download and as you can see it's download is downloading here in the bottom corner of my website okay so now that I'm back over here let's say I need to change this image here I can just click anywhere on this area upload files select files now I'm gonna go to my downloads and upload that image that I've just downloaded onto my computer click upload an image and there you can see it has been added so this is a quick way of customizing your pre-made layout designs and build websites fast so so far we've done two pages so let's say you want to add a contact page to this now how do we do that right just like what we did before let's first publish this page right great so now let's go back here to our dashboard pages click on add new and this time is the contact page okay use Divi builder choose premade layout right so here you can also be a bit creative you don't have to use the same pre-made layout from that actual layout pack you can you know mix and match these layouts and just make sure that you use colors throughout this is a bit more advanced but I could show you this in another video but in this case I'm just gonna go in here and choose the contact okay so on the selected contact use pre-made layout great so now we have all this all set up so the most important thing when you install or when you load up your contact page is to go in here into your module settings and make sure you come over here to email and add your email address because if you don't then this form won't work so here I'm just gonna add my email address message pattern I'm gonna leave that as it is but if you want to know what it is you can just click here on this question mark and then it just explains what that is but in fact as you can see here my email address is in place so if anyone comes to this page and fills in their name email address subject and message when the hit submit that's that message is sent to market Makita kodachi okay okay so I'm gonna save this and again as I've shown you before if you want to come in and change its images you can always come over here click the section settings filter modified styles and then we can see that this is the image that was loaded so again let's change this to something else I'm gonna go with this one here that we've just downloaded just to show you that it works and there we go we have our image in place right so right now you might think okay everything is all done and pretty much that's fine now let me show you what happens now if we go to our main website okay so if I go to my main website you can see here that we haven't set our homepage to on our website because by default when you install WordPress it installs it as a blog website so let's go ahead and fix that so we want that when people come to our page they see the home page that we've just built so here we can go to dashboard and then we're gonna come over here to settings reading so over here as I mentioned this is set to latest posts we want to change this to a static page so I'm gonna click here select home Save Changes okay now when we come to this website notice that now we have our page so that is how you quickly will create a website using pre-made layouts and if you go to the about we can see that this is the about page that we created over here we also have the contact page now over here you might be thinking okay so what is going on why do we have all these links over here it's very very untidy before I end this video let me show you quickly how you can go in and fix that so to fix that you want to come over here to appearance and then click on menus so right now we don't have a menu that we've built so so I'm just gonna say save to this main menu and then what we're gonna do is to choose the pages that we need to add so I've just added those three I'm just gonna rearrange this to make sure that home about in contact in that order and making sure that this is the two primary menu if I click on save now if I go to my website my menu should look very accurate and there we go home about contact okay and these page all working fine so as you can see it's very very easy to use premade layouts it is highly recommended if you want to build your web pages really fast and this could be your own projects or even if you're a freelance designer and as I mentioned these pre-made layouts are designed in such a way that they look great on mobile devices and also on tablets so if you want to learn how to design professional-looking websites using Divi I have a free course that I'm giving away if you buy Divi using my affiliate link and also the advantages of doing it through my affiliate link is when I update the course you will also still get access to the brand new course absolutely free alright guys that's all I have for you in today's video thank you very much for watching see you in the next one

Channel: MAK

Views: 28,992

Keywords: Augustine mak, how to use divi premade layouts, how to use divi builder, how to use divi builder in wordpress, how to use divi contact form, how to use divi in wordpress, how to use divi page builder, how to use divi theme, how to use divi theme wordpress, how to use divi visual builder, divi premade layouts, divi builder, divi layout packs, divi layouts, divi wordpress theme

Id: YwYcsdVGpWw

Length: 15min 17sec (917 seconds)

Published: Thu Jun 27 2019