How To Make A Wordpress Website 2020 | Divi Theme Tutorial🔥(DIVI 4.0)🔥

welcome back party people my name is Darrell ante in this video I'm gonna show you all how to make a WordPress website step by step and you don't need any sort of experience or any knowledge of coding everything this video is done with a visual drag-and-drop builder so you can visually make the websites the way you want it to look plus it comes with over 1,000 beautifully design pre-made templates you can have your website up and running in a few clicks now I'm gonna make a bold claim this stuff is so easy that after watching this video you'll be able to make your own websites and even start your own web design business and work anywhere in the world just like my viewers have in fact here are some websites that my viewers have made simply by watching videos just like this and setting up your website is super easy you get hosting you installed WordPress you activate your theme and start visually building your website live on the Internet and today I'll show you how it is that easy and we only make modern and professional websites here on my channel so let's take a look at the website that we're gonna make today in this video now this is the website that you are going to make today now you can add as many pages as you want and you can be as customizable as you want with your website with no restrictions and right away you can see this is a clean modern and professional website and today I'll walk you through on how to make it step by step now you can make any changes you want to your website like adjusting your website position moving the images changing the size of the text or color add these really cool shape dividers at a video background and gradient background or both you can also add a contact form which all the emails from your website will go right into your email box and let's not forget your website will be fully responsive for Mac PC any tablet and all mobile devices and today we are using the number one most popular WordPress theme in the world that's right this theme has more active installs than any other theme on the planet so you can be certain that you're only using the best in this tutorial now in case you want to know who I am my name is Daryl Wilson and I used to be a full-time web designer for years I switched over and I became a full-time web design instructor now I teach on various websites like you to me YouTube and Skillshare where I have around 150,000 students with a 4.6 out of 5 rating so trust me I really know my stuff in web design so if you're ready to learn how to make websites at a professional and modern and just look great okay in this video I'm going to show you how to do it today step-by-step so let's get started with this tutorial all right party people let's get this tutorial started so the first thing we're going to do is purchase your domain and hosting so for example your amazing website calm and I do have a special 70% discount for all my viewers in the description below of this video after that we're going to install wordpress and wordpress is the number one most popular CMS out there it powers more than one third of the internet including websites like the Whitehouse gov Katy Perry Sony Snoop Dogg etc after that we are going to download the Divi theme and the Divi theme is the number one best-selling most popular WordPress theme in the world there is no other theme in the world with more active installs than this theme I'm gonna show you how to build today in this video and lastly I'll show you how to make an amazing modern professional good-looking a WordPress website now there is a link in the description of this video it'll take you to a page that looks just like this right here and this is Zichron com now I've been recommending sycron comp over four years now and people love this web hosting company now why to recommend this company over anothers well first off I use this company and second off I compared this company against 15 others for 60 days and saikhan came up as number one as the fastest with the best of time the best support for the best price and you can see here by the like ratio people really did find this information helpful and people really do love sigh crown it's an amazing company you'll never have to worry about your site going down or being too slow you will love the results that you'll get with this web hosting company now there's three plans but I'm always gonna recommend one so we have this startup we have the grow big and we have the go geek now all my viewers go with the grow big plan because the grow big plan you can host unlimited websites on your hosting account rather than just a single website so that is a pretty big difference and personally if you're just getting started out you don't really need to go geek just yet this is a little bit more for people who have been in the game for a while so if you're just getting started out the girl big option is perfect for you so right here where it says get plan you'll click on get plan alright cool so you'll be brought to this page right here and this is where you going to enter in your new website so this same web address right here you're gonna go ahead and put whatever site that you want right here so give it some thoughts you know talk it over with your wife call your sister or whatever whatever is that you got to do I'm gonna put in best Givi tutorial because this is the best if you theme tutorial out there you will see you'll limits and once you've given some thoughts you click on procede right here alright and you're brought to this page right here now before I go any further everything I recommend in this video has a 30-day money-back guarantee for any reason whatsoever because this company is legit they are amazing so if you don't like amazing web hosting companies you can always get your money back but I'm just kidding this is a great web hosting company and everyone that uses this company loves it so right here you'll enter in your account information you'll put in your email your password right here you put in your client information so you put in your country your name your you know street address your social security number etc I'm just kidding you do not put in your social that is a very big joke right here you put in your country but by default it'll select it for you right now visiting Thailand so that's right it's saying Thailand but I am from the United States I am from a sunny California right here you'll put in your payment information so all your stuff right here and then right here we have the period now in all my videos I recommend the twelve months because the 12 months will actually give you the largest discount available then other plans so make sure you select twelve months it's a great starting plan for you right here we have extra services now I require you check this one right here domain privacy and the domain privacy this is going to protect your personal information from spammers and people trying to sell you really good stuff and guys trust me you want to spend the twelve dollars for the entire year because what's gonna happen if you don't have this checked people are gonna find out your personal info they're gonna send you spam they're gonna send you sex pills it's all this disaster stuff so please make sure you have two main privacy this will protect you and your website from people are trying to sell you spam and all sorts of really weird stuff so once you've done that that's right here you'll click on I have confirmed and you'll click on Terms of Service and I'm sure you're gonna read the Terms of Service and Privacy Policy right because everybody does that today right and then you'll click on this right here if you want to receive their newsletters and they don't send spam they just send really good offers trust me they really do send decent offers and once you're done filling all this information else you'll click on Pay Now and I'll meet you on the very next page all right cool so I purchased my hosting and right here which is proceed to customer area will click there alright awesome so right now it'll tell you that your site's ready to be set up so right here click on set up sites and now what we're going to do is we're going to install WordPress on to our domain so that'll give us the drag-and-drop functionality making it really easy to build our website so right here where it says start a new website you click on select you'll scroll down right here and you'll select WordPress now right here you'll go ahead and enter in your email and your password now this is the login information for WordPress so this is the information that you need to actually build your website so make sure you get a pen and pencil and write this down so you don't forget it alright so after you entered in your email address and your password you'll click on continue now right now it's recommending the SiteGround site scanner but personally I don't think you need it just yet maybe later once your site gets like very valuable and make a lot of money etc so right here just click on finish and right now it is creating our WordPress website let me know in the comments what site you're making I'm always interested to hear what kind of site people are making some people make sites for you know their business or the roofing company or for their family etc so right now my wire waiting let me know about site you are building for yourself or for anyone else alright so after you've waited you'll be brought to this page right here it says you're all set so go ahead and scroll down and right here it says manage sites click on manage sites alright and this is basically the site ground dashboard so this is where you can set up email accounts this is where you have your files etc your IP address everything and also you can see the amount of visitors and everything else right here from your website now on the left side right here you see WordPress click on WordPress and right here click on install and manage so we've already installed WordPress so go ahead and scroll down right here and you'll see manage installations and you'll see your website right here now right here under the actions you'll click on login to admin panel so go ahead and click on this right here alright so it'll take you to this page right here and this is the WordPress starter now you don't need to have this and actually recommend to take this off but for right here scroll down and just click on exits alright cool now this is your new website now your website right now is live on the Internet so right now people can actually go to your website and they will see it now if you want to see your website on how it looks on the top left right here you'll click on visit sites and this right here is your new website so this is exactly how it looks it doesn't look anything like I showed you all on the demo but don't worry we're gonna make it look amazing now whenever you want to log back into your website right here on the top just type in - WP dash admin like that and what its gonna do it's gonna prompt you to enter in your username and your password now remember how I told you to write it down so I'm entering my information right here so we have Divi Divi tutorial 1 2 3 and I'll enter in my information and remember this is what you're going to or this is we're going to login every single time that you want to build your website and there are some there's a few things I want to show you and to talk about before we actually build your website now right here click on plugins and click on installed plugins now right here we have a wordpress starter I want you to deactivate this plugin we don't need this plug-in it's basically just like a welcome party from psych round but personally we don't need it and right here if you go to dashboard and you click on dashboard you'll now see that your interface has changed and this is the actual default interface with WordPress so this is what everyone's used to etc so there are some things I want to go over and show you before we jump into this so right here under users you'll go to your profile now whenever you want to change your information or your password for your website you can do it all from right here so right here I want to go ahead and change my my color to Midnight's you can go and change your colors you'll scroll down right here and this is basically your email and this is very important because let's say for example you forget your password it will go ahead and send it to this address and also right here whenever you want to enter in a new password just click right here on generate password and this is the password and again you can go ahead and put any password you want and once you've done that you'll click on update profile and that's how you change your password for your websites now one more thing I want to talk about before we download the actual builder is to go ahead and change your permalinks so right here under these settings we have permalinks and right here we have different options but I want you to put this to post name and the reason why we do this is because you see these permalinks right here how this one's very clean so for example your website com - about us - contact us right you don't you want that and you don't want this - 0 9 - 11 that looks really bad and this is the best for SEO it'll help your site get ranked much higher so once you've done with that you'll click on Save Changes alright and go click on dashboard right here alright so next I want to make sure that your website shows secure right here because right now it says that your site is not secure so I want to fix that and we're gonna do that with a free plugin so right here click on plug-in and click on add new and for those of you who have no idea what plugins are plugins are essentially like add-ons for your website so this one right here you can turn your site into like a forum this right here you can have like out of community etc so right here click on popular I'll just give you a little crash course on what plugins are so right here for example this is a contact form this right here helps with SEO helps your site get ranked better this right here is the ability to sell on your website which I'll talk more about and another tutorial in fact I'll go ahead and link it in the description below once I have that toot already with the same theme but right here just go ahead and type in really simple ssl and this is the plugin that you'll saw right here the house three million active installs with very high ratings so right here just click on install now and then click on activate alright so right now the plug-in can actually find our SSL it's on our website but before we do this I want to make sure that you have your password and you're in your and your your email written down because after we do this it's going to kick us out of WordPress and I'll show you how you can always log back into your website to make changes so right here just click on go ahead activate SSL and then go ahead and go up here and click on visit sites now you'll see at the top left right here our connection secure and people won't get a warning from Google it'll say that our website is secure etc so to log back into your websites and this is for a future reference whenever you want to build your website cuz people ask me in the comments if in a drill I got kicked out my website how do I log back in right right here you'll enter in WP dash admin just like that and you'll press ENTER and you'll go ahead and put in the email and you'll go ahead and put in the password that you entered right here and once you've done with that you'll click on a rubber mean or whatever and click on login and this is how you can always log back in to make changes to your WordPress website alright next I'm gonna go ahead and close all these notices because they get really annoying really fast and the next thing that we're going to do is we are going to download the Divi theme now there's also a link in the description of this video it'll take you to a page that will give you a discount off the Divi theme you can also get there by going to Darrell Wilson comm - Debbie - discounts and press ENTER and once you're here you'll get a discount for the Divi theme so go ahead and scroll down right here and there's two plans now they have the yearly plan and they have the access plan now we're out the back guys I want to let you know that this company offers a 30-day money-back guarantee for any reason whatsoever and this right now is the most popular WordPress theme in the world in fact you can go to a website right here called Bill with calm and simply type in Divi theme right here just to get you know just to get an idea of how good this theme is right here right here will click on TV you should sistex and right here it's basically telling us that this is the most popular on the entire internet for WordPress themes top 1 million right here the most popular in the United States most popular Netherlands most popular in France in Canada etc it is the number one most popular WordPress theme in the world so I want to make sure that you guys are getting the best value and I have to have a discount for you all as well so we have two plans right here now I personally recommend a lifetime access and the reason why is because once you get the lifetime access you can solve this theme on any number of websites forever you can solve on the thousand websites and they will give you lifetime updates and also lifetime support so they will always help you out with your websites now other companies do not offer lifetime because they feel that's too aggressive but this is a great plan and I highly recommend the lifetime access and personally I have the lifetime access for my account as well and I'll show you in just a bit but you can also do the yearly but remember the yearly you'd have to pay this every single year but for the lifetime you only pay it once and you're done forever so go ahead and sign up with the plan that you choose but again I highly recommend the lifetime because other companies do not offer a lifetime so once you've actually purchased it it'll take you to your members area so congratulations and you can see right here how it says I have already purchased a lifetime membership because I've already purchased it so I'm not just biessing you I really do have this product so right here we have the Divi theme Divi builder plug-in and then you have these plugins as well these are all very nice plugins in fact I do have separate tutorials for all of these but for most of us we just want the Divi theme damaged just give us the Divi theme Darrell just give it to us right here you'll click on download the Divi theme alright and once you've done with that I'm going to close this you'll go back over here and the next thing we'll do is we will upload the theme onto our websites so right here you'll go to appearance and themes and right here we have add new now these right here are default free themes and quite honestly they're not good so I really can't I mean people out there use them but it's it's like when you have debut how would you use these things these are they're really there they look really bland and boring and you don't want to go there you don't want to go down that road trust me I've been there I like the pot clean it's no fun so right here upload theme and we'll go ahead and choose the file and then we'll go ahead to like the Divi theme alright so right now I uploaded Divi and right here I'll click on install now ok it's installing the theme and it has successfully installed the theme so right here click on activate and now we have activated the number one best theme in the world on your WordPress website so congratulations if you want to see how your website looks right now right here you click on visit sites and you'll notice that it's changed a little bit so things are looking a little bit different it says no where's alt found it's still pretty ugly so the first thing that we're going to do is we're gonna go ahead make some pages so we need the home the about the services all that stuff right so let's go back over here at our dashboard so let's get started so right here under pages you'll click on go to click on all pages and we have these pages set up by default but we don't need these pages so whenever you want to delete a page just click on trash and then again trash and then right here under pages click on add new and then go ahead and close this and right here you'll just type in home so this will be your home page and then click on publish right here alright and let's go ahead and make another page so right here on our + new go to page this is like a shortcut way to do it so here we'll do our about Us page and then click on publish and let's keep going so right here you guys you guys know what to do right so here another page and this will be our blog page alright we're going and then right here let's do the services services page how's everyone doing today you guys are doing good good it's good to hear it's good I like that here + new page and then we'll do the contact and then click on publish and publish all right cool so we made these pages now we need to actually sign them to a menu so over here if I go to visit site you've noticed that these are the pages right here but they're not really arranged properly and there's also this uncatted arised stuff so let's go ahead and create a menu so right here in a dashboard we'll go to appearance and go to menus and right here give your menu name so I'll put Daryl's menu Daryl menu create a menu and right here in our pages we have view all so go ahead and just put in all these right here and then click on add to menu now you notice right here how there's two pages or there's two homes right here so we have this home as a custom link and we don't need this right here so go ahead and just remove that and then we can rearrange this by dragging and dropping so I want the home right there the about us these services right here and then the blog and the contact us and this white here will be our primary menu and then I'll click on save menu alright and also if you want to make a drop-down at any time let's say let me actually show you the menu first so right here visit sites and now you can see the menu is very clean so we have the home the about us the services the blog and the contact us and if you want to make a drop down menu it get that request quite a bit you'll go back to your menu settings right here and you'll just go ahead and drag this below it and then click on save and what that'll do is that when someone hovers over it'll actually recommend the page below that so if you want to go and achieve that that's how you do it I just get a lot of questions about that so I just wanted to demonstrate on how to do that so right here I'll go ahead and click on save menu and now that we've done that we're ready to build our website but there's one last thing we need to do before we start building our pages so right here I want you to go to the theme customizer now we need to tell the website what's the first page that you want people to go on when they visit your websites so you have some settings right here and don't worry about these settings we'll talk more about this a little later in the theme customizer settings but for right here under homepage settings you'll click on a static page and for the home page I want to select it as home right there and then right here we'll click on publish and then here we're going to close this and this is our homepage and now we are ready to build our WordPress websites exciting stuff so you're about to make your website now I want to give you a tip advice when you watch this video please watch it all the way till the end because there are a lot of important features I'm gonna be talking about towards the end so just be patient you know give yourself the time to learn at your pace and just go with it and I promise you by the end of this video do we making super professional websites that look amazing so let's go back to the video you got it you guys ready okay let's do this so first thing you'll want to do right here is click on enable the visual builder now in my videos I'll be very honest with you guys I want to be as thorough as possible to make sure that you understand this builder as much as you you know it can because you paid for this builder and I don't want to have a brief video I really want you to understand the power of this builder and what it can do so right here we have two be options we have clone a page choose a premade layout and then we have build from scratch so right here click on it build from scratch and we have these different rows and you'll have these for every single section that you make so make sure you get comfortable with this so let's say for instance you wants one row you want to rows or sorry columns three columns 4 columns 5 columns etc so this is basically the style of your website but for right now we're just gonna have one right here and right here these are modules so you can kind of just go ahead and scroll down and just see what these do so for example right here if you want to go and have something of a blurb right here you can enter in a blurb and then you can go ahead and make changes to whatever you want right here etc but so for right now I don't want this so right here I'll click on check and then right here I'll go ahead and delete this right here now right here under this plus icon I want to go ahead and add a new section and I want to add in a full width section right here and now right here you see that we have different different I guess you want to call them module so we have full width image full width header etc let's just first do full width header now right here go check this and I want to close this right here we don't need this now whenever you want to access the options just click on this gear icon right here now we're going to build this same landing page right here so right here I have an image and then I have some text and then I have two buttons so we're gonna make it look just like this right here now that seems like a lot of work but don't worry so right here I'll put welcome to the award winning agency welcome to the award winning agency and then also for our subtitle right here I just have some basic dummy text so I'm just gonna go and put in some basic dummy text now right here we have button one and then we have button two so right here I put begin and we have click here so you can see here now we have two buttons and they're next to each other so right here I have explore and buy now so if you all do explore and then we'll just something like contact and then scroll down right here and this is where we have other content right here so here we can have different content etc so if you want more content you can go ahead and put it there but that's just an example of you know where you can put your content so you want to go ahead and put something just you know type it in etc but right here I just have something very small and brief so I don't want to put any content but you're welcome to put as much content as you want but I'll go ahead and take this out so next right here we have images we have link so if you want to go ahead and link them to a certain part of your website we can go ahead and do that so for example if you wanna take them to your contact us page you can go ahead and enter in your contact page link right there so let's do that so right here I'm open up a new tab and what I'll do here is I'll go to visit sites and I'll go ahead and just take the contact us page right here I'll take this link right here we'll copy it and then for the contact section which is actually button - I'll go ahead and paste it there so now when someone clicks on the contact it'll take them to the contact us page and then we can do the same thing also for the about us I'll take the about Us and then copy and then for the button one I'll just go ahead and paste it right there and it'll look much cleaner and it'll look better so for example if someone clicks on the Explorer and they'll take them to the about Us page so it looked much cleaner once we actually get the site up and running now right here we have module link targets so if someone clicks on the link do you want to put up a new tab for them or in the same window we'll just do the same window and right here we have background so I actually have images for all of you in the description of this video and these images are used to help you follow along with me in the video so you're not left out so you're not saying eh they're all I don't see that on my screen etc because I've learned over time guys trust me but all right here we have these different options so you can add a gradient background which people love gradients but don't go too crazy with gradient it's really hard to keep it consistent but if you want to change the gradient color right here you can have gradient one and then over here you can do something like gradient too so you can kind of have a gradient background right there and it's going down right here we have different types of gradients so we have linear and we have a radial radial is basically in the middle right here and then radial I'm sorry yeah radios in the middle and then linear is on the outside now I want you actually to see this a little bit better so before we go ahead and talk about these options let's make this fullscreen already so right here on the design tab we have layouts and then we have these options right here of make fullscreen so hit on yes for make fullscreen and then right here I want to align this in the middle like that so this looks a lot cleaner and we can actually see what we're doing so right here go to content again and then right here we have background and then here we can kind of see what we're doing so you can have a gradient direction you can change the direction of the gradients you can also change the start position and also the end position as well you can even get even customizable even have something like a split screen effect to your website like that so it just depends on what you're going for but it's very hard to keep that design consistent throughout your websites but I'm just giving you an example of what you can do you can also place gradients above the background image so if we do have a background image you can apply a gradient over that background image which I'll show you how to do just a bit so right here I'll just say you know what guys I don't want gradient right now you know I'm totally cool in gradients great it's a little bit too much for me I know everyone loves it you can have a solid color like this or you can have an image or you can have a video background you just click on this plus icon you can upload a video file or you can insert it from a URL like YouTube or Vimeo personally everyone video backgrounds are not the best for your website they mess up a lot they don't show up on mobile so in my personal advice I recommend against having video backgrounds I know beginners love them but most big websites don't use video backgrounds because of the problems they bring but anyways over here go to a background image and click on plus now there are files for everybody in the description of this video so go ahead and click on upload files select files and on my desktop right here I have the files right here for images and you'll go ahead and just pick shift and download all of these and you'll go ahead and open all of them to your WordPress website like this so you can see here how the images are uploading to our server and it's incredibly fast because we are using site crowds so that's another good reason trust me guys if you use like a page or something or Hostgator oh my god this would take like an hour to load it's pretty bad but the image that I want to use is this one right here slider 1 JPEG and right here I'll click on upload an image so now you can kind of see our website looks a lot better just from that one little image right there so there are some things that we need to do here so we need to actually change this text right here now a quick way on instead of having to like go through here and navigate you see here how there's this little blue pen just click on the pen and it'll automatically take you to this section where you can edit everything so the fonts I use was Poppins so for the title font we have all these fonts right here you can kind of go through and check all these fonts out they have tons of fonts you can also search to the fonts so if you have a favorite font I like Poppins I think it's pretty I don't know just something about it just looks professional now for the title weight font we have bold a heavy ultra bold etc so right here I have ultra bold and then you can also change the text alignment as well but I want to keep it in the center and then over here we scroll down and we can change the text size so right here I have it something like that you know into something like a 35 right around 30 here we go oh actually a lot bigger than that something like that right there will be like 55 and then right here we'll click on this right here and we can do the same thing so right here now divvy your members the fonts we used so that's really cool so I'll just like poppins right there and then right here I'll just do something like bold and then we'll go ahead and change this a little bit bigger actually just a little bit you can see from my demo website right here how we actually made it a little bit smaller something like that right there something like that right there all right now letter-spacing now again these are for every module so what this will do is that it just spaces out the the space in between the characters we have line-height which will add space above the line so for example you can see there I was adding space and then we have a text shadow people love tech shadows but don't get too crazy with them so I'll click on this one right here to give you a better demonstration so a text shadow basically as this shadow right here to the actual letters which can be really cool but just don't go crazy with them because I know beginners love this stuff so let's go back over here I'll click on here we go I'll click on there we go click on this right there and then scrolling down right here now these are the same options so once you want to shine it for one you understand it for all of them so these are again the same options that we have so layout etc so over here I'll click on this again and then for the design we can change this to any style so here here here get that all right so let's scroll down here we have button 1 and button too so I want to use a custom style 4 button 1 right here so you can see here how we have a red button and when I hover over it it turns black see that so let's go ahead and do that for this button right here so right here I want to change this button text to something a little bit smaller like 16 pixels and right here we have the button color so this will always go ahead and change the text color for the actual button so you can have red you're gonna have white etc but i'ma leave it as white right now so right here we have a background so I want to add a background to this I don't want to transparent I want to add something in the back so right here we click on add a background and I'll add an a red background you can also again have a gradient background as well so you can kind of decide how you want to approach that but I'll just leave it as red and then right here for the border with you know I don't want a border so what I'm gonna do right here is I'm just gonna go ahead and take this off and now it just has this button like that much easier right scrolling down here we have button button one border color so we don't have a border we got rid of it's right here I want to add in some spacing so you see here how do we have a little bit of spacing and then the button border radius but this will do is that it'll actually make it a circle so for example you see there you see here now it's the circle and then going back it is now a square it's going down right here we have the button one font so I want to change this to poppins right we're using poppins and maybe it'll change this to something like you know semi bold we can also do italicize etc show the button icon so this will basically show a icon right there so depending on what you want you can have it show something else you can go ahead and pick from this large list right here I'll just select something something basic something like this right here something simple right scrolling down right here we have the button 1 color icon so that is the color of the icon but I want white because I think white is the easiest to see on the eye and then scrolling down here we have the button icon placement so you can have it on the right or on the left side and then right here we have show icon on hover so that means it's only going to show when someone hovers over the button like that and then here again we have the option for tech shadows so just like before how we add it for this section you can have the same thing right here but I'm not gonna have anything right there now this section right here gonna be a little confusing for most beginners and this is called margin and padding and we're gonna use this a lot on your website so padding is space so basically I want more space right here I think this button is too small right so right here I want to add in 20 pixels you see that 20 pixels you see how the buttons getting bigger now it looks ugly right there so you want to go ahead and match it up you know you want to make sure you have this for everything so right here I'll go ahead and select 20 pixels as well and then for the left side I want to select I'll just type it in this time so I'll just select 36 and then we'll do the same thing on the right side 36 and now you can see that we have a very big button maybe a little bit too big maybe you can actually reduce this a little bit to something like you know 30 or something like that and then right here we have 30 as well so there it's a little bit little bit smaller I think that looks a little bit better we can also make the text bigger to make it look a little bit better right but that's just an example of how we can decorate the button so this is exactly how you can have your button design etc and now that we've done it for this button we can do it for this button as well so we can go ahead and do the same thing for the second button now one thing to note here so when we make our website right here what we can do later is we can go ahead and just copy and paste this button instead of having to make the same button all the time on our website so there are a lot of really cool features that provide shortcuts but I'll talk more about a little bit later in this video but for right now for this specific module we will have to put these styles for both buttons so right here let's go ahead and do 16 again and now for the text I'll leave it as white now for the background color I use a specific background color so if you have the if you have a code for a color you can go ahead and paste it right here or you can go ahead and try to find it you know any you know color you want to go ahead and put but the color that I use for my specific demo was one a 1 D 2 4 and it's like kind of like a dark blue or it's a dark black but it's not entirely black so it's like it's like not a hundred percent black but it's a lighter black so it's kind of hard to see but in web design you'll get the hang of it now right here I don't want a border so I want to take that off and then right here border radius I'll go ahead and leave that I want to add in just a little bit of space with these buttons and then for the button two fonts I want to put this to poppins and then we can change this to something like semi bold or bold etc we can change this again so these are again the same options that we had before so here I'll go ahead and select that and then for the button to icon color leave that as whites and then the same thing I want it on the right side and then right here no tech shadow and right here we have the same option so I'll do something like I'll do 20 20 weighted 30 30 like that right so I'm sorry a padding so my bad my bad remember padding padding so here we had it was at 30 30 20 no twenty twenty thirty 30 20 20 and then 30 and then 30 to make it look very similar now you notice right here how when we hover over it the color doesn't change right so to fix that go ahead and scroll up right here and we're gonna find the background color right here so we have the button to background now I'm gonna go to button one really quick and do the same thing so right here button 1 and right here we have these options so click on this little arrow right here and now we have the hover option now in the hover over it I want to change this background right here to the color that we just had so I'm gonna go ahead and paste that color in like that and then click on check so now let's go ahead and actually click right here and now this is going to save our progress so now if I hover over it right here let me go ahead and exit the visual builder it always helps when you exit the visual builder if I hover over it you can see now how it changes the color so you can do the same thing for this section right here now let's go ahead and just do one more thing and move on to the next section so you notice right here on this website right here how the text is kind of scrunched like that and ours is kind of spread across so we can do here is go on to the gear icon and instead of putting it in the subtitle right here what we can do is actually get rid of this right here and we can go ahead and put this right here and then we can go ahead and do something like I'll put a little dots and then space a lot like that so I'm actually using the body now instead of the subtitle so now I can kind of design it a little bit better and you can see here now it looks a little bit more clean and then again remember whenever you want to change the setting in the text go to design and then under the text section you can go ahead and change everything etc so congratulations we've made our homepage this is an amazing-looking homepage I mean this looks fantastic so congratulations by yourself on the back let's go ahead and go on to the next section now I want you to look at this page and I want you to visually understand how we made this so this is a two column row right 1 & 2 here we have an image module an icon module a text a text a text and a button module so let's go ahead and demonstrate that on our website so right here we'll click on the plus regular and we'll do a two column row so the first one we have right here is an image module right so go ahead and find image and then right here I'll go ahead and trash this because that's just a placeholder add an image and I'll select the image right here you see that so their image is right there and remember you can always adjust the padding you can adjust how you want this to be on your website so here you can kind of see we have just a little bit of space so I'll just go ahead and just put in just a little bit I won't be exact you know but you get the idea you get the point right here we have a blurb section so I'll go ahead and click on this plus icon which this will basically allow us to add in another it'll add in another module right below this section right here so for this section what we'll do is I'll go ahead and grab a blurb so right here blurb and what I want to do here is I'll just go ahead and put in something like for contact and then what we'll do here is I'll just go ahead and get rid of all this and then I'll just put in like a phone number you know so I'll just put in I don't know this is a fictional number guys so I'm from California what do I mean we weren't even used the plus stuff like that we use like the the 181 800 numbers you know but I'll just put in some numbers here hopefully this is done with a number you know and then right here we have image and icon so I want to use an icon instead you know I don't want to use an image and right here I'll go ahead and place something like a phone right here I wish they had like a search bar where you can actually go ahead and search for and make it a lot easier so there I have the phone right we got the phone cool go ahead and scroll down and here we have a background so what I want to do is I want to keep my colors consistent so I want to add in a color background to this and I want to use the same color that I've been using throughout the website so I'll go ahead and go back right here and tell you what I'll close this I'll go ahead and open this right here and go to the design and go to my button and then just go ahead and grab that color code this one right here and you know we only have to do this once because once we actually do it for this section we can spread it throughout our entire website so right here I'll go ahead and put in a background again and I'll place that color all right so that looks a little weird but don't worry we'll change everything and then right here we go to the design section so image an icon the icon I have is red right there right and we can actually have a circle icon as well you can always change the color of that but for right now I'm just gonna say no I want to leave it like that and the big difference right here is placing this to the left side right there so this right here obviously is a lot different and it's starting to kind of look a little better you know still very ugly here you can use the icon font size so we can go ahead and change the style of that so I'll put this is something like what's the change of something like 64 now and right here for the text I'll click on text and now we can go ahead and change the alignment of this so I'll leave on the left side and I want this light now this is a shortcut way on how to do it we can always go ahead and change the color manually for each one for the title text right here I'll leave this is something like quicksand I think there's quicksand you go quicksand and then again here we can always go ahead and change change what you want excetera you kind of get the idea here and then we can go to these settings now again these are again this same setting options that we had before so at any time you can go ahead and change the text right here so remember once you get it for all of them you kind of you once you understand it for one you get it for all of them you understand so here I'll go ahead and change quicksand and then right here I'll go ahead and make this one a little bit bigger now something like that right there so you've noticed how that looks pretty good but the problem is that the spacing is terrible right it doesn't look that good because this this box was really ugly and it doesn't really look good so let's go ahead and go to spacing so I'm sorry sizing this is all you know we can go ahead and just this but I want to just add padding you know so under the spacing right here right here I'll do something like thirty thirty and then over here I'll do another thirty and then over here we'll do something like forty and then we got forty again so that looks a lot cleaner you know and you can actually get a little bit creative you know you don't have to follow what I'm doing for Batum you can kind of take this and kind of like push it like this or you know something like that but you can kind of get creative and do what you want this is your websites I'm just kind of educating you on how it's to design is right now we've made this section it's pretty clear I mean this part is a little bit bigger that's the only difference is the fonts is bigger but virtually it's the same thing now also whatever you want to drag and drop a module you can just take this module right here and then just drag it like that you don't want it there we can go ahead and duplicate it and then we can just say you know what I want to drag this back right here so what we can do here is we can actually use this a little bit later on our website also the buttons as well so right here I'll click on the trash can click on the plus icon now let's go ahead and do a text module right here so right here I want to make a title you know like who we are who we are and that's about it so I just want to leave it like that for the background right here we can go ahead and set a background color to something like red now I know that looks really bad but don't worry we'll go ahead and fix that in just a bit so over here we'll go to the gear icon now we want to make sure we get this right because we're gonna copy this and duplicate it throughout the rest of our websites so right here in the design tab we have text so I want to go ahead and change this right here so the font that I use for this one let me go ahead and check really quick actually wrote this down Lee was called Tiko Tiko Tiko right there tico and then right here we have the font weight so we can leave this to something like semi bolt so you get these options that are pretty self-explanatory they're basically the same thing so right here I'm add some space I'm going to scroll down now everything right here I think is sets the only thing that I need to change right here is the actual red so I don't want this read to extend like that you know and you might have this problem on other parts you maybe just want this to be just like right here so for the sizing right here we can go ahead and adjust the width right here so you can see here now how we're adjusting the width right there the setting that looks like that right there something like that so now that looks a little bit better right and again you can always go to these settings and you can change stuff and you can kind of get creative but this is very advanced and most beginners probably won't need this stuff but again what we need to do here is we need to add spacing again remember so spacing nine nine and then over here I'll go ahead and put ten pixels and then ten pixels as well so now that we've done that you can see over here how this box still is a little bit it's still scrunched so what we can do is we can go back to sizing right here and just increase this with a little bit more like that so now we have something that looks a little bit more clean and crisp next what we'll do is we'll add in this section right here and this section is a little bit more unique I guess you can say so I'll go ahead and copy this right here and let's go ahead and add in a new text module so right here a lot in a text module and what we're gonna do here is we're going to go ahead and take this and I'm going to go ahead and paste this in like that so we have one section and we have two sections and you see how it says heading two right here and this says heading three let's talk about how we can manipulate this and kind of make it look different so over here on the design tab right here we have heading text we have h2 and h3 you see how the Box hovers over that so we can do here now is we can actually change it for each specific text in our text field so let's say for instance four again right here we'll take just the poppins and right here I'll go ahead and make this we'll just do ultra bold or something like that or heavy or I don't know semi bold looks good but you guys tell me now you got you guys are on par right now you guys can kind of give me advice so we changed it to that and I want to make this a little bit bigger so the change is something a little bit bigger something like thirty and for this section right here I'll click on this and then again we'll go ahead and change this right here to Poppins and then we'll change this to like ultra bolt again and what we can do here now is we can change the color of it like that so now you can kind of understand how we can change different parts of this and make it look you know now we have a difference a category of styling and stuff like that so let's make this a little bigger you know I think these are a little bit too small here so let's just put a design agency and then this one right here again we'll make it a little bit bigger just to give a little bit more bigger something like that right that looks pretty clean and crisp so again that looks pretty good so now we've done that it's going to add in the next section right here where I'm just gonna go ahead and take this text and we're just going to go ahead and add in another text module so again plus text and then I'll just go ahead and paste this in right here like that so you can see here how that color or that looks a little strange but I guess that's okay we'll go ahead and just take this out like that and then ball off we could take this and just copy it and then I'll paste it right here etc put in a little enter sign right here to make it look a little bit more clean right now let's go ahead and use a button module so right here I'll put in the plus icon and then we'll go to button now we only have to do this one time and then we can take this and duplicate it later and put them on different parts of our website and we can even save it to the library which I'll show you how to do in just the bits but right here I click on the trash icon now to speed up the process I made my button already because I already showed you all how to make the buttons right here so it's the same exact process it's the same settings but what I wanted to do here now is once you're done making your butts in you want to save this button to your library I'll put this two button and then save this to library so what this allows us to do is we can use it on different parts of a website a little bit later so once you're making your done finished and all that stuff you can go and say that your library and then I'll show you on how we can add the different parts of our website so the next section is going to be very tricky and this is probably one of the trickiest parts to do in web design is creating these grid sections like this so over here I'll go ahead and put on this plus button now I want to show you how to do something really quick so let's go ahead and just do regular and let's do a for column and right here just select image and then we'll go ahead and trash this image you'll have to follow me here I just want to go ahead and explain to you how to achieve a certain specific section so here I'll just grab something like we'll just grab I'll just grab this right here and just just just give you a demonstration of how this works so right here in the settings I'm gonna go to design right here spacing I'm sorry the sizing changes gutter with two one minimize the heights and I want to have 100% width and I want to change this to max width like that and then what I'll do here now is I'll go ahead and just copy this take this put it right there copy this module take this put it right there and then copy this again and put it right here and there you go so now that we have images that basically expand all across and we can reduce the padding right here to make sure that there's no space whatsoever something like that now I'm gonna show you how to do this with text so that's how you do with images and with images is a little bit easier so let me go and explain to you how to do this with text and right here I'll click on regular and I'll select a three column row now looking at this I want you to understand how I built this so a text module a divider a text module and a button we haven't done dividers yet so we'll do that right now so I'm you know I'm kind of lazy right now guys you know let's just go ahead and duplicate some stuff to kind of make our work easier so I duplicated this and I'll drag it and I'll put it right right there okay yeah a little weird but it worked out so here I'll go ahead and delete all this and I just want this because this is actually all the same settings right so I'll just put design designing their design design like that and what we can do here is I'll just go ahead and we can duplicate this and I'll just drag this and I'll put it oh it's being a little weird there we go sometimes weird WordPress weird stuff happens so now you can see how I've drastically speeds up the process I don't have to do all this from scratch again etc so right here I'll do the plus icon and I look for the divider all right now for the divider right here this basically just kind of adds space that's the whole point of a divider but a lot of us use it for just styling so right here under the line section we can change the color here all changes to red and then we can have a dotted we can have - and you can kind of see how we can kind of a you know change the style of this etc I'll leave it as that and then right here under the sizing so here we can change the weight of its I'll put it something like - I think - is good here we can change the width and then you can change the alignment as well to kind of give it that you know you can kind of make it look like a certain style whatever you're trying to achieve etc and then right here at min height so we can change the height of it as well but I don't want to do that so essentially what this does again is that this basically just creates space in between stuff that's essentially what it does and then here you can add more space with padding and margin you can add a border box shadow etc now there is one thing that I really talked about and that is the transformation and how you can actually transform stuff and make it look a lot different but we'll talk more about this a little bit later because it's it's a very bad example to give you for this specific module so we'll talk more about this a little bit later but we'll talk more about all that stuff because that can be a little confusing we'll use it for images but again right here spacing I'm sorry sighs I want to go ahead and change the width of this make it a little bit smaller something like this right here all right and then right here I'll go ahead and click on this plus icon add in some text and then you guys get the idea here now I do have a little bit of space right here so I want to go ahead and just kind of reduce the space right here so something like that's you know a little bit closer and then right here we can go ahead and do something like you know change like that and then here enter something like that and then right here I'll just go ahead and duplicate this button and strike it and put it below this and then we're all done so that's basically it right here now we need to actually change this to make it look like this right here and essentially all we have to do is just mess around with the sizing so right here again like we did before we'll do the row settings and then we'll go ahead and do design sizing gutter with changes to one now this is gonna look a little weird at first and don't panic this is probably the most complicated part of the video so don't panic equalize of the width or the heights change to 100 and I want this max with something like that right there then yeah so that's basically basically I've achieved that section now right here for column 1 we need to actually add in some padding you know so right here under the design section we can go over here to border I'm starting out border the spacing and then we'll change this to something like 70 pages to 70 70 70 and 70 and essentially what that's done is it's kind of put it in this the middle of everything so you can kind of see how that looks and over here for the row setting under the first column we can set a background and we can go ahead and select the background color like that so you see what I'm getting at here so you understand the what I'm kind of going for here so from really quickly look really ugly to really good so right here in this module setting for this button right here I want to actually take the same the same button color I want to extend it in the background so this button is transparent so right here under the button I want to take this same color like that's hope you guys are with me here you can stay with me guys don't don't don't don't no I'll bet I'll lose you and then right here under this section right here again column 1 for the background and I want to go ahead and paste this right here and then voila so now the button is transparent so that's how I achieve that specific section and then again we can always go ahead and adjust the button to make it align properly remember we do have a padding right here but I'm not gonna go ahead and change that right now because you've already known how to do that right here I'll go ahead and change this text to something like whites the text and we'll change this to whites right and then we'll also change this right here to white as well so we can actually change it right here in the text color it's like a shortcuts like the old-school way to do it etc now what we can do here now is we can actually go ahead and add on some spacing so right here under this icon I want to add on some space so everything's to scrunch together you know so for this text right here I want to go ahead and go to the design go to spacing and I want to add in some padding only to the top which is space you see that so now we're adding space to the top and then over here under this one I want to add space below it so right here spacing and I want to add padding below it's like that and then voila we're done now a good way to actually make make this process a lot faster is I'll just go ahead and just delete this and delete this and what we'll do here is under this section right here well delete these two and we'll just duplicate this and then we're done I mean that's it we're done so all of you to do now is just change this one color right here so for example the middle one will be red so right here column background red done beautiful and of course we need to actually kind of you know you can modify it slightly and change stuff like this buttons too big obviously but you already know how to do that so you can see here how it looks very similar to what we have now the only difference is is that maybe we can reduce the padding like this to make sure that no white displays etc so like right here I'll take off all the whites and then there you go so now we have a section that's very scrunched together and again that was probably the hardest part of this video is getting this to work out because this can be a little complicated let's go ahead and move on to the next section so right here we have a text module a divider and this is the new one this is accordion so this is again only a two column row so let's go ahead and add that in all right so next we'll go ahead and click on the plus hope you guys don't mind I cleaned this up just a little bit you know I took a break and you just I like this looking better looks much better like that here I'll click on the plus icon and then we'll go to regular and then I also like a two column row now I'm lazy you know I want to go ahead and just take sections and duplicate them without having to do all the work again so right here under this section I'll duplicate this and I'll just drag this right here and then same thing for this section right here so I'll go ahead and duplicate this section oh not this one there we go like that and then take that you can see how it's kind of hard to grab and then I'll just paste it below that now I can't see this text so I'll just go ahead and change this to well I can do it right here to changes something like block right here just so we can see what we're doing and then right here I can duplicate this text actually no what I can duplicate that because we're actually going to use the taco module my bed so right here I'll go ahead and find toggle and then what we can do here is we can style this so right here the module settings again your tile here and then this right here is the content when they actually open this and they can actually see it so whatever you want to put right there you can go ahead and put right there but I want to go ahead and close that and for the design right here we can change the icon to something like black and then for the text again we can change the text alignment so we can add a shout-out to it etc so when you're building your website you want to make sure everything is consistent so for the title fonts I want something like Poppins and I'll keep it consistent throughout the whole website you know the text size is fine here I'll changes to something like you know we changed to black gogo we'll do a dark black text color etc and instead of doing all this all over again what we can do is just duplicate it like that and then that's a different one how we can you know achieve this section next let's go ahead and add in the image right here so right here I'll click on add a new module and then I'll select image now this section I'm going to talk to you a little bit about some other features we haven't talked about such as formations and also animations for your website so the image that we use right here was this one right here now I want to go ahead and be a little more customizable with this so for the model settings right here under the design section you notice over here how there's transform filters and animations and we didn't cover any of this so I want to talk about what these three are right now so for the server's talk about animations this is very simple so right here we have fade slide bounce zoom flip roll now I find that this was the best way to teach you was the image because it makes more sense here you can change the animation duration so if you want it shorter or longer etc we have also a delay and you can kind of go through these settings and check them out I'm not gonna like go you know in deaf because you can you can mess around with these settings to get an understanding right here we have transformation now this is again is a relatively new feature they've added so right here we have different styles of how you can kind of move this around also right here we have transform template which is a really cool feature which can kind of move this to any part of your website in fact we can have fun right here and just kind of take off and put it wherever you want which is really really cool now when you're using this feature guys you need to make sure that your site is responsive because this can give you a lot of responsive problems so don't get crazy with this just use it very sparingly like for example if I move this over here or like that I'd be good but when we talk about mobile editing a little optimization again this can be a little overwhelming so just don't go crazy with this have fun but not too much fun all right and then right here rotation you can get really crazy with this you can change the degrees something like that so it looks pretty cool and then also this feature right here so you can get really customizable and you can really change the way your site looks with images I mean this is a great alternative to photoshop it truly is so I'm not going to go too much into this because people will use this but I don't think that you're going to make your website with this but that's just if you want to get really really crazy next we have filters and again filters you can change the saturation you can change all this stuff so goodbye in a Photoshop we no longer need Photoshop because Divi can do everything so if you want a quick way on how you can kind of edit your images and be very creative this is how you can do it's so blurry T cetera now there's also blend mode and this primarily is more for like text and stuff like that I will link a tutorial and a quick how-to on some really unique ways on how you can use blend mode there are some really amazing styles that you can use the text it integrates with images but I'm just not gonna go over that too much in this video because it's a little off topic and I'll leave this a tool for you don't worry you'll learn all about blend modes so yeah now one thing that I want to change here is the spacing so over here you've seen that the spacing is very small so we'll go ahead and change it like that and follow ah so that's basically a quick rundown of the images in the design so I think I covered basically like all of the options right here a box shadow that basically puts like the shadow around the boxes and stuff like that I find that box shadows are relatively good for something like I want to say text boxes like right here this whole section you can probably have a a text shadow so for example right here design will do a box shadow something like you know something like that you know but it has to go around the whole thing to be creative so that's just an example of how you can add a box shadow and also a text shadow as well so it's going down right here we have this section now this section right here is relatively very common in WordPress and you will see a lot of websites use this specific section when they kind of like address the bottom of their websites essentially what this is is just a call to action or we can use a text module and a button module now we haven't used the call to action yet so let me just give you a demonstration of that so right here under this one icon we have call to action and a call to action is essentially all it really is I'll click on the gear icon and go to the let's see right here we have the I mean let me just let me just set this up for you really quick to give it a good demonstration a link right here I'll just put that and then so essentially what a call to action is it's essentially a title with smaller text and a button so it's essentially a shortcut now you can also do this with just a text module a text module and a button module so however you want to customize your websites that's how you can achieve this specific section so it's up to you you know we can use a call to action or we can just use a text module and preferably I want to use a text module just because I'm a little lazy we've already made the butts in here so it's like well if you already made the button and everything why are we gonna do everything all over again right so let's go ahead and just copy this and I'll take this and I'll put it right here all right now what we need to do here is I'll go ahead and put in this new section right here and then I'll go ahead and just put in something like text just to show us where we're working at and then right here I'll take this I'll drag it below right hope you guys understand that says second row no that's not okay so here we have this section now there's a lot of different ways on how I can do this I can just go ahead and go back up here and then just duplicate this and then drag this right here and use my mouse pointer and do that I think that's way easier and I'll close this and then what we'll do here is I'll go ahead and go to the design click on the text section and then scroll down until we find the alignment area so right here text alignment I'll click on middle and there you go and then right here same thing I'll click on a setting icon design alignment and middle and much easier and also right here we don't really need this section so what we're gonna do is we're gonna use this section instead you see the blue icon or the blue line how it's controlling this whole section so if you want to add a background such as like a background color you would do it from here so here we can have ingredients etc so here you can add a black or you know you can get the idea right here I want to enter in an image so I'm gonna teach you two ways on how to add an overlay to your background which is very popular in web design so I have these images right here and they already have the overlay but let's say for instance you don't have it with an overlay so right here I'll click on upload an image now we can't see the image but the image is there and the reason why we can't see it is because right here under the gradient the gray is too bright so I'm gonna go ahead and trash the gradient and now we have the image so right here I'll go ahead and add a gradient background and if we scroll down right here make sure this is checked too yes so place gradient above the background image now what I'll do here is I'll select something like let's just like the blue and then I'll change this something like purple just to give you an example now what you want to do here is click on the color and reduce the transparency of that color and then the same thing for this one like that so you can see here how it has somewhat of an overlay now if you want to add just one solid color to change them both to black and then we can go ahead and reduce the transparency like this and then also like this as well now the sad part is with Divi is that for the normal background color they don't have that option so we would have to do it through the gradients and that's essentially the only way on how we can do that so that's just an example of how you can add an overlay to your background or you can Photoshop the image etc but I just find this a lot more easier and I think this is just a you know a lot more convenience on how you can have an overlay to your websites right or to your image so now we've done that let's go ahead and do this section and this section is gonna be really fast because guess what we already have the section made believe it or not so right here I'll click on save now I'm gonna take this section right here and we're gonna duplicate it so now we have these two sections that looks pretty cool actually and right here I'll click on this icon and I'm gonna drag the section down below this section right here so I've done that now I just want to slightly modify this I don't want to have to redo everything but we can slightly modify that so right here under this this this section right here we can adjust these columns in a different manner so what I'll do is I'll say look I want to look like this right here and all I need to do now is just change this background to the girl so to do that I'll click on this teal column structure right here I'm sorry I'll click on the the the gear setting and right here under the second column which is this one right here I'll click on that and then for the background I'll delete this right here and I'll add an image of the girl so here's the image upload an image and voila we are all done now of course I might want to get rid of this text so what we can do here is I can just say alright I don't want this text now I want to delete all this text and then there you go and that's it we're all done and of course if you want to go ahead and change stuff we can go in go ahead and move stuff around you can adjust the padding so you know by now you know how to do this and then right here all these are right here are just basically check marks with an icon so essentially what we did here is just lead this delete this and we'll just go ahead and add in a blur right here so right here I'll delete this oh sorry I just need to go ahead and just add in D I'll just add in the the blurb and then I just want an icon instead so I'll just put the icon to the left side and then essentially what I did was I just put in a check mark there and that's it so for the image and icon I want to use an icon and I just want a check mark so what can do here is we just find the check mark which is this and then we make this text a little smaller right something like this or take that out and then for this part right here we put this how it goes here you are amazing and then right here on the design tab what we can do is just change the the title text to white so poppins and then also change it to whites and then right here we can change the image I'm sorry the icon to something like red so I'll click on this and then the image color like that and then we can just go ahead and duplicate this like that so you can see here how we've just made this very fast without having to redo everything now sure that this looks a little different but I think by now you know how to change and adjust things like that so that's right there is a very fast way on how you can achieve this section so we are moving along pretty quickly and I think by now you guys are getting the hang of this page builder now in this next section we're gonna make this blog post right here so I'm gonna show you how to set all this up right here and introduce a blog on your website as well now I'm pretty lazy right now I don't want you guys but I'm lazy so I want to go ahead and just take these sections from other parts of my websites without having to redo everything from scratch right because that would be a lot of work so right here I'm just click on this blue icon go to regular and then I'll go ahead and close this so I'm making a new section right here now there's a few ways on how we can do this I can actually go ahead and copy each of these modules right here and then drag them to the bottom or I can go ahead and duplicate this whole section right here and then rearrange everything so I'm gonna scroll down right here and right here I'm gonna grab this I'll click on it and I'm gonna hold it down so I'm gonna take my middle mouse and scroll down to the bottom of the page and then just drop it right here just drop it there we go so we have this section right here now let's just rearrange everything instead of having to do we you know everything from scratch again so right here I'll go ahead and close this I'll close this I'll take this button right here take the button and then drag it right there I'll take this section right here I'll just put it right here below that and then I'll delete this because I don't need this no more and right here I'll go ahead and just delete some of this text because I don't need all of this text right here so let me see here I'll click on the ads there we go and then just delete dats and then once I've done that I can actually just rearrange and just push this down very similar to what we have right here so you can see here how we've drastically speed up the design process instead of having to do everything from scratch and do a little over again the only thing that I need to do right here is probably delete all this and then right here I put something like our latest news so here I'll just puts our latest our latest news and then change this right here to something like blog so right here I'll just put blog and then we can always go ahead and Center align it something like that or we can make it bigger etc I'm not gonna go design it right now because obviously I just need to make it bigger and then set our line it's but you guys know how to do this already so design text and then here you can make the size bigger etc and next we need a divider right here so you see here your higher this divider now we already have a divider made right and why would I have to do everything from scratch again so I'll just go ahead and take this section right here this divider module duplicate it and then just drag it over here now we can't see it because it's white so all I need to do here is gear icon design and then we need to go to the color section I think it is background right here is that a background or it is see the background no I don't think it's the background color actually it is let me see here it is the design the line the color okay a little hit in there I kind of forgot forgot where was it at the moment so the next we need to do is we'll need to add in a blog module and we haven't used blog modules yet so right here add a new row put a one column row and then insert the blog right here and this is how you can start blogging on your website and blogging is the best way to get found in the search engines you ever like look for something you know top ten best protein shakes top ten best this ten that etc those are all from blog posts now you can have this on your blog page but I'll also show you how you can put it on parts of your website you don't have to use the blog page but we can put it there as well and I'll cover that when we talk about the blog module etc but right here I'll click on save and now we need to make a blog post so right here you see it says no results found and that can suck because no one can read our content so right here in their posts I'll go to add new and then we'll put in a controversial post here we go ten things women want or I'm sorry women want the most and then right here you use the default editor now we can always use the Divi builder as well and then right here just go ahead and put in some contents of whatever you want to talk about the article I'm just kidding it's a big joke but you'll just go ahead and just craft some just grab some text right here and then copy and paste I know my girlfriend's all watching she'll be like this is not cool it's just a joke you know it's just a joke so anyways over here under documents right here under featured image this is where you want to select the image of your article so when you're talking about something what best represents your article I'll put something like this right here and you know or yeah but we'll put that we'll just put that said that as our featured image and then I'll publish this post now one thing also we can do here is I'll close this and we can add categories so right now this is under uncatted but we can add a new category of something like girls and add that as a new category and this is actually very helpful because whenever you want to talk about girls you can have that blog post display only the posts that are in the girls category so again here I'll click on updates now one more thing I want to show you really quickly that is very stylish here all you have to follow me here but I'll just go to add new post and then I'll do like ten things men hates and what I'll do here is you can actually use the Divi Builder instead so right here use the Divi builder and you can actually make a custom blog post the way you want it to look now I don't think that they have any blog post pre-made layouts here let me go take a look I don't think they have any on hand and see your blog oh they do so we can go ahead and grab something like a blog post let me see here this is perfect so I'll use this layout right here now you have your API key you will go ahead and get that from your credentials from your elegant themes account so right now I'm going to enter in my username and API key alright so I answered in my API key I'm importing the layouts and this right now is my new blog post so you can actually use this instead which is basically a very nicely well designed blog layout instead of using the default editor if you want to do this and you want the full width page you can go ahead and change that so right here I'll click on publish really quick and just like you make the regular page you can use your blog post for your you know your you can use a Divi Builder for your blog post so right here I'll go to edit the visual builder edit the posts so if you want to make this full width just scroll down right here where it says page layout you can do something like full width right here and then the post title which shows the actual the the title of the post you can get rid of that or you can show it so here I'll click on hide updates and then we'll go check this out right now so right here I'll click on preview and this right now is your new blog post so I think it's very stylish it looks amazing it looks really really cool now again if you want to have this on a blog post that's all you need to do you can always go ahead and change this to show the post title and then right here I'll go ahead and refresh its and we have this right here now later on in the features section when we talk about the features I'm going to show you how you how you can use dynamic content and what that means is that this title right here will automatically use your title right here instead of having to use this post title because that's pretty ugly so make sure you stick around because I'm gonna talk about the very advanced features with Divi and talk about things like extend styles dynamic content the theme builder etc so make sure you watch this tutorial all the way cuz I guarantee it your gonna miss out on a lot a lot of features anyways let's go ahead and go back right here to visit sites close this right here and I will close my look in themes API key I'll scroll down right here and now let's go ahead and first need to enable the visual builder all right I'll scroll down here to the bottom and we have our post right here now I forgot to put a featured image on my other post but right here under the module settings for the design we can have a different layouts so I like to have it as a grid layout instead I think the grid layout is much nicer you can see that now right here I forgot to put the featured image so if you like this look you can just not put the featured image this right here I believe is better but I just want to give you a demonstration of both now just like we've designed everything else so right here just click on it if you want to design this right here you know changes to poppins and then you can design everything from scratch so that's just a way on how you can you know design everything so I'm not really gonna go too far into this because I think by now you kind of understand how to make this work you can add different styles you can add borders and you can style your blog the way you want it to look now whenever you write a post they will display right here however if you want only specific categories like girls only the categories for girls will display here you understand so if you have a specific category for your homepage you can go ahead and achieve that by setting it up right there also like you know show excerpt excerpt is the contents right here so you don't want that to show or if you want all your content to show you can put that option if you want to show extra but not all of it you can put something like 0 so extra is basically the number of characters so right here I'll put in 100 so it'll show 100 characters etc so you can control how long do you want these to be etc so this route those settings have fun and I think you can get the hang of that I'm not gonna make a lot of blog posts because you know I don't want to oh but I hope you guys found that helpful I mean you guys can blog til your brains you know go crazy etc so it's not I've showed you guys how to do the blog post and everything we are now finished with our homepage the only that we're gonna do now is we're gonna talk about the theme customizer now this part right here was done with the theme builder and the theme builder I'm gonna talk about towards the end of the video because it's a more advanced topic so make sure you stay till the end because I know you guys have probably done this and you get comfortable and you might want to say oh I know how to do it now trust me everyone comes back and they asked me the same questions that are in my video so please watch this till the end so now that we've done that let's go ahead and click right here and click on save and congratulations we now have a home page of course you can go ahead and make some edits to it and change some things but make sure to get a beer because you guys are doing very well and you guys have successfully made your first home page now let's go ahead and talk about the theme customizer where we can edit the menu we can edit the footer we can upload a logo colors etc so making your website is pretty easy right so now in this next section I'm going to introduce you all to the theme customizer now every theme in WordPress has a theme customizer and it essentially allows you to change things like the menu the footer the logo and just add different blog layout through commerce layouts etc so let's go ahead and talk all about the Divi theme customizer let's go alright so let's move on to the theme customizer so right here under my wordpress you see theme customizer now you can also get there by going to dashboard right here and clicking on customize your website so virtually every theme out there has a theme customizer and all the work in different ways so right here we have general settings site identity this is basically the tagline right here if you had no icon etc or I'm sorry if you had no logo but we do have a logo and I'll talk more about where you can get logos just a bits right here we have site icon so you see here how right here there's this icon right here for this website there's an icon for this websites this right here will give you an icon on your website so I'll just go ahead and just grab something really quick and just give you a demonstrate you see here how the D displays right there and right here I'll cop the image so when someone visits my website now they're going to get that logo right there so that's really really cool in fact if you're using something like HTML that can take you a really long time to use but WordPress it is super simple layout settings now I don't want to mess with this but you can actually reduce the size of your entire website so if you don't want it fullscreen you can go ahead and mess around these settings but personally I don't think you ever need to use this because you can do all this with the page builder so in short the page bowler and the theme customizer making kind of conflict with each other at certain times I just want to make that clear because you might be confused on some of these settings like typography we've already changed all of these settings but this is for a global font so for a header fonts what you can do is saying look I want all my header fonts to be able I want all my body fonts to be something like this and you can see here how it's changing now personally that's a good way on how you can speed up the process but I like to design it from the module itself I don't know if I'm going to change my mind later and I don't want this to conflict here we have body link color so for example right here we have the link color and we can go ahead and change that to anything else you can have it like black or white etc body text color and again a lot of this stuff right here can be edited from the actual Builder itself so I don't recommend with messing around with the typography and everything from this point of view backgrounds I wouldn't even mess with that because that will basically put a background if there is no background which is very useless because I mean why would we do that so anyways let's keep going here so header navigation header format so this is actually really cool so for the header style we can change the menu right here so we can have centered centered in line with the logo slide in so when I click on this that will slide in like that or we can have a full screen menu which basically will display like this right here and then we can also do hide navigation until scroll so what this means is when I scroll then it'll show the menu so something in that nature if you want to achieve that let's all right now I'll just go ahead and just do I'll just do send our in line with logo I think that's pretty dense cool so that's basically how you can change the menu right here primary menu bar you can make this full width but this only works if you have the other setting on so by default we have it too in line so if you have it to another setting we can make it full width I think I give you an example really quick right here so I think on our defaults right here you see here how now it's full with the logos way over here and this is like pushed all the way to the rights and you can kind of like mess around with these and see how it would actually work because some of those settings they work in conjunction and some don't work at all so it's just a way on how you can kind of do trial and error stuff like that but here I'm gonna do I'm gonna keep it at center line with logo so right here we have different options like the menu height you can change the height of the menu right here you can change the logo height as well so you can make the you know make it bigger here we have the text size you can make the text bigger now remember this is only for the menu right here so you can be as customizable as you want right here you can change the color so you want to change the color of the link color you can change the color of that to you know anything that you want for the link color see that but I'll go ahead leave it as black for now the active link color so that's when they click on it what color do you want to display so if I change this to something like black right here now it's black and then the background color the drop-down menu background color etc so go ahead and mess around with these settings you know I don't want to give you an example for each because that will make this all very long but you can kind of mess around with it and get a better understanding of it's right here I'll go ahead and put Poppins because we're using Poppins right now I got to scroll down all the way to the end right here to find the P for Poppins and then put it in there here there we go where is it every there yet are we there yet poppin there we go Poppins alright cool so going back here we have secondary menu bar and this is for a secondary menu bar at the top if you choose to have one this theme comes with a secondary menu bar and I think you have to activate so I'm gonna go ahead and see under the header elements so right here if you put something in like let's see here I'll just do one 1-800 do you think the the 404 etc and then show the social icons now alright now you can't see it so what you have to publish it and then you have to close and go back to your site and now you see here there's this top one right here so you can have a secondary menu right there to display and then you can always change the color so if you want to have this feature you can have that and it looks pretty cool but you can always make this again in the theme builder which we'll talk about a little bit later at the end of the tutorial the theme builder is very powerful it gives your site tons of functionality and it's the reason why Davies number one in the world right here under header elements I'm just going to get rid of those you get rid of the phone number and I don't really want it because I just don't need a secondary menu bar I'm just gonna go ahead and you know whatever we don't I don't really care for it too much but so let's go back over here and let's go back again now we have footer so on the footer it's controlling this section right here now right here we have layouts so this is a four column row we can change it to a three column row or two column row or you know whatever you want to do over here we have widgets and widgets are basically this stuff right here so this will change the the size of the fonts this will change the you know bold italicize you can change the color of this as well to something that you want and yeah you can kind of go to these settings mess around with them but this is controlling this section right here for the footer elements we have social icons at the bottom and this theme needs to update because Google+ is dead now so yeah but if you want social icons to show you can show them at the bottom if want to take them off just take them off like that footer menu so this would be the footer menu right here going back over here we have the bottom bar and again you can adjust this as well actually I think this right here was the footer menu I believe that is this section right here and this section the bottom bar my bad I had those two mixed up so you can kind of mess around those settings and you know get comfortable with it etc so that's just the one how you can you know decorate things and be customizable let's go ahead and go back over here and buttons I'm not gonna go over buttons the blog post these are for your posts so whenever you make a post on your blog page you can design it from here but you can also design it in the Builder as well so it just depends on you know this is global so it's up to you at that point but I preferably would do it from the Builder because I just remember I just want you know full control going back over here mobile styles now we'll talk more about mobile a little bit towards the end of the video because our site right now is not optimized for mobile devices such as a tablet or the phone but I will show you how you can have it optimized for mobile it's very simple it's very easy it takes like a few seconds let's go back right here color schemes I'm not gonna mess with this because you know my site already has the color scheme I wants menus right here so this right here is my primary menu and if you want you can always build your menu right here instead so you see now how the about us is a drop-down but personally I'd probably build the menu from the back end not from this part because you you're limited to what you can do here so you know I just wouldn't use it I would just basically you know use what I want to use etc widgets so right here up we have footer area one let's go ahead and scroll down right here so you see here how there's a lot of these things stacked together let's go ahead and delete this pleat this and then I'll delete this so footer area one this is this section right here so I want to add a widget right here and then we can display something like you could have Adsense you can have an image you can have text so you know about our company and then you know how we got started so here you can just go ahead and put in some dummy text about your company etc so paste and then paste and then there you go so you get the idea there right so it's just basically a footer you know and you're just putting in stuff now if you want to added something I recommend going to footer area to in adding another widget right here now there's also plugins on things you can use like a Facebook like box and Instagram feed and they're virtually all free but let me just give you a few more examples right here so for the pages right here I'll just list the pages you know so now we have all of our pages listed there going back over here for area 3 so on and so forth so now you can get an understanding of you know how you can add a calendar or something like that today's date it's a calendar working let's see here sometimes you have to type the title in and sometimes then it displays I'm sure it'll display it's probably just being a little weird right now sometimes guys in the world of WordPress weird stuff happens all the time out of widgets and let's just go ahead and search for one more you can add a video or something like that now right here I'll click on publish really quick so I've shown you guys how to use that wonder if those calendar is working or not and see today's dates I probably have to close it and then check it out so we'll go ahead and close this right now and let's just see if that displays now I'm gonna show you all how to get a logo and then I'll talk about a facebook like box and plugins so there is the calendar if you have to close the theme customizer sometimes and then it works so sorry if that was looking weird but so let's go ahead and first we'll do the Facebook like box and then we'll talk about the actual logo so right here under plugins go to add new now guys plugins think of plugins like applications for your website so just like your iPhone has an application for your bank it has an application for pictures this is the same exact process so for example right here this right here helps you cache your website this right here is a pop-up plug-in it creates pop-ups this right here is under construction this right here translates your websites and so on and so forth so there's so many plugins out there and you can kind of get an idea of the amount of active installs and also the number of reviews on these plugins as well now there is over 48,000 plugins out there so I can't lecture you on which one's the best but we're looking for a Facebook like box so just type it in you know Facebook like box and the one I used before was this one right here so easy like box page plugin we'll go ahead and install this one right here and it's installing and then I will go ahead and click on activates I found this one to be easier and it's just very simplistic so go over here to your dashboard customize your websites and then what we can do here is we'll go on over to widgets widget area 3 pull out of widgets and then just simply click on the easy Facebook like box and what we can do here is scroll down to the bottom of the page make sure this is working and then just go ahead and enter in your Facebook fan page URL so right here I'll enter in my URL for my fan page and then you can do things like show your friends faces call-to-action if available small header and also this will adapt to the container with of the actual the space right here for the widgets you can also make this longer you can make the width difference as well so you can go ahead and customize this and make a little bit difference I think you have to take this off right here to kind of change everything the way you want it to look yes you know once you take that off you can kind of make it bigger and smaller you can adjust the sizes but I'm just giving you an example of how you can add a Facebook like box to your page or Instagram feed etc so it just takes time to take around with etcetera so now I've shown you that right there let's do the last part which will show you how to get a logo for your website now there's a link in the description it'll take you to a web site called fiverr.com so this is the website and I actually do have a discount code for you all as well in this video but let me just go to logo right here now this website is where I got my logo from and these guys make logos for dirt cheap so we can do here is you can go to something like budgets and just do zero to $10.00 something very small now the reason why I recommend this because I've seen other tutorials where they recommend like free logo builders but they look terrible and it's like you can't be practically you cannot use that for your business like maybe in like a developing country you could but for most countries you would use something like this right here something very amazing looking it looks great I mean something like this right here's practical I mean $10 for this style of logo is incredible so I'll put the coupon code in the description below I think it's Darrell 10 will get you 10% off any order which saves you a few bucks you know saves you like a dollar you know so it's something you know it's something but definitely get your logo here now once you get your logo you can go and upload it so when they make you a logo just ask him for like a PNG file or jpg whatever and over here under Divi you'll click on theme options so right here we have logo and what I'll do right here is click on upload and I'll go ahead and upload my logo right here now my logo is 800 by 267 pixels set as the logo now there's other options right here that didn't really talk about you can kind of go to these on your own and just kind of take a look at them like for example those social icons at the bottom you can enable them they're very self-explanatory and you can just kind of understand this by reading it smooth scrolling that's a really cool one actually back to top button really cool I like that's CSS etc Save Changes so they have other options right here like you know your integrations your updates your the Builder navigation etc so just go through these settings and see if they're for you or not but for most of us we don't really need to use these settings especially for beginners and I'll take a look at our websites so I enabled smooth scrolling I put in the logo and I also have the scroll to top button now right here you can't really see anything because our logo is white so on my demo website I have a dark background right here so what I can do here is go to header navigation primary menu bar find the background color and then go ahead and see we can go ahead and paste I'll go ahead and or that color code I don't have that color code on me but you know pace-it black or something like a lighter black like that and then what I can do here also is I can change my text right here to something like whites and then right here under the text color I'll change this to whites and I'll make it more brights so we can you know see it's now right here the link color is also when you change that to whites and there you go so I'm just give you an example of how you can design it right there so the logo looks pretty sharp it looks pretty cool now let's go ahead and just take a quick look at our homepage so I'm gonna scroll down right here you've noticed here how the smooth scrolling is now taking an effect and on the right side right here we have this scroll to top button which will enable us to go to the top so the site is already looking really really good now for these next few pages I'm actually gonna give you templates but I want to go ahead and create the bow to us really quick and they'll give you templates for these services the blog and the contact us to speed up the process of this tutorial all right party people you guys have done a really good job so I want you guys to relax get your favorite beer because in this section I'm going to make the about Us page all by myself to help give you some inspiration and ideas on the web design flow and process so are you guys ready let's go [Music] so you notice here how I you know I could have used other images and I just decided to placate it just to give you an example but you can see here from the website that the structure is a hundred percent the same now of course the icons and the text might be a few pixels different they might have different icons but in general we basically use the same exact structure so now that I've shown you how to make the website you kind of get a better understanding of how I built the website now for all of you that I've actually stayed this long and watch this video I've actually made this entire website from scratch and I'm going to give it to you all for free in this video so you don't have to worry if your site doesn't look that good in fact you can actually download this whole layout from my website and you can actually have the home about the services the blog the contact and more importantly the theme builder kits which I'll show you how to use in chests a bit so once you actually download the layout let me just show you how you can add it to your website so here my text to the visual builder I'm gonna save my work and I'm gonna go to the services page now what I'm gonna do here is I'm gonna make this a little bit smaller and the layout that you get will be in a zip folder like this and just unattracted or open it and then here you get the folder and then all you need to do right here is just go ahead and take this JSON file and then oh I got to enable the I got naval visual there first oops and then build from scratch and then just drag-and-drop this so take this and then just drag it onto your screen and then it's just gonna say do you want to upload this and just say I want to import this Divi Builder layouts so right now it's important the layouts and voila everything here is done so right here I'll close this and scrolling down and everything is good to go now the reason why this looks different is because of the theme customizer settings because I have it set to this font globally so you want to make sure that once you upload this you don't have to mess around with the theme customizer because you can see here on the bottom right here that text is being carried so make sure on the theme customizer you have it set to default or else it will go ahead and put in the font that you have for the theme customizer so that was just a very fast way and a convenient way on how you can get your website started because you know I think by now you can understand how to build everything so let's go ahead and keep going here so I'm gonna go to exit visual builder we'll go to the contact us page and I'll go ahead again and shrink this a little bit I'll go ahead and open this right here I'll grab the contact us section and I'll go ahead and enable the visual builder oh that I download that correct where is it I put it I put it you contact us page it is see the cons I think I moved around a little bit when I did that there we go put it right there or apply from scratch I think I moved it around or I think you'd think you'd know that here there it is that's weird import Divi Builder layouts so now it's importing and then voila it is all done so again you have a full contact form already done for you you just have to go ahead and adjust things do you want to change the font with the color now the contact form is very dynamic in the contact form is very advanced now I have a separate tutorial for the contact form specifically for Devi because they have something called conditional logic and you can do things like for example if they answer a question you can have it answer another question or another question and depending on their response your contact form can adapt and change and I've made a separate of tour for that so that tutorial will be in the description below I just didn't want to cover it again because I already covered it in another video and it's already 30 minutes so I didn't really want to add that in but the contact form for didi is amazing you can do a lot with it so be sure to check out that tutorial so here I'll go ahead and click on save again now these again right here are also a different color and that is because of the theme customizer settings so when you mess around with this just make sure that the theme customizer settings don't conflict with this right here that's why I don't like to use a theme customizer because it conflicts with my websites right now it's going on I here to blog now for the blog section again so here you can see the font has changed for the theme customizer so remember the theme customizer is a global effect now that I've showed you guys how to do that let's go ahead and use the last one which is the blog right here so I'm gonna go ahead and build from scratch open the web agency and right here I have the blog kit for you all right here so I'll go ahead and just go ahead and put that right here and I'll go ahead and import this layouts and you are all set and all done so you can see here how it's already pulling the posts because the blog modules already created we have the header already made for you and then right here you just go ahead and enter in your blog post etc so if you guys want to download this whole layout again remember it's all my websites Darren Wilson calm I do have other layouts as well for you and they're all for free they don't cost you anything whatsoever and I do this because you know you guys are probably getting started you guys need help it's like I did so I feel that these layouts will help you with design in decor so now I've shown you guys how to actually make everything from scratch I've showed you all how to basically make the websites our website is complete now there are some very important things that we need to talk about like the theme builder and also the advanced features such as custom styles abs for testing a lot of additional stuff so congratulations for staying this long and let's go on to the next section where we are going to talk about the theme builder so congratulations guys wasn't that easy now you know how to make a wordpress website so congratulations now in this next section which is very important I'll be talking about the theme builder and then we'll talk about the advanced features and then we'll talk about plugins and freebies for your WordPress website cuz there's a lot of extensions and a lot of a lot of things that you can add to your site that'll make it look really really cool so let's go on to the next section we're gonna talk about the theme so now let's talk about the theme Diller so for this website right here you see that we have this header and we really can't design the header because the theme customizer doesn't give us a lot of control maybe your client wants something a lot more customizable something looks like this right here where you can be very customizable and you can build it how you want it to look now of course this is just an example in fact this is a free template that you're gonna get in this video just to kind of help you out now also over here you can notice that if I type in a wrong address right here your customers are brought to this really ugly no results found like dis sucks etc however I've already pre-configured the theme builder for this website and if I do that they're brought to this beautiful customizable page right here and when they click on this it'll take them right back to the page right there so I feel that's a lot more easier and you know better - better for your website you should say also on the bottom right here you see that the footer has completely changed so something a hundred percent customizable so the theme builder you can actually go ahead and design your header and footer for various pages so if you want a different header and a footer for your about Us page your services page your blog etc you can do that with the theme builder and it looks much more professional and it's better than just the regular theme customizer settings so let me go ahead and introduce you off to the theme builder and how this works so right here we have the theme builder now I have already pre-configured some options right here now all I've done right now is upload some templates and you can actually go ahead and get these templates for free on my website as well Debbie actually does offer these same templates as well and I'm using this to help you follow along in this video I will be creating more templates for you all in the future but for right now right here under the Divi web design web agency kit and also the Divi theme builder pack you can download both of these from my website and then you can use these to help you follow along alright so what I'll do here is I'll go ahead and completely start from scratch so you guys can get an understanding of how all of this work so I'll go ahead and delete this delete this delete all the posts and then what I'll do right here save this really quick and just kind of introduce you to how you can kind of customize stuff so this is the actual layout that you get on my website right here this one right here now the thing is that you're actually building this right here with the actual page builder so that's what makes it very dynamic and very customizable so for example right here if you want to go ahead and add in like a different background right here you can add in this and this is now your new your new website or your new header for your website so I'll just click on save just to give you an example I'll close this right now and let's go and visit my website and now you can see that this is now applied on my header and if I go to any page it's going to follow and it's going to be global so it's going to whatever I put on that section is going to apply it to the entire website now at any time I can just take this off I can say you know what I don't want to spend you know more so right here under the theme builder I'll just go ahead and take this off and take this off save the changes and then go back right here and once you take off everything the theme customizer right here will actually go ahead and take place now sometimes there's a small glitch where you actually get that white screen right there all I need to do right here is go and click on save when you enable the visual builder and that will take off that it's a weird glitch it's only for the back ends it's it happens sometimes but they'll probably fix it in a future updates because this theme builder I just came out so what I want you guys to do is go ahead and download both of these builder packs and I'm going to show you how you can upload them and use them for your WordPress websites so I'm gonna do now is go on over to dashboard go on over to my theme builder right here now when you del with a folder you'll get this zip file right here so you'll get something like this right here close this you'll get this zip file right here and then this right here is also a zip file so just go ahead and open them and then you'll see like the the Divi theme builder pack number six and these all come in Jason so essentially what these are is this right here is a category template this right here is a header for your website and footer this right here is for your posts and this right here is for your product page and I'll teach you all about commerce in my next video so the one that I want you to upload right here is the six-pack default website template so over here I'll try to upload this over here under report ability click on this click on import choose the file and then go ahead and select that file right there so it's going to be the six default website templates so click on open a lot of these to override because what that's going to do is that it's going to import our links onto our new menu and right here click on import Divi theme builder layouts this is pretty convenient guys I mean you're getting a full website of with these free layouts all right here click on Save Changes now let's go ahead and see what's happened to our websites so now you can see that's this new header is being applied and also this new footer is being applied now the reason why the theme builder is so customizable is because on the theme builder options under add into templates you can put this on any specific page you want so for example you can create a custom header and footer for your blog pages for your product pages your projects your your post pages your 404 page etc so a good example would be something like those click funnels where you also I'm going to buy something but you don't want them to see the menu in the footer right so you can disable the the the header and the footer for specific pages as well so right here let's just say you want to go and edit it so right here I'll click on the the pencil and now we can go ahead and edit stuff now I'll be very honest with you all to edit something like this is a little complicated so what you might want to do right here is going over to the this section right here and this will actually allow you to see it a lot easier so for example right here the menu the search we have the row so if you want to go ahead and make changes I recommend doing it this way and then you can always go back and see how it looks so for example we'll go back over here I'll say you know I want to change this right here I want to change this background right here to like a you know a different background color but black this one right here will change this background color to something like black as well and then also this row is here I'll change this to something like black and then also this one right here black as well now let's go and click on save and let's just see what that's done so right here I'll go back and now you can see that the menu is all black now our text is white right here so we probably want to go ahead and change the actual fonts for our text right because our text is already blocked by default so hope you guys understand how that works so anytime if you want to go ahead and change stuff you can do it like this right here I find that's much easier and then again you can always add modules to it so you can start building your own websites right here from the customizer right here so this feature is relatively new and it's very very very convenient so this is just a win how you can have a global header apply to all your website so let's say for instance you don't want to have a template and you want to build it yourself how do you do that well let's go ahead and do that so right here under global header I'll click on build global header now I'll be very honest with you all making a header and footer from scratch is not easy but I know most of you probably want to kind of understand how the process works so right here I'll click on this one right here see this one right here click on that one and what I'll do here is I'll put in a text module and then here I'll put in something like let's see I'll put in I'll put in a button module alright and then here I'll put in another text module now guys I'm not on a script you can tell I've just used the Divi theme a long time so I kind of know how everything works right here on this gear icon I'm gonna click on this now what I want to do is I want to stretch this all the way across right so under the design right here under a sizing I want to make this with a hundred percent and I want to increase the max with something like that see that so now you can see how this is stretched all the way across now on this module right here I want to create the menu so what I'm going to do here is I'm gonna put okay we have the homepage about us the service is the blog and the contact and I'll go ahead and stretch these all the way across like that this put a dot there I want to put the dots weird so you can see here how I'm kind of creating my home about services my blog and my contact now whatever I want to insert a link what I can do here is double click on this click on this icon right here and then put in the URL so this is my my home page right so you could put in your website so you know best Divi tutorial and that's it so this would be essentially your home so whenever someone clicks on this right here it'll bring them to your home page so I hope you understand how you kind of insert links so you can see how it's you know the links inserted etc so I've done that now over here I want to add in a logo now this is kind of a trick right here so don't use an image what you can do here is go to module settings take this text delete it go to add media and go ahead and upload your logo now the great part about doing this is that you can resize this manually so right here I'll click on this and then I can drag it and I can kind of get it the way I want it to look here on the actual you know on the actual the the bar right there now one thing I want to do is while you're building this I can't really see the line where it starts an end so what I'm gonna do here is on the skier icon right here under the design I'm gonna add something like a box shadow and this will help me kind of understand where everything is and how it's going to look right here so I've made this right here and maybe over here I want to go ahead and change the spacing right here so for the design right here under the the sizing I'm sorry under the facing Imus facing it is the is it the air we go or is it or is it risen there's so many options here text alignment you know something like that where I can kind of move stuff around also if you want to add some padding and stuff like that so over here again spacing we can add some padding to the left and to the right etc you see how it's moving etc so you can kind of get an understanding of how you can kind of control where you want this to be so I'll just put something like I don't know 30 pixels or something like that and then again you can always go ahead and go in here and extend the menu how you want it to look et cetera so you get what I'm doing here so I'm just basically creating a custom menu something that looks like that right now this right here is too long so it's you know I'll reduce the padding here now right here the menus not aligned properly you know the de logo is not so a good one how you can change this again is by going to the Advanced section of chart design and then go into spacing and then what we can do here is I believe we can add some negative margin so margin essentially where this is starting from so it's not space it's starting from so now you can see how it's kind of you know it's aligned properly you know it's a line a little bit better maybe over here I can kind of move it to somewhere I don't know we can probably push it to the right more so something like that's right something like that you get it and then over here I see if I have my button saved then we have a button module safe somewhere in the library let's see here oh I know we can do here add from library and then here we go we got the button so I'll just go ahead and delete all this right here and then I'll delete that and I'll drag this over here and then get rid of this as well I don't want that so obviously this button is too big you know so you get the idea here we might want to go ahead and move this up a little bit so for the design section again spacing I want to add some negative margin you know I want to just kind of push it up a little bit like there's something like that right now this button itself is too big we probably need to go ahead and edit that and you I hope you know how to do that by now so we added a lot of padding in the button so spacing and we can go ahead and reduce this right here so I'll put 10 10 10 10 and then let's see here 20 and then 20 and then now we'll go ahead and reduce the margin again like that so all of this menu is not beautiful you can you can kind of get an understanding now of how you can create your own your own custom menu so here I'll go ahead and just reduce all this padding like that and there you go we now have a a custom menu that we created from scratch now remember when you create a custom menu you need to make sure that these actually link to your website so let me give you an example so here I'm gonna open up the same websites alright and here I'm gonna go to my about Us page or I'll go to actually I've already activated the Builder so what I need to do now is I need to go ahead and go to my pages right here if you've actually already done this so let's just say for instance I want to go ahead and link my about Us page so right here I'll grab the about Us page and then for my about right here my about my ballot section I'll go to this link I'll put in the URL for my about Us page and then what I'll do here it should put H HTTP that's very important and then that's it I'll click on OK and then also for my home page I'll go ahead and grab this because that's my home page and then I'll go ahead and put that in there paste that all right and then again for my services page which I have to go back here because I've already activated this on my website pages my services page just click on View and then I'll grab this link up here and then I'll go ahead and put it in services remember make sure it says HTTPS because if it does not you might get a broken link so let's just go ahead and test this now so I basically basically kind of you know chain suffer I missed I've made little adjustments and I entered the links kind of designed this a little bit differently here let's just uh put Poppins again sound already Poppins I mean it's already Poppins but here I'll go ahead and add it in like bold and then we can make this a little bit bigger like that and then you guys can get the idea now the reason why these are red is because in the theme customizer I have my links set to red remember so make sure that if you see something that's different you have to go back into the theme customizer and find out why it's doing that so right here let's click on save and let's go ahead and test this out save close save I mean our headers not bad I mean I spent like maybe just five minutes on this and this is not a bad header like I need to kind of adjust the shadow right here that's about it but let's go ahead and test this out so right here I'll click on home brings us to the home page about us click on it and it brings us to our about Us page service here we go click on services and this is now our services page so everything is working correctly the links are working correctly everything's working out just fine so if you want to make a custom header and footer that's how would you do it so I showed you earlier how to use the demos but this is how you can create a custom a custom header now also for the button you might want to go ahead and put in the link or that button and I think now you know how to do it now there's already a button in here so if I click on this it's gonna take me to my about Us page so right here you might want to put like contact us and then bring them to your contact page you understand so I hope that was helpful have a blast making custom headers and footers it's very fun and you can kind of get some really good ideas inspirations on custom headers I will be having a layout pack for all of you I'm making it right now so there'll be 10 different headers and footers $42 for free so I know I know I'm very helpful so let's go ahead and go on to the next section so right here I'm going to delete this and I'm gonna go ahead and upload the the theme builder here so imports choose the file now I also have another template for you so I've showed you all how to upload these right here now I also have mine that I that I created for you guys so this right here is mine right here and I created the I'm sorry it's this one the Divi help me finding guys it is the web agency kit there you go so right here is the Divi the Divi builder kits and I've actually made the entire thing for you so to use the Divi Builder kits all you need to do right here is click on portability import choose the file and then web HD kits and then click on the theme builder kits and this right here will basically create everything for you just like it is in the demo so what I've done here is I've created a global photo for you I've created a custom body and a global footer for your posts and also your archive page as well I probably should add a 404 page as well but let's go ahead and take a look at what this is done to our websites so our menu is now normal because we're not using a theme builder but you can see here on the bottom now we have this beautiful a footer that I made for you also you can now use this for your website instead of using the defaults you know the default basic one you know that that the theme customizer now you can always go ahead and decorate this as well so in the theme builder right here you can go ahead and change this and make it look how you want it to look so just by simply messing around with it etc now this will apply to your entire websites unless you tell it not to so let's go ahead and mess around the conditions so right here we have the global footer being applied but now let's say you know what's I want a 404 page so right here under adding the templates we'll go up and select the 404 page so when a 404 pages this is basically a template that people are going to see when they hit the wrong link so let's go ahead and click on this and I'll click on atom to custom body and then right here I'll just say I want to add this from library now we have premium lay off that Amy's already made for us and I'm going to enter in 404 or looks like we don't have any available so what I'll do is I'll do what I did in my demo before I'll just simply go ahead and grab something like this right here in one second this one right here and they'll go ahead and use this layout's right here so what I'm saying now is if somebody hits a 404 if someone hits a broken link or someone goes to a part of my website where nothing is there I want this page to be displayed you know so this will help users navigate the website easier so it is importing all right 100 percent cool done so right here under custom body right here I want to design this so what I want to do now is just basically say look I want this to say something like you know loss and then right here I can do something like you know go back home and then this right here would link them back to our you know our home page so here we'll just type in our website so best maybe tutorial comm and then save and then all these other things right here I'll delete the oddly all this other stuff because I just want this to display only I don't want all this other stuff to display so I'll go ahead and keep deleting all this and then there you go so now when someone comes to a broken link over off to this page right here so let's go ahead and test it out so let's go back to visit sites good let's make sure you save that here I'll go to visit sites and I'll just simply type in a broken link and a beautiful so now your customers are brought to this page right here and then they click on it it'll take them back home to the home page so that's just an example of how you can use a theme builder but let's go let's keep customizing stuff let's let's let's keep going here so for example we have this default being applied everywhere and also we have it being applied to our posts and also our category pages however for my about Us page I want a difference header I don't want to use the theme customizer let's go ahead and do that so for Avenue templates specific pages for the about Us page create a templates now what I'm saying here so for my about Us page only I want to apply a different custom header and a different footer etc so what I'll do here is I'll just go ahead and just I'll just import one of those tamo files just to give you an example so I'll go on on over here to the Divi theme pillar pack and I'll go ahead and open this one right here alright so what I've done now is right here you can see that this global was applied however I only want its on the about Us page right here and I want to delete that like this so what I've done essentially is now you can see that the global header is gone and on even on the about us it's no longer green so I have a specific header only for my about Us page let's give you an example so let's go ahead and go to our website right now so this is our website and if I go to the about Us page now you can see that the menu looks completely different and this is what Diddy is so amazing for and also look at that it's taken all of our links and put them inside of the venue for us so we don't have to worry about all that so the theme builder is incredibly incredibly powerful and there are a lot of free templates available for you so I'm not going to go ahead and I mean I have some on my website and Divi also does have them on their website and I'll do my best on my websites to create more for you because some of these headers just aren't practical but I'll go ahead and make a special one for my web HD kit and I'll keep making more for you guys just for free just for watching this video because you know it helped me helps you et cetera now let's talk about the last one we're going to talk about the post so right here we have a custom body and if I click on this custom body what you're going to see is we have this right here and this is called dynamic content so what this is going to do essentially this is going to basically take any title right here from our post put it right here automatically for us so let me give you a better example right here so I'm gonna close this right here I'm gonna close this and I want to add a custom body for my blog posts so right here add a custom body but I'm gonna add one from the library so right here I'll type in blog okay so this one right here this is called the technology layouts so I'll just grab this one right here and I'll use this layouts so essentially what I'm saying here is for every single post that I make I want this template to be applied automatically and this will drastically help the time because usually post kind of look familiar and you don't want to have different styling posts all the time so right here we have custom body but I'm gonna click on this and edit this because we need to change some stuff so I want to talk to you about dynamic content and what that means so I'm gonna delete this really quickly now right here I'm gonna enter in a text module so just a text module and I'll go ahead and take this and I'll move it back up right here I'll move it up right there now right here put the con this gear icon we see this little little icon right here and you're gonna see this icon on various parts of your website if I click on this right here and I enter in post title what that's going to do is now whenever I have a post it's going to display right here so it's going to update dynamically so whenever I make a post that title for that post will display right here and you might want to edit it so right here I'll go ahead and go to undo undo this is one more time here undo and then undo actually let's go back to the history really quick to go back so I'll just go back to here let's see page loaded yeah so you get the idea so they just basically change the font for us etc now one thing that we need to do actually is see this content right here I want to delete this right here and I want to go ahead and add some content and what I need to type right here is the post content and I'm gonna put it right up here so what the post content means is whenever I write tens for that specific article it's going to display right here so the best way I can show you how this works is just by giving you an example so I'm gonna go ahead and delete everything right here because I don't want these other stuff right here sleep this sleep that's delete this so all's I have now is my post content and then this post right here so let's go ahead now and make a post let me just give you an example of what we just did and then you'll understand it a little bit more so right here under the post all right so I'll put why men are weird and right here I'll use the default editor and alls I need to do is just simply go ahead and just type in some demo content so I'll just go ahead and find some demo content right here and I'll just go ahead and paste this demo content in here alright and right here I'll click on publish or actually I'll put a featured image first so a featured image and then I'll put something in like this right here let's see this right here and publish now watch what this does watch how much this is going to change so it's going to click on if you view the post so now you can see that the featured image is back there why men are weird has dynamically displayed right here and the content now displays right here automatically so essentially what we're doing is we're using a templates for all of our posts so that's how dynamic content can kind of work out in your favor with this theme so that's basically a quick rundown guys of the of the theme builder it allows you to essentially add a header and footer on various parts of your website so it's a very powerful tool and you'll see that you can have different custom headers and footers on various pages you can be fully customizable as much as you want with your websites so that is an example of the theme builder I do have a second video on how to use a theme builder a little bit more in depth with people who are using WooCommerce products or WooCommerce archive pages as well so if you are interested in seeing I'll put that in description as well but that is a quick rundown of the theme builder and how you can be really customizable with your websites so I hope this was helpful let's go ahead and go on to the next section we're gonna talk about the features of the Divi theme so now you understand why the theme builder is so important if virtually allows you to customize every part of your website with the actual page builder now other themes do not offer this feature so other themes are stuck with the template and they can't modify it they can't change it and if you have a client that wants it to look a specific way you're gonna have a lot of problems but with Divi you can customize it the way you want it to look on your website and I will be having a ecommerce video with this same theme coming up in just a few weeks so be sure to check out that video so another showing you while houses a theme builder which was very important now let's talk about the advanced features of what this theme can really do as far as extend styles find and replace maybe split testing etc so let's go on to the next section we're gonna talk about features so in this section I'm going to teach you all about the features of what this theme can do now there's a lot of features that come with Divi so I'm gonna cover them one by one to help you improve your web design process so the first office talk about the a/b split testing so on my module right here I'm gonna right click and you see we have these options right here now I'll cover these options just a bit but right here we have split tests and splits this is a very unique feature that comes with Divi so what I want to do is I want to split test if people are actually clicking the contact button right here and what Davy's gonna do it's gonna create two copies of our website so for example right here I'll put welcome to the web design or put something like this I'll put need a quote need a quote for web design and right now if I click on save right here what's gonna happen is Davey's gonna create two copies of our website so we have this copy and then we have this copy right here essentially what it's gonna do it's going to rotate these two quotes right here and it's gonna tell us which visitors are clicking on the contact more based off what we have done now you can decorate this any which way you want you can add more modules you can add different elements you can change the color you can be customizable as you want so maybe for one we'll have this as red and then you've notice here how I have it as like a teal color so you can kind of mess around with this and then see which one works for you and then later on what you can do is go over here to the analytics right here and you can see which one is it being clicked on more now I'm gonna let this run for just a little bit and then while it's running in the background I'll go ahead and talk about some of the other features but this is this a B split testing feature a really cool feature now another thing that is really cool is that didn't show you was these shaped dividers so let's say for instance I want to go ahead and add in something like a shape divider I don't want to have this this line right here so what I'll do here is under this gear icon I'll go to the design tab go to dividers and on the top right here I'll go to this one right here and what this is going to do is it's going to actually add these really cool dividers so I can have it like this I can have it like this or like this etc now another one how you can style that is by adding in the shape divider maybe right here right so for example under this section right here I'll go to design dividers and on the bottom section I'll put a white divider right here and have it look like this right here so you can see here now the website looks really cool like that just looks really amazing and then you can go ahead and change these right here to various different styles depending on what you're trying to reach so that is an example of the shape divided which is a really really cool feature next we have I'll do bulk editing so I have these three images right here but you know I'm lazy and I want to edit these all at the same time I don't want to have to duplicate it and then drag it over etc so what I'll do here is I'll go ahead and one so I'll say yo on I want to edit this one right here so actually no I'll go ahead and hold shift I'll click I'll click and I'll click and now when I click on the gear icon now I can bulk edit all of these at the same time so for instance right here under the design tab I'll go to something like a box shadow and you can see here now I'm editing all these at the same time so I can go ahead and just mess around with these and see what I like but this is an example of how you could speed up the process of making your website so this is called multi bulk editing so it's a really really cool feature and you can also use this for four you can mix and match elements so you can use you can use like different ones at the same time so this one and this one and this one etc and you can be you can basically customize different modules all at the same time so if there's a way that they can be compatible together a DV will recognize it and then apply the features to all the modules so that's a really cool feature next we're gonna do find and replace and then we'll do extend styles so you've noticed right here how everything is turning a different color and the reason why that is because earlier I was messing around these settings and I did something called find and replace but for now we're going to use extend styles only so let me go ahead and go on over here to my design and I'll change the button to something like red or see white will change the background color here background color to something like red right so I have this red but what I want to do here is I want to extend this style of button to all of the buttons on the page you know and I don't want to have to go do everything from scratch now there's a few ways to do this what I can do here is I can right-click on this and I can click on copy module styles and then on over here I can paste the module style so all the things I've done to this button right here I can paste it onto another module or I can say that's gonna take too long maybe I want to extend this through the entire page so right here I'll right-click I'll click on extend button styles and it's gonna say okay where we can go this page this section this row this column etc I want to say this entire page so I want to extend this right here this style button to all the buttons on the page the same exact style so right here I'll click on extend and now you've seen that all the buttons have changed to this specific color what is it doing over here what are you doing over here get back over there what the hell was that yeah alright so you've seen that how we basically change that now let's go ahead and do something a little different let's just do find and replace so what I'm gonna do here now is let's go ahead and scroll up right here so I have this color right here this this teal color now I don't want this teal color no more I want to go ahead and change all the teal colors on my entire page to red so let's do that so I'll just go ahead and select any single one so right here I'll click on the skier icon go to the background right here and under this color I want to right-click it and I want to go to find and replace now this is very helpful because you saw earlier how the site was all red maybe you want to change the color scheme of your website and you can see here how I simply just changed it dramatically by entering this to this so what I'm gonna do now is I want to change all of the colors from this to what let's change it to something like yellow or let's say yes to yellow I know that's ugly but we'll see how that works and replace all so essentially what I'm doing is changing this color to this color and replace alright and there you go now this is a great way on how you can drastically speed up the style of your website because you don't know if Reds the good color maybe teal is a good color maybe you know blocks a good color so you can see here how it's even changed the dividers it has changed everything now the only thing that it hasn't changed is the background images so if there's a background color you won't it will not change for the specific background color but you can just go ahead and then copy the module style and paste it in same thing so that's just an example of how you can kind of get some ideas for your websites and just by looking at this I mean that looks pretty sharp right it looks pretty cool it pretty unique so that's just a one how you can actually speed up the process of getting different ideas for your website with the extend styles I'm sorry fine hand in replace now another feature that we can use is the h2 h3 h4 Find and Replace so let me just go and give you an example so for example right here I have an h3 tag and I also have an h2 tag see that so H 3 H 2 so this section right here controls all the h2 so under the design tab right here I'll go to heading text now right here we have h2 now we can actually right click on this and we can go ahead and say make Styles default now what this means is that whenever I create an h2 tag anywhere on the website it's going to automatically propagate all of these settings to any h2 tag I create so this is actually very helpful because whenever I make an h2 tag somewhere else it will automatically use these settings and apply it automatically and it will quote update dynamically so if I want to go ahead and say yes you know what makes this make this the extended style so now whenever I make an h2 tag it's always going to have these same settings on there so that's a really cool feature and that will save you a lot of time that's why I kind of don't recommend the theme customizer so that's just another when how you can speed up the web design process I mean guys these Styles I mean these features are incredible I mean other themes don't even come close to what this theme offers so let me go ahead and talk about some other features now I want to end this test really quick so up here on these analytics it'll actually tell you which ones performing good now I haven't really ran this test for a while so I'm not really to get any impressions or clicks because people don't know about my website but here it'll actually go ahead and tell you ok this person saw your website it got this many clicks it got this click-through rate etc and then you can go ahead and end the test and whatever one performs the best you can actually say well this one right here had like a 67% when you're on a 25-percent so you want to go ahead and click the one that is actually performing the best so I'll just go ahead so like that and then I'll go ahead and just click on save and then I'm all done right there so there's just a one how you can actually perform a be split testing on your websites and it's a great way of how you can track you know how how well your site is converting etc now another thing that we didn't talk about on the bottom right here was these purple little buttons right here so this button right here this will actually export your entire website so just like I made the the templates for you right here you can just go ahead and click on export and then we'll go ahead and export all the work and you can apply it to a different part of your websites or you can just go ahead and drag and drop it etc here I'll click on close it's saying it's been weird whatever here I'll go to imports and then I can actually go ahead and import those files just like you have done with my layout etc this right here is very helpful so let's say for instance you made some mistakes so let me say for instance I'll go ahead and change something like this right here and then over here here I'll close this and then over here I like this and then over here I'll duplicate this and then over here I'll duplicate this row etc now when I go to this option right here it's kind of basically it can go back in time so let's say for instance that say now let's go back to my clone images or let's go back when I edited a text or let's go back when the page loaded etc so you can jump to any part of your websites when you're making it so let's say you've been a big mistake you can just go ahead and go back to the history or you can right-click and go to undo or redo as well to basically get you know to where you were back before this option right here this is your page settings and yeah you know your color palettes spacing advanced this is basically what's available in the any options when you make the payees or personally I don't really think you'll ever use any of this stuff I've never used it personally so I'm not really pro at it right here is trash so you can go ahead and clear your layouts this right here is saving it to the library so if you want to go ahead and this specific page or maybe a different part of your websites you can go ahead and do that now also every module as well has that same feature so right here if I want to go ahead and take this and save it to the library just like I made the lives of the about Us page you can do that right there as well and then right here under the plus icon you can always go ahead and add in your layouts or your saved layouts and also anything else on your website now another feature I want to talk about is the add to library feature and also the drag-and-drop feature with templates so let's say for example you're building your website right and I have this whole section so right here on this little blue icon right here I have this save section to library so I'll just say that this is a section for my home page right section or home page and then save to library now I can also save a module I can also save another section so I'll also grab this teal section right here as well so save row to the library and I'll just put a teal one or teal teal section I don't know that teal I think so right I mean I don't know I love that the teal or not so here go ahead and say this really quick now what I'll also do really quickly to do like kind of like a two birds in one stone kind of thing I'll click right here and click on export and I'll just put home page and export this alright and you can see here on the bottom left how this has been shared so what I'll do here is I'll take this and drag it and put it on my desktop now what I'll do here is I'll actually make a new page so right here plus page so here I'll just put demo demo page I'll just use this as an example I'll click on publish and then right here I'll click on use the Divi builder so right here I'll click on build from scratch now you can see right here it says add from library so add from library and then right here we have the teal section because this section right here is actually from the teal section now what I can do here is click on the blue icon and add from library now any section that I saved from the blue section will appear when I click on the blue plus icon you understand so right here I put section four homepage and then there you go now also right here if I click on the icon right here I have add from library but notice here how only the teal section displays so depending on where you saved it from it will say that to your library so I just want you to understand how it saves modules let's go ahead and step further here so I'll actually save this one module to the library so text module save to library now in order for me to get that to come back if I click on this blue one right here it's not gonna show up right here so it doesn't display right here what I need to do is click on this one right here and then add from library so you understand here how it's basically categories of your sections and then they kind of categorize it in your library so just remember where you put it so you can use it later because a big mistake with amateurs is that they save something to the layout like this and then when they click on this right here or something like right here like hey where's my layout man it's not there what's wrong with Divi and it's just they save it in a certain category they save it wherever you saved it laughs so that's as an example of how you can add things to the library now another really cool feature is you saw earlier how I am I exported that layouts now a quick way to do this is to simply just take this layout and then just drag it on your page and then right here click on imports and just import the daily Builder layouts so right here I'll click it again and done see that so the entire page is now done so that's just a shortcut web how to do it this is called the I think they called it like drag-and-drop or something like that and it's very underlooked but again it's very helpful so I just wanted to go ahead and cover those two features as well in this video that's basically it for the features guys I've talked to you about all of the features everything I can do so I hope that part was helpful for you make sure to use these teachers that are very very helpful so now you understand the features and why they're so important I mean you can drastically speed up the process of your web design flow now in this next section we're going to talk about the most important topic which is mobile optimization now as of 2000 think it's 15 there are more mobile users than there are desktop users so having a responsive website is crucial and Google will actually break you better if your site is mobile-friendly so let's go ahead and go onto the next section we're going to talk all about mobile optimization so congrats on making it this far guys you are doing really really good now this last section is the most important section of this tutorial and this is about mobile optimization now there are more mobile users and there are desktop users so having a responsive website is very crucial in fact Google will actually rank you better if your site is quote mobile-friendly so this is what your website looks like on a computer right pretty basic you kind of understand now you know the basics of it now this purple icon now first off you can actually move this icon over here if you choose or you can move it over here if you choose it's really up to you but now we have these options right here on the left side so we have a tablet view and also we have a phone view so right here I'll click on tablet view so this is what your website looks like when people are visiting your websites on a tablet so you can kind of go through and say you know what's I want to go ahead and adjust some stuff I want to change some stuff and you know you can make any any changes that you want to your site so for example this is a great example this right here is too long it's on the right position let's just get rid of all this red right so I'll go ahead and click on this icon right here and under the text right here I'll go ahead and scroll down actually it is under the background or it is under the sizing right yeah sizing so the sizing right here you can see here how it says tablet 72% so I want to go ahead and reduce this like that now you notice right here how for the desktop nothing changed and if I go back to click on phone you'll see the phone is somewhat longer you know so maybe you want to go ahead and reduce it as well for the phone so you can have a website it looks completely different from the Teta the desktop and also from the tablet and the phone you can essentially have three different looking websites you can fully optimize you know every section accordingly now let's go ahead and scroll down right here so as you've noticed there might be some sections that you don't need for mobile users right I mean let's take a look at the desk at the the phone right here do you really need this section right here for the phone no you don't so a good way instead of having to optimize everything is you can just disable this section for mobile and mobile visitors and tablet users so right here under this gear icon I'm gonna go to the Advanced section go to visibility and I want to disable this section for the phone and the tablet because this information is just not needed it's too much and I feel that people will be overwhelmed and they're just gonna leave the websites now right here I want to actually Center this for tablet users so right here under the gear icon I'll click on this I'll go to design go to text and I'll go ahead and find the center alignments so when you do this you want to make sure you click on this little phone right here select tablets and then you would click on the middle parts for the phone again same thing middle parts the desktop I want to on the left side so when you do this you essentially have a website that looks different depending on what device they're on so here I'll click on check and then again the same thing for this divider right here so the divider right here I'll go ahead and go to design and then leave is sizing yeah sizing so module alignments so for the tablet right here I want to put it as centered so you see here now it's centered and then also for the phone right here I want to make sure that it's also Center aligned as well now for the desktop you've noticed that nothing's changed so it still looks like it did before so that's just the one how you can kind of you know manipulate stuff and move stuff around etc so right now I am in the phone of you right now so how does this look does this look good now this image right here is not needed we don't need this image right here because it's just not relevant and it's just not important so what I can do here is I can click on module settings advanced and we'll go to the visibility and I'll just disable this for the tablet and the phone so I think this right here is more crucial and this image right here it's just not needed it doesn't really show any sort of importance now this section right here can be a little complicated because I feel that we don't really need this section right here right so again the same thing I can click on this gear icon right here or maybe I just want to go ahead and hide this image or that image etc but maybe right here we don't need all this info I like this call to action that looks good so what I'll do right here is I'll just go ahead and disable this right here also for mobile and tablet users so something like that right this section right here we probably need to go ahead and adjust this a little bit so what we can do here is we can add we can you know there's various ways we can do this we can Center align its so right here I'll go ahead and get started so with gear icon I'll go ahead and go to the sizing and then for the see right here for the module alignment for the tablets I want to is centered and also for the phone for the phone right here oh let's go ahead and reduce this really quickly that's a little too much I think that's so the tablet looks good and then also for the phone that also looks good as well clicking on next section right here let's go ahead and scroll down kind of kicked us out right there it's kind of annoying but you'll have to just kind of you know go back to it oh sorry you know here I'll go ahead and click on this gear icon now right here we're controlling head number three so for heading text number three I want to go ahead and center align is for the tablets and also for the phone but not for the desktop so you can see here how it's remained the same so that's just a way on how you can you know make it look good and then over here you know what's we can just delete this or again same thing design go back to spacing you know sizing sizing sizing mojo alignments and then we'll just go ahead and Center this for the tablet and also for the phone as well and then for the desktop it can just remain the same so that's just an idea on how you can get your sites now optimized for mobile and make it look accordingly to what Google expects you to make it look like so go ahead and go through all of your pages and then kind of mess around with it now there's a section that you just don't need for mobile just get rid of it because remember users have a very short attention span and you know even for me myself I would probably just get rid of all this stuff right here for mobile and I would just only have this landing page now one tip of advice let's go ahead and do another strategy here for mobile optimization so let's just say for instance I'm on a mobile device right here and I look at this what's the problem with this right here the image is just taking away too much focus from the buttons and the text so what I'm gonna do here is I'm gonna actually go ahead and I'm open this right here and I'm actually going to go ahead and duplicate this whole section so now we have two sections right so stay with me here this is a really cool trick so for this section right here I'm going to go ahead and go to the advanced and go to visibility and I want to disable this on the tablet and also the phone so this is the screen that people are going to be brought to if they visit to me on a desktop now this section right here I want to actually change this so for these section settings right here I'm gonna go to backgrounds I'm sorry for this module right here I'm gonna go to the background right here and I'm gonna click on this and I want to add just a flat color just something very basic like that you know you can even go with the gradient if you choose to you can kind of you know make it simple but I just I like a one flat color I think the one flat color is just better so I'm gonna trash this and leave it as black right and then I'll go ahead and go to the Advanced section now for visibility check this out I want to go ahead and disable this for desktop so you see what I've done there so basically what I'm saying for my website is anybody who visits my website on a computer I want them to see this page anybody who visits my website on a mobile device or a tablet I want to show them this because this is very simple and it's easy so let's just take a quick comparison to give you an example this right here it's simple it's easy it's fast you know award-winning agency Explorer but over here I mean we have all this clunked and stuff and it's like what is this I can't see it is this like a porn website I'm leaving you know and and just like that they've left your website over a stupid image you know trust me people on mobile devices have a very small attention span let's take a look at this right here this right here it doesn't look that good it looks too busy its clustered but when you see this right here it's simple it's like oh okay that's it done simple very easy you know in fact we could even disable this button right here and just have one button for mobile users so I find that this strategy is very good and I find that it will increase your conversions for mobile optimization and something like this right here you don't eat again so right here we'll go to the visibility disable this we don't need this you know also this section right here I wouldn't need it but I'm that's my personality I just think that having all this stuff right here is just like not needed for mobile users but you know now how to optimize it for mobile and for tablet as well so you have to go through each module and you'll have to manually set it up how you want to look on your website let me just go to the about Us page really quickly and just go to the Builder and maybe let's just see if we can find something really terrible even though that just looks really bad here so I'll go over here to mobile and looking at it so we can take out this image take this out we can send our align this or we can take it out completely just scrolling down right here this looks ok I would get rid of these right here I would just get rid of them because why do we need this we don't need this and it's behind the but it's below the button that doesn't make any sense so we can go ahead and just go to the gear icon advanced visibility disable this on mobile and tablet etc and this will no longer appear and then here again we probably want to go ahead and reduce this padding we want to set our line this etc so you'll have to go through your website and kind of tinker around with it and mess around with these settings but it does take some time guys you know I'm not I'm not saying this is gonna it's gonna be done in like a 10 minutes you know it does take quite a bit of time but I'm giving you the knowledge to optimize your site perfectly for a mobile and get a really good score from Google now next I want to show you some really cool features that you can add to your website like Divi plugins etc so now that you know how to make your site mobile responsive let's go ahead and talk about the next section where I'm gonna introduce you all to DV third party plugins DVT child themes and also templates that come with Divi and how to use them so let's go ahead and go on to the next section so now let's talk about the third-party marketplace as far as Divi plugins Divi child themes and also templates this right here is an example of a pretty popular plugin so you can see here how this text is gradient and by default DV doesn't have this feature so you can see here how if I go to background I can actually now have gradient text on my websites so for example I'll go ahead and change this to yellow and then I don't know what's a good one yellow yellow blue is good actually and then here again we can change it to radial or we change it to linear and then you can kind of change the gradient direction and just be really customizable now here I'll click on check and here I'll go ahead and click on this plus icon now when you get this plug-in you have to get access to more than 38 more modules and that is a lot of modules I mean Davee already comes with 40 so I'm sorry it's 34 34 modules but you can get things like a Facebook feed a Twitter feed embedding Google Maps a flipbox grading tax supreme image icon lists etc so let me give you an example of some of these features right here so for example right here we have flipbox and this right here will kind of give these little animations to your websites also something like this right here and then something like this right here as well so these features are really helpful and I find that most people who use Devi tend to get this plug-in the most because actually I promote this plug-in and it's a it's like a top seller so it's like the top performing plug-in out there and then again if you want a typing effect you can get something looks like that on your website so this plug-in is actually pretty popular and I'll talk about the pricing here so I do have a special 10% discount for all the companies I talked about in this video but if you want something for one website it cost 22 bucks and then something for unlimited websites it'll cost you around $69 so that's just an example of a third-party plugin that you can get with Divi now another really popular one is the Divi toolbox so you can add things that look like this on your website now this thing has around sorry this plugin has around 50 features that you can add to your website such as different blog layouts different animations different styling effects etc mobile menu so you can see here how the menu looks a little bit different they also have something like pop-ups right here if I click on this and then we have these really cool animation effects so these are just more extensions and things that you can add for your websites and it's pretty well known in the community and if you want to go ahead and purchase this plug-in as well so go take a look at the pricing it's around 49 dollars for one website I'm sorry 49 euros for one website and it's also 169 for unlimited websites however I do have again a 10% discount so go ahead and check out these different styles and animations and if you have a client that really really wants something different and you find that these plugins can do it for you I would recommend to check out this plugin so I'll go ahead and put these websites in the description below and another one is Mark Hendrickson com this guy has some really nice layouts so if you're looking for like a 5 to 6 page layout and Divi doesn't offer it and you're finding that these layouts are just a little bit more helpful you can actually go ahead and purchase these layouts as well I like the designs of these websites they're really really nice each of them probably costs around 67 dollars and they come with the home the about the services it's a contact page they come with everything so if you want a pre-made websites and you don't have time to make it yourself you can always go ahead and purchase a child theme now in short what a child theme is is it's essentially Divi except modify it a little bit with custom code now not too much you can still change things with Divi you can still use the Divi builder it's just slightly modified too kind of fits a certain criteria of you know what your clients want or what they're trying to you know do or whatever they're trying to customize etc so definitely check out mark connection com I will also leave a coupon code for them in the description below as well now let's talk also about the Divi pre-made layouts that you get with Divi so when you first create a page you see this section right here it says choose a premade layout and these are the premium outs that you get with Divi now again remember you have to enter in your your API key in order to get these layouts and let's just say for instance you want to do something like technology you know you'll click on technology and then they show you all the layouts that come in the technology sector so for example right here I'll just do something like this right here now these actually have the home the about the contact all the pages for you so what you can do here is okay I'm on my home page I'll first use the home page and then use this layouts and then you go to add a new page up here again and then use the services now the reason why I love the layouts from Divi is because they make everything they make the homes about the services the contact features project pages etc and other theme companies don't do that which is really annoying so the actually giving you the entire design package so it's really helpful and this will drastically help speed up the web design process for you and your clients now let's just go ahead and just grab one really quickly here let's assume health and fitness and I'll just grab this yellow one maybe we got a client who wants yoga or something like that so here I'll do use this layout and right now it's importing this layouts now also a thing to keep in mind is that the theme builder is still on so if you want to change the header and footer for your new layout just make sure to do that so here you can see that the Divi yoga layout is now imported on my website and then we can make any changes we want to this layout on our website so you can see here how everything is already done for you in fact the images are royalty-free so you don't have to worry about you know are my images being used from another websites this company created their own images and gave them all to you royalty free and again other companies do not do that and other companies will make you pay for the images so that again is another great reason on why you might want to use those layouts for your projects so guys I hope this section was helpful be sure to kind of check out the third-party marketplace with Divi I do have other YouTube videos that talk all about the Divi third-party marketplace like top 10 best city plugins etc I'll go ahead and leave that video in the description below if you want to add some more functionality and power to your Divi theme websites so by now you guys are Divi theme professionals you basically know everything there is to know about the number one investing in the world you also know how to make amazing beautiful custom WordPress websites now if you want more free layouts you go to my website and you can nail them all for free does not cost you anything in fact I am creating more layouts as time goes and again I'm giving them all for free but I want to congratulate all of you for making it this far it takes a lot of effort shucks you watch the video and learn the information some people are lazy there you want it quick and fast they go to some free crappy website and then they get crap and return so for you users who have watched this video all the way congratulations get yourself a beer my favourite beer is Medel so in the comments below if you've watched it this far let me know who my favorite beer in the comments below and again thank you all for watching this video congratulations and I wish you the best on your future endeavors and also your websites see you guys all later

Channel: Darrel Wilson

Views: 298,336

Keywords: Create a website, build a website, WordPress website, WordPress tutorial, make a website, wordpress tutorials, darrel wilson, how to make a wordpress website, divi theme, divi theme tutorial, wordpress tutorial 2019, create a wordpress website, make a wordpress website, how to make a website, how to create a website, create a website using wordpress, wordpress, wordpress tutorial 2020, divi 4.0, divi tutorial, divi theme 4.0 tutorial, divi theme builder, website, divi

Id: vY_19T4jCSA

Length: 179min 25sec (10765 seconds)

Published: Mon Nov 25 2019