How to make a WordPress website 2021 - Divi Theme Tutorial

in today's video i'm going to show you step by step how to design a professional looking website from scratch all the techniques i'm going to show you throughout this tutorial can be applied to any type of website i will also be sharing all the latest divi tips that allow you to design all these websites really really fast so let's take a look and see what we're going to design here so this is our main home page i show you how to put together colors that work well together i also show you how to add this beautiful overlay image on your videos how to add brilliant testimonials and also how to create this footer over here next i'm also going to show you how to create this about page and as you can see it's very clean very easy to read and these are the type of websites that have impact when you design websites for clients you can see here we also have this bottom area here which shows the team over here on the services i also show you how to use pre-made layouts to design your pages really fast so you can see here this page was designed really fast and also it looks very clean and professional i also show you how to add this email opt-in so you can start adding leads onto your website and also when i move further down here we also have all these other sections and slight animations also to give a bit of life to your website finally we have a contact page so again i show you how to design this from scratch and when people add their name and email address in the message this will be sent to your email address this tutorial is very easy to follow because i go nice and slow step by step in order for you to master everything that i'm doing throughout this tutorial now before we begin i'd also like to remind you that all the services that i use are all included in the video description below and also if you buy divi using my affiliate link you also get access to my web design formula course this course teaches you how to design professional looking websites from scratch so without wasting a lot of time let's dive in and let's get started all right so the first thing we're going to need is a domain name so if you already have a domain name and hosting you can skip this part but it's very important that when you register your domain name it needs to be separate from your hosting because sometimes you may want to change your hosting account to a totally different one so if you have your domain name tied in with the hosting that can pose a lot of problems so what i usually do is i register my domain with harvard.com this is one of the services i like they are very very um good and also their support is brilliant so you register your domain name here and then when it comes to hosting now i use a company called flywheel now the reason why i like flywheel is because with flywheel you have a fantastic dashboard and this is also user friendly it also comes with a lot of features and also the most important thing is you won't have to need to pay upfront for your hosting so a lot of these other hosting companies you have to pay for the whole year so if you don't have a lot of money you can just pay as you go and this is about 15 a month which is affordable based on the features you also get from this and these features are managed hosting so you won't need to worry about your securities and making sure your website doesn't get hacked they take care of all of that all right so let's talk about the next feature here so this dashboard here comes with a lot of information so this is one of the websites i have here so if i click here on this website uh this will give you a lot more information so if i come over here to stats i can really see how my website is performing so as you can see here i'm getting quite a few visits to this website and this shows me all of that the most important part here is the backups so sometimes when you're running your website you may have an issue on your website where you need to restore a working backup so what flywheel does is they back up your website every single day so if i take a look here you can see yesterday a backup was done and if i need to restore it i can just come over here and restore the backup this will save you a lot of time there are situations where i was hosting clients website and when something went wrong with the website i had to redesign the whole thing so having backups is very very important and this comes in with flywheel next let's take a look here on the advanced tab and here on the advanced tab we have staging so let's say you want to design your website and perhaps add some features but you don't want to push them live yet you can use the staging option and also it comes with https which means if you want to sell any products on your website you can do so with that secure lock that you normally see that just ensures that all the communication between the person who's paying is all encrypted so that credit card information is not stolen and finally we also have what is known as a cdn and this cdn is fantastic because this is one of those things that makes your website really fast because it's distributed across different servers on the planet all right so now that we've spoken about this let's talk about creating a new site so to create a new site what you need to do is to uh let's just go back over here to our dashboard and to create our new site you want to come over here to the top and click on new site so over here you can either create a new site where you can just start paying for it right away or you can create a demo site so what a demo site does is you create your wordpress website you have up to 14 days of free hosting and these opportunities are brilliant because you can design a website for a client and you can show them the progress and you have up to 14 days for them to decide whether they want to go the website or not so this is a brilliant option and this is what i highly recommend so if you just want to play around and see how the hosting works you can use this option where you can host your website for free okay so moving on if you click here on uh create a demo site you would need to come over here give your site a name you also need to give give this a temporary domain name and once you've done that you need to choose your data center so i'm based in the united kingdom so i would choose here but wherever you are you can just choose you know any one of these it doesn't really matter and then you want to add your wordpress admin username this is very important because we're going to need this in the next step so you need to create a username and then you also need to create your admin password so once you've done that and you create your demo site it takes uh a few minutes and once you're done you're then redirected to your website and this is where now we can log on to our wordpress admin dashboard so uh to log in i'm just going to add in wp admin hit enter and that username we created is what you need to enter here and you need to enter the password i'll just say remember me here and click on login so now i'm in the dashboard of my wordpress website so this is where we get to add all our features design our website all that is done from here so at this stage what i normally do is i would like to get all my assets that i need for my website and the first thing that i usually do is to gather all my images so there's several ways you can gather your images you can either use your camera take your all your pictures have them on a on your computer on a hard drive but for this video i'm going to be using realty free images and i use two main websites is pixabay and pexels.com now these two websites are fantastic because you can use these uh images without need to worry for licensing issues okay so let's head over here now to our site so this is our wordpress admin uh dashboard so as you can see on the bottom here i've already gone ahead and downloaded my images but i just want to show you where these images are so all you need to do is to search here so let's say you want to look for something that resembles a credit card you can just search there credit card and choose any images you may need and also the really cool thing about this is you can also choose your orientation so for the orientation you can come over here go to horizontal and now you can see we have more options here for the credit card so let's say you want to download an image you can just click here click on free download and that image is now downloaded so the next step now is to upload all our images to our media library so let's go ahead and do that so i'm just going to come over here now to my site and then i'm just going to click on media and click on add new so this is the moment where we select all our files so i'm going to click on select files and as you can see this is my download folder so i just need to highlight all my images and upload all of them so i'm going to click open and now all my images are being uploaded onto my website all right so the next step now is to create all our pages for our website so to do that we're going to come over here to pages click on all pages so so far we only have two these are the default image these are the default pages that come with uh wordpress so i'm just going to trash this sample page i don't really need that so my first page here is going to be the homepage i'm going to click on add new and just give this a title click on publish i'm going to go back add another page so this one here is going to be the about page i'm going to hit publish let's do another one so i'm gonna click back on the w here this one here is going to be our services i'm gonna hit publish go back again so let's also have a page here which we can use for promotions so let's add promo i'm going to hit publish then back again the last one here is going to be our contact page and then hit publish excellent so now that i have all my pages now you can see all the list of pages over here so let's take a look at our website and see what it looks like so i'm going to open my site here in a new tab so as you can see this does not have a menu and also this page is set to show all the blog posts so we need to change that so the first thing we need to do is to come over here to settings reading and we need to assign our home page as the home like that hit save changes so now when we come back on our site and refresh you're going to notice that we now have a blank page so at the moment we don't have any information on the homepage so we need to design that page uh soon now another thing as well is we have a page that we've created but there's no menu so let's create our menu now so to create our menu we're going to come to appearance click on menus and let's name our menu so i'm going to call mine main menu and we want to assign our main menu here to the primary and then click on create menu okay so now that my menu has been created the next step now is to view all my pages and add them over here to my menu so i am going to now select all of them except the promo because the promo is the page that we're going to use to promote our products or our pro or our services and so this doesn't need to be on the main menu okay so now i'm going to click on add to menu so these are now all my pages you can rearrange this the way you want i'm gonna hit save menu now when we go to our site and refresh now we have a menu on the top right this is brilliant our users now can come to our website and they can navigate through our pages nice and easy now if we wanted to create our website content now we need to use a page builder so let me just show you what wordpress comes with out of the box so i'm going to switch back over here now to the back end of my site and i'm going to go to pages click on all pages and let's let's work on the home page i'm going to click on edit so if we wanted to design this page we would use what are known as blocks gutenberg blocks so if i want to add an element i would click here on this plus button and you can see now that when i click on browse all these are all the elements that i can use on my page so let's say i want to add a title i would uh search for my title here and this is the heading so i could say my heading add another block so this one here could be an image so let's go to our media library and let's say i want to use this image here right so now that we have these two elements you can see that we are very limited here on what we can do to this image and this layout so let's say i add this as a full width okay great we have this full width here but if i wanted to add text on top of this i can't really do that so basically what i'm trying to say here is the gutenberg editor is fantastic it's fast but it's very limited when it comes to designs so if you want to design your website and add gradients colors and all of that this is quite limited and this is why we need a page builder now there are several page builders out there there's elementor there's divi brizzy bricks but the one i really highly recommend is divi so the divi page builder is what we're going to use throughout this project let's go ahead and install it so now i'm going to come over here to elegant themes so this is the main website for elegant themes so you can see here dv is the most popular wordpress theme and this has a lot of different layouts it comes up with it also has a lot of pre-made layout which means you don't have to spend a lot of time trying to design these beautiful layouts you can just use these pre-made layouts and in fact i'll show you how to add these on your site i've done an intensive review of divi and how to use it i will link all those videos in the video description below but for now let's go ahead and download our theme so i can show you how to use this to create beautiful websites so i'm going to click here on member login because i already have my membership next i'm going to click on download divi theme so now this has been downloaded next i'm going to come over here to my account because i'm going to need my api key so i'm going to scroll down here click on api keys and then scroll further down so here's my api key i'm going to click here to copy and then back over here on my site i'm going to go back to my dashboard i'm going to leave and now i can go to appearance themes add new upload theme and i'm just gonna drag my theme over here and click on install now okay excellent next i need to click on activate great so now that my theme is activated the next step now is to head over here you can see we have an entry here called divi we can now go into our options and the very first thing we need to do here is to click on update and we need to add our api key here and we also need to add our username click on save changes and now i've added my api key and username now what this does now is it allows us to have access to all the pre-made layouts and also the updates that divi pushes out we are able now to get all these updates so the next step now is to work on our colors so what i'm going to do is i'm going to add our colors to our color palette so that as i design my website it's going to be easy for me to choose the right colors throughout the whole design so let's go ahead and let me show you how to add those colors all right so i'm on a website here called coolers so this is a website which generates your color palettes so i highly recommend that you generate a color palette here which you then add onto your divi palette so what i'm going to do now is i'm going to replace the default colors that we get with divi so what i'm going to do now is to copy of my hexadecimal values so i'm going to start over here with this color i'm going to copy it back over here on my site i'm going to click on general and i'm just going to replace all these colors like that move on to the next one going to copy that paste it in here move on to the next one so you want to continue doing this until you've added all your colors because it makes it easier for you to design your websites with the colors that you need so this is a step that a lot of designers miss because they try to use colors that don't work well together so this tool allows us to add colors that work well together okay so let's add three more colors here so all i'm doing here is i am copying my colors from here and just pasting them let's move on to the last one i'm going to copy that paste it and this one here let's just make it white excellent so now i have all my colors for my website i'm going to hit save changes great so now that i've set all my changes let's now go ahead and start designing our website step by step so we're going to start with the home page and then we're going to move on to the other pages throughout this tutorial so for the home page what we need to do is to go back to pages click on all pages and click on edit with divi next i'm going to click on start building and for this layout i'm going to build everything from scratch so i'm going to click here on build from scratch right so the first thing we're going to add here is our main hero area so i'm going to click on this plus button click on full width and i'm going to start off with a full width header so i'm going to snap this over here to the left so i can see what i'm designing over here so this is where we can go in and customize our text to match whatever we message that we want on our site so i'm going to copy a bit of my dummy text here back on my site i'm going to add my title and then on the button i'm going to say start here or whatever call to action you may want to add next i'm going to come over here to my body text i'm going to replace this with my dummy text next i'm going to come over here to the background and you can see we have this background color here now i would like to replace that with my own color so that's the color i'm going to use for my background and for this i need to add a background image here for my design so i'm going to click on the third tab click on the plus button and i'm going to now look for my image that i'm going to use here so it depends what image you want to use you can either go for this one here which just shows that this is a business site or if you want people in the actual uh hero area you can add this so let's try this out and let's see what it looks like so now that i have my image here i'm going to click on design layout and we're going to make this full screen so we can see everything here so the next step now is to either make our message here centered or you can keep it there on the left i usually like it centered so next i'm going to come back over here to content click on background and click on the image tab so over here i'm going to come all the way down to my blending mode and let's choose multiply now the reason why i want to do that is because i really want to make this image here very dim because i want this text here to be easier to read so now that i have it that way i'm going to come back over here now to my color and this is where i can lighten it up a little bit like that until we can just see what is in the background and also our text here is easier to read okay so this is our first image to be honest i don't think this looks really nice because it's covering the people here so the image i'm going to go with is a totally different one let's go with this one here which has a newspaper so i prefer this one and i may want to make it a bit lighter so let me go back and just make it a bit lighter okay i think that looks great i'm going to save that and what i also need to do is to just move this above so so that we don't have in fact we can just delete this okay so now that we have our main hero area the next step now is to customize this text by coming over here to our settings i'm going to click here on design so all you have to do now is to click on this paint brush icon so if i click here it takes me now to my fonts so the font i'm going to use here is called poppins and by the way we have a ton of fonts that we can choose from uh for our design here next i'm going to now choose here from regular to bold and we can also make it slightly bigger let's set this to say 36 maybe even 38. next i'm going to highlight this paragraph here click on the paint brush tool and i'm gonna change my font to poppings as well now let's increase our size there we go so i'm gonna go with 20 or maybe even and as you can see the lines are quite close together we need to add some line height so i'm going to come over here and increase this to about 1.8 next we need to customize our button here so i'm going to click on this brush again activate use custom styles for button so this is where we can choose what color we want for our button and also the complete design for design of it so i'm going to start here with my background so i'm going to click here and you can see my background has been activated now usually what i do is i also add the same to the border okay now let's uh work on our text there for the button so i'm gonna come all the way down and i'm gonna choose my font here change this to poppins great so let's try all caps and see what that looks like actually no okay we're gonna leave it like that and if we need to make the size a bit bigger we can just come over here and just make it slightly bigger like that okay so now my main page here has been designed i'm pretty happy with that i'm now going to save and it's time now to work on the next section so as you can see this now really looks like a professional page which when people land on this page they can see that it's been designed it's clean uh it's not overly designed and this is what you want to do when you design your website so the next step now is to go to our next section where we're going to add our services and what uh the company specializes in okay so i'm going to come back click on this plus button regular so what i'm going to do here is i'm going to start off with a single column and in this column is where we're going to add our headings okay so let's start here by searching for our text module and here it is i'm going to add my heading so i'm going to highlight this text and override it so for our headings i would prefer to have them centered so i'm going to come over here and just center it like that i'm going to save that so moving on i'm going to click on this plus button this time i need three columns and in each column we're going to add a blurb so i'm going to search for it and here it is so i'm going to add my dummy text in here i'm going to add my title so what we're going to do here is we're going to spend a bit of time designing this particular blurb and then we're just going to duplicate it save us a lot of time so uh be patient with me as i design this whole thing okay so what i'm going to do next now is i want to work with color because we have a light background here so we want things to really stand out so to do that we're going to come over here to the background and we are going to start with this color here okay so now that we have our color we are now going to add an icon over here so let's go ahead and click on image and icon activate my icons here so my first icon is going to be that one and now let's customize our icon by clicking on the brush tool so now we can add our color i think this color works better next i'm going to um come over here to use icon font size and just customize my size here i think 40 maybe 42 works better and then i am going to uh come over here to my text make sure everything is centered and as you can see everything is close to the border here ideally i would like to add some breathing space to my design so i'm going to come all the way down here to spacing and let's add a bit of padding so i'm going to add 2vw all around now what you also need to do as you're designing this is to take a quick look at all your mobile views so if i click here i can see what it looks like in the mobile view so here i this is great i really like that and also this doesn't look really bad but i may want to increase the border around here for my mobile view so let's go ahead and do that okay so we're gonna go with four and four for tablets pretty much okay i may need to add top and bottom there we go so let's go with let's go with four and then on the desktop here that looks fine okay next i'm going to come over here now and adjust our title so for our title i'm just going to go in add my my text change my color and i'm also going to do the same here for the paragraph and change my color as well now to distinguish this what you may also need to do and this is a quick tip that you need to do when you're using divi if i click on these three little icons here it opens up all these other colors and these are colors that work well with our design so you can see here by just adding it there that looks really nice and what i can also do here is to just go in and play around with the intensity or the yeah with the intensity of my colors here now now that i've chosen this color i may want to change this icon here so let's see what color we can use for that so again i can click on this drop down and choose another color so let's see what we can go with you know what i think i will just go with that okay so now that i've designed this the next step now is just give this some rounded corners by coming over here to border and let's go with three just very subtle okay so i'm happy with that now i can save this and what i can do now is i can duplicate this twice and then just drag this over here and drag the other one okay next i'm just going to come over here now to my background and add my color so i'm going to go with this color here for the background and save next i'm going to work on my text here so i'm going to click on this gear icon come over here to design and i'm just going to click here on this brush tool so i can go directly to all my settings i'm going to choose my font and then choose my color so now you can see our colors are really coming together now as i'm starting to add them so for this here i am going to make this bold and let's increase the size a little bit so we're going to go with 22 okay that's looking great next i am going to um add a bit of padding here so usually i go with 100 pixels both to the top and the bottom just to give our design here some breathing space oh another way that you can add your padding here is to click on this gear icon to go into your section settings click on design spacing and you can add it over here so let's make this a hundred great i'm gonna save this okay so now that we have two sections we have this section here and then we have the what we do or about now we can go in and change the colors so the next step is to go to our background and let's change our color here i'm going to save that come over to the other one click on background change the color as well so this is how you can play around with the colors so i may actually go with uh this option but what you want to do now is to go in and make our text here darker because it does not really look great okay so we may also want to change this one as well great so let's change the icon itself by coming back clicking on image and icon and the icon i'm going to choose for that is going to be say this one here we're going to save and now let's come over to the middle one and again we're going to change our icon so i'm going to click on image and icon and the icon i'm going to add here is okay let's go with this one here and the colors here don't look too bad so i'm going to leave them as they are but if you want to change them slightly you can just come over here and just update them like that okay so now that i have all my services added i may want to change this as well let's see what looks better so you can just play around with this with these colors here and see what works better so to make that stand out let's see yeah i think semi-bold actually works better here so what i'm going to do now is i'm just going to go in and add a semi-bold onto all of these so i'm gonna come back over here click on this brush tool change this from regular to semi-bold save that and also do the same over here change changes from regular to semi-bold great so now we have a bit of color here going on and this already is starting to look like a really really nice layout next let's add another section so i'm going to click here on this plus button and i'm going to click here on regular so what we're going to do here is we're going to add a testimonial so to do that we're going to click here and click on single row and search for testimonial there we go right so now that we have our testimonial let's save this for now because i really want to have a dark background here so i'm going to click on background and i'm gonna choose this one here okay i'm gonna save that now i can go in and start working on my testimonial so i'm gonna click here on module settings so we're gonna have our name so our name here is james blake now for the body i'm just gonna override this with my text and over here on the elements i normally don't like showing that quote over there so i'm gonna get rid of that and now for the background i can now start experimenting with colors that really make my testimonial sections really stand out so i can go in here and see which one works so it's okay to cycle through these just to see what works better so i think this one is quite subtle i really like that so i'm gonna go with this color here next i'm gonna start adding all my elements now so i'm gonna come over here to my image click here and look for my image so let's say this guy here is james blake i'm going to select that and there we go now i'm going to go to my text and customize this so i'm going to click here on default choose poppins and i'm going to change my color and i'm also going to increase the size so i'm going to scroll further down here let's set this to about 16 okay that's great and now i am going to go to my borders so let's go with three again very subtle i'm gonna save that so now there's our testimonial so our main landing page can end here or we can add more elements to this so let's say you wanted to add a video to this what you could do is you can split this and let's say our column structure here needs to be two-thirds one-third i can do that so now we have our testimonial here and over here on the right we can add our video so let's click on this plus button add our video module now to add a video you need to uh just make sure that you you get your url whether it's from youtube or vimeo and add it over here so i'm going to click here so the next step i'm going to go with here is to add my overlay so i'm going to click on this plus button and for my overlay image i am going to use this image right here upload an image so as you can see this looks much much better so next i'm going to come over here to design play icon and i'm going to customize the size because it's quite a big so i'm going to reduce the size to about 66 and i may also want to change my color so let's see what works better there okay so we're going to go with that in fact you know what let's leave this uh light color here as our main color over here on the overlay i think the overlay is fine you can see when i um overlay this this looks okay now let's go to our border and again gonna give these three okay so that's looking much better now let's save that so now we have a testimonial over here and we have a video over here on the right so it's up to you how you want to uh set up your testimonial or if you wanted to add a video to it but either way this works fine finally we're going to add a bit of padding over here now remember so now i need to apply the same value both to the top and the bottom so i'm going to click on this chain so now as i drag this the bottom part is also being affected okay so that's looking great now i'm pretty happy with this i'm now going to save this so that is our home page now before we move on to the next part i just want to add a title to this section as well so what we're going to do is we're going to duplicate what we've created here on the top so now i can drag this all the way to the bottom and let go so i know we can't see it that's because the color is similar to the background so let's go in and change the colors so first of all let's change the title so i'm going to paste my title in here and then i'm just going to come over here to the design text and change my color and now our color has been updated and i can save right so as you can see this page is looking really nice the next step now is to work on the other pages but before we move on to the other pages i want to take you to our theme builder because our theme builder is very powerful it'll save you a lot of time as we're designing our site so i'm going to now save this page and exit the visual builder so we can just have a quick look at this page and here we go great so in our theme builder we are going to be able to design our footer and also our header so let's go ahead and do that so i'm going to come over here to our dashboard all the way down to the bottom here we're going to go into our theme builder so let's start with our global footer here so i'm going to click here on add global footer and then click on build global footer okay so for this we're going to build from scratch and we're going to start with a single column and we're going to add some text into here i'm going to select that so here's our text module so what we're going to do here is we are going to start adding our titles so that's going to be my first title here i'm going to set this to heading 3 and then over here on the design i'm going to change this to my proper font which is poppins changes from regular to semi-bold in fact you know what i'm working on the wrong one i'll click here on this brush tool and this is going to take me to heading three okay so let's change this to pop-ins changes from regular to bold or maybe semi-bold there we go okay great so now i'm going to save this next i'm going to add a dark color here for my footer so i'm going to go to my section settings background and i'm gonna add my darkest color here on my color palette and save and now i'm just gonna add my padding over here on the top so again i'm going to go with 100 and then click on this chain icon to apply the same value on the bottom as well okay so back to our design here i'm going to click on my text module and what we need to do now is to go into design and change our color because as you can see my color here is way too close to my uh background color so we want this to be easy to read so let's go with this for my color i really like that i want it very subtle because that's my footer okay so now that i have that set i'm going to save this now let's add another module and again it's going to be a text module select that okay so now i am going to add all my links so let's pretend these are all the links on my site so i have four links here so what i'm going to do next now is to customize all this so first of all i need to add my links so i'm going to highlight it click on this gear icon on this chain icon and add a dummy link for now but in your case you want to link this to your actual pages on your website so i'm going to do this to all these links one by one and then this is our last one add our link okay now let's customize this text so to do that we just want to click over here and this is now going to take me to the design tab and also on the link tab so now i can choose my font and it's going to be poppins the size looks a bit small let's increase this just a little bit let's go with 16 and here we can change our colors as well so we can be so we can experiment here and see what colors we can go with so let's go in here and choose okay so let me just add a bit more color to that okay so i'm pretty happy with that now i can save this so we're going to need a few of these elements here on our site so i'm going to now click on my row settings and just duplicate this a few times so i'm going to do it twice and in my last column i'm going to add my social media icons okay so now that i have these three i'm going to click here now and this is my social media icon so i'm going to search for social media follow so so far we have these two so what we can do now is we can add a few more so to change it i'm going to click here click on the drop down and this could be instagram for example and let's add another one so i'm going to duplicate this one here click on this gear icon and uh for this one now we're going to go with youtube okay so these are social media follow now what you need to do now on each and every one of these you need to go in and add your url to your social media landing pages so this would be like your youtube url and you can also go into instagram and do the same thing click on the link add your link in here go back go to facebook do the same thing add your link and then once you're done just save that save one more time and all we need now is a title to this so i'm going to duplicate this one here drag it on the top and we just need to rename this follow us there we go so now we have our footer so all i have to do now is to go in and change these titles and all these links all right so our footer is done now we can save it we're going to close out of here save changes and now when we visit our website that ugly footer that we had initially is now gone so when i scroll down boom now we have this beautiful footer on our website okay so now that we have this all set the next step now is to create a template for all our pages because as you can see it's really cumbersome to go in and change our font every single time we're going in to add content onto our pages so i want to show you a quick tip that you can do to make sure you have consistent fonts across your whole website all right so to do that we're going to come over here click on add global body and i'm going to say build build from scratch single column so i'm going to search for my post content so for my post content here i'm going to click on this gear icon and i'm just going to customize all these once and for all so let's start here with our main title heading 1 change our font here to pop ins we're also going to change this to bold and we also need to add our colors here move on to the next one same thing changes to poppins make this bold change our color move on to the third one usually i use three headings so i don't go past our heading three here so again let's change this to pop-ins this time we're going to use semi-bold okay and as my color and now i'm going to choose my main content here so i'm going to come over here choose poppins let's increase the size a little bit now let's add our line height so our text here is easier to read okay so that's looking great uh so i'm going to now adjust my color here for my text so what color should we go with here so i think that should work fine for my text yeah let's go with this all right so now that i've added all this finally i just need to come over here to my image and just give this some rounded corners i'm going to go with three boom so all that's done now so i'm going to save i'm going to save one more time so all the content on my page now is going to have this color so while i'm here i may as well just go in and add my padding and it's going to be both to the top and the bottom as well so i'm going to save this and close out of here save changes now it's time to build the inside pages of our website so let's come over here now to the about us right so over here on the about us you can see this beautiful footer here is following us which is fantastic all right so let's enable the builder now all right so for this we're also going to build this from scratch and then next i'm going to start adding all my content so i'm going to click here on two equal columns and on one side we're going to add some text i'm gonna select my text module here so now you can see my color now has followed me i don't need now to go in and uh keep changing my um my font every time i'm designing this so this is a great time saver all right so now that i have this selected i can just override that with my own text okay so here's our text i need a title to this so i'm just gonna highlight here give this a heading two so again you can see that our heading two is already styled i don't need to go in and do anything in here which is brilliant all right so now i can save that over here now i can add an image that goes with our about page so i'm going to search for my image module select that so let's say maybe this is the guy who started it there we go so that's our image right there i'm going to save that so next let's add a video so i'm going to click here on this plus button and go for regular single column and we're going to add a video into this and again you just need to link your video over here so for our design here let's just save this for now and let's go into our section settings what i'm going to do here is i'm going to give this a background color okay now i am just going to just drag this all the way down and give this a bit of transparency and let's now go into our design border and give this some rounded corners and we're going to go with three all right so now that we have this i'm now going to go in and add my video i'm now going to go in and add my overlay click on this plus button and the overlay image i'm going to go with is this one right here upload an image and i'm also going to come over here to design play icon and i'm going to adjust my size here for the icon and save and lastly i'm also going to add a title to this so that it has context to it okay so i'm going to click on this plus button add my text module i'm going to paste my text in here set this to heading 3 or heading 2 and i'm going to save and drag this to the top since this is a title excellent all right so now that this page is looking much much better the next step now is to save this so as i'm looking at this i think this needs more elements this video here is way too big so let's split this as well so i'm going to split this 50 50. so the video here can be on my left that is fine and then over here we're going to add some text as well so i'm going to search for my text module i'm going to add my text in here my text here needs a title so i'm going to set this to heading 2. okay so what i may also want to do here is to add a call to action so let's add a button over here so i'm going to save this and let me show you how to add that button so i'm going to click here on this plus button and search for my button module and select it there we go so now i have my button in here i may just want to change the title and of course make sure that this links to whatever page you wanted to link to so now that i have this that's looking great all i have to do now is to customize it a little bit so i'm going to come over here to button activate use custom styles for button and i am just going to now give this a color and a background color so the background color i'm going to go with is i'm going to go with that and add that as the border as well so my font here has already been updated so that's looking great i'm going to save so as i'm looking at this i may want to change this to maybe one-thirds to two-thirds let's have a look and see how this looks nope that doesn't look nice i'll tell you what we'll just leave this as it is so i'm going to save this next we're going to add one more section here which has the whole team of this company so i'm going to click here on this plus button add a regular section and i'm going to add about four images okay so i'm just going to close out of here and what i'm going to do next is to start adding my images i'm going to click on this plus button here and search for my image module select that and i'm just gonna go through here and choose my images so i'm gonna start with this one add it move on to the next one in fact what's easier is to just duplicate this okay so now i'm gonna drag it into position and that's the last one okay so now that i have my images okay so next i need to add my title so i'm going to add a single column just drag it above and then i'm just gonna grab one of my titles here duplicate it and just drag it all the way to the bottom here like that okay so all i have to do now is to make this slightly bigger so i'm going to go to design sizing and i'm just going to increase the width okay so that's going to be 90 percent there we go and then all i have to do now is to just go in and change these images so i'm going to go in one by one and update my images so let's go with this one here i'm going to save that move on to the next one i'm going to change this as well and then the last one is going to be this one here click upload an image and save all right so this is now the last section now if you needed to we can always add our names here for our team members so this is going to be our team member so let's go ahead and add another text module here which has the names so i'm gonna search for my text select it and i'm just gonna start adding my names i can duplicate this a few times and just drag it into position and then we can just rename this okay and this could be mary there we go i'm going to save that so i think i may want to change this and uh make this slightly bigger and bold so this time i'm going to use something totally different and i'm going to hold down my shift key and do what is known as multi-select there we go so now i can go in here click on design text and i can change this now to semi-bold you can see that it's just an updated i can change the color as well and i'm going to increase the size a little bit okay so let's go with 16. great i'm going to save that so there's one quick tip okay so the next thing is to reduce this space here below this image so what i'm going to do now is i'm just going to drag this like that and then what i'm going to do is i'm going to click on these three little dots and then i'm going to hit extend image styles and then i'm going to choose to this section or this row and hit extend and now everything has been centered excellent right so this page is looking great now i'm going to save it now there's one thing that you may have noticed here and that is we don't have page titles here so what i'm going to do is i'm going to go into my template and create our page titles so let's save this and back over here to our theme builder i'm just going to close out of here add and i want this to be applied to all pages create templates and just back over here i want to say all pages and exclude the home page okay that's better let's exclude the home page and also the promo page great so i'm going to save that so now i can go into my body for all my pages and start making changes to this so what i need to do is to add the title to my page so i'm going to scroll all the way down here click on this plus button and i'm going to go with my full width and this time it is going to be post title there we go great so this is my post title i'm going to start with my background add a background color and now that i have my background color i can go in and start customizing all this information so i'm going to start here with elements so i don't need my meta i don't need my featured image all i need is the title and then i'm going to click over here and this is going to take me to my heading text which i'm going to change to pop-ins change the color and also yeah in fact i think i'll go with this or what i may want to do here is to go into my colors again and see what color i can use so i think that would work okay so now that i have this all set the next step now is to just uh customize my sizes and i'm gonna scroll all the way down here to spacing and on the bottom here i'm gonna add a bit of spacing and then on the top okay let's go with seven and then finally for my text here i am going to increase this to about 38 and we're going to make this bold as well actually that's a bit too much let's go with semi-bold okay great so i think that looks great i'm going to save that and then i'm going to drag this all the way to the top all right so that is my template now i'm going to save it so now when i come back to my page and refresh this notice what happens now we have this about us and this is going to follow our design pretty much across the whole website so now i'm going to save this page and exit the visual builder next i'm going to click here on services and again you can see now we have our services title and our contact uh title as well which is brilliant okay so on the services here i'm going to do something a bit different here so let's enable the builder and this time we're going to choose a pre-made layout so i'm going to go with um this agency layout pack and let's look at our services in fact this one here does not have a services so let's go back so i just want a layout that has some services okay so we have a case study here nope so all you have to do is to keep looking at um these different layouts and then see which one here has the layout that you may be looking for so i've settled on this one here i'm going to choose the services and use this layout so now that we have this layout over here what we can do is we can go in and start deleting all the information we don't need so for example this section here i don't need so i'm going to delete it and now we just have this area here which talks about what we do so you can leave this as it is and perhaps delete some of this is if this is a bit too much so let's go ahead and do that now over here we have this image section i'm going to delete that because i don't really need that and then now i have our strong points here so what we can do now with this section is we can go in and change the background color so i'm going to come over here go to background and we are going to change this background to something totally different so let's go ahead and save now we can go into our text and just change this by coming over here to design text and change this text color from light to dark i mean from dark to light and we also may need to change the text over here as well so i'm going to come over here to design target my text and i'm just going to change the color like that save that now moving on we have this email opt-in here which i think is beautiful and then all this information here you can change it and update this with your own text so we also have another section here that we may need to get rid of or perhaps even change so let's go ahead and change this one here we're going to change the background so i'm going to come over here and this is where we have this gradient so i'm going to start changing my colors here like that move on to my other color and this now becomes our main section i'm going to save that now this bottom part here looks really really cool so i may want to use this on my contact page okay so i'm going to delete this from here i may also want to delete this too much information and to be honest i don't really want this as well so let's get rid of it okay so this is our page now i'm just going to change the color of the background and then for this one here we're just going to keep it white there we go save that okay so this now is our about page now i know we have some shapes here so i don't want any of these shapes i want to keep things very simple so i'm going to go to my this tab here and delete that image and save now if you want to change these icons as well these are just images you can change these images to match your own design so that is our about page i mean our services page done we have our title here and we have all the information we need here for our page so we're going to save this so to move to our contact page first of all we have to save and exit the visual builder click on contact right so what we're going to do here is similar to what we did before so i'm going to enable and i'm going to now click on build no in fact choose premade layout all right so i'm just going to scroll through here and the layout pack i am going to go with is this one right here so i'm just gonna scroll through here and see how i can add my contact but um let's go with the services that we've just added so i'm gonna click on use this layout so in a moment you're going to see how i'm going to uh change this to match our design right so all i have to do is to delete all these sections one by one until until i get to this one here so this is the main one i really like it has the subscribe it also has the follow icons and it also has the location so what i'm going to do now is i'm going to add my form by clicking on this plus button regular so i'm going to add two columns and for now i'm going to add my contact form there we go so that's our contact form so i'm going to save this for now and then over here for the address i'm just going to drag this all the way down here like that because ideally i want my address over here okay so next i am gonna going to adjust this and change the layout to two thirds one third like that and now my subscription is going to be dragged over here so now i have my subscription i also have my follow icons and over here i have my location and the rest okay so what i'm going to do now is i'm going to um separate this by giving this a color so let's go in and do that i'm going to click on this gear icon go to my background and i'm just going to give this a slight color over here and save and now i'm going to drag this bottom one here to the top and now i have my form and i have my subscription and social follow on the bottom over here okay great so what i'm going to do next now is to give this the title so i'm just going to duplicate the one i have here on the bottom just to make things fast and then i'm going to drag it to the top and i'm going to say email us or send us an email okay i'm going to save that and pretty much that's our contact page i'm now going to save this page and these are all our pages for our site

Channel: MAK

Views: 8,564

Keywords: Augustine mak, divi 4.0 templates, Divi 4.0 template, Carflows divi, wordpress funnels, Cartflows tutorial, Mak, tutorLMS, tutor lms, online courses, create online courses, online course business, fluencrm, fluent crm

Id: TTuBGLk_ZjI

Length: 63min 18sec (3798 seconds)

Published: Thu Apr 22 2021