How to Make A WordPress Website 2023 - Divi Theme Tutorial

designing a website can be overwhelming if you are a beginner so in this tutorial I want to show you step by step how to build a website from scratch using Wordpress so let me show you the website that we'll be designing so we are going to start off with the home page so when I scroll down here you can see we have a beautiful elegant hero area I'll show you how to put this together over here we also have our services section so if I Mouse over this you can see we have this beautiful animation again I'm going to show you how to create that over here we also have an area where your visitors can add their email address to sign up for your newsletter now over here on the bottom I also show you how to create a footer which applies across the whole website now let's take a look at our about us page now this page is very important because this showcases what your website is about so this time I decided to use a different Effect called Parallax so as I scroll through here you can see this information is disappearing and revealing information here on the bottom so this over here is an image gallery so I click on it it shows our image and we can cycle through these images if you click anywhere here it goes away now further down here we also have this area where I show you how to create a video here with an overlay now our services page here was built using a pre-made layout so you can see here it's very stylish so I again show you step by step how to achieve this finally we have our contact page here so this page has our social media links it has our address and also this form by the end of this tutorial you're going to understand how to choose your colors correctly you're also going to know how to use fonts and also how to create a style guide so this is a fully packed tutorial which has all the tips that I've learned over 10 years of designing websites all packed into this tutorial the knowledge you're going to achieve in this tutorial is enough for you to start a career as a web designer now all the tools that I use will be listed in the video description below and if you do purchase any of these products I also have some bonuses and discounts for you alright let's get get started let's kick start our project here by choosing the right hosting now hosting is very important because if you get this wrong you're going to have a website that is going to give you headaches I mean I've done this before I used to have websites hosted on a very bad hosting platform and I used to spend nights trying to fix problems and all these errors that come with bad hosting now the reason why I like siteground is because it's optimized to work really well with Divi so this is going to make your website fast and super optimized I have a link in the video description below this is going to give you a 75 off discount plus I'm also giving away my bonuses if you purchase siteground using my affiliate link I'm going to give you lifetime membership to funnels to income there's a ton of courses there and you also get access to any other feature courses that I create the link to all of that is in the video description below all right so let's take a look at the plans here so if I click here on view plans you're going to notice that we have quite a few here we have the startup the grow big and the go gig the one I highly recommend is the grow big because it has unlimited websites so there are going to be situations where you want to design so many websites this one here is the best one next we also have some features here which are really really important now one thing that I used to struggle with uh back in the day was backups so you'll find that if you have a website and something goes wrong with it because I didn't have really good backups I used to redesign the website that is super bad so this is where we have this option here of daily backups and this is why I really really like siteground we also have SSL now SSL is very important if you decide to sell something on your website this makes sure that your website is passing on secure information from credit cards so free SSL is fantastic so if you click here on get plan you are going to get two options if you want to register a new domain you can choose this option here or if you already have a domain you can go with this option here so either way it works so if you already have a domain game like in my case I'm going to say funnels to income now if I click on proceed this is now going to take me to a page where you are going to be required to enter your account information so this information here is very important because this is how you log into siteground to control your information and to also set up WordPress so this is where you want to add your email address password and you also want to confirm your password next over here you want to add your client information so in this case I'm in the United Kingdom so I'm going to put United Kingdom and first name last name now you don't have to add your company Tax or vat but if you do have one you can just add it here and you also need to add all this information here all right so over here we have the payment information this is where you add your condom and you also add your expiration date in year and your CV code now finally we have this stage here which tells us about the package you can see here is the grow big and this is your 59.88 excluding VA T so this is the best deal and as I mentioned this has a 75 off the link to that is in the video description below now over here we can just go ahead and confirm and if you'd like to receive any information you can go ahead and confirm that over here and then click on pay now now once you've made the payment you are going to get your credentials to siteground admin dashboard this is where you can go ahead and install WordPress installing WordPress is just one click you can just install the basic WordPress setup and you're also required to set a username and password this now will be for your WordPress admin dashboard so make sure you make a note of that so now let's say you've installed WordPress in your siteground admin dashboard the next stage now is to take a look at the website so over here is my brand new website mine is called dv2023 so now let's go ahead and log into our WordPress admin dashboard because as you can see right now this is a boring site we really want to make this look really nice so we need to enter WP hyphen admin hit enter and now you want to add your username and password that you created in siteground so mine here is Mac admin and paste my password like that and now I'm in my WordPress admin dashboard what you want to do here is just clean up this dashboard because there's quite a lot going on here so you want to click on dismiss here and then you want to go to screen options and then uncheck all this we want to make sure that when we log in we have a clean dashboard all right so now everything is all cleared up we are now ready to work on our website so the first thing I usually do when I start working on a brand new website is to go in and start adding my pages so I'm going to come over here and click on add new so my first in fact before I do that I need to close out of here so my first page here is going to be home and then I'm just going to hit publish and then publish one more time okay so our page has been published at this time or at this moment we are not adding any content to our Pages yet we're just creating the pages all right so let's go back over here and add another one now you can see it's added here so the next page here is going to be my contact page again I'm going to hit publish publish one more time go back so repeat this process until you've added all your pages all right so the next step now now that we have all our Pages let's take a look here and see what they look like so if I click here on view site now by the way I'm viewing this on a new tab you can see now that I have my menu over here so the next step now is to go in and install our page builder so the page builder I'm going to be using today is called Divi I really love Divi I've been using it for many many years and it's super super powerful now let me take you over here to this page so you can see its features so if I come over here now you can see you can design many many websites it also has a massive user base behind it so this has also a ton of pre-made layouts which means you can design so many websites super fast so I'm going to come over here straight to the pricing so you can see how much this cost the one thing I really like about Divi is they have a single price which will give you unlimited websites so if you want to choose for yearly access this will give you updates for one year this is only going to cost you 89 dollars and you can design unlimited websites but if you want to go for the lifetime license which is what I highly recommend for 249 you're going to get lifetime updates and you don't have to pay for anything ever again any future updates will definitely be available for you all right so now that we've gone through the price in my case I've already gone ahead and purchased Divi I have the lifetime license I'm going to now come over here to my account and go to my downloads now I'm going to click here on TV theme and download the DVD now I've downloaded many times this is why you can see dv9 here on the bottom all right so now let's go ahead and install Divi so I'm going to come over here and we're going to come over to appearance and click on themes click on add new upload theme and then I'm just going to drag and drop it here and then click install now now the other way you can install it is by clicking on choose file and then navigating to where it is on your computer all right so now that this is installing it's going to take a a short while and by the way now it's installed I'm now going to hit activate now a lot of people just end here now what is important is to go in and add your API key because this is how you get your updates to your DV theme and also access to support and your child themes all right so I'm going to come back over here and go to my account here and in fact it's right here it's account and we want to scroll down to API keys so I'm going to copy it here like that and then back over here on my site to add my API key I want to come over here to Divi and then click on theme options and then go to update so I'm going to enter my username and then for the API key I'm going to go ahead and paste it and then save changes all right so now my theme is ready to go I have all the tools that I need now for me to design my websites and get all the updates to DV theme so the next step now is to head over here to my dashboard and then I'm going to come over here to appearance and click on menus now over here on menus I need to create a brand new menu because we need to reference this later on as we're designing our website and by the way now that we've installed Divi let's take a look at our theme this is what we had before so if I refresh this you're going to notice now that we have this new layout and we have a new menu over here on the top but we want to customize this because it has uncategorized and this is not in the order that I want so let's create our menu so I'm going to call this main menu and then click on create menu okay great so now my menu has been created I want this to be located on the primary menu this is our main menu on our website now over here here is where I can select all my pages and add them to the menu so I'm going to click here on add to menu and these are all my pages alright so I'm going to get rid of this one here because it's a duplicate and then drag them into position so I want this one here on the top and then contact needs to be the last one all right so this is the order of my menu now if you take a look here this is what it looks like but now when I hit save menu and I come over here and refresh there we go so now this is what my menu looks like all right so the next step now is to create my color palette now this is where a lot of designers miss this point color is very very important and choosing the right colors is also very very important so let me show you how to do this so you want to go to coolers dot Co and then click on start generator so what I'm going to do is I'm going to start off with my base color so my main brand color so I'm going to use these colors here as my starting point so my main color my brand color is going to be this color here this violet color so I'm gonna lock it into place and then I'm also going to come over here and choose the color I'm going to use for my backgrounds so I'm going to come over here now to view Shades and I'm going to choose this very light shade over here so this is going to be my main color here for my background so I'm going to lock it into place and then I'm going to use the spacebar to continue looking for the colors I'm going to use in my design my color I'm going to use for my call to actions is going to be this flame color here so I'm going to go ahead and lock it so now I have these three colors this is going to be my main brand color this is going to be my accent color which is going to be my call to action and then this one here is going to be the color I'm going to use for my backgrounds so the next step now is to look for colors that I'm going to use for my fonts so I'm going to go ahead now and cycle through my colors so the color I'm choosing or I'm looking for here needs to be very dark because it's going to be be used on a light background right so I'm going to continue on and if I get to something that looks really nice I'm going to stop and then look for the dark shade from that okay so let's go with this teal blue but I'm not going to use this teal blue as it is I'm going to come over here to Shades and go for a really dark shade so this now is what is going to work as my background I mean as my colors for my font now we have one more color over here now we can use this as white it doesn't have to be a specific color so for now I'm just going to leave that so what I'm going to do is take these colors now and add them into Divi because this is very very important I want to be able to access these colors as I'm designing my website all right so back over here now to add my colors I'm going to come over here to Divi and then click on theme options so this now is giving me access to my color palette so I'm going to start here with my first color in fact let me just drag this over here so it's easily accessible so my first color here is going to be this one which is going to be my text color come back and then paste it over here move on to my next color now remember I said we needed white so I'm going to leave white here move on to the next one and I'm going to replace that with this one here copy that paste it in place move on to the next one I'm going to copy this one here Flame paste it into place move on to the next one and this is our main brand color copy that and paste it so now that I have my colors I'm just going to come over here and just add ffff for white because I don't want to mix up my colors here as I'm designing all right so let's go ahead and save changes the next step now is to establish my fonts and make sure that I have them in place because I don't want a situation where I have to keep on choosing fonts as I'm designing so I'm going to go in now and create a brand new page which is going to have all my presets so I'm going to come over here now to pages and click on add new and this page is going to be called style use DB Builder now it's your first time if it's your first time using the DB Builder you are going to get this main pop-up here what I usually do is I just skip it because I've been using Divi for quite a while now and this is the pop-up I'm talking about I don't need to take the tour I'm just going to say start building so now that I've opened the theme Builder the next step is to add this design from scratch and then I'm going to add a single column here next I'm going to add a text module snap this over to the left just makes things easy for me and over here now I am going to start adding all my headings so I'm going to start here with heading 1 go to heading 2 and heading three I don't usually go above heading three so this one here is going to be my sub menus but this is going to be under heading 4. so now let's label all this I'm going to highlight heading 1 and make sure I map this to heading 1 go to heading 2 map this to a heading 2 and then go to heading 3 and map this to heading three now for my sub menus I'm also going to go in and set this to heading 4. the rest here is going to be my paragraph text now let's go ahead and stylize this so the first one is going to be heading one I'm going to click on this paint brush tool and Define my font so in my case I'm going to use pop-ins but of course in your case you can use whatever font you need for your designs next over here on regular I'm going to set this to bold and I'm going to increase my size so for this I'm going to go with um 56 let's move on to the next one I'm going to click on this little icon here for heading 2. go to default change this to Poppins and for the font weight let's set this to bold as well so the previous one was 56 now let's go with 48 okay well I think 46 is better let's move on to the next one so this one here is heading three again we're going to change our fonts to Poppins make this bold and then over here now we are going to set this to let's go with 34. now you can see I have forgot to add my colors I'm going to do that in a moment now for my sub menu I'm going to make this uh Poppins just like before but this time I need to stylize this I want to make this all caps and I'm also going to make this bold but for my letter spacing I'm going to set this to uh what should we go with six okay let's go with eight so eight is going to be my letter spacing and then finally over here on my body text let's change this to Poppins as well select that I'm going to change our size 16. and let's also set our line height okay 1.7 is fine now I might as well add my color now remember I said my text color is going to be this color right here so I'm going to go ahead and select that and you also want to do the same for the sub menus choose my color the same for my heading heading 2 heading 1. so my color here has been chosen that's looking great the next step now is while I'm here I also want to add my links so if I highlight this text here and make it a link and let's say this is a blank link and hit enter you're going to notice that it has this color here but this is not what I want for my call to actions so what I'm going to do is to change that so I'm going to come over here to text and choose my links so for my links here my link here is Poppins and regular I think we set it as 16. okay uh should we have it underlined no and let's have this with our color here because remember we said our call to actions is going to be this color right here so that's going to act as my link color all right so let's go ahead and save changes so so far my text has been defined so every time I'm going to start designing my website and add some text on my site this is already going to be defined saving me a lot of time now while we're here we might as well add our button so we know we're going to be having buttons everywhere on our website we might as well go ahead and design one and set it as a oops you know what I forgot something very very important let's go back into our text module here and make sure we create a preset so let's come over here and create a new preset from current Styles so I'm going to call this side text assign this to a default and then I'm going to set this to yes yes and then save so everything is all saved now let's test and see if this is working so I'm going to click here on this plus button and add a text module and see if my paragraph text is going to come in as this and sure enough here's my paragraph text so this means that everything is working okay so let's get out of here now I mentioned that we want to add a button in here because buttons are something that we're going to find regularly on our website so let's go ahead and quickly create a button here which we're going to use as a default okay so let's search for a button here like that so to customize the button we're going to come over here to design button and then activate use custom styles for button so the first thing I'm going to do is to add a background color and this remember I said is going to work as my call to action so I'm going to set that and I'm also going to come over here on the border and select that now my text here needs to be changed so I'm going to come back to the top and choose my text color as white and then I'm going to in fact we don't even need to use white we need to use one of our light colors here that works fine as well and then we're also going to change our font so we're going to change this from the default to pop-ins so I think that looks great we're not going to make this really fancy let's just keep this simple now over here on the default a preset I'm going to set this as a brand new preset we're going to call this main button activate this and then set this as my default button and save so we have our text we have our button the next step now is to go into our theme Builder and create our header and footer I know right now you'll be probably thinking when are we going to design our website so we need our header and Footers first because right now this is not looking good all right so to do that I'm gonna now come over here to dashboard I'm going to save and exit first because it won't let me just leave okay so now we're back on our dashboard so we want to come over here now to Divi hover over here and click on theme Builder so we are going to start with our Global header so I'm going to click here and build Global header so now let's go ahead and click on this plus button to add our row okay so for this we're going to need our menu select that all right so this is our menu over here is where we add our logo so I'm going to click on this plus button here to add our image now I think I have a logo on my desktop so let's go ahead and find it so I'm going to click on select files so I'm going to go with this one here blogger Pro upload image so you can see here it's massive so I'm going to come over here to design layout so I want this to be left aligned which is great and I'm also going to come over here to sizing so this is where we get to adjust my logo width or even height so let's go to height and reduce this all the way down until I'm happy with the height and I think 46 will work great for this design so while I'm here I also want to take a look and see what it looks like on my mobile devices so 46 is still fine and over here now on the phone I'm going to reduce this to 36. okay so I'm pretty happy with that now we have our text here that we need to go in and customize so let's go ahead and do that over here on our menu text so for our menu text we are going to go with our color here so in fact this is our active color so it's going to be this one right here and for our menu fonts let's set this to pop-ins like that great let's make it all caps and let's choose our brand color here oops now over here let's choose our brand color as our menu color the size here is fine I'm just going to add some later spacing here just to make it easier to read and do I want to make it bold yeah this is something that you can decide but you know what I'm going to leave it as it is so for my text alignment I'm going to align it all the way to the right because I don't want this very close to my logo so so far so good I'm going to save this now I'm going to go into my main section here and go to the background because I want to add a background color here which is going to be this very light color remember that we chose from our color palette all right so that's going to be my color so I'm going to save this for now because I can see that I have this white in the background I need to get rid of it so I just want to make sure that when I come over here it's set to transparent save that and then I'm also going to go into this one here and make sure on the background it's set to transparent all right great so now that we have this let's get rid of all the padding because I want to have a proper size on my header here so I'm going to go to spacing so for my margin I'm just going to make sure this is set to zero and padding is also set to zero now notice that I'm using this chain icon this is going to make sure that I have the same padding both on the top and the bottom so this was my menu settings I'm going to save that and now I'm going to go into my row settings and you can see here I have quite a bit of spacing all right so let's go here and set this to zero and I'm going to do the same to the bottom as well and for the margins do the same and save so all I have to adjust now is my section padding so I'm going to come over here go to spacing so I want to start here with one percent now it's making sense because the size has reduced it's not as big as it was before all right so I'm pretty happy with that I'm going to go ahead now and save so that's going to be my heading now for my site let's go ahead and click on these three little dots here and save my header now has been created for my site I'm going to close out of here and save changes so every time you want to come and adjust your header you want to come over here to your theme Builder this is where you do all your changes now let's take a look at our website and see what it looks like so far all right so now we have our header here so if I choose let's say the about us we can see now that this is what has been chosen here on the top which is fantastic now let's uh build our footer so I'm gonna come over here and add Global footer because right now the footer that we have is not good at all okay so let's do that I'm going to come over here build Global footer all right so I'm going to start here with a single column and in this column I'm going to add a divider and let's give this divider a color by coming over here to line and the color I'm going to go with is very subtle color here in fact I can't really see it so I am going to increase it a little bit just like that okay and Save next I'm going to add another row single column and let's start adding our text module here all right so what we're going to do is we are going to add our links so first of all I'm going to add my text which says about us and then I'm going to add my links so this is going to be say let's say for example home services contact so the about us is going to be set to heading 4 which is um this style that we set initially and then over here now I'm going to highlight and add a blank link for now but this should be a link that links to your home page now notice the color that has taken on over here let's move on to the next one set our link here move on to service I mean our contact add my link click ok all right so these are the three so far I'm now going to hit save changes all right great so what I'm going to do is I'm going to go into my row settings and duplicate this a few times okay so I'm going to do it three times in fact I'm gonna do it four times and I'll show you in a moment why okay so this one here is going to be my logo so I'm going to click on this plus button and add an image so let's choose my image here because that is my logo and the size can be adjusted by coming over here to sizing so let's come over here to our width and we're going to set this to 68 because the height here didn't work let's hit save and now we can get rid of this top bit over here okay so that's just the logo so what we can also do here is to add some social media icons so let's add a few more I'm just going to duplicate this and go into this one here and instead of adding Twitter let's look for Facebook or maybe even Instagram okay Instagram is fine we're gonna hit back and this one here is going to be Facebook click on the drop down no YouTube why am I saying Facebook Facebook's already there all right so now that we have our icons I'm going to hit save and save one more time okay now over here we can go in now and adjust this and instead of saying about us we can say our services or even just services okay so this will be service one and this one here will be service two but of course these will be your proper services okay this one here will be service three and remember we also need to add our links here so let's go ahead and do that let's do the second one and the last one so our fruta is taking shape now we're going to save and we have one more here maybe we should add our contact information how about that okay so let's go in so contact and all we need to do now is to just add our address okay so that's looking great I'm Gonna Save that so that's our footer now we can also add a little copyright thing on the bottom here so let's duplicate this we need the the whole thing duplicate it drag this to the bottom here okay so now we can add our text module now you can see here that um it's a bit tricky to add my text module because this is in the way uh to solve that all you have to do is to click on the bottom here and go to your layers so we open up our section and you can see here that we have all these rows so we want this one here so you can see this is the divider now let's click on this plus button and add our text module and select it now let's close out of here and go into this little Dynamic icon here because what we need is to add our current date so before here we're going to say copyright space and then designed by Mac now over here we need to add a space and for the date formats we can go for custom and all we're going to add here is the year or we can just add this little pipe here to distinguish that that's pretty cool all right so let's Center this I'm going to come over here to design text scroll all the way down here and Center it now the size is a bit too big so let's adjust that by coming over here to text size so I think that looks great I'm going to save this now there's a lot of space here so I can get rid of it by just dragging the margin here like that that's much better all right so let's save this and that's our footer so we've done our header we've done our footer so the next step now is the fun part because this is where we get to build the content for our website so let me close out of here now and make sure I save everything so if I come here now this is a footer this is our header that we just created now this is the footer if I refresh this page this footer now is going to be applied across the whole website how cool is that so let's start by creating our home page so I'm going to come over here to all pages and go to our home page click on edit with TV so for this here I'm going to build from scratch and we are going to go with a two column layout all right so on the left here I'm going to add some text so let's add our text module so we're going to use dummy text because typing this content here is going to really be a problem because my typing is really bad okay so let's add our dummy text like that and we're going to set this as a subheading so I'm going to highlight it come over here it's heading 4 that I need save okay now let's move on to the next one click on this plus button text okay let's use our dummy text again right so I'm just going to override all this but in your case you want to be adding here the text for your actual website okay so you don't want to just go in and do what I'm doing here so this here is going to be let's say heading 3 because we want people to really see this text that I'm adding over here so I see here we have a massive Gap that's not looking good so I'm going to hover over here and you get rid of that by just dragging it so the final thing I'm going to add here is my call to action button so I'm going to add my button module now do you see how easy it is now to just add all my content here as I'm designing so this could be contact me I'm going to save that and again I'm going to reduce this text I mean this Gap here like that all right so as I'm looking at this I can see that this needs to be adjusted so I want to go in and go to design heading text so this is heading 2 I think is it let's double check okay this is heading three so on the line height over here let's go with 1.2 save all right so this part is done the next step is to come over here and add our image so let's search for our image module it looks like I don't have any images here in the in my media library so I have you covered there's a website here that I use for my images it is called unsplash.com so this is where you want to decide what type of what type of website your website is going to be so mine here is just going to be like an adventure website so look for some images that I can add here I'm going to go with this one here okay so you click on the image and then over here on the download I'm going to go with the medium so while I'm here I might as well download some images which I can use easily let me go with this one so this is the process you want to go through to download all your images that you're going to use on your website all right so I think I have quite a few images here pretty happy with that so back over here now on my site if I click here click upload files select files I'm going to go to my downloads folder because that's where they all are and I'm just going to go ahead and select them like that click open so this is going to add all the three images in one go all right so the one I'm gonna go with is this one here all right so now that I've added my image you can see my hero area here is starting to take shape which is pretty cool so what I'm going to do now is I'm going to go to My First Column here and add a bit of padding because my text here is way too close to the top and I don't really like that so I'm going to come over here to design spacing and I'm going to add a bit of padding on the top so let's start with four percent uh let's bring this down a little bit maybe three all right save that yeah that's much better now this main section here also needs to be changed so I'm going to come over here and go to design sizing and for my minimum height I'm going to go with 80. VH okay so this just makes my main area here slightly bigger and I'm also going to go to in fact we may even bring this down to maybe 70. okay and what I also want to do is to add a bit of spacing here at the top so let's go with four percent padding at the top and save all right so that's looking great the next step now is to add some sort of design element to my image here so I'm going to go to background and um let's add background mask in fact before I do that I need to add a background color so this is going to be my color now remember this is my main brand color so now I'm going to come over here and add a design element so you can see now over here I have a design element let me choose the one that I want because I'm not a fan of this layer blob okay you know what I'm gonna go with this one here and hit save yeah I think that gives a nice design element to my image and then over here I want to make sure that my image here has rounded Corners so let's go ahead and do that I'm going to go to the border and set this to eight all right so let me make this as a default here so I'm going to create a new preset for my image rounded corners and I'm going to assign this to a preset yeah so every time I add images they're going to have those rounded Corners all right great so that's my main hero area here now let's move on and create another one so I'm going to click here on this plus button go to regular and we're going to go with a single column here because we need to add the title for the section so let's go ahead and do that so this one here is going to be services or about us so it just depends how you want to name this so let's go with heading 4 and Center it all right so I'm happy with that I'm going to save my sections here are pretty much similar in the background color so I wanted to distinguish that by coming over here going to the background and choosing my background color like that and then save all right now let's move on and add more elements here so I'm going to click on this plus button and choose my rows so I'm going to go ahead and select that and in that row we're going to add a blurb all right it's time now to design this so I'm going to start by copying my text here so that's the text and I'm also going to add my title so let's go ahead and find our title here and paste it here in the title area now it's time to design this because obviously this doesn't look great but before I do that I want to come over here to image and icon and set this to an icon so I'm going to filter here and go to font awesome because I think these icons look way much better all right so that's going to be my first icon right there and then now it's time to go to our design so over here I'm going to select my icon and choose my icon color so my icon color is going to be should go with that yeah I guess so so as we design we can you know make our changes but for now I'm going to leave it as that and our font here is going to be Poppins and let's make this all caps and give this a bit of letter spacing and let's make this semi-bold now next we're gonna go to the text here just make sure it's centered uh let's set this to Poppins increase the size a little bit to about 15 and back over to this one here we need to center it so the size of my icon here is a bit too much so let's reduce it by coming over here to Icon width so let's bring it all the way down to let's say 42. I think 42 is a great size the next step now is to give this a bit of breathing space and add a background color so what we're going to do to achieve that is to come over here to our design scroll all the way down until we find spacing all right so we're going to go with four percent all sides so right now we won't see a difference because we haven't actually gone in and given this a background color so let's go ahead and do that by coming over here to our background and you're going to give it white so now we have this subtle difference between the main background and our blurb all right so next let's give this some rounded Corners by coming over here to design and going to border and we're going to set this to eight so this is looking great I'm going to save this as a preset but before we do that save this as a default just in case we may want to use it in the future so now I'm going to say create new preset from current Styles and call this blurb okay let's assign this to default all right so now that I have this all set I can now save it and save one more time but we want about three of these because one is not good enough so let's go ahead and go into our row settings here and duplicate this three times in fact this should work now let's save that now all we have to do is to come into this one here and change the actual icon go to image and icon and font awesome so let me find my icon here and go with that one save come over to this one and we are going to change this as well by coming over here to Imogen icon selecting font awesome all right let's go with this one here all right so I think that looks great all right so as I look at this I can see that my top padding here is not looking great so I'm going to go back in here and make some changes so I'm going to go to design spacing and let's change the top and bottom to about 10 and left and right to about six okay let's save and take a look at that so I think this looks much much better than the other two so I can right click now and copy module styles and then hover over here right click paste module Styles right click paste module Styles let's save the whole page the next step is to come over here to my section settings so what I want to do is I'm going to go over here to design spacing and give this a padding of four percent to the top and the bottom all right so the next step now is to add a brand new section so I'm going to click here and add a regular section so for this section here we are going to have two equal columns so on the left here we're going to add a text module I'm going to select that and then I'm going to come over here to my dummy text and add a bit of text so this is going to be some sort of a description accompanied by an image on the right all right so I'm going to paste here and let me also add capital letter here so my sentence here starts well and then on the top here I'm going to set this to heading 3. now it's already customized so I don't have to go in and stylize it because we've done this ahead of time all right so now that I have that I'm going to save and then over here we're going to need an image that accompanies that text so let's search for our image module and select it and click here and find our image so the image I'm going to go with is should we go with that one yeah maybe I mean either either image here works so I'm going to go with that one all right great so now that I have my image I'm going to hit save so I have my description text here and my image now over here I just want to make sure that the space I have on my sections here is fine and it definitely looks okay all right so as you can see my page now is no it's complete I have my main hero area here I have my services and I also have this area here which talks about whatever it is here on the image okay so that looks great so all I have to do now is to save this and exit the visual Builder so that's our home page it's done um let's just scroll through this one more time a simple but effective home page so you can see the colors here are used wisely we have our call to action color here we also have our brand color and when you scroll down here you can see our brand color has also been used here so all in all you can see that it's been used about 30 of the time which is a good use of the 60 30 10 row okay so our page now is complete let's move on to the about page so I'm going to open this in a new tab and start working on this alright so for our about page let us go and enable the visual Builder here so what we're going to do is we're going to build everything from scratch so we are going to start here with a main hero area so I'm going to close here and click on this plus button and choose full width this time so I want to fool with header right so without full width header here I can choose an image that goes in the background so I'm going to come over here I'm going to choose my image so I'm going to come over here click on this plus button and this time I'm going to go with this one so that's my image that I'm going to use so this time we're going to add a bit of a style to this we're going to add some Parallax and over here on the design we're going to go to where is sizing okay let's go to layout and let's make this full screen so we have our Parallax work in here and we're on full screen so I don't need the button here so I'm going to come over here to my text okay that's how you get rid of the button so you just remove the text on the button here so all I have to do now is to add my text here so let's go to lorem copy that come back over here and paste it and then what we also have is the description and I'm also going to add some text in here like that copy it and paste it over here all right so now that we have this we really want this nice and bold so let's go in and stylize this so I'm going to come over here to default and choose pop-ins right so we really want this to stand out so let's increase so let's go with 44 yeah I think that works we're going to capitalize this let's make it all caps all right so that's great uh let's work on the paragraph text now change this to pop-ins and we're also going to make this semi-bold and increase the size so let's start with 18. we may need to increase it a bit more 22 works fine now as I look at this I can see that this is stretching way too much over there so we may need to come over here to layout Center it will that work I don't know maybe or what we could do is we could add the text over to the left and then adjust the size so if we come over here to sizing to sizing not spacing so for our content width we can reduce this to 50 or 48 and then we can just customize this again one more time by adding some line height okay let's reset this sometimes it gives us a bit of a problem so I think 1.4 works better and I'm going to go back in here and increase the size a little bit to maybe 48 all right so now this is really striking it's nice it's big so what I may also want to do here is to see what happens if I add a drop shadow which I think really separates the text from the background to make it easier to read alright so I'm going to save that and wow that looks really nice I like that so this section here let's get rid of it all right so that's our main about us so what I may also want to do here is to add some images some sort of a gallery so let's go ahead and do that I'm going to click this plus button go to regular and I'm going to add a single column here and this is going to be some text and let's give this a title all right so the title I'm going to give this is going to come over here and I'm also going to set this to heading 4 excellent so now our styling for our main header areas is going to be pretty much the same so I'm going to Center that and then save next I'm going to add some images to this I'm going to click on this plus button and my single column and in here we're going to add a gallery there we go select that so at the moment we have these three images so for my design I would like to have about four Images so I'm going to come over here and let's download a few more to make our Gallery look nice so why don't we go with perhaps this one here all right so let's go ahead and download it okay there we go it's downloaded now so back over here I'm going to add some more images drag and drop it here so that's my fourth image I'm going to select all of them and then hit select so it's important that you select all the images that you want to add in here so now that I have all my images there's a few things that I can do here I can set my imagecon to four so that I know definitely I need four images and the order I mean I just leave it at default you can leave it at random if you want now let's go over here to our elements so show pagination no and then show title and caption I don't want to do that either because the titles here are really ugly so people can see really see that these are my images which is great okay so with that said now I can head over now to design layout so making sure that this is a grid because you can also make it a slider if you wanted to but I would prefer to have this as a grid okay so let's set this to grid now on the overlay at the moment my overlay color is this white ideally we want to have a color from our branding over here so I'm going to use one of my colors here as my overlay color I mean for my overlay icon I want to use this very light color here and for my overlay background it's going to be this blue but what you're going to notice is it's going to cover everything so what you want to do is to come over here in fact you want to click here and reduce this a little bit so you can have a hint of the image a little bit more yes I think that's perfect and then over here you can choose whatever icon you need so let's go with this plus so now I have all that set and I'm going to save so that's my gallery you see it's not I mean it's not that fancy it's just pretty much simple straightforward so if you want to do a few more adjustments you can come over here to the row settings go to design spacing in fact you want to go to sizing and then use custom gutter width reduce the space a little bit I usually like this at about two and then save okay so that's our Gallery area so you can see our page now is really starting to take shape so this is our about page now if there's any more content that you may want to add here you can always go ahead and add it again in a new section so let's go ahead and do that I'm going to click here regular section so for this one here here let's add two columns right so what I'm going to do now because we haven't really added a video on our pages so I'm going to add a video here and show you how to add videos to your site there we go so that's going to be my video right there now let's add an image overlay to that so I'm going to come over here to design overlay okay the overlay is fine so we may need to add our image first by clicking here so let's use this as our image overlay right so the button here is coming in too heavy let's go to design play icon and let's reduce the size so to reduce it you want to come over here to use custom icon size and then just reduce that to about 44. yeah 44 usually works really nice for me I'm going to save that and to distinguish my backgrounds here I'm going to give this a background color so I'm going to come over here go to my background and let's give this a very light color like that all right so that's looking great so far now over here to balance this I need to add some text so let's add our text here to describe what's happening on the video okay so let's copy our description text here like that and we're going to add it over here to the dummy text right so all I have to do now is to set this to heading three and let's capitalize this n excellent so this now has balance my design over here I have my image gallery and I also have my video here now if you wanted to add your own video over here all you have to do is to go back you want to delete this and then click here on ADD video so now you can say insert from URL go to YouTube all right so I have my video URL here from YouTube here it is insert into post there we go so now oh in fact while we're still here why don't we go and give this some rounded Corners I'm going to go to border give this some rounded Corners let's go with eight great and let's set this as a default as well okay and let's assign this to default and save so this is going to be applied pretty much across the whole website so that we have consistency throughout so I'm really happy so far with the progress so let's save this the next page we're going to work on is going to be our contact page so let's go ahead and save this one here and let's move over to our contact but notice that the design that I'm doing here is very simple very easy to follow very easy to read and that is very important in design okay now let's move on and work on our contact page so I've opened this in a new tab let's go ahead and click on enable visual Builder and for this I am going to build from scratch so the first thing we're going to do here is let's go with a single column and add some text so here we're just going to give this a title of contact us so again let's set this to heading 4 and Center it great let's save now let's add another row by clicking here two columns so on the left here we're going to have our contact form so to make this really work with the rest of the website we need to go in and customize this right so let's start here with the field so Fields background color let's go with a color here that we have on our color palette and our Fields text color we're going to go with that and our Fields Focus color I'm not really going to spend so much time on the focus and the text color let's use this on the field Focus text okay so now let's head over to our font we want pop-ins here okay that's great now let's adjust our size a little bit let's go with 16 and also why don't we go to uh Fields padding and just add 10 top and bottom so obviously we can see 10 is not working here so you might as well just increase it to about say 20. so now that gives it a bit of space which makes it look much better okay so I think that looks great now uh let's work on the button so I'm going to come over here activate use custom styles for button and for our button text color it's going to be that now let's go to our background and it's going to be this call to action color here like that and then we also want to change our font to Poppins and select it all right so now our submit has been updated we also want to change this capture font to Poppins so this just makes the whole page look uniform because you don't want a situation where we have different fonts different sizes it doesn't look great so again we're going to set this to 16 because remember that's the size we used over here and for our color let's set our color so that's looking great now I can save this now over here to the right we can add our text so we can just add our direct our address here so this needs to be your address so this is in London UK so we might as well add a phone number plus 4 4 is the country code so the rest now can be deleted so what you may also want to do here is to just Bolden the phone number here just to make it a focus there we go all right so that looks great that is our contact page now you may also want to add some social media here so let's add our social media follow I wish I had saved um that bottom one here as a preset so I can add it over here but you see why it's important to add our presets okay so we said Instagram here didn't we Instagram and [Music] there we go and the other one here is going to be YouTube so I'm going to come over here go all the way down select YouTube so what you want to do is to add the links so this would link to your YouTube account like that go back go to Instagram go to link and then add your link to Instagram so once you've added all your links pretty much this now is going to connect to all your social media places okay so that's our contact so we have our basic form here we also have our information phone number which is pretty cool all right so let's save this so what we're going to do next now is to design our services page but this time I do not want to design this from scratch I want to show you how to use the pre-made layouts let's go ahead and do that so let's open services in a new tab and then I'm going to click on enable visual Builder so what I'm going to do now I'm going to do something slightly different I'm going to start this with the pre-made layout now remember in the beginning I did say that you need to add your API key if you don't you won't have access to the pre-made layout all right so I'm going to say browse layout right so when it comes to choosing our pre-made layout it doesn't really matter what this industry is because I don't want you to think of the layout uh pretty much represents a type of Industry now what I mean by that is let's say for example I come over here on this portfolio layout pack if I click on this it shows me the different types of designs this layout has on this page but it doesn't necessarily mean that you cannot use this for any type of website so now we are looking for our services so we can come over here let's look at the services on this architectural page okay this doesn't look very exciting I can go back so you can just keep looking here until you find something that you think works for you so I'm gonna go with this one here and delete the parts that I don't need so let's use this layout here so this now is going to import presets now I don't want to import the presets I just want to import the design because the presets in this case don't really need them because it's going to mess up with my existing presets that I've been building throughout this design okay so we are almost done downloading all this and here is our design okay pretty cool but there's a lot I need to get rid of here so let's start deleting what I don't need so first of all this has to go this section here and what do I have here don't really like this too now these are testimonials I think that's not too bad we can leave these or we can recreate our own so I can see here that this is not very exciting for me uh however I can go in and stylize these a little bit so let me go back in here go to design and for the text here okay that's aligned title text we're going to change this to Poppins I'm going to align this to the left we're also going to do the same over here the text over here is fine it's Poppins but we're going to align this to the left as well because it just looks much better this way all right now the colors we want to make sure that we we add colors that work with our branding so now I've selected my color let's save this and then we are going to now copy this style or extend it now we haven't used extend right so we're going to say extend throughout this section okay so this is just going to update all my other blurbs as you can see now everything is pretty much looking great we have our service details here but I can see that the layout doesn't look great so I need to recreate my old style so I'm going to click over here and go with two thirds one third like that okay so I am just going to drag this over here like that then in here let's add an image so I already have some images in here so which one should we go with okay let's go with this one here so I have my image now and I also have my text so what we can do now is just drag this text into position so I want to have three of these I don't have too many okay so these are our three services so I'd set this to two thirds one third I think that's that's going to work okay so for this titling here I don't think this is working so let's get rid of it and we are going to use this text instead in fact let's get rid of this too and make this a single column now in this single column let's add our text module so ideally we want to give this some context so back on our services let's paste this like that we're gonna Center it and then let's call this our services okay now this text here let's set this to uh paragraph four so how is this looking so there's a lot of spacing here a bit too much so we may need to go in and fix this so you can see here there's a lot of margin so I'm going to reduce this like that and then do the same over here let's reduce this as well right so this now reads much better over here things don't look great because the text is going way too wide so let's go in and go to sizing and set the width okay I think if we go with 70 that should work fine I'm going to Center this save that all right so we're getting somewhere now so we have our services here and we also have our title to the page which is fantastic okay what do we have here on the top so we have this image here going into this area here okay it also has a call to action which is not too bad so what we can do now let's customize this top bits so I'm going to go into my settings go to the background delete that and the pattern here is super ugly oh my goodness let's delete that right so what we're going to do is we're just going to have a background color here let's go with this this is our main brand color so that should work fine save that okay so we're going to change this text all together okay so let's call this what we do set this to heading one now we don't really need this call to action here it's too early in the process delete that delete that too so all we have is the image so this image now we need to change this to our own image so let's go with this one save that now our font here doesn't look like it's Poppins is it double check let's go over here to our design hitting text yes it's not Poppins let's add our Poppins like that okay that's much better now we're going to change this from heavy to bold 60 is fine okay so now we can save that so we have our image here and we have a bit of text to go with the image so we're gonna leave that as it is um I'm not a fan of these testimonials let's get rid of that all right so let's save that okay that's pretty cool all right so we're going to save this and now we're going to do our final touches so over here on the header I think we can do a bit of work here the text doesn't look great I want to go in and make this bold so let's go to our menu here and change this from regular to semi bold I think that looks much better save that and also I want to make my header sticky so before I do that I'm going to come over here to design spacing and let's go to 0.9 or 0.8 okay I think that works to make it sticky I want to come over here to Advanced scroll effects stick to the top save that okay now let's save the whole page and see how this is working I'm going to refresh this so it's definitely sticking to the top which is pretty cool now you know what we can also do here is we could make it a bit smaller while we're scrolling so let's head over now to our team Builder and let's go in and set this right so to achieve that we can come over here to our section settings we're going to go to our background so you notice now we have this little icon here the sticky icon so on sticky now we can actually change this background to whatever color we want so on sticky I want to say you know what let's use that so it's very dramatic I know so we're going to use that as our background when sticky now on the design we're gonna go to spacing and on sticky making sure you select sticky here and it's selected here we are going to reduce the size here to zero and then save now over here we're also going to do the same we're going to go in and for our menu text we're going to come over here to design menu text and for our sticky making sure you select it we're going to select that so now for the sticky we're going to change the color change it to that and active color for the sticky can be that so that's fine now let's go to spacing and see if we have any settings here okay so that should be fine let's save that save the whole thing okay now let's test this and see if this is working so I'm going to refresh the page and look at that the sticky now works now there's a few styles that we may want to add here and that is if we hover we can have this expand a little bit or if we hover over here we can have a drop shadow you know these are the sort of things that we can add if we if we want to make this a bit more fancy but if you want me to show you I can just quickly go ahead and show you how to do that on the blurbs Okay so we are going to enable visual Builder here so with our visual Builder open I'm going to go in here and select my row so what I need is design so we also have animation effects here so these are the animations that you can have when this opens so I don't want any animation here and on the transform I want to zoom in okay so I'm going to click on this little icon here and then click on Hover so on Hover I want to increase the size a little bit so we are going to go with 106 on Hover okay that's great so we're not done yet because we also need to add a border or a drop shadow sorry so the drop shadow I want to add is this one so with this one selected we want to make sure that this is appearing on Hover okay so this is 18 pixels so what I'm going to do is I'm going to click here and say on Hover it's 18 but on normal it's zero okay you see that we're going to come over here we're going to say vertical Shadow over here it's fine at 2 pixels but on the desktop we're going to add it to zero there we go so let's try this not sure why that went away all right so let's save this so I'm going to apply all this across this section so I'm going to right click and uh copy module Styles okay let's paste it can't see everything in fact you know it's even easier is to just right click extend blurb styles to this section okay so if I extend all those Styles it means if I save this page now all this was is going to have the same effect all right so let's exit the visual Builder now so we're going to scroll down now notice what happens when I hover pretty cool so these are the sort of animations that we can have on our site now let's say you want to make this clickable what you want to do is to enable visual Builder here okay so let's go into the actual module and then over here on link you can just add your module link I'm just going to add a blank one okay pretty cool so there you have it that is how you design a website from scratch using Divi so this has been a step-by-step process if you like this tutorial please give me a thumbs up and if you want me to design any other tutorials just let me know in the comments box below and I will do my best to do them until next time thanks for watching and I'll see you in the next one take care

Channel: SiteKrafter

Views: 38,216

Keywords: Augustine mak, divi 4.0 templates, Divi 4.0 template, Carflows divi, wordpress funnels, online courses, create online courses, online course business, best website them builder, how to build websites for beginners, wordpress websites, how to build wordpress websites, how to build websites from scratch, how to build wordpress websites from scratch, how to create a website from scratch, divi theme builder, how to create a wordpress website for beginners, how to make money online

Id: OUfmu4cCCSc

Length: 73min 59sec (4439 seconds)

Published: Fri Jan 06 2023