How to Make a WordPress Website in 2023 | Step-by-step Divi Tutorial

In this video we are going to create a beautiful  professional website. I'm going to guide you   through the steps one by one, to create this  amazing site. Exclusively for you I have created   this amazing PDF file as a checklist. With this  file we can easily track our progress as we can   check off the subjects we've already covered. And  if you want to resume later on, you can just press   this play button, as that will make you go to the  exact right time spot in this video. I'm also going   to provide you with all the colors we need to use  on this website. This way you can easily just copy   this color code and use it inside of our site. Let  me take a minute to show you what you will learn   and create in this tutorial. We are going to create  this amazing website. It has a interactive hero, it   has beautiful images,and of course interactive  elements, also with the buttons. We have different   kind of sections, we have projects, we have  beautiful animations running through it, and   of course a beautiful footer also in this site.  We're also gonna create a sub page which have   interactive modules also, and a beautiful button.  Call to actions, text, images, all copyright free,   pricing plans, we're gonna create a about us page  with beautiful different kind of sections, images   and all these amazing things. Of course we're going  to create a contact page which works really well   and send all emails straight to you. I'm also  going to teach you how to create a different   kind of header, like this. I'm going to show you how  you can easily change all things in your website.   I'm going to show you how you can use a drag and  drop editor, which works really amazing to create a   really powerful and beautiful website. I'm gonna  show you how we can create powerful templates.   How you can create project pages but of course  we're going to start from the beginning how to   register a domain name, and set up your entire  hosting, including a new email address. Then   we're gonna install WordPress and start  off with the best theme in the world, with   no other plugins, that enables you to create  the most stunning website, with this drag and   drop interface which really feels great.  Let's dive in right now! The first thing we do, we go to https://wpressdoctor.com/buildit/ we press enter. To get the PDF checklist, all images, the video and all color codes you just  fill in your name and your email address and  you press on 'Send me the free assets'. Follow the   link in your email to download the zip file which  we need in this tutorial. Open up the checklist in   the zip file. Then we're going to start with phase  one: the preparation. The first thing we need is 'Get   hosting and a domain name. If you already have  that you can skip this step, no problem at all.   Just click on this button and you will go to the  next one 'Install WordPress'. If you already   have that one, go to the next step and so forth.  The first thing we do is we click on this link   over here, to go to our hosting provider. Now we are  at the website of Hostinger. When you scroll down,   with Hostinger you cannot go wrong. All these  plans are really good for your first website.   So let's go with the two dollars a month, and add  it to our card. Next thing we will choosing is a   period of hosting. Of course the longer it is the  more discount you have. If you scroll down you can   see that for four years you only pay 115 dollars.  To make a comparison, I also have a hosting company   and I charge my customers 360 euros per year. So  that should give you a good idea. So with Hostinger   you are really good and really cheap. Next thing  we do is we fill in our email address over here.   And you can select your payment using credit  card, PayPal, Google pay, AliPay or Coingate.   We're going to select the country that you're  in. I'm in the Netherlands, and we're gonna fill   in all the details and then we're gonna press  on 'Submit secure payment'. And once the payment   has been processed we'll be redirected to the  control panel. The first thing we need to do is   set a strong password. Make sure to use all these  things and the longer the better. And press on   confirm. Alright then we have a premium web hosting,  let's click on 'Setup' over here. And press on 'Start   now'. Creating it for myself, I'm building it myself,  and I'm going to create a Business website. Do you   need help? No thanks I know exactly what I'm doing.  And on this screen we press over here Skip, create   an empty website'. If you already have a domain  name you can use an existing domain, or you can   buy a domain with Hostinger. Well in our case we're  gonna buy one, so we're gonna press 'Select' and then   fill in your domain name. Well there are all kind  of domain names available: .online or whatever   you want. Just choose your domain name and  press 'Buy now'. Select the billing period, in our   case three years. And press complete payment. It's  going to process it, and then we press on 'Next step'.   Then we need to fill in our primary details. Let's  fill in our country, in our case the Netherlands.   And it's a personal website, so press 'Next Step'.  Fill in all the details and then we press 'Finish   registration'. Now this is very important, now  we can choose your server location. You have to   choose a server which is closest to your target  audience. Very important, you cannot change this   anymore later on. If you are selling to people  in Asia, but you're from the United States you   should select your server location in Asia. In  my I'm going to select the Netherlands, because   there's where I am, and there's where my target  audience is. Press on 'Change' and press 'Finish setup'.   And now Hostinger is setting up our entire  domain name and our web space. Well done! We are   ready. We go to the control panel over here. Manage  site. And this is the dashboard of Hostinger. Before   we can set up WordPress we need an email address.  We go over here, and press on manage. We're   gonna use the free email, over there. Press select.  Email plan was selected. I'm going with matt@ divitutorial.online. Create a strong password, and then we go  enter your password recovery email address. That's   your own email address. Just in case, and press on  create new account. Alright then we get warning and   it says "It cannot send or receive email until you  verify your domain". So the next thing we do is you   go to your email, and then we have a email which  says "Important! Verify your contact information" this   is really important. If you don't do that your domain  will not be active. This is normal procedure with   all hosting companies, because they need to verify  that this email is actually working. To validate   it, click on this link. Then it has been verified, well  done. Now don't be alarmed on your dashboard you   will see this: "Domain status: not pointing and  your domain is not connected". This will take a   couple of hours, don't worry we can still continue  with this tutorial. Well done! You have just got   hosting and a domain name. Congratulations! So go  to your checklist and check the first one off: "Get   hosting and a domain name". Excellent job! Next stop:  Install WordPress. Alright we have an email address   so let's install WordPress you go over here to  website click on it and go to Wordpress then   we're gonna press install over there give your  website a title in our case defeat tutorial for   your administrator email I would really advise  to use the newly created email address in our   case that's net at DV tutorial add in your name  and really strong password again and press next   this is the latest WordPress version select your  language I create English and we're gonna choose   always update to the latest available versions  that's the most safest way to go press on install   let's go to our dashboard over there well done we  have now installed WordPress go to checklist and   check it off excellent job if you now go to your  own website you just registered you will see this   this is our website for now well it's actually  not a website it's just a sample page with just   this we're going to create something awesome but  before we can do that we need a system inside of   Wordpress that can create awesome websites now  the next step is we need to get Diffie so we're   going to click on this link over here to go to  the website and then we go to the website of Divi   itself oh now we have the Divi anniversary sale  with 20 discount I don't know when you see this   video but it might be that the 20 has already  changed to 10 it is because this sale is only   twice a year now you can choose to have a yearly  access plan or a lifetime access plan well think   about it the lifestyle is just a one-time payment  and you have the rest of your live updates I'm   really enthusiastic about that so let's press on  sign up today over here fill in all your details   and click on complete registration and after you  have signed in you can download the Diffie theme   over there click on it but before we go install  it go to account and click on username and API key   over there leave this tab open for a bit first we  go install the Divi theme on your dashboard you go   click on here edit website and then you're being  logged in to Wordpress automatically well done   we don't need to do all these things just go to  appearance themes over there and then press on add   new press on upload theme and select the Diffie  we've just downloaded and press install now over   here then press activate while we're here we can  also clean up WordPress a bit so go to real theme   details over here and click on delete because we  don't need this click on this one also click on   delete okay and the next one team details delete  okay then we're going to close all these messages   and the next thing we're going to clean up is  the plugins so we go to plugins installed plugins   here are a lot of things we don't even need so  we're gonna select them all we're gonna press   first deactivate apply we're going to select them  all and we're going to press on delete don't worry   you can always put them back if you ever need  them press apply and press Ok well done now we   have also installed WordPress there's only one  thing we need to do we go to Divi over here we   go to theme options then you go to updates over  there click on it can we go back to our elegant   themes website we're going to copy our username  over there and fill this one in over there press   paste you're looking for this button generate new  API key click on this one the name of your website   right now and we're gonna click to copy then we're  going to fill in the API key over here press paste   and press save changes it will now check your  API key and if it's okay you get a green check   mark all good you have to do this only once so  well done DV has been installed successfully   the next thing very important we need to do is  go to settings and go to permalinks over there   we're gonna change the permalink structure  to the post name right there this is really   important scroll down press save changes and press  save changes again because we need to flush it   congratulations you have just completed phase one  the preparation so go to your checklist and check   off get Divi and we're gonna start with phase two  we're going to build the entire website this is   going to be great all right let's get back to your  WordPress dashboard over there you can close this   message if you want a full Tour on WordPress what  all these things mean on the left side then check   out this video I've created especially for that  just so you can get to know WordPress but we are   going to Diffie over there and we're going to  the theme Builder right there the team Builder   is a great place where you can create templates to  use on different kind of pages um certain pages on   whole pages is really powerful so let's click on  ADD Global header build it press on start building   now this is the place in Divi where we can build  our header the top side your menu the first thing   we do is we click over here to create new rows  within DV you have a lot of flexibility with all   kinds of column structures and rows and even then  you can change them for our website we're gonna   use this row over there click on it and then you  can add in modules Divi offers a lot of modules   you could use on every kind of website we'll be  using a lot of them in this tutorial the first   thing we need however over here is the menu module  you can click it over here or you can type it in   man and now we can click it these module settings  you can drag them around or you can just press   on this button and it switch to the left side the  first thing we do is going to upload a logo so we   click on Logo over there I'm gonna press on ADD  image go to the zip file you've just downloaded   with a checklist and also in there is a is a  folder called images in the images folder we go   with the logo build it press open I've also added  in the Photoshop file if you just want to change   it yourself I'm perfectly fine with that so for  SEO purposes remove the title and create the alt   text which has a logo and then your brand name in  our case build it and now we press upload image as   you can see it's really big right now once you've  done it scroll down a bit and choose the size to   be a medium and press upload image then we press  save it over here save changes and then let's   press save changes then we go over here and we're  gonna press on this plus icon we're gonna add in   a button right there click on it and the button  will be contact let me go to a link and slash   contact like this and then we go to design we go  to and we're going to use custom Styles over there   the text size should be 15 pixels the color of  this button should be White and then we're going   to change the color of the background these are  just normal colors you can use and if you click   on this one you can add even more or you can  just click on this one and you can pick them by   yourself but what we're gonna do is we're gonna  use Global colors the really neat thing about   global colors is when you ever want to change them  all the colors used in your entire website using   that color will change in an instance and that is  extremely useful in the long run the first color   we need right now to add in is a orange color so  we click on this one then go to the PDF file which   is called color codes then go to your orange  color and copy it and we're gonna select this   one and paste in the orange color and press on OK  then we're gonna press on this plus icon over here   click on it and you click on this plus icon so  that appear over there and we're also going to add   a hover color click on the hover icon over there  click on Hover and then we're going to add in a   new Global color so we click on this one paste it  in press OK and then we press on this plus icon   over here and then we have this Global color  this is the normal button when you hover over   it it becomes darker really nice then we scroll  down we're going to change the Border radius to   5 pixels and we're going to change the border with  to zero and then we're going to change the button   font to Roboto over it and there right and then we  scroll down and we're going to change the button   icon to a middle icon over here look at when you  hover over it you'll see this amazing nice icon   and I will scroll down and we go to spacing we're  going to give it a little bit of padding let's put   it over here 25 pixels left 25 pixels right link  it over there and then we're gonna press save   well done and we have created our orange button  well I like the button but I think the font is   not good enough so we go back to button let me  go scroll down we're gonna make the font wait   bolts of over here oh this is way better press  save what we see right now is that the header is   really big so we're gonna change the first first  we click on the section settings over there and   then we go to design box Shadow first we're going  to add a little shadow on the low side over there   so we'll see what we're doing let me go to the  spacing button zero and top zero very nice press   save it and then we also go to the row settings  over there we're gonna do the same thing design   spacing button zero and tab ceiling like this  press save changes now we go to menu settings   for there we go to design we go to sizing we're  gonna change the logo width to 200 pixels over   there make sure to go into your settings of the  mobile phone over there and to change this to 175   pixels that's great let's get back to desktop  view over here and then we go to the menu text   today we're going to change the active link to  the global color this one and we scroll down   we're going to change the menu font to Roboto  and we scroll down we're gonna change the text   color of the menu to a new Global color  so we go to the global colors we're gonna   add a color just pick the color from the PDF  the dark blue save it gonna add it in over there   this looks really good then we go to the  alignment we're going to align all the   text on the right side then we go to drop  down menu over here we're going to change   the drop down menu background color to white  the line color we're going to make this blue drop down menu text color also blue and then  it dropped our menu active link the orange   and then the mobile menu background should  be white and a mobile menu text color should   be our blue like this very nice there we go  to icons shipping card icon color should be   icons should be in blue hamburger menu also in  blue this is starting to look like it then we go   to Advanced custom CSS and what do we do over  there we're gonna place in margin right is 20   pixels like this to give it some more space and  we're going to save changes very nice now I want   this button to be in the center of this row how  do we do that and we go to the row settings go   to design we go to sizing we're gonna press  equalize column Heights over there and then   we go to content we go to the second column over  here and go to Advanced custom CSS her line itself   is Center well done save it save it look at this  beautiful you might also want people to search on   your website for certain pages so we go back to  the menu module and then we go to elements over   here we're gonna enable this show search icon  press save then we're going to save the header   now I want this header also to be sticky  on top when I scroll so we're going to do   the section settings we go to Advanced we  go to scroll effects over there and then   we're going to pick stick to top over there  press save and then save it and now it will   stick to the top when we scroll our page all  right we're gonna close this one over here   but then don't forget to press this button  save changes all right now it's time to create   our footer click on the add Global footer button  over there and build Global footer for the footer   we're gonna create something really beautiful so  we're gonna click on this one we're gonna use five   columns over here image over here and we're going  to upload our white logo look in your files folder   and then we have the white logo make sure to copy  alt text very neat press save we go to section   settings go to background we're going to make it  the global blue one over there really nice save it   then what are we gonna do we're gonna change the  width of the row click on the row we go to design go to sizing we're going to make it 1280  pixels like this save it now we're going   to add a new row over there just a normal  row with a divider inside of it click on it   go to design you go to the line we're going to  change this color to border light color this   it looks really neat just a small accent press  save and then we see that this row is not the   same size so go to row settings design we go to  sizing I'm going to make it 1280. to use this   size on all the rows we create we're going  to change this template up here to presets   click on it row default we're going to click  on this one update presets with current Styles   and we say yes now all rows are being  changed to 1280 it's our new standard   press save then we're going to add in  another row like this with also five   columns in the First Column we're going to  add in a text like this and the text will be   context build it then we're going to change it so  I'll hover my mouse over it and press this icon   over there and now we are at the right thing to  change everything we're gonna change the font to   Rubik like this then we're gonna give it the  white color and the size should be 16 pixels   save changes what I want to do is duplicate  this title to have it in every single column   and then change the content you can do it this  way clicking on duplicate it and then drag it   and drop it over there but what you can also  do is just go to the row settings delete the   other three columns and just duplicate  this column here we go now we have the   same result but a bit faster then we're going  to add in over there a blurb module like this   and our title should be empty and here we're  going to type in the address of our business so   the address is to remove all these margins you can  just press delete and press shift enter on your   keyboard so that it will fit all together there  we go change the font to Roboto and we're going   to change it to also 16 pixels and then we're  gonna change the color to a light gray so it's   not gonna be white so click on it over there  save it now we have the other gray also there   excellent now what I don't want to be here I don't  want to be in both so I'm going to make it a light   there we go to content we go to image and icon  we're going to use a icon for this and and search   for the thing location and then we're going to  use this beautiful icon then we go to design image   icon and I want this to be placed on the left  side the color we're going to use is the gray   color change to width a bit it's not going to be  that big is excellent all right save it let's copy   this entire module over here and then we're going  to edit it and then we're going to change the body   text to a phone number so it's going to be like  this then we go to image and icon and we type in   it's our phone just select the icon that  you like most and last but not least we   go to link over here we're gonna make this  actually an actual number so type in tell   then your number so it's gonna be zero zero forty  one two three four five six seven eight nine   this way is an actual hyperlink that people can  click on their mobile devices and start calling   immediately or also on your desktop computer press  save it then we're going to duplicate this module   we're gonna change this and then just add  in your email address let's go to a link   and also here you press mail to and here you  go and then your email address and then we   go to image in icon and we're going to type  in Mill and just pick the icon you like best   I think this one suits the best it's really start  to become something over here we can create all   kind of footer links that are important for a  business for example here we have services we're   gonna press the plus icon we're gonna create  a text module over there in the text module we   have different kind of services really amazing  things just press on the brush icon over there   we're gonna change the text font to Ruby again and  we're going to use our Global gray color what I   advise to do is when you see this first row it has  a little bit of spacing and then the letters start   we can do that with all the rows and just go over  here to spacing we're going to add some margin to   the left from 20 pixels okay save it and then what  we're going to do we're going to copy this thing   and we're going to place it over there but then  we're going to change this one our top products   and then we're just going to create some different  kind of products really great save this well we   can do that with all of them right it's really  starting to look like a beautiful footer   what are we gonna do we're gonna copy this entire  row duplicate it and then drag it over here so we   have another divider that looks great because the  last thing we are going to add is of course a new   one with also five of them and because I'm a  little bit lazy I'm going to duplicate this   drag it over there and then I'm gonna change  the text and we're gonna change this layout   we're going to make it light and we're  going to make it under aligned like this   and when I'm gonna make it into and hold on we're  going to make links in it in just a second save it   then I want this also to be over there and  change it to the terms and conditions we're   also going to create one over there but  this time it will not be a link it will be   next with us so it's not gonna be underlined you  move it and I also want it to line out on your   right side like this save it and we're going to  add it over here a social media follow and then   we can add in all the networks that we have we of  course also going to add in LinkedIn over there   don't forget to add in a link and press save and I  like the button style there or good so we're gonna   leave it like this all right I think this looks  pretty good if you also want to have a copyright   notice just copy this one place it over there and  we're going to change it and what are we going to   do is we're going to press this button over there  and then we have the current date click on this   one I'm going to change the date format to custom  I'm going to type in the Y I guess you see what's   happening it's the current date and it never  has to change here we type in copyright build it   space and we have this press save then we go to  design we go to text we're going to remove the   underlyment and then save it this is a really  nice footer we're gonna save it and now we're   gonna close this one and press save changes  again excellent job we have just created the   header and the footer so go to checklist and  check this header and footer off let's go to   the next one create a home page now when we have  this in place now we can start building our home   page go to pages and then we have two pages over  here we're going to select them we're going to   press move to trash we press apply and then you  press add new over here close this dialog first   thing we do is we're going to add a title and the  title is home and then we're going to press on   publish and use Divi Builder over here and we're  going to start building over there as you can see   now our beautiful header and our beautiful  footer has already been insert into our site   well done we're going to create a caching hero  to do that we're gonna use a new row over there   in this row I want to have a text module like this  in the text we're gonna create something like your   slogan changing the world for example now to stop  us from changing every single time the default   text font what are we gonna do we're going to save  this save this page just for now you go over here   and we go to the theme customizer click on it  then we go to general settings over there and   we go to typography any typography we're gonna  change some things because it's Gonna Save Us a   lot of time what do we want the normal text size  will be 15 is standard size the header text sizes   will be 36 the default theme found for our headers  should be Rubik so we're going to scroll all the   way down to the r Rubik where are you oh there's a  lot of Rubiks just use this one and the Body Found   should be a Roboto over there then the body text  color should be always this color you can grab   it from the you can grab it from the PDF and the  header text color should be the same always this   one alright then we press publish we can close  this one then we are back at our homepage and   what do we see when we go inside of this text  module you'll see that the font has already been   changed you'll see that the font has already been  changed but it's still on default that's excellent   if you want to change your font throughout your  entire website just change the settings in a   theme customizer alright let's continue with  our beautiful design we're gonna put this text   in the center of our screen over there then I  want the text color to be our Global gray one   just hold on it's gonna be look awesome and we're  going to change this to uppercase we're gonna use   the text font light are we gonna get some little  letter spacing over here oh this looks really nice   save it we're gonna add a new module but the  problem is I cannot click on the gray icon over   here that's strange well if you can't click on  it because for some reason just go over here to   the options all the way to the left you have the  Diffie wireframe view click on it it's a section   arrow and text just press on the plus icon right  now and we're going to add in a text module over   here and go back to the normal View and then we  type in the text and we're gonna select this text   and make it a H1 over there then we hover over it  we're gonna place it align it in the center we're   going to change the sizing of this thing to let's  say 60. this is a real great header before we   change anything else go to your mobiles view over  here click on phone and then we'll see that 60   that 60 might be a bit much so a mobile  phone we're gonna go for 50. what are we   gonna do we're going to change the heading  text color to white over there press save   let's create a awesome hero what we're going  to do is go to the setting of this section   settings go to your background then we go  to background video add a background video   and choose the video file I placed in a  zip file called background hero homepage   press edit video and upload it to your media  library here we go it's just 4mb so that's great   press upload video once you've added in your  MP4 scroll down and make sure to edit your   width and your height the width is 1920 and the  height is 1080 very important present safe then   the next thing we're going to do is we're  going to add a new row over there with two   columns right there what I want to have here  is a button the orange button over here well   we can add it in in two ways first go to your  edit header template and you can just click on   copy module you can do that like this and then  go back to post content and right click here and   press paste module over here now we have exactly  the same module over there but what we can also   do of course we can just duplicate it and drag  it but what I want to teach you is you can also   save it to your library press on this one then  we're going to give it a name like orange button   now we're going to press save to library now when  I go back to my post content I click on this add   module and I click on ADD from library there is  our orange button click on it use this module and   there it is over here now that's really useful  we're gonna change this we're going to design   we go to alignment and I want to align this on  the right side then we go back to content we go   to text and I want text to be see our portfolio  change the link of course to folio and then we   go to design to button and I want this button  to be actually a little bit bigger so we go to   pacing and I want the padding on the top to be 10  on top and 10 on the bottom like this save it and   then we're going to duplicate this one and drag it  over there let's change it the button text will be learn more about us go to design go to  alignment and put it on the left side   then we go back to link we're going  to change this to about us of course   then you go to design we go to button gonna  create a really nice clean button the text   color should be white but upon hovering I want  this color to be black and the button background   should be white on Hover and on desktop it  should be transparent and then we're going   to change the button board width to 3 pixels  and we're gonna make it white great when you   have Rover this happens really amazing so scroll  a bit down we're gonna change the icon to this   one yes this is better press save changes then  we go to this button because as you can see now   they're not the same size anymore three options  design first we're going to change the icon   to this one I'm going to scroll down go to  spacing we're going to add a little bit of   three pixels extra because of the border on this  one like this amazing save it really nice then   last but not least what I want to do is you go  into the section settings we go to design we go   to spacing and I want to have more padding 100  padding on the top and 100 on the bottom so that   our movie has more space to show but then I also  want these two buttons closer to each other that's   possible just go into row settings go to design  sizing use custom color width and change it to two   save it I think the background video should have  some more space so go back to your row settings   and go back to your spacing about the 50 pixels  to top and 150 pixels to the bottom let's save it   now how's that for a beautiful hero section then  we're going to continue with our website we're   going to add a new section over there I click  on a regular section we're going to use the   single column row over there and the first thing  we're going to add is nothing because we're just   going to duplicate this one and drag and drop  it over there in here we're going to place a   text that's from from your business what do  you do in our case it's gonna be zero two   tutorials I guess save it then we're going to  duplicate this title I'm gonna drag and drop   it over there but we're going to change this to  not H1 but H2 because we need more hierarchy in   the website press on this brush icon we're going  to align it in the center we go back to content   text we're gonna type some other text let us help  make your website dream come true press save then   we go to then we click on the brush icon now for  here we're going to change the heading size to 36   like there beautiful and we're going to scroll  down we're gonna add in a text module over here   and we're going to type in some little text here  we're going to change the font to it's already on   Roboto so this is awesome then we go to sizing  and now we're going to change the width to 600   pixels and align it in the center also make sure  to align the text in the center and press save   then we're going to add a beautiful image  so click on the plus icon and type in image   over here in the zip file you'll find a  image called build it or build it home   ict.png let's use this one make sure to place  in the correct alt text and press upload image   the size is way too big so what are we going  to do is go to design we go to sizing we're   going to make the width 750 pixels like this  so we're going to align it in the center   great then we scroll down we're gonna create  a new row over here with three columns in here   we're going to add a new text module we're first  going to create a title which says create the most   stunning website then we're going to change it  and then we're going to make this a H3 over here   design heading text H3 the font is already  correct but I want the size to be 19 pixels   and the alignment is great the color is great  so keep it this way save this one then we're   going to add an another text module right there  text and the text will be like this then we're   going to style this text click on the brush icon  default is all good we're gonna make it light   are we gonna scroll down we're gonna make the  size 15 pixels that's great and the text color   is excellent now what are we gonna do we're going  to save this now we go to the row settings we go   to the First Column over here we go to design  and we go to add a box Shadow over there click   on the first one like this now this looks  absolutely amazing however it's a little   bit too strong we're going to change the press  strength to make it just a little bit smoother   like this and we're going to change the color  we're going to make the color a little bit more   less intense excellent then we go up and we go  to spacing we're going to give it a spacing on   the left side of 25 pixels also on the right  side and also on the top side and on the bottom   now this looks more like it and then we save  this column then we're going to delete these   two columns we're gonna duplicate these columns to  there then you go to design you go to sizing use   custom gutter white and change it to number two  then I want the width to be more smaller because   in this section we have a really small section so  we're going to do with and we're going to create   950 pixels make sure to also check it on your  mobile phone to see how that works on mobile   as you can see this is going wrong on our mobile  phone so we're going to change this to 90 percent   over there this looks way better save it below  this we want to have a call to action so we're   going to add on this a normal row and in there  we're gonna press add from library the orange   button use this module and we're going to change  this we'll learn more about us the link should be   about us and we go to design align it in the  center but then I can see that it is just a   little bit small so we go to design we go to the  button of course we're going to change the icon   first to this one way better and then the spacing  should be also 10 pixels on top and bottom and   let's make this also 35 why not whoa sorry 35 like  this great press save and we're going to save this   page then I want to create a new section below it  but it's going to be white to change more contrast   to them we're going to change this section over  there we go to background we're going to change it   to the other color from your style sheet it's just  a little bit broken right we're going to add it in   as a global color over there like this you might  not see anything right now but it's definitely   there because we're gonna add a new section  regular so you can see there is a difference   in color right here and that's exactly what I  wanted and we're going to add a new row I'm gonna   close this one because we're going to duplicate  this module press copy module or just hold the   button press Ctrl C and then just hover over the  plus and press Ctrl V on your keyboard it's also   there really amazing by global clients save it  what I'd like to do here is ADD here different   logos from other companies so we're gonna click  on this Pro Plus icon I'm going to add in four   columns over there the first one is a image right  there we're gonna upload logos from your clients   so we're gonna press upload and we're going  to just upload all four clients to the media   library like this these are just completely random  logos I don't know why I've even used them but   we just use them it's for the idea save it edit  another image like this and use this one also or   you can just hover over it press Ctrl C on your  keyboard press Ctrl V over there it's a little   bit faster and through it in right there Ctrl  V on your keyboard and change this to this one   really great then we're going to create a new row  over there this one we're gonna add in a block   module right there opening a Blog module and we're  going to use the post type projects over here   in the projects we will have three post counts  the date format is great and they show excerpt   I'm gonna use both excerpt that's okay all right  press save this before we can style this thing   we actually need projects to Showcase to our new  customers but let's continue first with our home   page below this thing we're going to add our  orange button over there and the orange button   will be in this case see more client reviews  design it align it in the center and go to the   button we're going to change the icon to this one  and we're going to add some more spacing to the   top in pixels top and 15 bottles change this to  35 great call to action alright that's it for this   section let's create a new section we're going  to create a new section regular with a normal row   closest one first we're going to give this section  a new color background color should be our Global   blue color over there this is gonna look so  great then we're gonna use I want to copy this   module so I scroll down and paste it in over here  paste module and I also want this module and I'm   going to press copy paste it in over here first  thing we do is we're going to change this text to   save changes then we're going to change this  one of course first thing we do is change   the font to White go back to content text and  change this to four reasons to work with built   it then we're going to add a new row with four  columns because we're gonna create four reasons   do that we're gonna create blurp modules over  here and the first title should be more sales more   conversions we're going to type in some real  great content over here and then of course   we're gonna click on this one the title it's an H4  that's okay we're gonna make it also white and we   gotta make it seeming bold then the text itself  also gonna be in white and it's gonna be a light   body found go back to content you gotta change  the image icon because we're going to use a icon   when you click on this we see all the icons  that Divi has so what we what I'm looking for   is I want to have I want to have a graph that's  going up like this one is a great use this one   and we're going to change the color of this icon  design image and I can we're going to change it   to our Global Orange let's change this to 70  pixels and then once the image icon to be on   the left side save it what are we gonna  do of course we're going to duplicate it   to the next column of course I'm going to give  them four reasons so that's what we're going   to create right here now we're going to change  the icon imagine icon and I want to have this a   persons let's do this one all right then we're  gonna copy it again and also I'm going to change   the icon and that's it all right let's save this  one now what I actually want to do is I want these   columns to pop just a little bit smooth out from  the background to do that we go to the settings of   the section go to the background we have changed  this to this one well what I want to do is copy   this one just select black for example paste it  in again and then we just go make it a little bit   darker like this not too much just a little bit  like this great then we go back to row settings   and we go to the column we go to the background  we're going to change the background to our Global   discolor you see what's happening that's great  then we go to design we go to spacing on the top   heading we're going to give it 25 pixels on the  bottom left and right side also the same now this   looks really nice if I want to copy this I just  press save I want to copy these styles to all   the other ones how do we do that there is a way  for that just click on this one copy item Styles   and then we press on here paste item styles also  here paste them paste them what you can also do   is click on this one and press extend item Styles  it works the same extend item styles through this   Row for example press extend and then it's all  done the only thing which you see now is that   these Stacks are a little bit smaller so you have  space below here you go to the row settings go   to design sizing and equalize column Heights  save it and now they're all exactly the same   again I want a big button over here a call to  action we're going to add a new row over there   like this and then we're gonna copy this  button press Ctrl C on your keyboard let's   control V over here we're going to change it to  to work with us something like this really great   all right well done last thing we're gonna create  on the home page is a call to action section   add a new section it's going to be a regular  section we're gonna have a just a normal column   We're Not Gonna use this we're just going to  copy what we've already built so copy this title   paste it in over there copy this text and  we're gonna paste it in over here like this   we're going to type something like  want to improve your online website and   marketing and below this we're going to copy this  little thing we're going to change this text to   our phone number plus 40 one two three four five  six seven eight nine and then we're gonna have a   five in here and then it says tutorial  2000 and then we're going to change this   to Links of course so you click on the  link over there the URL should be tell and also this one also a link to your  address but then we're going to style   it so we go to design you go to text and we're  going to style the hyperlinks over there we're   gonna make them a little bit smaller and then  we're also gonna make them our Global orange   color then the normal text I do want the global  font to be disgrace grayish so that this pipe   is greenish save it and again of course we need  a button so we're gonna paste it in and it says   contact us today now you can save your homepage  press Ctrl s on your keyboard or just the menu   or open the menu over here and press save right  there now you have a beautiful home page well   done now you can press exit official Builder  and look at your beautiful result of your first   home page well done you've created a stunning  professional home page with call to actions   different sections and a beautiful footer and a  header I'm really proud of you now what we need   to do is create projects so we can fill it in over  here and we're going to exit the visual Builder   just look at this beautiful website isn't this  amazing yes you can be proud of yourself well done   well done let me go back to the dashboard over  there then we go to projects over there and it's   completely empty this is the place where you can  build your portfolio so we're gonna press add new   we're going to create one project and then  duplicate it to make more one of the titles could   be you can just give it any title you want let's  use shell in this case and you're gonna press   on use Divi Builder and we're going to build it  from scratch what are we gonna do we're actually   gonna use different kind of things from our home  page because you can always recycle layouts from   your own website open up your homepage we're not  going to build this entirely from scratch we are   going to recycle different kind of elements from  our home page that is the way to get consistency   throughout your website and to preserve the  right style so what are you gonna do you go to   diff tutorial go to your dashboard in a new tab  over there on your dashboard you go to up here   and press visit site and then you press on home  and then we press on enable visual Builder right   here now you have two tabs open with your project  and the home page the first thing we do is we're   going to copy this module press copy module  go back to your project page create a new row   and paste in your module so you can copy and paste  from different tabs Works amazing the text in this   case is save this change then we also want to have  this title so I'm pressing against copy module   and over here I'm gonna paste it in like this the  title can be anything then we're gonna add in the   logo image shell in this case upload it design  it align it in his Center and also change the   sizing to 100 pixels like this pretty great and  we're going to add in a text module over there   but you don't want to design it yourself so we're  going to copy this one and paste it below that one   we're going to change the introduction of this  text or I just add a little bit of text and of   course below that we want to have a image so we're  going to add in an image gold shell website it's   just for a solution go to design go to alignment  align it in the center save it when we load it I'm   going to create three columns just like our home  page but then a different style so we're gonna use   this row just copy this entire row and paste it  in over here like this that is just amazing and so   easily then you also can just click over here and  just change the text challenges solution results   and then we can add another section  over here regular section a regular row   but this section I want to have a different color  so we're going to change the background color to   our broken white over there beautiful and then  we're going to add in of course this one so copy   it paste it in I'm gonna tell a story about we  gotta tell a story about the challenges and use   this one paste it in over there change it save  it then we're gonna make three columns over here   and in these columns we're gonna use the blurbs  created in the home page so we go over there we   go over here we're gonna copy this entire  thing copy module go back to here I'm gonna   paste it in of course you cannot read it we can  change it change the color to our Global dark blue   and this one change the color also to our Global  dark blue right there and of course we can style   this one and make them all cheap we're going to  change the icon to a broken [Music] URL like this then we're going to copy this module paste it over  here we're gonna change to create another story   copy this module basted in over here  our project is almost completed we're   gonna add two more sections to this one  add in a new row add an irregular row   I'm going to create a two column layout  this time the first one is the title we're   gonna paste it in over there and of course the  text paste it in over here but the background   of this one is going to be our broker our blue  like this so we're going to change the text to   White and also this text and you guessed  it right we're gonna change it to White   first of all we're going to change  this title to align it on the left side   save it and also this text we're going  to align it on the left side like this over here we're going to paste in a beautiful  image are we going to change this text to what was   the solution well really easy we're gonna add in  an image beautiful card and I'm gonna give away to   everybody we're gonna add an image of the solution  I provided for my client and Hyperion hydrogen car   and again we can use all these blurbs to over  here we go to our home page because here we have   the right blurbs we want we're gonna copy this row  and we're going to paste it in over here like this   we go to this one we go to the background  we're gonna select this color over here   we're going to create a new one like this and  we're gonna make it a little bit darker over there   we're gonna save this to the global one like this color I don't know what is Black come from but  all right we use this one save it and we're gonna   change all these ones so of course our icon very  nice well you get the point then we're going to   copy this row because we need of course a call to  action let us also make your project successful and then we create another section which is  called a regular section with a regular row and we will copy this one just paste it in over  here also use this text paste it in over here and then we're gonna talk about the results  and of course we can use these blurbs again   so we're gonna copy this row and paste it in  over there paste it in and then you can change   of course all the icons and the things there  we have the final section over here which says   then we have of course the call to action which  is actually this one paste it in paste it in which is want to learn more press save and what do we need of  course a beautiful button over there there protect us right away and the background  of this section should be another color so we're   going to change it to our broken White this is  just amazing now we press publish before we can   tune the home page with old projects what  we need to do is go up here to press edit   project right there they will be redirected  to Wordpress dashboard but what we need to do   is add a featured image we're gonna press set  featured image we're going to use the logo of   this particular project press set featured  image and we're going to press on update   and we press on the WordPress logo so  we go back to projects so we're going   to add more projects how do we do that well  we press just add new we add in a title total   and now we're gonna press use Divi pillar in here  we're gonna press clone existing page over here   then we're going to your existing Pages shell just  click on it and press use this layout that's all   we need to do now it's there we press publish  and we press over here edit project we're gonna   set a different featured image this was about  total I think let's set it in and press update   then we go back we're gonna press add new we're  gonna add another one set the featured image to BP   add to title BP use the Divi builder then we're  going to clone existing page choose our page   the shell of course use this layout  and then we can publish it again now of course on a real website you're gonna change  every single project by itself that's logical   press exit visual Builder and now we go back to  our home page in our home page we're going to   press exit visual Builder also and when you now  scroll down what we will see is this this doesn't   look very nice so we're going to change it we're  going to press on enable visual Builder over here   and I will scroll down and then we go change this  module the settings of the blog module now the   first thing we do is we go to design we go to the  layout we're going to change this to a grid over   here now this looks way better then we go back  to content we go back to we're going to change   the elements I want to have the featured image  that's great I want to have a read more button   I don't want the author and I don't want to date  and I also don't want the categories of this one   what do we want to do we want to show the excerpt  and the pagination now we can style it the first   thing we do is we're going to change the title and  we're gonna change it to our Global orange color   like this and font size should be 20 and then the  font weight should be semi bold like then we go   to use case click on it make it light over there  and as you can see this text is just a text from   our website we still need to change that in our  excerpt let's change the read more button over   there the font is great let's make it Orange and  let's make it both over there the next thing we   do is we're going to remove all those borders so  we go to design we go to borders and we're going   to remove this ugly borders and what we do want  to do is we're going to add a box Shadow to it   this one but then a little bit more transparent so  it's not that intense this is great maybe use this   border that's also great this is really nice  but what I don't like are the featured images   the logos are already here so what do we need to  do is we need to change those to something else we   go to x official Builder save and exit because I  didn't save it it asked do you want me to save it   then we go back to our dashboard we  go back to our projects over there   I'm gonna press on edit and then we're going to  change this featured image for something else   let's do the BP nature image over there great  updated go back to our projects the total edit   featured image upload file really nice pictures  use it updated and then shell of course edit it   and we're going to change another  fun beautiful pictures and update it   and we go back to our homepage you will see that  there are different kind of images over there   so I'm really happy with this homepage but I want  it to be a little bit more interesting to scroll   through it so what are we gonna do I want these  columns when you hover over it to pop out so we're   going to row settings go to your First Column go  to design go to transform and when you hover over   it this one I want it to be the size of 110 like  this press save then we're going to extend these   Styles extend item styles to this row press extend  anyway save it then when you save it and your Echo   Shield Builder this is what we see now when you  hover over it this is really nice however there   are some more effects you can do of course let's  say I want this title to fade in when I scroll   down go to settings go to design go to animation  just fade it in like this press save amazing   scroll down four reasons to build it well let  them open up one by one press on this one go to   design go to animation I want this to fade in and  I want it zero delay press save the second column   also go to design animation I want it to fade  in but with a slight delay of 500 milliseconds   save it the third one go to design go to animation  fade it animation delay 1000 milliseconds   and then the fourth one design animation fade in  we're gonna have a delay of 1500 milliseconds like   this now save this page let's see what happens now  when I scroll down my awesome website you will see   that this title fades in well now scroll down my  awesome website you will see that this title fades   in and also these things are just fading in very  nicely let me see that one more time just refresh   it here we go well done your project space has  just been completed so go to checklist while we   can just check off product page and also the home  page because we've created them simultaneously   excellent job let's go further to create a sub  page just go to pages over there all pages we're   gonna add a new one the page we're going to create  is called the services press use division Builder   and build it from scratch over there then the  first row we're going to use is this normal   Road we're not going to add in any module that  what we're going to do is we're going to open up   your website in a new window when you open up  your own website in a new window this is what   we see Hello World this is not our website page  so you go back to your dashboard over there we   go over here to settings then we go to reading  then change your home base displays aesthetic   page we're going to select our home page over  there and we press save changes well done now   go back to your website and how your home page  is this beautiful page we've just created all   right what we're going to do we're going to press  enable visual Builder over there let's just save a   few titles and all this stuff to the library I'll  hover over this one and press this one save module   to library we're going to call this one upper text  great save to library we're gonna save this one   H1 title save it we're also Gonna Save  this button so we're gonna save it transparent button save to library we scroll down  we're going to save this one which is a H2 title   save it and we're going to save  this one paragraph save it all right   we're also Gonna Save this row save it  with white three columns for there save it   scroll down and we're going to save this row  also which is a dark four columns columns   save it then we go ex-official Builder we're  going to close this tab back to our new page   over here we're gonna press the plus icon add from  library here they all are let's add the upper text   Gray over there use this module and we're gonna  change it our surfaces to change your business   save it another trick I want to show you if you  hover your mouse over it and you can have add a   plus eigen or whatever just go to wireframe  mode over there and just press the plus icon   over here as from library let's go with  the H1 title and we press use this module   go back to desktop view here we are but it's  white so select it press the brush icon we're   going to make it our Global dark blue color like  this saved and now we're going to change the text   to we help you grow it's a little bit too wide so  we're gonna shift enter this one all right then   we're going to add in a paragraph from library  paragraph over there use this module really great   you fill in your text which you want to sell  your products now we're going to create another   row over there and from library we're going to  use the white three columns use this row amazing   really great but I want to have an image also  above it so we're going to press the plus icon   image additive and the first image we're going to  upload over there is analyze database right there   you just can use it press Ok We're going to drag  and drop this on top of that one right there copy   this module drag and drop it over there and change  this upload a new file called stunning website over there save it duplicate it again drop  it over there change this one upload your   file called securing your website press save  it here we're gonna change the titles to for   example this looks already amazing of  course a call to action if we go over   here add in a new row we're going to add from  library the orange button right there use it   we're gonna align it in the center of course we  go to the content text we're going to change it   and request a and we're going to change design  the button we're gonna change the icon to the   arrow over there this looks really nice then  of course you might have guessed it we're gonna   add a new section over there a regular section  and this section has left and right over here   on the left side we're going to add in a image  right there we're gonna first change the color   of this entire section so we press on Section  settings background go to your Global colors   and use this slight dark blue color than this one  this one yes I don't know what is this delete it   we don't need it then in here we go to add  from library our gray upper text use it   really nice open it design it we're gonna  align it on the left side over there we're   going to change the content to for example  how we can improve your website save it   and then we're going to add in  a H2 of course use this module change this one select it make it white align it  to the left and go to content go to text I'm going   to change this you'll see how much time we save  by just reusing all our existing modules from the   library you can create your website so really  fast it is really nice just a text like this   and then of course you have already guessed it ad  from library your paragraph text use this module   here we go just change it design it make it white  and go down there and change the alignment to the   left side really amazing and now we're going  to add in a image upload it it's going to be   our meeting free stock image over there  if you're wondering where do I get free   stock images just check out this video and I'll  show you a couple of places where you can get   really amazing free stock images completely  free just like this one press upload image   great here we go save changes and you might have  guessed what we're going to add in over there is   just a call to action and from library we're  gonna use a orange button over there use this   module but this button is not going to the  contact page this button is going to the C   plans and we're gonna change the link to another  contact but we're going to use a hash or a number   sign and we're going to type in lens and  press save we're going to create the plans   later on then we go to design we go to button  we're gonna change the icon just a little bit   and we're gonna add in this button to scroll down  like this press save this might be a good time to   just publish your page or save your draft I'm  going to press publish in just a minute we'll   be adding a space to our main menu let's add a  new section over here we're gonna add a regular   section with a normal Row in this row we're going  to add from library our H2 title like this this   module and let us change the text to choose the  right plan for you click somewhere else and we're   going to edit a new module which is going to  be a pricing table over there click it and   we're going to use this one now the pricing table  module is really nice to use but as you can see   we definitely need to tweak and tune the design  first of all we're gonna need three tables let's   change on the content first we're going before  we're going to style it the first table should   be a essential plan all the things you need the  currency will be dollars and the essential plan   will cost you 500 then we scroll down and here  you can change all the features so in our case   now we're gonna save this one and then to  make it a bit easier for all these features   just delete these tables and just copy  this one three times on this plan we're   going to change this to for example more  things you need is this gonna cost you   2500 and for that you also you're also gonna  create your entire website and we're going to   add in a an advertising plan like this save it  and go to the next plan Next Level and on the   next level we want it all we're gonna create the  entire website we're going to do an advertising   plan and we're gonna do managed hosting for you  then we go back to power up the middle one and   then we go to design we're going to press layout  and then we're going to enable this feature so   that you have one column popping out from your  pricing plan and then we're going to save it   then when you hover over your table you will see  all these brush icons well let's press on the   first one we see the featured header background  color it should be our Global color the orange as   you can see the only the middle one will change  right now here you can see the featured title   text color this should be this color over there  let's give it some white there we have the table   header background color go to Global colors  and use this gray one we're already using   in other places then we're gonna do the title text  color and for that we're gonna use a white color   over here then we scroll down and the title font  is already good it's a default font and the font   width is also great and then we go to this color  over here featured pricing area background color   is as wide should be fine featured price text  color this should be orange again because this   is our pricing then we have the pricing area it's  white it's greater than the normal pricing text   color we're gonna change this color also to Orange  but then I want to change these bullets points we   go to design we go to bullets first thing we're  going to change the normal bullet color change   this one to our Global orange over here now you  can see that all the bullets has turned to Orange   and save it on second thought this gray I think it  should be better if it was blue so we go to design   just hover over it over there and you can see the  table header background color let's change this to   the blue color yes this is way better now it is  all synchronized and really nice with your color   scheme what we don't have over here is any of  the buttons so I just make these things easy for   us just go up and we're going to just copy this  entire row copy row or use Ctrl C on your keyboard   then hover over your new row and press Ctrl V  on your keyboard again and here we go request   a Google quote go to contact excellent then  what do we want below this one of course   we want a regular section with a normal row  inside of this row we want to have a a icon   can you see icon module over there it's going to  be a quote icon I'm gonna go for this digital one   looks really nice we go to design we go to Icon  we're going to change the color to the global   orange color then we're going to change the eigen  size to make it just a little bit smaller I would   say I would say 30 pixels is excellent and  align it in the center it's already there   all right save it then we're going through this  section settings over here we're going to change   the background to you might have guessed it our  beautiful dark blue color then we're going to   add in a new module oh I cannot select it anymore  if you don't want to go to the wireframe mode you   can also just duplicate it press the plus icon and  from library and go to the paragraph text use it   and after that you can always delete this module  go to your settings and we're going to style it   white and we go to content to go to text then  we're going to type in something like save this   module then we're going to copy this module and  just add in a name from one of your clients why   don't we go to design we go to text we're going  to change the font to make it a little bit smaller   and we're going to make that font weight to go  with balls great to finish this page what we need   is another section a regular section we're just  in the normal row and in the row starting again   with the upper text grayish to introduce it change  the text to your steps to success save it add in   a new module from the library which  has a H2 title use it delete this one   change the text to something like and then  we're going to add in we need some text to   go with this one so from the library add your  paragraph save it then we're going to add in a   new row I'm going to edit from the library  the white three columns click on it use it   we are but then I want to add in a icon  so we're gonna add an icon of course you   can use a blurb module which also works great  but in this case we're using the icon module   maybe excellent like this use this one go to  design we go to Icon we're going to give it   our beautiful orange color change it just a  little bit to make it a little bit smaller go   to the alignment and align it to the left save  it and we're gonna drag and drop it over there   and then we're going to row settings we're gonna  delete these two columns and we're going to copy   it to make it four steps all right like this save  it the first one is for one and getting ideas   two writing them down number three execute  the dreams and the fourth one is let the   money for him change the icon to a pen  of course writing them down like this   execute them execute them and then of course and  then we're gonna let the money pour in alright   great now we're gonna change the background of  this entire section to our broken white right   there save it then we go into the row settings  because I forgot to change the column color go   into a column gave it a white background and  then we're not gonna change it all by hand   we're just gonna extend item Styles click on it  do only this row and press extend here you go   save it now all of them are white and all of  them are amazing then what are you missing over   here of course a call to action so let's make a  big call to action add in a new section regular   add in a new row a normal row with just  the add from library the H2 title use it   and we're going to change this text to want  to learn more about build it add in a new one   add from library a paragraph use it change  the text to and then we're going to add   in from library of course our orange  and big button use this module again   style it go to design align it in the center I'm  going to change the text of this button I'm gonna   change the link to contact that's really great  and go to design I'm gonna change this icon again   to this one if you don't want to change the  icon manually every single time you're using   your button let me show you how you can change  this icon preset just save it hit the plus icon   go to add from library press on the orange button  over here and press edit with Diffie right here   then it will open up in a new tab just your  button change it go to design alignment in the   center and then button change your button to go  with this icon over here press save and we press   save and then you close this step to go back to  the orange button and now when I use this module   you will see that it's already been centered and  the icon has been changed well done this sub page   has been completed let's go to the checklist  and check off the sub page over there next   up contact page I'm gonna call this page contact  and press publish or just press use the V Builder   we're gonna build it from scratch of course the  contact page is one of the most important Pages   as that is where the money comes from so make  sure to make this really neat and clean edit a   new row and of course what do we start with from  library the upper gray text use it again change   the text to something like what are we gonna edit  of course we are going to add in a H1 title use it   change it it's right we're gonna make it our  beautiful blue let's go to content text and   make it contact us amazing delete this one  we don't need it and then you can add in a   paragraph of little text like this Library  use a paragraph text use this module again   change the text to something like something  like this and then we're going to add in a   new row with two columns we're going to use this  layout over here and then we're going to close   this one because what I want on the left side is  just this information over here so how do you do   that we press on edit footer template over there  and we're just going to copy this module over here   edit post content we're going to paste it  in over there and we're going to do this   with also on this one and also with the  email copy module base module like this   I want this to go over there and this one I want  it to be over here also let's change the colors a   bit go into this one change the icon color to  Orange and then the text I want it to be also   why not make it orange also save it we go to  this one also change the color to orange and   also the text to our Global orange why not save  it do it again with this one let's go with the I   get also orange but I want text it's not clickable  so I don't want to be why not also make it Orange   and save it then you might want to add some other  information just copy it and add in some I don't   know some Chamber of Commerce number or a set  number it's all great add it in over there and   then we're going to add in a contact form press  add new module and then you scroll down and we're   going to use the context form over there we want  to have a name a email address and you might want   to have a phone number so we're going to add  a new field which is called a phone and the   title will be a phone number allowed symbols only  numbers and you might say is required but maybe   your business people don't want to fill in their  phone number then that's okay just leave it off   then scroll up and the phone field should be over  there like this and change the message to question and then we press the save button add a new field  and then we go to field options and we go to make   this a checkbox over there and we change the  text of this new field type it in over here   yes I give permission to store and process my  data and it's also required go to text use the   field ID Comm send and the title should be just  a space so get it gone and that's just like it is   press save and now we're going to style it  a little bit then you go to design we go to   Fields the background color should we are broken  right or text color should be out dark blue   and the focus is great and the focused text color  is also great then what we can also do is scroll   down and we can have some border over here border  and then we want the Border width to be just one   pixel over there we're gonna make it our grayish  Style and this way the form really pops out and   your attention is immediately drawn to the form  and that is exactly what I want on this page then   let's drag it over here or just put it on the left  side we're going to change this submit button we   scroll up and we go to button use custom styles of  course we're going to change the background color   of our button to of course our beautiful orange  color the Border should be zero no borders and   a text let me change the text color to unwhite  amazing just looks like the other buttons which   I really like but it's a little bit bigger and  that's exactly the way it should be all right   really great then we go to content again we go  to scroll down we go to spam protection and we're   not going to use this basic capture but what you  need is a spam protection surface like recapture   how are we going to do this well we're just going  to add in in a account we're going to press add   and then you need a account name site key and  secret key how do you get it is really easy   if you want to know how to add and recapture  to this website just follow this tutorial   and I'll show you everything about how to add  recaptcha inside of your website it's really easy   and don't forget to add a border radius of 4  pixels just like our other buttons and now I   notice that this row is really wide in comparison  to our entire website so we go to the row settings   we go to design we go to sizing and we're going  to change the max width to a thousand pixels   like this this is way better looks really nice  now what do we need we need a map below this   section so we're going to add in a section regular  section we're going to add a new row now in here   we're going to add in a code module over here  what are we going to place in this code we'll   open up a new tab in your browser in this step you  go to Google Maps and on maps we're going to find   your workplace like the United States capital over  there and we press on share and then we're going   to press embed a map just like that just make it a  little bit smaller the way you like to know where   people can see your business and press copy HTML  then we go back to our code module and we're going   to paste it in over there then we gotta changed it  with 100 over here you can also change the height   if you want but I like this one press save then  you go to the row settings over here click design   go to sizing we're going to change this width to  100 also and also the max width to 100 like this   then you go to spacing over here I'm going to  change the padding to zero padding on bottom   zero bottom padding on top press save then also  go into the section settings go to design spacing   zero bottom padding and zero chop padding like  this press save again go to your settings of   your module and then scroll a bit down because  in here what we need to do is change the email   this is the email address to where it has been  sent so you want this to be sent to your email   address that you use most then we press save now  I think we've done a pretty great job with our   contact page over here okay just press save this  page over there exit the visual Builder over here   and now it's time to create our main menu you go  to your dashboard over there you go to appearance   go to menus right here and we're going to create a  new menu called Main menu created display location   primary doesn't really do anything then you press  on view all over here and you can see how contact   and services just add them in like this and press  save menu then we go back to our website over here   visit website just click on it and as you can see  the menu has already been inserted into our theme   really nice so we're going to change the contact  to drag and drop it over there and press save   then you're going to visit your website and  visit site and what you can see now is the   Home Services and contact really amazing what I  also want is this logo to be clickable sorry go   to enable the visual Builder I go edit my header  template I go into the menu settings over here   and I go to link and the logo link URL should  be a slash like this press save and save again and exit the visual Builder well done now  people can actually contact you might be   a bit of important go to checklist and  check off the contact page excellent job   let's now create a 404 page because it sometimes  happens on your dashboard we go to Diffie over   here to the theme Builder we're gonna add a new  template like this build a new template and here   we select the page that we want this and scroll  all the way down and there we have 404 Pages   click on it create template in here we're going  to add a custom body click on it and build it   this is going to be really easy we're going  to edit it over here add a new row like this   add from library of course our upper text  Gray use it I'm gonna change the text   to something like and of course  we're going to add in a new one the title yes uses module and the title  should be of course it should be blue   any content should be whoops page not found delete this one and then we're gonna add in a  paragraph and in this text we're gonna talk about   anyway we're going to add in of course a button  from our library I want the orange button use   it and it's already centered with the right icon  and we're gonna change it to get me out of here   and a link should be our home page like this  save it to make something really cool out of   it we're going to add in a new section regular  section just this row and a simple text and the   text should be a big 404. we go to design we  go to text we're gonna change uh we're gonna   change the color to our grayish color color over  there we're going to change the deck size to 450   like this scroll down make it aligned in the  center and we're going to add a little shadow   the shadow is a bit intense so we're going to  change this color to make it more transparent   so and press save it then we're going to take  this entire section go to its files go to   position and we're going to use the set index  to put it behind the other one so minus 10.   like this save it there we go to this section over  here go to the background and make it transparent   go to Advanced go to position and make this one  and set index of 25 just to be sure press save   then again we go to this section well  the problem now is with the set index   I can't select this section then you go to the  wireframe you're going to change this section   give the label name 404 background  so that you can always recognize it   then go to Advanced go back to your desktop  view I'm gonna go to position and we're going   to change this position to absolute location  Center that's it plus save press save and if   you want to change it go back to wireframe open  up the 404 text go back to this view go to design   we go to transform and we go to transform skew  we're gonna skew it just a little bit like this   just for the effect then we go to transform  rotate we're going to give it a little bit   of 3D feeling with this angle change it  to 25 or maybe 50. that's really nice   uh also in animation yes let's fade it in over  here press save I'm Gonna Save this and you can   press this cross icon don't forget to press  save changes over here or else it will not   be saved go to your website again visit site  and then we go to some page that doesn't exist   slash test 404 over there and this is our  beautiful 404 page of course you can style   it anywhere you want well done that 404 page is  completed go to your checklist and check this   one off and while we're here in the theme  Builder we can also create our beautiful   search page if you press in the search icon and  you look for something like website you press   enter this is the result page not really nice  again we go to our dashboard we go through Divi   and we go to the theme Builder then we go  to duplicate this entire template like this   and we're going to assign it scroll all the way  down assign it to the search results press save   then we're going to change  the Custom Body over here   the first thing we do is of course remove the  404 background we don't need it go to this one   and change this text and we're going to click on  this database icon over there and we're going to   use the the post or archive title click on it  and then we're going to click on this settings   and before you type in H1 like this and after you  type in this great save it save it we're going to   delete this text we're going to press the plus  icon then we go to our website we enable the   visual Builder we scroll down because what we need  is this module save this module to the library and press over here edit from library add in your  blog post use this module but then we're gonna   click on the settings icon and we're going to use  posts for current page like this and press save   press save again close this one press save again  and now we search on our website and then you see   on this page all your results but of course we  need to add a featured image to our service page   then don't forget to go to settings go  to design you go to pagination text and   change this to the global orange save it  save it don't forget to change this text   press save close this save again and then  this is our search result page really great   if you want to have images on your pages  also don't forget to add a featured image   well here don't forget to change the post  count from three results to well let's see   12. if you don't like to see the featured image  you can turn this off sometimes you have pages   with no featured image then this is very useful  then we press save again well done a search result   page has just been completed go to checklist  check this one off and you're almost completed   with the tutorial I'm so proud of you let's  go create the last page a about us page go to   pages over here and then we're going to create  a one more page which is called the about page   about us spreads use Divi Builder I'm going to  build from scratch the first thing we're gonna   do is add a new row we're gonna add it from  the library of course our upper text use this   module we're gonna change the text to something  like Noah's like us love us then we're gonna add   oh we can edit so I'm gonna push pressing this  button from our library the H1 title of course   delete this one make it dark blue again really  nice and we're gonna change this text to   oh this and we're going to add in paragraph  text and then we're going to add a new row   with three columns over there and we're  gonna add a person module like this   edit a name Paul John and he is the CEO of  the company let's add in also it's Facebook   URL something like this and it also has  Twitter and of course he also has LinkedIn   Google Plus I think that could be removed from  here Divi and for here you can add something   about your CEO then we go to image over here  and we're going to upload the images all the   images in the person's folder you will find  all different kind of free stuck images from   unsplash all these images are copyright free so  you can just use them but of course you want to   use your own team over here and remember is  to make sure that the images are all square   press upload image I'm gonna go to design we go  to image oh yeah I'm going to type in over here   50 now we have a beautiful round image then we go  to the name over here and we're going to change   the title text color to our Global orange color  right there then we go to social media we're gonna   change the our own gray color over here press  save changes and we're going to duplicate this   entire column so we're going to delete these two  and just copy them in over here and well done now   we can change them all one thing I don't like is  this it's a little bit too big so we go to the row   settings to design sizing we're going to change  this to 1000 pixels over there great and actually   it's too close to that one so what are we going to  do we go to the row settings to design spacing I'm   going to add some margin top of 50 pixels like  this save it then we're going to duplicate this   entire row like this and we're going to fill this  in also and then we have our beautiful team over   here now of course we're gonna add in another  section what I totally forget was to create a   different background we're going to duplicate this  entire section press on this one then we're going   to delete this row and delete this row then you  go to this section over there go to background   with our Global broken white color right there  then we're gonna delete this row here we are   then we can go to the row settings design spacing  remove the 50 pixels again because we don't need   it and now we have our beautiful sections over  there let's create another section over here   and a regular section and we're gonna use one  normal row and in a row we're going to use a H2   title you'll set and title text will be we go to  design or just click on the brush icon we're going   to make it white save it then on the section  settings we're going to the background we're   gonna make it dark blue as always press save then  we're going to add in a paragraph text uses module   we're gonna change the color to white yes change  the text a little bit and then we're gonna press   on the plus icon after row we're gonna add  from library are dark four columns use it   oh what do we see is that the background should  be actually are even darker blue like this   no this is nice then we're  going to change this text   then I'm going to delete one column because I  actually want three of them over here like this   of course then we're going to copy this  entire row to give make even more values and we're going to press this  plus icon to create a new section   and we're gonna put in a normal row add from  our library our beautiful H2 title use it   and then we're gonna make this go  over the people that we work with and then we're going to add a row with three  columns and again add the image and in the image   we're gonna use the partners you work with let's  duplicate this Con this comes like this change   the images then we're going to add a Nero with a  from the library a orange button of course use it learn why they want to partner with us and  the link should be go to contact really great   and then the last a call to action section of  course regular section normal row with the H2   title which says how can we help you below  that of course the paragraph text which is   save it I'm going to change the section settings  go to the background and make it our blue broken   white like this and what do I want over here is  of course a beautiful button like so today then   go over here and press save or publish and  then we have our beautiful website about us   exit official Builder then add it into your  menu we go up here to menus and we're gonna   press the about us on our website if you have  created a lot of more pages and you want them   to be underneath them like a drop down it's  really easy let me show you how this works   just press on view all and you can use  all your pages or you can use custom   links maybe you won't just custom links in  there it's fine go to https doctor.com and   the link text would be drop down one add it  in and then we have of course drop down two and we have of course drop down three so just to give you an idea how  this works you can even go one level fur if you   just drag it over there but we're gonna use  this one save it then we go to the front end   of our website and now you have a drop down like  this so it works actually it's really easy and it   works like a charm you can do it with everything  in here just make sure to keep it clean what if   you want the about a space you have a different  kind of header it's so possible I'm going to show   you right now just go with your DVD Miller over  here and then we're going to add a new template   build it and we're gonna do a specific page  about us over there and press create template   then only about us page what we want to do is  we don't want to change the global header or   else every page will be changed so click on this  icon and press disable global like this press save   changes and then we go to edit the custom header  over there with this pencil icon and you can make   any changes in here that you want to have for  a different kind of page for example you might   want to say well I want to have a different  logo as possible just use like this white logo   and let's change the background from white to  are blue like this it's great go to your menu   make the background remove it like this then  we go change the text go to design go to text   make the menu text color white over here that's  it press save and then we're gonna save this and   now when we close this one and save it we go to  our about page and we go to our about us page and   you will see that the top is completely different  than the other pages it's really simple to do and   now you know how to do it I'm so proud of you  you've just completed the phase two building   go to checklist and check this one off excellent  job now phase 3 stars which are really important   if you go to your checklist you will see that you  need to secure your website do some search engine   optimization optimize your speed create Advanced  forms if you need them if you like a Diffie   Carousel check out all these videos If you now  click on the play button you will go to a devoted   tutorial about this subject so I can guide you  to the process of securing your website optimize   your website for SEO optimize your speed it's  going to be great so keep this checklist alive   and walk through all the different steps in the  finishing touches now if you have any questions   or you just want to say thank you Matt drop them  down in the comments and I always reply and I love   to see the website you have created hit that like  button if you like this video subscribe of course   if you want to see more WordPress related videos  and also check out this video which is really hey guys see you later foreign

Channel: Matt - WPress Doctor

Views: 18,072

Keywords: wordpress doctor, wordpress, wordpress toturial, toturial, how to, websites, wordpress expert, how to make a website, how to make a divi website, how to create a website, build a website, how to make a wordpress website, how to create a wordpress website, how to build a wordpress website, build wordpress website, build divi website, how to build a divi website, divi website from scratch, wordpress website from scratch

Id: ptCQ2OXm8e4

Length: 108min 29sec (6509 seconds)

Published: Fri Mar 31 2023