Divi 4.0 Tutorial - Why you should use pre-made layouts

Divi pre-made layouts are really powerful if you want to design professional-looking websites so in this video I'm gonna show you how to use pretty much any type of layout we have in the Divi library and transform it into whatever type of website you need to design but before I get started I want to show you my brand new template called Genesis so this template here is really good as a starting point so as you can see here it has a header area so as you add more links over here they'll be populated over here on the top and if I scroll down here you can see there's a slight shrink of my template and also I can actually search and let's search for cakes for example now let me show you what the search results page looks like so these are the results this is the page where all the results will be shown and there will be definitely down here now if I take a look here at the bottom as well we have this footer in which if you add all your logos and your website tagline it will automatically be added into its right place and then over here are links as well can be pretty much customized and you can link these pages to every page you want to same applies here with the social media icons you can link this to whatever you want now the reason why you may want to use a template like this is because each time you build a website it takes a really long time to design your footer template your header template your 404 page and so on talk about the 404 page let me show you quickly what the 404 page looks like so let's say over here I search for a page which doesn't exist I can just search and then straight away this is our 404 page so as soon as you install this template it will have the all these elements into them so if I click your own go to home page this will just take me back to my home page so this is a template that you may want to use it's only $7 the link to that is in the video description below and also if you buy Divi using my affiliate link I'll give you access to this template and also a full course called the web design formula which teaches you how to design professional-looking website using Divi all right let's dive in and let me show you a hard to use these pre-made templates so right now I'm in my admin dashboard so over here two pages click on all pages so the page we need to work on is the home page so I'm just going to click here on edit and then I'm gonna go straight into the Divi Builder and this time instead of building from scratch we are going to build from a premade layout so I'm gonna go ahead and select that so we have quite a lot of layouts here on our library so as I scroll through this to see here there's quite a lot so I'm just going to choose any layout here because the website we're going to the page we're going to design is for like a tech let's say tech website so I'm gonna come over here and select this seller 1 click on use this layout ok so as you can see all my elements have been added on to this website but of course I want to customize this website and make it look like mine so the first thing you want to do is to go into all these modules and the rows and customize this so I'm gonna start here with my section settings and the first thing you want to do is to make sure you come over here to filter because this is where you can scroll down and actually choose and see what has been modified here so I'm gonna click modified styles and you can see here nothing has been modified here so that's fine so I'm just gonna close this go to my background and just make sure there's no images that were added here all right so that's fine I'm just gonna close this so the next stage now is to come over here to my module settings so I'm gonna click here on module settings and definitely this is where quite a lot of work has been done so I'm gonna click here on filter modified styles and this will now show me what has been adjusted on this page so I'm gonna start off by working on this image here so I'm gonna click on this image and I'm gonna come over here and upload my own images I'm gonna click here on select files so all my images are in my downloads folder so I'm just gonna select all my images here click on open so now all my images are going to be added onto my desktop so now I can choose the image that I want to use for that so I'm gonna go ahead this one here upload an image and now I have my image so now with this set here I can actually decide whether this is gonna be a better image for my design so to be honest I don't think this one works so let me go in and let me try and choose another one let's try this one here again I'm not really happy with that so these are the sort of decisions that you're going to be making as you are choosing which images to use on your designs so this one here I think works better so I'm gonna go with this one here so now that I have my image and I've aligned everything to the left the next stage now is to change mine font so I'm gonna click on this drop down and for this font here I'm gonna choose Poppins I select that and now you can see this has been changed I can click here on this brush tool do the same thing here change this to Poppins and I can just continue doing that until I am happy with the font that I'm using now of course you can also change this text here to whatever you want but of course I'm not gonna do that here next when it comes to all this text here you can actually go in and make some changes to it so I'm just gonna save this because now I've added you know my image and I've also added my text so as you can see here things don't look really nice because this is stretching all the way over here across the page so let me go back in and customize this one more time so to do that I'm just gonna pick you on my gear icon for my module settings design layout so over here it's a to full screen pretty much that's what we want but we want to look for sizing because this is where we could get to adjust our content width and as you can see here it said 80% so let's bring it down all the way down to let's say about let's say 48 percent and let's take a look at what that looks like okay there we go so now it looks much better so as you can see I haven't actually gone in and designed this whole page from scratch all I'm doing is to go in and just make minor tweaks to the page that we already have so now let's continue working on this so the next stage now is to come over here and let's say you want to change this tag so I just go in here click on design in fact one of the quickest way is to click on this little brush tool and in there I can choose the neato I mean change the leader to Poppins and you can see there it has been adjusted I can save that and I can also right click and extend text Styles so this will look for anywhere where this heading is and change this fonts to that actual font so I can choose this page click on extend so now wherever we have this title as you can see here this has been changed as well so all I have to do now is to go in and change the color click here on design heading text make sure to choose the right heading here change this to white so it's easier to read and I can also make some adjustments to the sizing bring this down a little bit make sure it's centered and I also need you do the same here with a button so I'm gonna come over here to this button click on this gear icon click on design alignment and then make sure it's centered so now it's time to change this image that we have in the background so I'm just going to save this and then I'm going to first of all come over here to my row settings so I'm not sure where things where this image has been added so the quickest way like I showed you before is to click here on filter modified styles and we can see here that is not added here on the row no problem you can just close this so now we need to go into the section settings click on background and here it is so I can click here and this time I'm gonna go with this one upload an image and look at that look at that nice beautiful save that and now I'm going to come back over here and I just wanna make sure everything is all centered here so I'm gonna click here on design texts and just make sure everything is aligned Center now you can see it's centered and I'll take some changes to dark to light and back over here to spacing I'm into sizing I can actually readjust this width to make it fit better so I'm going to go for with 56 now save that and if I need to change the button color I can just go in and change my button color in here by just clicking on my module settings click I click here on design button and as you can see here I have my settings for my button so I can change my background color here I can change it to that and let's say my border width same thing I can go in change the color and as you can see just a few clicks I've actually updated my button here and I can also go into the hover and change my colors here on hover as well to make the to make it look uniform alright so now that I have this section all done next I can also start working on these areas right here so let's say I want to change these images in the background so again I need to test and see where these images have been added so I'm going to click on row settings so I'm going to target this middle one here so I'm going to click on this gear icon filter modified styles and there we go here's my image right here I'm gonna click here and choose my image so I'm gonna go with this one here uploading an image and now you can see my image has been added next I need to go in and change the colors so I'm just gonna go back over here I'm gonna save that and now I can go into my module settings here click on design text and it's gonna make sure everything is all align Center change my text color from dark to light and I also need to adjust this because I can't read it so click here change my color and this button this wall I can change that by coming over here to my section settings my module settings click on design alignment I'm gonna Center it and you can see all I'm doing here is replacing all the content that I have here on this website with my own content and then finally over here maybe this color here doesn't work for you let's go ahead and change that I'm gonna click here on the skier icon click on background then I'm just gonna change this color here okay so I think that looks much better there we go save that and then for this title I'm just gonna go into my module settings click on design and then I'm gonna click on this brush tool this will take me straight to my settings change this to white save that and pretty much I've just gone in and I have quickly changed all my content here to suit my design so of course I could have gone in and made for the changes here to this paragraph text or add more paragraph text I could add more items here but as you can see this is how easy it is to use a premade layout in your designs and also the advantage of doing it this way is you don't have to worry about the sizing making sure that the design is mobile-friendly because with these pretty pre-made layouts they come out with they are designed with all that in mind so pretty much on every screen it's gonna look really really nice alright guys that's all I have for you today thank you very much for watching don't forget to hit the subscribe button and also the Bell notification see you again another video take a

Channel: MAK

Views: 7,989

Keywords: How to make business website with wordpress and divi, Augustine mak, divi 3.0 course, divi 3.0 training, divi 3.0 theme tutorial, WordPress website tutorial, divi library layouts

Id: TbcBPCz9rTc

Length: 13min 0sec (780 seconds)

Published: Thu Jan 09 2020