Divi Theme Tutorial | 5 Things you need to do before you start using Divi

in today's video I'm going to talk about the five things that you need to do as soon as you install DV on your website coming up hello everyone and welcome my name is Mac and in today's video I'm going to talk about the five things that you need to do as soon as you install DV on your website now these things I'm going to talk about I'm gonna save you time and also make it easy for you to design your websites now before we get started I'd also like to remind you that if you buy DV using my affiliate link I will give you access to my web design a formula course a course that teaches you how to design professional-looking websites with Divi all right so let's dive in and let's talk about the very very first thing so first of all when you first download DV most people want to go in straight and start building their website so the very first thing you need to do is to make sure that you install your API key so what you need to do to saw your API key is to head over here to your website where you bought Divi and then login to your members area so once you login to your members area you want to come over here to where it says product downloads and then click where it says my account so this is where you get your API key so you just click over here and this will show you your API key of course I'm gonna show you my API key in this video because for obvious reasons alright so once you've copied your API key next you want to come over here to your website now and then go to theme options so here on theme options you want to go straight to updates so you want to enter your username and API key so you may be thinking why do I need to add my API key here so the most important reason why you may want to add your API key is number one DV occasionally puts out updates to enhance the builder and give it more features so without this API key you won't be able to get these updates pushed you automatically secondly its support so the API key also gives you access to do remote access support so without this key you won't be able to get the support that you may need from the support team so this is the main reason why you may want to do this and also there's also a feature called the roll back to a previous version again this needs the API key for this to function well and also I almost forgot premade layouts in order for you to download the premade layouts which are also important by the way you need to have this API key installed alright so let's move on to the next item and the next item we're gonna be talking about here is the color palette so after you've entered all your API key you want to come back over here to general and this is our color palette here so again why do we need to enter our colors for our color palette it's important because as you start designing our website it is very very time consuming to go in and add your hexadecimal value every single time you want to change an item on your website so by entering your colors over here this sets your colors throughout your whole website so every time you go to any page or any design in your website you will see the new color palette that you would have entered right here in the theme options alright so the tool I used to choose my colors is cooler scope so over here what you need to do is to generate your color palette once you're happy with it you can come over here copy the hex value come over here to your site and then you can go in and start adding all your hexadecimal values in here so you can see here it is changing right away so let's go ahead and add a few colors here and then show you how this works on your website so I'm not gonna go in and add all of them because obviously the process of adding these colors is very straightforward as you can see I'm just copying here and then coming back to my site and adding the values let's do one more and then we move on to the actual design and show you how this works alright so you can see I've added these first four colors let's add white to this as well there we go so now I've added white and we may also need like a gray over here so let's add three three three three three there we go so now we have a gray so once you've entered these all you have to do now is click on save now let's build a brand new page and see if these colors will be shown every time we tried to stylize any modules elements or any row on our website so now that I've saved this I'm gonna come over here to pages and then click on add new so I'm just gonna call this page you know pretty much anything and this is the first time I've installed Divi here so all right so let's just call this page test and then we're gonna use the Divi builder so this is the first time I've installed Divi on this website so we are going to get this walkthrough but I'm just going to say start building right so now that I have these three options let's just go ahead and build from scratch so I can show you how this works so let's say you want to add some colors on your website so if you come over here to your section settings for example let me just snap this over to the left now if I go to background you notice that now all my colors are now here the colors that I initially entered when I was setting up my colors in the theme options okay so that's the background so let's say I want to go with this color here save that and now let's add let's say a text module right so let's say I need to customize my colors here I can just go over to design text and again you can see here that my colors are all showing here so I can go straightaway and choose the color that I want to use and then save so as you can see the color palette is really really powerful if you set it up right from the get-go this will save you a lot of time moving forward so this is how I would set up all my colors alright so let's move on to the next item and that is the theme builder so the theme builder is very important because everything that you say in your theme builder is going to be applied across your whole website so why design the whole website first and then go back to the theme builder but as I'm mentioning all these things it doesn't mean that if you've already designed your website you can't use all these tips that I'm giving you know you can always go back and add all these things that I'm giving you in this video but if you're building it as a brand new website then it's ideal that you start off this way alright so as you can see here we have this footer area to be honest it doesn't look really good and I'm sure you can agree with me so this is where you want to go in and go straight to your theme builder so I'm gonna come over here in fact let me just save this okay now I'm gonna go over here to the dashboard and go straight all the way down here to the theme building so you may be thinking well why do I need the theme builder as I mentioned a few moments ago everything that you set up here is going to be applied pretty much across your whole website saving you a lot of time so now that we don't have we can see you don't have a footer on our website so if I come over here now to global footer I can build my global footer for my website over here so I'm going to do a quick example here I'm not going to go in fully in and full on and design a footer here I just want to show you quickly how easy it is to build one so I'm going to figure on build from scratch and let's start with a single column and let's add a text module okay so in our text module I'm just gonna say ours our business and this is just an example by the way and then I'm gonna add my links here okay so I'm gonna highlight this and just add a blank link for now come over here give this a blank link okay one two services do the same thing add a blank link okay so you can see here I have in fact this one here hasn't worked not sure why let's go back and try and do the gain there we go right so now it is over here and we can make this bold if we wanted to so you can see here this is the first part of my footer here so I am going to save this and then I'm just gonna give this a background color and let's go with all right so we're gonna go with that as our background color for our footer and then save I mean we can go further and customize the text here change the colors and so on but you know what I'm just keeping things simple here now I'm gonna go into my row settings and then I'm just going to duplicate this a few times right so I'm gonna save now save one more time now remember the footer that we had initially when I created my test page was not very good so let's see what happens now I'm just gonna close this and then Save Changes right so now let's take a look at our website and I'm gonna do this in a new tab now when I go over here you can see our footer has changed and just like that even if you had a thousand pages on your website the footer will be applied across your thousand pages on your website so this is the power of using the theme builder you can also do the same with your headers you can also build your posts you can build ecommerce pages archive pages and so on so using this theme builder here is very very powerful if you wanted to add a new template you can come over here to add new template and then you can choose what template you need to create for your website alright so now that we've spoken about the templates now let's move on to the fourth item and this is the global settings so as we design our websites in fact let me just head over here to one of our pages so I'm just gonna go to all pages and let's go to the test one because this is the one that we're working with so before I can go in and talk about this setting which you need to do right from the get-go before you start designing Divi I want to give you a scenario here when it comes to adding modules or sections or even rows on your website they come in with default settings and this is pretty much just the out-of-the-box setting that elegant themes comes up with so in most cases when we build our pages we have to go in and do the same tasks over and over and over again and this is time consuming and the next tip I'm gonna share with you now is really really powerful it's called global settings I can create just one button and skylight is stylize it and then that button now will be applied oh that design of that button will be applied pretty much across the whole website now I'm just giving button here as an example but you can use this with pretty much anything on your website so let me show you how that works so what we're gonna do here is let's add a new section right so we're gonna start here with let's start with a button so I'm gonna add my button here so you can see here this is the default styling of the button and like I said you need to go in each and every time to stylize it every time we need to use it so to save you a lot of time what you need to do is to change this into a global item so what I need to do now is to go in and design this button so in order for us to see the changes what I'm gonna do is I'm just going to duplicate this and add it over here on the bottom right so what we're gonna do now is to go in and stylize the top one so I'm gonna give it a blank link and then I'm gonna come over here to design button and activate custom styles for button so with that now I'm gonna give this a background color so let's say across the board I need to have let's do something a bit different here let's go with that for a background color and for the texts we are going to change this to light and then we're going to continue here with the alignment if we need to have our buttons all centered we can just make it centered over here all right so now that I have that all set the next step now is to go to our border width and maybe I want to remove the border width altogether and if I need to do any more change through this I can just go in and customize that so let's say here I just need to make my font-weight:bold and let's make it all caps as well all right so let's say this is the style of the button that I need across my whole website as you can see here I've gone in and I've applied a few clicks in order for me to come up with this style but to save us time what you what you want to do now once you've designed this is to right-click on the top here and then say make Styles default and then I'm just gonna say yes and you can see now this one here has this default style applied so if I save that and then let's say down the line I'm working on my website and I need to create another button now notice what happens so I'm gonna click here and say button and then as soon as I choose my button you can see here it has the same style so I have saved myself a lot of time going in changing the colors making sure everything is looking you know right every time I add my button so I know I'm using the button here as an example but this can apply to modules you can applies to pretty much anything on your website the most important thing here is just to make sure once you've designed it you right-click and then say make Styles default so once you've done that you know all all your buttons on your website will be default to that style that you've just created and also any future buses that you going to create also going to have this same default alright so let's move on and talk about the fifth setting that you need to have on your website before you start designing your website and this time it's your fonts so as you're designing your website it is very important that you choose your phones right from the get-go because what I've noticed when I was doing some website reviews is people use different types of fonts and this does not make your website look professional so you need to make sure your website looks really really professional and you need to set up your fonts right from the get-go now there's a website here that helps you choose your fonts I think it's called a font paired let me see if that's the one and yes so this website here helps you choose fonts that work well together so you can see here you have Laura and Merriweather and these as you can see here they work really well together we also have this one here prose a library and open sans so you can look over here for inspiration you see how these fonts are looking and also you can choose specific layouts here and you can see here we have different types of combinations that you can use so once you choose your fonts from here these are the fonts that you need to apply to your website in fact you can also add them on to your theme builder and these would be applied pretty much across your whole website so these are the main things that you need to do to your website to make sure that your workflow is much much easier and this will save you a lot of time moving forward and also ensuring that your website is going to look professional so that's all I have for in today's video if you like this video please give me a thumbs up and don't forget to subscribe and hit the bell notification by doing so you'll be notified every time we release new tutorials until next time thanks for watching and I'll see you in the next video

Channel: MAK

Views: 37,791

Keywords: Augustine mak, Divi 4.0, divi 4.0 tutorial, divi 4.0 templates, Divi 4.0 template, Carflows divi, wordpress funnels, Cartflows tutorial, make online courses, online courses, online course tips

Id: 9S2F71QQbTg

Length: 15min 12sec (912 seconds)

Published: Thu Jul 09 2020