How to Make a WordPress Website | Divi Theme for Beginners

what's up guys my name is Dale from creator Pro website and in this video I'm gonna show you step-by-step how to make a website with the Divi theme so Divi isn't incredibly easy to use theme it allows you to drag and drop whatever elements you want and has virtually limitless customization options you'll also have access to hundreds of different templates that you can use and you can customize them to make your website your own but without having to start from complete scratch Divi actually has the most active installs and downloads in the entire world because of how easy it is to use and create professional websites from home and you don't need to know any coding or have any sort of web design experience before this because I'm gonna walk you through the whole thing step-by-step so let's go ahead and take a look at the website that I'm gonna show you how to make so this website has a very clean and modern design so if you scroll down you can see the button the text everything animates in which is really nice and smooth and if you keep going down we've just got tons of awesome sections that you can customize and make your own and there is even a contact form at the bottom so I'll show you that right there and there's also a menu up here at the top that I'll show you how to make I'll even show you where to get a logo like this or make your own and this entire website was made with the Divi theme and it does not take long at all so I'm going to show you step-by-step how to make this and again I've set up this tutorial to be step-by-step and super easy to follow so if you're on a keyboard you can use the left or right arrow keys to go forward or backward by five seconds and if you're on mobile you can just double tap the screen on whatever side to go forward or backward and feel free to pause the video whenever you need more time and I've also put timestamps in the description below so if you want to skip to a different step or go back to one you can just click on one of those timestamps so with that said let's go ahead and get started step number one is to secure your domain name and your hosting plan so if you're not entirely sure what a domain name is or how it works or you're unsure of what web hosting is I will put links to two different videos in the description that I also made to explain them and I used visual graphics so it's super easy to follow my aim here is to educate you on why and how things work and not just what they are but choosing the right web hosting company is very important because this is where you're going to get all your design tools this is where you're gonna get the security for your website and support if you need it and the web hosting company that I personally use for all of my websites is Hostgator because they're fast they're reliable and I've also worked out a special discount code with them that you can use to get a huge discount on your hosting trust me it makes a big difference so just simply click on the first link below this video which will take you to a co-branded landing page that I have with Hostgator so here is where you're going to be able to sign up for web hosting and the reason I recommend web hosting versus doing a free web site is because with a free web site you can't really monetize with ads you have very limited options as far as customization goes and you don't own your domain name so it's gonna be your domain name dot wordpress.com or dot wix.com or whatever platform that you're using so I recommend doing professional web hosting you can see we have a few plans here but if we're just starting out I recommend the hatchling plan the baby plan is if you want to have a bunch of different domain names so you want to own you know let's say ten domain names and you just want them under one account this is the plan for you and then business plan is I really only recommend this if you're planning to make a ton of money with your website and you can always upgrade to it later so if you are just starting out let's just go ahead and do the hatchling plan it's the cheapest plan so let's just do buy now okay and here is where you're going to be able to get your new domain name and if you already have a domain name that you want to use you can just click on this tab right here but if not we're gonna get one so I'm just gonna do create a Divi website.com and cool it is available so I'm going to leave that checked and it's gonna offer you a bunch of different ones like club site net etc I recommend sticking with a.com whenever possible it's the most professional-looking so we're just going to scroll down and this will give you the main privacy protection option which it says it's already checked right here I highly highly recommend doing this because I made the mistake on my very first website that I ever made of not getting this and you just get bombarded by solicitors you know with spam calls trying to say they'll build your website for you and offer you all this stuff and it's really annoying and all web hosting companies offer this protection for that reason so I highly recommend leaving that checked so let's just scroll down some more okay so you can see we've got the hatchling plan and it's set at 36 months which is going to be the cheapest so the more months that you commit to the cheaper the plan so you can see it's 271 a month I recommend at least doing 12 just because you're getting your domain name for 12 months anyway so you might as well get your web hosting for the same time but if you're just starting out you just want to get your feet wet see what it's all about you can just do the one month and then whenever that's up you can always just switch to a new plan but either way 766 a month is really not that much just don't buy a cup of coffee and a snack and all of a sudden it's paid for it so let's just enter in a username I'm just gonna do my name and then a security pin okay so we'll just scroll down and here is where you're going to enter in your billing info so it'll ask you for email your name and as well as your credit card or if you want to pay with PayPal you can do PayPal but I'm gonna enter in all this info right now okay so we'll keep scrolling down and this is gonna offer you some additional services so you can see that the free SSL certificate is included and there's actually no option to take it off but you want this because it's this little lock symbol up here that allows people to know that your website is safe and secure so adding this is a must-have otherwise users might go to your website and then Google Chrome or whatever they're using might block their access to it because it'll say oh this websites not safe okay and you can uncheck protect your site from hackers as well as backup your hard work because I've got other videos on my channel that show you how to do this stuff for free so you really don't need to add it to your package same with the get professional email I've got a whole nother video that shows you how to get that email so that'll be let's say contact at your domain name.com so just check out my channel for that so we're just going to scroll down and make sure that the enter coupon code says create a pro website which it does and it is validated so this is what's gonna get you that massive discount that I talked about I think at the time I'm recording this it's up to about 60 percent depending on which plan that you choose so if you go with the one month it might be a little bit lower but if you go for twelve or thirty six months the discount just gets higher and higher okay so we can review we've got our domain which was fifteen but after the discount it is only five bucks and then we've got our hatchling plan which is one month so it used to be ten ninety five now it's only seven sixty seven and then our add-ons is just the domain privacy protection so all in all only comes out to about twenty seven dollars but if you're doing 12 months or 36 months it will be higher so you're paying up front but in the end it's a lot cheaper if you commit to more time so I am just going to click check and by the way guys this Creator Pro web site is my affiliate link so yes I do get a little bit of commission off of this and that kind of helps fund these free YouTube tutorials that I'm doing but if you don't like me and you don't want to use it you don't have to use it but I guarantee it's going to be the best discount that you're gonna find anywhere on the Internet okay so let's go back down and we've checked read and agree and now we will just do checkout now all right there we go so it'll say get ready we are setting up your account so just give that a minute and then it should take you to the cPanel which is the dashboard of Hostgator okay so here we are in the Hostgator dashboard this is your cPanel so it's gonna give you this little offer to take a tour or start building the website but that's a different drag-and-drop builder so we're not going to worry about that what we want to do is first install WordPress now if you're unsure of what WordPress is exactly it's basically just a program that allows you to create websites without knowing any coding in fact when you make a change with the visual editor WordPress will automatically update the code for you on the back end so that you never actually have to see it and WordPress is completely free and believe it or not it powers over 30% of the internet right now so that's a lot of freaking websites so let's go ahead and install it okay so to install WordPress we're just going to go over to this menu on the left and click on marketplace and then just scroll down and you'll see 1-click installs right here and this one has the WordPress symbol so we're just going to click on that and then from here just click on site builder and CMS and then you'll see WordPress so just click on WordPress so we're just gonna choose select your domain and we're going to choose the domain that we just bought so create a doobie website comm and then just leave this s directory and click Next and then just give your website a title for now and you can always change this so I'm gonna do create a Divi website admin user is my name and then we'll do first name last name and then admin email now just agree to the terms then click on install cool so WordPress just completed installing you can see we've got a little check mark up here and what you want to do now is just take this information right here and copy it because what we want to do is put it somewhere on our computer that's safe so that we can come back to this password right here because that password is obnoxious and you're never gonna remember it but you want to put it somewhere safe and don't worry we are going to change it so step number three is to log into WordPress and change your password so to do this you could click on the login button okay so you're brought to this page because Hostgator has to send out your new domain name across the entire world it's got to let the rest of the world know that hey this domain name exists and this process is called propagation and this could take somewhere around 20 to 30 minutes it says it could take up to 24 hours but I've never actually had it take that long so what you're gonna do to check on it you know every 20 minutes or so is just go up and type in your new domain name and then just do forward slash WP dash admin because this is how we're gonna login to WordPress okay so take a break for 20 to 30 minutes and then I will see you back here okay so we're back and let's check on our website so like I said I'm just gonna type in my new domain name forward slash WP dash admin this is how you should always get used to logging in cool and this page will show you that it's working so if you went back to that DNS page that we're just on then you have to give it a little bit more time but we are back so what I'm gonna do is log in so I'm gonna do my name and then I'm gonna put in that ridiculous password from earlier that we saved so I'm just gonna paste that and then I'm just gonna click on that login okay so here is your new WordPress dashboard and it looks a little crazy so let's clean it up and make it a little less daunting so just click on the X on pretty much everything that you see okay that is much cleaner looking so now we're gonna change our password so to do this you've got your menu over here on the right and this menus going to come in handy a lot but for now what we're gonna do is just go over to users and then go to all users and then you'll will just click on your name and then if you scroll here you can actually change the layout so you could do light or blue or pretty much change the entire appearance of WordPress by the way but I'm just gonna leave it as default and to change your password just go all the way to the bottom and then click on generate password and then just delete the new crazy one that it gives you and put in your home and I recommend something that you will always remember so now just click on update profile okay so step number four is to install Divi now I've placed a link in the description underneath step four that will allow you to go install Divi so just click on that link or what you can do is just go over to a new window and we're just going to type in create a pro website.com slash Divi cool and again this is also my affiliate link so yes I do get a little bit of commission off of this but if you don't like me you don't have to use it so this is Divis landing page which you're welcome to scroll down and read all the stats on Divi and what it offers you but I want to answer the question of why Divi why am i choosing this one over the thousands of other themes out there well it's mainly because Divi is the number one drag-and-drop builder in the entire world and I'm not just saying that to fluff them up or anything like that you can actually Google statistics on it that Divi is way ahead of their competition because they're so easy to use and the customization is just limitless you can make any website that you can think of so in order to get Divi we're just gonna click on join to download and you can see there are two different plans you've got the yearly access and the lifetime so if you know that you're gonna be working on this website for years then you can go ahead and get lifetime because in the end it will be cheaper but if you just want to try it out which I totally understand it's what I did when I first got Divi you can just do the yearly access and there is a 30-day money-back guarantee on both of these so if you want to get it and all sudden you're like I just don't like it as much as Dale said well that's okay you can get your money back within 30 days so I'm just gonna go ahead and get the yearly access so I'm just going to click on sign up today and then just create a username put in your email and then you can pay either using your card or PayPal much like whenever we bought web hosting so I'm going to go ahead and fill out all this information right now so just scroll down and then you can just agree to the terms right here and then I'm just gonna uncheck subscribe to receive updates I generally don't like my inbox to get flooded with emails not that Divya actually does that sorry elegant themes but I just generally do that on everything so now I'm just going to click on complete registration and then you'll be asked to put in your card number if you chose the card option so I'm gonna do that right now and then just click on pay okay cool so we have just signed up and now we've got Divi and a few other extra apps that come with it but I'm not gonna get too far into these really don't need these what we really just need is Divi so I'm just gonna click on a login to download our products type in your username and password and then just click on member login cool so here we are and again same things here but all we really need is Divi so what you can do is just click on download awesome so that just hit my downloads and while we're here if you just go over to your account and then you can go into account and see a section that says your API key I'm not gonna go to mind right now cuz that info is kind of confidential but yeah go into account and just pull up your API key and just leave that there because we will probably need that later okay so now we're gonna go back to our WordPress dashboard so now we want to just install Divi as a new theme so what we're gonna do is just go over to appearance and then click on themes and just go over to upload and then click on upload theme and then just go down to choose file and then just grab the Divi folder that hit your downloads and in this case I just put it on my desktop and there's also a follow along images folder that I've also supplied in the description below so if you want to follow along with all the images just go download that and all you need to do is click on it and it will be an instant download ok so anyway grab your Divi zip folder and then just click on open and then just click on Install Now cool so it is now installing and you will actually see oh it's already done so theme installed successfully cool okay so before I show you how to use Divi and start customizing your website what we need to do is move on to step number 5 which is create a menu so the reason why we want to create a menu is because we want to have a contact button and a services or an about or anything that you want up and the top bar of your website so you've got your logo and then you've got your menu so let's jump in and make one ok so in order to create that menu we need to make these pages so we need a contact page and we need an about me page so in order to make a new page we just go to pages and then we just go to add new ok so I'm just going to click on the X and I'm gonna give this a title and I'm gonna say contact and then just click on publish and then publish again ok now we're just going to go back to pages and do add new again and we'll call this one about about and then click on publish publish again and then we'll go back to pages and then add new again and we'll call this services and you can call these whatever you want whatever you plan on having your website sorry whatever you plan on having on your website so now just click publish publish again and then we'll just do pages add new and this will be my last one I'm just gonna call this one make a Divi website so let's just say I wanted a whole page where I talked about making a Divi website on my website so this for you could be whatever your call-to-action is so let's say you have a health and fitness company so you'll want to have something like sign up for personal training or sign up for my nutrition plan you know and then you'll have like a whole landing page for that so this will be mine so I'm just gonna click publish then publish again okay so now we're gonna put all these pages onto a menu so if you just go up to your name again and then visit site and just open that in a new window we should have a menu up here at the top right but we don't so we're gonna fix that right now so let's just go back to WordPress and then just go over to appearance and then click on menus cool so now you can create a new menu if you scroll down so I'm just gonna call this primary menu and then just say create menu okay now scroll down and you can add things to that menu so over here on the Left you'll see pages so I'm just gonna click on contact I want about services and make a Divi website and then just say add to menu cool so now all of them are here and if you wanted to reorganize these so let's just say that I wanted about to be in front of services so these will be laid out left to right so whatever's at the top will be all the way at the left and then contact will be the last part of the menu so it will be make a Divi website about services and then contact so and if you wanted you could also put something underneath so if you wanted to do a drop-down menu then you could just drag one and put it off to the right so you can see it kind of looks like stairs now and now if you hover over make a Divi website in your menu about will then pop up underneath but I don't want to do that I'm gonna put it back to where it was because I want these all to be separate so I will show you exactly what I'm talking about right now so just click on save menu and by the way guys before I jump off this page you don't just need to make pages in order to make these buttons on your menu you can also do posts if you're doing a blog or you can even do just custom links so you just write the link text and then you can put in a URL that will just jump to whatever URL you put in okay and then just go to the menu settings and then you'll see display location we just want to display this menu in the primary section so I'll just click on primary and then just click on save menu cool so the one thing that I did forget to do was actually activate Divi so we installed Divi but we didn't activate it yet so let's just go back to appearances and go to themes okay so you can see we've got our 2019 theme which looks like this so if you go to your site I'm gonna open that in a new window this is what the 2019 theme looks like and it's super ugly so we're just going to X out of that because it's kind of like the basic one that you get with WordPress we're gonna in sorry activate Divi so just click on the activate button cool so now that just activated so let's just go back to our website again and look at it it's not gonna be much different so as you can see it is still really white really boring but now we've activated the theme that allows us to customize the whole thing which I will get into next and while we're here you can see our menu up here so we've got make a Divi website services about in contact which is really cool so now our menu is ready to go we can move on to the next step so step number six is to customize your website so this is where I'm going to show you how to use Divi and I'm gonna show you how to start customizing from scratch and I'm also going to show you where to find hundreds of templates in case you want to start with some found first but first we need to create a new page that we're gonna turn into our home page so let's get started okay so to start customizing your home page with Divi we need to make a home page so let's just go back to our WordPress dashboard and we're just going to go over to pages and then go to add new and now we're just gonna call this home page and then click on publish and then publish again and then just go over to settings and then we're gonna go to reading and what we want to do here is tell WordPress that we want to use home page as our home page so it says your home page displays your latest posts which we're not making a blog we're making a website so we're just gonna click a static page and then we want the home page to display our home page which is blank right now so we're gonna edit it so once you've selected that just go down and click on Save Changes cool now go back to pages and then go to all pages and then go to your home page which now says front page which means that is what you pull up whenever you actually type in your domain name so that's what we want so now we just want to click on that and then we will just click on edit with the Divi Builder cool so it's gonna ask us if we want to take a little tour but I'm gonna show you everything you need to know so I'm just gonna click on start building cool and then it'll ask us if we want to build from scratch choose your pre-made layout or clone an existing page that we already have so oh there's a little animations for all of them so first I'm going to show you how to build from scratch and then I will show you how to get premade layouts and edit them so let's just choose build from scratch okay so you'll be asked to choose a row and a row is just what your gonna put everything inside of all your text and images and so forth will go inside of rows so you can select a whole bunch of different ones here but for this little tutorial I'm just gonna select the first one and then it's going to ask me to a module inside of this so if we want to put the title to our website I will just type in text and then grab the text module so let's just edit that text so you can do that in this box right here so if you just scroll down we can select that and we'll change it how to create a website with Divi is going to be my title and I will just select that and then change this paragraph box here I'm going to change that to a heading 1 so heading 1 should be the title of all of your pages so now if we want to change the size and color of this and the font all we need to do is just go to the design tab and then we change this to a heading 1 text so that means we're going to be editing the heading text section so just click on that and you can see we've got our h1 which is what all these settings are for so you can change the font here by just selecting whatever font you want but for now I'm just going to leave that you can change the weight so I'll just do semi bold you can also change the alignment so we can have it in the center left or right but I'm going to leave it on the left and you can change the text here as well so you can just select one of these or if you want you can just select the eyedropper tool and then if you just grab any one of these colors down here you can just start dragging around and change the color as much as you want but I am just going to go with kind of a dark color for now and then you can change the size so I could drag this all the way up if I want so we'll just do I don't know let's say 54 now because I'm going to moving this whole thing over so and then you can change the spacing the line height you can give it a shadow all sorts of fun stuff but I'm not going to do any of that right now so just click on the check box and then if you go hover over this green box and then kind of put your mouse on the left you'll see this little green transparent area here so just click anywhere in there and just drag that over a little bit and then if you click on the gear icon you can then go to design and then go to sizing and then you can change the width of this whole row here so we'll just drag that width down so it's more like that we want the letters to be kind of on top of each other then just click the checkmark and you can kind of go adjust by just clicking and dragging out so maybe something like that and then let's go back to the text so you can see we've got our section we've got our row and then we've got the module inside of it which is the text so just click on the gear icon for the text and then I'm actually going to capitalize all of this there we go and then just click on the check mark and let's say that we want to add an image back here or maybe a color if you want so you'll see the blue area is full width it contains the entire screen so if you click on the gear icon for that and then you go over to background you can then add a background color you can do a gradient or an image or even a video if you want so let's just say we want an image so just click on add background image and then you'll see we're in our media library and if not you're probably an upload files which is where you want to upload them so if you just click on upload files and then go to select files you can then grab whatever image you want so let's just grab this one just for fun and click open and again I have those follow-along images in the description below if you want to go download them cool so now just click on upload an image and now you can see we've got that image back there so just click on the check and if you wanted you could actually expand this so if you hover over this blue area at the top you see this little blue box comes up you can just drag that down maybe drag the bottom one down a bit and you can actually expand this entire section okay so let's say we want some text underneath this we want kind of like our other website the one that we're actually going to be making in this tutorial so we want some text underneath here like this let's put some of that let's just go hover over and click on the little gray plus icons this will add a new module underneath of this one inside of this row so we'll just click on that and we'll just say text and there it is fits perfectly so I'm just gonna leave that as the basic text I'm not gonna worry about writing a whole paragraph for you guys right now so now we'll just click on that little plus button again to add another module underneath the text and this is gonna be our button so just click on button and this one's fun so if you just go over to the button text you can change that so I'll just say start building and cannot spell there we go start building and if you go over to design so actually sorry before design if you go to link this is where you can put the URL so if somebody clicks on the button that is where it takes them so this could go to another page on your website it could go to your YouTube channel it could go to your Instagram you know whatever you want to put and then you can say whether you want it to open in the same window or a new tab I usually recommend doing a new tab because we want people still have your website open Google likes it especially in rankings when people spend more time on your website so if you want to rank higher in Google that's one little trick but there's a ton of things you need to do to rank higher in Google but that'll be a whole nother tutorial in itself okay so if you want to design the look of this button we'll just click on design and then just go over to text sorry not text go to button and then say use custom styles for button so just click on yes so you can edit the button text size by dragging up or down so you have a massive button if you want or you know kind of a small one I'll do I'll leave it at 20 where it was before and then you can change the button text color so I'll just do white and again if you select the eyedropper you can select any color you want and then we'll add a back around color to that button so just click on an ad background color and I'll just go with kind of a orangish color maybe something like that maybe a little more saturated like that so you want these buttons to really stand out so you want them to be very bright colors especially if you have kind of a whitish or dark background you want this button to be the first thing that catches their eye when they go to your website because this is gonna be your call to action so if you're selling something if you want people to sign up for your subscription plan whatever it might be that you're doing with your website this button has to be the thing that stands out the most so choosing big bright colors is a good way to go so it's got a weird border on it which I don't want so let's go remove that so if you scroll down you'll see button border width so I'm gonna drag that to zero so if you drag it all the way up really thick border but I'm gonna drag it down and you can also change the border color here as well as the border radius so if you drag that up you can have a really circular button or all the way down is perfectly square so I'm just gonna go with kind of in the middle like a seven and you can also change the letter spacing like that but I am just going to leave it at default you can change the button font here the same way that I showed you how to change text font same with the weight and so on and here is where you can choose a new icon so if you hover over you can see we've got a little arrow icon so you can change that to any one of these down below so let's just say I want this one if you hover over now it's this little icon and if you don't want an icon at all you can just click on show button icon and turn that off and then if you hover over it the icon will not show up but I want one so I'm gonna leave that and then you can change the icon color the placement you can do the left or the right but I'm gonna leave it as right and then if you click on only show icon on hover then it will show the icon whether you're actually hovering over it or not but I kind of like the icon to show up whenever we hover over it so I'm gonna leave that and you can add text shadow and so on you can also add a box shadow so I'll click on this and show you how this works so if you click on box shadow I'm just going to grab let's say I want a shadow behind the whole thing so now you can see we've got a little bit of shadow there and honestly I love the look of that and you can kind of change the position so that one's kind of more off to the bottom right and you can drag this to kind of move that shadow around and if you scroll down you can change the vertical position as well you can change the blur strength so that's super blurry it's almost like it's not even there anymore and then all the way down is super sharp so I'm gonna go with something like that I'm gonna change that horizontal position I want that thing to barely show and then the spread length so if you go all the way up it's really spread out if you go down I'm just gonna make it just barely poking out we want to be really subtle and then you can also change the shadow color so I'm just gonna click on the check box so that's how to create a button so let's say that you don't want this image in the back you want maybe a color or I'll show you a really cool trick that I love to do so if you just click on the gear icon for this entire section which is in blue and then go to background so I am just going to go to gradient and then add a background gradient so this is really cool so I'll show you let me change this color so I'll do kind of a dark blue maybe like that and then I'll do more of a light blue for the second color maybe something like that and then if you scroll down and you change the start position to somewhere around the middle and then bring the end position back oh sorry we got to actually get rid of our image first then just go back to image and delete that image okay now go back to gradient you can see what our gradients doing so if you change the start position in the end position it gets very spread out so it's a really smooth gradient but if you change them towards the middle you now got this hard line which is really cool if you change the gradient direction so if you slide that like that boom now you've got your page two completely separate it in two with this kind of diagonal line adds more of a dynamic look to it and obviously you'd want to change this text to white or some sort of other color that stands out a little bit better and then if you just change the start position back and forth you can make a line you know far to the right or if you drag it this way you just have to adjust with the end position but you can kind of control where that line goes and another really cool trick so if you click on place gradient above background image and then go back and take this color that's here on the right and let's just make it transparent so we'll just drag this line all the way down and then we go back to background image and we just add a background image so let's just add that same one that we had now you can see our gradient is over top of our background image so if you just go back to gradient and then you scroll down again change that start position and you can change where that image comes in so let's just say you want you know if you do 90 degrees straight up and down you can drag this back and you know only have the left side of the screen be blue so you've got like a lot of option to play here but I like kind of the slanted image and I'm going to drag that up okay so let's just hit the checkmark and you can pretty much add anything that you want so if you want to add a whole nother section below this we'll just click on the little plus icon underneath this section and we'll just choose regular and then you can add whatever rows you want so if you want to do two rows you can do two rows but I'm just going to choose one and there are so many modules in here you've got all sorts of fun stuff in here so circle counter let's just click on that so I can show you see like the whole thing is built for you and then you just go to design and edit it so you can change the number so I'll just do a hundred percent boom 100 percent like it Divi is amazing so I'm gonna hit X and delete that and I'll show you some others so you can do a contact form you can add some images you can do a map if you want to add like a person so if you have like a meet the team section or maybe you want to do some sort of a testimonial so you can just add an image here you can change their name like that and then you can add their position here and so on so just play around with some of those modules and see what you like and just start editing with them but next I'm gonna show you how to select a premade template and then we're just gonna create the whole website off of a premade template because why start from scratch when somebody else has done all of the foundation for you okay so before we jump into that just click on the little three dots and then click on save all the way at the bottom right you want to get in the habit of doing that every so often but Divi is actually pretty good about backing up your work just in case something happens so it'll automatically backup your work and then you can just come back to it and say restore okay so let's do a premade layout so I am just going to delete this section down here so just click on the trashcan same with the one up here just gonna delete okay so instead of choosing one of these rows here we're gonna go down to this menu down here so the three dots open that up and then click on the plus icon down here at the bottom left and here you can see we're on premade layouts and you've got all these layout packs so you can just scroll through these and see what you like you get a little bit of a preview here so if you hold your mouse over it it'll kind of scroll through pretty sweet and again these are all layout packs so if you actually click on one you've got a bunch inside so you've got the About section here you've got a landing page if you want it you've got a home page they're all slightly different and tailored towards you know this one's a contact page so they're all tailored towards a certain need for that page and then if you want you can click on View live demo and now you can actually see what that contact page looks like and interact with it so it's pretty cool map works so just click on the X again so if you go to home you can view a live demo of that so there's a home page pretty sweet so this is actually the one that we're going to be using this template so if you want you can just go back hit this little button up here at the top left and you can just explore any one of these or you can click on certain categories over here so I could just do let's say food and drink and it will filter all of the food and drink ones you've got a restaurant coffee shop all sorts of stuff but I'm just gonna go back to the basic ones and I'm gonna click on this one and I want to use yeah I want to use the original one right here so I'm just gonna click on use this layout and then it's gonna ask for your username and the API key so this is what you get whenever you actually signed up for Divi earlier so my username was create a pro website and then I'm just gonna go grab my API key so I'm gonna go back to here and I am just going to go to account so this is your elegant themes accounts this is whenever you bought Divi so let's just go to account and then you will see if I scroll down you'll see your API key so just click on your API key scroll down and copy that cool and then just go back to your website and then paste that in and then just click on submit and then that will now import cool so now that's done so before you click off of anything I made this mistake before if you click the X or the X down here it won't actually import the page so you just got to wait and as you can see now it's actually imported to our page and this is all set up for you so as you can see if I just hover around I can edit all of this stuff so again I really recommend doing a premade layout because everything is just built for you and all you got to do is just go in and change it so let's start by doing that so let's change this background here so I want to go with more of a blue theme like our website here so what I'm gonna do is just go back and go to the row which is the green one and click on the settings and then go to background and as you can see we've got our yellow background here so I'm just going to delete that and that's actually an image as well as a color overtop so delete the color and the image boom so now it's white so I'm gonna add a new color and I have got my colors saved here so I recommend finding a couple colors for your company you know your website that you're designing and save them somewhere because you want to be really consistent if you've got eighteen shades of blue everywhere it's not gonna look quite as good as if you just have the same - it's gonna look way more consistent so I'm just gonna grab these colors so let's just grab this light blue add a background color and then just put that in boom so now you can see we've got our blue color there alright so just click the check box and we'll edit this text so if you just click on the little gear icon for the text module I just hovered over it click on the gear icon and then just change creative to how to create a website and then we'll change design agency to with Divi but now that's pretty much done again if you want to change the texts you can just go to design and then just change the text font or the heading text font but I am just going to click check cuz I'm not going to change anything I'm going to delete we are a full service and then I'm also going to change this button here so just hover over the button and do the little module settings so as I talked about before we're going to change this text we'll just change it to get started and then if you just go to design and then go to button you can now change the custom style for this button so we'll do text size we'll go to maybe a 20 and then again I'm gonna do kind of an orange color so I'll just click the oh sorry that's the text I'm gonna make that white and then if you go to button background color that's what I want to make orange so something like that scroll down the border width I'm gonna make 0 the border button radius I'm going to drag that so it's more of a square like a 10 I'm gonna leave the letter spacing I'm gonna change the button font I'll just do maybe an open sans I really like open sans and I'll leave it bold and again I chose an orange button because it really stands out against this blue background so I wouldn't want to choose a blue button if I have a blue background so I could also do green or you know purple something that really stands out okay so I'm gonna choose an icon I'll do I'll leave the icon the way it is and then I'm just going to change the hover color so if we hover over this it kind of turns transparent so let's just go back up and we'll click on the hover tab it's a button background color click on hub and then I'm just going to change this to let's do kind of a darker like that dark enough good with that should go back to default if you hover over there you go change from light to a kind of a dark orange and I am NOT going to add a box shadow to that since already showed you how to do that so just click on the you check and we'll just change this image here so you're like oh why can't I hover over this one row to change the image well if you just click on the row settings again the green and then go to background if you scroll down you'll see column background 1 and column background - so this is column background - so if you just delete that and then go to add background image we'll just add in that image that we had from earlier and then just click upload an image cool so there it is and you can see we've got a parallax effect on so what that is is if I scroll down you can see the border the white border is starting to cover the image so the image isn't staying in one fixed spot so here's the difference background column background - and we'll turn off the parallax see now you can see the whole image moves with the rest of the screen so if we turn parallax back on the image is kind of staying more in one spot as we scroll which I really like so I'm just gonna click check okay so for this section what do we do here we're gonna change this to Y Divi so if you just hover over the text and you click the gear icon you can edit so I'll do Y Divi question mark and then I'll scroll down and show you how to change these so I just want three of them so I'm actually gonna delete this entire row so you've got this row full of icons and then you've got this one so I'm going to delete the bottom one and that will automatically bring the next section up which is really cool and then let's just edit this one so we'll click on the gear icon for this module and then we'll change this what are we doing here ease of use so we'll do ease of use and then if you go to design and then you go to image and icon we can change that icon color so again I'm gonna grab my light blue color off my notepad and then click over here and just add it to this little box there we go and if you scroll down you can change the size of the icon so you can drag this up or down but I'm gonna leave it the way that it was and if you go back up to content we can actually change that icon itself so just go to content and then click on image and icon and then we'll just change that so ease of use let's do like a mouse like that there we go okay so let's just change these other two so you can actually if you want I will delete this and you can just click on this little two box button here and duplicate it which will make one underneath and then just drag that into that section and then all you got to do is just go change the text and the icon and the rest is already done so we'll just change that to infinite customization and then we'll go to image and icon and we'll change that to like maybe a pencil icon and then same with this so we'll duplicate that delete this one and then just drag this in and we'll change that one so gear icon real time design oops wrong real time design and then just close that and go to your image and icon and we'll just do a clock where's the clock at the bottom boom and before I move on to the next section I also want to show you animations so if we go back to this website and refresh it so you can see all those kind of zoomed in like that so we can actually edit that too so we'll just go back and we will just go to the actual individual modules so let's say we want this one to kind of zoom in or do something else just click on the little gear and then scroll down sorry go to design and then scroll all the way down to animation and see it's set to a zoom right now so you've also got a fade where it just fades in you can have it slide in bounce flip you know all sorts of fun stuff roll that's super obnoxious so maybe just stick with the zoom I think the zoom looks really well but you can change all that right there as well as the duration so you can have it come in really fast or take a lot longer and again ctrl Z will get things back to the way they were okay so now we are going to move on so it'll scroll down and I'll show you how to change this video so if you just go to the module settings and just click on that you can then change the video here so let's just actually open that in a new tab because I'm gonna use the same video so if you hit the little trash can you can then click add video and then just go over to insert from URL all the way on the left and here you can put in a YouTube URL so this was the same video that was on there you can look up any video you want but you just grab the URL at the top copy that and then just insert that here and just click paste and then just click insert into post and if you go to design and then you go to the play icon you can change the play icon so you can change the color which is cool by the way if you click on these little three dots like a bunch of colors just come flying out and you can just select any one of them which is cool but I'm gonna go with the white I like white and then you can also change the size so if you go to sizing you can change the width of the video so if you want it smaller you can do that and then all you got to do is just click on the center module alignment and then that's kind of stuck right in the center now and the reason that there is a box shadow around this is because it's around the actual row so we just changed the module which is the video but the row itself has a shadow so if you want to remove that you can so I'm actually going to put this video back to the way it was and if you hover over the little row settings here and just click on row settings you can go to design go to box shadow and see you can see we've got a shadow there so you just click this that shadow goes away so that's on which should be on let's see there we go if you bring the spread length up you can then see that shadow which I kind of like the shadow back there so I'm just going to click check and leave that and I want to change this color and right here this section and this section are two different colors so what we want to do is edit this one first so let's just go to the Settings icon and then go to background and let's just change that so this is actually a gradient so we're just gonna change this little yellow color and let's put it as maybe the dark blue so again try to have at least two colors that you can use for your website so I'm just going to paste that in so that just changed and then just click on the check and then we'll go down to this section and click on the gear icon for this section we'll go to background same thing and just change that so we will actually let's do a gradient we'll do add a background gradient and for the top color we'll put in that exact same blue all kind of matches and then the second color will grab the light blue so just copy that light blue put that into the second color like that and then if you just go down to gradient direction sorry change the start position in the end position so now you can see that gradient there and again I can kind of swap that around but I'm gonna do I don't know something like that how about something like that so it kind of goes here let's change that gradient direction just a bit more there we go so just click on Save Changes so now you can see it kind of goes from our blue color and then a hard diagonal line to our light color which I really like all right so let's change this text so for our website we did Divya is the number one drag-and-drop builder by the way you can also just triple click on this and edit it right on the screen all right let's scroll down I'm gonna leave this text the way it is and I'll show you how to edit these counters so let's just click on the module settings for the first one so you can change the title so we'll just say active installs and Divi has way more than 200 so we're actually gonna put in 1 million because Divi actually has over 1 million installs which is crazy so now you can see when we did that we've got our two zeros here that are kind of overlapping our title which looks super ugly so let's fix that so just go over to design and then just go over to the number text and then you can change the font there if you want but I am just going to change the number text size so it's at 60 I'm gonna bring that to a 48 and then just click check mark so now if I want I can just delete the rest of these and then I will just duplicate this one by clicking on the duplicate button and then if you click on the little arrows symbol here you can just drag that over so let's edit that what are we doing here 875 pre-made layouts so we'll do pre-made layouts and then we'll do 875 there we go click the check and we actually have one too many of these modules so what we're gonna do is go to the little module sorry the column structure over here with the row so we have too many rows so we're gonna go to change column structure and we're gonna make that into three there we go so now we will duplicate this one and then drag it right here and we're gonna change this to 32 we're gonna do languages because Divi is actually in 32 different languages so people are using it all around the world oops languages and then click the check cool so honnestly our website is looking fantastic already so let's keep going okay so let's edit this so we'll change the text we'll just change this to why I use Divi and then we'll change this image so if you just hover over the images and then click on the little gear icon and then just delete the image and then just add in one of yourself so I did not include an image of myself in the follow along images you should be putting one of yourself or whoever it is that this section is about so add image upload files and then select files and then just grab the image of yourself assuming you have one and then just click upload an image but now my ugly mug is all over this website so we need to edit this image a little bit it's a little big and you can see the bottom of my torso does not line up with the next section so let's fix that so if you just go to design and then you go to sizing just uncheck force full width and then you can just bring the width of the image down so we'll do maybe something like that 80% and then we'll align it towards the center you also do that right if you want to be a little bit closer it's actually not too bad I'll just do the middle there we go and then we'll just click on the checkmark and we're actually going to delete this entire section so we'll just delete this same with this we'll just delete this whole image as well as this button will delete that section as well yeah let's delete our skills too we don't need that we want this this is what we want to align underneath so if you want the bottom of yourself to align with the next section all you got to do is just drag this padding up same with this dragged the whole section up and there you go just like that I am now kind of popping out of this other section which is pretty cool and let's change this button while we're at it so instead of like editing this whole button again from scratch what we're gonna do is just go up to our other button and we're just going to duplicate it and then drag it all the way down and put it underneath that button and then delete the old one boom so now if we want to go to the module settings we can then change the look so maybe I don't want to orange buttons maybe I want this one to be a little more subtle to blend in a little bit more so we'll do our same blue color so I'm just gonna go to design go to button and then I'm going to go to the color and I'm gonna delete that and then let's just go grab that light blue then add that to the button color there we go and then same with hover we'll just hover over delete that and we'll grab our darker blue so hover just delete that and then add in that new color there we go so just click on the check and boom now it kind of gets darker as we hover over and we can also change the text change this to learn more there we go click on the check cool now we move on to this section so first things first let's just change this background so we'll go to the gear icon for this section and then go over to background and we'll just delete that and then go to add a background image and we're gonna go to upload files and then select files and then just grab this behind laptop image and click on open and then just go to upload and image cool so now you can see if I'm going to set of the way it doesn't look too shabby it's getting there that's pretty much all we want to edit for this one so this text here is actually part of this laptop image so the way I would recommend fixing that is just by uploading a new one of these images but again hopefully you're following along but you're going to be kind of tailoring this website to your company so I'm just going to scroll down and I'm going to delete so actually click the check mark I'm going to delete this section and let's do from our clients so let's actually there's a lot of white space here in between this section and this section so we'll just grab this and kind of bring that up a bit just bring them both up you know what we'll go all the way to the top just like that cool so now let's change this to what do we have here people who love Divi so just triple-click people love Divi and obviously I designed this this website are ready before I started teaching you how to make it so just kind of following along with my previous design so let's go down and if you want to change this image here and the titles and everything so just go to the little gear icon and then we'll change the name so this will be put me in there do my name and then I'll say your instructor create a pro website that is the company name and then we'll just change the image so just go to text and then go down to image I'm just going to delete that click add an image and then I'll go to upload files select files and then just grab another image so I'm just gonna grab this other image of myself and then click on open again they should be images of you and then we'll just click on upload an image and there we go I'm perfectly inside of this little circle here so let's just click on the check box okay so let's scroll down a little more and let's change the color of this one so let's grab the section and then go to the gear icon and then go to background and we're just going to change that color let's do I'm gonna do my light blue actually let's do a gradient and I'll do this color sorry second color as the light blue and I'll do the other color as white and I will show you why so if you just scroll down and change the start position as well as the end position let's bring them up something like that and then change the gradient to be oh sorry go let's change it like that and then we're actually gonna switch those colors sorry about that so select color copy that and let's just make that white and make the first color the blue oops there we go and then click on the e check so now you can see we've kind of got this cool diagonal gradient but then the actual part where you fill in the contact form is white because you want it to be organized you want people to be writing their messages on top of like crazy colors it's a little bit distracting so I am just going to say change this to contact me and then I will show you how to edit this contact form so right now we've got name email company name and their message and you can see where the heck is the submit button well it's actually there but since I changed this background to white you can't see that white text anymore so let's change that so I'm just going to go to the gear icon for the contact form and let's add a field so I'll show you if we click add new fields let's add a phone number field so you can see we've got field ID and title so let's just name this phone number and then we'll say the field ID is number really doesn't matter too much and then we will go to field options and if we scroll down you can see phone number right here so you can change the type right now it's an input field which just means that somebody can type anything in here either numbers or letters or you can do checkboxes you can do a drop-down and have options for people to select but I'm gonna leave it as input field because I want them to just be able to click on it and then put in their phone number and you've got a few more settings in here you can say whether it's a required field or not so you can check that on or off but I am just going to close that and then click on this arrow back here to go back and I'm just going to grab number and I'm gonna put that underneath email so I want them to fill out their name email phone number company name and then message or if you don't want one of these let's say we want to get rid of company name you can just trash it there we go okay so now let's fix that submit button so let's just go to design and then we'll go down to button let's just drag this over here so we can see what we're doing and let's grab the button background color and let's change that to say our light blue oops there we go so now you can see our button just showed up so let's also edit the border radius because it's really circular I want it to be more square like that like a 10 just with barely rounded edges and then again you can change the font you can change the font weight you can change the icon but honestly I kind of like that icon I don't really see any others that I would want to put there so I am going to consider that done and just click the checkmark sorry let's actually fill out how people can reach you so go back to the settings and then just scroll down and under text you can actually change the success message so once you send a message we'll just say something like thanks your message has been submitted and then the submit button text just says send or you can change it to submit and then if you scroll down we can go to email and here is where you want to put in the email that you want all of these messages to go to so this is what you want to put in your email so I'm gonna put in my email which is create a pro website at gmail.com I also have a professional email which is contact at creator pro website calm or I also have Dale at creative Pro website calm but I'm just gonna put in my Gmail because nobody's gonna actually see that and then if we scroll down just a little bit more you can click on elements and you can display CAPTCHA if you if you want so this will deter computers and BOTS from actually sending messages on your website the likelihood of that is fairly slim but if you want to put that on you can and that's pretty much it so once you hit check somebody can fill this out and it will hit your inbox now I do recommend checking your spam folder to make sure it didn't go in there if it went to your spam folder all you need to do is just report it as not spam and then future messages will show up in your inbox and if for some reason they don't you can always create a filter especially in Gmail I love Gmail because I can just create a filter that says if something is coming from this website move it to my inbox okay so before I show you how to fix this footer and add in your own social profiles and edit this text over here I'm also going to show you how to make a logo for right here and we need to do both of these things outside of the visual builder so first let's start with the logo so first we need a logo so let's go make one so if you just open up a new tab and just go to logo maker com and that's maker without the e it's gonna ask for a tutorial and we're gonna say no we don't need that because this is super super simple so what we're gonna do I'm just click Next just done with all that okay so if you just go up to search up here I'm just gonna search you can literally search for anything that you want but I'm gonna do kind of like a mouse pointer logo so I'm going to type in mouse pointer and it's just gonna give me just truckloads of different Mouse pointers which is really cool and these are all free to use so let's grab let's just do that one looks fairly similar to the logo I've already got four created per website so now you can change the color over here if you just drag around you can drag on this little wheel on the outside as well but I'm just gonna do like a dark grey I recommend having a black logo or a dark grey and also having a white logo and also having a colored logo but for now I'm just gonna start with a dark grey logo and all I'm gonna do is just go up to the Save logo button at the top right and then I'm just gonna say no thanks I'll download the low-resolution file which is okay because we're just putting it okay so I just hit my downloads down here at the bottom and it's okay because we're just putting it in this one spot right up here which is so small low resolution is perfectly fine and obviously you can credit logo maker so it says credit is required to use a logo maker logo but you can just stick that anywhere on your website okay so now to place it here what we're gonna do is just click on the three dots and click on save because we want to make sure that all of our work has been saved okay and then from here just go over to the dashboard by going up to the top left and then just scroll down and you'll see Divi over here on the left and then just go over to theme options and then from here you'll see logo right here and we can just click on upload and then we'll go to upload files and then go to select files and then just grab that logo and then just click on set as logo and then just scroll up to Save Changes cool so now if you just go up and open your site in a new window you will then see that we've got our logo up here which is awesome and you can obviously add texts and stuff to that too so if you went back to logo maker you can just click on the text button and you can type in some text and you can edit the colors and so on you know you can just drag it next to it like that you know you could do your company name here so just say make a website with Divi and then just make that the same color you know and that could be your logo as well but I'm just gonna stick with something simple like that okay so now let's work on our footer so let's go back and underneath Divi where we are right now you can go to theme customizer and then you'll see this menu over here on the left and there's just a bunch of stuff in it but I want you to ignore most of it so what we're gonna do is just click on footer and then you'll see bottom bar so I just click on bottom bar and we'll scroll all the way to the bottom so that we can look at how awesome these animations are pretty freakin sweet okay so here's the bottom bar so what we're gonna do is just go to the credit so right here we've got designed by elegant themes so you can either disable that completely by clicking on the disable footer credits button or if you enable it again you can write your own so I'm just gonna say create a Divi website copyright 2019 there we go and now I'll show you how to add your own social info here so let's just click on publish to save our work and then we're gonna click on the X and then from here you're just gonna scroll down you should still be in the Divi theme options if you're not just click on Divi theme options and then just scroll down and you will see this Facebook Facebook icon Twitter icon Google etc and then underneath you'll see where you can actually put those so you can just put url's to your Instagram Twitter Facebook etc and then those buttons up in the footer will actually go to that so I will put let's just put my Instagram so I can show you how it all works so I'm just gonna grab that copy feel free to follow me if you want exit out and let's just put that in Instagram profile there we go and then make sure to delete that little hashtag and then we will just go up to Save Changes cool and then let's just go test that so I'm just gonna open this up in a new window and then I'm gonna go all the way to the bottom and then I'll click on Instagram and boom goes to my Instagram so that is pretty freakin awesome so step number seven is to edit for mobile and tablet because you want your website to be 100% responsive to any device because in today's world more than 52 percent of global online traffic comes from a mobile device so that means more people are browsing the internet on their phones than actually on their computers it's almost even though so you want to make sure it looks good on both so let's do that now and all we're gonna do is just go down to these three dots and then click on the little symbol down here you can see we've got a desktop we've got a tablet and then we've got a phone so let's just do the mobile phone first so just click on that it'll kind of change to this mobile phone view and if you will do its best to kind of make everything fit as best that it can for the mobile menu so if you scroll around you can see what's working and if anything doesn't really look very good so this I don't like this I don't really think my face needs to be on the mobile menu so I'm gonna show you how to hide this so what I'm gonna do is just click on the little gear icons for the furthest module and then I'm just gonna go to advanced and then just go down to visibility and then I'm just going to disable on phone and so it'll kind of gray out and this will let you know that this will not actually be visible on the real phone menu we're still in the editor so it'll show up kind of grayed out here and then if you just go to tablet we can make sure what it looks like on tablet and again my mug is just huge on this screen so we're gonna disable this for tablet as well so when we disable that that means that it'll jump from this section straight to why I use Divi so my picture will not actually show up so let's go back to the mobile menu and keep scrolling down make sure everything looks okay so right here this button is really close to this other section here below it so we should fix that if you were to just click-and-drag in here that's gonna edit that on all of these menus so we don't want to do that so we're just going to go up and go to the actual row settings so go to the green box and click on the settings wheel and then just go over to design and then just click on spacing and now from here you'll see it kind of pops up when you hover over these certain sections so we'll just go to the custom padding and then you'll see this little mobile icon so just click on that and make sure that you are on phone and let's scroll down so we can see what we're doing we're just gonna add a little bit of bottom padding so just click this until you get to a point that you like so maybe something like that we'll do 50 pixels so now that's only doing this on just the phone section so if we went back to desktop it's back to normal it's the way that it was before now it's kind of hard to tell because there's already a lot of space down here but in order to edit one section but not affect another you have to be on the correct section so just click on that little button and make sure that your own phone or tablet or desktop ok so let's click the checkmark and let's keep scrolling down make sure everything looks ok honestly this theme our sorry this template was built very well and it's already very responsive so that was it as far as fixes go so let's double check on tablet and let's scroll down everything looks good there let's roll all the way up so I already disabled that yeah looks great really no changes so we'll just go back to desktop and then we're just going to save our work ok so we're on to our final step step number eight is to publish your website ok so make sure that you've saved and let's go publish our website so we're just going to go back to our dashboard and then on the dashboard you're going to see this little notification here that says your site it's currently displaying a coming soon Paige once you're ready to launch your site click here so all you got to do is just click here and then you'll get this little congratulations message right here alright guys so that was how to make a website with the Divi theme so if you liked this video please hit that like button it does a lot more for me than you think and if you want more awesome website tips tricks tutorials anything website related please consider subscribing to my channel you will not be sorry there are tons of helpful videos on my channel I can show you how to get a professional email for your website I can show you how to get a professional logo I can show you how to track all the visitors to your website with Google Analytics I can show you all sorts of web design tips to make sure that your website is always looking professional so feel free to go onto my channel and check out some of those videos alright guys I'm done rambling I will see you on the next video [Music]

Channel: Create a Pro Website

Views: 23,359

Keywords: how to make a wordpress website with divi, how to make a wordpress website, make a wordpress website, make a website, create a website, make a divi website, create a divi website, how to make a divi website, how to make a website with divi theme, how to make a website with divi, divi theme for beginners, divi tutorial, divi tutorial for beginners, divi website, divi builder, divi theme tutorial, divi builder tutorial, wordpress website

Id: FI6oxOj0sww

Length: 85min 23sec (5123 seconds)

Published: Sat Jun 01 2019