How To Make A Wordpress Website 2020 - Divi Theme For Beginners

what does that party people my name is Darrow and today I'm gonna be showing you all how to make a website step by step with no experience required you can be 15 years old you give me fifty five years old and you can watch this tutorial today and walk away knowing finally how to make a wordpress website and you need to have any sort of experience or knowledge of coding everything is done with a drag-and-drop builder so you can visually make your website the way you want it to look in fact you're gonna have access over 700 different templates and layouts to help you create the most moderate professional and beautiful website the way you want it to look tell you what let's take a quick look at the website that we'll be making today in this tutorial so this is the website we'll be making and you can see right here that is a modern a professional looking website you can simply just drag the images place them wherever you want them to be or even just make changes to the text right away and all the changes you make are live on the website it's that easy now this page builder allows you to do some incredible things like make different animations different border styles and you're gonna see that making a website is super easy and we are using the number one most popular WordPress theme in the world this theme has more active installs and downloads than any other theme in the world it comes with the best drag and drop builder simple ways to change colors and text and also allows you to add really modern style designs for your website now in case you're wondering who I am my name is Daryl Wilson and I helped teach hundreds of thousands of people create their own websites for themselves or for their businesses I'm also rated within the top 10 best web design instructors in the world from udemy com now here are some viewers who have literally watched my videos and created their own website or web design business just by simply watching my videos so here we have Shante she's saying thank you this was amazing the ease is a tool for a first-time like me to follow I learned a lot I'm excited to get started on my new websites we also have Andrew Rodriguez saying yo thanks a million brother I needed it to tour all this stuff glad this video popped up on my list I'm building an art website for my friend and this helped tons keep uploading and keep doing your thing homie here we have comfortable hotel saying one of the most amazing great tutorials I've ever seen and also one of the lupa saying thank you dear offer a truly helpful tutorial straight to the point and clear now today everyone needs a website because everything is online so if you're finally ready to learn how to create professional and beautiful website the right today in this video I'm gonna show you how you can do that step by step so if you're ready let's go ahead and start with this tutorial alright let's get these tutorials started so the first you're going to do is purchase our domain and hosting so for example your website comm after that we are going to install their number one content management system called WordPress after that we are going to download and install the Divi theme and then we are going to create our amazing website and it is going to be beautiful now there is a link in the description of this video it will take you to a page that looks just like this right here and this is sycron calm now psycho calm is the fastest and the most reliable hosting now how do I know that how do I know that they're the best I actually compared and tested them against 14 different web hosting companies and they came out first as the fastest most reliable and with the best support as well you can see I compared them against various other companies and they came out as number one you know my channel I always have the best you know I only want the best of the best because I want to give that value back to my audience so this is the page we brought to and right here you can click on choose plan and that's me right there saying hey you know I recommend the company I've obviously obviously recommended them for a long time they're great so I here to click on choose plan and there's three plans but I'm only gonna recommend one now there's the start up the real big and the go geek now I recommend the grow big because with the grow big option you get unlimited websites hosted rather than just a single website host is so that is a pretty big difference and for you know a few dollars a month it's really not going to make a big difference so right here you click on order alright and right here we're gonna go ahead and register your new domain so obviously you don't have one so I'll you know I'll go through the process with you and install domain so here we go I'll do a patty patty whack world see if that one's available patty whack world that sounds interesting patty whack that's actually my dog so patty whack world and it is available alright so once you are here you'll go ahead and you know enter in your email your password your client information I'm sure you've seen a lot of screens like this where you have to enter in your information now I do want to talk about something down here so for the period I recommend doing the twelve months because that would give you kind of enough time it'll also give you a bigger discount than doing the month to month so please 12 months because you're gonna save a lot more in the long run and also right here for the extra services now one thing I really recommend you to do and trust me just do this one is the domain privacy protection because if you don't have this you're gonna get all these people that are gonna call you and email you because they have access to your information on your domain now if you if you check that box they will no longer be allowed to see your information so it prevents a lot of spam trust me to get it and also right here the SiteGround site scanner it's kind of a tongue twister but I actually do recommend that as well I mean for twenty dollars a year for people to monitor your website every single day to make sure it's protected I think it's worth it you know so I actually have that on my website as well so after you're done filling out all this information you can put in your social security number and all that stuff I'm just kidding no one asked your social it's a joke it's I'm just kidding so once you're done with that you'll click on well first I'm sure you're gonna all read this right here right and you're all gonna read this right here the the privacy policy okay so yeah after you do that you want to click on check and check or this is actually for their news so you don't have to do that but you know if you want to get information from the hosting company you know you can check that box but those are the services I recommend you don't have to have a psych around site scanner but I recommend it but I really really recommend the domain privacy protection so once you fill this out I will go ahead and fill this out right here as well and I will meet you on the very next page okay so I went ahead and put in my information I was brought to a screen that says hey your order was processed click here and then I'll be brought to this page right here now slight crowds made it very easy for you all to set up your websites and I'm gonna show you the easy way and then I'll also show you another way on how you can do it's just in case you want to do it from scratch or however you are else you want to do it but right here just click on start a new website and they already know WordPress is the most powerful with software out there so click on WordPress here going to entering your admin email your username and your password as well don't worry about this information we can always change this later but for right now we'll go ahead and put in something so I'll go ahead and put in my email address right here Darrow Wilson 99-88 at gmail.com and you want to make sure that's a correct email because whenever you go to forgot password that is where your password is going to go to and then right here I'll put in a patty-whack not 9 and then I'll put in my password right here and right here I'll click on confirm all right that's a little browser thing and then right here I'll say okay everything looks good I'll go ahead and click on confirm right here and they're gonna say ok you want to go and copy the setup I'll say yes I'll go ahead and complete the setup and there you go they are getting WordPress all installed for us right away so we can get started on our website now in case you're worrying about WordPress WordPress powers more than one third of the Internet so it is the most popular platform for making websites because it's a drag-and-drop builder it's very easy to do and ultimately I find that it's much easier to do this than to learn custom code because that's a very old fashioned of making websites so right here it's processing our setup and there we go so it says your hosting account is ready to use proceeds to customer area all right so this is our dashboard this is our back-end right here now if you ever have a question about something you can always go ahead and click on support' you can open up a ticket you can go ahead and give them a call everything can be done right here and also right here for billing if you ever want to you know change your billing or you know upgrade or whatever they also have referral deals they have additional services you can add perks you guys can kind of go through this and check it out but for right now we'll just go to click on accounts right here and right here is our websites now all right here we can click on this website right here and this is our new websites congratulations now in order to access this there's a few different ways so right here we click on - WP admin and this will bring us to our login right here so remember earlier how we made those login credentials so I'll put it those in and click on login oh I'll do that one more time all right so this is the wordpress starter this is just you know all this stuff is just kind of new but right here i'm just click on exit because we don't really need to use this service because we're going to do our own so our here click on exits and right here I'll click on don't show this again and congratulations so this is our new website so this is how everything looks right here now if you want to see your website again go over here and click on visit websites and this is our website I know it's very ugly right now it doesn't look anything like you see you saw it earlier so not to worry we're gonna make it look amazing now there's other things that we can do right here so again music visit sides you can check it out right there or change the theme you can go ahead and change the theme but don't do that because we're actually going to install a much much better theme than what they have right there now also let's get you a little bit more familiar with this right here so right here is our domain and if I click on go to admin panel it will bring you out over right here to your websites now if you ever want to go ahead and change your information you can go over here to users and go to your profile now this is kind of where you can decorate everything so right here we can kind of you know decorate it I always like midnight here you can go ahead and change your your nickname you can change your email address and also you can change your password as well so right here you click on generate password and I'll generate a password for you but if you like the password that you have you can just click on cancel and there you go that's all that's all set now one thing I also want to do before we begin is change our permalinks and that's a very important part so right here under settings go to permalinks now I know this might be a little confusing but I'll just explain it to you so you kind of understand it so right here you can see that our permalinks which is this stuff right here you want it to display on a post name now the reason why we do this is because when you go to a website you know so for example your about Us page you want your website - about us right not to 0-8 1 to G you know all this other stuff so you want to make sure it's under post name alright and then right here it will click on Save Changes alright so let's go ahead and take a look at our progress so we got our domain and posting congratulations you've actually installed WordPress as well congratulations next we're going to purchase and install the Divi theme and then we're going to make our amazing websites okay so let me just kind of familiarize with the backend and just kind of explain to everything what they are so again this is the dashboard this is basically we're going to be working now right here click on dashboard really quick and what I want to do right here is actually change this dashboard cuz this dashboard is actually from psych ground and I want the default WordPress one so in order to do that just scroll down right here scroll down just keep scrolling and right here click on switch to default dashboard and this is basically your new WordPress dashboard so this is what its gonna look like this is how you're going to make pages how are you gonna make posts how are you gonna do all the cool stuff okay so now I'm going to show you all how you can install WordPress manually just in case maybe you closed your screen or something happen or you refresh and you kind of lost the page I'll show you how you can install a wordpress on your domain manually it's really quick really simple so right here click on my accounts and as you can see I have many many accounts so you're just gonna go and click on it your hosting package so right here oh I'll just select this one right here it click on manage account of course you should only have one so you just click on manage accounts alright and right here at the top you can click on go to cPanel alright so right here is your cpanel and you'll just click on this right here called Softaculous you can also use WordPress but this right here thinks a little bit easier so just click on Softaculous and right here under WordPress you'll click on install now all I need to do here is go ahead and find your domain now of course I have many many domains so you're just gonna go and select the domain that you purchased and then your domain will pop up right here so I'll go ahead and select count route com right here make sure nothing is there ok please make sure nothing is there because then it's going to install your WordPress - whatever you put there and your permit or they'll be all weird so just make sure nothing is there your site name in site description you can go ahead and put your your your website so cat website we make cat stuff now don't worry about this right here because we can always change this later in the theme customizer in fact there's a much faster way to do this so you don't have to put anything there right here go ahead and put in your user account your user admin and user password so here I'll put patty-whack 8 and also if you're Adam email please make sure you put in your email that you have access to because if you lose your password I'm sorry if yeah if you lose your password and then you go to forgotten password it's gonna go to this email so please make sure that you have the correct email right here in or out of an email a choose language you know in every tutorial we always have a debate here you know now they have chinese Simplified Chinese traditional and now they have Chinese Hong Kong I thought it was Mandarin you know some of the comments one lets me know about that I would love it but I'm pretty sure it's either Mandarin or Cantonese or yeah yeah I think so it's also like English now right here it says WordPress starter and I don't really need this that's like grounds personal thing and I just don't want that so I'll uncheck that and click on install so now it's gonna go ahead and install WordPress on to our domain alright it says like four minutes because it's literally like 15 seconds it's really fast and there you go now right here you'll click on WP dash admin and it'll take you directly to your back-end right here so this is it this is your back-end so just like we were checking out before you can click on visit site and there you go and then yeah this is just another way and how you can install WordPress so I just want to show you all this alternative way of how you can install WordPress so let's go ahead now and go back to the tutorial well stuff so here are your options like for example you have a pages you can go ahead make pages such as your home the about the services here you have appearances such as widgets we'll talk all about these features a little bit later but I'm just kind of you know you can just kind of loop around and kind of look or look at stuff but this is the back end and right here if you click on the website this is the front end okay so I'm just kind of give you a little familiar of the back end and everything now the next thing we're going to do is install the Divi theme 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 now also you can get to this page by going to Darrell Wilson com - Divi and putting it enter this isn't a fusing so if you guys do decide to purchase this I do get a small Commission now I bet you're wondering you know Darrell why are we going to use this theme what's what's so good about this theme well this is eight number one I can drop builder and it is the most popular theme out there on the Internet in fact I'll go ahead and show you all so right here I've built with and this basically lets you know about like themes and everything it talks about like what's the best and this is digging so this is what we're gonna be using and you can see on this list right here that's Divi is way ahead of its competitors because it is so easy to make websites with this theme in fact it even it even just blows all these things out of the water so for example right here if I scroll down you can see that this theme is it's all on around 1.9 or sorry over 1 million websites and the closest theme to that only has 100 57,000 this is a default theme so it doesn't really matter because that's like the default installation but the closest theme is around 100 57,000 I'm sorry Avada which is 500,000 and dve just clearly just beats that and that's because it's so easy to use it's the number one theme so in my tutorials I always recommend the best so over here we'll go to you can click on join to download now you have two plans so you have the yearly plan then you have access by now before you want to know about this or you're not sure everything I recommend this tutorial has a 30-day money-back guarantee so the hosting has a 30-day money-back guarantee and this theme has a 30-day money-back guarantee because I know people might be skeptical so don't worry about it you can always get your money back if it doesn't work out but trust me this is the number one theme in the world for a reason I use it I have it I love it and it's the best so you get the yearly axis which you know you'll pay 89 dollars a year or you can go ahead and do the lifetime access which is a one-time fee around two hundred nine dollars and you also get access to all their really cool plugins you get access to tons of layouts tons of tutorials just so much stuff go ahead and pick which one you want you can do the yearly or the lifetime I have a lifetime access and I'll go ahead and show you that I do because you know of course I'm you know I'm not just those guys who are saying oh yeah get this you know but right here it says I already have a lifetime membership and it is the best theme so right here you'll click on downloads oh I'm sorry so once you go over there once you go over there you'll you know you'll sign up today so you click on sign up today and then here you go ahead and enter in your information and this is the price right here and again you get a 30 day money back they are so confident that you will love the theme because it's the best so I don't need to say much there so once you go ahead and fill this all information out you'll be brought to this next section right here I'll go ahead and login you know that's really annoying when people you see all those websites recommending services and they don't even use the service they're just like you know go by it's cool it's a great theme and they don't use it it's like nah man I really used this theme it's the best I've used it for a long time I love it so once you're brought to this page right here you click on download and this right here is the theme right here so right here you click on download now these are other things you get you get the extra theme it's like a it's like a blogging platform but I think they'd be is a little bit better you also get the Divi builder the bloom plug-in which we'll talk more about the bloom plugin and then you also get the monarch plug-in which you know don't worry we'll talk about plugins and what they are a little bit later if they're just basically apps for your website so it's really convenient really easy so I'm gonna go back over here to my website I'm gonna head and close these right here you know I hope you guys don't mind I'm going to go ahead enclose all these right here because I don't like a lot of things open up and this is the actual the emails that you guys get so you go you know these are all the stuff so once you actually purchase the hosting you'll want to go ahead and verify your information by clicking on that link so make sure you do that because it's part of the ICANN rules it's part of like the domain registrar so the people who issue out domains as part of their you know it's part of their their terms of condition so you just need to click on that and click on verified and you're all set all right so let's go back over here now I'm gonna go over here to appearance and go to themes now how WordPress works is basically you install a certain type of theme for your website so over here like under latest you can see there's various different themes now these are basic free themes and they don't really have any builders they don't really have a lot of features and quite honestly you know a lot of them just aren't nearly as good as Divi that's why most people use Divi because it's the best now don't use Divi you'll click on upload theme right here and click on choose file and then go ahead and select the actual file that you downloaded so it should be a zip folder like this right so DVD zip and I'll click on open and I'll click on Install Now all right so it is installing the Divi theme on our website congratulations so right here just click on activate all right so look at that beautiful you can just see it's already it's already ready it's already getting ready you have this beautiful little notice and we have the theme right there now we can kind of take a look at our website really quickly and just kind of this goes let's visit website and see what's happened so you can see the website is a little different now so you know the the websites a little different you can see that it has like a white background we have a logo we have some social icons but this is just the beginning man this is this is just the beginning baby we're gonna really have a lot of fun here now what we need to do first is we need to make some pages right so we have no pages so let's go ahead and make some pages now this is very simple just like you make a home page right so go to add new I'm gonna go ahead and close this and right here just give your page a name so I'm gonna say homepage right home page and then I'll go over here to page and then we'll do our about Us page about us alright just keep going and you can also view the page but remember there's nothing on it so we haven't done anything it's just this right here this is super ugly you know so don't worry we're gonna make it look really cool now you can make a page a certain way you can go up here and go to plus new and go to page or you can go to pages and go to add new it doesn't really matter it's the same thing so right here you see all pages and these are the pages that we currently have and you know we made the home the about us now we're gonna make these services and the blog in the contact so services publish and then right here we'll go to page blog and then we'll do the contact page contacts that's where they can kind of send you emails if they have questions I'm sure you love answering people's requests or port requests saying hey this isn't working out you know I I love support requests that are they're fun they're great nice so once you're done with that you can go over here to visit site now you can see right here our pages are now displayed right there now the reason why it's not really looking good is because we need to actually create a menu so let's go and do that now there's of two ways you can do it and go over here to two menus then click on menus or you can just go ahead and go through your dashboard right here so appearance and menus as well so right here will do Patty's menu patty me it doesn't really matter what you call it because people will not see this so don't worry about it it's okay now over here on our pages we'll click on View all and click on the home the about the blog and blah blah blah now the reason why there's two home pages because WordPress actually makes a default a home page now the one you want is the actual page so this custom link we don't want this so in order to delete a page you'll just click on this right here and remove it now how do you want to position these well I want the home page first right and we have a home page and then we want the about us the services the blog and the contact it'll make this our primary menu and then we'll click on save menu alright I'm going to close this whole thing now let's go ahead and see how our website looks now so visit sites and voila we got the home about the services the blog and the contact pretty easy right it's pretty simple now one thing that we need to do is we need to set our home page now if I type in my domain right here you know patty-whack world you can see this shows up and that's because we need to tell people what our home page is so when someone visits your website what page you want them to go to first so let's go ahead and go do that over here we'll go to our theme customizer now the theme customizer basically kind of customizes the actual theme it's basically how you can decorate stuff how you can add certain features in how you can change the menu the color of the menu all sorts of really cool stuff but we'll come back to this a little later once we actually make our first page but right here under homepage settings click on that and say I want a static page right here they're saying okay what homepage do you want it to select well I'm gonna say I want my homepage to be the homepage right that makes most sense so right here I'll click on publish and I'll click on X right here all right perfect congratulations now we can go ahead and activate the Builder we need to start building our website right now there's two ways you can do this so over here we can click on edit page and we can click on edit with the Divi builder right there or a much faster way is right here on the top right here which says enable visual builder you can just click on that right there and this will actually enable the visual builder all right now this is like their little you know they have a tour and everything they're saying yeah we can help you with this help you with that so right here I'll just click on start building and they have three options so we can build a website from scratch you can use one of their pre-made layouts or we can clone an existing page now right here I want to click on build from scratch I actually have Premila out that I personally designed for you for free in this video so you're gonna get access to some really beautiful layout so I'll talk more about that a little bit later once we kind of you know you get comfortable with the theme and you understand how to use the page builder will talk about layout will talk about features that Divi has but for right now let's just take to the basics and just make a basic page so her here I'll click on start building so right here you can kind of see columns now these would be the columns that you use to make your website with now in this video we're making this same exact website it's a professional modern beautiful website that you're making for your very first time and we're gonna make the same exact website with this current theme and we're gonna go ahead and use this as a guide to kind of help us you know understand how the theme works how it to build the websites and everything else now one thing I do want you to know is now please watch this tutorial all the way to the end because what I've found is that people learn a little bit's and then they kind of get comfortable they kind of skip around and they don't know how to do something and then they come back and they ask me a question and I love comments but you know people should watch the entire tutorial all the way now also there is a link in the description of this video for demo images that will actually you know you guys can follow along with these images also I'm going to give you a link to this website right here which will help you pick different grading depending on what kind of color scheme you like you know it's a great website to kind of help you get inspiration and ideas from and later on once you're a wordpress master you can join my website WP friends dot-com where we talk about all things WordPress you know you can see here that's it's a big active community it's a beautiful websites it's basically like the Facebook for WordPress users so you know you can check out that website a little bit later and you can also get a free layout there a little bit later later as well so this is the website we're gonna be making so let's go ahead and get to it so the first you want to do right here is you can see right here we have different rows so this right here is one row two rows three rows etc so right here you can click on three and then you notice right here you have three different columns right now I won't actually use one so I'm gonna go ahead and delete that and then right here I'll click on one row now in this one row we have different elements so these are all different elements that you can use to help you know build your website so they have like you know a text they have video sliders they have images they have dividers contact forms comments all sorts of really cool models that you can use but the one that we want to use is just a basic text you know I think the most common that one that you're gonna use is probably text and images because a lot of the other ones you know they're great and all but I think that text in images is probably that's all you need for a website really so right here I'll click on text and here you can kind of see that we have our text right here now this is the text in the box and there's various ways you can actually style this so you can put it over here you can have like that's however you want to do it I kind of like it you know I like dragging and dropping it kind of so it just helps me get a you know better idea of it so right here you can either click on this content right here and change it so but see what put you can put something you know I don't want to put right here but put some know your digital media company know your digital media company now there's various ways you can do this you can either use this builder or you can actually use this right here so right here I'll click on Center I'll go ahead and right here and click on this right here and Center it okay now over here you can kind of see that we have the the font right there and you can actually link this to a specific area so right here is a link but most people don't use that's a background you don't want to really add a background to that because it's it's a really small area what I want you to do over here is go to design now if you want to design your text this is where you're gonna do it so right here you can see text and you can kind of see how it hovers over it so we know what it's doing right there so I'll click on text right here and this is where you can change the font you can change all sorts of stuff right here now a big tip of advice is just use one to two fonts maximum on your websites so in this video we're gonna be talking more about design because you can see from this website it's a beautiful website and the reason why it is because we use specific text and we use specific colors to make sure the website is optimized you know you don't want a bunch of colors on a website because it looks tacky you don't want a bunch of different funds because it looks weird so over here the font I chose is months I think it's Montserrat I don't know how to pronounce that month Montserrat s'right Montserrat so that is you can see how it's change right there you can change the actual size of this now these options are on every single module so once you learn how to do this with one you know how to do it for all of them so right here you can see you know I want two semi bold I want it you know however you want to change it here you can kind of change the text of the color or the color of the text here you can have different styles such as all caps you can have just the beginning caps which is very common in web design I know in English that's an F puts in web design that's what everybody does here you can kind of change the text size of it and then also you can also change the letter spacing so I make it look really cool and then you can change the line height you can add a text shadow around it which basically gives it this a shadow around it which looks really nice right you can add a text shadow to it right here the text orientation you can go ahead and change that as well but we already changed that the default here text color you don't even mess with that because we've already we've already basically you know mess without setting so we've we've already our for a header text I'm sorry that's for h1 tags we'll do that in the next section but right now we're just editing basic basic but you'll learn more about this in the next next section over here sizing we don't need to mess with that because it's you know you don't we don't need to mess with that it's just basically making it smaller bigger we won't we want to make sure to leave it like that spacing we'll talk more about pagin and padding a little bit later it basically just gives space so likes for example right here you want more space on the bottom right here I'll type in something like five hundred it just makes five hundred pixels of space so that's what that basically is and then border you can also add a border around it we'll do that in the next section because we don't want add a border on there we can also add a box shadow by adding a box shadow but that doesn't look good at all and there's a lot of different ways we can use these and I'll in this tutorial teach you all now this is a really cool one filters but you know this is probably the wrong module to teach you this once we use images we'll use more of these and you'll kind of get a better understanding of that and also animations you can kind of have these animates to however you want and they have up to seven different kinds so we'll just leave we'll leave it at that one and then they have different animation settings so animation you know duration the delay so if you want to delay on it you can add seconds so for example a thousand which would be one seconds but that's that's too it's too long and then you know you can kind of just you know these are just basically self-explanatory you know so starting opacity which is basically saying do you want this to be fading in because if you change that it'll fade in as well and then we have the Advanced tab which is probably you'll never use because most people don't know CSS that are watching this it's just basically added features but most people don't really know about CSS so in this video we're not gonna be covering CSS we can cover that in another video you won't need it alright you won't need it I promise visibility we'll talk more about that and why you need it a little bit later and then transitions we'll talk more about that a little bit later but for right now we'll just keep it basic so right here I'm so you know what I want to go ahead and change this text to something like believe it as that color for now and right here we have this right here so we have welcome to the complete WordPress tutorial for beginners course so let's do that let's make another module and then we'll go ahead and put that in so I'll go ahead and see sometimes that happens where the the plus gets buried under there so I'll tell you what we'll do if that ever happens to you guys we'll just do it like this all right well we'll just we'll do something like this right here alright so to show you how we can drag and drop stuff so right here click on add a new module we'll enter in text all right now this section right here I want to go ahead and drag this I want to go ahead and drag this right there okay so that's what I'll try to achieve is sometimes that the Builder does that where it gets really too close and if that happens just make a new section sometimes that happens you know so right here I'll type in something like welcome to the best WordPress tutorial on the Internet and right here we'll go ahead and center align this I remember you can always do that through the actual options as well of the module so this setting right here will actually take you to the settings now we have other settings right here so this is duplicate so if you'll want to duplicate something you can just click on that it'll duplicate it but I don't want to do that so right here I'm gonna click on this trash icon and just delete that also right here we can actually save this to our library so we can use it later now we will be using this a little bit late in the video so we're gonna go ahead and skip this for now but right here we have welcome to the best WordPress install of the Internet's and I'm gonna go ahead and edit this stack this text now so now what I want you to do is actually highlight all of this click on this section right here and click on heading 1 now the reason why we do that is because over here on the design tab you see how we have text now we have heading text now this section is decorating the heading text so that's basically why you want to have a text and a heading text as well so you can kind of distinct different Texas from each other so right here we'll keep it simple you know montserrat and we'll go ahead and leave it as leave it as a bold right now and then we'll change this something to leave it as dark because we're gonna change these all to whites but that's once we add in the background image so right here again you have the same you know obviously we have the same letters you know so it's it's pretty self-explanatory I'll change this to something like 48 and then um you know you have the same exact settings guys so everything's the same so it's it's not like you know you have planning from scratch once you learn one module they're the same for all of the modules so I'll just go and close that and then click on check now this looks kind of boring looks really white right let's go ahead and upload some images so right here this is we're going to control this section this right here and you can actually just drag this stuff like this and just kind of you know visually you know make it how you want to look now right here click on this icon now remember this section right here controls the background so right here we have background and then we also have link but remember you know you don't really want to make it so someone clicks on the background it brings them to a link because that's just really you know not necessary so right here in the background we have different options we have a straight background color or you can just add a one background color or you have gradients all right here we close this click on the gradient and now we have gradient and you can select different kind of grading colors to kind of you know match what you're gonna do so you know you can mess around with that but you know I'm gonna go ahead and let's go ahead and close that so right here I'm gonna click on close now right here is image and you can also have a video background as well so right here I'm click on image click on add a background image now in those files I sent you all you can go ahead and upload them right here so right here click on select files and I believe I have my yeah they're all right here so right here I'm going to go ahead and take all these right here and I'm going to go ahead and upload all of these files I have to my server so right here I'll click on open alright so now it is taking all the images in that folder and it is putting them on this website right here so we can kind of use these as we go on and remember these are free images these are all copyright images so we don't have to worry about like you know downloading from from a copyrighted website you know it all of these right here are are they're free so you can do whatever you want with them so right here is the image I want and I click on upload an image now you can kind of see our websites looking a little better right it's looking a little cool it's looking good now there is one thing I do want to add though you know over here we have this beautiful gradient over here so you can see the image in the background but I want to add a gradient over it so let's do that over here under the gear icon I'll click on background click on gradients and click on this right here now I actually have certain color codes that I've used now this website right here will actually give you the color code so all I need to do is just copy this right here whatever color code you decide to use if you want to use gradients go back over here and so it will just pay that in right there now you can see right there the gradient is right there now the reason why it's not displaying is because we need to place the gradient above the background image so I click on that now what's going to show and once we reduce the opacity of it you can actually see it so for example I'll click on this color right here and this section right here controls the actual power of the color and this right here controls the actual gradient color up there we go that was weird so right here you can see now you kind of see how the color now fades up fades out so now you can kind of see the colors so that's basically how that's chief now over here I've got my notepad right here and I'm gonna go ahead and grab my color codes I used and you can kind of see the numbers so RGB a and I'll put these in the description just so you can use these same exact ones as well go back over here for color 1 I want to go ahead and paste my code and then over here for number 2 let me let me scroll down come on back come on you can do it let's see here it's there goes it decided to work now I just got this new iMac so it's it's a learning curve you know has a personality to it you know sometimes it works sometimes it doesn't it's just depends on how it feels so right here I'll go ahead and paste that there and there you go so now we have the you can kind of see I have 82 opacity and then we have the color codes right there again you can always go ahead and check to these color codes outs but I found that this right here is what I want now remember guys when you're using gradient you want to be consistent you can see my website right here that we kept the gradient consistence you know with gradient gradient can be very tricky you know it can really be tricky so you want to make sure that if you do decide to use a gradient color you need to use that throughout the websites so over here I'm gonna go first off let's change this to white right here I'm sure you know how to do that right design text scroll down text color alright right here design heading text and then we'll change this to white right here now one thing I do want to add you can see right here is I have these really cool borders right here and this is just you know a that style in the core to its now remember how we talked about borders last time and I said I'm gonna show you how to do it now's the time now is the time so right here we have border and border will actually allow you to add specific borders over your text now what I did to achieve that look is I just added a border right here you can see this one I added two pixels and I made it white so you can see that we have the border there and I also want to add a border to the left right there sorry here and click on white and add it border like that you can kind of see now how it's really adding design into core to our website just those little two things you know it kind of emphasizes the text so next what we have to do is create a button and call-to-action buttons are pretty standard you know for most websites I think most websites have a button because you always want to direct the audience you always want to tell them where to go sign up by this that's exactly what you want to do with come with buttons so right here just type in button all right now we have click here but we can change that I put let's write something you know you want to be uh you want to be creative with it you know let's write something you know let's or let's uh let's do something you know be be modern you know that no one says click here anymore you like those you know member those PayPal scam buttons you know you wanted to be modern and nice so right here under link now this is where you're actually going to use the link so for example you know WD Wilson comm and then right here you can say if they click on this button do you want to open it in a new tab or the same window I'll put new tab now we have design now this is basically where you're going to needs to kind of add some design to this button because it's pretty ugly by default right so right here in the design we have alignments and then we have Center all right now for the text again right here I'm gonna change this to something like lights now that text color is this it's a shortcut basically because you can always you know you can always change it to any color you want so it's just a shortcut now under button right here you want to set custom styles for button alright and we can have a different color style so right here you can see we have a color we can add gradients or you can add an image to your button but I kind of want to add a gradient to it and in fact I want to use the same grading colors I've been using now that's a very tricky thing to do to add gradient over gradient but I'll teach you I'll teach you the skills here you know so right here I'm gonna take my color code and I'll go ahead and paste that to this one right here now you don't have to do this all the time I'm going to show you a shortcut and a little bit later on something a feature they have called extend styles which will basically take this same feature and apply it to different modules so you don't have to do this all from scratch again that's the great part about DVDs they have so many tools that you can use to make this with the the the process faster so over here we'll change this right here all right now we need you to change the direction you know I I don't like the direction of that I want to change it to something where it's like 62 and you can actually create really amazing stuff like this so you can actually make split screens so right here you can see we have a split screen so you can have that on different parts of your website but some you know for most people I think that's we'll just you know we'll just leave it basic for now you know right here you can add gradient above the background image but we don't need to do that here we have the button border color but I don't really want to add a border here so I'm gonna go ahead and change that to zero now we have no border the border radius this will actually make it circular so if you want a circular button you would just put it 265 and now you have a circular button over here I have a square button but if you want to have a circular button you can go ahead and do that as well here we can add letter spacing just like the other modules guys so this is very repetitive I guess you can say because all the modules were the same thing so right here I wanna change it to Montserrat okay that is way too much letter spacing you know guys I'm not gonna script so you know I just know how to use Divi in and out so you know if if I'm not the best commentator you know don't don't give me any crap because I'm you know I'm not on the script you know I'm really not also for icon so if they hover over it do you want to show an icon you can show like a little checkbox that looks cool right now one thing I do want to add is I want to add a box shout-out to this now this right here is a text shadow so it's gonna add a little bit of text shadow over that but what I want to do is I want to add a box shadow over this and this is kind of where I emphasize the button you see how it kind of pops out now now it looks great right now there's one little thing you can do here is you can actually add a color to that box shadow and I want to add a white one now you can kind of see now it looks sharp whoo now it looks great right now it looks now it looks like I really want to click it it just it's it's coming out at me you know I want to click on it so now we have our basic landing page now all you need to do right here is simply just go ahead and you know scroll it down do however you want to look and voila we have a beautiful landing page so you can see right here a landing page and a landing page the only difference right here is that this is a transparent menu which we'll talk more about once we're done with the page but ultimately it's the same exact page it's just you know a little bit of fonts a little bit of color but it's ultimately the same exact thing just different font sizes everything else so congratulations we made our we made our page get yourself a beer you know get yourself a modelo medel is the that's the beer to go to so we're here to click on exit the visual builder and if I click on this it's gonna open up a new tab and go to my website Darrell Wilson calm so you can see here that's it's my website you know go ahead go check it out go click all the links go click on the links and come back you know go click all the links okay so let's go to keep going so right here and click on edit enable a visual builder and now I want you to kind of visualize so right here this is a text module a text module a divider and a text module so I kind of want to show you you know I want you to look at something and know how I did it so this part actually is a little complicated but uh you know that's why I'm here we're gonna make we're gonna make sure that you can you know make beautiful websites what is this here get this out of here delete delete delete now to make a new section right here click on plus new and click on regular and I just want one section right here and we'll add in a text and right here I'll go ahead and put in services so right here we have services now I'm gonna show you how I did that I'm bet you're thinking yourself that looks beautiful you know how did you do that how did you make it look like that because uh you know by default it's really hard to achieve these looks so right here I'm gonna go to text and now we're using the play fair play fair display and that gives it that elegant look you know and for the color right here I want to kind of I kind of wants to choose a specific color right here okay just a black but we're gonna fade it out a little bit you know just make it a little faded you know so now has that faded look I'm gonna make this a little bigger and then we'll go ahead and give it some letter spacing you know a little bit letter spacing too much there we go all right and once we're done with that so we can click on check now we're gonna go ahead and make the next section right here which is our services so right here you know it always does that there we go there we go text and this right here is our services and I will Center this right here design and then we're gonna go ahead and do the I'll make this a header text design header text and then we'll do monster wrap okay and I want this little bold you know the thing is with these titles right here is I feel that bold makes these things just really you know it's just really it's really friendly you know I guess you can say so we have our services and we want to make this a little bit bigger okay just something like we'll change it to like something like 50 okay now we have our services so right here I'll go ahead and make this a little bigger because we want to kind of make this have that that look of being much bigger so right here you can see it caps out 150 pixels or I'm sorry hundred pixels now a good trick to do is if you want to make it bigger just simply type it in so now you see how the services how it got a little bigger there but I think a better one with probably 200 pixels I'll probably be much better and right here we can kind of reduce the opacity as well to just make it very faded you know something like that right there that would give it a very you know very elegant look right there so that's how I achieved that specific section next well go ahead and do this little divider right here and then we'll also do this section right here as well so right here I'll click on this plus icon and we're gonna add in a divider now now the divider really the main purpose of a divider is to basically give the page space but we can use this to kind of add design and decor to our specific section so right here I want to go ahead and take this I'm sorry want to go ahead put there right there and I want to go ahead and take this divider right here and I want to drag it down right there and right here we have different settings so I'm gonna go into module setting oh the wrong one where we go sometimes the modules get mixed up like that and just you know there's a you just gotta find it you know so we're here I want the divider to show and for the design of it I want to change the color to black now for the styles right here we can have dashed we have dotted all these different ones now I do use the dash and the dotted on actually different pages on the contact page I use dotted and I know dotted doesn't look the best but there's you know there's always a reason to use certain features depending on the need of the website so right here we have size so I'm gonna change this to something like 2 but you can see that the more you have the more it shows but I wanted something like maybe 2 right there and then the height I want to reduce the height so the main purpose of the divider is to add space below it like this see how it's adding space but you know I don't really want to add too much space so oh my water bottle just cracked I was weird and right here I want to reduce the width and then right here we can Center it like that so you can kind of see now how it's getting a little smaller like that as well and then here over spacing now you can even try to push the push the button a little closer to it now this is where we use margin and padding so you can see how remember we talked about margin padding earlier so margin creates space so the more space you have it's going to create space right there but the less you have it's going to actually you can actually do a negative effect where it's actually going to reduce it and padding is against space as well so if you had you know 500 pixels it's gonna make 500 pixels of space in between this right here and this so padding is this space margin is where you want it to start from so I know they're kind of confusing but ultimately that's how would you would use margin and padding so we have that there and over here I'll click on plus and I'll click on another text and I'll just go ahead and click on this and we're gonna go ahead and drag this down right here so we'll just drag it to the bottom we'll drag it to the bottom see here take this put it up there we go and then for this right here I kind of want to you know reduce some some of the font and then also we can actually just Center this we can set our line this as well now I'm not going to go ahead and go through the options because you guys know how to do this now one thing I want to talk about that's how you actually save it right there you click on the X and click on save is if you ever have trouble looking for models like that's there's actually a feature right here on the top on the bottom left right here it says wireframe view now here you can kind of see that we have the text we have the divider so over here we have text text divider text so you have our problems trying to figure out which you know if you're working with really close modules you can kind of just move them around and you can all you can do everything from here you can duplicate it from here you can work on your whole website from here you know you can do everything right from here also right here you can see we have the button you can move the butts in around to wherever you want so this is the wireframe mode and this is a great feature they added in case you're trying to find different you know trying to find the modules so right here we'll click on desktop view later on we'll go ahead and optimize our website for a mobile so these options right here is how it looks like on a tablet and then this is what it looks like on a phone now of course this doesn't look good right here and remember earlier how we talked about visibility how you can disable something for mobile we're gonna go ahead and do that a little later when we talk about mobile optimization so I kind of want you guys to say it's on the end to make sure you all know how to do that so next we're gonna go ahead and do this section right here so this section right here is three images and this is called a call to action module which we're going to use right now also you notice that I added this little design right here on the rights and that's a background image and we're gonna go ahead and do that right now so right here click on the plus and click on three so right here we'll type an image right here click on the it's a default one you know so I'll just click on this one click on add an image and simply just go ahead and select one of them those dummy images I have now this part of the tutorials gonna be a little more a little more complicated we're gonna go kind of in the advanced features and kind of show you what this thing can do you know cuz there's there's no limit on what you can do with this so right here click on posting module image click on this one and will go ahead and select I think it was was it this one right here yeah okay now one thing I do want to talk about really quickly is the image filters now the image filters are an amazing thing that's has a lot of power basically it's like a Photoshop so right here on our filters you can kind of change the hue of its you can see how changing color you can change the saturation you can change the brightness of this image the contrast you can actually invert everything it's maybe like that switch looks really cool or you can you know you can blur it out and Debbie has actually had really good examples on how you can use each and every one of these so I'll be talking more about the these in detail when we talk a little bit later about the advanced features and then right here again you can add an image to it as well but you know I don't want to do that so and if you ever wanted to change everything to default you can just go ahead and go back to you know change everything to default once you kind of mess around with this stuff so right here we have the images now below this I want to add a call to action so a call to action is basically text with the button so right here I'm click on plus and right here I'll click on call to action or it's right here and this is actually a very common popular one that most people use so it has a title text it has a button text and then it has the content now it doesn't have a button right here because under the link section you just need to add in you know anything right there and then whatever they click on that it'll go to this specific link right here so right here you know I put clear design and then I put you know some content right there so let's go and do that so right here I'll click on see here we go let's see how this works there's another way how now you can access these right here by clicking on these right here and this will take you directly to the title text right there you see I had some trouble there but that's another shortcut how you can just click on these and it'll just take you to this specific module in this section to make it really fast so right here we're gonna go and do monster wrap now the great part about this is that we have to do this once and then we're actually gonna duplicate these modules and we're going to actually put them on the other on the other one so you only have to do one and then we can just copy that one and have it for these other ones as well so I know it's a little work but you know it's how it goes so title text I'll leave all this to white for this content I have a little bit too much content here so I don't want to really add that much in for the click here button we're gonna go ahead and go to button right here an able the style and then we're gonna go ahead and change this a little differently so you you can kind of get the idea now I'm gonna check one thing really quickly here so I think right here we can actually copy the section styles and I believe we can no we can't not for this module well talk more about the about the extend Styles a little bit later so right here design we have the I'm sorry the button we're decorating the button there what are you doing what were you were you going and right here we have our gradient colors and I selected the I selected this one let's see if I can actually copy this one right here that would be kind of cool no you can't do that yet oh that's too bad alright so I'll go ahead and go back to the my notepad really quick and get those codes you just want to be consistent you know with your design you don't want to you know have different because that looks really ugly gradient with that other gradient just yeah looks doesn't that look good so I'm gonna go ahead and change this right here you don't have to do this I'm just doing this just to kind of show you exactly you know how I did this and how you know everything so you know you just just just have a drink have a drink have it be really quick Modelo right Modelo and then right here alright and then the same thing here I want to change this direction something like 66 I also want to take out the border because I don't want a border here in fact I can even add the same thing right there where we added the the the shadow over here we'll paint just a monster rat all right and then I'll go ahead and change the box shadow right here and then I want it white okay now in this image right here you can see I just used the border radius to kind of you know how we use border radius earlier to kind of make it circular so we can go and do that as well because a square buttons are really ugly so we're here have a square radius right there now one thing that we need to do right here is we need to change the background color the background color is really really ugly so to do that we're gonna go ahead and go to our go to our background right here and change this simply to or change this the block right here and there you go alright so you can see now we have the call to action right there and it looks good now again remember you can always duplicate this so you can duplicate this and put it right here and also do that again and duplicate it put it right there now what I was gonna do actually in this video was I was actually gonna make you know really creative and do something like this right here you know cuz that looks really cool as well but you know it's just how you want a style stuff but I think that was that look really nice right there so I did like that look as well so over here on this image will click on this and we'll go to design and I believe it is under spacing so right here under spacing I don't want to show any space below that image you see that so now the image is gone or the space is gone because the space looks really ugly right so again right here design space II take that out and right here we'll go ahead and take out the design and spacing and there you go now we have a beautiful call to action section it looks great of course the text looks a little different and right here you can see that I actually made this white right here so I just kind of inverse the design cuz this looks a little too repetitive you can kind of say looks it's too repetitive right so what I did to do to achieve that was I actually used a white background here and under the design section I change the text to dark right here something that looks like that right there and then I actually added a a box shadow around it right there so you can see that all these have box shadows as well so over here under the design section we have the Box shadow and I just added a box shadow to these right here to kind of you know just just take away from it being so flat because it looks a little ugly right so they can kind of see that so we have the Box shadow the box shadow I love it it looks great I'm a big box shadow fan a lot of people you know they're kind of against it but you know it just looks so nice now the button right here needs to be changed to white so button text color whites and that's how I achieve that section now one thing I do want to add it right here is a background but just to this little section right here so in those images I gave you I'm gonna go ahead and click on this gear I on a new background and I'm gonna upload a background image now the one I use right here is this one right here now you can kind of see that looks really ugly it looks pixelated looks ugly right we're gonna go ahead and make this the actual size now you see that it's in the middle but we can't see it so over here under the background image position I want to change this to something like the bottom center or I'm sorry the top we're good to top right top right with the right one rights rights Center right there there you go the okay so there you go so now we have this section fully complete it's very similar to this section right here of course this was changed to black different you know different text but ultimately it's the same exact style and structure about it one thing I did also add is you can also increase the size of this section to make it a little bigger if you choose to do that so right here on the row settings under design under the alignments we can actually change this to make it a little bigger so right here sizing full width or you can use a custom width and it's going to actually make it however you want it to look but right there you can see it caps out now let's say for instance you want to actually delete all this space right here in between these you can actually change the gutter with two one and it looks like that so there's various designs how you can add to this theme and you know I gave you guys the demo but you know some of you might want to do something else so I'm just kind of giving you all different ideas and examples of what you can do with your websites all right it's next section we're gonna do this section right here now this section it's elegant it's beautiful it looks kind of like classy sloppy but it looks really nice at the same time so let's go ahead and do that so just by looking at this I hope you can know what this is this right here is a call to action this right here is an image and it's a two column row so you see that so right here if I click on this a call to action this is an image we change the filter a little bit that's why it looks like that and it's a two column row we expanded it all the way to the page and we made everything bigger alright so over here plus new I'm going to keep working here image and I'll close this right here oops I closed that there we go alright sometimes sometimes weird stuff happens in the wooden WordPress and telling you I'm telling you so now we have the image and then what we can also do here is just duplicate this right here and simply just drag this right here that's another way on how we can do this when we need to modify it a little bit's because we don't want the background color well I'll let you decide well I'll let you be the the the person make that decision so right here under this this gear icon I want to change this to spacing I'm sorry sizing I wanna make this a full width and I want to reduce the gutter remember how we had no space in between this I want to do that here now so right here use custom gutter widths and change this to 1 now you can kind of see how there's no space in between it the image has gotten bigger it's filled up all the space as well and then right here you can kind of put in some text so right here we have signature process made simple I'll put that in signature process made simple now I want you to look at this and understand what I did so what I did is I make the text bigger I added a little bit of space in between its and that's about it I change the text to black and I reduce I took out the background so it's just inverting everything I've done basically alright so over here we can go ahead and make the design of the title types a little bigger here we'll go and change this to something like title text we'll change it to something like 62 and the alignment will put it to the right so just like that and then also for this text right here I'll just go ahead and copy this and also one thing to notice is that you see how I add it in a black overlay or I'm sorry a black shadow instead of a white one to kind of emphasize because we're not using black colors so or we won't be using a black color so here I'll just go ahead and paste this and I'll make this to the left right here as well and also right here for the for the button as well it'll change the button alignments to the left as well like that alright now one thing I want to do here is I want to actually I don't want to add in this black background you see right here how we don't have this background so we're gonna do something a little different here so I'm gonna go ahead and get rid of this background here actually I'll leave it for now now a trick to do right here is I want to add color right here right but I can't because that's how much the module covers now over here under this section we can click on row settings and we can actually add a color for that specific section so right here in our background you can see how we have background color one and then we have background color too so here I want to add a background color of something like grey or something something a little bit better than what we have there so I'm gonna add in like maybe a grey here a background color too I'm going to reduce this a little bit more to make this just to cut off these images alright so we have background color background color too over here I'm going to go ahead and delete this background make sure that's all deleted we're not gonna use a background color there and now you can see that we have the background color there as well now what I also want to do here is I want to equalize the column rows I want to make sure that both of these columns are equal so under the design I believe it is under sizing I want to equalize the column rows so what that does now is that it's basically making the space right here now I do have a box shadow there and I don't know why that's oh I did add it I did that Eddins sorry so a box shadow we have to take that out that's really ugly now this is we're gonna use the margin and padding this is we're going to kind of decorate and design where we want this position at so right here under the design we have spacing now right here we can add in 50 margin maybe a little bit more maybe 60 margin now this is a complicated feature you know split screens are always a little complicated so if you don't understand this you know don't feel like it's a you know don't feel like it this is like super complicated but you can kind of understand now why we use margin adding and I specifically did this in this tutorial to help you all understand you know why we would why and when we would need margin and padding so now you can kind of see that we have this this background right here and it looks great you know now one thing I did here is I actually added this into a slant now we're going to introduce you to something called shape dividers and you are going to love shape dividers so I'm gonna go ahead and reduce this all the way and I'm going to reduce this all the way to kind of close it and you know I did add a dark text shadow so for the butts in I added in a black shadow so right here I didn't a black one right there so let's go ahead and add in a divider so right here in the sections we're gonna do dividers and you are going to love dividers so right here we have dividers so yacht's is top right there section divider pick a section want to make this clear right I want to make this transparent so the top all right so now we have the divider Heights where'd it go oh you know what I believe we're supposed to take that out so let me let me do something really quick here we're gonna go ahead and change we're gonna change them setting sorry I messed up a little bit background setting we're gonna go ahead and we're gonna go ahead and delete this one and we're gonna add in the color right here as well sorry so the background color is gonna go on this section right here all right you see that sorry about that guy I messed up sorry I'm not on a script guys give me a give me a break come on give me a break you know alright so we're gonna add in it like that now right here under this section right here we're gonna go to design dividers and we're kind of just kind of you know you can pick a divider right here whatever one you want right there so you can kind of see how it's now you can kind of see the how it's kind of like a you know a different slant and everything and I'm gonna change it to this one right here now I'm actually gonna invert this like that and you can actually change the divider height you can make it however you want so that's another amazing feature and you can do this on all the pages so I did it like that now I want to go ahead and do that for the bottom as well so right here under the bottom I'm gonna do the same exact thing you know see how beautiful that is look at that it's it's absolutely gorgeous now you can do this different way so you can see right here how you know there's very different ways on how you can do this but I just decided to do like this I just you know you get the point you know I'm not gonna follow the exact same step but what I did here is I just added a call to action I use the same thing and that's basically how I achieve that section right there so that's right there on how you can use shape dividers and you can use shape dividers on any specific part so for example right here under the design tab under dividers on the bottom you can have a divider right here on the bottom as well and you can actually change the height of its to however you want it to look and I'm you're gonna you're gonna have a blast of dividers people especially beginners love shape dividers so that's basically how I achieve that certain section you can kind of mess around with that and kind of you know have fun with that and mess around with that but let's go ahead and go on to the next section we're gonna do testimonials and then we're gonna do this section right here and actually have a free layout for you on my website that you're gonna go ahead and upload so you don't have to make your own footer this is a custom footer and I've actually made it for you so you can just go ahead and you know mess around with that as well so right here now you can see this section right here is virtually the same thing right here right so instead of doing all the hard work all over again why don't we just save this section and upload it to another part of the website so right here I'm a click on this little grey or sorry teal section click on save row to library and this is gonna be our header section and we're going to save this to the library all right now right here I'll click on this plus add from library and now we have this section for the library and then you can see it's right there now what I want to do here is I want to actually actually know what we'll do well go ahead and delete this section we'll make a brand-new part and then you can see right here how it kind of you know it's a whole new section it doesn't extend to the part of the page and then now right here we'll go ahead and add in this section right there and of course you just have to change the the font or the color or the the words you know testimonials now you notice how it's too big right there we'll probably need to reduce the font size so it is a little too big for us so right now we have 200 pixels and I believe we can kind of change it but you know it will probably do that through the through the module study because sometimes sometimes the Builder can get glitchy when it does that so I just choose not to do that so right here now you notice how I can't really highlight this section how it's kind of like it's kind of hard to get it this is we're gonna use this part right here so right here I'm gonna go to the text and we're gonna change this to something like we'll change this to 150 pixels okay cuz it's too big for that section or because testimonals is a longer word so I changed it and now we'll go back and scroll down and now you can see how it fits there and now right here let's see your we got it the our services and then we'll do testimonials and then we'll just leave this as demo content right here so now we're going to do is we're going to add in these sections right here and again we need to make one section because with one section we can add it we can duplicate it and make various sections right so right here I'll do three icons and then we're going to now use the testimonial one and there's tons of modules you can use but um you know it's just a learning curve at this point you know all the settings are the same for each module you can kind of have fun messing around with them now here we'll put Darrell Wilson Darrell Wilson and then for a job title do CEO and then water my website Darrell Wilson calm and then here we have some text etc now here in our image this is we're gonna want to add in the portrait so right here you can see that I have different portraits and a lot in this guy this guy right here he's having a good day he's having a really good day and of course you can change all of the settings as well so for the design you know you can change the portrait width and everything else you can have the text color quote icon you can change it to something like black see how it's now black so most of these settings are very I guess you can say I guess you you understand it right here on a debauch shadow and I want to change the balk head out to black alright and I'll just reduce there I'll just copy this put it right here and I'll go ahead and copy this and do it right here now I want to show you a new feature called extend styles this is basically where you're going to copy everything throughout the entire page so right here I'll go ahead and do something a little different you know if the follow me here you can just kind of watch and you don't have a drink we're drinking medela right Modelo so here I'll just change this to something like all things are black now what I can do here is I can right-click on this and go to extend testimonial Styles now what this means is it's going to extend this style on to every single module on the page so right here I want to say I want to extend the style to the entire page this section this row or this column now since when we have testimonials on this three on this page I can just put this page you know but let's say for instance I had a call to action right here and I wanted to do this page it's going to change all the call to actions throughout the entire page so that way you can visually create something really fast but for this one I'll just do this section and then we'll go to extend now you can see that it's all changed because it's just copied the style throughout the entire website or for this section so that's basically what I did right there so that's that's a feature they have called extend styles and it's a great way in how you can speed up the process of making your website now change this to something like black there we go and then I'll do this again we'll do we extend styles and there we go and you can see nothing else on the page has changed because it's only affecting the testimonial modules and I want to add in my little cool little little design right there my background so right here background image and then wait is it in the left side now yeah left side right now yeah left side and then I'll go ahead and make this the actual size and then I'll put this to the bottom left there we go now there's also something that we can add in here called the parallax effect as well so is it no center left center left the parallax effect what it'll do is it'll actually make the illusion the image is following with it now this is a bad image to use so you know we'll do that a little bit later but I'm just kind of showing you that if you do like to have the parallax effect you can have it in fact let me see if I can add it to this image right here I believe we can I don't know for I think it's only for backgrounds yeah we'll have to yeah we can't do it we can add it to this one right here I'll give you an example oh but it the problem with the parallax it disabled ingredient so right here you can see that if I scroll down the page you can see the image follows with it but it does disable gradient because the green will not work with it so that's just too bad we'll have to we'll have to say that for another day another rainy day all right so we have this section right here now just by looking at this I want to understand what this is so this is simply just a background we have the gradient and we added the image and this is a simple call to action you'll notice that text and images are pretty much almost the same thing and what I've done here is you can actually save these as layouts and use them on different parts of your website instead of doing them all over again from scratch because that can be a total pain in the butt right so let's do that right here I'm gonna click on this regular and we have tell you up we're gonna go ahead and use another call to action that I already have you know why why should we do everything all over again we already have something that we've already made so right here it's gonna copy this and take this call to action and drag it all the way down here all right and right here we're gonna go ahead and enter in the background image I have the picture of this girl right here and then we can go ahead and we'll add in another one a gradient overlay and remember to make sure that this will place above its and then you would simply just go ahead and paste that it now really quickly what I want to do here is I want to I believe we can go ahead and copy this section copy section styles and I believe we can apply it over here there we go yeah except it just took the image that's okay we'll just change the image so that is another feature that yeah that's another feature you can add you know so you know the copy the copy Sal will basically just copy all the formats and then you know you can just kind of a you know it'll just copy it and you know you can have fun with that anyway this all right so all right that's something a little weird drag it down a little now one thing right here is that we have a white background so we don't want a white background but I'll just change the text right here to whites before we do that sorry here light and we do have a background right here so you want to go ahead and disable that background color I want to disable the background color don't give me attitude here we go now one thing you notice that it has a box shadow around it as well because up there we had a box shadow so box shadow just take it off and then from here you know we can kind of just you know we can just make the text a little bigger title text we can make it you know a little bigger to kind of give it some design and decor and everything else so at this point we have actually made the button it doesn't look similar to this and the only difference is that this is bolded and this right here is a square button right here so we can just actually bold this right here and I feel that bold makes that makes the page I'm sorry makes the makes it more friendlier you know it just it just you know it's more friendlier is it's just it's more inviting so that's why I really like bold on call-to-action buttons as well so right here I'm going to go ahead and save this now in that file that you downloaded there's actually a layout for you so I'm gonna go ahead and go ahead and show you guys my back-end right here okay now really quickly that's that file that you have it has a free layout for you so it is the Divi footer dot JSON file now there's two ways you can do this and I don't know why but sometimes this doesn't work 100% well with Divi I wish it did so here I'm gonna save this make sure it's all correct and I want to take this and drag it onto the page and make sure this is not checked because this will delete everything so you don't want that checked and right here click on Divi builder layouts now this works for some websites I don't know why it might not work for me didn't work earlier and if you get this error that's quite okay it happens sometimes we're gonna go ahead and do it another way so right here I'm gonna go to dashboard now right here we have DV and we have the Divi library now right here I'm click on import and export import choose the file and simply go ahead and select that file so right here we have the it is the Divi footer Jason and then import this Divi Builder layout all right it is importing alright so now we have the footer so now what you to do is just simply go ahead and make this bigger and we'll go ahead and enable the visual builder and we'll simply just upload that layout on our footer just just because I'm a nice guy and I want to give you you know easy work so over here footer and there you go now we have the footer now I want to you want you to look at this and know how I did this you know I don't want just to use a layout to not understand how I did it so let me go and reduce the padding there maybe I should maybe I should change that up for the thing you know so right here we added a text module a text text text you know just text here we have a text and below that we have the social media following so right here we have different at once and of course you can just kind of duplicate one go to the settings and you can kind of mess around the design now all these are the same thing so I don't want you to work too hard you know I want you to this it's a beautiful you know it's a it's a it's a beautiful footer it looks great and then here we have the subscription where people can actually sign up to your email address and you know mess around with that and have all sorts of fun but I'm going to cover the bloom plug-in in this a little bit later okay so we're not going to do this just yet because we don't have MailChimp installed but we will do this a little bit later they have other various email things of use like active campaign or Constant Contact whatever whenever they sign up it'll go directly to your list on your email provider alright so congratulations guys you guys we did the first page I want to go ahead and give a big round of applause to everybody for doing that it's great now I actually have free layouts for this services and the contact but we're gonna do the block from scratch all right but before we do go onto the next page we need to talk about the theme customizer settings such as like the menu such as the footer options down here and ultimately what the theme can offer okay so in this section we're gonna go and talk about the theme customizer of DB so over here we can go to dashboard now when you download Davian you installed AV you get this little Divi icon now these are all the features that come with Divi so earlier we talked about the Divi library we're gonna talk about role editor and this is important if you are running websites and you have clients and they want to mess something up you can limit what they can do on the website so they don't destroy the website you know a lot of people actually do that but right here well click on theme options so right here you have general theme options such as you want to add a logo so right here I'm click on upload and over here we have this little logo right here and I'm just in click on status logo we haven't fixed navigation bar and we'll talk more about that what it is we have a Divi gallery we have different color palettes you have grab first posts all these basic options right here now a lot of these I'll be very honest you're not really gonna mess with these right here you might if you have a custom footer so these right here are the icons on the bottom of the page so right here you can see that we have these icons this is what these are referring to right here here we have a number of posts displayed on our category page we'll talk more about this when we talk about the blog we have a back to top button so if you want like a back to top button like this right here that would enable that feature smooth scrolling which is I really recommend to do you can go ahead and able smooth scrolling it'll basically allow the website to smooth scroll II on the website instead of like choppy so here you can see that we have a smooth scroll effect to it y'all go ahead and exit the visual builder just to kind of give you a you know a better example of that so here you can see how it's smooth scrolling and it's not chopped up over here we have other files but you know your options but you're not gonna really miss any of these I would leave all these is standard over here under the I'm sorry I'm gonna click on Save Changes because I added the logo over here we have navigation and this is more for you know pages and other options but quite honestly you're probably never gonna mess with these so I would go ahead and leave everything here blank category this is for the blog general settings you know disable top tier drop-down menu links all these settings right here we're pretty much not going to add speed we don't even have scroll to anchor text builder right here you can enable the Divi builder on pages post and also projects I think you'd always want this enabled I don't know why there's an option to disable its advanced again you probably would never do that except right here you might want to edit the classic editor if you are familiar with Divi already this is where you would you know add in the classic editor and Nabal the latest Divi builder experience you know I gotta be honest I have no idea what that is I'm really not sure to be honest layouts right here you can decide if you want to display the author the date the categories the comments on your blog posts and when we do the blog you'll understand more about that single page layouts general settings adds I don't think you'd ever want to know I don't really run ads on this section I use it as a widget we'll talk more about the widgets in a little bit we talked about the blog SEO there's a plug-in for this I really wouldn't mess with its integration I would leave all this standard this is more for developers and updates this is where you're gonna enter in your username and your API key so when you get Divi you actually have the option to here go ahead and show you all I'll go ahead and log in under the accounts you have your your API key so this is basically where you're going to you know enter in all the information so your username and your API key right here you can go ahead and put that in right there alright now let's go ahead and talk about the theme customizer so I'm going to visit websites and up here we're go to theme customizer all right now the theme customizer controls basically your header and your footer section as well as different other options so right here in our general settings we have site identity now right here it's like what do you want your your your thing to say up here now we have a logo right there so I don't really want to add anything so this ready doesn't really matter what I puts because I already had a logo now if you need a logo there is a link in the description of this video to website called fiber and fiber is a great website on where you can get logos for very very cheap so here I'll type in logo design let's see if I can skip that all right and you know you can get logos cheap is $5 you know there's these guys who charge way too much money but we can get something that's like zero to ten bucks you know like something really cheap you know because 50 bucks all that stuff yeah so right here you guys can get a beautiful logo for as little as ten dollars I will have a coupon code in the description of this video I think they offer me a coupon code so you all get a big discounts on your on your first logo alright so be sure to check out that coupon code as well over here we have the site icon so you see how over here we have these site icons so if you want to change those this is we're gonna do it and click on select image and I'll just collect WP friends calm and then see however here you can see the icon has changed so now when they visit my website they're gonna have that logo right there layout settings now I don't personally like these options because we have already designed all of these settings right here in the in the page builder so I really think that these right here are not necessary but you want an able a box layout you can enable a box layout to your page you can also you know change the content width of it as well the gutter width of it as well you can mess with all these settings but I personally don't like to use these settings because again we've already kind of done that in the page builder so I don't really think the theme customizer would be any good typography same thing these are global layouts so or global I guess you can say where it's gonna go ahead and change the text size all of this stuff right here and it's going to apply to everything on your websites so if you want to go ahead and have that approach you can do that so for example right here the header text size it's gonna go ahead and change all of the header text sizes on the entire page but I don't really want to do that because I've already you know made it to how I wanted to look so I'm just kind of giving you options on how you can design this but I'm kind of against a theme customizer because we don't really need that's because we've already designed all of these right here on the page builder so you know why would we want to do it like this you know because maybe you want a different header text for certain parts right over here background you can add a background color but again that's the default we've already have our own background color so those options are a little not necessary but the ones that are necessary is the header navigation and the footer so header navigation so right here we have our menu right but maybe you want to go ahead and change some stuff so we have header format we have different styles so we have center we have centerline with logo so our logos right there we have a slide in which would basically slide in the menu or we have a full screen right here where we can go ahead and click on this and it'll be like that right there or we also have a vertical navigation which is trending and here you can have them the menu on the side right there if you choose to have it like that so you can go ahead and add a vertical navigation I'll just use centered for now I'm sorry I'll do Center in line with logo and I'll click on publish so now I have it like that so over here the primary menu bar so here we have the options to change the different styles of the menu so here we can make it full width and we can even hide the logo now when you make it full width right there that only works for certain options like the default I'm sorry the yeah the default so right here menu bar make full width and then right here we can kind of change the I believe it is yeah I guess I change the spacing just a little bit just a little bit there so it should change a little bit more but yeah so yeah we'll go ahead and change it back there okay let's change back to centered all right the menu height you can go ahead and change the menu height right there you can change the logo size you can make the logo bigger or you can make the logo is smaller you can change the text size of the menu so you see how the text is getting a little bigger letter spacing so here we can have the letter spacing all different and also the fonts which you know you might want to choose the same I think we're using Montserrat right is that correct Montserrat I just saw Montserrat there it is what's that one monster I alternatives huh that's interesting and then here we have the text color we can change this is something like black we change it to white we can even bold it now right here we have active link color so that means whenever they click on a link what color do you want that link to be well change it to something like black or we can change it to white if you don't want it you can just change it to transparency and then it's not going to show that or you know you're gonna change to the same color of the letters so we can't see anything right now people want to change the background color so right here the background color you can change us to red you know black or you can have a transparent menu like this right here you can kind of reduce the transparency and now we have a full with transparent menu the drop down menu background color now I didn't show you how to do that so I'm gonna show you how to do that really quickly so if you want to drop down menu we're gonna go ahead and go to our menus right here and I'll explain what I drop the menu is so over the menus right here you're gonna go and take this and drop it like that and save it now when I hover over its it's gonna have this drop down like this and you can kind of change the background color of the drop down as well so that's basically what the what that setting is so had our navigation where were we we were at primary nav bar and then we have the drop down menu text color and the drop down menu background color so maybe changes to something like white and I can see it's like that but you might want to change the text for that because if you can't really see it's so maybe black right that makes more sense and then we can change this also to block right here have a black line a little bit cleaner right okay and then right here secondary menu bar so this is basically when you scroll down you know how you want it to look so right now you can see how the menu kind of adjusted right there you see that also the fixed obligation settings so this right here is the fixed menu height and again you know you might want to change this so when they do scroll down like this right here you can see how I would now adjust like that so I added black you know just because I think blacks good but that's basically what the fixed navigation settings is and I'm sorry the secondary menu bar is when you have a secondary menu so the secondary menu can actually appear above this one right here all right so that's basically the secondary menu bar settings and then we have header elements so if you want to add in you know various other various other ones we can go ahead and do like you know we can add in leave it's not supposed to be looking like that it's a little strange sometimes guys the Builder acts a little strange so I believe it's supposed to go above it so let me go to the secondary menu bar and yeah you know sometimes it does it tends kid a little glitchy this is supposed to be actually on the top so that does happen to you you know my apologies but that's what basically the header elements is supposed to display on the top of there unless I did something wrong you know let's I change the setting right there but generally I believe is supposed to display above that page so if that ever happens to you just contact Divi and saying hey you know this is acting kind of weird or this is this is not you know correct but I believe that is see here header elements yeah it's supposed to display on the top right there I'm not really sure maybe it's cuz I have to publish the page and then actually visualize it on the website I think that might work I'm just going to try that yeah see there it goes you know I don't know why I did that so sorry it's just sometimes in the world of WordPress guys just just really weird stuff happens you know so that's basically the additional bar you can have up there and then you can always change the settings for that as well under the header elements with some CSS you can change the position of its but you can kind of venture off and kind of join like WP friends and ask people for help saying hey you know how do I do this with Divi and you can join our Facebook group all sorts of really cool stuff footer so we have a footer right here now we have a specific footer so we have different footer options so we have like a three column a two column and a four column row and right here under widgets widgets are basically the actual footer so let me go ahead and enable some footer widgets so right here footer elements so you can see here like this right here will change for footer elements footer menu this will change the actual footer text color all these other settings right here once we add some text to it and then the the widgets right here we want to go ahead and add in some widgets let me go ahead and see we can add in some widgets here and this right here will take it you know it takes the credit right here so all this stuff all these options right here are for the bottom section now let's go ahead and add in some widgets on the footer right here so we have widgets and we talked about footer area so footer area one we can add a widget and maybe you want to add something like a text you know and here you can add in like about us and then you can type in something like this oops you can type in something like this is all about Divi or about us you know edits the dummy text maybe so see right here secret website got a secret but don't don't tell anybody secret website alright and I'll just copy some of this right here and then we'll just paste it now I rather do the I rather have this kind of footer right here because this footer right here it's very limited in it there's not much you can customize so you know I I just choose not to really use the default for Divi because the footer I mean let's be honest this right here looks much cleaner than this right here but if you choose to use this footer you know you can add another widgets you can type in something like a calendar and you could have a calendar today's date or you can enter in photo area three and you can have pages maybe through the pages so this would be an additional footer so we made this footer now if you don't want this footer you can delete this footer and use this one as your default and of course you can always change the color you can change the font of this but I just prefer to use this one because it's more customizable and you know you can kind of mess around with that and have fun so that's basically the footer section so again you know if it just it just takes time to mess around with you know footer elements show social icons you can kind of go with this you know I think by now you kind of know what this is so here we can change it the three and and you know one one even you know something like that but I don't really like the footer on this MV because I like their page builder better so it's just preference at that point what you want to use now buttons you know I don't even know why they have these options here I'll explain to you what they are but I don't think you're gonna want to use them buttons will just basically change the colors of your buttons on your site but we've already done with the page builder so I don't really want to do that blog section you can change the blog once we talk about blog you can change the header size and everything else for your blog and that you might want to do mobile styles so this is what looks like on a on a tablet and you can always change you know the section headings now this would be necessary you know you can change the header text right here on you know mobile to make sure that it's kind of a mobile-optimized this section right here we would probably delete because or we'll probably hide it for mobile because it's just too big but generally the site looks beautiful on mobile you know we need to make some small adjustments here like getting rid of this right here but ultimately the site is pretty much optimized for tablet and on the mobile view we can see that's again we'd probably need to reduce the size of this text right because that's too big disable this section and we'll talk more about that so when we talk about mobile optimization maybe we can even disable this image right here because it's just not needed and we'd also want to reduce this size of this text because that's too big and disable this section maybe reduce the size of this and yeah you know disable or make that text a little smaller and again you know we'll cover all this when we talk about mobile optimization we're almost there you know I think by now you guys are getting very familiar menus that's the menu homepage settings we did that and then additional CSS as well okay so that's basically a quick rundown of the theme customizer it does give you a little bit more options as far as your footer and your header so now let's go ahead and go on to the next section where we're gonna go ahead and create the about Us page translate this page huh No so we're gonna go ahead and and make this same we're gonna go ahead and make this one right here and this is the last basically the last section of the page Miller because then we're going to go on so I'm going to give you a lay out for the services the contact and then we're gonna talk about the we're gonna talk about the blog now one thing that I do want to note is that's by looking at this I hope you all know how to do some of this you remember we already have all this stuff done so we already have all this stuff done we have we're gonna make this section right here which I'll show you how to do so let's go ahead and get started so over here click on enable visual builder and let's go ahead and make the about Us page so right here both from scratch now I want to make that one section we have up there so right here I'm going to you about us and we're going to go ahead and Center this align Center and I want to change this to something like will change this is something like montserrat right monsura it's a good one and we'll make this ultra bolt and we'll make it bigger like this about us now right here we just need to go ahead and add in a background so we have a background background image and we'll select these guys right here they're all having a good time you know they're they're having a good time they look busy and they look motivated you know so we have this is actually the guy who made the DB thing this guy right here names Nick it's a nice guy and then this guy right here is a designer this is their operations manager and this is their designer team all right so we made that section now I want to go into add in that gradient color that we have right there so going back over here or actually no we can do here to kind of simplify stuff and make it faster we can add a new section add from library and we'll add in our footer now we also have that other section that we made that this the secondary section so we'll go and add this from library nope not that one we have another section here we have another section regular and this section right here leave is this section right here oh we don't forgot to save it so let's go ahead and save this section really quick and I want to go ahead and save and save the other part so we can use that on our other side of the website so click on the home and I want to save this section right here because I want to use that on my other part of the websites so what I'm trying to say here is that you can kind of takes and kind of mix-and-match now that that menu is way too big we probably need to adjust that so right here I'm gonna click on this and go to call to action section save this to the library click on this and we'll click on save now these other options are here really quickly like this right here is history so if you ever want to go back to something you can go over here to your history this right here is a as a setting so like your page settings design but you can always change this when you make the page it's just another way to do it and then this right here is adding in premade layouts which we'll talk about in just a little bit in the next section or almost there so I made this section but really quickly I want to go ahead and make that menu the secondary menu a little bit smaller so header navigation fixed navigation settings and I want to change the menu height yeah a little something a little bit smaller you know so yeah there you go there we go a little bit smaller because I was way too big all right and let's keep going the about Us page so right here I'm an able to visual builder and I want to add in that other section so this will actually cut down our work you know so what enough to do so much so over here I'm gonna go to add from library now this section right here add from library the blue section the blue section call to action and there you go so now we already have this section done we have this section done we have our title right here which we're gonna use on we can use out on you know the other part of our on this website but right here I'm a click on this gear icon go to design and same thing background let's see we can do here I want to go ahead and copy this section styles and I want to go ahead and paste see right here we can go ahead and do this right here copy section styles and then paste section styles there we go and then here we're gonna change the image so that really makes it a lot faster you can see that we can you know do everything a little bit quicker then we're simply not really good right so here under the about us I just want to change this to something like whites because you know it's it's it's better looks better like that and I even added a drop shadow to it and that kind of gives it that look right there so that's how he achieved this look right here and then right here now I hope you know what this is right here so this right here is simply a call to action and an image right so right here new section we can delete this section right here I'll close this will delete this section gonna need this section so right here we have an image and then we'll just add in the WP friends one right here and right here we can add in a call to action now I made the mistake we actually made a call to action already so we can just go ahead and add that from the library right let's see we can save this right here now I should have saved that other module right because we already made the other module I don't want to work again you know lazy I'm really lazy we can we can just take this right here and slap it on on the other part of the website so I'm a lazy guy you know we're gonna save this module right here we're gonna this is the new call to action see how amazing that is how we can just kind of save stuff I'll save it and then we just put it on different parts of the website because you know we're already using it you know why would we want to do everything all over again sorry here I'll go ahead and add this in call to action and I think we had changed this to something like I think we're using old ages the black and then right here we'll also change this section right here to the title or the text to black or dark now the reason why it looks like this is because remember we added margin and padding to this earlier so under the spacing section we need to just take this off right here and for some weird reason you can see that turns blue I don't know why it's it's just a mystery it's unsolved mysteries Divi theme you know so we changed the button right here to white right and there you go we have a beautiful section right here that we can use and remember you can mess with these settings guys we're over here under the the design you can change the spacing of I'm sorry the alignments no wait the spacing no no no no sizing the sizing to bigger and you know maybe just mess around you can make it a full you know whatever whatever you want to do you know you you're the boss now now you're the boss now you know what to do right so now you can kind of teach me on what to do you know your styles and this section right here we're gonna go ahead and add in three blurbs now we haven't used blurb icons yet so right here is a blurb and this is basically something where we can add in an image and then some other other text to it so right here I put better designs and then you know we'll minimize that for image and icon will delete that and we'll use an icon instead and we'll just use like a check mark you know and here you can add a link so if you want to link that to somewhere you can do that for the design image icon I can change this to dark and I want a circle icon so actually I don't know about that it looks I don't know about circle icon and we'll move this to the left right here so there you go now we have that specific section and here you can see I just changed the icon to whites so icon color black certain color block icon white and we can also change the size of this as well so you can make this a little bigger all right and of course guys you know I'm lazy so we're gonna go ahead and duplicate this and we're going to put it right there and now we have a beautiful section that we made for the about Us section of course you need some tweaks in design you know we this this text right here doesn't look that great we can even you know what you know what this is missing it's missing a simple background so right here under section settings background I'll choose the background image and we'll choose that same one that we use before you know you want to kind of be consistent with your design and then we'll go ahead and use this as the actual size and put this one put this one to the bottom Center no no no center right center right area Center right you see how just that little piece right there it takes away from the whites because when you have too much whites it's distracting it's it's it's annoying it's ugly so just by adding a little bit of design you can really just you know you can do a lot like for example right here I'll just add a box shadow to this I'm sorry I bought shout out to the actual text you know just by adding just that little stuff right there we've already kind of taken away from the white you know and we kind of you know kind of taken it away and you know it looks it looks better so you can see just by just by messing around these settings you can kind of really just you know there you go like now it looks way better than before just because we added this little image and we added this little drop shot I love drop salad I think they look great now right here we have bar counters so right here we'll click on plus regular now I want you to tell me what we did here I mean I want you to tell me what we did so look at this and say what is this well obviously this is a two column Row one column two columns this right here is a header text and a regular text but I did a trick right here I added in a call to action so over here I'm going to do two sections call to action so I didn't a call to action and I add in some bar counters now right here we can duplicate the bar counters and you know you can go to the design you can design the bar counter color and make it black you can change the title right here you can add a drop shout to it very same options everyone it's it's the very same options it's it's not too difficult they're all the same options so I'm not gonna go too much into it and then right here what I did was I just put in something like a social media website agency and then right here I just put some text now the only thing I didn't do here was I didn't add the link so we don't have to use the link now what I'm trying to get out here is you don't have to use the purpose of what they're for as long as you you know as long as it achieves your purpose that's all that really matters so right here you can see that I just didn't had a background to it but I did add in some you know we added some different structure for the text and then here we'll just make it aligned to the left and also line to the left and then you know we can change the title right here the title text to also align to the left as well then we can make it bigger as well and then we would just delete the background because we don't need the background OOP now we can't see it of course so let's go ahead and add in a background image just like we did before in fact you know no no I want this right here and I want to wait there we go I want to copy this section styles and I want to go ahead and paste the section Styles there there you go very amazing look at that I love Divi you know it's great now right here obviously you want changes text to whites so over here you go to gear icon I'm sorry design and go to the title text and change this to white right and then we can go ahead delete these ones and duplicate those right and what I did right here also is what I added the edit the shape divider so what we can do here is also add in the shape divider so for the background I'm shy design dividers for the top we can go ahead and do this right here for the bottom as well let's see here so for the top and for the bottom and see here there we go something like that you can see how now we're adding design and decor to its and you know we needed to make some space so it's like just simply dragging some space and there you go now you have a stylus section right there you know so very stylish very beautiful amazing you know and it's very simple to do this stuff and this stuff looks very advanced you know I mean this section right here looked like it was pretty hard to achieve but it really wasn't you know it's just the shape dividers and you know this right here is is bold now remember that's a very big thing to do I think you should always make these titles bold because they just come off very friendly you know like that like now it looks complete just because you've changed that you know in fact people really buy stuff on your website or visit your website just based off text font image and color you know the brain is a delicate thing and you have to kind of manipulate it to get what you want and right here you can see that just by changing this it looks more comfortable right now over here we have meet the team and we have our people right here now right here let's go ahead and add this in so right here add from library we have the call to action section without it call to action setting no we'll do the let's see here which section do we do here oh that's the same section I believe it is this section right here header section there we go but this section right here we don't want to kind of combine it so we want to take this we want to take the one out of this one so what we can do here is probably drag this down actually I think we'd probably have to we'd probably need to the reason why it's combining is because they're both in the blue so we what we can do here is probably just duplicate this right here and then maybe we would want to let's see what can do here I got an idea well make a new section there we go and then we'll add it in there and then we'll go ahead and add in this section header section there we go just like that see there's always a way to do something you know we just have to kind of mess around with it and kind of think about what to do now right here we have three different profile modules so right here click on this we want three columns right and then we'll go ahead and find the profile models now guys in this video I can't go through every single module because there's so many but you know you'll get the idea in points so right here we have you know change your name to Darrell Wilson or whatever you want to change and then right here CEO and then we'll add in just a little you know just some little icons right here and then that's the description now we're here for the design of course we can change the icons to black and what I did right here was I just decided to put in an image it's right here we'll put in this guy right here and for the the text and everything let's see right here this text we want to go ahead and centreline it that's really all I did I sent our line it made it dark this one right here click on this send our line and then all we need to do now is just add a drop shout-out to it to kind of take away from the whiteness so we'll go ahead and go to box shadow and there you go we have something very similar to what we did right here we just changed the font of course you know the we change it to monster and made a bold and then we can just kind of duplicate this twice and then just simply drag and drop it let's drag and drop it like this and there you go and we can also add in a little like maybe we can add in this little thing over here to kind of you know take away from the whiteness but you know I think that's fine you know right here you would just change the image of the person of course it looks kind of weird but you actually gave you all I gave you guys the the people right there so now you can kind of see it looks a little bit better and well I didn't this one right here like that all right perfect so you can see that we have the modules there everything looks great it's the same way to style it so I'm gonna go ahead and click on this right here and click on save alright so we made the about Us page now I'm actually gonna give you the services page so on the services page right here um I want to see if we can actually draw it drag and drop this thing again let's see if this works so we're gonna go ahead and build it from scratch and we're gonna go to your file that you actually got and you can actually drop the file and it should load on the page services import see is it gonna work now now it works see that now it works well what just happened there what just happened see now the services works and I made the services page just for you guys now you guys can kind of go through this and kind of look at what I did and what I really did here was I took part of the templates from DV and I added them in here so in this next section we're going to talk about I'm talk to you about templates and also different other sections but we just got the services page do you have a services page fully complete now go to your contact us page I don't know why it does this what is saying translate is something here oh maybe this I don't know I really don't know why it's telling me to drive it's in English you know so right here both from scratch and I have the contact page for you just drag and drop it and export the layout let's see if this works I'm sorry import the layout all right awesome there we go we have the contact section now now you have a full contact section right here ready to go now I will be having a full tutorial on this contact form because the contact form is very very dynamic there's a lot you can do with it so I felt that putting it all toriel would have been too much because let's be honest you're probably you're probably binge watching this and you're probably you know you're you're looking at other things you're getting distracted so I realize that you know we probably wants to save this for another part of the video because they have conditional logic and we can go ahead and talk about like you know relation equals to and all this stuff so I will be making a separate tutorial for it but for generally for most people for the email you just want to go and put in your email right there so we put in my email right here and also for redirect so if they fill up this contact form you want to take them to another URL that's what that means right there and I think that's basically everything else is just gonna style it you know same thing same exact features so click on check and click on save alright so now you have a full contact form all ready to go perfect now let's talk about the blog so for the blog section let's just click on translate let's see what it's let's see what it did all right I don't know what it did it's a mystery all right so for the blog section it's really simple actually over here we're just going to actually use we're gonna go ahead and use the we're gonna go ahead and use our title but you know I didn't save that so really quickly let's go ahead and go to another page here let's get out of here let's get let's go back to our website and what I want to do here is I want to take this section right here and apply it to our blog because we've already made the header for the website so I want to keep it consistent so right here I'm gonna put header for website and I'm gonna use this for the blog section okay and save that go back to our blog in able the visual builder so ultimately guys we're all we're pretty much done with the actual website so here are under the add from library will put header for section I'm sorry no no no over here the blue one head of our website there we go now over here we're gonna click on plus and we're gonna add in the blog module now so right here is the blog module and the blog module will basically display all of your posts that you have here so we don't have any posts yet so let's go ahead and add in a post really quickly I'll just show you how to you know make a post and this footer is really bothering me do you guys mind if I delete it you know I just I think it's really really ugly also for your blog page don't forget to add in your footer so that would be your footer not this right here okay so make sure to add in your footer as well so over here go to plus do go to posts now this is if you want to blog and blogging is a great way on how you can add design into core to your website now there's two ways you can blog you can actually use the default editor or you can even use the Divi builder so over here we can put in like what makes woman crazy and I want to use the default editor and then simply just go ahead and put some dummy text in there so right here I'll just put them some dummy text now over here under the documents section we have a featured image and this is pretty much one of the only sections are going to use so set a featured image and what women what what drives a woman crazy what would be a good image for that we don't have one well just puts that will put these guys working maybe maybe you guys working too much makes women crazy you know well that's that's a good one you know and right here you click on View the posts and this is your new post right here so we have what makes woman crazy and then you have the post and then you can leave a comment this is great and we can submit the comments and there you go we have a comment now on the blog section right here you can see that we have the post there so now the post automatically appear here however I do recommend using a different style called them I think it's the masonry grid so over here under the gear icon will change this to for the design the layouts we want to do a grid I prefer grid better I just think it's cleaner and again here you can change the text of it you can do all that settings right here I'm not gonna really go too much into this because it's the same settings guys it's the same exact stuff you know show authors showed age of categories if you don't want the date to show to take out the dates and the date will disappear alright so we made a blog post and that's it I mean that's how easy it is to make a blog but right here would probably put our blog right our blog save this now we can also use the Divi builder to make a post now Davi does actually have Divi blog layouts and they're really nice so I'll probably include those in description as well so we'll put Divi blog layout and instead of using the default editor you can actually use the D the Divi builder to design our you know our blog post as well so right here I'll do build from scratch actually you know well we probably can we probably can add a layout there instead but here you can kind of add in you know whatever content you want to add with the Divi builder so for example right here we have you know we've said we've saved various sections here so we can just add in you know whatever section he wants and then you know we can we can publish it and instead of using the default editor we can now use Divi on our blog page now one thing that you might want to do here you might want to make this full width so I believe it is over here on the right side where we have the page layouts we'll just do a full width section and then update it so now we go back to our posts the sidebar is now gone and then we can actually make the make whatever posts you want right here as well so that's basically a good way on how you can you know use the Divi builder and you know Davie actually has a really really good one so right here we'll do Divi blog layouts and then layouts so let me just give you a good example c11 websites blog layout new layout pack there we go here we go so they've actually made really nice ones let's see right here you can kind of let's see here like this right here I'm the only have one you can see I'm sure there's more there we go so this one right here you can see the how they've designed the blog post with the Divi builder it looks beautiful you know and you can go ahead and go to this page right here you can download these layouts and just upload them to your website alright so that's pretty much it for the blog section now on this next we're going to talk about we're gonna talk about the different models that we didn't use and then we'll talk about the advanced features mobile optimization and then you get into the beer cuz will we all be done so let's go ahead and go on to the next section alright guys in this section we're going to talk about the different styles of mall that you can use with the Divi Builder after that we're gonna be talking about mobile optimization and then the advanced features of Divi along with the templates that you get with Divi as well so right here I'm click on page and make a new page now you don't the follow me here you can just kind of kick back what we're drinking Modelo we just get a get your favorite beer page demo and just kind of kick back and watch me watch what I do I'm just going to kind of show you different features about what you can do with the Divi builder so right here we have used a Divi builder and I'll go to build from scratch now right here and click on close and click on the blue icon now on the blue icon right here you notice that we have regular we have specialty and we have full width now first the full width modules are basically modules that you can use for the entire page so they cover the full of sections so right here you can kind of see that it's a full width section so the reason why I kind of don't like these modules sometimes is because it's very hard to kind of position the text however you want it to be it's also hard to kind of position things to where you want them to go so I don't use the full modules too much but they're also you know it's a great way on how you can you know style it so in order to get this to go to full width or the full page actually I don't think they have that one so over here we go to full width and I believe it is the fourth image as well right here it'll cover the entire full width of the page and then you can just kind of you know change the image whatever you want and then it'll just cover the entire page of the I was messing around with this earlier so that's why you see different images but for example we'll add in this one right here and now you can kind of see it's just an image that's full width so that's basically what the fourth modules do and you kind of go through these like that I also have a slider and you know the slider you can kind of see how it you know you can slide it like this but again I don't really like the full sliders too much because I feel that well first off I think sliders are kind of becoming outdated I don't think many website few sliders anymore but to change the position of everything it's a little hard because like even for the alignment right here it's just hard to kind of uh I guess you can say position this where you want it to go so you can go ahead and s around with a full the settings see if those work for you you know I'm sure it works out for some people I know a lot of websites out there use it so that's basically an overview of the full-width modules again right here we have a fourth menu now that one I would probably use more because that right here you can kind of position two different parts of the website and you know the sky's the limit whatever you can think of to do you can do it with Divi you know it's just there's just no limitations on what you can do is TV so over here again I'll do full width and you know we have a full with header and here you can have a full width header I believe right here you can change the position of it as well I believe you can change the position of it and see image the bottom you can add an image to it right here we can add in a quick little image right here I'll go and hat in something like well I didn't a lot in this right here so it just plays above it and then for the image we can kind of put it to the other side on the bottom I believe that's how it works but again you know it's up to you if you want to use the fourth modules I just chose not to cover it because a lot of the times they're just I just feel that they're not really needed too much Oh header image is that is that word as header image so there they are interesting modules that you can kind of go with you know they work for some people so that's one thing to look at that's what basically fourth modules are now let's go and talk about the specialty modules so I'm gonna close this really quickly and over here we have specialty modules now these modules are really useful so you can see right here how they have different styles so unlike the basic ones that we are using here these have different totall styles like so for example right here you can add in a sidebar to the left side of the page so for example right here I want to add in a sidebar so right here we can type in sidebar and then your sidebar will appear right there and then here you can kind of say I want three columns right here and then you can add in something like a circle counter you can add in I don't know a blurb and then also right here can add something else so there's just different ways and styles on how you can actually you know how you can actually position your page differently and you can see it's orange so it is a little different and yeah so by here again specialty modules I'm sure by now you guys understand what these are they're just different ways on how you can style the page and there's I'm usually before there's very specific ways on how you can use these it's just for the average user you might not want to use them too much you know but I have built websites before or actually did use these right there so they do have some use form and you know a lot of people actually like especially models because of the functionality that you get with Divi so you're not limited to just a column row you can have one that's really big one small one really big one really small etc so that's a quick little rundown of the models that we didn't use and you can kind of go through the actual modules like the ones um like the like these ones right here you know you can kind of go through these and check them out you know they're all pretty self-explanatory I think there's a total of 30 something modules so there's also a slider in there as well there's pricing tables all those are really cool stuff so that is basically a quick rundown of the models that we didn't use and how you can utilize them now let's talk about mobile optimization let's go ahead and optimize our website for mobile now this is probably one of the most important parts of the video because did you know that there are more mobile users and there are desktop user so we want to make sure that our website is fully optimized for mobile so let's go on our first homepage right here so right here I'm gonna see how it looks like on a tablet do we need to make any changes to it what do you think well maybe this right here is a little too big maybe we can go ahead and change this section right here for mobile users so under the heading text right here I want to say you know what's I think that this is a little too big so right here on the tablets we can reduce the size of this so you see how I clicked on the tablets now it looks different now I'm not changing the actual website I'm just changing how it looks like on tablet devices it's going down right here now this section right here there's a few options on what we can do we can either reduce the size or we can hide it completely so over here under the design we can go to settings and go to let's see right here where is the the text size click on this and the tablet and we can just reduce it you know maybe we're like a hundred fifty pixels there we go and scrolling down here you guys tell me how does this look I think looks great I think this looks beautiful now this section right here we might not need it right I mean it's it's it's nice but for a mobile user or a tablet user it doesn't have the split screen effect so we can do here instead is decide to hide the image so right here under module settings I want to go to advanced and go to visibility and hide this on the tablet and the desktop now I'm sorry tablet in the fuff so what that means is basically saying that this module will not appear on mobile users and for tablet users so they will not see that this section right here maybe we need to go ahead and change the divider right there or I'm sorry the yeah the divider because it's just not working properly you know the divider is kind of arced a little differently and I believe it's up here or it could be the blue section so it is I think it's the blue section yeah at the blue section the blue section design and then the dividers and then for the bottom section we might need to adjust this so let's go ahead and take like on the tablet right here we can go ahead and kind of reduce it like that so now it looks correct right now it looks a little bit better now over here again same thing but we have an option you know we can always just go ahead and disable this right here for go to visibility we can go ahead and just disable this for tablet and phone so it really depends on how you want to approach your websites because you can either decide to reduce it or we can go ahead and just disable that so now for instance this will not display on mobile websites or I'm sorry on mobile mobile devices sorry it's like 4 a.m. you know I've I'm out of coffee it's gone you know it's it's it's all gone so here we have our hour of social media follow now right here if we can and change alignment to Center like that but the problem with that is that this is actually going to affect how it looks like on the actual website so we might want to just leave it like that because I don't think that it's that big of a deal but then again you can go ahead and change it but if you do change it it's going to go ahead and disable that for it gonna apply it to the entire website so what you can do here is probably just disable or make this invisible on mobile and tablet users because I mean how many people are actually going to well actually I don't know that's actually a good idea maybe someone who's on Facebook might be on their phone and check your website and might go to your Facebook link so that's kind of you know that's where kind of critical thinking comes in so that's kind of up to you on how you want to approach the website and then this is what it looks like right here on a mobile phone right here remember this section is disabled this section right here we probably need to fix a little bit more so we can go back over here and go to the design and go to dividers and for the bottom divider we want to select the phone right there and if we want to go ahead and see what we're doing and there you go so now that that's what it looks like on a phone scrolling up here I think it looks great this services section you'll need to adjust this as well so we'll go to our art or just click on this right here and then we can do phone and then reduce the phone size like that all right I mean it's very simple it's very self-explanatory it's very easy now one thing I do want to note that if you do decide to add video sliders or video backgrounds video backgrounds do not play on mobile devices so if you do decide to do that you must have a background image too just to replace that or else your users are going to see a gray screen and that gray screen is just going to look very boring and bland so remember you can always add video backgrounds here I believe they have a URLs now as well or you can just go ahead and put in URLs for YouTube or something like that and you can just you know put it in there now you will need to go ahead and just upload your file right here and then it'll display on the background but I'm not a big fan of video backgrounds I know when I was a beginner I love video backgrounds but people were like hey man this looks weird on my mobile and hey this looks weird on my website because remember people are using different resolution screen sizes so I feel that adding just a plain image or a color would be better but if your client out there really wants video backgrounds which I see a lot then then you'll have to do it like that and then and add in a background image because remember video video will not play on mobile mobile devices so that's a little bit about mobile optimization I'm sure that you guys can kind of go ahead and check that out so let's click on the services page let's just see how it looks let's just take a wealth guess you know let's just see how this all looks on our services page so right here I'm gonna go to tablet all right everything looks kind of good all right now check the mobile and again same thing I think it looks great I think this is totally perfect it looks good everything is simple everything is structured so I think the mobile optimization section is pretty self-explanatory but remember that you must do this for every page because remember also Google will rank you better if your site is mobile-friendly and trust me man they know everything I don't know how but Google knows everything oh you want to make sure that your site is fully optimized for mobile ok so now we talked about the the module we talked about mobile optimization let's go ahead now and talk about the DVD advanced features that they have added in the theme so I've already introduced you all to a few I've introduced you all to the extent styles which you right-click on it you can copy the section you can paste this section you can reset it you can view modify styles and then also the extend styles as well now the extend styles you can actually you know apply these to various parts of the website so you just got to be a little bit careful you know so you know you can extend this call to action to all the call to actions on the page but remember that it'll apply to whatever you want to do so for example right here extend call to action styles so remember this page so it'll apply to the it'll take this section and apply it to or this style and apply to all the call to actions or this section or just this row or just this column so this is a great way on how to speed up the process of your website in case you are you know you have a lot of buttons on the website or you have a lot of call to actions you can just simply do this and that will speed up the process dramatically alright so that is extend styles also the copy section and the paste section we already did that's where you can go ahead and copy a background right here and you can go ahead and paste on a different background and it will basically display those settings on that specific style right there all right let me think here will be got else we have I think of all the features that I mean DB has added a lot of features and also guys they're constantly adding in new features all the time so I mean fact they just added this new one right here and I'm not even sure on how to use it they added it as of today and I'm just kind of you know go to a certain section go to a row go to this row it's like kind of like a speeded up process and they also have keystrokes and I don't even know the keystrokes that's I know this is a divya tutorial but they add in so much stuff it's really hard to keep up with and it's really hard to master each one but i'm sure you know with go to a module which module i want to go do we want to go to the title okay wait yeah okay so yeah you got to kind of mess around with that and you'll kind of you know get the hang of it and alright so yeah that's basically that little section right there now there is one advanced feature that they added and this is called dynamic content now this is probably one of the biggest features they've added in a while and I'll just go and show you what this is so right here we have module setting now I'm sure you've noticed throughout this tutorial you see this little icon right here and this icon right here shows paid title excerpt published etc all this information now the main purpose of this is to basically update your Dyna update your content dynamically so for example this is great for car websites it's great for websites like say for instance you have a page and that page is gonna look the same a lot it'll basically change everything to like an automated system sort of so for example right here I'll just put the I'll just do our services right here and I'll and I'll change this to the page title so now you can see that it's called the page title now of course this is a terrible example but let's say for instance that you're doing a car website and you want to do the purr and you want to have like a or a page template and you want to have a specific template for every single page that's when you would use dynamic content now let me just give you a better example of dynamic content with a plug-in that we're going to use called advanced custom fields so here gonna go to plugins and go to add new and we're gonna type in something called advanced custom fields now many of you might not need this feature but this is a Devi tutorial so I have to cover everything right I can't leave anything out now right here this is advanced custom fields and the main purpose of this is to have custom fields so for clients who are entering in information so for example you make the website for someone right and your client wants to update the prices well they can go ahead and do that themselves without you having to intervene so over here under custom fields we're gonna go to field groups now our browser I already made one that was messin on with one earlier but I'm gonna go ahead and trash this one and we're gonna make a new one from scratch so I'm gonna go to add new and go to courses now really quickly you want to change this post type is equal to page make sure that's correct all right now right here we have courses well what kind of courses well I want of course that talks about C course right here we could talk about courses you do course number will do course difficulty and then right here I'm gonna do text area now you can just watch me here I know this is very nuke this is a plug-in you have no idea what this is but I'm just gonna give you an example of this because I want you to understand and then right here I put place description here this is for your client alright and I'm gonna you one more and I'm gonna do course number and then right here I'll do a number okay so we have our two fields now I wanna click on publish so right now I have a course if achill t and course number so let's go ahead and and use these right now so I'm gonna go over here to pages and I already made a demo page right here so this is my demo page I'll just go ahead and show you really quickly you actually get this layout for free with the Divi Builder or I'm sorry with the Divi theme right here we go to enable the visual builder and right here we have a you know it's a it's a course website so right here we're offering basic courses on our website now let's say for instance that you want your client to be able to just you know enter something in without having to even use the Divi builder we're gonna go ahead and do that so maybe right here we can add something in right here so I'm gonna go over here to edit page and right here we have course difficulty right so this is for advanced users and then we have a course number so let's say this is course number I don't know 22 17 16 all right 16 I'm gonna go ahead and update that now now I'm gonna click on edit with the Divi Builder and right here we have web development right now also right here we can try to we can say something like you know what I want my I want this to be something like the course type instead and it's just going to basically take the course type right there and yeah the course type so I don't know why it says school though let me let me double check there but I'm gonna go ahead and do one more right here I mean I'm adding one more text oh maybe I should go ahead and let's go ahead and duplicate this oh it's a call to action oh it's a blurb oh I thought they were both there too to text right there so that's probably why and also right here I'll just do something like we'll add any other one right there course difficulty this is for advanced users that's that's the correct one you know I don't know why that other one worked so basically the main purpose of this here is that you can actually set this right here to basically be your dynamic content so the course ifficult ii will display right here whatever your client types in then it'll just display right here for them instead of them having to even use the Divi builder and this is great because you can create page templates for them maybe there's a menu and they have different items and their prices change a lot you can just say yeah just go just go in the back end and then just put the price because when they put the price it's gonna change dynamically so let's say for instance right here your client says oh the price change you know this is for beginners now so this is for beginners and they would just click on update now that right there is going to display instead of the other part that we put I don't know why it does that that's kind of weird you know then we'll the wordpress where stuff happens you know leave leave no I want out I want out so now when I scroll down right there it's gonna say this is for beginners so dynamic the the content is changing dynamically and of course you can always style this to whatever you want so a good example for this would be if your client has prices for something and the prices change all the time instead of actually opening the Divi Builder and doing everything from scratch again they can just go on the back end and then change whatever they want so by doing this way it's a little bit easier than having them even mess with the Divi builder and that leads me to my next feature that I want to talk about is the Divi rolls so over here in our Davi we have the roll editor and this is basically saying for contributors they have this access for authors they have all this access you know they can mess around all these settings right for editor they have all these settings right now how do you make a user how do you how do you basically apply that the the DB roll editor well over here under users you'll click on add new and this is great for clients so for example we'll put patty-whack you put their email in so and then you know they would give them a password and then they would be able to log in to your website now right here you can set the roll so let's say this is your client you're saying ok I want to give her a contributor axis and then I'll just click on add new user now you can see that the contributor is now there now if you go back to the DD roll over here the role editor you can go ahead and limits the contributor right here so you're saying look I don't want to I don't want them to have access any of this stuff you can't they can move the items they just can't do this stuff you know so by doing this you're limiting your client because trust me if you're a new and web design your clients are going to try to do things and they're gonna mess it up and then they're gonna want you to fix it and I'm not gonna want to pay you so that's really what happens in web design so welcome to webs welcome to web design you know congratulations welcome to crazy clients and here you can kind of limit the module use and say I don't want them to use these specific modules etc or even mess with these settings right there so you know I don't want them to use any of this stuff so that is an example of the role editors and also dynamic content and remember Divi is constantly adding in new features all the time so be sure to check out their websites go to their website and go to their blog section and just check it out because they add so many features in even I lose track and you know my job is a wordpress promoter I talk about different themes and stuff but Debbie updates quite honest quite a lot so so you keep up with them can be very challenging so that is an example of some of the features that you can do with Divi so they're pretty straightforward they're not too difficult they're not too complicated I felt that a lot of these features are needed they do have some like they have like they have like one with the keyboard strokes I just I just don't I don't know it because I just you know I don't know but there is one last for me to talk about before I forget there is the split testing and this is a great feature that Devi has added that a lot of other page builders and themes do not even can you not even think about so for example right here we have this section right here now I want to go ahead and say you know what's I want to find out what's the best landing page you know I want to know which one is the best but the problem is that I can't really I don't know because how can I do that well that's all we have split testing so over here we're gonna go to split test click on OK and we're gonna click on this right here alright so now we have a split test so what Divi has done basically is they have actually created two different versions of this website so they've made one right here and then they have the other right here so you can see how this says one over here and this is two right here so for example if you want to go ahead and edit one you would click over here you have to edit it through this back-end right here now this is a duplicates of the same one that we made they're just making two and users will see different pages so let's say for instance right here you want to go ahead and use a different background you're saying maybe the background is causing people not to use my service so I'll go ahead and use this one right here maybe the button is not doing good so I want to go ahead and say let's bow our let's or contact me and I'll click on save so now your website is running two different versions of it's running basically two different versions so it's running the first one and now it's running the second one and if you ever want to see the statistics on them you just go to a visual builder click right here on 2:00 to 6:00 and right here it'll tell you the clicks the reads the bounces and the goal engagement so right here you have reads this is running a little little slow come on come on Diddy come on what's going on maybe it's just because I just did it but you know it does show you bounces read statistics all that stuff so let me just go ahead and close this really quickly and I'll just let's do this now I will also visit this website on a different browser to show you all what it can do so let me just go ahead and open up a new browser and we go to patty-whack world paddywhack worldcom all right and then you know I'll just refresh the page a little bit all right so going back over here you can see that the page is different for various websites so you see over here how this right here looks like this and this page right here looks like this right here because it's running split tests to find out what users like the most what do they want to engage in and also look at the button right there so it says contact me and you'll notice there's no other cool ending page so it's running an a/b split testing for us right now so that's the great part about TVs that we can run maybe split testing right here from our website now let's go ahead and go to the enabled visual builder and see now if we can go ahead and access the statistics so I'll go ahead and click on this right here and there you go so now it says like section one has its many impressions section two has one impression because we just click do we just checked it out obviously and right here we have the reads we have the bounces so bounces is basically saying if people are leaving the website right away and then we have the goal engagements and you know you can just kind of compare goals now once you're done with this once you decide okay I've done it's you know I know everything you can click on right click right here and end this blood test click on proceed and now you can pick the winner now right now we don't have enough statistics so right now it's a zero percent and zero percents but your your your section with more clicks and engagement will have a % so the one with the higher percent you'd probably want to say okay you know what's this one's working out for me well use this one and then it will just save it now this one right here is your winner and now this one is what's going to display on your website so that's basically a quick rundown of split testing it's a great feature it's it's an amazing powerful feature that you can use with the Divi Builder all right guys in this section I'm gonna talk to you a little bit about global features and also the Divi blank page template and what you can do with it using the Divi Builder now first let us talk about global features so I must scroll down right here and just give you an example about global features are and what you can do with them so right here you can see that my icon is green and the reason why it's green is because I actually made this a global feature basically saying when I change one thing on this footer it's going to then apply it to all of the footers on my website so I don't have to go to every single footer section and change it so let me just go and give you an example right here I'm gonna go ahead and disable the global now for instance for you let's just say for instance this is your first time using the global feature you can click on this little icon right here and you would go and click on make this a global item now again you can use this for different parts like you can make this a global feature you can make this a global feature but I find that most people use the global features for the custom footers so right here I'll go ahead and put in the custom footer a custom footer and click on save to library and again you can always disable global features just by right-clicking on it and clicking on disable global but for right now and click on save and just give you an example of the global footer so right here I'll click on plus new click on page and this will be that will just go up the footer page oh yeah the footer page there we go the footer page and I click on publish I'll click on use the Divi Builder built from scratch and I'll click this build on the front end all right and right here I'll click on built from scratch I'll just go ahead and I'll just go ahead and just use a template we'll just use a quick template right here I'll just grab this one and I'll I'll use this layout right here just for an example you know you don't have to do this I'm just kind of giving you an example all right so here's the page now on the way bottom right here instead of using their custom footer I'm gonna go ahead and delete this right here and we want you to insert my custom footer so right here I'll click on the plus icon click on add from library and now you can see that we have this these green icons now earlier I was messing around with it of course but right here we just made the custom footer so I'll click on this and now this is the custom footer from the original page now if I were to change a permalink if I were to change a text it's then going to apply it to all of the global features so again instead of actually having to go to each specific every single page you're going to change it on one section it'll apply for all of these sections where you have the global features enabled so it does allow a lot of customization and allows a lot of sped up time so I highly recommend doing the global features if you decide to use a custom footer so right here I'll click on something like speed up I'll click on save okay now it's going to go back to the original page and see if that has actually changed on our homepage so right there I'll click on home and now the footer should change to say something like speed up and there you go see now has it says speed up because it's applying it to all of the global features on our website pretty cool right pretty amazing pretty fast right so that is basically a quick rundown of the global features now let's talk to you about the Divi blank page templates now I do have a freebie for you all I do have a free downloadable kit that you guys can download on my websites or has tons of really nice custom footers I'm sorry custom headers so let me just go ahead and go over here and go to plus new and go to page and right here will do the Divi Blanc the divi blink and for templates I'll select blank page and click on publish so now we're using a blank page templates now with the blank tech blank page template means is that we are actually not using any of the theme features anymore so for instance right here we're not gonna have the footer we're not gonna have the header that comes with the theme we're gonna have literally a blank page with nothing on it so right here click on build on the front end now you can go to my website right here Darrell Wilson comm and click on Divi layouts and I give away tons of free stuff man tons of free layouts tons of free layout packs and the one I want you to download is right here called the free Divi download the Divi header uikit now it's a free layout it's not going to cost you anything you'll just click on Add to Cart and then right here click on View the carts and you'll get a zip file and all you need to do is go ahead and download the zip file and then you will go ahead and extract it and open up the JSON file so right here you can see I'm placing the order it costs us $0 I will place the order and voila so use the bloom plug-in right here from elegant themes you guys can see and I also use the monarch plugin as well from elegant themes I use all of them on my website so right here I'll click on a download so download Divi 100 header UIKit you can see this fall right here has downloaded so I'm gonna go ahead and take this and I'm going to drag it right here ok now inside of that file right there you're gonna get this JSON file so when I open it up right here you're gonna actually get the JSON file and this is what you're going to use right here in order to upload to your Davi library so go back over here I say well go back over here it'll help me exit out of this really quickly well go ahead next it out because we need to actually upload this to the DV library first so Divi Divi library and import an export imports choose the file and they'll simply go ahead and and put in the Divi header Divi kit Jason there we go a little bit of tongue twister there we go import Divi Builder layouts okay so it is importing my header layouts that I've created now over here I'll click on all pages and I'll just click on are we doing we did the we'll just click on will just did a new page we'll go to new page because I've made some punch of pages earlier I was kind of messing around with it so here we'll do the blank page template oops temp a template there we go the Divi blank page template and right here I'll click on blank page and click on publish and then use it if you builder build from scratch and build on the front ends okay so right here you can see that we have this blank page literally everything is blank so there is no theme options right here so what we'll do right here is I'll click on this plus icon click on add from library I'm sorry we have our um we have there in our library so over here we'll click on this plus icon right here go to your saved layouts and now we can see the Divi header the header DB kit we'll click on that right there so that is the file that you downloaded from my website so now you see we have all these cool headers so all these right here are headers that you can use for your website so let's say for instance I want to add a button you know let's say for instance I really like this one right here this blue one so I'll just go ahead and delete all these you just kind of grab the one you want you know just just you know just go ahead and uh you can pick one you know just go ahead and grab one I'll grab this one right here this blue one I'll just go ahead and lead all these right here and then you would just make your website like normally so now you have a custom footer I'm sorry custom header using the blank page templates and I'll just go ahead and just give you an example of why you'd want to use it so right here I'll just um I'll just well that's a really bad example we'll use we use this one right here Oh No we'll use this layout so I'm just kind of giving you different options just in case you want to be very customizable and not use the default theme settings that you get with Diddy so now you can see that we have a custom header right here and then we have our website right here and then the say for instance you want to add the global footer on the bottom you can go ahead and do that by clicking on the + add from library and added the custom footer so by saving this page now we have the global footer right there we have our websites and then up top right here we have a custom header that we made with the Divi builder so I'm just kind of giving you all different options on what you can do with it and it is responsive so if you click on the little icon right there you'll see that right here they actually did blur it out because on a screen it would be too hard to click the button but you can see right there that it is totally responsive and it looks good now just by looking at this I hope you know what it is so this right here is a text a text a text a text a text and literally that's all we did we just basically made text models right here we space them out and then over here we simply just added in a button module so I hope you kind of understand how we achieve that so there's just no limits on what you can do with Divi it's extremely creative I mean you can have a custom everything you know you can you can make a custom sidebar there's just so many different possibilities and features that you can do with the Divi theme so in this section I just want to cover that really quickly because I didn't leave that out in this tutorial so that isn't it a great example of what you can do with the custom footer at the blank page and also the global features right here as well now let's go ahead and talk about other things right here so let's talk about the bloom plugin oops go ahead and go and put that back over here close this you know sometimes you know we have to we have to align these properly here all right so when you get Divi you get the bloom plugin and the blue plug-in is an email opt-in it's great it's powerful and it's amazing so go ahead and click on download and we can go back over here to our website and we can actually upload this plug-in so right here we'll click on plugins now I'll just give you a quick rundown of what plugins are plugins are basically apps for your websites just like you have apps on your phone this is plugins or apps for your website so this one right here is a contact form this one right here helps your s this right here allows you to sell what sell products on your website and take money and if you're interested in that I have a full tutorial on that in the description below this one here is for wordfriend security for you know XML sitemaps Google Analytics I mean there's over 50,000 56,000 plugins so it's hard for me to tell you which ones to use I just use a bunch of them and you know a duplicate this will duplicate your entire websites contact form this is a caching plugin this right here is a slider this right here the caching this right here is a really old page Buehler no one uses no more so you know there there's just a lot of plugins that you can do that you give your website a lot of functionality but over here we'll click on add new upload plug-in choose the file and we'll go ahead and download the bloom plug-in alright and activate the plugin so you have bloom right here so bloom over here you have different opt-in forms so right here we have opt-in forms and you can select the new opt-in and what kind do you want do you want to pop up a fly-in below the post etc so maybe you just want to pop up right now and right here is where you're going to enter in your information so right here we're gonna go to MailChimp just for your instance I'll add an accounts and then this is we're gonna enter in your account name and your API for whatever email you know whatever provider that you're using I'm using MailChimp so that's basically what I use so I do have a full tutorial MailChimp as well in the description below if you're interested in so these are the templates that you can use and just go ahead and grab a template or you can make your own and here you can actually preview it and when your visitors go to your website they're going to be brought with this pop-up right here it's a beautiful pop-up it looks great and I'll go ahead and do the display settings here you can kind of decide the display settings so how many seconds how many delay seconds do you want this poppets to show up well five seconds do you want this to show at the bottom of the post you know trigger after scrolling there's various options that you can use with this right here and I just want this place on the home page just the home page or post you know just the post and then click on next and save and exit so they basically told me I haven't added an email list and that's correct and that's because you'll need to enter in your API and your user name so once you add that in it'll link to your account and it'll pick it up so going back over here to visit sites let's see now if it displays usually for the first time it will display but since we're an admin it might not show up no okay but it does work you know it does work so I'm just you know it's it's probably because we're logged in and the the cookies are enabled etc so but I also want to show you what you can add it to a widgets so over here we have widgets right here now going over here to widgets now the bloom plugin also acts as a widgets so remember earlier we had the footer menu how we have different widgets we can go ahead and add in the bloom plug-in as a widget as well so right here under bloom we'll add in this opt-in form now of course the opt-in form isn't isn't it's not completed yet because we haven't set up the correct API so you'll need to setup your API with whatever server you're using or service and it's both the display right here but I believe it's because you don't have the API key tell you what I'll just go ahead and grab it I'll just go out and grab into the API key and then we'll go ahead and we'll go ahead and use it there so already fifteen thousand subs not bad so I'm over here and go to bloom and just kind of uh I'll just I'll just go ahead and show you all email accounts new account will do MailChimp and then I'll enter in my API key and then I'll authorize it and you'll know it works because once it works it'll actually pick up your lists so right here you can see that's it's picking up my lists so now I know it's connected so opt-in forms I'll go ahead and click on this right here and then I'll say you know what I want to select my username and there you go so now it's actually working and it's actually integrated correctly so now the opt-in form actually works and also we talked about the subscribe on the bottom of the page as well so you'll also need to do the same thing right here for your subscription so you'll need to go ahead and enter in your your your API for your MailChimp accounts so for example right here it'll want your API information and whenever someone enters something in all my stuff's already connected because it works with bluem right here I'll just select this and it'll add it it's asking me for my API key again and I'll just go ahead and submit that word right there alright and now whenever someone signs up to my email email account it's gonna automatically go to my MailChimp account and it's going to add all my subscribers right there so that's what you also get with Divi you get the bloom plug-in it's a great email opt-in it's beautiful let's go and see if it works on the blog page now we'll go ahead and check it out we'll go ahead and let's see here we'll go ahead and go to widgets now before we actually configure bloom to have an opt-in we need to actually create one for the widget so right here under bloom will go to opt-in forms and we'll click on a new opt-in and right here we want a widget so you want to select a widget and this will actually make it so our widgets can actually use be used for our opt-ins so right here I'll go ahead and select MailChimp and I will go ahead and select my accounts and I'll go ahead and select the list so I'll just put Daryl's discounts and then I'll click on save and exit and there you go now I could have chose a design for it obviously but I just kind of covered that last time so I don't want to go through it again and everything so now let's go back over here and go to appearance and click on widgets and simply click on the bloom and we'll go ahead and select our new opt-in that we made so I should have titled it differently obviously because you don't want to confuse yourself so I should have probably titled it you know here I'll just I'll just I'll just show you okay we'll go back here you know will we rename it so instead of this right here we'll put some widgets and then a preview of it and then I will go ahead and click on save and exit and now we'll go back over there you know the proper way and then I'll go ahead and select widgets and click on save and then we'll go back over here and click on blog and I'll check out my blog post voila there you go and of course if someone type something in right here for example they want to go ahead and subscribe your newsletter go click on subscribe and ball off it will go directly to my MailChimp list now there's also various other MailChimp you know designs I think there's one we're locking content you're seeing it where you go to a website and they kind of lock it and you have to subscribe to see the rest of the contents they have flying they have all sorts of really cool stuff so be sure to check out their other modes ok alright so the next action we're gonna talk about templates yes we love temples everybody loves templates so we're here I'll go to plus new and click on a page and we'll talk about the templates that you get with the Divi theme as well so right here a click on page I'll go to templates click on publish and use the Divi builder now when you get Divi you actually get access to tons of different templates as well so right here you click on choose two pre-made templates and they have various templates that you can use so let's say for instance right here you want to use this layout so you can just click on now this is a nice layout you know it's beautiful and the great part about Divi is that they add two layouts a week so if you're watching this video in three months from now or six months from now there's gonna be a lot a lot of layouts that you're gonna get with the Divi theme so right now it's importing the layouts and remember you must enter in your username and API in these settings to get this so right here you can kind of see that's we have a layouts everything is beautiful everything is done it looks great and remember you can also take specific sections from Divi as well and say you know what I like this you know I want to take this and put on my website you can do that just put in a footer you know footer from layout and then save the famous of library and now you can go ahead and use this on various parts of your websites so you know the the possibilities with Divi is just it's incredible there's so much stuff you can do with its the layouts are great now again remember to get those layouts you must go to the theme options right here and go to updates and you must enter in your username and API key right here and you can get that by going into your Divi settings or your you know your elegant themes accounts so that's basically a quick rundown of templates the templates are great I love them I think they're I mean they're amazing you know so yeah that's basically it with templates let me go ahead and love you this one more time and we'll go ahead and able a visual builder I was working on something earlier and then you know choose a premade layouts this Technic let's check out another one you know let's just look at one more really quickly look at they have a new one for gamers oh I like that one give you defenders let's let's use this they almost see how this one looks so here we go we have a full functional websites it's beautiful and it looks great awesome awesome awesome awesome all right so that's basically a quick rundown of templates and again you can use you know you just go to plus new learn new page and then add the every specific page so whatever you want now also I'm introducing you to W be friends calm now this is a social networking website for WordPress users and you can actually get my layout for free if you use the code Divi 100 alright give you 100 you'll get access to this layout for free now usually you have to get points for this layouts but you guys are watching this video and I want to go ahead and reward you all and if you're watching this you know use the code or use the coupon code Divi 100 and you'll get this layout for free and it's a beautiful layout that we made and we have more coming we have at least three or four more coming so you can see that it's just a beautiful layout it's professional it looks great it's amazing and it comes with five pages so it comes with two home the about the services the latest news and contact us page so it's a great layouts if you need like something to turbo boost your website or you need help or inspiration you can go ahead and use that coupon code you know I'm just really thankful that you guys made it this far and you watch this tutorial this is also another layout that we're making it's another great one and I don't know if I give this to you for free you know I don't know but we might I'll think about it use the code Darwin or Divi 100 and and you can actually probably get this out for free as well once we add it in it's not up yet but it'll be on WP friends very soon and go back here really quick o WP friends here we go WP friends so this website again it's just a social networking website for WordPress users that I specifically made it has a little over 1,000 members and you can see the lot of people engaging in it talking about it well such a really cool stuff you can also go ahead and join our forum we have people asking questions on our forum as well we also have groups so if you want to go ahead and join one of our groups you can go ahead and do that here you can talk about you know SEO or freelancing or rape my websites all these other groups that we have we have a daily themes group as well slide a revolution all these other groups and also we have questions as well so if you want to ask questions you can go ahead now the questions and then we'll respond to it and then you can get help right here on the websites now there is one last thing that I want to talk about now most of you have watched this video and you're kind of struggling on okay Durrell I made the websites you what do I do now you know how can I start my business how can I get people to you know how can I get clients how can I you know how can I get a system where people can actually purchase stuff and you know start my full business because sure you got the skill to make a website but now what do you do you know there's a lot of different ways you can go with this and these guys are Tim's trifler and David Blackman and they actually they actually made a busy first started off as web designers and later on they actually opened up their own plugin and theme development company they stopped making websites and now they're teaching people on how to do it full-time so this is a great course in fact it's an eight-week course it's a very long course because the amount of information that you get in it is crazy and here they talk about you know how Davy is the most popular team in the world why you should use it you know how more than thirty percent of the internet uses WordPress and these guys really know their stuff and I've actually taken the course and you know they talk about marketing they talk about you know you know what you can do with it's what you can do with Divi how you can pick up clients and it's just the amount of knowledge that you get is just incredible there's so much knowledge that they teach you they're both there you get a private call once you get the course now the course is oh where's that let's go ahead and go to join now now the course is 97 now I do have a coupon code so the coupon code is I believe it is Darrell Darrell 10 and that'll actually save you guys $100 off the course now I know that's a lot of money but remember you also have a 14 day money-back guarantee and quite honestly you might want to take this course because when you're doing web design you're gonna be like oh I'll take 300 jobs 400 off 500 jobs and that's the bad approach you want to sell websites for five to six thousand dollars you know you have to respect your time and a lot of people don't know that and they just you know they'll take anybody they can get and I'm saying man you're attracting the wrong audience you don't want to attract people who want to website for five hundred dollars you want to check people with big budgets you know corporations business owners saying you know what I'll give you something incredible and you also provide value you know you can provide a lot of value to your clients by saying hey you know I know how to make websites I know how to do all this stuff you try on five grand I mean the course has already paid for itself so I highly recommend taking it they don't have it obviously they don't you know I'll have it on youtube because it's a it's an eight-week course it's a very very long course and it would not fit on youtube but these guys they do have experience in the industry and they first started out I mean they they had a website here called Aspen group Studios Aspen group studios and this is one of their websites right here and again they start off just like web designers and now they're doing you know full full Divi stuff they're doing like memberships or making child themes making plugins they're doing courses like with CSS and everything so I have they recommend it so big be sure to check out the VP gears com the course really does pay for itself I know it's a little expensive but as long as you make one sale from that course for our clients the course is already paid for itself so that's why I really recommend it because those guys really know what they're doing and I only recommend the best because you know that's you know that's what I do I recommend the best you know in all my videos so oh look there's the the blue plugin so we can go ahead and turn your your PC order or I'm sure in the email and then click on subscribe so it's working now guys it's working and that goes straight to my email chip account so yeah I don't know it's just being really weird I wasn't really sure why why it was a not working but I don't know that's that's a whole nother story so again guys I hoped everything was helpful make sure to check out my friends com you'll have access to the free layouts be sure to ask a question if you have any questions for me please feel free to put them in the comments below I really hope this tutorial helped you all out you know I know it's very exciting when you're making websites and you want to get clients but make sure have to attract the wrong clients and also you know I hope this tutorial actually helped you all with design because the design of the core is everything in a website you know I mean people are truly buying positions on your contents and how it looks I mean look at Apple Apple com you go to Apple comm you feel elegant you feel like you're high-class just by being on the website and you want to go ahead and get people that same exact feeling when they visit your website so I really hope this was helpful guys make sure to like this video subscribe I have linked in the comment or the links for other tutorials in the description below I really truly wish you all the best you know I know it's so exciting for me when I got started and I really hope that you guys succeed and make a lot of money I really truly hope you do so again my name is Daryl Wilson and I will see you all in my next video take care everybody

Channel: Darrel Wilson

Views: 475,264

Keywords: Create a website, build a website, WordPress website, WordPress tutorial, WordPress for beginners, 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, wordpress, website, how to create a website, create a website using wordpress

Id: e1RkMMyjkOM

Length: 177min 56sec (10676 seconds)

Published: Wed Jan 02 2019