How To Make A Wordpress Website 2017 - Divi Theme Tutorial

1. Welcome!: welcome, everybody. My name is Darrell. And in this course you are going to learn how to make an amazing and beautiful WordPress website step by step. Now we're gonna make a very nice and modern style website that, you know, fits up with today's current day trends. It's 2017 guys. We got to make sure that we're making beautiful WordPress websites. And even if you're a complete beginner and you have no experience whatsoever or no knowledge of coding not to worry, cause this theme is extremely easy to learn. In this tutorial, you can expect to master WordPress. Now, let me just give you all a quick example of how this page Bolar works and how easy it is to make a website. So I have this section right here and let's just say I want to go ahead and dragged this down. Let's say I want to go over here and change his title. Maybe I want being simple done and scrolling down here. I might want to change this section right here to something like the best course ever. I'm just being I'm just kidding, but yeah, you know. So this is how you guys make websites now today with the divvy thing. But you can't do this unless you're not using the divvy theme because the divvy theme has included a front and editor and it makes it super easy now for anybody town to make a websites. Now, in this tutorial, I'm gonna focus more on design and also mastering WordPress and mastering the debate team. And for those of you who have been around for a while and you you know, you mess around with TV, I'm gonna teach you guys a little bit more about custom CSS. So even if you're advanced, we will talk more about that a little bit later. So if you want to brush up your skills, this is the course. And if you are a complete beginner and you want to create beautiful and modern style websites, this is the course for you. Now, if you guys check out my other courses, I teach a lot of Devi tutorials. I teach a lot of WordPress and I am a top rated instructor with all my courses being around 4.5 stars or better with over 9000 students so you guys can trust me that you guys will be making really professional websites with this course now a little bit about me. Guys, My name is Darrow and I teach WordPress tutorials on a bunch of different websites. My website receives around 30,000 pages of month basically talking about WordPress tutorials because I don't like to waste time and I really like to make beautiful websites and I am very thorough and very comprehensive in my tutorials. Now, one more thing I want to point out that you can learn from this tutorial is how to make pre made layouts. So this right here is a blank page. Now I'm just gonna go ahead and simply add on the home page just like that. And there you go. Now you have a fully functional website that you have created and seconds and you will actually receive one of these layouts in the sectorial. You can expect to learn a lot in this tutorial. We will go over pre made layouts about how you can create websites and seconds how you can you know fully, Master Davy, and also improve your skills with the Devi themed. So if you guys were instead of making a beautiful and modern style WordPress website and roll my course. You know, it's gonna be a lot of fun. I am very thorough, comprehensive. We'll talk about a lot of cool stuff, so I'll see you guys in the course. 2. Lets Talk!: All right, guys, I want to say thank you for taking my course. You guys were on your way to becoming better Web designers or learning how to use WordPress and a DVD theme from scratch. Now, when you guys are taking this tutorial, I recommend taking it all the way. You guys, you know, I want you guys to fully understand everything that goes on in this course. I know what Web design and you know Wordpress can be frustrating. And you're like, Oh, this is kind of hard. Just be consistent. And, you know, I provide a lot of good, valuable content in this to really teach you how to create beautiful websites that are up to date and that our modern that are really, really nice. You know, that looked nice to the I because I don't want you guys to walk away, you know, thinking, Oh, this was, you know, there's an ugly website, etcetera. I want you guys to learn how to create websites from scratch and master it with Davey thing . Because the debate team is a beautiful piece of technology. It has changed the way we make websites. You know, it's a really nice. Ah wordpress theme. And I really recommend it. And as you're taking this tutorial, guys, I just strongly recommend to be consistent. You know, it's very easy to get frustrated. I've been there. Trust me, I have thrown cups of coffee. I have been really frustrated a lot. But rest assured you take this tutorial. I guarantee it's you guys will learn how to use WordPress. You guys will learn how to use divvy. And it's gonna be a lot of fun. Guys like I'm out of boring person amounts and they're saying, Oh, you know, this was today. We're gonna make a website. No, I'm very I'm talking to him outgoing, and I'm a very good instructor. I'm one of the top rate instructors here on you, to me and all my classes receive around a 4.5 star. Better because I know what I'm talking about. I don't like to waste time and a very thorough and comprehensive. Okay, So that being said, guys, good luck in this tutorial. I wish you all the best. And let's go on to the first lecture. So I will see, while there 3. Get A FREE Domain And Hosting: All right, let's get started. So the first thing we need to do is get a domain and get hosting. Now you will actually receive a free domain and the largest discount available TMD hosting has to offer. So this website is TMB hosting dot com so you can visit the websites and once you're there going to click on get started now, this website uses SST hosting, which is the current fastest hosting available. You guys receive a free SSL and a 60 day money back guarantee. So there is a lot to be excited to put this company and actually will provide you all with the largest coupon code available this company has to offer. So there's three plans now. I recommend a business plan because, you know, they give us unlimited domains for the business rather than a single for the starter. So under the business, I'm gonna go to sign up and I also recommend the professional If you want a limit more performance and you want some more space, the professional is for you. So right here we go to sign up and go ahead and put in your domain. You get a free domain with this company. So I'm gonna put I love kylo Ren. See if somebody took it. It's myself. It's my famous Ah, Star Wars domain. I don't know if somebody took it or not. I use it in all my tutorials. We'll see what happens. All right. Still available. All right, we'll keep the saga, Goan. So you'll be brought to this page right here and go ahead and just fill out your information. You know, your first name, your last name, your email address your social. And I'm just kidding. No social, but you know your trust, your zip code city etcetera so keeps grown, just keeps growing. And what you're done filling out your personal information, You're going to put in your credit card right here. Now, you can also pay with PayPal if you would like, but for right here, You know, you just put credit card whatever, you know, whatever you whatever you want to do, you know, do your thing. So once you're done with this information right here, your payment information we're gonna scroll down to our purchase information. Okay? Now they choose the data center closest to us. So this one is in Chicago right here. It's closest for me now. What is the period? So we have 12 months, 24 months or one month. Now, I recommend the 12 months because the coupon code I'm going to give you will actually save you a lot more if you spend more. And also right here, they have domain privacy. Check. So what is this? Will this actually protects your personal information? If somebody tries to who is you and tries to get your personal information, this will protect. It's OK. So, uh, it's up to you if you want this or not, these others a little bit basic. But you you know, wordpress can actually do a lot of these by itself, so I wouldn't recommend these. Sorry here. Unchecked this. Now, if you enter the code, you to me 6 to 6 and go to apply, you will receive a 7% off your entire purchase. So let's say you want to do the 24 months and you do the, um the, uh the the coupon code. You're you're gonna get 7% off the entire purchase. So the more you spend, the more you save because it's a percent discount, okay. And what you're done with all this good stuff right here? We're gonna go to I have agreed by Baba, and I'm sure you're gonna read their terms of service, right? And then once you've read that, we're gonna go to check out. Okay? Now it's gonna take you to your portal, and I am a customer for this company, and I use it. So I will go ahead and put in my information right here and log into the account. All right? You were ought to this page right here. And they're gonna ask you to join the little portal. Beta Baba. I'm gonna put maybe later. I don't want to do that right now. Okay, Now, this is your client area. So right here is your supports. If you ever need help, you can submit a ticket and these guys get back to you Probably five minutes. They're extremely fast. And also these air your current domains that you have. They have all sorts of goodies and stuff, but let's go down, stroll down right here. And right here we want to go down to R C panel and you're gonna select that your account He signed up with. And here I'm a go to log in already. So it is going. Okay, So this is our see pound guys. And this is like the new C panel. Many companies are starting to switch to this. It's called like, uh, things like app installer, things that they call it. So, anyways, all these two do is install WordPress on our domain. So I here, I'm going to scroll down. Just keep scrolling. Just keep scrolling till we get to WordPress. Right here. So McNichol on a WordPress. And this is what it is called the soft, delicious Suffolk. Coolest, I don't even know how to pronounce it. I still don't know how to pronounce it. So once you're here, just click on install. Now, now, right here says choose protocol. So right here is your a CPP, and right here you want to select your domain. So go ahead and select the domain that you have purchased. There should only be one. I mean, if you don't have one, that it would only be one right. And right here are the indirectly. Guys, make sure there is nothing there. I repeat, make sure there is nothing there. Okay, It's gonna stall your website to the Devi theme to tora dot com Dash WP and then if you have a pages like dash home so it's really messy, and it's not good, so make sure there's nothing there on in directory. Right here is your site names you can give your side of name gonna put the TV theme, this tutorial or how to make you can always change us later, guys. So don't really worry about the site settings. You can always change it later. And right here is your admin and password. So go ahead and make your user name right here. And also put your password and then go ahead and put your email right here as well. Okay, now the language. So you can select any different language I had this big debates about if Mandarin was the pronunciation for Chinese. But I guess Chinese is the correct way. I don't think it's Mandarin, so, uh, yeah, I guess the Chinese, But anyways, go ahead and put in your language that you speak. So I'm gonna put English and right here on a scroll down and go to install. All right, so now is installing WordPress onto our domain. Exciting. This is actually the hard part. This is really the hard part. Everything else is like cake. It's really, really easy. Okay, so right now it is installing WordPress onto our domain. So we just need need to go ahead and just give it some time to let it install. Usually, it's like 5 10 seconds. This is probably the longest it's ever taken. Okay, there it goes. All right, so that's it, guys, We've you know, we've got hosting. We gotta domain. We installed WordPress. Congratulations. So right here under the administrative Earl, all seem to do is click on this and you'll be logged in to your WordPress website. All right, that's it. We're logged in. Congratulations. So this is WordPress. Guys, this is it. And right here, we go ahead and visit our site by going up here and click on visit site. And this is our site right now, so it's it's It's ugly, you know? But don't worry. We'll make it look really, really good. All right, now there are some things I wants to let you know and change before we continue this tutorial. So over here under our tools. I'm sorry. Our, um appearance. His appearance. No, it's understandings. Duh settings. Wanna go to Perma links? All right. We want to change the Perma links to post name right here. So the reason why we do this is because usually when you go to a website, it has, like, you know, your website dot com dash about us or dash services, right? Not 207 ones. Yubaba ball. You know, this is not the correct way. So you want to make sure it's under post name, Okay, so I go to save changes. Now, one more thing I want to let you know is if you want to change your password. So right here, under users, you can click on all users, and right here I'm gonna go to admin. And right here you can change your email right here. And you can also change your password. So right here you click on generate password, put in whatever you want and then click on update profile. Okay, That's if you want to change your password. Okay. So I'm just showing you how to do it. Okay, so congratulations, guys. You know, this probably was the most technical stuff we got hosting. We got a domain. We install WordPress. That was the hard stuff. Okay, so the next section we are going to install the divvy theme, so I'll see you there. 4. Installing The Divi Theme: All right, guys, Welcome back. So now we're going to purchase the Devi theme, and I do have a small discount for you. Also the entrance. Www dot darrell wilson dot com. Dash, did he just like this right here? You guys will actually receive a discount as of right now, I don't know how long this will go on for maybe a month or two, but you guys will receive 10% off the developer. So right here, we're gonna scroll down. Now you can get the developer or the lifetime. I don't recommend the personal because they do not give you the bloom plugging. And I have a tutorial on the bloom plugging It's an amazing email. Opt in form. It can take like emails from anything it z really, really good. So I would recommend the developer So going to click on sign up today. And right here you need to entering your user name, your password, your email address, etcetera. And guys, this is actually the number one rated theme. So it is number one for a reason. There are many companies out there that actually solely tell people I'm a devi developer. I'm a devi designer. And there's tons of companies that sell child Lance, So we will talk more about layouts and all that stuff a little bit later. But for now, rest assured, you guys are purchasing the best theme. And you guys, do you get a 30 day money back as well? Okay, so that being said, I haven't account for these guys. I'm gonna go ahead and log kindred year, and there's is my account, and I have a lifetime access. You're not one of those guys who were just sitting there saying like, Oh, bye bye. And they don't even have it. You know, I have the lifetime. So I I paid 20 bucks, and it's an amazing product, and you get full support with that guy. So you ever have a problem with this plug in? I'm sorry. With this theme, they will help you out. So, under the theme support forum right here, just go on over to divvy right here. And these guys general respond within a few hours. So whenever I have a question about your website or you have a problem or coding air, these guys will fix it for you. Okay, so at least you have a company that has your bag. You know, you're not, like, completely in the dark, you know? So right here, I'm gonna go ahead and scroll down and right here under theme downloads. You want to select Debbie? It's the number one right here. And click on download and go to theme package. All right, so you can see right here on the bottom left of my screen. Devi is downloading, and it has downloaded. So let's go on over back to our WordPress website right here and now we're going to install a theme. So right here we go to dashboard, and I'll explain themes a little bit right now. So here we go to appearance and go to themes. So how WordPress works is basically you choose a theme, and themes are kind of like thes structure, like the bread and butter of your website. It determines how it looks now. Many of these free themes are you know, they're okay, but they're extremely limited. And, I mean, they're not nearly as good as Vivi. I mean, it's it's the best one. So we want to be using the best. Okay, so right here on upload theme. Click on upload theme and choose the file. Okay, now, under my downloads right here. I'm a go look for a divvy. Okay, So did he click on Open and click on Install now? So now we're installing the divvy theme and cause I've used tons of themes. I've used themes, Sermon Votto of used themes from free themes from Tesla themes. And the DB theme was just by far the best one. And it's the Onley theme company with other companies that create layouts for it. So it is extremely popular and the community is huge. There are tons and tons of groups out there that's solely support divvy. So, you know, after this tutorial, just do like a quick Google search. You know, like Devi child themes, or give your divvy free layouts. You know, in fact, on my website right here, guys, I actually give out layouts for Davey. So we'll talk a little bit more about pre made layouts right here. But for the divvy layouts, you guys are going to see that actually sell pre made ones. And guys, it's so simple. You just uploaded to your website and your site is completely done. and actually have some free ones right here. So these are all free layouts, and no other theme offers this guy. So this is basically, like a one page click website. You know, you click a button and a websites just courage for you, like in one click. It's pretty incredible. So these are pre made layouts. So we will talk more about this a little bit later, okay? But I want to teach you how to use the theme first before we jump into that. Because, you know, I don't want to talk about pre made layouts because it's, you know, I want you to learn how to use the page bill. Their first. Okay, so right now my theme is up loading, and it does take some time, guys. So right now, it says the team has uploaded, So all they need to do is click on activate. Okay, so And if you guys get like these, like, weird, like header errors sometimes, like, way up here, just, you know, just ignore it. It'll go away. OK, so now let's go ahead and go to our website and go to visit sites. All right, So you can see that our site looks a little strange. It looks kind of weird, You know, It doesn't look that good, but not to worry. Guys, we are going to make it look amazing. Okay, so the next part, we're going to make some pages and we're gonna do some other fun stuff, so I will see you in the next lecture. 5. Creating Pages: All right, guys, Welcome back. So now we're going to make some pages, and we are also going to create our menu. So first, right here we go to plus new and go to Page and guys all over doing right now is just creating pages like such as the home page, the about us page, the services page. Right. So right here, I'm gonna click on or make home. So this is our home page right here. All right. And go to publish. Let's go ahead and go to add new. Now we'll do about and today go to publish. Okay. And here gonna go to add new go to services publish, and then we will do the last one, which is the contact us and go to publish. Okay, so now over here, under the appearance, we want to go down to menus. And don't worry, guys. We'll cover a majority of all of these options right here. They're they're really they're not even it's easy. Just just just okay s So we're going to appearance and go to menus, so we got to give our menu a name. Let's do when you many one. There goes that many won t I do menu one for all my editorials, guys. So it's it's pretty common. So right here we have you all So right here we have the home, the about a contact, But we wanna make sure that it's the right home. Guys, this home right here is actually a custom link, and it will not work. So we want to make sure that it is this one right here, the page that recreated. That's why I kind of did on all caps. Okay, So home services contact about us and want to make this a primary menu. And right here we go to add to menu right here. Okay. So now you can kind of rearrange these. You can drag and drop, you know, something like this. And let's say you want to drop down menu. You know where you have like, if you hover over one option, it brings up another one. You can just simply take this and just put it below it. So if I hover over the about us, the contact us will be a drop that menu. Okay. But I don't want to do that right now, so we have the home about services, Andy Contact. Now, I think we also need the our team, but, um, I think we need our team as well. So we're going to save this, okay? It looks like it has stayed right there. Okay, so we have the home about services and contact us now a second way. Guys, to make pages is by going to pages and going to add new. So I'm gonna do our team and go to publish. Okay, so we created another page. However, now we need to add it to the menu. So appearance menus. And now you can see on the view all section we have our team right here. Do you see that? So I click on this and go to add to menu, okay? And I'm gonna drag it up to wherever I want that we have the home about our team services and contact us all right. And I'm a save the menu. Okay, Now, let's go ahead and go to visit site. So we have the home, the about They are team services and contact. However, this page right now is not the actual home page that we created. If I click on this right here. You're going to see that the permanent is different. It is dash home. So we need to fix this. So over here I'm gonna introduce you all to the theme customizer. So going over to this section and go to theme customizer. And don't be overwhelmed. Guys with a theme customer think customizer I hardly use it. I rarely use it because the Devi builder basically does all these options and I rarely use the thing customizer. But later I will still talk about its But so there basically is no real reason why to use a theme customizer except for changing your menu. That's it, you know But we will talk about menu customization a little bit later once we get some designed to our website. So right here under static front page, you can click on this right here and right here we're gonna put a static front page now the front page we want selected as our home, our home. Okay. And the post page is for your blawg. But we will talk about the blawg a little bit later. Okay, so here we go to save and publish And guys, make sure you follow the step, please. Because this will actually bring up the visual builder and the biggest. I guess you can say common mistake I see is people don't do this. And as a result, they don't have this section right here anymore. Because the visual builder will only appear on pages. It will not appear on custom links. Okay, so that's it. Guys, Congratulations yourself. And you know, we made some pages. Pretty simple stuff, right? Not too hard. Not too crazy. Making a website is cake now. So the next section we are going to design our website. I'll see you there. 6. Create Home Page: Alright, guys. So let's go ahead and get started. The first thing we're going to do in order to create our page is we're going to click on enable the visual builder and Guys, This is a front and editor right here. So basically, we can see everything that we're doing right here. Okay, so I want to basically create that big, beautiful landing page that I had. So I'm gonna go right here on this plus sign and I'm go to full with because we're creating 1/4 section and I'm going to introduce you all to the full with slider module. All right, So full with slider. Okay, now, let's go ahead and add a slide. So right here, Click on, add a new item. And right here on the put did he seem okay? And now, but in text. So what do you want the button to say? Well, I'm gonna put some learn more. Okay, now, right here is your budget. Neural. So where do you want them to go? What page? You want them to go? You can figure this out later. But for example, let's say you want him to go to www dot Darrell wilson dot com. So if they click on the button, they will be taken to darrell wilson dot com. Now let's go ahead and apply a background image. Now there is a drop box on the session before this, and there are a bunch of pictures so you guys can use those to follow along. So I hear that click on select files, and I'm just gonna simply upload all of those pictures that I have so right here. Images for tutorial. These are all the pictures that I have, and they are in the drop box so you guys can use these to sort of follow along. And I got these images from unspool ash dot com, which is a Web sites where you get free images and it's really, really helpful. In fact, I'll go the website right now to kind of show you guys It's an amazing website. It really is. So I mean, even NASA upload stuff to this website, and they just have really nice images that you can use. You know, they have a really cool landing page ideas, and it's just a really good site. So ah, yeah, visit on splashed all comprehensive new images. So my images right now are currently uploading, So I'm actually going to pause the video until they are done. Actually, actually, they're uploading kind of fast. Yeah, I'm gonna go ahead and wait, so All right, I'm gonna go ahead and weight really quick. I think these will upload pretty quickly. And which one are we going to use? Were any use this one right here. Okay, so all these are uploading. It's pretty fast, guys. I mean, this this server that's hosting company is pretty good. So these are actually really large images right here. Okay, so they have all uploaded. Now I'm gonna click on this one right here, and click on upload an image. Now, this size, this image, guys, is 16 55 by 8 80 But, of course, you can use any size you like, so we go to upload, and there you go. Now, we have this white section up here with a fast See this white section up here. Now I'm gonna actually get rid of this, So I'm gonna click on this green, which is like, check save the changes and check again. Now, up here under this blue section. I'm gonna close this right here. We don't need that right now. We just have this section right here. Okay? Now, let's go ahead and design this. Let's make it look really cool. So right here under the gear icon. This is how you change the settings. So I click on the gear icon and right here this is the current slide we're working with. So we have the debate team. We have learned more right here and our butts in your l. So they click on this. It will take them to that section and our background image. Now, for the image size, I want to go ahead and leave. That is standard the slide image. I'm not going to add a slide image, but basically, that will put another image right here. So just for the sole purpose is I'll go ahead and show you really quick. Let's see if I have a PNG file. These are not PNG, so Oh, this is so You see the image right there now, guys, this is not a good example, because it's dark. It's more for, like, a white background, you know, But this is an example of how you can have another image right here. Okay. But I'm going to take that out now. Also, we can add an image. I'm sorry. Background overlay. So by clicking this, we can sort of added in a certain color to this feature. So right here I can put like a blue. And then there's two bars right here. This left bar controls the strength of the color this wrong. The right controls the chance, parent, see of the color. You see how I reduce the transparency. You can start to see the background right here. So that is basically with that is four. But I'm probably just going to go ahead and just leave that blank. But that is basically what that featured us. All right, So text color don't worry too much about the text color. Guys, we can change that in the design settings. Now, if you guys want a video slider, you guys can go ahead and click on upload right here and upload that video slider. Now, a good website to get video slides is video bid evo dot nets and you guys can actually download some free videos. They have, and they actually have some paid ones, but they do have some free videos that you can download and kind of mess around with. So, like, for example, like nature, nature is always good, you know? So a lot of these are some videos that you can add to your websites. Now, there are some paid, and there are some that are free. So be sure to check this out. This is just another resource. Okay, so going back over here, I'm gonna go ahead and put some Texan right here. I'm gonna put something like, um, board, press tutorial, and then I'll put like a space, and I'll put something like, um, you know, I'll go to my secret website, my secret website, dummy text. This is my favorite website, so I basically just take, you know, dummy tax just to fill in space to make it look good, you know? So we're going to use some of this dummy text right here, and I'll go ahead and just grab some of this stuff right here and copy this and just go ahead and place it in there. All right, so there you go. You guys see you have the dummy text in there. Now I say I want to make this a little bit more spaced out. You know, something a little bit little. Yeah, it's the space out just a little bit. And maybe I want to sort of center this right here. We'll go ahead and send all of this, but by default, it's already centered, so we don't really need to do that. But that's just the way how you guess in center text in the future, whether you guys use a text module or something else. But we'll get to that a little later. All right, so we have everything here and it looks like we're ready to go. But let's say you want to go ahead and change like the color and the foreign troops Webb sees. Let's say you want to change like the font and the color and all that good stuff. So over here in the design, we can change all of that. All right, so the header fonts. So remember, the header applies to this section right here. Groups divvy theme. So Davey theme right here. It applies to this section. So I'm gonna change this to a railway that's one of my favorite phones, All right. And now we have these other options right here that we can make it like, you know, very large and bold, and maybe even make it a little bit bigger. Someone put it something like, Ah, 80 actually. Maybe bigger than that. Now he's good. Night is good, all right? And also, we can change the header color. So right here I can change the text color of this. Yeah. Contingent read or whatever. Okay. And you know, guys a big tip right now. Once you learn how to use the design settings like this section right here, it's like that for all of the modules. And as we go on this tutorial, you're going to see that it's super easy and it's just like it's it's repetitive. At one point, you're gonna be like, OK, I know how to do this. Like ZZ. So the header text color. I like it. It's good. Now, the header letter spacing. So right here you can determine how spaced out you want it. You know what I've seen some photography websites that do this a lot where they have, like, you know, like like this style right here and it says like photography. You know, one word that would look good, right? So I'm gonna go ahead. And actually, that was the wrong one. Okay, so the the header letter spacing right there. And also the header line height so we can change the line height as well. But you might want to leave it Something that you know, something a default, I think, was 1.111 a. M. But we can change something like, um, you know, one point something. Okay, Look at 1.8. Okay, now the body fund. So this section applies to this stuff right here. So right here, I'm gonna do something like, um, what's a good one? Will do. Roadway light. Okay, we're away light. You know, I don't like that letter spacing. That looks kind of ugly. Yeah, we go. I'm kind of a perfectionist, so we wanna There we go. All right. So, back to the body phone, guys. So right here is the body text color. So let's just say you wanna have it like more white changes to whites. Or we can have different colors. Cetera right here. Okay. So now it's the same thing at this point. So the bader the body letter spacing. So the same thing we did for the header is the same thing we're going to do right here. So, for example, I would just show you the the body letter spacing. You see how it's becoming more spaced out so you can go ahead and, you know, make those settings as well now also the body line height. So how much height do you want in between these? So this right here controls the line. HaIf Okay, so that's basically a quick summary of how to create this really cool landing page. Now, kind of wants to maybe change this like, bold, you know, like that. I think that's a little bit better, right? No One thing that we're missing here, that kinda makes this page look little boring is the color we want to go ahead and add and maybe some really cool color to this button right here. Okay, so right here under used custom sells for button. I'm gonna click on this now this section will allow us to decorate Are our button right here and guys, these settings are very self explanatory and very basic. Okay, so the button text size. So how big do you want the text? Right here. Inside of the button. So maybe something like, um 7. Create Home cont..: you know, we'll just do 25. Now the button text color. I want to ask whites. OK, but you can change us. A bluey changes to, you know, whatever you would like, etcetera. But for here, I'm gonna change the button background color, but in background color. Let's make that blue. Okay, so the button background color is blue and the text color. I want it white like that. Okay, now, I must go down now. But in border with, you know, I'd only ever use his option. I don't know. I mean, there probably is a reason for it. It's just looks ugly, but, hey, you know, it's it's a system extra option that they're giving you guys so you can mess with the border with now the button border color. So right here I could decide. Maybe I don't want a white border. I want, like, a red, See how it's read now or black or etcetera or, you know, you can actually just have no border. Okay, So me like that. Okay, So I see how right now I have no border. It's just blue. That's it. So I cannot that in as well now, right? here under the butts in border radius. See what this does is it kind of makes it circular to see how now it's becoming more circular. Sorry. Here, we can go ahead and, you know, change it. And the more you do it, the more circular it becomes. Okay, so that is a quick rundown. Now, also the font. So what fonts you want inside of here? Well, I kind of want railway. No guys. When you're making websites, I highly recommend to stick to maybe 1 to 2 fonts for your entire website. I'm telling you, if you have different fonts, it makes your site look tacky. And people are gonna think that it's not professional. They're gonna think this. I kind of looks weird. I don't like it. And to the human eye. You know, if they don't like the way it looks, they're not gonna buy your services. It's really true. If they don't like the way it looks, it doesn't matter if you're selling back free iPhones. They're just not gonna buy it because, you know, that's just the way the human brain works. Unfortunately. Okay, so going over here. Now you see, why have I hover over it. There's a little icon. Maybe I want something else. You know? I want, like, a little up arrow. See that more? I want something like a, uh, a heart that acute harder. Okay. You know, now we have the heart. Okay. Scrolling down here now the butts An icon color. So this button right here, we can have a specific color if you wanted to. Purple. OK, so if I hover over it, you see, now the button is purple, but that's really ugly. And we're not going to do that. Yeah, that's the white looks good. Okay, Now the butts and icon placement, you can have it to the left, or you can have that to the right. Okay, so right here. You see, it's now to the left, or we can change it to the right. Right here. Okay, Now, this is for hover over. So let's say somebody hover. Overs this button with your mouse, OK? They hover over it. What text color do you want? Let's change this to maybe black. Okay? And if they hover over now, the text turns black. Now, what background color do you want? If somebody hovers over it. Well, let's just do you read Castle over Over it. Now you see, the text is black and the background is red. OK, now the border color. You could even change the border color if someone over someone hovers over it. And I actually took it away, so I can't leave it a little bit consistent. You know, I don't want toe take that away too much. You know, I don't want to add it would be too much, Too much color, too much tacky. And right here you can change the spacing of the letters. You can do the button, you know, the hover but radius. So if I hover over it, you see now how it goes now, the reason why it looks like that is because I made the spacing between the letters Very big eight pixels. So it's gonna look bigger like that. And if he wants to reduce this to the beginning, just simply click on refresh and it's back to the beginning. OK, now the hover border radius, you might want increase that. So if I hover over, it's still a circle. Do you see that? So now that looks pretty good, right? so that's pretty much it for this little section. Right here, guys. Now, I know this was not a lot, but don't worry. You know, as we keep going, you're gonna get more and more familiar with all the different modules how it works. This was just the landing page. And, guys, the landing page is the most important part of your website. It truly is because this basically gives the customer five seconds to determine if they're going to stay on your website or not. So you really want to make sure that it looks really good and really professional. Okay, so we have one slide. Now, let's say you want to add another slide, but maybe you just want to duplicate a slide. So we've done all the hard work already. You know why doom or so right here under these little two boxes, I'm gonna click on that. Okay, now, what this has done is I've basically just duplicated the entire section. So right here into these two little arrows right here. If I click on it, this is the new slide. So instead of doing all the hard work again, you guys can maybe just change the picture in the title. So right here, Although you to meet tutorial. No, you will do something like, uh uh, I don't know. Patty's house. That's my dog. Patty's house. And then right here will scroll down, and we'll just change the background image to something like, uh, something like something like this. Okay, so now we have basically two different slides, and we've kept most of the setting, so it's very similar. And there are some other options on this section right here, such as arable click on this little green. So right here we have the two slides. Okay, so we have one slide and we have two slides. Now. Do you want us to show the arrows? You see, I have the arrow on the left side right here, right over here. I can say, you know, show the arrows or hide it. Now, do you want to show the controls or hide the controls like these little dots right here, down the bottom so I can choose to show it or hide it now? Automatic animation. So do you want this to be automatic? So if you do want this to be automatic, how many seconds in between. Do you want each slide to pass? So right here, I'm gonna say every three seconds, which is M s milliseconds. So every three seconds, I want this to be a new slide automatic. I don't want the customer to touch anything. I don't think to do anything. I wanted automatic. So right now I put 3000. OK? And there you go. It's starting to change. It is a little slow, but that's only because we're in the editor. Guys, once you close it, it will be three seconds. Okay. Now for the parallax effects. I don't recommend the parallax Effect for slides, but we will talk more about the parallax effect a little bit later. And the inner shadow, we don't have it in her shadow. That's if you have a smaller slide. There is, like, kind of like a box, But we don't really have that and the image position. So if you want to focus on a specific part of the image right here, you would use this. But generally I would use default I haven't really used. I haven't found a reason to uses that much. Because when you create an image you create it like this, You know, for the background, don't create an image to say after we create it. I want to focus on this little partner here. You know, I I don't really I don't know anybody that uses that. And also, you can disable this on the phone tablet or the desktop, and we will talk more about this a little bit later. Begin to custom to custom mobile optimization. Okay, so I'm gonna click on check and that's it. Guys, we just created a beautiful lining page. It's simple. It's easy, It looks good. And, you know, depending on your pictures or whatever you'd like, you can, you know, change it to your need. You can add an overlay you can add in all sorts of stuff. Guys. The divvy theme is limitless. Whatever you possibly think of, you can create it. Okay, so that's it for this section. Guys, let's go ahead and move on to the next section. I'll see there 8. Creating Blurbs: All right, guys, welcome back. So in this next section, we're going to add in some blurbs and buttons. So this is the test website that we were working on, and we're gonna add in this section right here. So we're gonna add in these three columns with these three buttons right here. Okay, So it's going over here, and I have the visual builder enabled. Still. So right here under this plus icon, click on plus and click on a regular section. Now, I want a three column row because we have three columns right here. So +12 and three. Now, I'm actually going to add in the blurb section right here. So what I want this to say. Well, I'm just gonna go ahead and copy this good layers page builder. I put in something like good layers page builder and a girl for your own. We're not gonna put anything. Use an icon. Sure, Why not? So the icon color I kind of want is white. And the reason why I wanted as why is because we're gonna add a color in the background. So I'm gonna put whites and let's go ahead and add in a icon right here. So I will put me see, which Which one should we adhere? This Is that the cloud? Okay, so out of the cloud. So I'm gonna click on I'm not gonna click on them economically. Keep going down And right here under the image icon placements I want at the top. And maybe I should change the color just to show you guys what this looks like. Okay, so there is the image right there now, right here under the image icon placement. You can have it to the left, or you can have it to the top right there. Okay, now the text color. I'm gonna let go ahead. Leave that blank. Um, you know, we can always change this later, actually. Yeah, leave. It leaves blink, and right here. I'm gonna go ahead and turn some w texts. OK, so I go to my famous website again, dummy jacks, and just go ahead and put in some dummy text. Okay? Pace that by buoyant. And there you go. So we have some text right there. Okay, Now let's go on over to design. So the image Max with So this is basically saying how big. Can this image be so if you want it like at a 1000 pixels you can set at 1000. Or you can set at, like, 300 pixels, etcetera. But remember, this size will only expand as much as the columns you have. So right here we only have like this much space. So it's not going to exceed that use icon Font size. Yes, I want to get a little bit smaller. And the header font, which is this section right here. I want to change it to something like railway. Okay. And don't make that just a little bit bigger. Okay? Now for the header text color. We can change that as well. Right here. So I'm gonna change the background color last because I want you guys to get a better idea of this. OK, so I'm going to, uh, put this on hold for now. And the headline letter spacing. No, guys, these are the same options that we had appear to remember. Once you start learning one module, you learn them all. They're very, very similar. So body fonds So right here I'm gonna do something like railway again. So the body phone is basically controlling this section right here. Okay. And the body text color. We can add a background color to this, etcetera. We get out in a background image as well. Like, just for control purposes, I'll show you. So we have this background image right here. Okay, But of course, that doesn't look good, and I would not recommend that's okay. So I think that's about it for this little little blurb, guys. So we basically made one, right? Now, instead of actually making it all over again, we could just duplicate this and then just simply use this still icon right here to drag it over here. All right, duplicate it and drag it over. Okay? That may be wants to change the title. Right? Here's will put the d v team is great, but, uh, amazing wordpress theme. Okay. And then right here, I will add in something like, um, I I love my dog. Okay. And for the icon etcetera, we can use That's maybe I want to change the color, but, you know, for now, I'm gonna leave it as blink. Now, let's go over to this website right here. So I have these buttons right here. Now I want to show you all the back and editor for this. So right here you can see I have blurb, blurb, blurb. So I hear blurb, blurb, blurb, And then I have button button button. Okay, so let's go ahead and add in one button and weaken. Just duplicate it and add it to all of these. Right here. Okay. So right here under this plus sign, I'm gonna click on, add a new module and go to button, Okay? And right here, you guys can see that this is like, um, we have the white text with, like, a dark background and a radius around it. Okay, so let's see if you remember it, win back over here. I will put something like I'll put no your well, But remember, the URL is the website, or I'm sorry. The address of where you want it to go on your website. Okay. Maybe have partners, maybe have sales page. Maybe you have a contact form, all sorts of stuff. Okay. So a hero puts Let's see what I put I put over here when I put learn more, learn more is always good. No, learn more. Learn more is always good, but an alignment. I want this to the center. All right, the text color. We'll go ahead and put this as I'll leave that just blank right now. Okay, Now the design. I want to go ahead and say yes. Now, guys, the same exact thing we did for this slider. These are the same exact options, So nothing has changed. So maybe you want the but in a little bit smaller. Maybe around 18. The butts in text color. Well, I kind of want the button text color as white and the button background color. This I might want a blue, maybe a different style blue. Okay, are Yeah. I mean, like, let's see. Or something little bit darker. Yeah. Now the butts and border with I'm not going to mess with that the button border color. So the border around this right here, I'm gonna go ahead and leave that but the border radius I will change. So this will actually make it a little bit more circular. See that? Okay, so I kind of like that button. Now I'm gonna just go ahead and save this and I'm just going Teoh Just copy this and simply just drag it over here. There's no need to work any harder than we have to write. Like, this is this is easy as it gets, like, just copy and pays copy and peace. So you see how it's great Right there. That's where you know what? It drop it. Okay, so we have these sections right here. Now we need to basically create it. So it's full with. So you see how we have this teal box about how it's kind of like, you know, there's all this white space we want to, you know, use this white space right here. So let's do that under this gear icon for this teal section. I'm a click on this now. Under these options right here, I have make this row full with. So, yes, I want to make this rifle with Now. We can also do something like add in the gutter with and the gutter with is basically saying this space in between these So you can make this a little bit smaller. Something like that. Okay, so now we have this section right here, very limited with space, and I'm go ahead and just click on check. Okay, so we have these three sections. Now, let's say you want to add in some color, you know, we want to add in some color right here. So right here under this section right here, I'm a goes to design, and we're gonna scroll down. All right, So call him one background image. So this is referring to call in one. All right, so right here, under the background color, I'm gonna click on this, and then it's like, maybe a blue, okay? And we will make a little bit more transparent, something like that. Okay. And then we'll go ahead and save this. We'll just We'll just keep throwing out, actually. Now for the column. One custom padding, maybe you want some a little bit to the bottom right here. Actually, no, we'll do that on the other. The other module. All right, so, anyways, so the the color for the second background, which code you want that to be? Well, I kind of wanted to be a darker blue. Okay. And then for column three, I want this to be a little bit different. I want this to be something like, um ah, bluish. Teal ish. There you go. Something like that, Right? Something simple. OK, some of the gun check now, So we have these three blocks is right here, but we have all this space right here. We need to change that. Right? So right here under the blue icon, click on this and I want to sort of reduce the padding. Now, there's another way to do this, guys. So we can actually manually go over here and you see how I have hover over this. There's that blue section that appears and my cursor changes. We can simply start to drag this up and start to remove this white space. Do you see that? Or I can go over here on the gear icon and change the padding to zero. Now, the reason why you change it to zero is because patting is basically the space. So you create so basically saying I don't want any space. That's basically what padding is okay going over here. Now click on this icon right here under the roast settings, and I must go down and I don't want any padding to the top. And I don't want any padding to the bottom right here. Okay, so now you guys can see that we don't have any space anywhere. We have zero space whatsoever, okay? 9. Using Padding And Icons: Look, I want to make some space between this right here in the top, right there. So how do we do that? Well, we're going to use the row settings right here. So under this gear icon for the teal section, I want to control the section of padding right there. So I want to basically make more padding right here. And more padding right here. So under this gear icon, I go down to design and scroll down. Just keeps grown. So we have the column. One right here. So this is column one Now, how much padding do you want? And guess patting again is space. Okay, so it's just space. So here, I want 50 pixels, maybe 30 pixels on the top, and I want 30 pixels to the bottom. So now you see that we've actually made some more space, and we can add a little bit more. Maybe 50 and 50 okay. Or you can, you know, get more creative and out in 60 if you'd like, you know, but I'm leave it at 50 50. Now. Let's go ahead and do the same thing for the other two. So you want to make him Look, you know the same. We don't want to leave it like that, right? Looks kind of bad. So under the call him to we're going to the same thing you can do 50 and 50 and same thing right here. Calm three. Do 50 and we're going to do 50. All right, so that's basically it, guys, you know, it is the colors are very ugly, no doubt, but you can probably just some to make him look just like this, you know, adding your own color skiing or whatever you like. OK, so that's basically how we accomplish this section right here. Now, we're going to do this section right here, and this is very simple, guys. It's just an accordion and an image. That's it. So going over here, I'm gonna click on this little plus blue icon, and we're gonna cook on regular now. This is two rows. So I want you guys to sort of understand the visual behind this. So this is an image, and this is an accordion. OK, but if you've noticed, this space is more than this right here, so going over here. Let me close this right here. Actually, I'm gonna probably close this right here. Okay? And we'll close this again. Okay, So right here on the goats to this icon right here. Really? Notes to regular. Now you see right here how we have these icons right here. So this right here would be ideal, right? Because this has more space, and this one has a little bit less. So let's click on this one right here. Okay? Now, over here, under this little blurb right here, I'm gonna click on the image. We're just gonna simply add an image. And I hear I'm gonna go ahead and upload, and I'm gonna find that cool little phone. Uh, looks like I am missing the phone, right? Yeah, I'm missing it. So I'm gonna go ahead and upload that. I believe I have it. See? Here. Let's see where I put the phone at. Okay, Although it is the act I, p and G Maybe he was there. I don't know. Yeah, that's it. Right there. Silly me. Ok, that was it. Right there. All right, so we click on upload an image, and there you go. So now I have this image right here now in this section right here. I'm gonna add in the accordion. Okay, So at a new item and we can put in something like, um uh, let's see. We can put something like welcome or hopes because they learn. Oh, about us. Okay, then right here, we can add in some dummy text. Okay, so we'll go ahead and shoot some dummy text, okay? And click on check. Now, let's go ahead and add in some more. Actually, I'll just duplicate this road, so I'll dedicate it three times. And, you know, you can go ahead and change the settings guys in here, you know, for the design. So right here is like the open toggle background color. So if you want to go ahead and change that, we can make that like green, so they open it. It's gonna look green. Looks kind of ugly. But hey, that's what you want, right? So if somebody opens it, what color do you want it to be? Okay. And again right here. We have the open toggle text color. We have the closed background color. So this right now is close to see that how these are closed. Okay, so if you want, that's you know, that's how you would do that. You can also do the toggle text color as well. So you want to just change the the know the color of that? You can change that as well. And also the icon color. So if you want change the icon color, you can do that as well right there. Ok, now the Tuggle font maybe want to change that to railway? You know, we want to keep our colors a little consistent. We wanna make sure they're all the same. Okay. And right here again, guys, these are the same options. So letters facing line hide. And this is the body fonds. So the body fonts is the font inside of this right here. So maybe we can change this to railway. Make it bold. Okay. And of course, we can add in some padding can use a border. You know, a border basically is like a box around it like that, but I don't like the border, But hey, you know, you're welcome to use the custom color if you like. Okay, so let's go back to general right here and let's go to check box. So we've basically created this section right here, guys. And it's very, very similar to this right here. Now, this section does look a little different. So how did we achieve this section Right here? Well, basically, what I did was I just took this text right here, and I just put it inside of the of this module right here. So I'm going to click on the year icon and I show you how I achieved that. So right here I'm not gonna put any title. And I'm just going to go ahead and just paste this right here inside, just like that. And then for the link. Guys, I just created a custom link. So right here, I'll put me, like, learn more. No, I'm gonna highlight this, okay? And now we're gonna create a custom link with a text. So there's a little icons right here. You know these right here? They sent her the text, they make it to the rights or to the left. Now, I'm gonna click on this little link right here, and if I scroll up, it's gonna say you are l So where do I want them to go? If they click on there and more. Well, I'm gonna put my websites and go to Okay, okay. And then I'm click on this check and check again. So it's It's sort of like a creative way guys to use this because most people wouldn't think that with this module that you can do this. But remember, you can do anything you can possibly think of. Guys, there is no limitations. And let's just say I want this row a little bigger. You know, I want this picture a little to the left. You know, I don't want to close. So in order to change that, whenever you're working on modules, just go to the row settings. And instead of making this row full with, like, that's we can actually determine how big we want this to be. So click on custom with, and now I'm going to click on this right here. So you guys can see this and we can determine you know how small we want it or how big we want it. Okay, so 100% is obviously the entire page. All right, so another way you guys can get creative to is the gutter with guys. The gutter with is very important because the gutter with basically creates this effect right here where there is no space whatsoever. Okay, So whenever you want things closer to each other, all need to do is go to the gutter with and make it smaller. So right now it's at three to and then one. You see how it's very close, Like everything's super close like that. So if you want that effect, you can do that with the gutter with Okay. But I'm gonna go ahead and just leave all those, you know, standard. I think this looks like a good section. Okay, so let's go ahead and move on to the next section right here. We're going to create this section right here. So this is a really cool and creative section. All right? So I will see you in the next lecture. 10. Home Page Creation Cont..: All right, guys. Welcome back. So here, we're gonna create this section right here. Now, before I begin, I kind of want you guys to understand how we did this. I kind of want you to start to think about the models were going to use. All right, so this right here is a 2/3 you know, it's ah, it's a bigger row in a smaller row. This is one module, and this is a blur module, a blurb module and a blurb module. Okay, so let's go ahead and create it over here, and the visual builder is enabled. I'm over here to this, plus new go to regular. And I want us to like something right here. So this right here is the one I want to select. Okay, so I want to select a blurb. And guys, a blurb is like something for, like, our services or something. Pretty simple. It's ah, pretty straightforward. It's not really like, you know, they're basically, like, little things that just work, you know? So let me just go ahead and show you So I hear a pit the DVT I don't want to be Earl. Earl is a destination of another website you want them to take him to? Okay, Now under here, Under use the icon I go and say yes. And I'm just gonna put something like, uh, this thumbs up, thumbs up. All right. OK, now the icon color, I kind of want to change it to something. Like maybe two black there. Yeah, we'll do. Black went up. Now the circle icon. Guys, this is a background color You can have if you'd like, So you can have a additional color around it so you can get creative with that as well. But I don't really need it. You know, I don't really don't really care for the rest in peace. So under the image icon placement guys, I want to go and say I want to the left this time. So now you can see that it is to the left and the icon animation. We can change the animation of this so right to left, right, left to lie Bottom toe baba law and all these different ones. So you can kind of see how it comes in. Ok, now, under the content here, I'm just gonna go ahead and add in some dummy content, but not too much. Just a little bit and paste that right there. All right. And that looks good. Okay, so I'm gonna go ahead and click on safe. Now, I want to duplicate this. Wanna go ahead and duplicate this again? All right. 111 too many. You know what I did wrong? I actually duplicated the road guys, so I made four different rose, and that's not what you want to do. OK, so shame on me, you guys, and give me a thumbs down or bad review. All right, So I want to just duplicate the module. I don't want to duplicate the entire row, so just I hope you understand We have three modules in the same row. Okay? Now, over here, I want to add in a call to action. Now, this is a creative way to make a section, guys. So right here I can put some learn all about are amazing company. And over here, I do not want added in a background color. And the reason why is because we're going to create another background color, all right? And I'm just gonna go ahead and pay somewhere dummy. Texan here a little bit more. They put a space and put a little bit more. All right. Now for the design, we need to basically make this show. So the header color, Let's make it, you know, black. So we can actually see what we're doing, you know? And you know, I can change this to something like railway and guys. Font is everything. It really truly brings just life to your website. Don't make this a little bigger, okay? It's like that now, saving for the body Tunks color right here. I'll make this black so just we can see it. Okay, so there you go. So we have this section right here, but it doesn't look anything like the other section that we had. So let's go ahead and start making some changes to the road to sort of get that effect. So over here, click on this. I wanna make this full row, and I want to reduce the gutter with just a little bit. Okay, so I reduce the gutter with the SNC. It looks really, really small, Like a what? This looks kind of strange. You know, it looks really, really weird. I know. Just you hang in there, we'll get to this. So over here, under these icons right here under the blurb settings, I kind of want to add it in a different color to the background. You know, I want to start distinct ing the sections from each other, you know, so we can actually do that by going to the background color on the design settings and just , you know, like the background color, this one. Well, that's a like a blue. See right here. Yeah, that was good. Okay. And something over here will select another design. No, not the body text will change it to the background color on. You know, you guys, you might want to use better colors. And this this is really ugly. And this is just for Bridget Over Vis is okay. So we'll just use another color right here, and we can add in something like a red. Okay, this is just the sort of help distinct, uh, where these go, and you know how they're supposed to look. Okay, So now we need to basically create some space in between these blurbs because there's no There's virtually no space in between them and we kind of want it, like, you know, space the mantle to sort of make it look good. Right? So let's go to the 1st 1 right here, animal. Go to design, and I'm a scroll down over here to the custom padding section. And here I'm going to start adding some patty. Okay, Maybe to the rights I want. Maybe we're, like, 50 events to the bottom right here. You can go ahead at in something like, um uh, well, adding something like, I don't know how much time of space 50 pixels and to the last to want something like 20 maybe 30 pixels. Okay, so basically, what I did, guys was I made space over here. I made space over here, and I made space over here and over here. Okay, Now, remember, So the right in the left patting guys, I basically made it. So there's space over here, But if you add too much padding toe one side, the other side will have nowhere to go, you know? So maybe I want to reduce the padding on the right side a little bit and maybe increase it on the left side. You see that? Now? you see how it's kind of moving towards the centre? Because there's still space right here. Okay, so now I'm gonna click on check. No, guys, I am lazy. I am super lazy. I'm just gonna do this. And there you go. We now have the rose all set up, and I'm just gonna delete these ones, rest in peace and, you know, being detained the background color. Now for these. So going to the design, I'll change this one to something like, um, I don't know, something like green. And this one right here. Change. This is something like, um e that Like that. And, you know, a white text would probably look better than this, you know, talks we got going on over here. You know, I think the white text looks a little bit better, so we'll go ahead and change the body text color as well. And also for the icon. Guys, you guys can change the color of the icon as well, so we can actually decide to make this icon front a little bigger too. So right here we can change a bigger Well, we can make it really, really big. Etcetera. OK, so going to the general section. We use the icon scroll down right here. And what color do you want this icon to be? Well, maybe something like, uh, white. That's cool. You know, it looks like that has, like, that translucent looking now has that really cool look to it. So we've added in this section, and you guys can see it starting to come along. We do have some space right here. And remember, we can always just drag it up in this section right here. We have space. Just drag it up. So, guys, this module has no ability to have background color. So how do we change that? Well, we can go to our rose settings over here, and we can do it manually by going to row settings. Remember earlier how we had the background color on row one road to So this is Row One, and this is road to so going to design. Let's go down and we're gonna find the background color to see column to backgrounds. Remember? Guys, this is column one, and this is called him to Okay, so I click on this right here, and we can add in any color that we'd like right here. So we should have used white text, huh? Yeah, so I'm gonna leave it as black believe it is black, but I want to change the text color. I kind of want it. I want people to see the text right here. So going over here to the gear icon, I'm gonna go ahead and change the text under the design. So header, text color I want to ask White. And over here obtains the body text color to white as well. So you guys can see that it looks good. So the last thing that we have to do is basically make padding. We just need to basically make some space. So the black kind of matches with the other section as well, because right now it kind of doesn't look too good. You know, it doesn't really look good, and we need to basically fix that. Okay, so let's go ahead and do that right now. So let's go on over to this module right here and again. Guys, we want to make patting. That's all we want to do. So design scroll down now, custom Patty. So I'm gonna add 100 10. You see that? You see how it starting to follow. So you, at this point kind of know what to do Now, you kind of know You just need to basically create enough space so it can either mass this whole section or you can make the text even bigger. Okay, Now, I kind of want this patting right here away from the This is too close, you know. So let's go ahead and add in 50 pixels and we'll added another 50 pixels. She hopes now centered a little bit and looks, you know, much better than before. So that is basically how we can achieve that effect now, before we make the bottom padding. You know, before we make more space down here, let's make this a little bit bigger. You know, we can actually make the text bigger, and as a result, it probably will have an effect on the padding as well. So let's go ahead and do something like, uh, you see how the space is now going down there. So before you do that, you know, you might want to consider there you go like that. Now, let's go ahead and go down over here and we can Adam some space down here. Uh, let me see here. You know, it's that that was 110 100. Now we have to just kind of match it up with the bottom right there. So maybe, like 100 60 but behind 70 would be good. Maybe 165. Let's go under 65 66 67 68 60 is perfect. All right, so there you go, guys. Congratulations. And that is basically how we achieve this section. Now, this perception was a little bit of critical thinking, but I want you be able to use the Devi theme that's all, like, you know, at all cost and at its full potential. I don't want you guys to be using it saying, Oh, this team sucks. We don't know what to do, you know? Because I know it can be very discouraging you. Nothing to do, OK when you don't know what to do. Okay, so that's about it for this section, guys, you guys have any questions regarding this section and how we achieve this? Look feel free to let me know and let's go on to the next section, so I will see you there 11. Pricing Tables And Google Maps: All right, guys, Welcome back. So when this exception, we are going to make some number counters and pricing tables. But before I go, you know, in the last lecture, if you look at the blue bar, you notice that we have this white space right here, and we also have it right here. So all you need to do is just simply take it and drag it up and take this space and drag it up. There you go. You have zero padding whatsoever. Okay, so let's go on to the next section where we're going to create this section right here. Very simple. These are just simple number counters, but, you know, they're going to have on every Web site, you know, I think they're, you know, standard on every website now. So he created a four with section guy, so we created four little icon's right here, so we need to find the module that is a number counter, or is it a circle counter? I think it's a circle counter that we're gonna use the circle counter, so it is right. Or we can use number counter. There we go. OK, so we're gonna use a number counter here and here it says, OK, give it a title. So I'm gonna put, like, satisfaction, and I'll do something like 100% and a percent sign. Yes. Percent sign. No. You hear about something like black text color? I kind of wanted as black. Maybe a little bit more. Don't leave it like that for now. And on the design guys, we have the title fonts now, guys, these are probably the easiest things to make. So I'm just gonna do something like railway, you know? And the title font size would make a little bit bigger. And the title text color as well. The letter spacing and the height. And also now, this is the number font. So this is the font for the specific number. So I'm gonna put something like railway again, okay? And we can make this a little bit smaller. All right? Yeah, that's good. And you can change like the text color as well. You know, you can change. It's something, whatever you like. But, you know, I think you know, this is pretty standard. You guys, you know, understand the basics of that's so you can add it in like a background color to this as well, Like, you know, and you can also reduce this pattern like we talked about earlier. But for now, I believe that's and ah, you know, I think that's it. Pretty simple. And of course, guys, I'm very lazy. So I'm just gonna go ahead and duplicate thes rose. I am not going to work any harder than I have to. So here, I'm just going to, you know, do that, and we'll go ahead and do that. And then over here will change it, you know, instead of satisfaction, will do something like cups of coffee. I'm a big coffee drinker. I like Starbucks. I'm a sucker further. Ah. Hey, guys. They got their cold brew spice. I don't like them. All right, so I took off the percent sign this time. So I'm just saying 39 cups of coffee, you know, and you can have to be like sales or something, like a number of a number of profit or profit profit this month and then have something like, you know, 456% up, right? And then over here, you can have something like, um, awards and then put like maybe 34 34 awards and take off that So it looks something like that right there. Okay, so that's pretty basic, guys, that is pretty simple yet it's also really good to have on your website. This website looks really tacky. It's just because of the colors were using guys that that is it. The brain just thinks ugly website because of these tacky colors on, like this one right here We have really nice colors that correspond to each other. All right, here we have the blur blue background, and we kind of kept the consistent. So whenever you're making website guys, I'm telling you right now, keep the colors consistent. Okay, so I went back over here. Let's go ahead and add in this section right here. So this right here is a text module, and this is a pricing table with three sections. OK, so it's going over here, and we're gonna go to this, go to regular and we can go type in something like this right here and then go to a text model this time. Okay. And then we'll put something like, um, our pricing tables, okay. And I want this centered. Remember, guys were using the text. Now we're using the strictly text we go to design over here. We want to make sure that we go to the text font. So over here I'm gonna do railway, which we've been using for a while now and I won't make a little bit bigger. And I want to make it white boop. It's gonna disappear. Now, don't worry, because we're going to create a background image for this section. So over here in this gear icon, click on this and added a background image right here. I'm gonna put in this one right here. Okay? So I bet you're thinking, you know, there. That's not the whole image. You know what's going on? No, guys, you can actually stretch the page out, But before we do that, I kind of wants to, um, adding the modules first. I want the models to kind of push this picture down. So it's going over to this plus section right here, and we'll add in these three little icons right there. Okay. And these three icons guys, we're just going to basically adding the pricing tables. So going over here, we're gonna go ahead and add in a simple pricing table, and we're gonna click on add a new item. Okay, so right here, we'll put something like, um, I don't know. What should we put for? This one will put Standard is our standard plan standard plan. Okay. And the right here will put like, um, our basic package. What currency do you want? Well, I want dollars per what's so we have per month per year. I'm gonna put per month m o. How much does this cost? Well, I'm gonna say 50 bucks the butts in euro. So I'm gonna put a little sign right there, and the button text opened by now. And then we'll go ahead and add some content right here. We'll go ahead and added something like, um, the best planned for news press enter allowed in a 2nd 1 We can add something like, um, I don't know, I'm lazy, So I'm gonna go and copy this, guys, and we're just gonna go ahead and paste this again right here, okay? And of course, you guys can have anything you want, you know, you can add in, um, whatever you can possibly think of to make this kind of looked better than this right here . But I'm just giving you an example of, you know, you just press enter, and it would basically create a new section for you right there. Okay, so let's go to the design guys. That design is everything for this. So right here. This is not a feature table. So a feature table is basically saying, like, choose this one. Like, this is the best one. So table header, background color. So right here. I can change this to something like black Or maybe like a gray of dark one like that. Like that. Okay. And over here, we did not make this a feature table. So under the general section, you can go ahead and click on this right here and make us a featured. And this would be the options for featured, but I don't want to do that. So I'm gonna leave it as regular. I'm gonna go to the design again now Also, guys, the subhead or fonts so you can change the sub header font as well. And the size of the sub header font, which is this section right here groups it does that sometimes. Yeah, it does that. I don't know why it just does that. Sometimes my mouth that goes haywire. So also the color right here. You can change the color of this section right here. And, you know, I don't want to mess with this because, you know, this is big, You know? I don't want to mess with the settings, you know, it's these are all the same thing, guys. It's just for one model to another. So now, under the currency and frequent fonds weaken changes to maybe some, like Roboto or something that make this look a little bit better. So this is referring to this dollar sign right here. Okay. And the text color, we can change it to something, like maybe black. Okay. And of course, we can change the spacing of that as well. You know, we have control of everything now the price fall. So the price font is a little bit more important. So right here, I wanna change the price font, which is the dollar sign to something like our roboto. So you know, you can changes whenever you like. We can change the text color, something like, uh read or or whatever you like. I'll put something blue. Okay, Like a light blue. Okay. And, um, you know, I think that's basically, you know, a standard, you know, option of this right here. Now the body fond guys is referring to this stuff right here. Okay, So you want to change this stuff right here, you can go ahead and change this to maybe like, um, we're using railway. Okay, I know it looks a little bit better. And the reason why this kind of looks bad right now is because, you know, we needed that button toe look really cool, you know? So under the custom software button, we can go ahead and designed this right here. So the text color, I want text color as white and the background color I want This is something like, uh, like a gray. Well, actually, match this up with this right here. We'll make those to the same. Okay, gotta keep it consistent. And, you know, the radius will make it a little bit more circular. So look something like that. And the button font contains a font as well to my railway. Want to keep it consistent with our current other funds. And, you know, if these air the hover over options guys, so remember, if somebody hovers over this button right here, that is what these are referring to. All these hover over etcetera. OK, some of the gun check. Now, I'm going to click on the duplicate row, and we just duplicate these guys. We've basically, you know, added in our fonts, we've added in everything else. So you know why? You know, why make it harder than we have to, you know, And we can just change the text right here. So right here, click on this and say, this is like the gold plan, and, you know, we can change it right here as well. Like, this is gonna be $150 and right here under this one will do, like, this is the enterprise, and then this will be something like $250. Okay. All right. Well, maybe that was Yeah. I was a little weird, so I got some nice where things happened. You see that? So somebody just weird stuff happens. You know? People ask me, you know, nothing happens to you, dear. I'll see that That was weird. So I'm gonna just vomited going to delete this and just make a new one right there and just simply drag this over here. Okay? And there you go. So I'll put something like Enterprise or ah, platter platinum. Then I didn't like 2 50 Okay, So, guys, heirs do happen like that. Like that ever happened for no reason. So there was no reason for that. I did nothing wrong. It's just sometimes in the world of WordPress, you just get really strange and weird stuff. Okay? So I created pricing tables, guys, that's about it for this section. Pricing tables are very simple. They're very easy to understand. I do have any commerce tutorial. If you guys are really interested in making any commerce website, I do have that story all so be sure to check it out. So let's go on to the next section and I will see you guys there 12. Google Maps: All right, guys. Welcome back. So now we're gonna create this section right here, this dark section, and then we're going to create a full with map where people can see a location, etcetera. OK, so it's going over here, and I'm gonna click on this little plus icon, and I'm go to regular and I'm gonna add a call to action. So I'm gonna go over here and adding a call to action. And if you guys are wondering why I had a call to action, I feel that the called actions are very simple because it has a header and a text module already inside of it. So it's a little bit faster than creating to text modules, But you can also use to text models as well. You can use a text module here and then text module here as well. Okay, so going over here, I'm gonna put something like, Where are we? Okay. And then I'll go. No, you know, you are well. And what's in text? No, because we're not adding a button. I do not want a background color. And then over here, up with something like come and visit us and click on check. Now we can't see anything. And the reason why is because it's white text. Now, over here, I want to add in a color. So I want to basically say I want this whole section right here to be something like black . Or maybe you like it like a charcoal. Okay, now, over here, guys. Same thing. I'm click on the gear icon and go to design. And just like we've done it before, this right here controls the header fonts and maybe once, I mean, like railway. And we can choose the size of this and also right here for the body phones as well. We can do something like rial way, and we could make that a little bit bigger. Okay? And maybe over here, we can go ahead out of, like, a little space right there and to be like that. Okay, Very simple. Very easy. Okay, now we're going to add in a map and for the map, guys, we will need to add in an A p I key so over to this little purple icon and click on this and click on safe. All right, guys, getting a p I key is free. It's easy to do. So going over to Google over here and just type in Google a p I key. And it's funny. I had a tutorial once, and they made it mandatory in like I was, like, late of 2016. So I met this page right here, and it's developers dot Google. Now, I got to this page because I already have a Gmail account. Guys, you will need to have a Gmail account in order to get to this page. Okay, So make sure that you have a Gmail account created and then just simply go to Google again . There type in Google a p I keys. Okay, Now, once you're here, just go ahead and type on or click on, get a key. And I have a lot of projects, guys, I have tons of them. But I'm gonna do, you know, create new project. And I'm gonna do something like I'll just put divvy theme and click on create and enable a p I. And we're gonna take this a p I key, and we're gonna put it in our theme customizer. All right, so it is generating the a P I key I don't know why they made it required. I I don't know why, but this year or $2. 16 they did. Okay, cool. So we have our e p I key right here. So I'm going to copy this and go to copy. Now it's going over to our web site over here. And make sure you know to say that right here, guys, if you want to lose all your progress, that would be the worst thing ever. I've done that before. It sucks. So just make sure you save it. Now it's going over to our dashboard, and we go down to Davy and go to theme options. All right? And there are some stuff here, You know, we'll get to a lot of this stuff a little bit later, but for right now is here. It says Google a P I key. Just go ahead and pace that in there and just click on save changes at the bottom. All right, cool. So now that we've enabled that's weaken, basically put in the map. So right here, I'm gonna go to enable visual builder already, and I'm a scroll down, all right? And you click on this plus new I go to full with, We're going to add in a full with map. So you see, the Google A P I key is already there, and we go to add a new item and, you know, title. So it put like our headquarters and mapping address. I'll do something like Hollywood, see a and go to find. All right, So cool. It found it right there. There it goes. And you can add in some light stuff right here. Like open from 9 to 5 or something. Okay, let me go to check. So now I basically want to say OK, so where do actually now want the map to show up right here. So under the map center address, I'm gonna do Hollywood, California, and go to find All right. And there we go. So basically, the map centre addresses Where do you want this centered at? And then the other one is basically saying really want this little dot to be okay, so I basically added in the map. Now there are some options right here, such as the mouse doom wheel. So if you take this off, they can't like, scroll and make it smaller or bigger. OK? And this is mobile, so you can actually have it drinkable on mobile as well. This is a new feature, the added and a current update. So that's pretty cool. They did that. So I go to this little check box. So if I click on this right here, you see our headquarters open 9 to 5. OK, so that's pretty much it guys for this section is is pretty simple. Pretty straightforward. Ah, the next section. We're going to talk more about the footer. We're going to talk about widgets and some plug ins. Okay, so I will see you in the next section. 13. Plugins, Footer, And Widgets: All right, guys. Welcome back. So now we're going to mess with some widgets and our footer area. Okay? Now and later in the later tutorial section, we will get live it more advanced and do custom footers. But I'm going to show you the default footer with the Davy thing. OK? So make sure you save your progress, I guess Trust headed up. Make sure you save. It's you don't want to come back in, your site is gone. And that's going over here to dashboard now, guys, there's a few ways you can access the widgets, So first, let's click on visit sites. Now, this is one way. If I go to theme customizer, all right? And it's loading this up. And I told you guys would come back to this a little bit later. So going over here, we're gonna scroll down now, over here under widgets, we have foot area 123 and four. So I'm gonna go to foot area one and click on Add a widget, and I'm gonna simply add in like a just a small widget. You know, this is just for industrial purposes, you know, these were just, you know just ones that come with default. We'll have more later. So, like, about us right here and then right here, I'll just go ahead and Adam some dummy text. Okay, so you see, right here in the bottom right here we have at a widget, and now we have this section. Right now, we can go over here and go to fitter area to out of widgets and maybe want our pages here now. Okay, so now we have our pages. So these are basically widgets, guys, they're basically added features, so I go to save and publish. Now, let's go on over to plug ins and let's talk about the combination of widgets and, um, plug ins, someone over here I go to dashboard. And for those of you who are branded a WordPress and have no idea about plug ins, I'm gonna talk to you about what they really are. So this is plug ins. I'm gonna go to add new. So imagine your website like an iPhone. These plug ins are like APs, therefore your website and they add extra features. So, going to some of these right here, this is a contact form. This right here is an XML site map. This right here backed up your websites. Um, this right here duplicates your posts. This right here is a page builder. This right here helps with cash, etcetera. Yos helps with Seo. Helps you. You know, um, he found more of the search engines. Will commerce gives you the ability to sell stuff, So every single widget guys has a different feature. Now, let's say you want to do something like a facebook like box, and you know, I can't really tell you guys like, what's the best plug in? You know what is the best? Because there's just there's millions of them, their APS. So just like the iPhone and the android, there's millions of APS. So right here, they have a lot of different Facebook like box, but the one that I like to use and that works really well, is this one right here? The Facebook like box widget. So I'm gonna go to install, and I'm gonna install this, and this is actually going to be available as a widget. So if he says widget like box, click on activate here. All right, so we have the widget facebook like box All right. So another way we can go to our widgets is by going to appearance and going to widgets. So these are the same witches, Guys, it's just a different way you can add them in. So right here. Footer area, one footer, area to. And this side bar is for, like, the blawg page. And we will talk about that a little bit later. But for now, I want to take this little, you know, Facebook like box widget and simply just drag it up here. Two footer, area three. Now, you will need to go to your Facebook, and you will need to get the length. Now, guys, remember, this must be a fan page. It is not a, um it is not a, uh, like a basic one. It has to be a public one. Okay, I'm sorry. A fan page. So I took the link of my fan page. This is my current fan page. Okay, anima go over here and I'm gonna simply, uh, you know, put it in, like, follow us or you follow me and the page I d I'm gonna go ahead and pay sat in now with we can leave that standard. The height will lead that standard until we see how it looks. And these are some other options, like, you know. Do you want to hide the cover photo? You want to show your friends faces, etcetera? I'm a click on save right now. Okay, Now it's going ahead and go to our web sites. No, I'm actually just going to open up another one, actually, and see? Yeah, we'll open up another one right here. I wish I had a friend and editor, you know, But for that for that style, it doesn't have a friend and editor. So right here, I'm a scroll down. So follow me. You see, I have now the like box, but maybe I want to make it a little bit bigger to see how the witness on a cut off right there. So going over here under the with it could make a little bit bigger. 2 52 or 50 pixels save. Now, going back over here. I'm gonna click on refresh. Okay, so I see it is bigger guys. So you see, now it's bigger and theirs Instagram widgets. Guys, there's all sorts of stuff. There's so many different types of plug ins that you can use like, you know, if you have an instagram, they have an instagram feed were. Basically, Every time you post something on Instagram, there will be like an instagram feed and look, there's all sorts of them. There's tons of, um, you know, and all of them have, you know, the different installs in the different ratings. So you might want to really take a look at the ratings because they are pretty accurate. So usually if there's a really poor rated plug in like this right here usually just doesn't work Well, you know, And there's also something like a twitter feed. So right here you can, like, you know, add in your Twitter feed to your WordPress websites. Um, you know, also social icons. So, guys, the amount of plug ins is limitless there, so many types of different plug ins, and you're gonna have to kind of go and venture off and do your own thing and just find out what works best for you. I like the social access one. I think this is a very good social social icon. One. I think it's really, really good, But unless It's my recommendation to you guys can use any of these and just kind of learned how they work. All these plug ins, guys, they all work differently. They're all created by all different people. And it's just up to you to sort of go through each and every one of them or whatever you want to accomplish and just, you know, learn how it works. Like this one right here. It has a one rating and 700 probably not the best one. And they have This one right here looks really cool. They also have social shares. So let's say, you know, you want your your like a blogger or something and you want, you know, to have that little share icon right here. Over here, they have, like, the social share where people can just like, click on it and share it to their Facebook or something like that. That is an example of social sharing. Okay, so that is a quick rundown guys of the widgets and plug ins. So going back over here to visit sites, I'm actually gonna go to the, um we're gonna go to this section right here next, which is gonna be the, um the bottom was just right here. So I'm gonna go down to our theme customizer, and we're going to sort of edit it like this. Okay, so it's good and scroll down. And over here in the widgets, guys, we can add one more to the food area for just by adding something, you know, whatever you like. Um, I got search box or something like that. Okay. And click on save unpublished. So if they want to search for something, they can do that right there. Okay, now going back over here, we can actually change. Like, you know how the foot or looks right here. So, the layout, we can change the layout. We can change the background color of this so you can get really customizable. So the widgets right here, we can change the text size. And you guys, all these are the same right here. So the body link text size, You know, the widget link color. Um, you know the shade right here, the color that we have so you can go through these settings and change. You know what? You would like this to look like? It's just basically like text, the fonts and everything else and the footer elements right here. So over here we have the social icons on the bottom right here, so you can choose to hide that's or to show them. Okay, going back here, the filter menu, Of course. That's this section on the bottom. And you can choose to mess around with those etcetera and the bottom bar again right here and right here you can, you know, edit the foot or credits to say, like, uh, made by zero Wilson. And then here you can add in, like, a different, you know, a different color or something like that. Whatever you like, you can choose the, you know, the social icon size. So you want a little bit bigger. And, you know, these are just basically guys, like just very simple settings. Font size, text color, background color. This is where you're gonna go off into your own thing. Now I want to show you how to link these. So there is no option right here. The length ease. So I go to save and publish, and I'm a closed this and we're gonna go down to our dashboard here and were to go down to Davy and go to theme options. Now I'm going to scroll down. Just keeps growing, just keeps chrome. And you see these right here, Facebook, Twitter, Google and this right here. So these little I guess you could sing number signs or where you're going to put the address for those icons. Okay, so remember these icons right here will correspond to whatever you put right here in the theme options. Okay. And later on, guys, we will talk more about how to create custom footers such as ones that look like this right here. So basically, um, going into the future, this right here, guys, is just a module. This is a text module, a text module, a text module, a link, a link, a link, a link, a link. These are the social icons and a text module. We've basically created this illusion that this right here is the footer. But it's really not by default. This is the current further to see what I'm talking about. So this is how we can, like, kind of get even more customizable, divvy? There is no limitation. You just have to kind of think of things and it will be done, right? And also, if you guys want a logo, this is where you're gonna add it in right here. So under the logo right here, you can click on upload and you know, just simply adding a logo. Now, these guys are not good logos. If you want a logo, I recommend going to five or dot com and getting your own logo. There is a link for its or I'm sorry. There is a announcement for it before this lesson to get your logo there. It's really, really good. And this is your logo And your Fabrikant. So what is a Fabrikant? A fabric on? Is this little icon right here on the browser to see that right there? How we have these little icons. So we're going to upload and simply uploading will upload the sun right here, and we'll go ahead and click on safe. Okay, so I go to visit site again and you see our logo right there. And now we have that little Fabrikant right there. Okay, So, guys, remember, if you want a logo, I would recommend going to fiber dot com and, you know, getting it there it is, um, the best place to get a logo. You get him for, like, five bucks there. Really nice. And they're really legit. Okay, so that's about it for the section, guys. As far as the logo and everything else in the next section, we're going to talk about the menu, so I will see you there. 14. Menu Creation: What's up, guys? Welcome back. So here we're gonna talk all about the menu. There are a lot of different styles you can have with this menu. So the first thing you're going to do is go over here to divvy theme on the top three, Whatever your websites called and go to your theme customizer. Okay, so you're gonna go down to header navigation and right here under primary menu bar refers Gonna click this now there are some options right here. So let's say you want to make this full with this will give it that full with effect. Or you can choose to hide your local image if you do not want it now. Here. Of course, you can control the height of the menu. You could make it really, really big or you can choose to have it whatever size now. Also for the logo height, this will actually increase the logo size to adjust to the menu. Now the text size So right here you can see we have the text size. If I make this bigger, the text will get bigger as well. And also for the letter spacing, you can choose to have spacing in between the letters of your menu right here. And of course, we can change the font, so I'll do something like, uh well, do something like, uh, really railway were always good. Okay? And right here I have it. Atala size. I'll just leave like that is just regular bolt. Okay, Now, if you guys want to achieve that's transparent menu. So over here, under background color, we have these two bars. We have this boring the left, and we have this bar on the right over here. Okay? Do you want to make it transparent? All you need to do is take this second bar, which is the Transparency Bar, and just drag it all the way down to the bottom. And it doesn't matter what color you have on this side. It's fully transparent. Okay? And if you wants to increase the opacity, you're gonna go ahead and, you know, drag it up and then right here can change the color to whatever you'd like. OK, I get a lot of questions about that. So that is basically how you achieve that transparency effect and the active link color. So right now we've clicked on home So this right here is basically saying whatever you clicked on last, that's the link. It's gonna show if you don't want that Teoh be on your website. Just produce the transparency of it, okay? And that would basically take care of the length color effect, All right. And also for the ah, you know, the drop down menu line color. That is, if there's a drop down menu, there's, like a little bar. So you would basically mess around with this these air for drop down menus, guys. So if you want to have a drop them in you, these are the colors that you would have to mess with. Okay, so they're pretty easy, Pretty self explanatory. But I want to show you different styles of the menu. This is just one style of the menu, and you know, I don't like it too much, you know, I don't really use this style too much. A lot of for websites. So going over here to header format. So we have header style. Now we have something called centered. Now, you see, the logo right here is centered with our pages or we have center align with logo now we have the logo and then we have the menu outside of it. I'm sorry that pages outside of it and then we have slide in. So slight is basically saying when somebody clicks on this little menu tab, this will open up and you can change the color of this Etcetera. OK, so I closed this and we have full screen. Full screen is basically when you click on this, guys, it's going to introduce a whole menu that covers the entire page. Okay, so right now, my go to saving published. Now, if you chose to have slide and or full screen, you will get an additional option right here, under slide in and full screen. And this basically controls this entire section right here. So we have the background color I can change it to, you know, whatever I like something like orange. Or we could make it transparent. And these options are the same exact options that were in the other menu, such as the fonts. And you know, the letter spacing the menu text size, etcetera. OK, so another option I wanted to introduce you all to is the vertical menu. So I'm gonna go to header Formats. Change this to default. Now I'm gonna enable vertical navigation. So now you see, the menu is to our left. So you ever seen those websites where the menu is kind of like to the left or to the right ? So over here, we can actually put it to the right as well. So you can have your menu right there, and it will show up just like that. All of your pages. Okay, so that is just another feature you can have. Now there is a secondary menu. Okay, so over here under the header format, I'm just going to take this off, and I'm gonna say this now. Under the secondary menu bar, there is another menu that you can put up on the top over here, but we need to enable it first. So we're gonna go down to fix navigation settings. I'm sorry. The they had er elements. And right here let's say you want some social icons, social whatever, and then right here and put a phone number, and then I will put an email. Okay, Now I'm going to save and publish. All right, now, I'm gonna go to close this really quick and then you guys can see on the top right here. We have a secondary menu bar that appears on the top. So this is another way you can have, like, a secondary menu to have above it as well. Okay, so going back over here to our theme customizer. So once you have activated, you guys can actually choose to have this. Like, you can change the color of the second menu bar right here. So the background color, etcetera, and all these other options. Okay, Now there is another menu that you can actually have, and it's it's actually pretty cool. I've actually had it on one of my websites right here. So let's see over here. What do you think this is, like another test website? Guys, it's just for two told purposes and everything. So I'm gonna go ahead and goes to enable the visual builder now this website, if I scroll down right here, you see this menu have right here. This is a full with menu. So this is actually a module guy. So it's a model that you can have that's full with so clicking on this right here under full with. We're gonna go to the full with menu, okay? And it would basically just take your menu right here and you can get decorated. You can change the background color of it. You can do whatever you like. So and you can, you know, center the tax. You can change the font all the same. Options for all the other modules are basically in this as well. Okay, so it's It's really simple to to use guys. It's a cool, you know, It's a cool little effect, and it's ah, it's a creative way to add a menu. You guys can see right here that I added on the bottom. So there is no menu anywhere and right here you see it right here. Okay. But of course, if they scroll down right here, I've actually added another one on the top right there. Okay, so this is just like another way for you guys to sort of understand different techniques about the menu because the fourth menu isn't used a lot. But, you know, this is a great example of the fourth menu. Okay, So other that guys, that's basically And for the menu, it's pretty self explanatory. you just kind of kind of messed around with the options. Messing with color. Figure out what you would like. But the menu for Davy is is very, very good. And it has, ah, lot of diversity depending on your website, etcetera. OK, so let's go ahead and go on to the next section rule. Start the about US page. I'll see you there. 15. The About Us Page: All right, guys. Welcome back. So here, we're going to do the about a section. So I need to do is go to your about us page and click on enable the visual builder. All right, so we're gonna get started right here. I'm going to click on the little plus icon right here, and I'm going to add in a full with module now for this section. Guys, we're going to use a full with header right here and right here. Put something like about us. Learn all about us. Okay, Now I'm going to actually center this right here, okay? And for the text color, we can leave this as dark for now. We don't need to change it. Remember, we can always change that on the design section. OK, so this has a really cool section that says, make full screen some click on make full screen. All right, Now, if we scroll down right here, we have each other things. Like button one button. When you are out, we can add buttons, guys. But you know, these modules guys are all about creativity. I chose not to use the buttons right here. I just wanted the full with effect, and I wanted the title. So just because the module gives you certain features, it doesn't mean you have to use them. It's all about creativity. Whatever you can possibly think of to make your website with, use it, you know, it's it's simple. So right here, I'm a scroll down and click on this check. Now I have this section of here. Still, I'm gonna go ahead and delete that I never really use the one they give us by default. So there's two ways you guys can add a background image. We can go to this gear icon and click on upload, Okay. And I'll simply just go ahead and select an image. So that is one way we can do it. The other way we can do it is by going over here to this gear icon and adding it in this section right here so I can put something like that and upload it there. Okay, same thing. So now let's go ahead and say, OK, look, I added the background image, but I kind of want to add, you know, I want to change this text a little bit. I want to make it look a little bit better. So over here in the design, I am the C title front. We'll go to the title phone color will take just one toe white. Okay. And the sub the subhead color for it will change out as well. Is that one toe white? Okay, now the title funds. So maybe you want this as you know, we got to keep it. We've got to keep it consistent right here. I just chose railway right there. Okay. And right here. Believe that the contents right here or I'm sorry. The sub font will change out to something like railway as well. All right. And you can choose the size right here. So that one a little bit bigger. And we can have this one really, really big. Have it looking like this right here. Okay. That's basically how we achieve this section right here. It's just different fonts, guys, that's that's really all it is. Okay, so we'll click on the little check. So we added this section in. Let's go ahead and continue and create this section right here. And by looking at this guy's this is basically a call to action right here with no button. And this these are bar counters. So we're going to use that right now. So over here, this plus icon, I'm a click on a regular and click on to All right. So the bar counters you guys can already see, including this plus icon at the bar counters and at a new item. So, you know, what do you want to call it? You know, Web designer, Web design, skill. Your Yeah. And then I'll put in, like, something like you had negative. Negative. What happened to you? Negatively. See? Okay, it doesn't move. Okay, you can still out, and I've never done that. Actually, I've just basically added, like, a number like 80 and then it'll fill up 80% of this right here. Okay, Now, right here. You guys can change the design like the background color. And remember, guys just use, you know, change it for one on Lee, and then you can duplicate the rose if you want to add more. So here we have the border radius, which gives it that circular effect. I can change the fonts to something like that. And the the the title color me blue, you know, And guys, you guys can just go to the settings and just, you know, message these these air basically like the percent font. So this percent sign what font? You want it? What? Text color? The letter. Spacing, etcetera. OK, so these are all pretty familiar guys. And it's, um you know, at this point, you guys were just messing with the setting, so I don't want to go through them too much. And we can also add in padding between the top padding and the bottom patty. Okay. So once you guys have basically, you know, figured out what you want, you can just click on duplicates and maybe duplicate those, like, a few times. Now, this right here is a little too too spaced apart. So you might want to go ahead and, um, reduced the padding there. Okay, so right here I'm calling this gear icon. And, you know, actually, we should have been like this. Let's do like that instead. Okay? So instead of actually duplicating the entire row guys, you're just going to add more modules. Okay? My mistake. So right here under the gear icon, you can just go to add a new item and then simply do it like that and then duplicate it from this section right here. Okay, so you duplicated from there. Okay, so that is a quick way to just duplicate all the things that you guys have. Now, what I did was I duplicated the entire row right there. Okay, so that's kind of where they were spaced apart. So, um, you know, you would want to do it from the bar counter settings. Okay, Now, over here, we're going to add in a call to action. Okay, so we'll put something like, um, I don't know, which would put well put our cool story are a great story, and then we'll go ahead and scroll down, but in tax, Nothing. Background color. No. You know, I don't like how they always, like automatically do that. You know, it's by default. I don't like that. I don't want that color. It's so ugly, You know, such an ugly color. So the text color put black and then right here under the let's go get my secret secret website. Okay, I'll go ahead and add in some of this right here, Okay? And I'll throw that in there. All right. And then, of course, guys, I'm going to scroll down right here, and I'm going to basically just create an illusion of a link right here. So breed more story, Okay? And then right here, I'm gonna create a link within the module. So I'm not really creating a button. I don't want a button. You know, I think the but it might be too much there, but I think just a cool little link would be just a little bit better, you know? So here, I'll just put something like my websites and then go to Okay. All right. So you see that we have the the little link right there, so that looks much better. And right here, we can, you know, put it to the right. Actually, change it all to the right. It was too much. So we can choose to have this. You know, however you like it. Okay. And then maybe over here, you know, you can add in the great story, you can choose that to something like to the left as well. Okay, so that looks pretty cool. And it's basically the same thing we have over here. guys. Except the reason why this looks a little bigger is because I kind of want you guys to answer this for me just by looking at this, it's not full with. We need to make this full with. So over here, I can click on make this full with. And there you go. Now you can see that we have. The bars are stretching. Now we can also do something like custom with. So let's say you want to say, Look, I don't want to go too far. So here you can kind of I control how far you want it to go so you can kind of increase it . Okay, so this guy's is the same exact section we have here. The reason why they look different, of course, is just color guys. It is simply just color and size. So these are basically the same exact beings. Okay, so that's about it for the section guys. I hope this is kind of helping you start to understand how to use these modules and manipulate them and do whatever you want. Now. Right here, guys. I could have added a call to action, but I kind of wanted to just have it look like this. You know the read more story? I don't really want the but in there, but you can always add in the button. I'm just trying to make you understand different ways that you can use the Davy theme. Okay, so let's go on to the next section, which is blurbs. I will see you all there. 16. Creating Icons And Blurbs: All right, guys, Welcome back. So here, we're going to create this next section right here. And by looking at, I hope you guys can understand what modules we use and what rose we used. So this is a three column row, and this is a blurb icon, a blurb icon and a blurb icon. Now, you guys can choose either duplicate the first row, or you guys can just, you know, duplicate each one and just added it below right here. And we have a background image. And we used this little blue section on the top up here when you enable the visual builder , of course, to add in this image. Okay, so let's go ahead and create it. So I'm going to enable the visual builder already it's enabled. And then right here, I'm gonna go to plus new lips, Whoops, regular and go to a three column row. Okay, so right here I'm just gonna add in a blurb. And why did something like, um, you know, best best webbed or best seo company. And I'm not gonna put in the euro. Now I will use the icon and we'll choose which one should we will use this one right here. That's good. You know, this is the ugliest color. I wish by default it was like blue or something, or I don't know, like, this isn't really ugly color for default. So right here, I'll put in a blue icon, okay? And scroll down, and I don't want to add in a circle icon. I don't I don't want to add that in. That doesn't look it. And that color is just hideous Zari here under the image icon placement. I'm out of this. The left right here. Okay. And scrolling down right here. I'm gonna go ahead and go to my secret website right here and go ahead and pace some dummy text right here. Okay? Maybe it's a little bit too much. Too much text, a little bit cleaner like that. Okay, Now, under design, guys go design and you can choose the icon font size. So right here you can choose to have it really big or something like that. And of course you want to change the font. Something like maybe railway or, of course, whatever you choose. And we can choose the header font size. Now, if you look at this right here. And you look at this one. We have space right here between these. So how do we accomplish that? Well, we have to add in the line Height. The line height right here will basically give us that ability to have it space out right there. You guys can see it is now creating line height. Okay, so, you know, the body follows etcetera. You know, I think we're done here. This is just, you know, if you want to change it to something like whatever you like, it's a cool front. All right? I'll leave it at that one for now, and I'll go and just duplicate this and drag it over here. I will duplicate this, and I would drag it over here. Now, of course, you guys can choose to either duplicate these again right here and have them inside the box like that. Or you could just say, you know what? I want to go ahead and is duplicate this entire routes. And I have two of these boxes, so there's two ways to do it. Okay, so we have these icons right here and now let's say you want to add an a background image. So right here under this gear icon, this gear icon. Guys, it controls this whole section. So if you want to have more space, you can choose to have more space or in the bottom right here. You can have more space, etcetera. So remember, the blue section will control this whole section. So under the gear icon, you can add it like a video. Guys, you want to add it like an MP four video? You guys can upload a video, but I'm going to add in just a background image and simply select well, which which one? Which one we doing to do this one right here? Why did no one right there? Okay, so that's basically it, guys. You know, Of course, this doesn't look good, because we need to change the font to something like white because, um, you know, White looks much better on the eye right there. Okay. And the same thing for the other one. The body text, body text, Same thing. Quite. Okay. So, you know, you probably want to change. Is all two white guys just like I have right here. These are white, and this is gray. Okay, so that's basically it, guys. And also, um I have more space on this section right here. And how I did that was basically, just either grabbing this section regarding this section and simply just increasing the space right there. Okay, So that is exactly how we accomplish this section right here. OK? And of course, guys, it's just the text color of why it looks different. That's it. It's just the text color. Okay? It's not any any different. It the colors really, truly make a huge difference. Okay, so let's go ahead now and create this section right here. Okay? So just by looking at it again, guys, you guys can probably tell this right here is a call to action with no button. And I basically incorporated this little learn more. And this right here is just a standard image. That's it. So going over here, go to this plus icon and we go to regular and going to two column row. Now go to call to action. No, guys, we can actually add a but in this time, you know, if you guys want to add a button, we can go ahead and choose to have a button. So right here inputs best WordPress theme. And here I put a button you all this time. So here but in tax will put learn more. All right. And I do not want to add a background color to this. It will make this text dark. And for the orientation will put this to the left and for the content. I will simply go ahead and paste that content I have right there. Okay, so that is basically this section, guys, it's pretty simple. Now, under design tab, you guys can choose, of course, to have different fonts for this right here and etcetera. Now, if you want to add the line height right here, you can choose So like that in the header line height as well. Or we can have, like, space seeing. You know, that is a really ugly font. You know, it really, truly is. Do you want increase the White House, guys, you guys could do that right here is Well, okay, so that's just another way how you can achieve that effect. You know, we're not having that funk. That is one ugly fonts. That's a little bit better, right? And then, of course you want change the font right here for the body, which is this section This right here, Body fonds, body color. All this controls this section right here. So we can also choose to like, you know, adding like line high, etcetera something a little bit better on the eyes. You know, if it's too close, guys, it is hard on the eyes and people don't want to read it. You know, that's just the sad truth. And over here, under the custom south for But in of course, we click on yes, right here. And we can change the text color of the button right here. Maybe I didn't like the cool background color. I mean, like a blue, like a very transparent blue. So me, like That's okay. And of course you asking, you know, change the font for this etcetera. OK, so that's basically how we achieve that section over here and click on add an image. I'm sorry. Click on the plus sign and we're going to add an eight image module this time. So scrolling down, scrolling down around image. Now go and upload the image. And I did this one right here? Yeah, This one right here. Right up to upload an image. Okay, so how do we make it look like this right here? Anybody know? Anybody know? Well, you guys can already kind of start to see that we have this patting up here We're gonna get rid of. All right, So this section right here, I'm gonna go to roast things. Excuse me. So right here we go to make this row full with All right, Now, use the gutter with. And of course, the gutter with will reduce the padding everywhere. Okay, so you see that now how we have this big image right here and then we have thes sections up here. Guys, there's there's a lot of ways to do this. We can actually just reduce this section up here, or we can reduce. You know, you can manually do it with your cursor like that's and up here, like that's or like this, or like this. Or you can just go ahead and change those all to zero in the road settings and in the blue settings as well. The blue settings inches Malta zero, which leaves no space. Okay, so over here, you guys can see on this section right here. It's too screams together, and it doesn't really look good. So we need to change this right here. So over here, under the design, we need us. You know, add in some margin so we can add in, like, a top margin, maybe, like 30 or 50 or whatever you want. You can add it on the right margin, not a margin. Lot of padding for that section. So over here, under the right, maybe want to add, like, 50 people have them, like 50 pixels. And then to the left, we were added some, like 50 pixels as well. Okay, so you can, you know, sort of just the padding to sort of how you want this to look right here. Maybe you want this in the centre instead? Because it be right there. But the padding again creates the space. The margin says where it starts from. Okay, Now we can also see if we add in the margin on the top right here. Oops. That does not look good. Okay, so this is another way, guys, you know, you can actually just choose to say, you know, I want more padding right here. 60 70 80. Something like that. Okay. But I also remember guys that if you do, like 18. 80 you know, pixels right here is gonna force this together. So if I add too much padding to the right into the left, it's going to squeeze everything together. So let's see if we can do something creative 100 we'll do 100. So this is basically saying, Look, this is the most it can go. Even though you put in 100 pixels. The letter spacing in the module is basically saying This is That's it. We're done. You can't. You can't do any more padding because we have to change the spacing in the text in the module. Okay, but that's how I achieved this look right here. Okay. And you guys can, you know, just the padding to whatever you would like. Okay. And of course, you contain the button text size. Make that bigger. That is really That is the ugliest button I've ever seen. I don't think anybody here would use that button. I don't know, but ah, then the less guys, that's how we achieve that section. Okay? All right, So in the next section, we're going to talk more about how to create this section right here. Okay, so I will see you all there. 17. About Us Cont..: All right, guys. Welcome back. So now we're gonna create this section right here. And by looking at it, I'm hoping you guys could understand what we used. This right here is a call to action, and we just basically center the button. This right here is four number counters, and we just reduce the padding, and we added in a background color to each one. Okay, so let's make it. Let's Zschau you how to make it. Okay, so over here I go to my plus, little icon, go to regular. I'm adding a one right here and simply goats to call to action. All right. And over here about something like Debbie. Theme is the best. The button you are l'll put, you know, darrell wilson dot com and the butts in taxes put by now. Now, use a background color. No, in the text. I want it. Oh, no. I want it. Uh, you know, I'll go and leave it as light, okay? And I'm gonna go ahead and leave it centered. We don't want to add that it wouldn't want to add any content in there. No, nothing. But let's go out and change in the background color just so we can see what we're doing. So over here in this gear icon, go to background color and we're going to simply just kind of mess around with the settings . There we go. OK? And this basically guys, is the same thing right here. Except right here we had it in some content. All right, so going over here. And so we just go ahead and paste this in. And Paula now we have the content and why it looks different is probably because the button looks very different. So we just basically reduced the border radius right here to make it more circular. And of course, you made me change the fonts. And you know, we made the spacing right here. The line spacing between the header. OK, that's basically how we achieved everything. So the design again, we have the header font, which was railway. Ah, where is it? You guess what result? First where is it? Ok, so you're all right. And then the font size and then we want to the line heights like that. Okay, so that's basically how we achieve that section. Very simple. Very straightforward, guys. Very simple. Ok, So it's going now and make this section right here. This section is pretty simple going over here to the plus icon. Go to regular and go to four. And I was going to add in some number counters here. So simple number counters, I'll do something like, um, I don't know. What should we add? 100% satisfaction. And then, ah, well, adding something like, um, I don't know, like 30. Okay, percent sign? Yeah, sure. Why not? Uh, here we changes to black. And of course, we just need to duplicate this row, this section already boop. And then, of course, right here. You can decide to change this like, you know, our sales and revenue and maybe, like marketing shares. I I don't know, guys, I'm just I'm just babbling nonsense at this point. So here, I'll probably take off the percent sign, maybe as something like, you know, 456 and this section right here we'll do something like 46. And here we'll put something like There we go. Ok, so now we want to go ahead and mess with the settings right here. So right here, Let me go to this gear icon I wanna make this fool with. And I want to reduce the gutter with 21 This will cause it to have no space in between. Okay, I'm sorry. No space in between the module in between. Okay? Going back over here. So we also have this blue space. We can go ahead and either drag it up. Or remember, under the gear icon, we can change the top patting right here. 20 We contain them all to zero. And this will make it like that. Okay, so now let's go ahead and say OK, so we have these right here. Let's go ahead and change the color between all of these. So under this gear icon on the tail section will go to design and go to scroll down. Now we have. But in color one, it had something like, actually, yeah, that's not gonna work out like that. Kind of don't like it like that. Um, the gassy goats to not this one. See how we can do this. We'll go to sue this section right here, and we'll probably Aditya back on color to this specific section right here. I think this section would be a little bit more ideal. You know, the other section leaves that little padding space, so it looks like there probably is patting guys. So I probably left some padding, right. Here we go. This gear icon right here, and I'm going to reduce the padding on this one right here on the top and the rights and the bottom and had left. Okay, so that is basically how we did this right here. This, You know, this section right here? We achieved that. So now we can go ahead and add in the colors. I knew there was padding. I was like, No, there should be no thing there. But, you know, Kristi's great stuff happens. And of course, guys, you guys can add a margin right here. You know, if you'd like or you can put in, like, you know, to the rights or to the left, etcetera. Right here. Okay. So I'm just letting you guys know that, you know, different ways. You guys getting messed with that setting? So over here, running notes to actually we want to equalize the column, Rose. Okay, so that space is gonna make it all the same. Each column will have the exact same setting. Okay. And under the background color right here, I might want to add something like, Ah, I don't know what working me out here for background color. Well, I don't know. Blue background color. Okay. For a column one and then for column to we will add in this purple one. Now, the reason why it's still that same color, guys is because in the teal section I'm sorry. In the module itself, we added a background color. So we have to take that one out, All right? And for column three, I would go to company background. James is something like this. Okay. And right here, you might want to change the padding for these guys. Something like, um, 10 pixels. Let's see you here. We can do something like this. He will add something like, um, will you 50 pixels and 50 pixels right here. Okay. And I think leave it like that. Okay, so we have right here 15 50 we're gonna go over here and we will go ahead and do something like 15 50 as well. So we're going to go over to the tail section again and goes to the roast settings on the design and just changed all these for all of these patting right here will do. 50 and 50 15 50 and then the section right here, we'll do the same thing. Why didn't 50 okay and that it is in the bottom. So you guys, you got to turn to see that these are basically starting to kind of like, center. So they're not, you know, way at the top. And then I get over here on the protection. We will do 50 over here, and we'll do 50 over here. Okay, Now, this section right here, this blue section appears because there is a color behind it under the module settings. So let's go ahead and find out how we can change the color right here. So on the design, scroll down. Now, the background color kind of want to change that to something like, say, just the blue. Okay, we'll go ahead and actually make this transparence. Okay, So now, right here, guys. The this row sitting right here under the roast setting one. That is the color that we have now. Okay, this one right here. Okay. So remember to use the teal module instead of actually using the module cause guys, the modules will conflict with each other. You can say OK, so right here. The reason why that happened was because I added a color into the actual module itself. So on the module, I said, I want a background. So over here, under the background color, I added in the background color and as a result, it changed to a different color. Now, the reason why it's not changing back to this color is because on the teal section I actually have the color already in place. So we gotta have two colors there. So make sure you use of the correct module or you can use either one. You know, it really doesn't matter as long as you get the effect that you want. OK, so that's about it for the section guys in the next section. We're going to talk more about custom footers, and then I'm going to introduce you to pre made layouts, which I will give you a free pre made layout. Okay, so I will see you all there 18. Custom Footer And Intro To Layouts: already. Guys, welcome back. So this next section, we're going to create a custom advanced footer. Now, by default. This is the footer Davey gives us, and we can choose to decorate or not, but we can get even more customizable. We can actually decide to create our own footer and decide not to use the one that did he give us by default. So you guys can see right here. This is a text module, a text module, a text module, text model, text module and the social icon module right here. Now, this section of the bottom is the default section that TV gives us. But remember, it's all about creativity. Guys, we don't have to use the way you know, the way that theme gives it to us, we can sort of create our own stuff and do whatever we like. Okay, so there's two places you guys can get this you guys get from Elgon names dot com. Or you can go to my website darrell wilson dot com, and under divvy layouts. I have tons of free layouts, guys. So it's going down over here. I will go down to, um, the Custom foot or layouts and guys, I have so many free layouts. You guys conceivably just click of a button. You can create a website in seconds. OK, but right here, under custom foot or layouts, click on this and you will need to add this to the cart. And don't worry, it's free. Everything is free. It's not gonna cost you a dollar. OK, so go and add this to the car and check out. And once you get it, you can go to your account section right here, and you can simply just download it. Okay. It will be under your downloads section right here. And you're gonna simply just, you know, down one of them. Or, you know, whatever ones you guys choose. Okay, so going back over here, I want to go ahead and say, Okay, I have the layout. I want to upload it. Okay. Now, when you get the layout, it's gonna be in a zip folder right here. You need to open it. And if you are on a PC, you'll need to extract it. And this is the fuller I have right here. I'm going to open this and these right here are the footers. we have over 10 different type of footers. Guys, there is a lot of footers that we can use. All right, so let's just say I want to just grab one. You guys, I don't even know which one I'm gonna grab in foot or number six. All right, We're going to put a number six now, depending on your server guys, there are different ways to upload this. And some ways work for some servers. Some ways work for other servers. It's just the way the layouts are a little a little strange, you can say. So here we go to save right here. Okay, Now, there's 3 to 4 ways you can do this. You can actually upload it through here through here or your back and editor. So I'm gonna show you all the ways just to make sure that I've covered every single basis. So under the visual editor right here I click on these two little purple icons and go to import, Go to choose the file. And I'm simply gonna grab foot or number six Now, guys, depending on your server, it's not going to work correctly for each one. Trust me, I've used Ah, lot of them. And a lot of them knows they work. Sometimes they don't work. Other times I don't know why, but that's just the way it goes. Okay, so I'm gonna go to foot or number six and go to import Navy builder layout. Now, this might work. It might not work. I really don't know what we're gonna find out. Okay, so it's going. It's going now for some service guys. This works. And also for some domains is just the way it works. It's a little fishy, so it looks like it is not properly uploading. I think so. Yeah. It's not properly uploading. OK, so I'm going to exit the visual builder now. There is also another way you can do it. Okay, so we go to edit page right here, and this is a second way you can upload it by going over here to your back and editor and clicking on important export imports and choose the file. Okay, so this is the second way. And these ways are kinda knots recommended. It has a very high fail rate, so you can see it is not supposed to be imported this text so that does not work like that . Now, the last way we're going to do guys is going to divvy and going to the Davy Library. All right, Here. I'm going to click on Import and Export. I'm going on. Imports would click on, choose the file, and I'll select foot or number six and go to import duty builder layouts. There you go. Worked like a charm. So, guys, depending on your server, it will work for different methods. It will not work for other methods. I don't know why the delay also like that. I truly wish I knew why. But I've worked with Debbie for a while, and that's basically how it works. So try all three methods and see which one works for your server. Okay, so that's basically it for this. Ah, no, The foot or six. Let's go ahead now and apply it. So I'm gonna go to the about us section. I'm a scroll down and go to enable of the visual builder. We'll have to scroll down again, all right? And I'm a scroll down. And, um, right here on this, this plus icon, um, could come plus, and I'm gonna go to Adam from library. Okay? Actually, no. We'll go over here to this section right here, and we'll click on this plus section, and then we'll load this section from ad from library. Okay, so now we have footer six. Right? Here's because this isn't our library. And you want to make sure replace existing content is unchecked. That will reduce that will destroy everything. We do not want that. Okay, so we'll click on plus the foot or six. And there you go. This is our footer, but this is a really bad foot. Er, this is not really Ah, good one right here. So let's use another one. Let's go ahead and go to our divvy library again. I'll save that one. Why not? I was. It's not the not the not the worst footer, but it's not the best. Some go to divvy library and let's go ahead and add in some more. Go to important export imports, choose the file and looks like something else like, um, select number. Let's like number number one. Maybe you never ones really, really good. Okay, so I selected number one. All right. And now let's go ahead and try this footer. Okay, so we go to the about us section and scroll down. I'm hoping this one's good guys. I have no idea what these we're gonna look like. I really don't. I'm not scripted. I just kind of know how the theme works. And I just do it as I go. I know how it works. So I don't need toe, you know, write a script. So here, to this plus icon, you click on this. I'm sorry. Go to this section right here. Click on the plus and go to add from library. And I'm gonna add foot one right here. Now, guys, remember, you might want to check a Thea replace existing content because you see now how all I have right here, I basically just destroyed my page. All right, So make sure you do not do the same thing, okay? You must make sure that the replace existing content is unchecked. Okay, So I'm gonna go to exit visual builder and go to discard an exit. So you see that everything is good and go. Everything is cool. Okay, Let's go and try that one more time. I'm going to enable the visual builder I've done that so many times. You guys, I gotta be honest. I've destroyed my website, and I'm like, Oh, my God, What did I do? So right here I go to plus at from library. I'll uncheck this and just simply click on one. Okay? And there you go. So this is now our other footer we have. Okay, so it's it's super easy guys to make a footer. Um, you know, there's 10 of them, so just go ahead and choose which ones you want. Now, this is a custom footer, Guys, we don't need to create our own, so you can actually go in the settings and just kind of delete this. We don't need this right here, OK? We don't have to have that. Okay, so this is just another way, guys, how you guys can choose, you know, the custom foot or right here. So right here. You guys can see this is a section right here, and we have a text section, a text section. These are all text sections. Now, let me say this and I want to show you guys to back an editor. Now I want to show you which models that we actually used. Okay, so this right here, I'm gonna delete this other one. All right, So this right here, guys, is the the maker. Siart says maker. So over here, she also about us. That's the same thing. And then over here, we add in another text right here. We added in some dummy text right here. So that is this section right here. OK? And then the last section, we just threw in another little section right here. I just renamed it guys. You know, I just put Darryl D V layout instead and put it like that. Okay. And in this section, right here, of course, I just put a little title, and then this section right here are the links. Okay, So the about us and the reason why you can't see right here is because it's white. So over here they are white because we added in a different color background. Okay. And then over here, of course, the last section is the text and the gallery section right here. Okay. So, guys, it's really simple to create a a custom footer. And like I said, use those custom fitters guys on my website. It will save you a ton of time. Is that trying to design it from scratch? OK, so that's basically a quick rundown guys of how to create custom footers. And remember, once you do this, you're gonna wants to delete the other footer that you have on the bottom right here, because you don't really need to Custom footers, you know, you don't need a foot or like this right here. You don't need this foot or anymore. You really, truly don't. And you know, you only need one footer. So it's up to you guys. This is just an option. If you want a custom footer, you guys can, you know, make your own or upload one of the layout. There's 10 of them, and these are really beautiful designs. Guys are really easy to use. Okay, so, you know, go ahead and take the time to go through those, check them out and just see which one is for you. There's 10 layouts, guy. So there's all sorts of really cool layouts that you guys can use for your website. Okay? And the next section, guys, I have, like, a little bonus and going to give you guys another free layouts for these services. And I'm going to show you how we can create, um, the services page right here. And, you know, I'm going to run you through on how to edit it and how to use the pre made layout. Okay, so I will see you all there. 19. Services - Intro To Pre-Made Layouts: Hey, guys, Welcome back. So in this section, we're going to do pre made layouts. Okay, So if you see the other sections right here, like the about us and the home and everything, I'm gonna show you how you can actually just save your layout and exported and also import other layouts. Okay, so going to my services section, I'm gonna go ahead and enable the visual builder now, earlier, before we decided to upload the layout. No, Guys, this is the same exact weight. So you can actually go over here and go to these two arrows and go to import and choose your file. No, guys, depending on your server, you'll have to try the three methods that I showed you. I know. For every server guy, it's just different for mine. I don't think it works like this. So this is the layout, and I've included this in the drop box for you guys. Okay, so I go to open. I don't think is gonna work like this. I think I have to go to my Debbie library. Okay, so it works. OK, so that's another way. But earlier, before we tried, this method didn't work so it's just Ah, the way it goes, guys. Okay, so I upload the layout and as you can see, the website is already created for me. This is just simply sunny and guys, I have other premium layout on my websites. I have free ones and you guys can have a ball with, um it's a website that's already made for you. So all the hard work is already done. Now, let's say you upload the layout, Okay? Lets see you uploaded. And also, if you upload it, you could make different changes on a guy. So right here, You know, we can go ahead and just put like, Debbie theme and put in your company name right here. You can add in something like, you know, we can change these models right here. So click on this and put like the best and then over here I can change the title. Something like smart CEO company. So, guys, the premium layouts will drastically save you a super large amount of time. That's why Devi is so famous. That's why it's just so incredible. Okay, so going through here, we can go ahead and, you know, mess with these this right here, guys, is a tab Settings. Okay, so this is another module that you guys can use and going down over here, and you can kind of explore and see, like, which models to be used here. Okay. Right here. We just use a call to action, and right here just adding a picture. If you wanna make the picture smaller or bigger, you can adjust it accordingly. OK? And right here. You know, we have a picture right here, and we have, um, more texts. And if you guys want to see you know what I used, you can just go to the module settings, go to design and sort of see, you know, how did I design this? You know how what patting the dural use what? Patting. You know what margin, etcetera. OK, so going down over here, you guys can see other ones right here. And of course, we have this one right here as well. And we have this custom footer right here. Now, I still have this photo right here, and that's because I have not gotten rid of its but, um, you know, it's just for control purposes, so I should probably get rid of this one. And this right here would be my hope footer. So this would be basically the end of the page. Okay. And guys remember, I have free layouts on my websites. You guys can go ahead and have a ball with, um But I just want to show you how to use this right here. Okay, so this is basically a quick rundown guys of how to add premium louts. Now, the other way, you can add it. And the way I recommend it is by going to your divvy library. So going over here to the dashboard, under divvy and going to divvy library, you can add it right here as well. So, just like we added, these other footers can go two important exports imports, choose the file and simply find the services section right here. Okay, so right now it's saying it's not working, so But it worked for the other page. So, guys, I gotta be honest. The deal out our little funny. So just go ahead and have fun with the layouts. Um, you know, But still, I want to talk more about, um, you know, other customization. We can have. So in the next section we're going to talk about the Blawg. And then after that, I'm going to introduce you all to custom CSS so custom CSS is basically added modifications that you can have that the divvy theme alone will not give you. You have to basically add in something a little bit more creative. So this section right here is done with custom CSS so you can see it looks really, really good. And this cannot have been done. Guys without custom. CSS So basically what that means is the module settings inside the modules can't do this alone. You're gonna have to add in some CSS and we will go over this after we go over the blog's section. OK, so I will see you all in the next lecture. 20. Blog Tutorial: All right, guys, welcome back. So in this lecture, we're gonna talk all about the block, the different designs you can have how to post a blawg, etcetera. All right, so the first thing we need to do is create a page for our block posts. So over here in our plus new, I'm gonna go to Page, okay? And we're going to simply just go ahead and create a basic block page. So I hear him to put blogged and just go to publish right here. Okay, So there's a few ways you guys can add in blog's. I'm gonna show you the basic way how we can add a blawg. So we added the blonde page. All right, Now, let's go ahead and go over to plus new and create a post for our block. So I hear a putz like the best WordPress theme I can't even type, ever. All right. So go ahead and like, bread, some content, and I want to put some dummy text right here. So we're just pretending that this is just a block post. So you could be talking about, like, you know what I feel or whatever. And right here we can click on add media, maybe adding an image. No. Like, um, you know what guys like the most and right here on her edits we can kind of like, center. It's You can change the size of it as well, so maybe you want it full size and centered like that, you know, so you can have all sorts of fun and, you know, here with your blawg. But over here, under the featured image. So the future damage is very important, guys, the featured images, basically the image they see right next to the title. So you want to make sure that that's a nice image. So under the featured image, I'm gonna put this big city and go to set featured image, Okay. And of course, we can add in a category so put like guys, and we'll talk a little bit more about why we add categories. OK, so added in a category. And you know, we add in some featured image you can add in some tags. Tags are basically saying with somebody clicks on the tag. What is it relating to to your other stories? Okay. And this is like the formats, but Generally you want to leave it as standard, but you guys can go ahead and check out the other formats for the block post. Okay. But just for still purposes, I'm just gonna go ahead and publish this. So I made a blawg post. I created a bog post. Now I need to actually add the block page to our menu. So going over here to appearance, I'm go to menus. All right, so we have blogged right here. I'm a go to add to menu, and now we have the blawg page that we created on our menu. Okay, now we go to visit sites. Now, we need to basically connect the posts with the block page. So let's go to theme Customizer and under the static front page, We're going to do the post page as our belong page right there. Okay? And then we go to save and publish. All right number, click on X and go to our blawg page. All right, so this is our new block page, and right here you can see the best WordPress theme ever. This is our featured image right here. And if I click on this is going to show some text and include that other picture that we had and some more text. Now these right here, guys are widgets. So let's go ahead and talk about this before we talk about the advanced builder. So over here, under widgets, just like we did for the footer section. Guys, we have a sidebar. Right? Here's you see sidebar. How? Over here we have the recent post recent comments, archives, etcetera. So let's go ahead. And just maybe, you know, delete these wouldn't really need these. You know, our cars, maybe categories. Meta. This is what it comes with default, guys. So let's say you want to add in like the Facebook like box. You're gonna go ahead and just drag it up here and simply just go ahead and see if I can get the like box from the other from the other ones right here. See if I can drag this one over here. Okay, so I'll drag in this one right here, the Facebook like box. So I'll go ahead and delete this one. Okay, So, basically, guys, all that it was just create the Facebook like box, and I just I stole the Facebook like box from our footer area and I just put into our sidebar. That's it all I did. And right here, guys, you can add in stuff like an email subscription plug in Or, um, you know, there's just of a Twitter feed on instagram feed. All those plug ins that we talked about earlier. They will create widgets. And you can just add this to your sidebar guys. Now it's up to you to sort of decide which plugging you want, and you know which one actually works. So I set this right here and let's go ahead and click on Save now. Okay, Now, let's go ahead and go back to our site and let's go to with Blawg. So there it is. Now the follow me there sign is there and we have a search bar right there. Okay, so if you guys want this right here, guys, all you need to do is go ahead and just search for the plug and you would like and just drag it over to your sidebar. And that's it's just drag and drop. It's really, really simple. OK, so we create this block post Now, this is the really ugly boring Blawg post. Never gonna. My website This is my block post my block page and you guys can see it's beautiful. And these right here are all different styles. So right here my goes to this block post, and it's just really beautifully designed. So right here I added in, like, email subscription right here. I added in an affiliate, Benner and right here, affiliate banner. And then this is my Google text ad. Okay, so you guys can see right here. It is a really nice looking, um what's it called, Page. It looks really, really good. We have a bunch of pictures and it looks really, really nice. Okay, so if you guys want something like this right here, um, there are pre made layouts for block posts on my website, Of course. So, under Devi layouts right here. I do have custom block post right here. So this right here is gonna be day V blawg layouts right here. Okay, but let's talk about how to actually create a separate blocked page instead of using the one DV gives us. We can actually make our own. Remember, we don't have to use the standard theme settings So I go over here to plus new and create a brand new page. Now I'm gonna put Advanced Blawg, and this time we're gonna use the divvy builder. Now, right here. We can actually go ahead and just, you know, create something that we want. So right here under this setting right here, I'll put in one and I'll go to insert module and we can add in the block module right here . So, you guys, this is the back and editor so we can use the front and editor as well. But this is the back and editor. So if you want to use a friend and editor, you could go to save and exit and go to use the visual biller. So let's go ahead and do that. Okay? So this is our current page right here. Now, I'm gonna go to this gear icon, and so, you know, I don't want full with. I want Gridley out. So I see that we have this different style of blawg post right here. So, you know, we can, you know, go to these options right here and takes himself out. So show the author I wanna put no so I don't want to show the author. So Darrell Wilson now disappears. Show that featured image. You could take that outs. Show excerpt Show extra is basically the content right here. The content. I'm sorry. At the bottom right here. And right here we can show the dates of when this was published. Right here is January 19th. But if I take this outs, it is now history. It is gone. Okay, so these are some other options that you guys can have. Guys like show you know what you want or featured image overlay as well. You can add that as well to your, um, to your site. So right here we can add in the overlay color. We got something like like, blue or something, or whatever you'd like. And we can add an icon overly color. So somebody hovers over it. Now you can see that this icon color appears and the color that we put right here applies there. So we want to make a little bit transparent. So if I hover over it now, has that dark tints to it? You see that? And also for this color. Guys, this is the icon color so right here. Maybe you want it white. So the hover over, It's now it's whites. And of course, you can always change the icon by clicking on any one of these. Okay? And then it's going to load up. And there you go. Okay, So this is a much more customizable wake heist than the default settings. Okay? And right here, you could put read more button. That's cool. You know, the read more button, that's that's always get to have. And then, of course, on the design, we can go ahead and change the font guys, we can use a drop, a drop shadow right here, all adding something like, you know, our m o. So you guys can see the fonts is now changing something like, uh oh, that is so ugly. Crimson text. That's little bit cooler. And we'll make the fun little bit bigger. Maybe really, really big. Something like that. And the grid title color, we can change this color right here to something like, you know, whatever you'd like. Okay. And of course, right here is like the same thing. Guys, the you know, the text color of the letter spacing the line height, etcetera. Okay, so you can have fun with these options right here. And you guys remember, You know, you can add in more modules. You know, we can add in something like, um, you know, I didn't like this right here. We'll add in a small icon. Now you have to follow me, guys. I'm just giving you an example of what things you can do. Like right here. I'll just add in like a text, a text phone right here. They will put something like, Well, center this and put like the best blawg ever. Okay? And then for the design, I'm gonna go ahead and make this really big. And then I can just kind of, like, drag this up here and, like, maybe put this on the top and to sort of introduce our blawg. So because there's a lot of different ways you can sort of create your own blog's So right here under my website, I'm sure you guys what I did, I basically just created this section right here. My blawg. I basically put in three text fonts. And then I added in a background color right here, Okay. And then I increase the padding right here. So I'm actually going to enable the visual builder and just kind of show you guys the backing on my website. Okay, so right here, you guys can see I can make this bigger. I could make this smaller, and I just added some text right here. So if I go to this gear icon, I use a text module right here, and I just basically put my blawg right here and then under the design, I kind of just made this content a little bit bigger. OK, so that's basically another way how you guys can design the block page guys, there is, You know, it's limitless. You can add in pictures. I mean, whatever you can possibly think of, just like we made our other pages. Guys, you can do that for the blog's section. So, um, let's go ahead and give you a quick example. Now, you're not to follow me here, but I'm just gonna go ahead and publish this page and give you another quick example of how you can sort of add this to your home page. So we go to my home page right here, and actually, I'll go to my other website right here. So all votes to our home page, and this is just giving you guys ideas. You know, you don't have to follow me here. I'm just showing you different methods of how you can add the block to your website. So one down here, Maybe I want to add the blawg right here. All right. So regular, this section and then click on blawg. Okay? And I want the grid. You know, I don't want the full with. So now all your block posts will appear right here instead of your blog's page, and you can add it like a title right here that says, like, our blawg page or are recent posts and sort of get creative with what you want. OK, so that's basically a quick rundown guys of how you can, you know, use the block module to sort of mess around with the settings and to add the blawg wherever you want, cause a lot of themes are very limited. A lot of themes make it so you have to post on the block page put. Of course, with Debbie, you can do anything you know you can add in the block wherever you would like. And you can be extremely customizable and add it wherever you'd like. Okay, So, guys, the next section we're gonna talk about advanced blawg posts about how to make really, really cool block posts and make them a really good in the next section. So I'll see you there. 21. Blog Advanced Section: already, guy. So in this next section, we're going to talk more about how to make advance pre made blanc posts. Okay, so just like my website I had I had those really nice block posts. I'm gonna show you guys how to do the same exact thing. Now I'm gonna go over here to plus new and go to post, and we're here. I'll just something like the best night sky. Now, instead of using the basic builder right here for the theme, we can actually use the Davy Builder right here and right here we go to load from library. And there's a lot of pre defined layouts, but guys thes air for pages. So these are not for the block posts. So just like we did pre, mainly out earlier, thes air for the pages, not for the posts. Okay, so right here we go to add from library and guys. I've already added in the article. Now I got this from my website right here under the Davy Blawg layouts. But you guys can, you know, make your own. You don't have to use this one, but these the ones that elegant things provides for us. So these are free layouts, and I'm gonna go to load. All right, so this is the back and editor. So basically, it's saying, OK, so this is how it looks, etcetera. And, um, you know, if I want to go ahead and view this, I'm gonna go to preview. All right, So now this is my new block post, guys. So it's a lot more advanced. This looks really professional. It looks really, really clean. And all of you guys need to do is just go ahead here and, like, you know, change the text and put in whatever you'd like. So I'm going to click on enable the visual builder here. Now, let's say you want to add in your own stuff, you know, right here, you can add in your own title like this is for dogs are blawg or whatever. And you can I just go ahead and just, you know, change the modules, add different modules. So basically, what they did was they basically just added in ah, bunch of modules right here, like the divider, the tax, the image, the tax, the text. And they basically just created their own little, you know, a page, and they just kind of made it look like a blawg post. So there's a lot of different layouts. There's three different layouts that you guys can choose. And it's just a really beautiful way to sort of, you know, creates a block post instead of using the standard one that the theme comes with. Okay, so that is a little bit more about the block posts. And also, guys, you know, you can actually just go to, like, load from library and, you know, just use another one right here. So these are their basic layouts. These ones are really not that good looking, but I think they have something like, I think they have something like, uh, like, Let's see, right here. I think they have some just for the blawg, which is like, um, a page full with See how that looks. They got a bunch of them guys. They got a bunch of layouts. I haven't even gone through all of them. So this is like another, you know, style how they have your blawg posts right here. And also, if you want to get rid of the sidebar right here, you don't want it on your block posts. You go over here to these settings right here. So the page layout right here, we can do full with. And let's go ahead and previous. And now it's full with guys. It will remove the sidebar for you. Okay, so you don't want that section, You can go ahead and delete it right here under the page layouts. You can have the sidebar on the right side or on the left side. You can choose to hide the post title, etcetera, and all these fun little the post settings. Okay, so I've shown you guys, That's now one more thing I want to show you guys is the default layouts that comes with Debbie. So over here, I'm gonna go to plus New, and I'm going to go to page this time. Okay? So just like we made those pre made layouts earlier, Devi has their own pre made layouts. So I'm gonna put pre made layout and go to use the visual builder. I'm sorry. Used the ah Davey biller, and right here we go to load from library and guys. All these right here are pre made layouts that Devi has created automatically for us. So right here, I would do something like, uh, sales are creative agency and go to view. Okay, now, this is the pays they created for us right here. Okay, So they've added in some cool features, and, you know, it's just something to help you get started with. It doesn't look the best, but it's something nonetheless. No. And they have all sorts of premium loud. So you guys can shoes. So again, going from load from library, just simply grab one. That's to splash page this time and go to preview and looks like this right here. So I mean, there might be a reason to use this. I don't know why, but ah, it's it's nonetheless, it's a free layout, and they've actually done all the hard work for you. And if you want to save it, guys just going to click on Publish and remember, you can change it at any time you want, even if you publish it. So my click on publish here and now I bet you're thinking, Oh, it's safer. Good. It's a you know, you can still go to load from library and just, you know, choose another one and say I want the landing page. I'm a go to preview now, so this is their landing page layouts. You know, these right here are basically just stock images there. Just know they're waiting for you to put your image there. So that's why they kind of look like that. But it's just creating a structure for you guys is just trying to help you out. Just give you ideas on how to use it. Okay? And then over here, update and that will save that. Lay out. Okay, so that's basically you guys for this section with the advanced block post and everything. When you make a block posts or use the layout, you don't have to use the options for the block post, guys. So under the post section right here, you can use the Davy Builder instead. You know, I'm right here. You can add in a module just like you create a page so you don't You're not limited to, you know, follow. Um, the themes, instructions you can get creative and make whatever you'd like. Okay, so that's about it. Guys for this section, And I hope it's helped let me know, you know, if you guys use your own layouts, you know, I actually actually sell layouts on my website. You know, I create my own and I sell him, you know, because you can export it. So once you guys create, it's you go to, like, enable the visual builder right here, and instead of actually importing it, you can export it so you can export this to any other didi websites. So under this little purple icon right here, you go to this little plus thing right here and go to export and go ahead and give it a name. So it puts page one and go to exports. Okay. And then you're going to see that this section right now is going to export the page, and it's going to basically let you save it onto your websites. Okay, so, you know, I haven't really saved this section, so it's probably not going to work properly, so I'm gonna go ahead and save at first, but that's basically how you can export your own layouts. Guys, it's really, really easy. And, um, it's it's just amazing what you can do with Davey. Okay, so that's about it. For the section guys. You guys have any questions? Also, you can actually also export it from right here, so exported. And then you can actually, you know, export its and then you can save its whatever you like, and then you can import it to another website. That's Debbie. Okay, so it's really, really cool. And there it goes. It's saving now. So you guys and see a page one so I can import this to any website. Let's go and do that. Now, let's go ahead and do this. See? See? Right here. So under the page one. Okay. You know, guys, No, I'm not gonna look for I'm way too lazy, but that's basically how you import exports layouts and you can you know, you can make a pre made layout, guys, and then sell that website to somebody else. So ah, lot of people do that. I do that. A lot of companies, that's all they do. They just create layouts and they sell them. OK, so it's a great business to be in if you use the divvy payment. Right? So then that guy's finally, you know, that's about it for this section. And I'll see you guys in the next section 22. Creating A "Meet The Team" And Custom CSS: All right, guys, welcome back. So in this section, we're going to do they meet the team, and I'm also going to introduce you all to custom CSS. So for those beginners who have no idea what custom CSS is, it's sort of code that you can add to the theme that will make it do things that the theme could not normally do. OK, so this is an example right here of custom CSS. I've actually placed this in the center because by default, it does not give you the option to do that. So I'm going to go run you through of how to create really beautiful pages that look like this and give you ideas and, you know, inspiration on how to create really creative and really nice pages and also used TSS. Okay, so going over here, I'm gonna go ahead and goes to our team, and I'm gonna go ahead and create this page right here. So I go to enable the visual builder and let's go ahead and first we'll add in a little text module. So right here, I'll go ahead and use this blocks. Why not? I'll go ahead and do, plus and I'll go ahead and admit text module and I will put something like, Meet the team, scroll down out of something all center. It's and I'll put meet the team, Alright. And then we'll go to design right here, and we can change the header font. Something like, um I'm sorry, the text font. So we'll change the text font to something like, uh, something a little bit more professional Will use railway. Okay, so out of that in. But we might want to change the design or the size of that, so basically, make this a little bit bigger. Okay? Now, below that, I want to add in a divider. Okay, So I'll show you why. So right here, we'll add a divider. So what is the divider? Well, the divider basically create space, but it also basically adds design. So I added a block divider right there and the visibility. I want this to show. So what the divider really does, basically, is that it pushes the page. It creates space. So if I put like 500 it's going to create 500 pixels of space, so it basically just create space. However, I am just using it for the bar. I just like the way it looks right there. I don't really care about the height right there. Okay, but I'll give you another example of height in just a little bit. Okay? So I go to save changes, and I go to this next section right here, and I'm gonna go ahead and add a new row and add in three columns, and I'm gonna go ahead and add in the person. So right here I put Darrell Wilson. Ah, yeah, there are well saying it'll put WordPress designer and I'll go ahead and put in a picture. Of course, this is That's not me. This guy's way better looking to me so a lot in this guy right here instead. Okay. And for the text color leave, it's now for the your all of your facebook you're gonna entering your you all of your facebook fan page. So, you know, whatever you are, all it is. You are all guys. Is this section right here? So, whatever shows on your Facebook there, you're going to just copy that and you're gonna pay. Sit right here. But for now, I'm gonna put this little number sign. This is just default for, you know, adding this stuff in right here. Okay, Now, over here. Gonna put some description. So I'm gonna go to my famous websites, my secret website, and get some dummy text. All right, so go ahead and grab some dummy text and paste it in right there. Okay, Cool. Now we're going to design right here. And, you know, we can change how everything looks, guys, you know, we can have like, ah, an icon color. If they hover over its right here, we can change the header font. So maybe something like railway gotta keep it consistent, right? Gotta keep it the same and all. Adan's, you know, a bigger font like that. And, um, we cannot ah, line height right there. Make a little space out, okay? And the body fonts. We can change that to something like railway and the body text color. Maybe a little bit darker, or actually change all to white. Okay. And explain why we're gonna add a background to this. And the background is basically going to be like a dark color. So going back over here to this blue section, remember this section controls the entire page guys controls this entire section. So I want to go ahead and add in a background image to this and maybe something that looks like this right here. All right, so you guys can see it starting to look pretty good. Now, here. I was gonna go ahead and copy this and drag it over and copy this again and drag it over. Now, meet the team. Appear guys, this is really, really ugly. I'm gonna changes to whites, all right? And of course, the divider right here. We might want to change out to White as well, because it just looks better with the pictures. So right here, I'm gonna go ahead and change the picture of this guy. So image you are. Well, I'm gonna go and upload. Just select one of these guys and discover it here. We'll go ahead and select a different picture of this guy right here. Okay, so we have these, You know this section right here? It looks pretty good. And over here on two other website right here, I'm gonna go go back over here to our team. I'm gonna show you that comparison. So we have these three boxes right here. But it looks very different. You know, we have a black background right here, and these air centered, etcetera. So let's show you how to accomplish this effect. So right here, I'm gonna go to this icon right here, and we go to design, and we go ahead and scroll down. Just keep scrolling. Just keeps growing, and they have a background color, so we're gonna use the background color of something like black. Okay, so we're gonna use black and right here. Same thing. Go ahead at in the design of black. Gotta keep it consistent. I got to make them all. Look, uh, got to make them all the good. Okay. So also right here, background color is gonna be black. Okay, Now, I want to basically start slanting this. I want to sort of achieve that effect that we had so over here into the gear icon, I'm a go to design, and I'm gonna go scroll down, Just keeps grown, Just keeps growing to custom margin, and I want to add some margin right here. I want to create some space right here, so that something like 50 pixels okay, so I guess to see it starting to push down because we're credit gave margin of 50 pixels. And over here, I can't want to do the same thing. Maybe around 100 pixels, right? It's at 100 pixels. Okay, so you're that kind of slanted. Cool. Look right there. Ok, now I want to center this text and this and this and this. The problem is that Devi does not come with a center text for this person module. So how do we change that? Well, there's a few ways we can change that. Guys, we can actually going over to this website. No, guys, I actually have a custom CSS for you guys in the article before this lecture, and you will need that. So if you need it right now, go ahead and go back. But I'm gonna go ahead and grab it from the other modules from other websites. All right, so I'm gonna go ahead and copy this really quick. All right, I'm gonna go to this one right here first. Okay, So over here Now, I want to add some custom CSS so the CSS what? This will do this foxy. Create an overshadow it'll create like a shadow around it to kind of give it a really nice edge. Okay, so we'll go over here to this gear icon, go to CSS, and I'm gonna paste this code in the small element in the main elements. Now, you can see it has that shadow right there. So it kind of looks a little bit more prestigious, and you guys can get this code from elegant themes. I will actually put this in the, um, the lecture before So you guys can just go ahead and just, you know, grab the code and added to them. So here goes to the gear icon CSS and Main Element. And right here again, same thing. So you guys can see that writing design that the theme could not normally give us right now . I want to center this. Now, this is a little bit easier to understand. So over here we have this text aligned center right there, So text align, Center. This is just basically a command that you're giving the theme. So I'm gonna go to this gear icon. I'm a go to CSS and under the member image, not the image we can have this for the description as well. You go ahead and pace this in there. So what I'm basically saying guys is I want the text to align to the center. Now, I could change us to the right as well. See how I'm sort of forcing the theme to listen to me. I'm I'm basically deciding, you know, I want the text to the center. You can use custom CSS to achieve results that the theme could not give you. So So I'm doing like this, you know? Let's go ahead and just add this to the title right here. See how now only the title is aligning to the center. No member position. I could go ahead and paste that there as well. Or I can say, you know, the member social links. I want the social and also to the center. But maybe I wanted to the right. So I go and say I want these to the right. So you understand how CSS kind of works your overriding Basically anything that is in the theme. So you're basically giving it extra commands? All right, so over here, I'm just gonna go and say you know what I'm gonna go ahead and just post this and the member description. I'm sorry. In the November description right here. My pace, it there. Okay, so now everything is centered, and it looked really, really clean and good. Okay, Now, let's go ahead and do the same thing for this section right here. So over here, under the member image. But go ahead and place it there. I'm sorry. Number description. The member description of guys. Okay. And the last one right here. I'm going to push this in the section right here, but there you go. Ok, cool. Now let's say you want this bar minimized. Now. You cannot do this alone. You have to have custom CSS. So I'm gonna go to my other website right here, and I'm going to get the custom CSS now, Guys, this is also in the article for you guys, Um, before this lecture, if you guys need it, so just go ahead and grab. It's gonna go ahead and grab mine really quick, and I'm going to show you basically how to use this. Copy this. All right. So I'm gonna go ahead and save this page now, and I'm going to try my best to help you understand what the CSS actually means. OK, so we're going my dashboard right here. I'm a go to divvy and go to theme options. Okay, so basically the custom CSS in the theme is basically saying I want apply this to the whole theme. So right here you can see that we have the divider module. So right here is the command for the divider. And right here is the with. So how big do I want the with to be? Well, I'm telling it, I want at least 30% and auto means I want it in the center. Now I can put to the right, but I choose to have it in the center so you can also do auto for center as well. Okay, so I'm gonna save it's and I'm gonna open up the website under a different page and go to our team again. So you guys can see that this line is now smaller. Now, if I change this right here to something like 50% it's gonna get bigger. I'm going to refresh the page and now it's bigger 23. Meet The Team Cont..: And if I do something like 10% it's gonna get very small, okay? And go over here and refresh the page. Now it's very small. Do you see that? So it's just a design that you can add. And I'm using the divider module not to create space, but to sort of add the core, right? So I'm just being very customizable with Devi and just sort of thinking outside the box here. Now, let's go out and say OK, so we have these know these these guys right here, But I kind of wanted to look a little bit something Mawr like Like this. Right here. So how did I do this? No, I I bet you guys know how to do this. You might remember how to do this a little bits, but I'm gonna go ahead and show you guys how to do this. So I'm gonna go ahead and just, uh I'm gonna copy this guy and this guy and this guy and, um actually, I need to create a new row time ago, two plus new and add four right here. Close this. Now, I'm simply just gonna go ahead and drag these guys onto the new role right here. Okay. See that? Take this guy too. I'm stealing them. Go and put him over here, and I'm gonna go ahead, steal this guy right here and put him over here, and I'm lazy. I'm just gonna create one more, and I'm gonna drag this and put it over here. Okay, so we have this row right here. You know, I'm gonna change this guy's picture. I don't want to have the same guys. So I'm gonna go ahead and change this guy's picture really quick to this guy right here. All right, so we have this new role right here. So how did I achieve this effect? Right here. Well, I hope you guys can understand. Just by looking at that box, we have to make it bigger. You know, the box is not big enough. So I'm gonna go to row sitting right here and go to make this fool with. Okay, Now, remember what the gutter with does the gutter with basically squeeze disease together and make sure there's no room. So I go ahead and click on enable the gutter with I'm gonna change this to one and go to safe so you guys can see that there is no space right here. And how do I determine if these pictures, you know, how do I know that where they're relying that, you know? How do I determine that? Well, over here in this gear icon, go to design. Remember how we messed with a custom margin before We're just gonna do that again. So under the custom margin, I'm gonna add this one as 1 50 So now we have this really cool, slanted effect of the margin right here. Okay, so we've added custom CS to these pictures right here, and we've actually also added in the background shadow. You guys can see it right here. It still applies. So it's it's going to stay with it and the background. That looks really, really nice. It looks really cool. Now, if you guys just want a basically a line these together, just don't put any margin. So on this gear icon right here, we're gonna go to design and I don't want any margin this time. So I want to put zero This one right here. I'm gonna put zero. I don't want any margin. I don't want you just don't want you to push. I don't want you to do anything. And then over here, same exact thing. The design. I'm gonna put zero. Okay, so this is another effect you guys can have, but let's just get a little bit more creative. Let's go ahead and say OK, we've done that. We've done this. How did you do this? You know, how did I just create this right here? Okay, so going over here to our website, I'm gonna go ahead and just duplicate this guy. Well, actually, no. We're gonna create a new row. So I go to plus New and go to two this time, and I'm just gonna click on X, and I'm gonna simply just copy this and borrow him. My copy This and I'm going to simply take this guy and just drag it down over here and then over this guy. Take this guy. I'm gonna borrow him too. I'm just there. I need to borrow your body. I'm gonna take you over here, okay? And I'm gonna duplicate this guy and dedicate this guy. Now. Why don't duplicate these two guys for us? Because this is all in the same box, guys. So this is all a new module? Basically. Okay, so I want to basically keep that. But I want to basically, you know, I want to add in some more space right here. So let's use the divider module again. But this time, let's use it for its regular purpose. Someone go to plus new click on this, and I go to the divider module. All right, so the height right here, how much heights you want? Well, 300 pixels. So you see how the divider right here is creating space? That's what the divider does. That's what it supposed to do. However, over here, I just strictly used it for its design. I really didn't care about what it does. Okay, so going over here, we have these images, but, you know, I don't want any any space right here. You know, I don't want any space between these, So I'm going over here to this section right here, and I'm just gonna basically take the gutter with and reduce it to one. And there you go. Now we have this beautiful effect and you guys can add, like, you know, meet the team right here. So I'll go ahead and just, you know, duplicate this whole section and just drag this section now off to the bottom right here. So I'm holding it and I'm scrolling. And there you go. Now, we now have a new meet the team section. Okay, so this is a really creative way that you guys can use CSS. And also add in, you know, some different styles and different, you know, ways to add and Devi. Okay, so I hope this section has helped you guys kind of understand custom, CSS and, you know, just modern style. Beautiful websites like this is really modern guys, this is really good looking. And for a beginner, if you're making this kind of stuff pyres off on the back because it took me years years to make stuff like this. I was making stuff that was so ugly when I first started, and it took me a few years and I sort of, you know, developed. And now I can understand different styles. Okay, so that's about it for the section guys. I hope this has helped you guys understand custom. CSS. I have some articles about custom CSS in the article before to help you. You know, further reading and stuff because I don't want you just to stop here. I want you guys to be able to create anything that you can possibly think of. All right, so that's out for this index section, guys, we're going to talk more about. What do we got next? We've got the home. The balance. Okay, We're gonna do the contact us. Now we're going to the contact. This guy's all right, so I will see you all there. 24. Creating The Contact Page: All right, guys, Welcome back. So now we're gonna do the last page, which is the contact us page. And I'm gonna kind of run you through what models I use and sort of help you visualize. You know what you can create with Devi. So this right here I use the fourth header, and I just said, not at a button. Right. And over here, I added in three blurbs so blurred one blurb to blurb three, and I added in my icons, and I made him all the same color right here, added in a call to action section. And right here I added in a contact form, and we will talk more about contact forms in this section and sterling down here. This is a full with map, okay? And right here this is our custom footer that I uploaded and that we talked about in the other lectures. Okay, so let's go ahead now and create the same exact page. So I go to contact us and enable the visual builder and also guys after the lecture, we're going to talk more about mobile optimization, and that is extremely, extremely important. Especially after Google launched its new mobile optimization as CEO update. OK, so I'm gonna go to this plus new section, and I'm gonna kind of speed it up this time because I think you guys understand what You know what goes on now. So go to full with full with header, and right here when it puts contact us, get in touch, and I'm gonna place this in the centre. I'm gonna make this full screen and go to close. Now, I'm gonna close this other section right here, and I'm gonna go ahead and add in a background image so we'll add in something like, Ah, this is these are all pretty cool. Now that does not work. It's too big. OK, so adding something like, um, let's see right here. This right here. Okay? And over here, I'm gonna go ahead and say, All right, you know what, guys? I want to go ahead and change this this font right here, or make the design. So when it goes to my, um my title font color and also the sub header font color and I want to make these a little bit bigger, I'm gonna change this to railway. All right? And I'm going to change the subheading front also to railway, and then we're gonna make it a little bit bigger, this one bigger. And in this and up here a little bit bigger, and maybe I'll make it bolt. Okay. So also, I can add the, um, the header spacing in between. But I I'm just choosing not to just because you guys probably already know the line spacing right there. Okay. Over here, I'm gonna go to plus new and go. I'm gonna click on this little there goes All right. So regular right here and gonna click on these three and not simply added in a blurb right here. So we hear a lot in something like, um Well, Adam phone and I'm not gonna put a girl. And I want to use a Nikon and this icon. I'm gonna use the phone. I'm gonna find the phone right here. I know it is here somewhere. You guys probably ready. Saw it. I'd probably pass it up. Or is it or is it whoever wins first? See? See if I can find it here. I know they have a phone one. I just I just can't find it. so there it is. Okay. And I want to change this to something like black. Okay, Now I'm leaving at the top, and I don't want the animation. Remember, the animation is like, from right to left it just like a small animation. And then right here, I'll go ahead and type in something like, You know, this. I'll go to my secret website right here. Secret website. This is the secret website, and I'll just go ahead and throw in some dummy text right here and paste it in. Okay, Now, I'm actually gonna do something a little bit different. I'm instead of actually, you know, creating another modulate here, a text. I'm just gonna go ahead and put space right here, and we'll do something like, um, well, adding our phone number 1 800 Okay, so we have this right here, and, um, I'll go ahead and take this section right here, and I'll make it's a different color. Something like Ah, read. Okay. You can add it like a red color. Some like that or whatever. And let's go ahead and align this section, you know, make it a little bit neater. Okay? And go to safety. Nor actually, Now, let's go to the design right here. And, you know, we can, you know, mess with the designs. You know, weaken, Go to something like the body phones right here, change the body, fall into railway. Okay. And also add some ah, line height right here. Still out on the line. Hi. Like that. Perfect. Okay. And also, you guys can change the size of this. This the icon as well. So don't forget, you can always change that. So I click on this right here, and I'm go to duplicate and drag and drop and duplicate and drag and drop. So over here, you might want to change this something like email, write email. And then over here, we'll put something like, um, let's see what we should put. What's What's the email one. Does that work? Hmm? I don't know. It's close. I know. They haven't email one. Let's see, Right here. No, that would not work, right? I don't know. That's okay, but it's just not really what we're trying to accomplish. So email or I was gonna at a time like this right here, okay? And then right here on the bottom section on the red. We can probably put something like, You are our email, you know? And then over here, we'll put something like our maybe our location, our address, and then we'll change. This is something like, you. Find an address icon, right? Find an address or like a house. We should find a house. I think the house will work. Let's see here. Okay. And then on the bottom, of course, we'll put in our address right here. You guys can change this color to something like, you know, dark or something that maybe this have like, a gray, and it's like a darker color. I'm just using the red just for two. Tolbert's guys I know looks really, really ugly. But I'm just trying to, like, you know, explain. You know what it does. So, um, yes, I'll go ahead and change the section right here to like, uh, I don't know, Los Angeles Road. The Atlas Endless road. Okay, so that's basically this section guys that we created right here. I just basically use different font sizes. And, um, that's basically all I really did was just I made the icon a little bit smaller, so here. I mean, the icon a little bit smaller, but no less. Guys is basically the same thing. And over here, I just added more line height, but I kind of like to start a little bit better. I mean, this is a bit more hip, I guess you can say OK, so in this next section right here, we're gonna go ahead and create this next section. So I go to plus new regular, and I'm gonna add in this one right here and simply add in a call to action and put something like, um, leave us your information. And also, guys, whenever you do you like them like this. Make sure the first letter is always capital. It just looks good. And that's just what everybody does. Really. It's just the way it goes. And I don't write the rules. I just kind of play the game, you know? So we're gonna do tax color is dark, and right here we got something like, um, well, get back to you and for the design, maybe want to change. This is something like railway, you know, keep it consistent. We had a little bit bigger. And also for the body phones as well. We can add something like railway. I think it looks good. Okay. And the next section, we're going to make a new one, or we can actually put it right here. It doesn't really matter. We can create a whole new section to put a contact form or added in this section. So I just go to plus new go to this one right here and add any contact form. Okay, So the conduct from guys is a little bit different. So right here we have name, email address, and you can add in more like right here. We can added something like, uh ah, you know, whatever you want right here, like cell phone number or something like that. But I'm not gonna go really add anything in extra. So here I go to name Sofield. I d stands for your name right there. The title is the name. So the type is you have the input field, email or text area. So text area is basically for like, a message input areas for, like, a name. Last name cellphone. The email is their email address. Okay. Now, is this a required field? Does that mean? Do they have to fill out the name section? Is it required? You can put yes or you can put. Now, do you want to make this full with eso? What that does is that it makes this specific section full with, and you can have him awful with, you know. Are you going to say no? I kind of like how this looks. I want to go ahead and leave it standard. All right? Now for the design guys, of course, the customization are limitless. We can actually change the background color for the section. We go ahead and say, you know, for the field fonts I want to change this to railway. I want to kind of keep it consistent with my websites. So railway, you see the fun and there is now changing and the field text color changes something like white CNBC. It's white, and we can add in a next ra border. But, um, you know, if you want to add another border, you can add something like red or whatever color you would like. So that's what the border does. Okay. And of course, you got a border with the border. Can be dotted, dashed the border. The border has a lot of different styles, but it's really ugly with contact form. But I'm sure there are some reasons to use it, you know? I know there are no reasons to use it. Okay? So other that guys, that's basically the option for each specific one. So I was going over the email, so I have it right here, and we have input. 25. Contact Page Cont..: now and then. The title right here is the email address. You can put them like, yo, email here, Okay? And this type is email field. So this is where they're going to enter into email address, okay? And again designed. Same thing. You guys can design this section. Now, if you want to add a new section like, let's just say you want to add something, like phone number being click on at a new item and we hear a put phone and then my phone number and right here, put it input field. And, you know, that's basically I don't make this full screen careful with, and I kind of want to move this to the phone a little bit higher over here. You know, I want to make that, you know, a little bit neater. Now, we can make this full with guys we can say, Look, these this doesn't really look good. So let's just go out and say, Look, I want him awful with now because I wanted to sort of all match each other. So on the phone, I'm gonna make this full with and on the email. Make this forward as well. Okay, So now I kind of like, you know, looks kind of cool. And you can I kind of switched designs like this section. You can have dark. Why dark? You know, add, you know, flavor and decor to your design. You know, you don't want to leave. It's standard and boring. Okay, so going back over here now, capture. So what is a capture? Capture is basically things that prevent spam. So you guys, I get tons of spam people like, Hey, you want to buy my Viagra? Hey, you want to buy this This, uh, this computer or Hey, you want to get number one? All right. On Google or whatever that is what the capture prevent. It prevents automated bots. So I recommend to put its however you take it away, it will take away the capture. Okay. And email. So go ahead and put in your email on guys. If you have questions, just go ahead and put like, you know, just click on this. It tells you what it's four. So, you know, go ahead and put in your email address right there and the title of what you wanted to say . Like, you know, define a contact. A title for your contact form. So, you know, um, the debate team. So here. But the Davy theme contact form. Okay, Message pattern. You guys can sort of, you know, just added whenever you guys want. Also, you guys can always go over here and put this in right here and determine like what you want right there. So, you know, you guys can go check this out and, you know, put this. But generally I would just, you know, I would just leave it blank for default, you know? Right here. Unless you know what you're doing. I will just leave it blank for default. Okay, guys. So it's going down here, so enabled. Direct. You are well. Ah, you know, I wouldn't mess with this feature. It's a little bit more advanced, but this will basically enable them to a different girl after they fill out your form. So let's say they thought your form. What page you want them to go to after they fill out your form. Now the success message. What you wanted to say? So I put Yes, it works. See you soon. So once they felt the contact form, guys Where do you want to say on the success message? It's gonna say, you know, whatever you'd like, So I put See you soon, etcetera. And that is basically it guy. So this contact for my schedule, let's go to my email and I put the did he contact form and everything is basically, you know, on default for the message pattern. So it'll go straight to your inbox, and it works like a charm. It's really, really easy. If you have problems with this, it could be your hosting company. So first contact, elegant themes. Tell them Hey, my emails are not working or slash. They're going to spam seconds. If they say it's your hosting company, contact your hosting company and they should be able to help you out or figure out what is the problem. Okay, I'm gonna go to check, and that's it. We fill out the contact form really simple, really easy. Okay, so next we're gonna go ahead and add in the full with slight earlier the map, fourth map. So at new section full with and go to map. And we did this earlier. Guys, we already this earlier, so I'm gonna do the same thing, but Hollywood, um, our home, our home base. What's that? Justice League thing? Cold. Their their base of operations. I forgot. I gotta look that one up. So here, put, like Hollywood. See a Okay, so I found it. Now we're gonna go over here and put like our our hours of operation 9 to 5. Okay, so I found this right here, and then I'm going to click on check. All right, now, over here, we we need to center the map. So where do you want the map to be centered at then? So I'm gonna say Hollywood, California, and find it. And voila. So we got Hollywood, California. And if you click on this right here, our home base, our hours of operation and that is what the contact form is And also guys. So they scroll over its This right here disables that. So now they cannot do that, and they can just click on it. You can put in your address. You can put in whatever you'd like. OK, so it is pretty, pretty evil. I'm sorry. Easy, TIFs feasible. It's got salt, Dragonball. When my brain was like drag a bill plus this. Yeah, we're so I'm not gon check eyes and that's basically it. Guys, we created a full contact form. Very simple, Very easy. Okay, so stick around, guys. Do not leave this section editorial yet because you guys think Oh, I'm done. And I made the website. We're going to talk a lot more about mobile optimization and other features. Okay, so I will see you all in the next lectures. 26. Mobile Optimization: All right, guys, Welcome back. So here we go talk all about mobile optimization and also some additional features that Devi has to offer. So right here, I'm gonna go to enable the visual builder. And first we're gonna talk about the mobile optimization. So, guys, mobile optimization is extremely important because as of 2017 their arm or mobile users than there are desktop users. So you really want to make sure that your site is optimized for mobile. So clicking on this little purple icon right here, I'm gonna cook on this tablet icon right here. So this is how our website currently looks like on a tablet. So it's going and scroll down and see if there's any change that we need to make and what we can do to fix it. So scrolling down six. This looks good, you know? But right here, um, you know, I don't like the way this looks. And also the padding right here is not good either. So I want to basically change this section right here. So there's a few ways I can do this, you know, um, first, I'm gonna go ahead and say, Look, I want to, you know, move this text right here to maybe the center just for mobile optimization could on this gear icon right here and go to design. Now, my scroll down to the the header font size. So if I click on the little phone right here, you can see smartphone and tablet. Now, appear so right here on the tablet. You can adjust the size of this. Now, this is just for the tablets. You see that now in the smartphone? This doesn't look too good right here. This looks really messy. So we need to kind of fix this up right here so we can make this a little bit smaller just for the phone. And there you go. That looks a little bit more cleaner, right? Some of the gun check right here. Now, also the padding right here. The padding right here is not good. So let's go ahead and try to fix this right here. So I'm gonna go to the gear icon and I'm a go to design and scroll down to the bottom and right here we have the bottom. Then I'm gonna go click on the phone first. The phone is gonna basically control what this looks like right here. So I want to add some patting on the bottom right here. Something like 40 pixels or 80 pixels. Okay, so you guys can see that this looks a little bit better for the tablets. Now, let's go ahead and check out the smartphone. The smartphone? That looks OK, right? We have padding right there. Doesn't look too bad. I must go down now. Over here. We might want to change this section right here. This section right here looks a little strange, you know, it doesn't look too good. And also, there's patting issues right here as well. So right here. Click on the phone and you guys can see this looks good on the on the phone right here. But we might need to clean that up on the tablet. So here we go to this gear icon and go over here to design and the header font size. I don't like this right here, and I'm gonna reduce this for the smartphone. Just like that. So now you guys can see it looks a little cleaner. Now check on the tablet on the tablet. This looks pretty good. This looks nice. Okay, Someone going click on this Now, over here. We're gonna go ahead and click on this little gear icon, ambergris. Which this to tablet. Okay, so let's go ahead and clean this section up right here. So we have this patting resection right here. Someone go click on this gear icon and we're gonna go to design. We're gonna scroll down, Just keeps growing. We're gonna go down to the column One padding. Now, we're going to click on this, and we're gonna click on the tablet. So right here. You know, we needed we need to fix this right here. So there's patting on the bottom right there. So I'm gonna add zero patting on the bottom, okay? And then also in the top. Actually, I'm gonna go ahead and probably remove all this right here. And to see how this looks right here. Let's go ahead and delete. That's OK. It's being a little weird. Okay, so I'm gonna go ahead and add in a little bit more. Maybe 45. Ah, 47. 48th 49. Okay. 50 is good. 50. Looks good. Okay. So you guys can see I have taken out the top patting right there. And I've added in 50 right there. Okay, so this looks much better than what it did before. Right before. Look like crap. And it was really messy. Okay, so I'll click on check and scrolling up now. Guys, it looks much cleaner now on the tablet, something click on safe. Now it's just going to check out another page. You know, I have no idea what to expect. Let's go ahead and just x individual builder, A noble goats to something like, um, Services tab. And we'll go to enable the visual builder. And let's see how this now looks on the mobile device right here. Click on this right here and go to first. We'll go to tablet. This looks pretty standard. No, this was kind of clean. Let's go on the tablet. Okay. You know, I don't think there's much to change on this right here. So, you know, I think it looks good, and I will go to the phone, okay? And we'll scroll up right here. And this is basically how it supposed to look. It looks pretty clean. You know, we could make this a little smaller if you choose. You know, we can make this just we can make it on one line on the gear icon. I'm a go to design and I want to change the header font or the title font size. So we'll click on this and click on the smartphone and we can reduce this size right here. Now that looks a little bit cleaner, right? So you need to go ahead, guys, and make sure that your site is fully optimized for mobile and by clicking on the phone. That's exactly how to change it, cause if I click on save right here and I go back to something like the computer right here , you're going to see that the text font didn't change it on Lee changed for the mobile device. So it's not going to like, you know, change your entire website. It's on Lee gonna change it specifically for mobile devices. OK, do you want to go ahead and really make sure that this looks like it's supposed to? Everything looks really, really good. I don't really see anything on this page that we need to really change. Okay. So, guys, mobile optimization is very important and that is how you basically, you know, optimize it from mobile. Now, if there's a section that you don't want to show, let's say for example, ah, on this contact page, Let's go over here. I'm unable this this visual bullet right here. Let's say you do not want this section to show up right here. So I need to do is cook on this little purple icon or any icon, and you're gonna scroll down and we're gonna go over here and put disable on the phone and the tablets because I don't want people on the phone or the tablet to see this module. I don't want them to see it. So I'm gonna go ahead and say, OK, it's safe. So with that, what I just did was basically saying, If you're on the computer, you can see this section. If you are on a phone or a tablet, you cannot see this section, and I'm gonna go with you. The mobile device right here and ah, this looks pretty good. Or the tablet device. This looks pretty good and you guys can see now it's kind of gray, and when it's great like that, that's basically saying this is disabled for the tablet or whatever device that you choose to go to the phone now, Same thing. See how it's kind of great out right there. So it's not appearing on any mobile device, okay? And screwing up over here because he just kind of looks good. We might need to reduce the size of this, but, you know, that's also is a style, you know, you can say, Oh, that's kind of the style, But let's just say for Detroit represent, you want to change it, gonna go to our gear icon, go to design, and we're going to find the title font size click on Little phone icon and under the smartphone, we're going to reduce this. Now, this looks, this looks a little too big now, too. So we want to go ahead and maybe change that section as well. The subheading fonts on the smartphone. I'm gonna reduce that as well. So it'll look just like that on the mobile device. OK, you guys will need to go ahead and make sure that's optimized for mobile. If you do not want a section that shows, you know, um, that you just don't want to show on the phone of the tablets. Make sure to disable its because, you know, some some sections aren't really necessary for phones, you know, maybe like a very long, complicated contact form. Somebody might not feel that on their phone. I don't really know, but it's up for you to decide. But that's it for this section. Guys about mobile optimization. You really want to go through website and make sure it's optimized. And also, if you guys want to see previous changes you made in the past, you can click on this little, this little phone icon, and this is actually we'll load it to whatever it's like. It's like a history like a cash. So anything that you did, you could just go back to say, I want to go back to this section or this section. It's like a safe spot. OK, so whenever you think that you're having problems and you want to go back, just go to your history and check that out. Okay, so the next actually, guys, we're gonna talk about a series of other lectures I have included on other websites, such as video optimization for phones, because video sliders do not play on the mobile device, so I'll show you how to fix that in the next section. So I will see you all there. 27. Video Slider Mobile Optiimzation: everybody, It's Darryl. And today I'm gonna give you guys some quick tips and tricks with the new divvy theme. Three point. So now a lot of people were asking me about the video slider. So a lot of people like to have these big, beautiful video spiders that looks like this. But remember, these video sliders will not play on any IOS device. That's just the way apple has it. So if you have a iPhone and you go to this website, it will not look like this. It will look like a gray background, but I'll show you today how you can fix that. So, for example, if somebody comes for a website on a computer, it will look like this. Now we want to basically optimize it for mobile. So I'm gonna give you a really good tip and trick to fix this. So the first thing you want to do is actually just duplicate this row, so we're going to duplicate this entire section. So now we have to video sliders. Okay, Now, we're gonna go on this little gear icon right here, and I'm going to click this and I'm going to scroll down and I'm actually going to disable this on the tablets and the phone and click on check. So now this video section is on Lee playing on the, um, on the computer. It is not gonna play on any phone or tablet, so people will not see this section if they use a mobile device. Because you have been to those websites were like Skype or something, where you go to it on the phone and it looks completely different. Well, that's kind of what we're gonna do today. So this other section, we're actually going to kill this video background, and we're going to add in a either a background image or a color. So click on the gear icon. We're going to take out the video MP four, and, ah, instead of that, we can add and maybe like a background color instead. And remember, you guys can always test this by just using your phone. Just go visit the website on your phone to see if is mobile responsive. So maybe I want this blue background. No, something just pretty simple. Right. So now I'm going to scroll down right here, and I'm actually going to disable this section on the PC just like that. So now this section will only be played on the, um on the phone and the tablet, but people with a desktop will not be able to see this section. Okay, It looks like the background change a little bit, so let's change a little bit darker. It looks like that. And, uh yeah, so I'm gonna click on X now, just letting you guys know the logic behind this. So remember, this section will play on Lee on the computer, and this section now will only display on the phone and the tablet. So that's sort of how you get past the video sliders. Because a lot of people email me saying that video doesn't show what's wrong with the theme , as it is not the theme. It's just the technology for Apple, unfortunately, doesn't out how videos letters have you played on the phone. So that's how you guys fix the video sliders. I'll have more tutorials on TV coming out like next week. I'm going to have one about text models, and after that we will talk about, um, the image custom CSS. So I'll get to that. But that's all wanted to show everybody today. So I hope this helped everybody who uses those big videos fighters go ahead and like and subscribe this pidio. And I'll see you guys probably next week. See you later. 28. Text Modules With Mobile: guys, It's Darryl. And today may give you guys a quick tip for the new divvy theme. Three points. Oh, and I'm gonna talk to you today about how to optimize the text module for mobile users. Now, as of 2014 there are more mobile users than there are desktop users. So optimizing your site for mobile is pretty important now, unless you those crazy people at Starbucks that just kind of sitting on laptops all day and see all those packets of sugar. But most of us, you know, we check our phones when we're at work or at a friend's house, etcetera. So let me give you an example of what I'm talking about. So I'm gonna scroll down on my website right here, and I'm sure you guys have seen this, You know, like on your website. We have titles like this. So right here we have our recent work is amazing. We know I want to show you now how it looks on the mobile device. Okay, so I'm scrolling down and it looks like that it looks like crap. It's all cluttered. It doesn't look good. So I'm gonna show you today how to fix this. So first I'm gonna go back to my desktop, You and we're gonna go to that module, all right? And remember, you should be doing this on every header text that you have that introduces, like a new section. So this right here introduces this section and you know, this introduces six section, so I'll show you how to optimize it for the mobile and the tablet today. So the first thing you want to do is go over here and click on the gear icon and you want to find your texts? My Texas white. So you can't see. It's so I know it's right there. But you want to actually change this right here to the heading one, and you can actually design this. So going to your design. Now it's the header font and the header text instead of Thea Text font etcetera. So, for example, I can go over here and change the size. So now this part is controlling the header text. So I was gonna leave that blank for now. Leavitt, standard click on the check box, and now I'm going to see how it looks on the mobile device. All right. There you go. So it's fully optimized for the phone. Now check the tablet. There you go. So now it looks good on the tablet device and it's really important to do this for all of this sections that you have that introduce, you know, a new section because somebody asked me. They're saying it looks all come together. And I told him, You're not using the correct module, but, um, that's why I wanted to show you guys today. But I will be having more tutorials coming out, such as an e commerce David tutorial. But not until they kind of fixes of bugs and stuff like that. There are some things that are a little bit wrong. Also, I will be selling these D V layouts that's writes. I am creating probably four websites, you know, like pre made websites that you just import export to Europe side. It's pretty simple, so I'll be selling those later on, so be sure to like and subscribe and check that out. Other than that, you guys have any other questions regarding TV or anything you want to tell me? Feel free to put it in the comments section and I will do my best to get back to you so I'll see you guys all later 29. Divi Community And Careers: All right, guys, welcome to this lecture. We're gonna talk about selling layouts and stuff like that. So, you know, did he has gotten so popular over the past few years? There are companies that are solely dedicated to just selling divvy layouts. So basically, what these companies do is they just create child themes or they create Devi layouts and they just sell them full time. You know, instead of building a website for a client yourself, you can actually just go ahead and say, You know what? I'm just gonna go ahead and just buy it. How theme. Or by a layout. Just slap it onto some website for 100 bucks and charge them whatever I want. So if you're interested in kind of like developing your own layouts for Davy there is a huge market, for there are hundreds of developers that's solely create child themes and layouts just for websites. So over here we have these layouts right here. Now, right here. These are all free, but they're asking for donations. So over here and click on show details and I my view the demo. So this this website right here was created with the divvy theme. And this is a layout that you guys can just purchase or donate or whatever you want. So hundreds of companies guys have actually backed up TV, and they're so confident they have a business solely on selling TV layouts. Because, let's be honest, it's the number one rated theme. So if you guys you are interested in Web design or you want to learn about this business, you guys can basically create your own layouts, export them and just say, Hey, guys, I'm selling these layouts. You know what? You guys want to go ahead and buy these layouts because, ah, lot of people out there are selling them. I mean, look at these prices, like I'm selling these for maybe 15 bucks. Now, these are all really highly rated, and these include, like, you know, the home, the about the services, the contact page, and these other guys over here are doing this same exact thing. Now, instead of building a website for a client, guys, you guys can basically just purchase one of these Davey layouts or even sell your own to other companies. So I'm just kind of, you know, introducing you to the markets are not influencing you to buy anything. I'm just letting you know that there is a market for Davy Loud. All these pages that you see right here are Davey layouts there just websites that people just sit around and create all day and they just create layouts. And then after that, there, saying, All right, you know, I'm gonna go ahead and sell this layout, you know, And let's be honest for 75 bucks, that's a lot of work, you know, for someone to develop a whole websites for you and your clients or whoever your you know, your you want, that's going to save you a lot of time. And these are cost effective. I mean, you're getting a whole upside right here for $35. I mean, that's just unbeatable. Also on my website over here, you get a whole you know, a website for 10 bucks, you know, and it's not about you know, me trying to sell you on this. I'm just introducing you to the markets of what you can create. So right here I have this web sites, and this is a layout. And this late, I'm selling for 10 to 15 bucks. Now, I don't make that much money on it because, you know I'm not a huge company or anything, but instead of basically, you know, building your own website for a client wants a photography website, you're better off just purchasing a layout from, you know, one of these vendors and, you know, just slap it on some websites, and there you go. Now, if you want to sell your own, you guys can basically just create our own little websites and do the same exact thing these guys were doing saying, Hey, you know, I have a layout here I created, It's I want to sell it. You know, it's I want to sell it for 50 bucks and, you know, maybe offer support for, like, $10 a month or something like that. Or, you know, we'll give you the hosting or install it for you, etcetera. But I'm just trying to introduce you to ideas of There is a very, very large market for Davy. Have you got a similar Web right here? Similar Web, and we check out elegant themes, which is the company that promotes Debbie. These guys receive ah lot of traffic guys. So this is a very, very highly rated company. I mean, they get 5.2 million visits every single month. And if you go to websites like team, if I or something like that where you're like other companies, you're not gonna get that. You know, you're really not gonna get the community as well. So, um, if I it looks like it's not even rated, you know, and it has a very, very poor ranking. So other companies guys just aren't really, you know, up to par with Debbie and the community behind TV. You can just go ahead and just, you know, there's there's Facebook pages. There's groups. There's all sorts of really cool stuff for for the Davy theme. And you know, they have partners. They have companies. People create special plug ins just for divvy, because it's just so popular. And it's just such a amazing theme that companies out there backing up. Now, One company that I actually partner with is C. D B did the web design dot com. Now these guys actually have a really cool plug in, and I'm gonna fill it for these guys, and I'm not gonna promoted to you guys. But if you go to like their their store right here they have plug ins like extended cool plug ins that give new features just for Davey. So the divvy theme has a huge community behind it. It's not just one company selling a theme. It's hundreds of companies building businesses around Davie because it's just so amazing, right? And it's just it's limitless. You can create plug ins, layouts all sorts of stuff for this team, and you have such a large audience that people out there are willing to purchase it. They're willing to look at it saying, Oh, you made a plug in for Devi. What does it do? And there's tons of Facebook pages, guys, if you just go to Facebook just typing like Debbie themes, there's like five or six groups with, like, 30 or 40,000 people that just talk about Devi theme. You go on red, it's you go on any of those websites, they're gonna talk all about the Debbie theme, so I'm just kind of introducing you to the pre made layout and the potential and the support that you have with the community, because let's be honest. If you're gonna buy a theme, you want the best of the best and no other theme on the Internet does this? No other theme has companies that sell layout, plug ins, all this other stuff No other company does. That Davey is the only one that does this because it's just such a an amazing product. And everyone's like, I'm not using anything else. I'm just gonna use Debbie. Why would I buy another theme when I can create everything with divvy? Okay, So I'm just kind of introducing you guys to the markets and, you know, helping you understand the Devi theme, and it's fools potential. Now also, guys, remember, I do have free layouts over here. So you guys want to mess around with these, you know, and have fun, you know? And, you know, get a free free layout for, like, a church or, you know, a restaurant or Jim or a store. You know, it's on here. Okay. So I really want to help you guys, you know, developed your skills and whether you want to become web designers, you know, that's you know your path. Go ahead and take its or you want to become, You know, just a simple business owner wanting a simple website. Right here we have a free small business layouts of five page websites that you just simply upload. And after you learn how to use divvy, you can customize it to what you want. You know, you don't have to follow the same exact template guy. So I'm just trying to help you understand the potential behind Debbie and all these cool layouts in the community and the support that you have with Devi. Okay, so that's about it. Guys, for this section. Ah, I will see you guys in my closing sections. I will see you there. 30. The End :): Alright, guys. Well, congratulations. Do you guys have made it to the ends? Now? I wish you guys the best with, you know, WordPress and elegant themes and TV and everything that you guys do. You know, I understand that. What design is very difficult, you know, its not easy. Like you just see a website. It's not easy creating one, you know, thinking of stuff to make its a talent. And it's a lot of hard work. And as you do this, guys, you're gonna get frustrated. You're gonna be like, man, you know, this this is hard. You know? I'm gonna quit. You guys just be consistent with it, and I guarantee it. You know, by the end of date, you're going making websites. Whether you just want to start a web design business or you're a website owner, you just want to make one for your small business. I really hope this story helped you guys out. I tried to cover as much as I could. I do have others a Toral's. If you guys were interested in it regarding TV and other modules as well. But, you know, I just wish you guys the best of luck. And I truly thank you guys for taking my course. And I hope it really helps you guys out. So I will see you guys. And another lesson. Or maybe we'll see you on the street or something. I'll see you guys later in good luck.