How To Create A Wordpress Website 2016-2017 ( NEW Divi Theme!)

1. MAIN INTRO: Welcome. Welcome, everybody. My name is Darrell and all the instructor today at you to me. So in this course I'm gonna show you all how to build an amazing WordPress website step by step using the divvy theme. And I have helped thousands of beginners just like yourself, create amazing looking websites that looked just like this. And the reason why my lecture stands out more than others is because not only are we going to learn how to make an amazing website, but we're going to make it look amazing and beautiful with today's current modern day trends. So if you want to make a super professional website and super beautiful, this course would be for you because I would never teach somebody how to make an ugly website. There is no reason why anybody should do that, because remember people really by the website, they have a nice websites, they'll stick around. And in this lecture, I'm gonna show you all how to have really cool and elegant, you know, designs that brand new Web designers are starting to do. So if you watch this lecture, you're gonna be ahead of the game. You're going to be doing what brand new Web designers are doing straight out of the market . So we're going to be able to match with our competitors because trust me, there's a lot of other content that I've seen that people use old designs. They use really old websites, and there's just no reason why anybody should make a website that looks ugly. So in this course, we're going to learn how to make amazing websites that look just like this and you could be a complete beginner. You don't have any sort of experience. Like I said, I've helped thousands of people create amazing websites, and they all thought, Oh my gosh, I never thought this was possible Says it's that easy. Is that easy? Okay, so and this course I'm going to show you all how to build websites that look just like this now a little bit about me. So I've featured all over the world. You know, I received over four million views. I have around 15 million minutes watched, and I'm featured in around 180 countries, and this is my Lincoln and a lot of people contact me for advice or Web design services regarding the divvy theme because I do a lot of Web design, but I tend to specialize in the Davy theme. So I really know about it a lot about it. And this is my, you know, analytics. So I receive around 21,642 pages every month. And whenever somebody thinks the job cannot be done, they come to me and I do it because I know what I'm doing. And I will pass all of my information on to you. So you will be able to create amazing websites that look just like this Because, remember, even if you know how to make a website, it's really not that important if it's ugly, right, So you're gonna get like, a two for one deal here. I'm gonna teach you how to make a website, and we're also going to use the divvy theme which will allow you to make beautiful websites that look just like this. And we're also going to be using technology that CNN eBay used best buy All these companies use WordPress. So if you're branded a wordpress and you really want to make a website, this would be your ultimate solution, because I'm gonna teach you how to make beautiful websites that look, elegance that look professional. And all of these were created by me. So I'm like I said, I'm just gonna give you guys my knowledge. And this theme allows you to do a lot of features. You know, we cannot four K videos. We can add in all sorts of really cool stuff. So if you guys want to learn how to make an amazing wordpress website step by step, go ahead and click on the enroll and I will see you in the course. 2. INTRO: so I'm gonna give you a quick overview of what we're going to talk about. And you know what? We're going to learn in this course so really quickly. This is the visual builder for divvy, so you can actually make changes right on the website. You know, like I can put right here, you to me. And that is now how the Davy Theme works with websites. So it's very simple to use. And we're going to cover the visual builder in this, you know, like, for example, it has a dragon drop page builder, which makes it very easy to use. So, for example, this is they want to drag this over here and drag this over here. Now, you will never get this with another theme. So this is why the divvy theme is so popular. This is why it's so famous is because of the technology that goes into it. Now we're also going to use the back and editor. So, like I said, if you wants to maybe swap these around, we're going to, like, you know, push thes over there. Whatever. I'm gonna show you how to use every single module in this course we're going to first start out with the full with modules. So right here, we're gonna click on the specialty section. I'm sorry, the fullest section and I'm gonna cover first all of the modules. So right off the back, we learned all about the full with modules. So I'm going to go in detail on every single module right there next. After that, we're going to learn about the regular text modules. So I'm going to go over every single module in here. So you know exactly what to do about TV theme. I'm gonna give you guys quizzes. I'm going to show you websites. Like, for example, I'll show you this websites, and I'm going to say what modules do I use? How do I create this? So I'm gonna give you a little bit of experience first, and then I'm going to sort of start to, like, maybe strain your brain a little bit, so I'm gonna try to make you really understand. You know what models we used how to perfect the you know, the website. So you can look at a website and then create it. Now, I'm also gonna show you all how to you to pre made layouts. I'm gonna show you all how to use how to actually find images from other websites and use that. So I'm going to cover a lot in this course. And the reason why I'm doing that is because I want you to fully understand. And you know how to use the devi theme. Because I don't want you to leave this course wondering, you know, what else is that? What is this? What is this? I would never want to teach anybody like that. That's not how I teach. I teach very well. I want to make sure that your maybe even over informed I want to show you too much rather than too little. Right? So in this course, you're going to get an overview of everything Davey has to offer. I'm going to actually, like I said, give you quizzes and show you other websites. And I'm gonna say, How do I make that website? You tell me? Because after a while, I'll expect you to learn and expect you to know certain things. So I want to sort of test you out. So that is what the course will provide. You guys And like I said, after you watch this course, maybe you want to start your own business. Maybe you want to create a website for your, you know, for your own, You know, a website just for yourself. Whatever you want to use it for. Um, I'll help you get there, you know, just spend the timeto watch the lectures, spend the time to actually, you know, study it and and really learn, because ah, lot of other people. The reason why they don't succeed is because they sort of just watched my content. And then they stopped halfway. And that's her asking me questions. I say, no, you need to watch the whole thing and then ask me questions. So if you guys have any questions on any of the lectures, feel free to ask me because I am here to help. I can. You know, I can do anything with this theme. I can create any sort of website you could possibly think of. In fact, all these websites I currently made our mimics from other websites, and I'll show you in a later lecture on how to do that. Okay, so I'll basically give you the ability to like, look at a website and know what to do. Know what to add and know how to create it. Okay, so I hope you guys enjoy my lecture. Now, let's go ahead and dive right in and get started to the next lecture, so I will see you all there. 3. Bonus Material: how d d v designers. So right now, you guys, we're going to embark on a journey. You guys, we're going to create your own websites. But there's a lot of tools that I have for you guys. A lot of them are free and it will help you out along the way. Now, a lot of these air, including, like, pre made layout. So this video in the description you guys are going to get links to certain websites such as mine, where you're going to get access to free layouts. You're going to get access to the hosting plan. You're gonna get access to something regarding motion graphics like free video sliders and free stock footage to sort of help you guys along the way as you create your websites because there's a lot of different websites and really hard to get started. So I've actually included really reliable sources on where you can get your layouts. You can get all sorts of really cool stuff, such as really amazing landing pages. So these are just some resource is for you guys to sort of help you along the way to make sure that you guys are prepared and that you guys have the tools you need to make your website. And I'm also included my Dropbox, which I have ah, lot of other images and pictures and I'm actually going to require that you guys download this sort of teach you guys along the wakes. I want you guys to get it from my perspective, to show you how to build the website. And also, if you guys need a logo, I'm going to refer you to another website. We will talk more about the logo and more in detail may get there. And also to purchase the theme, I will include a link that will give you guys a small discount. Also, once we gets to the custom CSS section, I'll provide you with this page right here. And this will actually give you the ability to copy and paste the code and have really cool effects on your websites. And don't be overwhelmed. It's very simple to use. And once we get to that section, you guys will be Devi professionals. Okay, I guarantee it. Like I said, I've helped thousands beginners just like yourself create amazing websites. And I actually use one of these right here. I use this really cool. Like I said, art design right here. I use it on a lot of websites. So if you guys need help or if I talk in the lectures and I want you to refer back to the page were I give you guys links or you guys need material? This would be the resource is Page. So other than that, guys, I hope you guys really enjoy this course, and I hope it helps you out. And I will see you all in the next lecture. 4. Hosting And Domain: All right, guys, welcome back. So the first thing we need to do is get hosting and get a domain, and I recommend a company called TMD hosting dot com. Now, the reason why I recommend TMD hosting dot com is because not only to get a free domain, but you get your website hosted on what we call is a solid state drive server. Now, I bet you've heard that term before SSDI. And I bet you're wondering, you know, what is that? What is SSD? We'll educate you a little bit on SSDI hosting as well as SSD drives. So SST is a relatively newer technology and it involves no moving parts in the hard drive. As a result, it's much faster than a CD drive. In fact, the computer Amman right now speaking to you I haven't SST in it. Not in a CD drive. I use seven a CD drive, but I upgraded. Now all those other companies like go Daddy and Blue Host. They only offer a STD drive, so as a result, you're gonna get a much slower performance. And TMB hosting actually is actually cheaper than go Daddy and his other companies so it's sort of a win win here. So as you can see right here, the SSD drive clearly outperforms the eighties driving speed. The I. O P. S, which is the performance, also clearly outperforms the A C drive and the late INSEE. This is actually called delay. So four messes actually delayed. And you don't want delay, right? I mean, the more delay you have the worst it is so lower is better. So, as a result, we're gonna get our website hosted on the fastest server possible because we don't want to lose customers because our website loads too slowly. That would be no good, right? That would be terrible. So let's go back to TMD hosting and also include ah linked to this and the lecture description. You can check that out. So for now, I'm gonna click on get started. And now we have three plans. Here we have the starter plan, the business plan and the professional plan for you guys. I recommend the business plan because with the business plan, you get unlimited domains rather than just one domain. That is a pretty big difference. Okay, so I'm gonna click on, sign up all rights, and we also get a free domain. So that's also a big bonus Woo free domain. Everyone loves free stuff, right? Yeah. So I'm gonna put I love kylo ren just like that and click on. Proceed. So go ahead and fill up whatever address you want. So if you're not familiar with a domain name is it's, you know, your web address. So, you know, apple dot com or your website is cool dot com. All right, so next we have our contact information, So go ahead and fill out your contact information. Your first name, Your last name. Your email address. Your phone number, etcetera. Um, you put in your password, go ahead and put it in again. You know, make sure it's correct and we actually have the papal option. So if you want to pay with PayPal, you can pay with PayPal. If you don't, you can go ahead and just fill out your credit card. Put it right there. And after you're done with all this information Ah, I know I'd be going a little fast, so feel free just to pause the video and go find your credit card. Because I know when I'm shopping online. I can never find my wallet when I'm shopping, you know? And I'm like, Where is that? I left it in my car or something like that. You know what things happen. So next we have our domain registration. So what? This is right here. Remain privacy protection. This basically hides your your public information from people who tried to search you. So if you want to have that, you can have that checked. If not, you can leave it unchecked. Now. You actually have the option to do, period. So right here, you can actually do a month to month service. You can do 12 months or you can do 24 months. Now. I personally recommend doing it for 12 months because you're gonna pay a little bit less, and I'm going to provide you with a coupon code, which will give you a discount. So you might want to discount on something that you're paying mawr, cause it's a percent discount and a lot of these other options you can choose to have these however, Google Analytics integration. You know, I really wouldn't recommend most of these side lock because you know, a lot of people ask me about the extras, but I'm telling you might look, if somebody stole your information and got into your website, what are they gonna get? You know they're gonna get an empty website. It's not gonna be profitable for anyone to try toe to quote, hack your website. Right. So I would just probably recommend the domain privacy protection. That's about it. All right. Next you have your promo code, so I will give you a promo code, which will save you an additional 5%. So if you enter the code Darryl 626 and click on apply, you'll receive another 5% off. Now that prices pretty good. So you're getting hosting or actually, you can get even cheaper. You can get, you know, a 70 spent $78 get your hosting for the entire year. Right now, I'm stuck on a plan romping $16 a month, and I wish I can get out of it. But I have so many clients on that server, I kind of have to stay with them, so Ah, I actually have team the hosting. You know, I have a separate accounting be hosting because they're very fast. So after you're done with all this information, go ahead and click on. I agree. And click on check outs. All right. And then we brought to another page where it's gonna ask you for something. You know, like, you want to register for this, just go out and put No, and it's gonna take some time. And you might wait a minute or two. So after that, you'll be brought to this page, so I'll go ahead and weights, maybe 10 seconds. Let's just wait for yours, because, um, I should I know it does take a little bit of time to ah, get your seat panel up and all that information, so OK, great. Alright. Anyways, we're done. Cool. All right, So you'll be brought to this page. And this is your client's area. So we actually have our domain and we have our hosting now. So the next thing we need to do is install WordPress. So we'll do that in the next lecture, guys. So I will see you all there. Congratulations on your domain. Congratulations on your SSD hosting. You can tell all your friends you're saying Hey, you know what my servers hosted on SSDI. You know I don't use a CD anymore. You can kind of brag about it to that. Right. So I'll see you on the next lecture. 5. INSTALL WORDPRESS: All right, guys, Welcome back. So now we're going to install WordPress onto our website. But before I tell you how to do that, I want to give you Ah, quick overview of the clients area. So this is you know, your services, your domain, where you can register more domains, you can order different hosting. And this would be your billing portal and also your support. So the see you have a problem with your with your WordPress website. And the reason why I kind of like team D hosting is because you could submit a ticket right here and whatever problem you have, they'll answer, and they will fix the problem for you. You don't have to, you know, do it over the phone and try to figure out what's going on. They will figure out what is wrong and will fix it. So if you have a technical question, your website is down. Anything else that you have problems with, just go ahead and submit a ticket, and they will respond and also fix your problem for you. So it's another win win, right? So let's go back over to home. And now we're going to install WordPress. So go ahead and scroll down, and right here you'll have your C panel log in. Just go ahead and click your your hosting plan and click on log in. All right. And you'll be brought to this page right here. So we're gonna go ahead and scroll down right here. Scroll down. Just keep scrolling. Just keeps growing. And there you go. So we're gonna go to the soft, delicious app installer, and we're going to install WordPress just like that. So click on WordPress. Okay, so now we're gonna go to this page right here, and we're Glendon Click on install now, So go ahead and just click on install now and right here, it's gonna have your, um, your truth, protocol, All this stuff right here. Go ahead and select the domain. That's you, um, that you're currently that you purchased. So I purchase one called I Flower Power and right here, and it says in directory, make sure there is nothing there. Okay. Make sure there is nothing there in the in directory. Leave it blank. Okay. Next. This is your site settings. We can change us into wordpress. So it's not a big deal. next you have your Adam and user name and your password. So go ahead and change your user name to something. So I'll put my dog, which is Patty wack. And then I'll change my password. Teoh Patty work. See Patty wack 03 And right here, go ahead and put in your personal email so you can put in something like, you know, whatever at Yahoo or whatever at Gmail and actually have a language section, which is really cool because a lot of other coasting companies don't have that. So I'm gonna select Mine is English and I'm going to scroll down. All right. And what your done. Go ahead and ignore. All these settings were not going to use any of these other themes because we're going to use the number one selling theme on the planets, which is the divvy theme going to click on install just like that. All right, so it is now installing WordPress. It says it'll take 3 to 4 minutes, but it usually does it much faster than that. So it's already done. So right here is our log in for ah are our websites and also this is our website Now, if you click on it and it doesn't really work, go ahead and just give it like, a minute or two. Or sometimes it'll take 30 minutes. I know. For companies like host Gator, it can take anywhere between instant to five hours. I remember I was doing I was teaching Ah ah webinar for ah, host gator. And it took six hours on ST Patrick's Day. So go ahead and just click on the administrative Earl, and I'll take you to your website. All right, so there you go. We are now logged in. That is it. We have installed WordPress on our domain. And if you want to visit your website, you can click up here and click on visit sites. And there you go. So this is our website. It is live. It is official. And I know it looks really terrible right now. Don't worry. We will fix everything will make it look amazing. So really quick. Go ahead and go to your dashboard. And I want a change of you things. So the first thing want to change is our Perma links. So go down here to settings and go to permit links and I'll explain why right now you want to put it on. Post me The reason why you want to put it on post name is because let's say we make a contact us peace or in about US page right here is going to say your website dash, Contact us your website dash about us, right? It's actually better for Seo purposes, but if you have some that looks like this right here, where it's P question mark. 123 It looks really strange when they go to your about US page, and it's just not the way people make websites today. So go ahead and leave it on Post Name and click on save changes. Next, we're gonna go to our user settings and just click on users right there and go ahead and click on your user name, all right. And next you want to make sure that if you ever want to change your password or if you want to change your email, this is where you're going to do it. So you're gonna change your email right here, and if you want to change your password, you can click on generate password, put a new password and click on update profile. So this is where you would change your password and also change your email address. Okay, so that's pretty important, because I've had clients get locked out of their sight and they don't know what email they entered. And I'm kind of like what you want me to do, You know, it Z kind of I've been a kind of a bad spot, you know? So and also, you can change the admin color, you know, you could make it look blue. You know, I think which one should be used for this tutorial? There we go. We'll leave it as midnight. So for this tutorial, it's gonna be as midnight, okay? And I'm gonna click on, um there I'm a changed it to my other email. She is? Ah, PC Order. All right. And then I'm gonna click on update just like that. All right? So it is saved. Everything is done. We can go back to our website, click or visit sites. Alright, guys. So that's it. We've installed wordpress. Congratulations. We're doing an amazing job So far. We have our domain. We have hosting and it's actually being hosted on SSDI servers, which are the fastest servers right now on the planet. So congratulations. I will see you all in the next lecture where we will install the divvy theme. I'll see you there. 6. INSTALL DIVI THEME: So the next thing we need to do is we need to actually purchase the Devi theme and actually have a link in the description. And you will also receive another small discount for that. So what's your there? I think it's Ah, you guys can click on the link in the description it will take you to, ah, elegant themes, but brought to a different screen. You know, it will actually save you 10%. So I really recommend going through my my links. So it'll save you guys more money and you'll be brought to something that looks like this right here. And of course, it will be cheaper than this. You guys can click on sign up today and go ahead and entering your user name and your password. And as the great part about Logan themes is that they have technical support. So if you ever have problems with your website, these guys will help you. It's so amazing, you know, they have ah, full forum that will give you guys. If you have a problem with it, they will help you all every step of the way. And also, you know, when you guys leave me comments, you know? Ah ah. Lot of these problems can be fixed by their support forums. So if you guys want me to provide you a script or coding would be more beneficial to just contact them and ask them for it because, you know they're giving you, ah, full year of customer service with the plan. On top of that, you will also get the bloom plug in and the bloom plug in is an email Upton form, which I actually have another sartorial. So maybe after this video, you guys can check that out, and it comes with the theme and is the number one rated email Opt in. So ah, go ahead and entering your user name, your password. Confirm your password, etcetera, and all this information and after you. You know, you submit your payment and you log in to be brought to your dashboard, so I'll go ahead and just log in right here. X, I have on account with these guys. I think that's my password, right? Yeah. OK, so you brought to your dashboard. Now this is your members area. So from here, if you can download the theme so we go right here, Teoh, Scroll down right here under themes. Now, right here. I mentioned the bloom plug in. So remember, I have another tutorial on how you can use the boom plug in. It's a beautiful plug in. It is really amazing. In fact, you can preview it really quickly and, you know, right off the back, you're gonna see this little pop up. Come up right here. Should come up. See here. So someone scrolls down. There it is. So this little thing right here is the bloom plug in. So doing this on your website, be sure to check out my other tutorial on that. It totally comes with the theme. So I'm sure you guys have seen this on a lot of different websites that pretty famous plug in. So, uh, you know, going back to the dashboard, we're going to scroll down right here, and we're going to download the number one theme that Davy theme. Go and click on download and click on a theme package. Then you will see that your file has downloaded. Now simply also need to do is go back to your website and we're going to go to our dashboard All right. So from here, we're going to go down to appearance, and you're gonna see the section called Themes. Now, basically, a theme is like the structure of your website. So there are a lot of themes out there. People make things all the time, but the Davy team is by far the best team because their visual page builder. So up here going to click on add new and we're gonna click on upload Theme. Now we're gonna click on Choose File, and we're going to actually find the folder that we downloaded in. So mine was over here under downloads, and it is going to be under Davey seven. Download him quite a bit and I'm gonna click on open and then click on Install now. So now the theme is installing onto our websites, and from here, it will give us the ability to start using the visual page builder. It'll start giving us all these really cool features. It does take some time to install. It depends. Maybe, you know, if you're using another server, I could take, you know, like I don't know, like, 34 minutes. This service you probably installed maybe within one minute. Close this right here. All right, so the theme has successfully installed. Now all we need to do right here is click on Activate. All right, so we're activating the theme If you guys get these weird Http, ours up here depends on your server. I know for like a teen for, ah, blue host. It gives you these random PHP header errors. Just go ahead and ignore it. It happens on some servers. So over here, we're gonna go ahead and click on visit sites, and there you go. So the theme is installed. Congratulations, guys. Pat yourself on the back. We have, you know, made it really far. We got hosting. We gotta domain. We got the divvy theme. We've installed WordPress, and now we're going to create our amazing website, step by step, so I'm gonna close is right here, and we're gonna go ahead now and get started. All right, Let's go ahead now and get started. 7. CREATE PAGES + MENU: Hey guys, welcome back. So let's go ahead now and create some pages and also do some things with the menu. Maybe you want to change this menu up here as well. Let's introduce you all to the theme customizer. Now there's two different ways to create pages. Now I'll show you both. So, for example, we could go up here under this little plus new section and click on page right there, and this will actually bring us to a section where we can now create a new page. Now maybe you want to create our home page, right? So go ahead right here and click on home. It's like that and just click on Publish for now. Don't worry about putting anything in. We will get to that in a little bit. And maybe you want on about us page, right? So being over here under, add new and maybe type in about us and click on Publish. Now there is another way to create pages. So over here under pages, you can click on all pages where it says add new right here, or add new right here. We can create a new page that way so off type in are a click on Ah New and we'll put our services and then click on Publish. And then I will go over here again and we'll create the last page, which is the Contact us page and then click on Publish. Now we can go back over here to all pages. So if you want to view the pages that you have created, click on this all pages right here and you can see them right here. So we have the about us, the contact, the home, the our services and the sample page. Now I wanted to leave the sample page because this just comes standard with WordPress, so I don't really need it. So I'm going to trash this now. And there you go. So now we have four pages. But if you go back to our website over here and click on visit site, you're going to see that it's not really set up properly. You know, we have this categories. It doesn't really look good, so I show you how you can customize your website. I'm sorry, your menu, and there's a few ways to do it. There's a theme customizer, but also the dashboard, so I'll show you both. So over here you can click on dashboard, go down to appearance and go to menus. All right, Now we need to create our first menu, so I'm gonna call it Menu One and click on Create Menu. All right, so now we have our most recent, and it actually view also, these are our current pages right now. And the reason why we have two pages is because one of these is a custom link, which I will tell you what that is in just a little bit, but for now, just go ahead and add every single one of them and click on add to menu. Now, you see which has custom link right here. So a custom link is basically, um, it's a your well, that takes you to a certain you are. Oh, I'm sorry. It's a Texas takes you to a certain girl. So right here. You see what says custom links? You can sort of create any. You're also www dot at yahoo dot com or any website and put the text linked. So maybe you want to say like, yahoo, and then you can take them to yahoo dot com Now, most people don't really do this. They don't use custom links. Some themes actually require it. But, Devi, you don't need to do that. So I'm just informing you what a custom link is. So right here it says custom link. Go ahead and click on this and just click on delete. We don't really need that. All right, so we have the ah, the home, the about the contact in our services. Now, maybe you want to rearrange this so we want the top to be home and the contact us to be last. And you want to make this a primary menu and click on save menu. Okay, so now this is our current menu, and we can actually go view. It's on our website. So now let's go ahead and take a look over here. Click on visit site and there you go. So we have the home about us, our services and the contact us page. But there are some things we need to change. Now. We need to change this to a static page because right now it says I flower power dot com dash home. Now we need to make it so It just says I flower power dot com right? So over here, go to your theme customizer and the theme customers are actually has a lot of options, but I personally don't recommend using the theme customizer because you want to basically edit modules independently, and I'll get to that in just a little bit. But for now, all right, here it's a static from page. Just go ahead and click on this. Click on a static page and you see what says a front page. Go ahead and just type in home right there are select home and click on save and publish. And there you go. So now our home page, this page that we created is now our home page. It doesn't have that dash home anymore. So let's introduce you all to the theme customizer. So the theme customizer is another way you can customize your website and make it look different. But I'm gonna have to disagree and not recommend any of these because when you're designing websites, these right here, well, actually design in bulk. But if you're making your website, you might want to, you know, have things look different you don't want everything looking the same. You want the same text everywhere, right? You don't want the same. Um, you know, everything italicized. So first, let's go to the general settings. And this is your site identity. So right here we can put something like, you know, your website dot com and then put in a tagline. So I'll put in, um, flower power flower power. And then right here, we sell cool flowers, we sell cool flowers. And this is important because let's say somebody shares this website on Facebook. This title and tagline is gonna show up, and you're also side icon will. So it's also important that you have, um you know that you have something there. Now you can have a site icon as well. So let me show you what that is. If you go over here and click on select Image, let's go ahead now. And just like some random image, I'm going to go to upload files, select files, and I'm going to go over here and ah, maybe select this little, uh, you know, this little box right here just for guitar purposes. All right, so there is my image. I'm gonna click on Select. Now you see how Right here it says as a browser icon. Have you ever noticed when you go to those websites where you know, you look at the top of your browser and has a little cool icon? So that is what this setting is four. So I'm gonna put crop image. And now, if you visit this website, it's gonna look just like that right there. So has that cool little icon. You know, if you go to a lot of hosting websites to have their logo right there, so maybe you'd want to put your logo there. So let's go back and layout settings now you can actually have your layout settings box, like, you know, some people still like box layouts, which is like this right here. Or you can have it full with but full with the sort of the new thing. Right now. You know, a lot of people useful with you can actually add custom sidebars, but we will get the sidebars a little bit later in this tutorial. Um, I'm gonna go back right here and topography. See, this is why I'm saying you don't really need to do this because we can edit all of this information with the visual builder. We don't need to use this, uh, this customizer anymore, but you might want to change your menu, but we'll get to the menu a little bit later. So for now, I'm going to skip most of these sections. You guys can actually go through these and look at them. But I don't recommend changing anything in these settings because once we start making our website, you'll start to understand why you wouldn't want to use the theme customizer. Now there are reasons to use it, but they're very rare, So I'm going to have to say, Ah, well, we use this a little bit later, but we will actually use Thea Header navigation because we need this right here to customize our menu. And there's a lot of different ways we can customize the menu. But once we have some content, we might want to change it. So, you know, according to what we're trying to accomplish now, really quick over here, he's here. It says, menus. This is another way where you can sort of edit your menu. So if I click right here under menu one. You see how we have that menu created right there? I'll click on this right here, and then we have our pages. Now I want to show you how to do a drop down menu. So have you ever been to those websites where you hover over it? And it has, like, three or four pages that kind of dragged down below it. If you take these right here and you just go ahead and put it right under home. Now you see, the about us is under the home page, and you can have this for the our services and the contact us as well. So now we have the home page. We have the about us as a sub menu, and then we have these two pages as a sub menu for the sub menu. So let's go ahead, take a look. Great. So all right, there we have that. And then now we have the our services and contact us. So if you're looking for a drop them and you that is how you create one, you just simply drag it down, OK? But I'm gonna change these all back right now. I'm gonna push these all back, okay? And also, this does have a secondary menu and also a foot or menu so you can actually have another menu up here. But when we edit the menu, I will go over this more in detail. So as of right now, I'm not gonna get too far into it. But I'm just telling you, that's another way you can add in a secondary menu. You can actually add in another menu called the full with header module. And we'll get to that in the next lecture. Okay, so, um, other than that Ah, that's it for creating the pages in the menu. So now we have created our menu. We have, You know, I've shown you a little bit about the theme customizer. So let's go on to the next lecture, which we're going to focus more on the modules or give you a quick overview of all the types of modules and different ways weekend style and customize our website. So I'll see you there 8. Full Width part 1: Hey, guys, Welcome back. So let me give you all a little introduction on how the Devi theme works and a little introduction to all the different types of what we call is modules. So right here, I'm going to enable the visual builder. And this is the front end. So most people today, they use the front and visual builder now because it's so much easier. But I still use the back end when I run into small errors and I want to see exactly what I missed. So this is the editor here. And if we click on this little blue icon, this will get us started. So we have three types of modules. We have a regular module, a specialty and a full with so full with basically covers the page. A specialty is a little different. So if I click on that, this is the spacing. So maybe I want, like, a picture right here. And then right here, you see the content, maybe want to pictures below that. Right? So I'm gonna take X ray here, and the other modules is just the regular module. And there's different ways we can customize our website, so for example, this right here is one full row. This right here is maybe we could have two pictures or we can have three pictures or four pictures. There's a lot of different variations on different ways. Weaken style, our website. But for now, we're going to use the full with module because ah, lot of the beginners love the full with modules. They really, really do later down the road. Once you get a little bit more familiar with the Davy theme, you might start to sway away from the fourth modules because it does sort of limit what you can do as far as moving text around. But it's very simple and anybody can do it. So right here, I'm gonna click on. Well, first off, I'm gonna click X ray here, and I actually have these two rows. I have this blue road which I created, and this one right here. So I'm gonna actually do leave both now to delete them, just click on delete selection and delete selection. So now we have nothing. So the first thing I want to do is I'm gonna actually close this right here. I'm gonna click on this blue one right here. Click on full with. And there's different types of fourth models. Weaken Do now the ah, the fullest slider is basically a full page slider that will slide. We have the post title. We have the post slider. We have the header, the header, the full with image. Maybe you just want a big picture. Maybe your photographer, right? But for this little section, we're going to probably use the, um we can use the fullest slider. All right, so, um, this is our little box right here. And this is basically how we're going to design the full with slider. So right here just going to click on, add a new item and give your title of name so we'll put Welcome to the tutorial. Welcome to welcome to the tutorial. And then the butts in text, which will be contact us. Or maybe we could do something like, um, welcome. And the butts in your oral. For now, just go ahead and put it as that little button right there or this little number sign that just basically creates the button. But it doesn't really link anywhere, because maybe we don't want, you know, to link it anywhere right now. Now, for background image, we can select a background image for this. So to do that, you can click on upload right here, just like that. Oops, Sorry. So I'll go back right here, and I'll click on ah, uploaded here and now we have the, um, the files that we want to select. Now, I bet you're wondering where can you get some really nice background images? Well, you could actually go to unspool ash dot com right there, and you can get all sorts of four K images. So a lot of these images are really unique. They're beautiful. And if you want to type in what you're niches, let's say you're into food so we can type in food right there. And we can, you know, maybe put an image of food. Whatever you're into, Splash has a lot. And also you can actually go to graphic stock dot com and sign up. Now. I do have links in the, um, the bonus material section and those links they are affiliate links, but they do give you a larger discount. So, for example, if you want to put sunset right here, it'll give you some images of sunsets, and you can get all of these. I believe this is $100 for the year, so that's kind of worth it. You know, that's a pretty good price you're paying. Probably around, you know, $78 a month. So let's go back over here to own Splash, and we'll probably grab one that does. This is deuce night sky. So night sky. All right. And I'm just gonna go ahead and grab one right here, and I'm gonna click on download, and I'm gonna save this to my computer. And a lot of these follows. Guys are very large, so I will also give you some tips. Um, Night sky. I will give you some tips on how to reduce the size of your images because, ah, lot of beginners. They tend to put these beautiful images on there. But the problem is, is that they're probably 12 Meggs. You know, there may be eight K images. As a result, your website will load slower, so I'll give you an alternative Teoh fixing those. So over here, I'm gonna click on select files, and I'm going to go to desktops and I'm going to scroll down right here and we're going to find this was at the night sky. So gonna be somewhere around right here, Night sky. Now, this is a great example. So I clicked on the image, but right now it says 32.6 megabytes. That is a monstrously big file. And we must reduce that size because, um, that will result in a longer loading time. Now, in order to change this, we're gonna go to another website called pic monkey dot com just like that. And we'll go over here and we can edit our photos for free. And we want to click on edit. So we're gonna go ahead and finds Now are our photo. So the night sky and click on open. All right, so it is. Now, um, it's uploading our foul and 32 makes guys is a very, very, very large site or I'm sorry. I large ah, size. So right now it's already kind of reduced. The size for US 3000 is OK. A three K image and by two K. So we'll go ahead and just click on apply, and then we'll just click on safe So you see now how is the size is 2.3 megs from 32? That is a drastically big difference. So, uhm, I'm going to save it as just a as a pierce image. But you can also save it as a ah, it's called a Sean file or a Sean quality, which is like super good, but nonetheless the we can use Pierce, you know, and make sure J pig. So now we've reduced it to a 2.3 meg, which is much better than a 30 to make size, because that's a little too big for a website. So let's go back over here now, and we're going click on select files and we're going to find that picture. So the night sky Jay, Peg this one right here. So remember, it's ah, this one. So 2.4 megabytes and I'll click on open. All right, so now the file is going to upload onto our server, and then we're going to put it as the background for our fullest slider. All right, it is almost uploading. It's done, so I will click on upload an image. All right, so it's working. It's going if you do that one more time, Maybe, uh maybe something happened. So click on upload and click right here and click on, upload an image. There we go. So now we have our image there and we can scroll down right here, and we can actually change the default image position. Maybe you want to do it like centered. Or we could do a top left or in a top center, etcetera. But for now, I'm so leave it as default and I'll scroll down right here to image size, and we can have it covered. You can have it changed, fits, or you can have a change to the actual size. But for now, we'll probably just leave it as default, so I can keep scrolling down right here, and we can also actually put a slide image. So you wanna put another image over this? This image, we can do that as well. We can actually add a background overlay. You see now how it's sort of colored and looks a little bit different. So that is with the background overlays. And we can actually color the back on overlay. So right here I can put ah background overlay and sort of maybe you say I want yellow and maybe just reduce the transparency. So this bar right here, it controls the strength of the color. This bar here, it controls the transparency of the color. Do you see that? All right. Now we can also use a text overlay. So what a text overlay is is it's a It's a, um, like a shade that goes over this text box right here. So I'll go ahead and say, uh, yeah, sure use a text overlay. And now we have this right here, and this is good for a lot of other reasons. You know, you can actually color that text overlay, so maybe you want to make it green, you know, maybe we can reduce it to green. But for now, probably even as black just like that, and we can scroll down and we can also have a video slider. Guys, you know, we can add in slide videos a lot. And a lot of these right here the the image alternative text that's for SDO purposes. So that's basically basically telling Google what the image is called. You know, it's just informing the surgeons about it some time. Something in right here. Nothing is gonna show up. So remember, uh, the all tags are for seo reasons. Okay? And you can also add in a video, you see, right here it says background video, MP four. So we can also add in a video slider in the background as well. So, um, a good place to go to get videos actually is video dot nets and you guys can go ahead and take a look. They have a lot of free videos. If you don't want to spend any money, you know, we can put in like a night sky, just like that's all right. So a lot of these our night sky videos, you know, um, but some of these air from shutter shock so we don't want to You shudder. Shock Looks like an advertisement. So this right here is video dot nets. And these are videos that we can use for our websites. So feel free to go through some of these now. Shudder. Shock is actually a paid service, but they do have some really nice videos. You guys can actually go to video blocks. Done that, Nets. I'm sorry video blocks dot com and video blocks dot com is another website where you can actually get, you know, really cool. Really cool videos. I have personally used video blocks, so I know they have some really cool stuff. So, um, like, this one right here is probably my favorites. I actually have this one right here, which is the purple ink. So let's go back to our website right now so we can act videos if you'd like, um, keep scrolling down the video background. I wouldn't worry about that too much, but if you want inform the theme about the within the height would enter that in. If not, you can just leave it blank, because usually the video optimized perfectly for the cider size. So I'm gonna keep scrolling down now. And now we have this text box. So maybe you want to add in some content, you know, like, welcome to the most amazing website ever. And if you want to space this down a little bits just like that and maybe I want to add in , you know, a picture you can add an immediate right here. So, for example, we will click on add media and we'll just go ahead and add in one of these little boxes right here in this little picture just like that. So now we have this image looks pretty cool, and if you want to space it out, you can space it out. So that's another way you can, Um, you know, um you know, customize this now we can also change this text, like, right here. You know, we can type in whatever we want. Like, just like that, you can change the font. So let's say, for example, we can hover over all this. Click on the little A's right here, and we can change the font so he wants is able or maybe wants to arm Oh, a Revo. Ah, whatever you would like. You can change it as that's and you can also make this a header text and I will go into header text a little bit later about when we talk about mobile optimization, but header Texas Very important because, um, depending on how larger Texas, it'll look strange on the mobile device if it's not properly optimized. But don't worry, I will cover a mobile optimization a little bit later. There is a lots to cover with this theme. So we are going to go buy baby steps. All right, so next I'm gonna close that, and 9. Fulldiwth part 2: a little bit later. There is a lots to cover with this theme. So we are going to go buy baby steps. All right, So next I'm gonna close that, and I guess said there's other options. You can italicize it. You can underline it, etcetera. So I'll just go ahead and leave it like that now, under the design over here and click on design. And there's a lot of features. But the good part about this guys is that once you sort of know how to, ah, design one module. You kind of know how to design all of the modules because, ah, lot of these modules are very similar to each other. So I know it looks like a lot right now, but just remember that you can actually, um, you know, carry this information over to the next module. So I'm going to scroll up right here and discuss what these are So the arrow custom color. So if you decided to add a row custom color, I'm sorry. An arrow. It would appear at the bottom right here. And we can also have the dot custom navigation color, which would be the dots of the bottom. Now the text overlay borders border radius. We can actually go ahead and sort of mess with this a little bit. So something that looks like that you see right now how the border radius is starting to become a little bit circular. So you want a complete circle. You would basically just start to mess with it a little bit more. So that's what the ah over the border radius does. Is that it? Sort of give arcs to the, um, to the radius of the overlay. All right, next to you, have your header fonts. So this right here is our header font. So, for example, do you want to change it to Arvo? You know, do you want to make it larger? So now I gots to want to make it smaller. And also this little icon right here I'm a click. Refresh this little phone icon right here. No, I'm gonna click on this and click on smartphone. So this is how our website looks on a smartphone and it's very important to set the text for mobile devices Now, a lot of themes don't have this. A lot of things, just, you know, it doesn't work for mobile doesn't work for mobile. But we can change how we want it to look on the mobile device. So, for example, I'm gonna go ahead and say I want this to be a little bit smaller. Something like that. There you go. Perfect. Now for the tablet device. Maybe we want to do the same thing. I can go ahead and make it a little bit smaller. Just like that. Perfect. So now this is how it looks on. Our tablets are small phone and then our desktop. So it's starting to come together. It looks pretty good now the header text color. So this section right here controls the head or text color. Maybe you want to change the color of the text. Maybe you want it black just like that. Maybe you want a purple. Okay, So that is how you would change the header text color. Next, you have your header letter spacing, which will control the spacing in between these and you can actually change it for mobile And also, uh, the tablet as well. So if maybe, if you want to add in Ah, larger text basing like that, you can do that. But of course, you might want to leave it to something that looks a little more like this, right, Because it looked pretty ugly before, So I'm just gonna go ahead now and go back to desktop. Now, the header line heights, you can adjust the header line height to look something like that. Now, generally, you probably want to leave its standard, but there are certain reasons why you might want to make it look bigger now, the body font. So this section right here is the body farm. But remember, we can change it right here. So, for example, we click on the A. We contains a body farm right here. Or you can change it right here. It's really up to you. There's two ways to do it. So whatever way you're comfortable with doing, you can do that. Now the body font size. Now, this is what I want to stress more. Um, I I do. I teach a lot of people this, but, um, I sometimes leaving out, and it's my mistake. So the body font size when you make this bigger, let's say you make it that big, right? You need to optimize it for mobile. If you don't optimize it for mobile, it's gonna look weird on the mobile device. So let me give you an example. I'm gonna click on this phone and click on Smartphone. Now, you see how it looks like that. It doesn't look good. And that's because I made the text too big, and as a result, it looks strange on the mobile devices. So you need to sort of make sure that you optimize everything from mobile because if you don't, it's gonna look a little strange. And, um, you know, that's just the way you know, websites work today. So there's more people on mobile devices than there are on PCs. So you need to remember that so optimizing and promote for mobile is it should be the most important thing on your mind when you're creating a website. Isn't mobile responsive? Okay, so next to have your body text color And remember, you can also edit this color right here. So if I go over this and I hover it, I can click on this little pain icon. And now I can change the color of this right here. So contagious to green I can change it to yellow, whatever I want. So that is another way. You can change the color or you can change it right here. The body letters facing Remember her earlier? How we were actually doing the spacing for the header. So it's the same thing. We're just doing it for the body, for the body. So we're just going to make it look bigger or make it look smaller. Okay, So, like I said, once you start to learn one module, it kind of carries on to the next one. So you're not left in the dark, you know? You don't know you don't like Oh, what do I do? What do I do? You know, uh, we're learning. Ah, pretty slow. But, you know, it's just the way it is. So body line haIf Now what this does is it creates that line just like we did with the header text. Okay, so it's the same exact module, except it's on Lee referring to the body. The body text right here. Next, we're gonna scroll down now, this part school. So we take this button right here, and I bet you want to customize it. You're saying, You know, I don't want it to look like that. I want to look more unique. Will weaken style the butts in So over here under custom sells for button. Click on. Yes. Now, guys, this is actually universal. So for any button that you create in the future, this is how you would change the buttons for all the buttons on the TV theme. So, like I said, once you let her for one, you letter for all. Okay, so the button text size. What size do you want? This button text. You know, you can change its You could make it look smaller. Bigger, whatever you're trying to accomplish. So I'm going to just leave it there as, um, not there. But I'm gonna leave it as maybe I don't know what's What's a good size 30 30 pixels. Just like that, we can change the button text size. We could make the text size bigger. We can change the button text color. Maybe you want just the text to be different color. So if I scroll down right here, we'll click on green. Now, remember, we can also control the transparency just like we had before the other options. We can control the transparency of this as well, but I'll probably leave it as white. Now we can actually have a button background color. Maybe you wanted to have a blue background color. So that looks like that. You see that? You see how the blue is starting to come in. It looks pretty good. So I'll go ahead and leave it as blue for now. No, the butts and border with so right here We can change the border with now. You can have it like that's or you can have it, you know as, ah, something a little bit smaller. Or we can just leave it as the ah, you know, the settings. But, um, you know, that's another way. It's up here, so you know, it's it's really up to you. If you want to control the book, the border with you know, you can make it smaller. You can make it bigger, etcetera. Now the button border color. So you see this border right here? We can actually change the color of that. Maybe you want to change it to something like yellow. See how it's yellow on the edges, just like that And we can do purple weaken Dio that we can do black whatever you would like for your website. So I'm going to scroll down right here and keep going Now the but the butts and letter spacing. So the spacing in between the letters, just like we did up here, is just saying you want to do this for the button? I'm gonna put No. So I'm just going to go ahead and do but letter spacing. Maybe I just wanted, like as like, one pixel just like that. Look, Standard looks good now, adding a button icon. So, do you want a button? So if you do, you could put yes or, you know, or they have all these lists of buttons right here you can select. So we could go right here and maybe select, you know, anybody and we'd like So right here we can put the little thumbs up. So now if I hover over it, the thumbs up comes now. We can also have it where we put it as, um um you know, we put no So we can put it as no. Um, like I said, just go ahead and go through that. You know, that's sitting right there If you wants to add in a, uh, where to go? There. Did it go? Okay, I got lost, huh? Oops. OK, so I got a little lost. Their sorry. Should be right here. Okay, so I'll put Yes. Now, remember, you can add in the, you know, the butts in whatever you would like to add. So just remember, um, you know, you want to leave. That added it. Now the button font. You can also change the bustin font right here. So, for example, we can changes to able we can change it to another cool fonts. And when your trading fonts remember to sort of stick with one font, you don't want to go all over the place. You know, you don't want to have different fonts everywhere in your Web site's gonna look a little classy, and it's gonna look a little strange, is gonna look a little different, right? So we'll go ahead and just leave it as that Now we can actually change the button icon color so we can change the but I can call to maybe purple. So you see now how it's purple just like that. And the great part about did you guys is that you can see the ah, you know, the changes that were making as we change it, which is pretty cool. Now the butts an icon placement. You can have it to the rights, or you can have it to the left. All right, now show icon on hover for button. So right now, if we if we hover over it, it will show the icon on the hover for for the button on Lee for showing for the button. Okay, so we can leave that as yes, we believe it has. No. Okay, so now you can see that the button shows up, or we're gonna believe it as yes. So the button will only show on the hover. Do you understand? So, do you have any questions about that? Feel free to let me know the the button hover text cover. So if somebody hovers over it, do you want it to change color? So, for example, I'll put yellow right here, and then I'll hover over it. And now you see the Texas yellow. So remember when it says button hover, that means when I scroll over it. It's gonna change color. So let me give you another example. I'll do the butts and hover background color as white. So not a hover over it. It's gonna be white and yellow. Do you see that? Just like that. Okay, now the butts and over border color. So even the border somebody hovers over its we can change the border color as well. Okay, so most of these other options are the same other options that we talked about earlier. So I'm gonna click on general right now and click on check. So this is our slider. I'm going to delete the section right here. So this is now our current slider, so that's pretty much it for the slider guys. Also, if you want to pick eight this row, you click on the little duplicate module. That's what this is for. And now we have another one, and it's just duplicated. Also this other sitting right here if you want to drag it. But this really isn't for these sliders. It's more for blurbs and a lot of the other small modules, which we will talk about a little bit later. Also, this section right here. I'll talk about this also a little later. I No, I'm saying that a lot. But there is just so much to cover. There's so many amazing features that we can have. Basically, you can save this toe a library and then upload it to another page. So that's a really cool feature that Davey has and a lot of but themes don't have that. In fact, other things have what we call is migration. But the Davy theme. You can actually just save this entire page and then just upload it to another page. Simple done. Everything's, you know, everything is already done. So that's it for the slider guys. We will talk more about full with modules in the next section, so I will see you all there. 10. Fullwidth header: All right, guys, Welcome back. So let's go ahead now and discuss some of the other full with modules and different ways to utilize them. Now, I'm gonna go over here and click on this little purple icon. This is to add a new module, and I'm gonna took on the full with, and we're going to scroll down right here until we see the, um well, we actually have this other one right here that want to talk about the full with code. So what? This is if you are in some sort of Web design and you want to add some sort of CSS code or a Google AdSense code or things like that, and you want to be full with this is where you would enter it. However, most of you watching this probably don't know about CSS or coating, so it might not be for you, and I probably would not recommend this module, so I'm going to click on clothes. But if you are fluent with code, then you can entering your content right there. Okay, so now I'm gonna close that and click on closed. Close that. Now. I'm gonna open this again, right here and go to full with. And we're actually going to do the full with header module, which is very similar to the fullest slider. Except it will not slide. So this right here we created Ah, Page. But the full with header actually has a little bit more customization. It is somewhat still limited, but it is a little bit more customizable than the full with slider module. So, for example, put um welcome to the best websites. You guys can see it right here. So this right here is a full with header module. Alright, then, um thank you for watching. Now we can actually change the text color, you know, But for now, I want to leave it as dark, the text and local orientation. I want to leave it in the center just like that, and I'll keep scrolling down right here. And you see this option or says make full screen. I'm gonna click on that. So now we have this full screen image and this is very ideal for beginners who want those really big landing pages because it centers everything for you. It does all the hard work for you. Next. We have our scroll down button. So I click on Yes. And down here, we're gonna have a scroll down button. So, for example, I can change it like that. But the reason why you can't see it is because the Texas white, but for right here, we'll do. Ah, but in text so but in one text, so what he wanted to say maybe. Ah, contact us now. What is the URL? Where do you want that to take you? So if I click on this, where do you want to take you? So you'd enter that in right there? I'll put in my website www dot darrell wilson dot com, And you can have a second button for this feature so I can add in like, uh, by now you are about us about us, about us, and then I'll scroll down right here, and that'll put in the little symbol right there. So now you guys can see we have this full with picture or this full with background. And we have the two icons with the text right there, so it keeps growing down. Now, let's say you want to add in a background image. Maybe you want to add in a big, beautiful background. So I'll click on upload and we will just go ahead and select this image, the one that we use previously and click on upload an image. So there you go. It is uploaded. And also, guys, if you want to change this customizer, you can click on this right here, which will change it like that. Or you can leave it like this right here. But, um, you know, I'd probably want to make it a little bit smaller. You know, I don't like it really, really big, so I'll click on that again to leave it like this. So now we have the, um the, um you know are full of header right here. It looks pretty good. Um, there are a lot of different ways you can customize this Now, remember how earlier we had all those same text settings? Well, guess what? It's all the same. So remember, title font text, the spacing, the title font, the letter haIf everything right here is the same as the previous slider. So that being said for this part and the rest of the tutorial, I don't want to really go over every single setting all over again because it's just repetitive at that point. And all of the options are the same. For example, if I scroll down right here, you see, it says use custom sells for but in one, that's exactly what we did over here earlier. Okay, So I'm just reminding you that you can customize both buttons and all of the options are the exact same as the as the slider module. Okay, so that being said, I don't want Thio going too much about, you know, this module and all the all the changes that we can make because it is all these saying, OK, so we could go back over here. Now, there are some other things. Like for a logo image URL we can actually enter in an image right here. So right here, I'm gonna click on upload, click on this little icon and just click on upload an image just like that. Let me do that one more time, upload an image. Okay, So if that ever happens to you guys, if the theme ever becomes unresponsive, just go ahead and click on safe just like that and exit the visual builder and then just, you know, open it again. I'm glad that happened. Because sometimes the theme will just kind of be weird, and it just won't respond. And you might run into that case because this is a brand new update. So let's try that one more time. I bet you this time it will work. So significant module settings right there. Scroll down to the, um the, uh, background image Jor El and click on that. I know. I'm sorry. This is the background image. We want to leave that the same. I want to do the logo image oral. So I'm gonna click on upload, click on that and then click on upload an image. So there you go. So now it's responsive. It works this image, you know, it is a little pixelated, but that's because the image is very large. So, for example, another good way you can style this. Let me show you a good example Would be my other test websites, which I made websites on before. So right here I'm gonna goes Teoh Darryl to now. This was actually created with the full header module. So this right here is the exact same module as this. I know they look very different, but that's just because I've customized differently. You know, I added in a big background, this is my logo. This is the text, and this is my button. So this is the same exact module as the full header module. And I like the logo image oral, because this puts it above the text. Now, there is another section where you can actually add in the header image oral, but this will enter below. So let me give you an example. I'll click on upload and I'll enter in the same image. And there you go. So now I have this right here below, so it doesn't really look that there, But, um, you know, if you want to add that effect in, you can add that in. But I'm going to actually just take that out now and leave it just like that and also for the content. So remember right here how we cannot content. So this is a really, really cool tutorial this like that and we can actually, you know, over click on it just like before we can, you know, we can align. It's we can put it bold. Underlined. This right here is insert link. I don't really talk about that too much, so I might as well go over that. If you click on this right here, it's gonna put a girl. So this will basically say if somebody clicks on this text right here, it will take them to that girl. But there really is no need to do that because you already have a call to action right here . And you already have another call to action right here. So I'm not going. Teoh recommend putting in your girls. But if you want, you can do that. Okay, so going back, we can go back to our design. And like I said, we can change the title font color. We can change the sub header font color and also the content fund color. So this right here is the title phones. So I'll change that to whites. This right here is the sub header font. And then this one right here is the content color just like that. Now, this section right here I want to talk about it's called the test Max with, So let me give you a good example of what that is just to make sure you understand. So I'm gonna put, um you know, this is a really cool tutorial, blah blah. I'm just gonna go ahead and keep typing. Now, do you see how the text has a certain limits right here? How it stops? At a certain point, we can control that. So right here under the text, the ah, the text math with we can put maybe like, 100 pixels or we can put maybe 1000 pixels. And that's basically determining when the text is going to stop and when it's going to end . So let's just enter in 500. So you see that the text will right here, It'll it'll start right here, and it will end at 500 pixels. So that is what this setting is. Four. And there's a lot of good reasons why you should have that. Because let's just say you have a lot of text, right? Maybe you'd want to space it out more. But like right here, this is a good example. It's a little bit less so you might want to just keep it something a little bit less basic , you know, this is It's less text. So it looks good like that. You know, it looks it looks good. So I want to probably leave it at that. And all these other settings are just the same. So the sub header phones do you want a bold italicized, etcetera? The ah, the sub, the sub text color, Which is this right here. So remember, um, these are all of the same, uh, modules. It's all of the same settings. Everything is thes same. Okay, so, um, also another future I want to talk about is, um disable on. We will talk more about disabling on and the reason why you need it for video sliders. But we'll talk about that a little bit later. Okay? But for now, let's just say you want to disable this section on the desktop. If I click on this, you see how it's all great right there. Now, this section will not appear on the desktop. Now, if I defy un check it and I click on phone and tablet, this section will no longer appear on any phone or tablet device. Instead, this section will So that's another technique that you can use to sort of get more control of the website. Now, I will talk about why this is required if you enter in video suppliers. But we will talk about video sliders a little bit later. Um, right now I don't want to go over it too much. So for now, I'm just going to leave those unchecked and just click on the, you know, the icon right here. Now, let's go ahead and go to the next four with header module, which is actually the image. So I'm going to expand these right here and click on this right here. Click on full with we will go to the full with image. Now, the fourth image. It's a little strange, but some people use it. So let me give you an example. If I click right here under image, you are well, and I was gonna enter in this same picture. Upload an image, the full, the fourth images. Just a big image. That's it. That's all it is. So if you want to have that, you can have that on your websites. Um, it doesn't include any text. You can't really, um, do anything to it. It's just basically a Ah, large piece of this image right here. But remember the animation We could have a go from right to left We can have a go from top to bottom. We can have a go from, you know, bottom to top or we can have it fade in just like that or we can have no animation at all. So that means this section will just appear right when you go to the website. And remember, we can also disable this on the phone tablet or the desktop. Okay? Also link Yaro. So if somebody sees this image and they wants to take it to another websites, you can do that by entering. Maybe www dot Darryl testing dot com. And if I click on this image now, now it's a link. It will take me to Darryl testing dot com. Okay, so that is the full with image. There are some reasons to do this or to use it, but for now, I'm not going to use this, but I'm gonna go ahead and close this now I want introduce you all to the full with menu. So what? That is five over here and click on this little icon and go to full with and go to the full with menu right here. Now you're going to see this menu. Come right here. So now we have another menu below this page right here. So that's a pretty cool feature we can add in another menu. Maybe he wants to have it centered. You know, maybe you wants to, you know, added in a different background color to this, we can add in a different background color. There's a lot of different reasons why you want to do this. I actually have it on my website web design dot com. So this is It's a test website. It says it says for dummy purposes, But let me give you an example of why you might want to use that. So right here I actually have the ah, the full with many of the menu right here so high. Let's make your websites be the next success story starts with you. This was all done with the full with slider module, and this right here is a full with menu. Okay. And there are, um you know, a lot of other reasons why you'd want to useful with, like I said, it's just preference. Maybe want the menu on the bottom. You know, it looks kind of cool. Um, so that's the That's the full menu in a nutshell. So if you want, like I said, these these options, Like I said, the design Ah, lot of these are very, very self explanatory. Like, you know, the ah, the line color that menu background color, the active link. So, for example, if someone clicks on it, what color do you want that linked to be? You know, they just give you a lot of animation to give you a lot of accessibility. Faras these modules go now, the menu fonts. You can change the menu fonts. You can change the font size. You can change the menu text color. So maybe I wanted to be maybe blue, you know, See how it changes to blue just like that. And you can change the spacing. And also you can change the haIf. And remember, we cover these in the previous section. So a member of the spacing just controls the spacing of it. And the, um, you know, the line height will control the line. Hi. Okay. So you could make it bigger. You may get smaller, etcetera. OK, so I'm going to close this right here. Now I want to sort of sway away from the full with modular guys. You guys sort of understand what the principle of full with modules are. Okay, so, um, that's it for this tutorial. Guys, you guys have any questions? Feel free to let me know. Let's go ahead and move on to the next section or we will talk about post sliders and a little bit about blogging, so I'll see you all there. 11. Fullwidth projects!: Hey, guys, Welcome back. So let's go over some more of the full with module features. So next we're gonna click on this little icon right here, and we're actually gonna talk about the, um, the full with portfolio. So right here you have the four. With portfolio. We can click on that, and it's going to give us his portfolio title so we can put welcome to our portfolio, just like that's That's for that, right? Full Leo area. Go. All right. And we have different layouts. We could have the carousel. We have the grid. But before we do this, we actually needs to add in some projects, right? We don't have any projects, so let's go ahead and do that. I'm actually gonna click on this right here, click right here and click on safe. And now we need to add some projects for our four with portfolio. And this is good. This is say, for example, that you have things you want to showcase. You have work. You have testimonials. Whatever you want to show off, this would be the module for you. So up here, under plus new, we can click on project, and I'm just gonna add in a test product. So maybe just test one, and you can choose to use a TV builder or not. But for this one, I'm just going to just, you know, just type in something easy. This is our work. And over here we want to set a featured image. That's very important. You said a featured image. So I'm gonna cook on set of featured image and maybe adding this Devi icon right here, and I'm gonna click on that. So we have the Devi I come right there and then, uh, at a category, and we'll put testing one just like that. So whatever you want to type in about your work, you know, this is where you would do it. I'm going to go ahead and click on Publish. All right. And now I will click on PD the changes which this will actually take us to the actual post . So right here It says this is our work. You can see that there is the featured image that we put in. So whatever you want to put it over here, remember, this is where you would do it if he wants to talk about any sort of work that you have done . This would be the selection for you. Now. I think I put under categories. Put testing. One added a counter. There we go. Look on update. I was were didn't say that. OK, there it goes. All right, So now let's actually go to our page. So I'm gonna click on the home page now, and I'm going to scroll down, and there it is. So if I go over here and I click on this, it's gonna actually take me to that page. Now, this was probably the wrong image to use. Let me give you another example of using, uh, you might want to add it like a better image than that. You you don't want a PNG image. You'd probably want a J picks. And it looks like this right here. You know, set that as a featured image and I'll update it and you'll see that it looks a little bit more nicer than before. So, um, you know, this is ah, really good picture. I'll click on the home and there you go. And remember, I can add in a bunch of these and as a result, it'll look like a grid. So let's go ahead and add and maybe three more. So I'm going to go to a splash right here, and this gets some or images I'm on. Enter a night sky and I will go ahead and ah, you know, also like this one right here. I will say this. I will say this to my desktop nice guy, too. And then I will go ahead and go back over here, and I will probably save in this one right here. You don't have to do this. I just want you to visually see what these module can do. Because it is. It does look very good. And some people don't know how to use the module. Ah, lot of people tend to make posts. When I said don't you just used the fourth module and they're like, What's that? You know, I don't know what that is, you know? So I'm just giving you a quick example of how you can make it look really nice. All right, so now I'm going to go back to my website, and I'm actually gonna go on plus new, so I'm gonna add another project and I'm just going to do the same thing. I'll just do testing too. And right here, you can add it, some content about it, and then I'll do set featured image. And I'm actually going to upload all those images that I uploaded or that I downloaded so it could take some time. So I'm gonna go to my desktop right here, and I have the nice guy. So night sky, a nice guy to click on open. All right, so the image is uploading and I'm going to set. This is featured image, and I want is under my category under testing one animal click on publish. Okay. Now, I'm gonna do the same thing to more times just to give you a good visual idea of what this module can do. So add new again. I'm going to test three. Hi. How are you? And I'm going to click on the ah product category and set featured image. And I'm going to select another image. And this is like I said, guys is really good for things that you want to showcase. You might have. Maybe you're a tattoo artist, right? Maybe you want to show people You're different tattoos, you know, like, this is some of the work I've done or you can talk about. You know something else? Maybe your construction company. And you want to showcase people different roofs. Maybe you're a dog groomer. You know, when you want to show people different dogs, this would be the best module for that. Because it's like I said, it showcases your work. It tells people what you're about, and it looks really good. So I'm gonna click on publish. Now, let's just do one more. Add new testing four and hi. Hi there. And I'm gonna click on testing one. The product categories set a featured image and let's just do the last one right here. Night sky for that's pretty fast. All right, So set featured image and click on Publish. All right, so now let's go ahead and go back to our websites, and we'll go ahead and view the changes now, So I'm gonna visit websites and I'm going to Ah, scroll down right here. And you see how it has this cool a regular grid like that. So that's what you can do with the, um, you know, the module settings So we had another one right here. It would look pretty cool. You know, all of the pictures. Our Ah, you know, it aligns really well. And there's different ways. Teoh, to control this. We can actually have a different style grid. So I'm gonna enable the visual builder we're going to scroll down and under the setting right here. We can actually change this to the grid, Leo. So we can have the carousel or the grid and the care. So it basically, if you have more than this, it will continually to move. So it'll continue moving. So it adds in that moving effect, but the grid will just basically add in the blocks. So, for example, let's say we have maybe eight more. It'll just put them below these images, so it does look good, and there is a lot you can do with it. Um, next, I probably want to do something like, um, maybe adding the ah, no, the post number probably don't want to do that. Um, you can actually change the ah, you know, the welcome to our portfolio and number in the design. You can change everything. So the zoom, the zoom icon color. Do you see that little blue? How would like that? We can change the color. We can change the image of its We can also change the title fonts right here. So remember, just like before, the title forms the title of font size, the color, the spacing, the height, etcetera. Everything is the same guys. So I just wants to stress That's that most of these settings are the same. This is a new one right here. A background image you can actually add in a small background image. Oops. I moved it up there. Sorry about that. So you can actually add in a Let me move that back there. That was kind of weird. So I'll go ahead and just drag this down to here like that. Okay, So sorry about that. So you can add in a background image to this, but you might not want to do that. Now, since I've done that on accident, I want to show you basically what that module is. So you see right here how This is a full with module and this is a full with module. Maybe I want to move this, like up there just like that. Actually, this right here is locked. So we need to unlock that. There we go. So maybe I want to put this, you know, below this, you know, I want to drag and drop it like that. So that's the whole purpose of this icon right here. It basically allows you to, um, drag it down and, um, you know, dragon drop and everything. Now we will get a little bit more in detail with Dragon drop once we talk about text modules and blur modules. But for this tutorial, we're talking on Li about the full with modules. So this is a really cool module, Guys. It looks really clean. It looks beautiful. So there's a lot you can do with this. Okay, so I don't click on X ray here, and ah, that's it for this lesson. Guys. Let's go on to the next section, which we will talk about the last two full with modules, So I will see you all there. 12. Post Slider + Maps Module: guys, welcome back. So in this lecture, we're going to talk about the post slider module and this is in regards to basically blog's and also making posts. So if you want to release information about your website, blogging and posting would be your way to go, and this module will actually help you do it. So the first England did you actually is we need to create some posts. So there's two ways we can do that. We can go up here under plus new and go to post. Or we can go over here to our dashboard and we can go to posts. And if you want to see all your posts, you can click on all posts. But for now, we're gonna do add new because we don't have any post right now. You might have one that says hello world. You know, it's like a standard when that comes. So this is like a blawg post. Now, the Davy Builder kind of allows you to really have more control over your block posts. So let me give you example. I'm gonna put test one right here, but the thing is that we can actually use the divvy builder here so we can use the divvy builder to sort of decorate our posts and make a look really cool. So it's virtually limitless on what you can do now, I'm just gonna click on insert column. We're gonna click on just ah, one column row just for now, and I'm going to enter a text column. So I'm gonna click on that, and I'm just gonna insert a text one, and this is sort of introducing you all to the modules for the next chapter. So that's why I decided to do this. Now, um, we can decorate this, you know? So right here we can put in your your block post title. So maybe you want to put in like, Hi. This is my first block post right there. And we can also center this text right here, and we can also make it, you know, a lighter color or darker color. And we can also add media. Maybe you want to add a picture to this post. So maybe you want to click on add media and we can maybe add in one of these icons right here, and I'll enter this into post just like that and click on saving Exit. Now, you want to add a featured image over here. So over here, these are your featured images, Basically, you know, when you go to like, a post and see a big picture, and then you click on it and you read the post, that's what the featured image does. So go ahead and click on the featured image and go ahead and just maybe select a, um, you know, a picture. What if you want upload one, you know, feel free to browse around and take the time. So I'm gonna go ahead and maybe just grab this one right here and put this as set featured image. Now I'm going to actually make a new category. So I'm gonna put blogged posts blawg post over here under new category and, ah, add that to the category. And there you go. So now click on Publish. All right. And there you go. So we've actually made a post. Now we're gonna go back to our page, and we're going to use Thea module to sort of introduced our post because if we look at our page right now, there is no post right. So we need to add the module in that will allow people to see the post. So I'm gonna click on enable Visual builder. All right. And now we're gonna scroll down right here and under this little purple bar, we're going to add a new section. So on this little plus icon, click on that click on full with, and go ahead and scroll down until you see the, um there's two of them, so we have the full with post title in the full of post slider. So one of them is a slider, and one of them is just a title post. So right here, I'll go ahead and put the full with post slider and go ahead and click on that, and you're going to see this section come up now. Now, remember, you see this back? This background right here. This is our featured image. So, um, it's basically adding in the featured images and we want to include the categories. So right here we've included the category. So if you have ah lot of different categories, it will continually sly new blawg posts, and you guys can actually decorate this. You know, we can go to design and maybe wants to decorate the top hatting. So what patting is is space? So let me give you an example of what patting is. If I do 100 pixels like that's you're gonna see, that's the page was pushed like that. But we can also do on the bottom right here as well. So we can go. Maybe, you know, 200 pixels just like that's and you see all sort of stretching out. Now, I think this module actually has another way where we congested out. Oh, no, it doesn't do that, but for the other modules it does. But for the full with, you have to actually manually said it. So if I go over here and click on it again and go to design, maybe I want to make this 1000 pixels something like that. So now you can see that the block post is really, really big. Probably not that big, right? So maybe just surround. I will leave it a standard for now. And, um, you can actually show the mobile on image. You can hide the content on mobile. Maybe you don't want this post to be seen and you can actually add in like a border radius . And remember, these are a lot of the same options. Guys like the header Fonz. You guys have probably seen a lot of these because, remember, Ah, lot of these models work the same. So, um, you know, you can change your phones, you can change the header text size. You can reduce it on mobile, you can reduce the on the tablets and this is our works. It looks right now. And I mean, the website already looks pretty good except for this big title, because we haven't optimized for mobile yet, but we'll get there. And like I said, this would be ah, block post. So it looks really clean. You know, this post right here looks really clean. So this is an example of the post slider module. And like I said, there's all these different ways you can decorate. You can even decorate like the you know, Sears says block posts. And by Patty wack, you can actually decorate those specific texts. So you have full customization over it, and you can also custom style the button as well. So, just like we custom solve the button up here. You can custom sell the button down there. Okay, so that is basically the overview of the full with post slider settings. And I'm just gonna go ahead and just click on check. Now, let's go ahead and introduce the other. The other type. And, you know, I'm kind of I'm kind of confused on why they out of this module in I kind of think it's a little outdated, but I'm going to show you what it does anyways. So I'm gonna click on save right here, and we're actually gonna go click on this right here. It says, read more. We're actually going to view our post, So I'm gonna click on Read more. No, I'm actually going to click on edit post right here, and we're going to use the back and enter for this module. So right here, I'm gonna type in our enter in full of section insert module, and right here we're gonna do the full with post title, just like that. And you can choose to have you know your title. Your meta, your author, the You know the show, the common counts, etcetera. You can show the featured image. Whatever. You know, you would like right here, Aussie centre, the text media Want a background? Overly. And I'll put the text background color as something like you, maybe white, you know, right there. And Ah, I'll go ahead. Just save and exit. And we will drag this up here just like that Dragon drop and I'll click on update. So remember, this is actually editing. The post itself were actually decorating the post, not the page. Okay, so I'm gonna take on preview changes. And as you can see here is the ah, the block post. Right here. Like I said, I I don't really, you know, agree with it all the time. You know, I think that we can actually add in other modules to sort of, um, you know, make this look a little difference. But if you want to use this module, that is exactly what it does. Okay, so I said, there's all your information, your block post, your comments, etcetera. Okay, so that is the overview of the other module. But remember, you can actually type in, you know, or put in other modules, but we'll get to those modules a little bit later. Right now, we're just, you know, baby steps way. We're just focusing on only the full with post right here. Okay, But you guys are getting a little concept, you know? Now we can, you know, dragon butter right there. We can drag it over there, etcetera. So I'm going to just click on update, and we're gonna go back to our main page, All right? And the last one I want to show you all is the map. So the map, actually, I actually had, um and a lot of clients call me and because they actually Google actually introduced a P I key as a mandatory feature. Now, it wasn't always like that. So I'll show you how to get an A P I key for your maps. So now let's go ahead and add in the full with map module, which is very good for contact us pages. It's It gives a location of where your business is at. So right now, the first thing we need to do actually is get what we call is a Google. A p I key now, a long time ago didn't require one. Now they require one. So let's go ahead and get that first before we create the module. Now, over here, just go and go to Google and just put in like Google maps a p I key just like that and going to click on the 1st 1 So it's developers dot google dot com Dash maps, dash documentation, JavaScript, etcetera. So you'll have toe have a Gmail accounts to get here. If you don't have a Gmail account, you will not be brought to this page. It will prompt you to create a Gmail account. So take the time right now to create one. And once you're done right here, it says, get a key getting a pie, just kick on, get a key, go ahead and do create project. You might have one to just add new. I have a bunch of them. So go ahead and click on, create a new project, give your project a name. So maybe you want to do like my business and right here going click on create and enable a P I key. All right. It is crazy one. You guys hear snoring is my dog. So I have a King Charles Cocker spaniel. So she is snoring, but I think me talking is waking her up. So she stopped. So you guys hear that apologies. You know, I'm just, uh she's right next to me just on the couch, so Ah, yeah. That's if you do hear that's what it is. Okay, so you're all set. So go ahead and just take this a p I key and just copy it. All right? Now we're gonna go back to our website, and we're gonna go over here under our dashboard, and we're gonna go down to divvy and go to theme options. Now, this is a little introduction for the Demi Thieve options, but I will cover a majority of all these later on in the chapter. But for now, right, says Google, a P I key. Just go ahead and just paste that bad boy in there just like that and scroll down and click on save changes. All right, so know where to go back to our website. We've added in the a P I key. So now we can actually out of the maps. But to do that, you know, the visual builder does have some issues with the full with Matt module So we're going to use the back and editor for this. So go ahead and click on edit page and right here, just go ahead and click on the full with section insert module and you're gonna see the ah , full with map. All right, So argue a p I he is already answered in for us. So the map centre address. So where do you want them to see when they first browse the map, maybe want to see Simon enter in, uh, Pasadena, California, and go to find. So now you can see that the map right now is like it's pointed towards Pasadena, California. Now, let's just say somebody scrolls over it and they can actually control it. You can disable that right here by clicking the mouse wheel zoom. Now, people will not be able to zoom in on it. It will be locked. Okay, so that's what that option is. So, um, I'm gonna go ahead and just leave it like that. Now we need to actually set a pin. So over here, go to add a new pin and put a title. So, like our business. And go ahead and put in your address. put in Pasadena, California, and I wanted to find it, so it found the address right there. All right, Now, maybe if they click on it what you wanted to say? You know, we can put our information up there like open 9 to 5 my day through Friday, just like that, And click on safe, and we'll click on saving exits. And right here we'll click on update. So this is a good reason to use the back and editor. Now, let's go ahead and click on preview changes right here. All right? And we're going to scroll down, and there you go. So there's our map and are there is that our business? Open Monday through Friday. There you go. So that is how you create a map with the, uh, with with the full with module. So I think that's a majority of the fourth module, Guys, um, now we're actually going to go into the more details. So we're gonna work on the about us page, and I'm going to show you a lot of different techniques on how to manipulate the Devi theme and use modules even though there for the wrong purpose. So I'll see you all there 13. Menu Options + Logo: Hey, welcome back, guys. So in this lecture, we're going to learn all about the, um the menu styles and all the different ways you can decorate your menu, the text you can have the color you can have. So let's get started. So the first thing you want to do is go up here and go to theme customizer. All right? And there's a lot of different ways you can design this. So the first thing I want to do is go to header navigation and right here you click on header format and this is the header style. So how do you want this toe? Look now for my other website right here. This is a website I created, and I used the vertical menu bar and I put my logo right here. And you guys can see I have the link. Color is blue, and I have the, um you know, the ah, the text is black. So this is the active link color. So this basically lets people know what page they're on. So I'll get to that in just a little bit. So back over here, the header style so we can have it centered where you have your logo right here and the text. Or you can have it as a center aligned with logo. Or you can have it slide in, or you can have it sort of full screen where they click on it. It'll be this full screen menu, which looks pretty cool. So let's go back over here. And I'm just gonna go ahead and leave it as default for now, and we're gonna go back now in order to decorate this, we're going to actually, um uh oh, uh, to the primary menu bar right there. And let's say, for example, I want to make this full with. So this right here is going to make it full with We can actually hide the logo right there . So maybe I want to just keep it like this, Maybe put my logo now the menu haIf so I can adjust the menu. High threat. Here's yes, can see. Make it big. I could make it small, so I'm just going to leave it like that. We can actually adjust the logo. Max height. So the height of the logo that you wanted to be now the text size so right here, we can change the text size. So maybe you wanted to be a little bit bigger? No, really big. Probably keep it around 15. And the letter spacing just like the models before. Guys, this is very similar to how you can decorate it. So right here with you want the letter spacing a little bigger. I think that's good. One pixel would be pretty good. And the font So, you know, they have tons of fun. So you guys can go through Oz walls. They have, you know, Pacific Oh, which is like you for, like, an arty website, you know, But I'm probably just going to do maybe open sans light. Are you open? That is light. And I can actually bowled it to take a look a little better. And you can also italicize it. You can make it all caps. You can make it underlined as well. Now for the text color. I probably want to leave it as maybe, um, you know, a black and you can actually increase the transparency of the text yachts disappearing. But if I go up right here, it's going to make it really dark just like that. So It's very easy on the eyes. It's easy to see and the active link color. Remember before how we talked about the active link color. So that is what the active link color is now the background color. So here's a cool trick. You can do so if you want, just like a big image instead of that and you don't want the menu. There's a few ways you can do this. You can actually go to the background color right here and just basically take this and reduce the transparency of it just like that. So now you don't really have ah menu bar and you can change the text or two. Maybe white just like that. Now, another way you can do it is by going back over here and going to header format and simply just changing this to maybe slide in. So now your website has to me that looks like this, or you can have it as the full screen. So if I click on it, that is now your menu. So that is another way how you can sort of design your menu. You know, this looks really clean. It just looks, really, um you know, maybe the full of menu right here would be pretty good to have, because it just looks good. You know, it just gets my attention when I visit this website. So I'm gonna go back over here and go to the primary menu bar, and, um, we can also actually let me go back because the full screen actually does take away some options. So I want to explain all the options before I do that, I'm going Teoh. Also, if you want to have that vertical look, you know you can enter in the vertical navigation, so your menu bar will look something like this, and your logo will go here. And the reason why there's no text right here. Remember my Texas white. And you can actually say you need all this on the right side. You're gonna have your menu bar more on the right side if you would like. But for now, I'm probably just going to leave it on the left side and probably gonna take out beautiful vertical navigation because I want to go over all the options and I'm gonna go back over here and the primary menu bar. So we were at the background color. Now the drop down menu background color. So remember we immediate Ah, drop them in you earlier. So what color do you want? The background color to be for the drop down menu. You know, if you want a white, you would leave it white. Now, these are all for the drop down. So if you have a drop down, these three options are for that. So this is the line color, the text and the background. So that's for specifically for the ah, the drop down menu, cause if I change it right here, it's not gonna show anything, you know, because remember, it's on Lee applying to drop down menus where you hover over it and the menu falls. Right. So let's go ahead and go back now, and we'll go to the secondary menu bar. So the secondary menu bar, um, we can actually make it full with, you know, we can, um uh let me let me give you another example of the fourth menu bar. So go over here to fix navigations. I'm sorry, Teoh. Header elements. And, you know, we can add in like, a phone number right here. aged 18. And then we'll put some of social icons and maybe an email address at gmail dot com, and we'll go ahead and click on save and publish. All right, so we'll actually to exit this and open it again for that to show. So I'm gonna go close this right here. And now you see, I have this secondary menu up here. You see this right here? So this is one menu, and I have you know, I can create a second menu, So going back over here to theme customizer. All right, we're gonna go through the heavier navigation, and we'll go to the secondary menu bar and the same thing. Guys, you can control the background color of it. You can have different fonts. You know, if you want to change your font, you can have the social icons you can have The, um you can change the size of it like that, or you can reduce it. So it's ah, you know, not full with whatever you want to change to the secondary menu bar. So right here are probably going to wash them propaganda. Delete it later. Because I don't like Secretary new bars but some people use it because they haven't the phone number. They have the email address and the social icons right there. So it's easy to see. Right? So also, we have our fixed navigation settings, so when they scroll down, that's basically what this is applying to. So he's called down right here. Um, see, we can actually hide the logo image. So you see how I, um you see how the logo is right there? But if I scroll down but like hide local image, it disappears. So the fixed navigation settings is applying to basically when the user scrolls down. So if I scroll down now, this section controls the menu section so we can change. Maybe you want the menu to look a little bit smaller. I had one client. I wanted to make it look transparent. You can You can make the, you know, the text size bigger. Just like that. Now, remember, you see how it gets smaller and right here I scroll down, it gets bigger. That's because I increase the text size to make it look bigger. So if you want to have a very customizable menu, this right here controls the scrolling down effect. But for now, I'm going to just take this off and take that off. And that's a quick overview of the fixed navigation settings. Now also, header elements. We talked about that earlier. This sort of creates secondary menu. So you need to put your information in here to make the second menu appear. Okay, But maybe I don't want this. You know, I'm gonna go ahead and just delete everything right there. I don't really want the secondary menu bar, so I'm just gonna go and click on save and publish. And that's a good overview. Guys of the menu, you know, you can actually, you know, enable vertical whatever you would like. So if you have any questions about the menu, it's pretty straightforward. It's pretty standard. Um 01 last thing, the logo. So I'm gonna work on saving published right here and now I'm gonna click on this X. And if you don't have a logo and you want one? Ah, lot of people recommend this website called logo maker, but I'm not gonna recommend it because you're gonna get a really ugly a boring flow go from there. And it's just really bad. You know, if you spent the money to buy the DB theme, you might as well go premium. You might as well get the best of the best of the best, right? So you can actually go to Fiverr dot com and fiber dot com is a website where you can basically buy anything for five bucks. And if you go over here and you type in logo, these people work will create a really nice logo thing. It looks like this for just $5. Now your local is very important. So that's why I don't recommend going to logo Maker, where you get a free logo and it just looks really bad. You know, it's it's a system doing it. It's really crappy. So I would recommend, you know, just contacting one of these sellers and saying, Hey, can you make me a logo? I wanted to look really good, and, you know, they'll I My logo was made on this website, so my logo was $5 they created logo for me and looked pretty good, so I'll show you how to actually insert the logo now to do that, go over here to theme customizers. I'm sorry, my dashboard. No. Sorry. So dashboard. And we're gonna go Teoh divvy, and we're gonna go to theme options. So right here is your logo section. So right here, you're just going to go ahead and click on upload, and then you're going to wants to upload your logo. So right there but said his logo and go ahead and just scroll down. Just keep scrolling. Just keep scrolling and go to save changes. And now your logo should be there. So I go to visit sites. There you go. So my logo is there, Remember, we can control the height of this early. Remember, we have the local height options so that as a way, if you want to expand the logo and make it look bigger, OK, so that's overview guys of the menu, because I've been any of their questions, Um, regarding the menu, Feel free to let me know we're now going to goat on to the next lecture, So I will see you all there 14. Landing Page Creation: Welcome. Welcome, guys. So congratulations on making it this far. This point, we are going to start talking about modules that are not full with so just basic standard modules and guys. This is a very important lecture because a majority of websites that I create are used with just basic modules. And I don't really use a lot of the full with models except right here. You guys can see or right here. But a lot of these other modules are with just basic modules. So in this lecture, I'm going to show you how to use those modules. We're going to create a landing page from scratch using just the basic modules. So the first thing I'm going to do is go over here to this page and we're going to enable the visual builder. So we are going to start creating a websites. In fact, we're gonna create Let me show you what we're gonna make. We're gonna make something very similar. Just look something like this right here, just like this. So we're going to create Lining Page. It looks just like this. We're gonna put a text module, a text module, a text module and Ah, a button. It's that easy. You don't really have to, you know, put it in a lot of other different modules. It's basically very standard. What you see is what you get. So, uh, let's go ahead and dive right into this. So the first thing to do is going over here. Oops. Over here. And we're actually going Teoh. You know, we're gonna add a new section, and we're just going to put, like, a regular section, and we're just gonna put, like, a basic section right here and right off the bat, guys, I want you guys to all, um we're going to download some images. I do have a drop box, and it is in the bonus material section. So what this section is it's a lot of images, and it will help get you started and also help you fall along with me. So the one I'm going to use is this wallpaper of Robert Downey Jr. So if you go over here, we can just go to I don't know, you go anywhere you know, actually, go over here first this blue icon, or delete this one, this blue icon click on the gear icon, click on background image and upload. And now I want you guys to upload all of these images. So take the time to go over here and you upload them. So I'm going to actually posit video, let you guys do that, and I will see you all in just a bit, but my images uploaded. Now I am going to upload this wallpaper I have right here, and the size is 25 60 by 1600. So your side, it'll probably be the same. I'm gonna click on upload an image. Okay, so the image, uh, successfully uploaded. There you go. And I'm actually going to Ah, I don't look strange right now, but But as we add modules in and add, Texan is going to push the page down. Now, there's another way you can do this by just drag me it like this. If I click on the little check box, I can just drag it like that. But I don't want to do that yet because I want to actually, um, put modules in that will actually manually push the page down instead. Okay. So what I'm actually gonna do right here is, um I'm actually going to go, um, over here. Well, I'm actually gonna delete this right now, so we have no modules. Now, Now I want to add in a module, so as you can see right here, we have models over here, but no modules are we have another module over here, but nothing's put over there. See that? So this is like a two column row, So I want you to sort of understand the logic behind the divvy theme. I want you to, um I want you guys to basically at the end of this tutorial, look at other websites and know what to put in and how to put it in. So this is a two module right here. And just by looking at this now, this right here is a little trick that I want to show you guys. So this right here is actually a picture, right? But I actually use a text module for that. And I bet you're wondering why does use a text module? Well, I'll show you right now, so I'm gonna scroll down and enter a text module and you see on the text monitor right here says add media so I'm actually gonna add a picture in there. And the reason why I want to add a picture in there is because I can control the size. But if I use an image module, I cannot control the size. So right here I can entrance, um, text. You guys gonna see the text right there? But I just want to put in an image some click on add media, and I'm going to enter in that picture of Darrell Wilson right here and click on select. And there you go. But now, if I want to make this bigger, I can just click on it and stretch it out. As you guys can see, it also stretches it out right there. So that's another technique of when you add in images. Maybe you want to control the size of it. That's a good idea, Right? So enough of that. I'm going to click on close now, going back over here. We have another text module, so I'm just gonna go ahead and, uh, to to add a new module. You'll have Teoh click on the little plus sign, and then over here, just go ahead and scroll down to text module. All right, now I'm going to put in, like, welcome. Welcome to the Davy Bean. It's the best wordpress theme ever. Um, learn why, Okay. And then I'll go ahead and close this. Actually, no, I'm gonna close this, but, um no, I want this to be my header text. And what a header text is. It's basically the primary title like this. All right? And another reason why you'd want to put it on header text is because it optimizes for mobile Better. But we will talk about that and a little bit later lesson. So for now, just go ahead and highlight all of this. Click over here and put heading one. So now it's a header text. Okay? And let's say I wants to change the style or change the font. Click on design now. Header font. So header font controls this section right here? No, I'm just gonna go ahead and put Maybe, um, we're going to put railway. You can put any foreign you'd like, So we're away and we can control the size. So the header to exploit you can see it's getting bigger. And the reason why it's stuck like that and these two column Rose. Because, remember, we have these two column Rose just like this so the text will not exceed that box. It'll just stay within that box. So I'm going to make it smaller. We're on 40. And remember, we can also make this bold. We can make it italicized. We could make it all caps and we can make it underlying just like that. Okay, But I'm gonna take that out, So I've done that right there. Now I'm going to actually close this box now. I bet you're wondering, you know, it's it's kind of interfering that Texas harder to see. Ah, this right here, this gray line. This is a custom CSS, and we will go over this at the end of this lecture. So you guys will understand what custom CSS is, but I don't want to introduce it yet, So for now, we're going to take the whole box. Now I see this gear icon. This gear icon controls this steel box. This blue box controls this little blue pill section right here. So that's the difference between the two. Now I'm going to go over here, click on this gear icon and it gives us some options. Now we can make this row fool with we can We can make it a custom with We can add a gutter with or we cannot accustom Patty. Now, if I make this rifle with you, see how it expands the page now, My teal box you guys can see it's full with its exceeding the entire page. Now let's just say I want to actually go further. I want to make it increase even more. See you or how the box right there. I kind of want it all the way to the end. I click on Roe settings I can use the gutter with and by adjusting the gutter with now you can see that I have really put it on the edge. So that is what the gutter with does. It's actually good for pictures, but for now we're not going to use the gutter with Now. Let's just say you want to, um, change the padding, maybe wants to move this direction somewhere, move it somewhere differently. So right here under the padding Mentor, maybe 5%. You see how the padding right there It changes how it creates space So the padding is the space. Now let's just say I want to move it to the right 5% now. The reason why it doesn't move to the right is because, remember, it's in a two column row and it really has nowhere to go. But if we do for the bottom, it's going. It's actually going to move. See that? So it's creating space right there. Okay. And, um, keep tussle. Keep custom padding on mobile that will basically stayed anything that you saved right here . It will save it to the mobile device, so that is pretty good to use. Now let's go to the design setting. So the design setting is the margin. So what margin you want this to be? So if I enter 10% you're going to see that it creates a margin of 10%. If I want to do that to the rights to be 5% it's not going to move too much, because remember, it's in a, um it's in a ah ah box, so it's difficult to move, but let's go ahead now and go back over here to our general settings, and we're actually just going Teoh We're gonna close this now. I want to go back over here to this text module. So I'm gonna click on the gear icon for the text module and I'm going to go over here and go to Max with. So what? The max with does is that it basically say is it says the max with the text will go. So, for example, if I do 1000 pixels, this text will reach all the way to 1000 pixels. But if I do 300 pixels just like that, you see how it's much smaller. Because remember, this right here is 300 pixels. I want to make a little bit bigger. I could say maybe go 500 pixels or 600. So 600 pixels. You guys can see that. Now, this. Now the Texas Onley going up to 600. But if I go to 700 it's going to keep going and so on and so forth. So I'm going to leave it at 700 pixels and for the text orientation. I wanna leave it as centered. Okay? And also for this section right here, this other text model, you can do the same. You can make it centered. Eso I'll go ahead and do that. I click on this module and you see how I have my picture right here. I'll just go text orientation and go to center. And there you go. Now it's going to keep going. So over here, we have more text, and you guys can see that's just another text module. So simply click on this little icon right here. Scroll down until we get to text, just like that's We want to make it centered. And also, let's go ahead and get some dummy texts. So, dummy texts just like that. I'm just gonna grab some of this text right here. All right? I'll just go and copy. That's without by boring there. And they just go ahead and pay some of that text in there. All right, so there you go. So you guys can see that I have the dummy text. And remember, for the design settings. If we scroll down over here, this right here is the text font. So if you want to change the font of this text, this is where you would do it. You can change the text font size, and this little phone icon indicates how you'll change it on the smartphone or on the tablets. So I will go over this in a little bit later in another lecture about optimizing for mobile . So it's keep scrolling down. You can change the text, text color. You can change the spacing just like before, how we change those other models in the fullest setting. These are these same exact settings. So, like I said, once you learn the module setting for one, you kind of learn it for all of them. So text line heights know how tall would you want to make this? See how it's indicating space right there, a background color. I never used background color for text because it just looks really ugly. You know, there might be some reasons why you would do that. I just personally don't like it, So I really just rely on the background image now, a background image. You want a background image over this section? Probably not. But you know you can do that. You can add a border you can add like you see how I have a border right there. This section right now, the other sections white, so you can't see it. But you can add a ah border around this section and you can change like it's dotted or doubled. Or however you want to add in your border. You can also change the color. So if I want read, you have the border over the text right there. So that is what the border section does and the custom margin. Same thing. We can move it to the top to the rights and also the custom padding as well. So these are more. Uh, it's basically the same thing as you guys all up here. It's just for different module settings. Okay, so after we done with, that's we're gonna go ahead and click on check now, going back. Over here, we have the start button. Now we've talked about the start button previously, but the reason why I like to start, but Atmore on the text setting is because we can duplicate this. Remember, you could duplicate every section, so let's just say you have different buttons on your page. You can then duplicate it and bring that anywhere on your website, so it saves you a lot of work. You don't have to re copy it. I'm sorry. I don't have to remake its You can just just duplicated and just drag it somewhere. So right here, I'm gonna dio do but alignment to the center and ah, right here. The button you are. Oh, so if somebody clicks on this button, where do you want them to go? The euro opens in the same window or a new tab. Probably a new tab, maybe. Right. So what you want this to say? Learn more or contact us. Okay. Now the button alignment is in the center. The text color is also, um you know, don't worry too much about this, because remember, we can change this in the cut in the next section, so I'm going to actually go to design and for this, the stable on. Like I said, don't worry. We will talk about why this is very important. Later on in the lecture, there is a very big reason to use this, especially when using videos, fighters. So on the design right here, just go ahead and say yes. Now, remember, this is for the same exact module that we used for the header. So if you want? Change the butts and text. You can change the text. You can change the button text color just by going to Maybe I want as red, but for now, But it is black, the butts and background color you can actually change it to maybe some my green or what changes blue. For now you know what? We'll make it blue Now the butts in border with you can change the width of That's just like that. You can change the radius now the radius That kind of like changing, you know, you see how it becomes more of a circular butts in the more you change it kind of like that look better. So that's another way you can change its. You can also change the letter spacing like that to make it look like that. You can taste the button font. We'll change. It's a railway now, so change it to railway. Just like that. You can add a button icon right here and also the hover over text color. So only when you hover over You wanted to changed. You wanted to change text. Maybe you want a white text. So now if I hover over it. The Texas white. So that's another option that you can have. So I've showed you most of these options before and the other setting. But I want to show you why I prefer using this section rather than the full with. Because this section I can duplicate it. I can drag it, I can drag it up here. Now you see how I'm dragging it. And that's what this section does right here. So this section will allow you to sort of drag it anywhere you want and duplicated. No dragon over here. Put it under this just like that guy. So you have much more control using the regular modules more than the full with modules. Granted, the fourth modules are much easier to use. But once you become more fluent with the divvy theme, you might start tend away from the, you know, from the fullest section. Because this is so much you have more control over it. So as you can see our pages basically the same all of you would need to do right now is this. Go over here now. Make sure the arrows are like there, there to up and down just click on it and just drag it down, just like fats. And pretty much our website is very similar to this one right here. So, I mean, we could actually put a divider up here. Let's go ahead and do that. Let me introduce you all to the last section, which is the divider section. So, um, going up here actually going down here, I'm going to click on plus, and we're going to add in what we call is a divider. And the divider is a section that allows you to actually make space, and it also gives some color into court of your site. So I'm going to show the visibility and put this is black. So now we have this black bar right here. But what this does that it actually pushes stuff down and allows you to sort of manipulate your site a little bit more. Okay, so I'm gonna click on this right here, and I'm going to hope. Sorry. Wrong one. So I'm going to, um, to see where I can find my text model. Is that it right there? The butts and setting, You know, it's kind of hard to find the ah the divider. I've always run into that problem. So what we can actually do is go over here, click on save, because ever have this problem where you just can't find the highlights? Don't worry. I get it all the time. It's pretty common, actually. So I'm going to exit the visual builder and go to edit page. All right, Now we're gonna use the back and really quick. So you see the divided right here? I'm going to drag this up to the top and click on these three little arrows. Now, this is the same exact options as we had before on the other page, so it's relatively easy. It's easy to use. So I'm gonna put the vital up here and right here the height. So how much heights do you want to push the page down? I'm gonna say, maybe 250 pixels, which is kind of a lot. Not that much. 280 pixels click on saving exits and click on updates. All right, so my internet is a little slow right now, guys. So my apologies, and I'm gonna click on preview changes, So just like we saw before you see how all of this text now is being pushed down. That's what the divider does. It creates more space. So I'm actually going to ah, edit the visual page builder and I'll show you how we can make changes, right? It s all right. So you guys can basically see it's instead of using the back end. But whenever you have problem with that Ah, module you can't see here. You can't find it. Score the back end. It'll show you Word is exactly so right here. I'm going to click on this little divider right here. You see? What's his height? I'm gonna put 100 this time. See that. You see how it's creating space and is pushing everything down? Maybe I wanted 20 pixels just like that. Maybe you don't want the dividers to show, so just put don't show and then I'll click on this arrow. So that's how it used the divider. I mean, we've basically successfully created I'm a drag us up a little bit and maybe just push it down just slightly, just like that. So we use the divider. We've used a lot of the other modules. So that's it for the landing page guys, We will talk about the custom CSS a little bit later. But for now we covered some text models. We showed you how to kind of move around. The padding kind of shows you how to add buttons and maybe, you know, drag and drop stuff like that. So let's go to the next section. We will talk about blurbs, so I will see you all there. 15. Blurbs: already. Guys, welcome back. So now let's go ahead and do the next section, which is this section right here. Now, just by looking at this section, I hope you can tell what models we used. This is a text, this is a divider. And this is another text. That's it. And it's a one column row. So let's go over here and practice a little bit and also show you how we got these cool colors on the side and I'll show you how to add in these blurbs. It's very simple. It's very easy. In fact, you can drag them over here. You can, you know, put it back over there. Whatever you wanted you. So let's go ahead now and get started. So over here, I'm gonna click on the little plus icon down here, Click on regular, and we're going to do this single row just like this. All right, Now, over here, I'm going to add in a text module, so simply just go down over here and grab a text module and we're going to center this text and I'll go ahead and put something like, um, welcome to the coolest theme on the planets. Debbie theme. All right, now I'll make this a header text just like that. And if you want to change this, remember, in the previous lecture, you go to design, go to heading phones, changes to Arvo change the font size. You can change the color, whatever you want for your theme. Okay, Now, let's go ahead now and add in the divider. So I'm going to actually click on this right here. Click on divider, just like that's. And I'm just going to changes to Black. And, um, you know, I'm going to scroll down and I want to divide it to show just like that. You guys can see we're sort of creating a design. Now we're creating a design. That pretty That looks really cool. So, um, you know, by doing this, you're not only creating the space, but you're adding to court to your site at the same time. So this is another reason why you could start using other modules to sort of, you know, introduce other things. Now, let's go ahead and add the text module below that. So right here I'm gonna click on this plus icon and go down to the text module, and we're just gonna go ahead and enter in some text. But to do that, I'm going to send this text. I'm gonna grab some of this dummy text right here, and I'm just going to Oops. Sorry. And I'm just gonna actually copy and paste this in there just like that. Yes. Can see the Texas there, and we'll click on check box. Now, the divider is in the wrong space, so we need to actually take the divider and put it somewhere else. We need to, um, put it on the ah, Was it called? We need to put in the middle right there. Right. So there is, like, a strange thing I can't really grab. It means that I can pull this down and grab it. See? Here. This is the text module. Yes. So remember, if you have this problem, remember, just to go to the back end so we can go to the back end right here. I'm going to actually click on this right now and save it. And then from here, I'll just go to Actually, I'll refresh this page. And this is actually the back end right here, and we will just take this divider, and we'll just put it in between the two text models right there. So that will basically give us that look of, you know, having this sort of look right here. Okay, so right here, this is the back end. Now take the divider and just drag it up and update. There you go. Changes are saved. So I'm going to actually refresh this page now because I made that change. So that's another reason why you guys would want to use the back end. Sometimes a visual builder is hard to grab stuff. You know, if the night is, it's to cluster together. So, you know, that's, you know, a reason why you'd probably want to use the back. And sometimes it gives you full control of all of the modules. Okay, so there you go. You can see that the text model now is there. Now, let's go ahead now and maybe add in thes blurbs. So how do we do that? Well, we're going to actually introduce a new section. So right here, you see? Where has this, uh, this steel section? Go ahead and click on that, or we can click on this. But for now, you know, we can actually just use this whole module. You know, I'll go ahead over here, click on this plus new row, and we want to add these four bars. So now you see that we have these four bars. Now, we can just create a blurb right here. All right, So I'm gonna add a one blurb the title. What do you want to say? You know, uh, we can get you more sales. And if you wanted to take them somewhere, you just put in the address, so www dot darrell wilson dot com Now, for the icon, we can say yes. I want to use an icon I want to use. Maybe, um, this See right here. This This sign right here. So you guys can see the icon is coming up there, and you can actually change the icon color. Maybe you wanted to be a blue if you wanted to be green. You know, you can change the transparency of the color, all these options. You know, you can really add what you want to your sites. Maybe. You know, we're trying something with teal. Whatever. So a circle icon. Now let's say you want something around that you can click on the circle icon. You can change that color as well. Looks like that right there. See how I added that in? Because I control the background color. Now the circle, the circle, color. You know, we can also add in ah, border around the ah, the blur right there. You can actually change that. Maybe you wanted to be, you know, orange, Red, You know, whatever you're trying to go for, So I would just go ahead and leave it as blue. And you can also change the image placement. So instead of having on the top, we can have on the left. And if you have the left right there, it's going a little bit more smaller. But, um, you know, it's there is a reason why you want to do that. In fact, later on, we're gonna scroll down right here. This section is the same settings, except we use it on the left side. So that's another reason why you'd want to put the blurbs on the left side. But for now, we're going to leave it on the top. So I'm going to image. Place me on the top now the image icon animation. So you can change how the blurb comes in. So left her rights right to left. Or you could have no automation at all. Okay, the text color. You know, I I preferably we don't ever mess with the text color because remember, you can change it on the design and you can get much more and and deaf. You know, you can change the text. You can change the size and spacing the heights, etcetera. OK, so this is more of like a short cut. Like you want to lie? Yeah, sure. You want a dark? Sure. You know, it's more of a shortcut. And remember, you can add more content right here. You can add in an image, you know, below that again. So I'm going to actually grab some Demi text right here and just go ahead and go back over here and just paste it in there just like that. And there you go. So now we have some dummy texts and we can go to the design settings. You can change the header fonts. You can change the ah, you know the header font text color, the header Spacing and the line heights. Now the body fonts. This applies to this section, So this is basically the text for the other models. So all this section right here, the body spacing would control this section right here. And remember, these options are relatively all the same. You know, the border, the custom margin, etcetera. So, like I said, once you learn it, have to do for all modules you learned how to do for all of them. Now, I do want to show you a short cut. So instead of creating it all over again, you can actually just duplicate this row without little symbol. And it will create this one. And you can just drag it up there like that. You can do it again and just drag it up there like that. You can do that again and simply drag it up there like that. Now, let's say you want to stretch out this rope so we can go over here to this row setting, and you can either use a custom with which will basically make it. However you want it to Ah, you know, the size of the row. It'll adjusted to something like that. So that's pretty cool. Or you can put No. And you just say I want this rifle with just like that, okay? You can control the padding on this row. So, for example, 10%. You can see that now it's creating that space of 10%. You can add it, you know, bottom. You know, you can add in, um, you know, a bottom space now for the right and left side. There probably won't be any space because we taking up most of the space right now. You can also sue design, but I recommend never to use the roast settings like color or image in the teal section. But for the custom margin. Yeah, but for the background section in the background color cause, like, if you do like this, it's only applying to one section. But if you wanted to apply the tire row, you would have to hit the blue icon, which would be this section. So this section right here you go to background color. You can change the color of the entire spot right there. You see that? So that is the reason why you can also add a background image. So maybe you want to add in a background image to this whole section. So clicking on upload, we can click on this, upload an image. Now, this background image will apply to this entire section. My Internet is a little slow, guys. So my apologies. It is probably loading. And there it goes. This is what happens. You get wireless Internet, you get looks like this. So, um, if you wanna have a background image, it looks like that this is where you would do it. And like I said, there's a lot of different ways. And if you also want to add in a video slider, you can do that as well. So this right here is an image. You can see. My Internet is terrible, but let's say you want to add in a background video. So back on video MP four, I'll click on upload, and I believe we have some. I don't have any videos yet, but, uh, let me see where I'll click on Slick fall. I think I have one video on my fall somewhere. Yeah, I do. It's this purple in Great. Here is a very large file, so it might take some time to load. I think it's around 45 megs, which is pretty big. So going back to the to the website right here, watch the wait for this to upload, and then we will go back to the other settings. Okay, so I finished. Uploading. Now I'm going to upload the video now, actually to kill this background image right here. So I need to take that out and I'll go ahead and save its and you guys go see it's going to pop up this video cider. So if you guys want the video side would be playing in the background like this, you it needs to add that in. So the video slider is loading. Like I said, guys, it is a little slow. My apologies from the Internet. So that is how you would add in a video slider. So going back to that, um, if you guys actually want to change more settings, um, we can actually make this a Ah, we can copy this road. So, for example, this is say, you want to copy this entire row, you click on this blue section and others blue section right here would duplicate this entire road right here. Now I'm going to trash this, and let's just say you want to add in this road right here. Just indicated we can duplicate that row so you guys can see. That's, um you know, it's duplicating this entire row for us, so it saves a lot of the work for us. We don't have to go back and change like that. Okay. And another thing I want to show you guys to get those really cool effects that we had on this page right here. We can actually go back over here, and I'm gonna kill his video. Looks like it froze on me, but I'm going to actually kill this video background right here. And I actually gave you guys those background images. So going to upload. You see these these white images right here. So I'm going to actually just click on this one right here and click on upload an image. Now I'm going to change the background color. So over here, the background color, I'm going to change it. You see how I have Those are key designs. The reason why I have the ark designs is because that background is a photo shop of basically, um, this white section and the designer of the May was Gino from Monterey Premier. He created these. So credit goes out to him. So if you want to have this arc design, you know, and there's other ones you can have, you know, I can go to upload. Maybe I don't like this. And you see how I have that are designed. So by changing the background color, it's it's only applying to that section because these were Photoshopped, So only this section is white. Okay, you guys understand that you know of the logic there, so I'm going to actually go back to my background image changes to maybe something. It looks like this upload an image. And there you go. So now I have this really cool archy effect. Okay, Now, let's go ahead and go to the next section, which is this section right here, and we will be using the image module. So going back over here, I'm going to click on check. We're going to click on this section right here, a regular section. And just by looking at this section, I hope you guys know what this is. This is an image, a text module divider, a text module, a text module and a contact us. And I'm sorry, a button icon. So let's go ahead and create that. So it looks like a two column row just like that. And this section right here will be our image. So go ahead and find the image module, right? I think I pass it. I pass it. I think I passed the image module. Yeah, image for image. And I'm going to upload the image. And I'm going to use this white iPhone right here. And remember, I have this in the bonus section. So if you guys want to download all of these pictures to sort of help you out, that is where you would download it. So click on upload an image, and there you go. So our images right there? No, I'm going to actually Ah, save this changes. And now let's just say I want to get this cool effect where it looks like it's blending in like that. So if I want to get that effect, I just need to change his background color to black. So over here under section settings will change the background settings. It just black just like that. There you go. Now, over here, we can add in text and well and the text. So it's white, so it's easier to see on the eyes. Right? So you see how the Texas White now? So over here we will go ahead, click on this. We'll scroll down to adding a text module. We'll put it in the center and we'll put get a free iPhone, get a free iPhone. Now we can change the settings by going through the design, and I'm sorry. First off, we want to make this a header text just like that. Go to design and weaken goes to, you know, change our header fonts. But this is say, you want to change in the text color, so just go down to whites and there you go and we can go ahead and click on check. Now that's how to use the divider. So, like I said, you just add in a divider and just make it white. And let's go ahead and add in some more techs with models. So over here, click on this scroll down. Thio was the text modules right there. Well, center it and I'll add in some dummy content. It's like that's quick on pace. There you go. Now, maybe I want to go ahead and go to design again. Now, this is just regular text. So to change that, just go ahead and go down to the text font. So this section right here controls this section because this is just a basic text. So over here in the text color, we can go ahead and click on this, make it white. We can also control the font size. You know, we control control, the font of it just like that. That's a really ugly fonts, by the way. But we'll just change it to something like Laura. So there you go. Now we have a button right here. We can put now instead of actually creating a button module. Let's just copy this one. This is copy this one and then click on this and just drag it down right here. Oh, not like that. But we'll drag it down like that, and there you go. So that's another way. You can actually use the models to sort of copy them and just bring them around somewhere because it's much easier to do that than just create it all over again. And plus, this button matches this button. You kind of want all the buttons to sort of match on your website, right? So that's another reason why you'd want to use, uh, independent but module because you can copy it. So that's it for this lesson. Guys, let's go ahead and talk about the Parallax Effect in the next lecture, so I'll see there. 16. Parallax effect: Welcome. Welcome back, guys. So in this section we are going to talk all about the Parallax effect. Now a lot of people like the Parallax Effect because it really has Ah, cool, unique look to it And a lot of websites tend to do it. In fact, on this other website I have I have the actually in incorporated the Parallax Effect. So right off the back, I'm going to show you this other website I have right here. My internet is lowing a little slow today. It's loading slow today. So right here you can see that the you know the image follows the scroll like that. So you know, this is a good feature of the Parallax factual. The image starts to sort of disappear. So that is what we call is the true parallax effect. And there is also the CSS parallax effect. So I'm going Teoh, You know, make sure that this is unable to hear the truth, Parallax. Okay? And like I said, go ahead and look at the image. Now you can see the image. It sort of starts to, you know, follow or drag off the page. Now let's just go ahead and disable that show you the difference. So right now I'm just gonna disable it and you can see that it just doesn't move it all. Like this image does not move whatsoever. So if we scroll down, the image is going to stay the same Now, I'm also going to introduce you all to the CSS parallax and the uses for a lot of people misconception it because they don't understand how to properly use it. So we're off the back. Let's just say I come to this website right here, right, and I start to scroll down, and as I'm scrolling, we see your says be original, and then you start to skip scrolling and you see that paid start to kind of come down with it. But if I go back up, the page appears who see that? So that's a really cool effect. And a lot of people tend to use, like maybe falling plates or waterfalls to sort of help transition the the effect, because there are a lot of really cool uses for the CSS parallax effect and you guys can just google, you know, Parallax CSS examples to sort of give you guys ideas on how you guys can use the CSS parallax effect. So in a nutshell, guys, that is basically the two options for the true parallax and the parallax effect. So, like I said, this is a good example of the parallax effect on how I used it. So if you want to use is on your websites, it is a growing trend. So a lot of people tend to use a parallax effect because ah, lot of other people are using it because it looks kind of cool. All right, so that's it, guys, for the Parallax section, I'll see you all in the next lecture. 17. Quiz 1: Hey, guys. Welcome. So this is gonna be our first quiz. Now, by looking at this site, it looks pretty impressive, right? You're like, Wow, this looks pretty cool. It looks organizing looks clean. Now, this was made with the debate team, Believe it or not. Now a lot of people are saying, Man, that looks pretty cool. How did you make this? Right? Well, let's go have a quick overview of how he made this website. So right here, I introduced a landing page. Now I'm actually going Teoh, open up a second page and I'm going to click on Edit page and show you the modules here. And for those of you who are interested, you guys can actually purchase this layout. So we will talk about pre defined lay out a little bit later. But, um So, for example, right here I have my creative page right now. Right here. I have a full with slider. So this is my full with slider Now, right below that, you see these three little icons? So right off the back, I added a blurb, and I added a button below that. So I put in a blurb right here with some text and I put in a button. And then for the background color I put blue. And then I had a three waste column section, and what I did was I reduced the padding everywhere. So there is no space. He had says 00 And then I put 24 pictures on the bottom and left for zero. So I'm basically making it, so there is no space anywhere now. The reason why added 24 padding was because I want some space in between the button and this bar. So that's why I basically decided to put some patty. Now the next section is very simple. It is a text, a text we haven't image. And I added the according right, Here's remember early we're talking about uses for the accordion. Well, this is a good reason on why you would want to add in the accordion. Right. So next we have this section right here. So we're gonna go over here. We're gonna scroll down now. All of these guys is a call to action. Now it's a call to action, but I just didn't include the button. So where it says inter, but in text. I put nothing. I just wanted the fact that I can add in a title with some content and out in a background image, because the the called action gives you the option for a background image. So that's all I did. And over here I put three blurbs and just can see right here under the blurb We'll go ahead and scroll down and you can see the ah, you know, the text right here. Everything else under the advanced design settings. Like I said, I've just change the colors and I added some custom padding as well. So seeing this right here also for the for the teal row, I didn't really add any custom padding. But I reduced the gutter with I made it one. So everything is really nice and tight and snug. Do you see that? So next we have our um if I go over here, I'm gonna close this. We have our number counters, So this is just simply a number counter. That's it. And right here we have our pricing plans. So I just created, um, three pricing tables, and I just you know, I put a call to action, right? here. So this section right here is a call to action. But remember, I just didn't decide to use the button text. I just don't want I don't want button. I just wanted the header and the body text. That's it. And the next section we have here is the, um is another call to action and then we have a full with map. But this is what I really wanted to show you guys. So I will talk about pretty finally out in the last section, which I will give you a copy of this little section right here. But what this section is instead of using the divvy footer, I've actually just created my own. So this section right here is three text social media follow text, text in text. So social media follow text, text, text, then right here have three layers of text. So I've sort of create the illusion that this is actually a footer and it is a footer, except I created it with text modules. I didn't really want to use the day because this right here on the bottom is actually the divvy, um, the divvy footer. So do you see what I'm seeing right here. You don't have to use the stock footer with Davey. You can use your own. You can sort of create your own. Next we go to our about us page. So going back over here, I'm just going Teoh, go back to the website and we're going to follow the about us page. All right? And I'm a click on edit page. All right, so right here we have our ah, you know, this is a full with header. So this section right here is a full with header. If I scroll down, we have these bars. And like I said, it's just a bar counter, and it's just a call to action. So right here, call to action. And we have a, uh, a bar counters below this. We have you just by looking at it. We have three blurbs. So a three column row blurb, blurb, blurb, blurb, blurb, blurb Just like that. And we added a background color, a background image to that. So next you can see that we have are our call to action with our image right here. So call to action with an image. But remember, for the called action. We just didn't decide to put any sort of, um we just didn't put any. Ah, any button right there. So that's basically it. Now, the reason why this is a button is because actually created a text, and I just put a link in it, So I didn't use the button module. I don't want to make a button and seat up. There is no but in there. So next. Right here we have our dedicated support team, so you guys can see it's a call to action. And below that, we have our four number counters and I actually just put in the footer again. Okay, so next let's go to our services now. I'm not gonna go to the other page. You guys can already know what this is. This is a full with header. This right here are three blurbs just like that. Added a background image. This right here is the tab module. So this right here it has different tabs. And we talked about that. This right here is another call to action. But I just put in a background this right here is other call to action with an image, and I just reduce the padding. I have no space, and I just put a background color and this right here Is this basically three images so image, image, image, image, image, image. And you see that affected has I had this image to go to the left. This one come to the right and this one come from top to bottom. So that's that has that cool effect. Now, let me give it to you one more time, so I'm gonna refresh this page and we're going to scroll down and watch out for that. You see that effect right there? Me do one more time. You see that? So I've aligned them perfectly to make them, like, you know, looks like they're closing in. And then this right here is just a basic call to action. And our last section is our contact us peach. So a contact us page is a blurb blurb, blurb. We have three text layers right here, and we have our contact setting our contact peach, and it's basically a contact module, and I added some, you know, change the design of it and also right here this is the full with map module. So just by looking at that, you guys can sort of create anything that you can possibly think of with the Davy theme. In fact, this theme I'm sorry, this layout is actually a mimic of another layout. So what I usually do guys, is I actually just go on Google, and I just type in something like really cool layouts, you know, like, we'll just go to, like, Template Monster. Some like that. I would never buy anything from the site. Guys don't ever buy anything. The page builders were really, really bad. But you can get ideas. So going over here to WordPress themes. And, you know, you can sort of look at their templates and sort of just get ideas. And you can use these ideas to build your own on the divvy theme because these themes are very limited. Ah, lot of them. Their page bill. There's suck. You have to figure out what to do. And they're very I would never buy one. But you can still, you know, usually lay out like this right here. This right here is a call to action with just four blurbs below it. That's it. So there's no reason why you should ever, ever by another theme, the David theme is literally all you ever need. So just by looking at this, you can know where off the back that you're not buying a templates. You're buying like the whole package. You know, you're buying a weapon that can create anything that you can possibly think of. Okay, so that's my natural guys. Hope this quiz helped you out, I hope. Just sort of, you know, get you more ideas on how you can be a little bit more creative with TV theme. And I will have a few more on the way, so I will see you all later. 18. Various modules + techniques: guys, Welcome back. So now let's go ahead and go over some more of the module features to introduce you. Also, I'm gonna click on this plus icon, go to regular and we're gonna add this three layer icon right here. So we're going to add in an audio something like like this right here. And what this does is that it allows you to sort of create music. So all you need to do is upload your audio file right here. So preferably an MP four file. Click on upload. I don't even have in the audio files my computer, so I think I'm gonna find one. But I do have one. I think it's like Tobu or something like that. Uh, let's see here. It's not. It's, um no. All right, here. The Okay, So this is the MP three file. So if you have some music that you want to sort of show case or maybe create some sort of artistic websites, Um, this is a ah great module for you because you can actually introduce the, you know, the author, the song title, and it can play the song right on the website. So there's a lot of reasons why you'd want to use the audio file instead of linking them to some other websites because that's the worst idea is to link them to the website cause once we're off to your websites, they might start doing other things they might forget about your site, right? So I'm not click on upload an audio file, and I'll put myself Darrell Wilson and I'll put ah, what's the artist's name or the title? So this is actually called ah put crazy artist named Darrell Wilson if you have an album name, so this would be like a patty wack and, um, cover art image or else. So what cover our image you want there? So I'm going to put maybe this one right here. Now, the text color. We can actually have it lights or dark, but remember, you can actually change that in the design settings. So right here, I'll probably put like I want a blue color. And you know, you can change this Heidel font right there. You can change the, um ah, the caption font and also the album font as well. So there's a lot of customization that you can do it. Remember, this is the same exact settings as the other ones. So once you learn it for all of them, like I said, you letter for every single module. So I don't want to go through all of these settings because these are all the same. You know, the caption, the letter spacing, etcetera, the color, etcetera. So I'm just gonna leave it on, general and just click on close now, I can actually play these live on the website so you can hear that music just like that. There goes. Okay, sorry about that. I open that up. So if you want to add in that module like that, that's something that you can do And remember, you can duplicate it. Now, I'm gonna actually unlock this. I don't know why it does that. Sometimes it doesn't to sort of protect you, but, um, you know, I remember you can actually duplicate this. You can, you know, dragging over here. If you have multiple artists, you can have in a few, you know, like like I said, if you have a group of artists that you want to showcase, remember, you can You can actually spread this row out. Remember, row settings make this rifle with. There you go. So you can have it. Something like that's but that kinda looks a little too stretched out. Might leave them like that. Okay, so that is for the audio. Next, we're going to actually added a new section we're going to add in this little icon right here, and we're going to add in the accordion. So the accordion is basically that a feature that allows you to showcase different items into one block. So let me give you an example, but welcome. Welcome to our portfolio. And we can put something like, uh, check out this really cool text and you can design this. Like I said, you can change the ah, the toggle text color. You can change the background color for this. The icon color the toggle. Fond, the font size Uh, etcetera the spacing between this right here. So, like I said, these are all of these same settings now for the body font. If I click on this right here, is going to drop down this text right here. So this body font applies to when you click on the icon. Okay, so all this setting. Like I said, it's relatively the same the line height. You wanna have a background image into this? You can add that. So this is why you'd want to add in the accordion. You can add. It may be like, you know, I've actually seen this on a lot of websites. Like, for example. I'll give you a good example of it. We'll go to this website called pie host dot com, and we will goes. Teoh is wordpress design, or it is of the tutorials. Yeah, tutorials. So you see this right here? This was made with the accordion. So all you need to do, we just click on it and it drops down this really cool stuff. You can have YouTube video in there. You can have all sorts of cool stuff. So if you need If you want to have some like that, um you know, that's what you'd entered in. Remember, this is just a text. A divider, divider, accordion, according according accordion. So I hope by now you're starting to learn about when you see some websites that look like that. You can sort of understand them a little bit more. Okay, so we're going to create a new section, so that's basically a quick overview of the accordion. Next, we're going to actually introduce a new section so regular we'll just do like a one with section right there and we'll do the bar counters. The bar counters are very self explanatory, and they're very simple. So I'm going to actually add a new item. It will be just put in like our sales. We'll put what design? So you see this little bar counter right here? So let's just say, um, you know, I want to change that. Maybe around like 99 Okay? And, um, I could just, you know, I could make more of them. I can duplicate it to have a lot of them see that. So maybe you want to put a text module up here that says like our services. And then you can add in these text modules that look like that. Remember, you can change the text color of this toe lights. Oregon State is the dark. Remember, that's just like a quick feature. You can change the background color or the bar color, or you can take off percentages. You know, you could just put a number instead. Look something like this. But most people might want the percentages. Now, for the design settings, you can change the top bar patting So for example, you know, 10%. Yes. And see, there is quite the bars look much bigger now. And you contains the bottom, the bottom padding as well, So I'd probably just leave it, you know, around zero. This looks good. If you make the padding too much, the bars are really, really big. You can change the bar radius, so if you want it more circular, you can have it more circular. And you can change the title fonts, the title size, the texts, the space, etcetera. Now, for the percent fonts, that would be this fonts right here. You can change that to something that you'd want to change it as maybe an Arvo. See that? Or you can change the text color to maybe black, you know, so you can really get customizable and figure out how you'd want to change that text right there. So that's an overview of the bar counter. Now, let's just say you want to, like, have it under a few rows. You know you can do something like this, like this, or you can have it, you know, maybe even smaller. You know, remember, you can duplicate this row like that, Just drag and drop at one time, Dragging drawn up. Remember, It really just depends on you know how you wants to showcase your websites. And once you start learning how to use the modules, you'll be a genius. Remember, you can add a background color to this, so this blue section controls the background color. So if I want out of background color, you know, we can add something. It looks like this right here. No, it looks pretty cool, you know? So maybe you'd want to have it looked like this. And up here, you can add in a text model that says, like, our services, you know, And here you can list a bunch of your achievements. Um, you know, something? Looks like that's so that's a quick overview of the audio, the accordion and the, um you know, the, uh what's it called? The design setting. So let me give you another example of that setting to show you what it looks like on another websites. So I'm going to go, Teoh. See? Right here. Not this one. Right here. Leave it is see here. Uh, services, is that right? Yeah. So let's just say, for example, you want to do that again. So I must go down, see how the bars ago of their So right here. I have some text, have more text, and I just have the bars. So that's another way you can sort of implement the bars to make it look good on your website by having maybe a text on this side and then, you know, text on that side, etcetera. So, um, let's go on to the next section where we'll talk about I'm sure a lot of the modules, but we will talk about how to do custom padding and making no space in between images, so I'll see you all there. Hey, guys. So I want to give you some more strategies on how you can sort of use the theme to make some really cool images. So right here you have this, like, square design layout, and you have this image, this text with a call to action. That's video slider with a call to action and another image. So show you how we can do that. And there's various ways. So over here I'm going to click on this plus icon, we're gonna click on Regular, and we're gonna do a two column row. So we have two columns. Okay, Now, over here, I'm going to add in just a race, a basic image. So I'm going to go scroll down right here and that in an image, and I'll go ahead and upload an image such as, um, it looks like I know this right here. All rights, whatever image there. And I'm going to just actually close this now, over here, I'm going to add in a call to action, and then I'll put in like, uh, learn all about the TV theme and then put a bunch in your l and then, uh, learn more. And, of course, we can change the background color, but I don't really want a background color. So we're gonna take that out and we're gonna make the text, uh, light. And also from from here you can add in more text, so maybe live in some dummy text. I close my website Demi text. I'm going to open this up and go ahead and copy. That's and we'll go back over here and just Adam some basic dummy text. So it looks like that, you know, And we might want Teoh. No, it make this look a little bit darker so we can change all the settings. Right? Here's remember, this is for the heading font. This is a regular fund. So maybe I want to change this darker. That maybe black. It looks like that is little darker. We change. It blew. So leave it like that right now. Okay? Now, to get that cool effect that we have before, we need to actually change the padding for all of this. So we need two, basically, delete all of the padding, so I'll show you have to do that right now. So over here in this gear icon, we'll click on that. You want to actually make this row full with and want to a actually Ah, reduce all the custom gutter. So we want We don't want any space. That's what the gutter does. It basically puts it all together. Now we actually want to delete all the padding right here, so I'll go ahead and just lead all the padding right there. So now there is no space between the modules us and see that. And you might want this for the ah, for the mobile as well. So right now we have no space. But there are some space up here, and there is some space down here, so we actually need to go onto this module right here and delete the padding as well. Remember, the padding is the space. So I'm telling them I don't want any space anywhere, so I'll put 000 and zero. All right, so click on checks. So now we have the image that is booked together Now, on this section right here, we might need to sort of, you know, push it down a little bit because, um, you know, the model doesn't look good like that, You know, it's a little, um it's a little bunched up, you know? It doesn't like, you know, it doesn't look like it's supposed to, so we can add a margin. So over here, into the margin, we can add, maybe, like a 10% margin or 30% margin to sort of push, push our text down, so we don't want it there. So right there. So now you guys can see that we have this really cool effect that the image is big and the Texas there. Now, let's just say I want to add in another one, but I want to switch him around, Remember, we're using the divvy thing. We could do anything with this thing. So we're just going to just duplicate this row just like that, and I'm going to actually grab this whole section. So grab this. Put it over here. It's a little messy, but don't worry. And then we're going to take this section, and we're going to put it right over here. Just like that? No, it just like this First a little. You should usually do it. So you see, like a blue icon. See if I can do that again. There goes right there. Okay, so now we have it like that. So that is another way you can have it. And remember, we can add in a background image to this. We can add in a background video. We can add a background video over here, so maybe I want to add in a background video over here. So I'll click on this section, actually, Yeah. I'll click on the blue section, the blue section, and we will actually put in an MP four video of the purple ink and we'll upload it. Now, the reason why I put it on the background right there is because it's going to apply it to the entire background. You see that? So that looks pretty cool, because I want to add that effect. You can do that. Remember, On this side, it will not show. Okay, because this image is not transparent. Okay, So it will only show on this side. So that's how you get that effect of the video playing on Lee on one background. Okay, so I hope that helps you know, for your designs. Because this is a pretty pretty cool design you can add into a lot of other websites. So I'm going to actually, um, probably take out the video now and then are so just save it, I'll just save it. And then from here, we will go on to the next lecture. Actually, yeah, the next lecture, which is the the images. So I will see you all there. Hey, guys, Welcome back. So in this lecture, we're going to add in some images, and we are going to have this cool effect of them having no space. Now, let me just show you. So you guys can understand. This is another technique that you guys might want to do for your website. So I'm going to click on added a new section right here. I'm gonna click on regular, and I'm gonna add four bars right here. So I have four right here and now under here. I'm just gonna add in images for all of them. So I'm gonna add an image, upload an image like this one. There you go. So I have my image there now. I'm actually just gonna go ahead and duplicate this one. So I'm just going to copy this maybe three or four times, and I'm just going to drag it over here to look like this. Look like that's and look like this. So maybe you want to actually do what we did up here except with these four images. So to do that, we would do the same exact thing. Now we just have to add, instead of adding to models without and four. So if I go over here to this module setting but make this row full with, we'll add in the custom gutter. Well, I didn't just one. And now I'm going to just reduce the padding on all these images right here. So under the custom padding will do 0000 which will reduce the padding between the images and Alice. Just say I want to delete the padding up here. Same thing. Icon up here. Scroll down to patting stew 0000 And there you go. So now we have these four images, right? They remember you can duplicate the row and make it look really cool. So this is another way how you can sort of style and design your website. So basically, I just created these images and I just made no space in between them. So if you're looking for this sort of effect, that's another way to approach him. OK, so that was a pretty quick lecture, but I just wanted to show you, you know, some different customizable features. So in the next lecture, we will talk more about other modules. Okay, so I'll see you all there 19. Divi slider and video modules: Hey, guys, welcome back. So in this lecture, we're going to talk about the video slider, the video module and also the Devi slider itself. Now really quick, let's do a quick little overview. Um, right here. This is a fool with sliders. Yes, can see it's full with. And ah, you know, you can add in your text we added a video background. This next section right here is four blurbs. So this is four blurbs and we made it basically full with, So it has that bigger effect. Thes are the bar counters and this is a text module. So just by looking at it, I hope you guys can understand the logic behind it. So this is probably a two column row. You know, there's two columns. This is four and this is just a full with module. Now let's go over the videos fighters. And then lastly, the slider, which is, um, might be one of your most frequently used. So over here under add new section, I'm going to do regular and I'm gonna add in the two section right here. Now I'm gonna scroll down Teoh, you can do video right here, and let's just say you have, ah YouTube video or you have your own video. But depending on your server, whatever hosting you're using some servers. Max is like 64 megabytes, 1 28 megabytes. I know Blue Host is only 32 megabytes. That's pretty small. So if you have a small server, they give you a very small space. You could just use the URL. So I'm just going to pace that pace to Europe for that video in there. And there you go. So there is my video. So if you're looking for something like that, um, you know, you can enter that in. Remember, this is a two with module, so you can make it full with by just creating, you know, a one column row and then reducing the padding everywhere, like we talked about in just the previous lecture. So that is basically ah, very basic over view the video settings and there is no really what you can design it, you know, it's just up. It's just a video, right? So I'm gonna close this now, and I'm going Teoh trash this and we're going to use the other module, which was the video slider module, and it's really to be very similar to the one previously. So right off the back, we're just gonna actually paces. But the only difference between this module and the one we had before is the fact that you can actually create multiple videos as well. So by over here, I'm going t o see right here. I'm gonna go ahead and create. Maybe, you know, a few these right here and click on safe so my video isn't showing. Should be showing. Let me go ahead and do that one more time. Sometimes if that ever happens, guys, weird stuff happens. Just go ahead and just delete them just like that, Okay? And we'll add a new item again. And like I said, we'll go ahead and just paste it in there and we'll go ahead and let the visual builder load. And there you go. So remember, if that ever happens, guys just, you know, we do it. You know, sometimes you just get random errors like that. Trust me, people are like you never get errors, Darrell on any of your tutorials and I go, Yeah, I do get him all the time. You know, So remember, if you want to duplicate this now, we have multiple versions of the video, and if somebody wants, you can click on this and it will slide to the next video. Now, these are all the same videos, so that's why it looks like that. So if you're looking for something like this where you want people to continually slide through, maybe videos that you have this video spider module would be your main solution. And you can also add in a cover to it. So, you know, like on other like channels like YouTube or something where they have like that, that thumbnail color. So if you go over here, you can add in an image over the euro, So basically the image that you'd wants to cover instead. Okay. So I'm gonna close this right here, and I'm gonna delete this module, and next, we're going to talk about the slider module, which was which would be a more common one. So I'm going to actually scroll down right here to go to the Cider Module, and there are some cool features about it. But there are a lot I recommend to do it my way because, um, depending on your needs, you can get kind of lost with the slider. So let me discuss with that I'm talking about So the heading I'm gonna put welcome to the Debbie thing and the button text put. Contact us the you are. Well, just going for something blank. Now for the background image you can add in any sort of image you want. So if you click on upload, I'm going to select this picture of this night sky right here. And there you go. So you can have this cool slider, and remember, you can make it full with you can make it stretch across the page. This is just the basic standard settings. So, um, you know the background image position I would. I have a lot of, like, you know, mixed feelings about it because you can position to worry where you want it to be, but I would just leave. It is default. You know, I think default is probably the most standard. But remember, you can do like the bottom center. You know, you can really get in depth on where you want the theme to see now the background image size you can change it, Teoh Cover actual and and Ah, fits. But I would just leave it as default. I would really just leave the defaults. I have mixed feelings with the slider settings, so we're going to leave it as that. You can actually have a background color. But that's only if you didn't select the background image. Um, for a slide image you can add in, Um, you can add in like a little icon right here. So, for example, will show you if we click on this upload, we can add in something like, Ah, see a lot of this little icon of the divvy theme And there you go. So you're gonna have something that looks like this. And remember, we could make this, uh, this thing full with. So, um, you know, that's another reason why. And you can also have the slide image, vertical alignment. Now, the reason why you might have it at the bottom is because some of those people have, like, those websites where they have, like the phone sticking out of like the bottom half. So if you want that effect, you can have it to look something like put the image on the bottom so the image will be stuck to the bottom. Okay, but for this one, we're just gonna leave it a center. And the rest of this is basically saying, you know, the text color. Remember, we can also have a video slider, so I'm going to click on MP four right here, click on upload and go ahead and add in a background video to it so you can have some that looks like this right here. Now, Really quickly. You can Adam or content right here. So right here you can put in like, I'm gonna grab this dummy text right here. It looks like this, and I'm just gonna go ahead and, um, I'm gonna go ahead now and pace it within this are slider. So the bottom, remember, you can add in, You know, you can add in like, you know, Ah, text a media. You can add in more pictures. You can add in all sorts of stuff to your slider. There is no limitations on what you can do. So the next you have your design, which you have like the text overlay border radius, you can add a new overlay to your text. So, for example, will go back to our general settings right here, and we're gonna scroll up, and there is something called the text overlay. So first off, use the background overlay. If I click on yes, and I go ahead and scroll through some of these, you're gonna get this overlay, but it only applies to the images. So let me take off the video to show you what I'm talking about. So right now, I'm going to go back over here to the border overlay. Remember, the border overlay color only applies to pictures and ah, no pictures. So if I go down like this, you're going to see the, uh, the picture start to slowly come in. They can also have a text. Overly. So some. It looks like this right here where you can have the overlay of the text right here. So that's another way you can sort of design your websites. Now, I'm going to get rid of the slide image right here, and I'm going to actually add in the video slider just like that, and I'm gonna click on safe. So now we have the picture of our you know our slider. We have a video slide. Remember, you can add inm or, you know, you can add it as many spiders as you want, and then if they click on it, will be brought to the next slider. So this can give you multiple slider effects. Now, if you want to basically say, you know, I kind of want this fool with, you know, it's it's it's kind of small, right? Simple. We just need to go on the road settings make this full with and make the custom gutter with probably around one just like that. All right, so I'm going to click on Save, and it does glitch out like that sometimes. So it does. Look, we're sometimes using the visual builder, but, you know, half the back, you know, you can design your side like this. And if you want to get rid of the patting right here on the bottom, remember, you're gonna go to your blue row and reduce the padding everywhere. So you just put 0000 as far as that patting right there. And remember, you can duplicate this row. You can, you know, you can have like another slider right below its That looks like this right here. So, like I said, there's a lot of ways you can customize Thea Davey slider. So, in a nutshell, guys, that's probably it for the slider. You can add all sorts of cool content you can add in video sliders. You can add in all sorts of really cool stuff. And if you want that large effect, like I said, just go to the blue and the Thiel icon and just do zero padding for everything. And it will become like a snug. It'll be really tight. There will be no white spaces anywhere. Okay, so let me give you one more quick example, like over here, and I'm gonna go ahead and just do zero on the bottoms. You on the rights you guys can see right there. The padding was gone. So the padding is gone up here. I'll go ahead and just delete this one, and we'll go ahead and squeeze it up just like that. All right, So there you go. In a nutshell. That is how you reduce all the padding. So we might actually want to get that background right there. Let's see here, go to the settings. So I have the background still on there. I might have it. Yeah, yeah, the back room. But I should probably delete that. So that image will not load because you guys saw the image load right there. So that will take off the way it loads. And also in this one, too. Make sure make sure you have a video background. Guys don't have a background image. Wells is going to give you that effects. So this is how you would design the Devi slider? It's very simple to use. It's very easy, and it really gets its job done pretty well. And you can also customize the button like we talked about earlier. By now, you guys probably know how to customize the but module. So that's you guys for the sliders and the video sliders. Um, in the next section, we're going to cover a little bit more modules. Well, I got maybe around seven or eight modules left, and then we'll talk about, um, some more of the features and a limit more of the advanced features for the Davy theme. All right, so I will see you all there 20. Profile: Hey, guys, welcome back. So in this lecture, we're going to go over some more modules and also how you can properly utilize modules. Now, there is a discrepancy between two of these modules, which this is the profile and also the testimonial section, and I will go over both and give you the example of how they both differ from each other. So first, I'm going to click on this right here and create a new row. I'm gonna make this regular, and I'm gonna put three right here. I'm going to scroll down, and we're going to go to the testimonial section right here. All right, So the author name. I'm gonna put Darrell Wilson WordPress designer company name. I'll just put, um, Web design, which was my one of my other companies. And then you are well, which yoro is like your website. So, www dot darrell wilson dot com That is a your l. So you would enter in your website right there. And you have the option to open the If you click on its open that and a new page or just redirect. So I probably want a new tat right now for the portrait image or else I'm going to upload this. And I'm just gonna put an image of ah, this guy right here, actually know this guy right here and click on upload an image so you guys can see that the image is ah, right there. And from here, we can do. Ah, you want the quote icon visible or hidden. So, for example, you see how I have that icon right there. We can change it so it's visible or hidden. You can add in a background color. So right now we have no background color, and you can have the text may be dark, or you can actually have it where it is. Ah, dark like you're, ah, a background color. You can change the background color. So maybe you want green. You want blue, right? Maybe a light blue. Something like that for now. And you can have the text orientation in the center. You can have it to the right or justified and right here you can give a brief description about the person, you know, like, uh, no Darryl. See, right here. So he has worked. I'll just actually maybe do some dummy textually quick that always works. I like dummy text. And most people use dummy tax because it just it creates structure without putting like to think about words. It's just, you know, Lauren ipsum all this random, right? I'm text we got So I'm going to actually just go ahead and just slap that bad boy in there . So now we have text right there. That will say, You know, this company is amazing, etcetera, and they will talk about the company. So that is a way you can you know how to have a testimonial. Now, let's go to the design settings. So the quote icon color on here, the top right here. You can actually change this color right here. Now, maybe you want it to be like green or read or something like that. Next, you have your portrait radius border so you can actually change the border radius. You can make it more round or circle. Right now, it's like a square. You could make it more circular. You can change the portrait height as well. So it looks like that's so are like that really depends on you know what you're going for. And like I said, I know this looks weird, but guys, there is always a reason for something. Trust me. I've worked on so many websites for even the most strangest modules. Look amazing. Just depending on how you fit it into your website. And right here you guys contains the body fonts, the body text color and also the letter spacing. So, like I said, the models are pretty redundant at this point. You guys, we're starting to learn more about the modules, and you can add in a background image to this section if you'd like, but preferably not. You can add in a border, and you can have, like, a border color around this If you want, see how there's a border. Now, you can have this over your, um, over your profile, and you can have the border with you could make it big, or you could make it small. However you want to design it, you can change also the border style. Maybe you want doubled or you want it, you know, ridged. Or, you know you can have it solid or even dotted. Yeah, Now it's like, dotted like that. So you can also change the custom margin for example, 10%. You guys can see that it's starting to push down. Or you can do, you know, 10% to this side, which would be like that. So you guys can sort of understand how Teoh, you know, use the margin and use the percent sign. Or you can use pixels so you can use pixels or you can use percent. I like percent more because it's little bit more powerful and against the idea across. So this right here is the testimonial settings. And like I said, that is basically the overview of the testimonial sendings. Now, there is another one that looks very similar to this, which is this one right here. But this is actually the profile. So this would be something where you're showcasing your team members. Now, let me give you an example. So over here in this column row, I'm just gonna go ahead and maybe out of one more. And I'm just gonna added another one right here. So going over here. So this is the profile module. It's right. The person module, the person. So I'll do the same thing. Darrell Wilson, WordPress designer. The image you are l will, go ahead. Just upload an image will use. Maybe this guy right here again. All right, so then right here you can have an animation. So if you want this picture to sort of fade in or go left to right or right to left, you can do that right there. You can change the you know, the text color. And let's say you have a Facebook profile. You just put the girl in there. But for now, I'm gonna use this little symbol, a Twitter profile, same thing. So the URL, which is the Web address for your Twitter account. You put that in there. Same thing with Google plus and same thing with the ah linked in profile. And right here you can add in some more text. Let's go and pay something in there that looks just like that. And remember, you can add in media members says admitted. That means you can add images. So if you want to add more images or you want to add anything in this box, you can do that. Next. Let's go to our design settings and you can change the icon color. So maybe you want this blue So you see, the icons now are blue You can change the hover over color So let's say right now they're blue, right? But let's say I want a black when I hover over them. They see how now they're black For those of you who are colorblind I'm sorry, but I did have a client was color blind. He's like, I don't see it might Well, I'm doing it. It's there. And right here. You changed the header font. So right here is the header font. And, um you know, you can change the letter height, the spacing, and right here you would change the body font. So all these information is right here to change the body fonts. You can add in a background color to this one at a background color to that, Or you can add in a background image. Um, you know, But if you're in the background image, you'd probably need, like a Really? I don't know, small one, right? I just don't see. I would probably add it on the blue section right here. I wouldn't really added the, uh you know, I would not add it in this one, but they give you the option to do that nonetheless, So it does service purpose. So, um, that's about it. Now we'll click on check. So that is an overview of how you can add this in. And remember, let's just say you wants to, like, duplicate this road. Maybe you have 18 members. You can just basically, you know, uh, you know, just take out the picture, put a different description in, and let's just say you want to give this another look, Let's say we wanna make this full with. So I click on this and make it full with and there you go. So this looks I think it looks a little bit better, you know, And remember, you can add in a background image or ah, color so you can go ahead over here on the blue icon and maybe added in a background color . It looks like that now I do have these white things right there, so probably want to blend it in like that to make it look like that. Right? So that is an overview of the persons and the profile module. Next, we're going to use the toggle module, which is, uh, I'm going to go ahead and let this. Now you guys get the idea, right? All right. So I'm going to actually do the toggle module now. So I'm gonna add in your section regular section. I'm gonna click on this one right here and scroll down to the toggle module, which is right here. And this is very similar toe to the accordion module. So here, gonna put, for example, that's a good title. Do you want to know more about our company? And you can have this close or open now, maybe the example of closed. So I entered in text right there. But you probably can't see it because we have toe open this. So if I click on this now, it's going to show that text. And this website is another great idea of the accordion. I'm sorry, the toggle module. So it's just like that. And like I said, you can insert videos. You can insert all sorts of cool stuff in there. You can actually put in pictures. You can add in whatever you want in this module right here. Maybe you want to talk about like, our previous work. It's all about being creative. Guys That's what the TV theme is mostly about. Because other themes are more like templates. You really can't do much. But this theme just allows you to, you know, use your imagination. The sky's the limit here, you know, whatever you can possibly think of. And later on, I will have another tutorial on a more advanced lecture. Basically, I'm going to show you a website, and I want you to tell me what modules that we're gonna put it. Okay, so it's gonna be pretty fun. So over here, we're going. Teoh. I mean, this is basically, I guess, said it's a pretty, pretty self explanatory module. You know, you can actually change the background, you know, you can wear design, you can open the toggle background color. So, for example, let's say I want this blue. Now, if I open this, it's going to see, like, just look, it'll look just like that. So you know the open toggle text color. Now, these options guys are very self explanatory. You know, the icon color. This right here would be the icon. The title funds the title font size, the title for text color, the spacing, the height, all this information is pretty obvious, so I really don't want to go over it now. The body, foreign sizes, this information right here. So you want to change this information that would be considered the body font. Okay. And let's just say you mess around with it. Nothing changes. Just close the visual builder and reopen it. Sometimes it bugs out and things happen. Okay, so, um, that is basically an overview of the toggle module guys. And like I said, this is a good example. Pie host is a great example of using the toggle module. Because this is with the Davy theme, like, you know, do you take credit cards? You know, click on it. Yes. Okay. Cool. They take a visa. MasterCard. Awesome. So that is another reason, you know, it's good for your fax page. You know, this is ah, great fax page, and that's a great idea of how to use the Targamadze cause a lot of people ask me No, like while. But I use that It says brother, trust me, there's always a reason to use one of these modules. You just got to kind of think about it. You know, there's there's ways. So next let's go ahead and, um, running over one more icon. So we're gonna go to, ERM start one more module, I'm going to add new section regular, but in one row, and we're going to go over the, um, the tab section. So it's a little bit similar to the toggle section. Now the tab section a little bit different. So this right here is considered the tab section. So maybe you have certain work you want to show off or you want to tell people about something. This is where you would do it. So just like that, we're gonna go back over here, and we're gonna add a new item. So we're gonna put like, uh, maybe our services and then right here, we can put in some texts just like that. Now you see how it's a little similar to this one except right here, there's a tab so we can actually select something. Now, there's another way to use this. Maybe you want to like adding a picture over here and then put your your, ah, your tab service over here. You know, it's all about being creative, you know, it's really all about thinking what you can possibly do, And you can add in an image right here. So we'll add an immediate image, just like the ones we saw previously. It's a lot in this phone. I'll click on Select. Now, you see that our services is right there. So, uh, the Texas little broken right there. So maybe we need to maybe change that up. No center, maybe twice. And then we'll probably put it in right there, just like that. Okay, Now, let's just say you want added another one. We can add in another one, put in, um, our website and then once again, all added media image. And maybe this time I will go ahead and add in something like, uh, I don't know what's a good with a lot of good pictures here, huh? Picture this girl. That's a really big image, actually. So maybe something like, uh, this right here a lot in this one, and I can select and then I'll go ahead and press on you enter twice. Oops. I deleted it. Sorry. Sorry, guys. So I'm going to put that back in now. I'm going to actually press enter twice, and then added some text right here. Pace that by boy in and click on close. All right, so now I have two tabs. So let's see how it looks now. So right here says our website or our service and then right here we have our website just like that. So the image shows up, we have some text over it now. You can also change the color of everything you know. You can change the color of every single feature. So on the design you can have the active tab background color, which is the active one that they're currently on. If you want it, you know yellow, you know, see how it's active right now. So they click on it. They know their clicked on our website and you have the inactive tab color. So maybe the ones that are not active, you know, like this one right here. It's not active and you can change the tab font. You can change the font size, the text color and the spacing and the line height, etcetera. So this is basically an overview of all the options in there. But you can also change in other options a sfar as inside the module. So we over designed right here. We click on this icon now we cook on design. We can change what is inside of this section right here. So you know, we can add It may be like a background color. Or you can add in a picture you can add in a background image. All of that information you can probably let's add in a background image. Maybe we'll see how this looks. My look tacky. We'll see. That's not too bad. Now this image guys is way too large for this, so you probably have to resize something a little bit smaller. You know, maybe adding something like, um, like this one might fit. You know, this one's like that, you know, except it's it's squared. But I think the color would probably be your best bets. You know, adding a background color like some like this right here. You know, like out of the light Pete's color. So I think that would look a little bit better, so that is basically an overview of the tab module. Like I said, there's probably other way we can make this look good. So maybe you wanted to have, like, you know, like a picture here. Maybe. And then your services tabs right here to talk about your service and maybe something here . And you can probably make it full with and reduce the custom gutter with to sort of get a better point across. So now you'd probably have something right here saying, like, you know, check out why our services are amazing. And then you would have this section where you can click on the according and browse through some of the really cool features. Okay, so that's a quick overview. Guys of some of the modules. You guys have any questions about it? Feel free to let me know. Um, let's go on to the next section where we will talk about, ah, more modules. And we will soon be done with most of the modules and we will get into more of the advanced section. So I will see you all there 21. Quiz 2: Hey, guys, welcome back. And this is going to be another quiz. So I want you guys to sort of understand the logic of the Davy theme. So this website right here was made with the divvy theme. Believe they're not. It was all made with Debbie. Anything is possible with the TV theme. So let's go over some of the models that I used to see if you guys can understand how to use it. So right here I used a full of slider. You can see a full list slider. Next. We have our other section, so I just have a call to action, which I just didn't include the button. I like using the called actions because I guess it is just a header text and just a basic text. And right here I have three number counters and what I did was I just put a border around them. That's all I did. Next. You have a ah, right here. You have a divider. So you see how I have the black divider sort of giving like a look to it right here. Added another call to action. And I have gallery, so I have four galleries, and I reduced the padding on all of them. So it looks, you know, like, really, you know, crunched together. And like I said, it just looks really It looks really good, you know? Like the way it looks. So you can go ahead and go through some of the pictures like that right here. We have meet the team, and right here I just entered a call to action. I put three pictures of person, so three person modules and I just reduced the padding. So they're all against each other. That looks just like that. So next we're gonna go to our about us page. So I go over here to the ah, the about us page, and we're going to look at what I did right here. So over here, I'm gonna go to my, uh, edit page. So right here. I used a, um a ah full with screen right here. So you can go check out the full with header. And all they did was a line of text to the rights and we scroll down and you guys can see the call to action with the text. So the called action, remember, you have to use the button. You know, I just like the way it looks right there. So right here. I added in a text module. And, um, you know, right above that, I put a button. So I added a button text right here, and I put in more of the ah, the gallery modules right there. So you have to see the galley models and they chained by themselves because I have it under a certain second. So that looks really neat right here. That's obviously a bar counter call to action. A call to action with the text module text module, text model, text module. So you guys will see right here was right. It's a blurb. So a blurb, blurb, blurb, blurb and I used a specialty section. Now, instead of the blurb guys, I just didn't decide to put a Nikon, remember, You can sort of use use these in any way you can think of. So I put it in the blur modules, but I just didn't put a Nikon. So next we have our services, and I don't want to tell you guys what I use anymore. I want you guys to sort of think critically and understand what I used. So right here I used a full with header and I lined the text. The left down here I used, um, I used of the blurbs again, So I put a blurb blurb blurb, and I just didn't put in the icon right here. I used a background image, and I just I put in, um, I put in the Ah, this is ah, slider module. So I just basically put in this white background right here. The text and I changed the butts and logo next. Right here. I added in a call to action with to text modules. This is a button with four gallery models right there. Okay. Next, we're gonna go to our pricing. This is also a full with header where I line the text to the left. I just put in a background image. This right here is a ah, call to action module. Right here. It's a full with call to action module. This is the three pricing tables which I may look pretty cool. And this right here again is the blurbs. This right here is a um it's a ah divider. And I added the ah slider right here. So you guys can see it looks like a testimony section, but it is basically just a slider, so that's pretty cool. And then right here, we added in our testimonials. So these are testimonial icons. This is a button, and this is again the gallery. Lastly, we have our contact us page, which is a ah, it's a map. But that is just the regular module, not the full with we have a call to action. A call to action. A text here. I inserted the social media icons, the contact us for my here and then right here we have the four galleries, which I reduce all the padding and another button. Okay, so I hope that helps you guys understand the logic of Didi. And maybe you guys can create similar Web. Has looked like this very simply, very easily. Okay, so that's it for my quiz. Guys. Let's go on to the next lectures. I will see you all there 22. Social icons and pricing tables: How do you guys welcome back. So we're going to cover some more modules now We're going to come cover over some of the social media modules. We're going to cover the search bar module and maybe one or two others. So I'm going to actually introduce you to the social icons, which are really, really cool. Now, there's a lot of ways you can add in the social icons. For example, this page right here, maybe you have artists or something, and you want to add in social icons below their name. So let me show you how we can add these in. It's very simple. It's very easy to use. So I'm going to actually started in your section. Actually, I'll actually Syria here. I'm like, actually just adding one below these guys and just go ahead and scroll down. Now I'm going to look for the social media icons, and these are very good social media follow icons. They're really nice. So right here, click on at a new item now. Glad select a network. So they have a majority of these social networks on the internet. So I was something on Facebook, and right here you entering your Facebook, your Facebook, your l and you can actually change the icon color so you can see right here in this section right here that we can actually change it to whatever we like. So I'll leave. It probably is blue. Now, what we can also do is add in another module which basically allows us to follow it. So right now you just see the icon, right? But maybe you want to create something that you know has engagement. So if you click on the follow button now you see where it says follow. So they click on this right there. They will be brought to the, um, to the websites or to your your social media page, and you can do your opens in the same window or in a new tab. And I always recommend new tab because the you tab will actually keep the site open and open up another one because you kind of want to keep them on your website as long as possible. Right now, you can also change the, um, the link shape. So if you want a circle now, a circle or you can have it as a rectangle So remember, over here, you can add in various ones, you know, you can add in tons of them. And let's just say you want to add in another one, but maybe a different network. So remember this thing? This module has a majority of all the networks, Um, you know, for a social media. So right here, I'm going to go to add a new item and probably put in YouTube. And there you go. So you were just entering your YouTube channel, and now you can, you know, put your your your channel right there. And if they click on, it, will be brought to their channel to your channel. So that is a basic overview of the social media following settings. And like I said, there's a lot of ways you can add them in. Maybe you can delete these right here, these boring icons and put the's right below it. You can do that as well. I guess it over here. I added them in. So right here. You can see all the various icons below these people. So maybe, you know you want to advertise these artists. So let's go on Earth to the search bar next, and I'll tell you how you can use it. So I was going to create a new one right here, and I'll just do a regular setting and I'll click on this module and I'll go ahead and scroll down to our search bar just like that. Now, this is mainly for the blawg, but it also does a directory of your entire website. So first off you can have the text color dark or you can have it. Lights. You can have the text orientation to the rights or to the center or to the left something. It looks like that now the reason why it's expectations is to go to the center is because the pages already full with. So also, you can actually exclude pages. Maybe you don't want surgeon pages, you know, included maybe, for example, you only want people to search the blawg. So if you exclude pages on Lee, the blawg will show up in the search. Now, maybe you don't want your block to show up, so you just click on exclude posts and you can actually hide the button. Ah, but you know where they wouldn't recommend doing that. And You can also exclude categories, so we will talk a little bit more about the blogging categories in a little bit later section. But it's very important to categories your block posts, because then you can be safely navigating easier. Um, play stakeholder text so you can have something you know, right there. Hover over. It's like search. Now maybe, and I guess that you can disable this on the phone with the tablet, etcetera, and you can also change the design so you can have the max with that something like 300 pixels, you know, which would be very, very small. So yes, he is very, very small, or you can have it bigger. So maybe 500 pixels like that's and you can also change the border and background color. So if you want to change the color, you can do it like that. You can input a field color background, which would be right there, or the placeholder color, and you can actually have the A different fonts. So, just like before we change our phones, you can change the font size. You can change the text color of that or the button font, which is this right here. So maybe I wanted to change it to white. Maybe because we have a Ah, you know, a darker background. So you can see it's a search. So I'm actually just gonna go ahead now and close this because that is a majority of the options. So I'm just gonna go ahead, click on close. Now, let's actually search for something, and I'm gonna actually open this, save it, and then we're going to use the search bar live on our website. So I'm gonna click on exit visual builder, and we're gonna scroll down right here until we see the search. Now. So I'm gonna pen to put in something like me. And this is search right there. So now it's going to give us every page or something that has to deal with main on on these posts right here. So this would be a better way to navigate the Web site if you want people to find searching something easier. So let's just say OK, they are services fitness page. Okay, cool. This is what I was looking for and this would be on the websites. So if you're if you want them, Teoh you know, go somewhere. Um, that would be ideal to put in the search bar. If you don't want to add in the search bar, you don't have to. And later on, guys, I will. Actually, you see this whole layout? I will discuss how to import this layout, and I'll actually gave it to you guys for free for watching this tutorial because you guys were amazing. Okay, so that would be in a later lecture that when we talk about pre made layouts, So I'm actually gonna go ahead and go back now to my, um to my main page over here. And we are going to actually, uh, insert another module. So we went over the social media icons. We went over the search bar. I believe there was one more I wanted to go over in this in this lecture. So I'm going to enter the big one right here, and I'm gonna go ahead and scroll down. Um, let me see here. So, guys, for this tutorial, I will not be talking about the shop module. But the reason why is because the shot module guys, it is a much bigger ballpark because we'll have to install what we call is more commerce plug in and we will have to create products. And it can be like another nine. Our tutorial actually have talk about Luke commerce, and it takes me about four or five hours, but I will provide you guys with a code which will give you guys a discount. All right, I might actually give it from free. I'm not really sure yet on my future to Tora, because a lot of people have been asking me about you know how to use the shot module. How do you make the e commerce website? And I says is a little different than just using. Um, you know, wordpress, you know, like we're using It involves a lot more detail, but it's very simple. It's not difficult. It just takes time to learn it. So next we're gonna go over the pricing tables right here, so we'll click on pricing tables, and the press and table guys are very easy to use. And, um, I'll give you an example of how we can make some really cool ones. So clicking on add new items now, right here. Let's just go ahead and put something like, you know, basic package Subtitle Learn more now like that are actually, um, for starters, the currency put as dollar and per month, maybe one charge on a per monthly basis. The price. So how much does this cost? Maybe around $99 a month. The butts in your URL. So we're gonna go ahead and put in a You are a button. And what butts and text you want this to say? So by now, maybe right now, over here, to the content, you can add it. Something like, you know, Ah, one month s CEO. Enter. Um, you know, 500 article page. We can put in something like, um, I don't know, three directory submissions, 500 social media websites. Uh, social media profile. This is most this is, like for S e O. But I'm just giving you example of how we can use this. Now I'm going to actually just click on save changes. Now, instead of making this all over again, you can just duplicate the rose here. So this symbol indicates to became the road. So let's just go ahead now and maybe create two more like that, right? So Now we have this full table right here and now we can actually go on this editor right here, maybe just change it to something like, uh, basic starter package. And then right here would be like a gold package and then platinum. And we could make changes right on the website. Guys Platz in like that. Maybe here be 1 99 to 99 3 99 That's it, guys. I mean, it's that easy. But now let's just say you want to design these tables. We want to make it look different. Now, first off, this has a what we call is a feature table. So if I go over here and I click on this icon, we could make one of these featured. So they give you an example of that? If I click on maybe the gold package here, it says, make this able featured. If I click on this right here, it's going to highlight it. Maybe you want to encourage people to buy this one the most. Right now, we can actually go ahead and go to another one like the starter. And remember the design. You can change all of the design you can change the font, the color you name it. So you know, excluded item color If you contains the font, the header font. Maybe you want the header former here to be different and you can change the color for that and the spacing. You can also change the, um you know, the sub header font, which would be this phone right here. We can change it to something else, like bitter or, you know, covered by Your Grace. You can see it changes. And I think the most important one guys is the currency one. So the currency, it actually makes a whole different currency. I'm sorry, not this one. This is for the monthly and the dollar sign right there. So my mistake. So right there. You're changing that one. And you can also make it bigger, etcetera. And you can also see how it looks on the phone and tablet. Don't forget that now. Is this one right here? The No, that's not it. So the one I wanted to show you all was the price for this one is probably the most important. And this gives the dollar sign or the numbers it gives it a current, you know. Ah, cool looking fall like that. And what this does is that it's going to basically represent your sights, the core. So whatever approach you're going for, like this is like a cute one, you know? Or you want something a little bit more professional, which would look like that, Uh, I highly encourage you to mess with the price. Want the most Because it does add to core. And it does add, you know, feel to your website now the price text color. So, like I said, you can change the price of this right here. Some of you want this purple, you can change the letter spicing the price line heights. Remember, this is the price right here. So this would encourage or this is indicating for this right here, next to scroll down. So this is the body fund. So we can change the body fonts, something like that. You contains the heights. You can also change the background color. It looks like that. You know, maybe he wants to change them all. Like like a different shades of blue. Now, a good example of that would be something. Looks like this right here. So this right here. You see how I have these shades of blue light? Darker, dark, dark. You can do the same thing to sort of, you know, give your website, you know, a little bit better feel and color to it. So, you know, you can also change the button. And unfortunately for the bus and guys, um, well, a way to do it would be just Teoh, you know, change the button, make it look how you want. And then just duplicate this row instead of redesigning every button independently. You understand what I'm saying? So let me give you an example. Maybe you want to change his button, fall into black ops, and, ah, like this and we'll add a text color. That's for the hover over options. Okay, anyways, so let's just say you have this table like this. And instead of just redesigning this button and everything else, why don't you just duplicate this specific rope? So the starter package? No. Right there. We can go ahead and just close this basic package and then just duplicate the starter package just like that. So this way it's much easier. Because, remember, your settings are all saved. You know, everything is already saved, so you only have to do it for one. Don't redesign it for every single one of them. Because that would take a very long time. And in the design table, you can actually design the feature table background. You know the table header color. We should be this color up here. Or you can have the featured header text color. You know, you can change all sorts of settings, but a lot of these you can change them independently. But this is more of a group feature. So you know the featured table colors. Remember this right here is the feature table, the one that's sticking out the most. So as you can see, you guys can also change the bullet color. So right now they're all blue. But you can change the bullet color to something like, you know, Was it yellow? See how they're all yellow now? So just go ahead and go through these options. Most of these are very self explanatory. You know the header Fonds Um remember, you can also change these inside the actual the module itself for each one. So if I go to gold package and go to design. Now for the gold package, We're going to strictly on Lee change the gold package. But if you go to the general, it's gonna change all of them. You understand how that works. So that's a basic overview of the, um the pricing tables. And another feature is maybe you want to make this bigger, make it full with Maybe you actually want to extend it across the page. So you open the gutter with and just drag it to one, and there you go. So the buttons, you know, they go over and you can add in text on the top right here. Maybe a text model that says, you know by now actually give you an example of the pricing tables on my website. So they go to store right here, and we gonna go to the S e o campaign. This right here is a basic example of how you can you know, you know, I put a title, I put the pricing tables by now that's it. So that is an example. And I have the according right here, so guest can see there's a lot of reasons why you want to use every single module possible because it really offers a lot. Right? So that's it, guys, for this lecture, the next lecture we were going to talk about, Maura, about the, um the block posts and the block titles and all sorts of other cool stuff. All right, so I will see you all there. 23. Divi blog module: How do you guys welcome back. So in this lecture, we're going to talk about the blawg and all of the other features that you can use for the block. Now the debate team is extremely diverse with the blog's, So there's tons on tons of different ways. You can style your blawg. Ah, lot of other themes only offer, you know, one templates, but the Davy theme is It's limitless, and I'll give you an example of how you can create your blood. But first, let's go ahead now and show you how to create a post. So let's say, for example, you are a blogger or you want to make a block post. All you need to do is go up here to plus new and go to post. All right now, usually all the other thing for WordPress have it were you know, you just entering your post right here your information, you know, and your postal. That's it. Except for the divvy theme, you can actually use the divvy builder. So instead of just making a random text, you can add gadgets and widgets and modules and sliders and all sorts of really cool stuff to your vlog post. So right here, I'm gonna put in a log post one and all Internet column, and I'm just going to insert just a blank one, and we'll just answer text. Maybe, You know, we'll just do something we'll just do text for now. We'll keep it basic, and we'll put Hi. This is a test Blawg Post. This is so cool. And then I'll just, you know, Senator, the text. Maybe I'll add an immediate image below. That's something, right? Uh, you know this actually, this icon, actually, I don't know which which one. So I add, uh, I'll added, Maybe we'll just add in that one. You know, I always do that. I just waste so much time. So I'll save in exit now really quickly. So whenever you make a block post, you might want to add categories. So the reason why you'd want to make a categories because let's say you have a certain amount of blawg post talking on Lee about, uh, marketing. So this one we're going to say, Okay, this one is a block post Onley dealing with marketing. And over here are your tags. So let's say you, for example, you have your website, and this one is certainly about marketing slogan, but marketing, you know, websites, online store like that. So it keeps, ah relation with with with what you're talking about. Now, the featured image. So this is very important. So you're featured images basically going to be that image that shows up right here. So you see how there's this image right here? It basically gives your blog's post on image, and it basically left people in. So you always would want to set a featured image. So, for example, I'll just put this nice guy right here, actually, all put in this one right here. See here. Um, yeah, that one right there. And I said that as my featured image. Now, this image is very, very large. So when you set a block post, you might want to set an image that's just a little bit less bigger. I mean, that one, it was, you know, five megabytes. You always want to keep your size, Paul, be around one megabytes or less. Okay, so I made the block post. Now, how do I actually see the post? Because if I go back to the page you're not gonna see anything Show up. You know, there's no that's gonna be no blawg post. There's gonna be nothing about the Post, so we need to actually create the module for it. So over here, I'm actually going to create a new page now, and this is gonna be the block page, and right here, I'm going to use the Davy Builder. Now, over here is his answer column. We can actually put in maybe around. I don't know. We'll just put in this one right here and insert module, and right here you're going to see Blawg so we can answer the block module right there. And we can have the way out the layout full with, or we can have it in the grid. You can talk about the post numbers now, remember how earlier we had the categories? So if I select marketing on Lee, the block posts that are in the category of marketing will show up. Nothing else will show up. So that's what the categories does. And for the contents, you can have show all the content or just show like an excerpt, which is, you know, when you go to like those block post and you see, like the 1st 20 words and then you don't you don't read it anymore. That is what the extra does. Now the read more button. If you want a read more button, you know, like read more Bob Loblaw. I think the more button is good because it's sort of like a call to action. It invites somebody to read MAWR, so I preferably recommend the read more butts in And you can have you know, you're you can show the date the author, the pagination, all this other stuff. Um, you know, if if you'd want to have this in, uh, you know, you can have that in maybe not the categories. You know, people don't really care about your categories, you know, it's it's not really relevance to them. They probably don't care. Now, under the advanced design settings, you guys can also change the header Fonz, The metaphor in size like the excerpt, the fonts as well. Ah, you can change all that the body fonds of the of the blawg. So these are like basically the same settings you've seen before. So remember Header would control the title. Meta would control the excerpt, and then this would control the content. Okay, so I'm nothing about saving exit. And we're just gonna publish this page and let's just, you know, use the visual builders so you guys can visually see what's going on instead of me just talking about it. So I'm going to now use the visual builder. All right, so it's going up and there you go. So this is on the actual page. So right now, this was our featured image. This right here is our header. Fonz. This is the excerpt now. Easier says read Mawr. Remember how you made that read More con content. So they click on, read more right here. It's going to actually bring us to the other page. So this is the featured image. This is the content. And this was that other image I put within the post, and people can comment on it like overly cool stuff. And this right here is our sidebar, And I will talk about the sidebar last because we will start talking about plug ins and widgets. But I don't want to get there yet because I want you to fully understand how to use modules . I don't want to dive into plug ins, plug ins. There's a lot of plug ins. There's a lot of leg is out there. So that is how you create a block post. So, like I said, you have your block post title. You have your description, and you have your read more icon. Okay, so, um, that's basically a nutshell on how you can do it. Remember, you can actually, you know, make this smaller. So maybe you want to put it like this and you can have a picture right here. You can make this full with just like that. Whatever you're trying to go for. You know, there's a lot of different ways you can sort of have your, you know, add the core and, ah, you know, look to your website. So this is the block post. This is the blank page. So we've created the block post, but there are other modules that have different styles of the block post and later on in the more advanced lecture, all show you how you guys can get really, really cool. Let me see here. I think this would be one. Yeah. So you see this is a block post and you see how I have designed it, How it just looks really elegant. And it looks really cool. And, you know, there's comments over here. I'll show you how you can create this, because this is actually a pre made templates that Debbie has made that I just uploaded. And people are commenting on it and all this stuff. But we will talk about pre made layouts in the last lecture because I do not want you guys to you screaming loud until you understand how to use the divvy theme. All right, so ah, let's go back over here. Now. I've shown you how to make the block post. Right now. Let's go ahead and make another block post, but will use the other modules. So I'm going to over go over here, click on this icon, click on regular and click on this little one right here. All right. Now, I'm going to scroll down right here until we see the, um the, uh What is it? The post title. So this is the post title, and I kind of I'm very skeptical on the post title, you know? I don't know why most people would use this, but, um, this would be a reference to the block page. So if you want people to go to the block page from here, this is the module. The post title settings would be the place where you would enter something in So you can have him show the author that meta um, the featured image, etcetera all this information you would put on the post title settings. So maybe you want the text irritation to the center. You know all that stuff, but I never used the post title settings. Guys, I gotta be honest, like it's almost it's almost a worthless module, you know, it's just really ah, it really doesn't make sense to use it too much. But I'll go ahead and give you an example of it anyways, so I'll show the author will show all this information. So I'm gonna go ahead and click on that and click on Safe, and I'll show you what what the Post title does Now. The post slider is a much better module, but this one, I don't know if he's gonna hate me for saying that's but it's like, OK, so blocked page So this is the block post Now, if you click on that, it's gonna take them to the bog post. That's it. That's all it really does. So that's basically a nutshell of the Post the Post title. It would take you to the block post and also the block page. So, um, you know, if you want to have that on your Web sites, you know, you can add that in. There might be a reason why you just wanna have, like, blawg page. Maybe you can have, you know, you can add and like, you know, I don't know. I really don't know. There's there is a use for its I just don't use it. I rather just use, you know, the blog's setting because you click on this. It takes him to the block page right away. No, that's it done. But this one would take them to the actual page with all the blog's on it. So you click on it. I have one block post here, and I have another block post here, which is hello world. So it's taking them to the page or all the block posts are So do you want to have that feature. You can add that into your websites. That is the post title. But let's go ahead now and dive into the other modules already. So I'm going to actually click over here and click on this plus and add in full or regular and molded out into two icon ones, and we'll go ahead and scroll down until we see the post slider. Okay, so now we have the post lighter, and this was pretty cool, you know, because what it does is that if you have multiple post guys, it's going to actually, you can actually browse through all of the posts. So let me create one mawr to give you a better idea of how we can use this. So I'm going to actually save my changes. And I'm going to show you how you can use the post slider. You know, to really make your website look kind of cool. I like the post cider. So over here, I'm gonna make a new post, and this is just gonna be like a test belong to, And I'm gonna put a howdy howdy there. Maybe I'll create a new category that says, like, uh, cool stuff and add that category in all right. Now, you really should set a featured image all the time. You know, people actually buy pictures and buy, you know, beautiful images than actual content. Its proven, You know, if you go to a website and there's a really beautiful image, you're probably going to click on it. No, but if it's just a lot of text, like mountains of text, No, but he's probably going to click on it right there. Just gonna say, Ah, forget it. You know, this website looks weird, so I'm gonna set this right here is my featured image, and I'm a click on publish. All right, so there you go. I made those pages. Now let's go back over. And also, guys, if you want to make a post instead of going up here two plus new, you can go to your dashboard, so I'll go back over here just to educate you a little bit. You can go over here to your dashboard and right here where it says posts. You can click on, add new or you click on all posts and then you go to all add new right there again So that's just another way on how you can create a post. So over here, I'm gonna go back to all pages really fast, and we're going to go back to the bog page. So this was the block page we created. I know. I have tons of pages. I really, truly do have a lot, you know, so running back over here. But, you know, actually, I'll go to another page. I'll go to another page to give you all a better Ah, visual experience about how you can decorate it, because that's really not It doesn't really look good. So let's go over here. I'm going to go over here to Darrell one. All right, So let's go to this page, and we're going table visual builder, and I will put the block page or the post slider on this page. So right here, I'm gonna click on this icon at a regular section. Just add the big one and we're gonna go to the post slider section. Ah, there is post lighter now. You guys can see the test block is there, and I can scroll through it. And you see now how all of the block posts are starting to show up. So this is a really cool way if you're a blogger, how you can have it, But this is a little bit more customizable than this, You know, it it doesn't really look good like that, you know? I mean, I'm just very picky, so maybe I want it to be a little bit bigger so we could make this full with and make the custom row and stretched across the page like that. So now we have our blawg post like this. And if somebody wants to read our posts, they can just click on that and that will take them to the post that we created. And remember, we can actually move this around, weaken, drag it around. We can make it look really cool. So, for example, say, wanted up here instead, just like that. And remember, if you want to get rid of this padding, I hope you know this by now is to go over here and just do the custom padding on the top 20 And then we can do zero like that's and and that's basically it. Now, sometimes there is white, but that's just because of the page Builder. So group, There you go. So there you go. And I'm gonna go ahead and say this now and we'll visit these block posts. And don't worry, guys. I will give you guys templates of ah, really, really professional. Like I'm talking like Washington post style blawg posts that you can check out. And there you go. So there is the block. People can comment etcetera. So, like I said, we will talk about pre made layout because maybe you're not good with designing. It's very tough, you know? It's super tough. In fact, um, you know, I don't really have any posts on here. Any pre made layouts on this website I do on this one, but don't want to log into it. I'm kind of lazy. So you will. Actually, I will actually give you guys pre made louts where you can make really cool posts like this and they'll look professional. They look good and they don't cost you anything. They're free. So we will talk about that later in the pre made layout section. And, um, I just want to make sure you understand how to use the block module and also for the block module. Guys, I didn't go over this, but for the other block module, you can also design missionary. So we had a under grid style, Remember? Like that. So I create the block post right here. We have the layout full with, which is something. Looks like this right here. So all your posts will show up Now, I can actually have it under the grid, which would look something like this right here. So that's how I have it on my website. So there's two ways you can do it, you know? So it does give you a lot of accessibility, and you can show the content looks like this where now it shows the content on the page. You can show the author of the dates, you know, but I would always take off the the author and some of this other description like categories because it just looks messy. You know, there's just no reason to have that kind of information on the block post. People don't care. They just want to read your content. But I don't really care about you know what categories it on? You know, like I don't know if they care about that or not. So that is another reason why you can use that. Like I said, you can add overlay colors on all sorts of cool stuff to this guy's. So, you know, it's just another idea. You guys want to add that in. So other than that, guys, I think that mostly covers the block module settings. Um, you know, all these other ones are pretty much standard the header text color, the headers facing the metaphor wants. So if you want to design this right here on, like, your block page So me silly, for example. So the header fonts. You know, you guys basically can totally understand by now. You know, James ahead our farm for it. So you know, I don't want to go through each option because I'm pretty sure you know what to do at this point. Says so, uh, that's it, guys for the block modules. But one last one we're gonna talk about is another really cool module, but it's a little bit under used, but I like it. So it's actually called the, um Ah. What is it called again? Let's just show you. So over here on a regular. I'm going to put this little one right here, and we're going to scroll down right here. And this is a B is called the post Navigation. All right, so post navigation. So the post navigation, all it really does, guys, is it just creates a separate, uh, like a direction onward to take people. So, for example, I'm going to take this right here and drag it up right here. So it didn't work just like that. So was it really does guys is it directs people on where to go. So the next page is Darryl Services. The last page was contact us fitness. So it's more of a directory on ah, where you can tell people to go. You can edit it to add in more information. You know, you can hide in the next post link Oregon, you know, disable it. So it's a cool. It's a cool gadget to sort of help people get more directed on your website. So there are reasons to use this, you know, like for example, you put on the top of the page, you know, and I know a lot of people use this module for the top. And in saying the next page is the Contact US page. The previous page was the about us page. So that's the post navigation settings bar. It's pretty basic. And like I said, it just it just direct people on where to go if he wants to. You know, put on the top of the page and add some designed to it at a background color. Could remember, on this blue module, you can always add in background colors and all sorts of cool stuff. Okay, so that's it, guys, for the blogged modules and the post navigation. You have any questions about the Post or the blog's settings? Please let me know, But we will talk about how you can, you know, um, use the pre made layouts and get a little bit more advanced in the more advanced section that I will be talking about after I talk about the modules. Okay, so, um, that's it, guys, for now. So I will see you all in the next lecture, so I will see you all there. 24. Email Sub + Countdown timer: How do you guys welcome back. How is everybody doing by now? I bet you're sort of, you know, starting to learn the Davy theme and you're getting a little bit more comfortable. So let's go over some more modules, and this one is actually going to have to deal with the email subscriber form, which is really cool. There's a lot of different ways you can customize it as well, so I'm actually gonna create a new module right here, and I'm click on this plus icon. I'm a click on regular and I click on this one right here, and I'm going to go scroll down to the, um the email opt in form so the email often form and the mob informers really cool, but service provider. So let's just say you have a Weber or feed burner or mail chimp. You would actually get your A p I key and put it in, and I'll show you how to do that right now. But the first thing I want you to do is actually go to mail chimp dot com and making account. So the reason why I prefer male chimp is because it's free for the 1st 1000 subscribers. Anything after that, you're gonna have to start paying. But companies like, however they only really give you, Um ah, free 30 day trial. So I don't really think you're gonna get around 2000 subscribers and 30 days. Right? So I think mail ship would be your best solution. And you can go over here and sign up for free. And once you have created an account will be brought to your dashboard. It looks something like like this right here. You know where you have like this? Yeah, like this. It looks like this. This is your basic dashboard. Okay, Now, going back to this right here. Let's first decorate this. So here, you can add in a title, like, you know, subscribe. Now you can add in a subscribe text button. So right here subscribe. You can add in a background color. If you want to change the background color right there. You can add the you know, the text color to dark if you like, or you can have as light. And we can also have it in the center. Wants to see you want added some text right here. You can go ahead and enter in like, Yeah, sign up to this company. It's amazing. We are the best company in the world, you know, Right here. So, you know, you guys get the points. I'm gonna really lazy now, not getting the dummy text. Right? So the design also, you can change the form, background color. You can change the field text color and, like the focus sex color, all sorts of really cool stuff, guys. So remember, this is the header, and this is the body font. So whenever it says heady are header, you can change that phone right there. And also the body farm that would that would be focused more on that section right there. So, like I said, there's, you know, these are all the, you know, the features or ah, pretty basic. You can actually customize the button just like we've done previously. By selecting the customs house for butts in, you could make it bigger. You can make it smaller, etcetera. So you guys get the whole point of how you can decorate it. Now, let's just say you want to connect your email accounts to, um Mel chimp. So go ahead. and making account for male chimp. And once you're not making an account, you'll be right to this page. Now you'll need to first create a list, and the list does. It's basically a, um it is a ah, it's like a database where you store the subscribers. So you're gonna connect that subscriber to mail chimp and then from male chimp. You can send out campaign to your subscribers. You could make them buy stuff or make them give, you know, coupons, whatever you're looking for. So I'm gonna go over here to create list and just go to create a list. And you can give your list name, email, address, You know, from who give a short reminder of the people why they have subscribed your list and then just click on safe and what you click on safe. I already have one, so I don't really want to create another one. Ah, once you already have that, or once you have a list, you'll get some. It looks like this right here. So you'd want to use this list, and I think there's different kinds of lists you see here, Um, see your campaigns lists. Okay, so for my account. It doesn't really list. I know. There are some other ones you want to set the list for, Like, the subscriber forms, you know, to basically get customers to sign up on your website. I don't know where it is. Maybe. Let's see here. I got a list right here. Yeah, there's no way I can view it. Sorry, guys. So you're gonna have to select the correct one for the for the lists. Okay, So once you have created your lists, you're going to actually go over here to your profile and you're going to go. Teoh, you need to get your A P I key. So that's what you need to get is your A p I key? So to do that, we're gonna go over here to your profile. The com profile. Now, over here, where it says extras. You're gonna see a P I keys. This right here is your a p I key. Okay, so you're gonna go ahead and copy this and you're gonna go back over. We can save this right now because we've created this. We're going to click on this and save it, and we need to actually go into the devi options and paste the, um, the code in there. So if I go over here to dashboard, I scroll down to divvy, I go to theme options. Now, if I scroll down, you're gonna see the mail chimp A p I key. So go ahead and just paste it in there just like that. And then when to go ahead and go down, you can click on Save. And now the subscribers that come to that website, they will actually be brought to that form. And any time somebody signs up, it will save right here in your mail chip account. So he's yet to see my count right here. I have around 284 subscribers, so you know, they will all be saved in there. So let me give you an example how we could go back to that page and check it out. All right, so there is my subscribe form. My thing disappeared. So I probably have to enter in something there. So I'm unable to visual builder again. Oh, I didn't select the list. That's why So when you make these list right here, guys, like I said, my is called Darryl's discounts. So Darryl's discounts. You need to select one. If you don't select any, it's not gonna show up. So going over here where it says Mel, this accounts mine is Darrell's discounts. So if I click on this now, it's going to save, because now I am telling the the form anybody that signs up right here, I want them to go over. I want them to store their data base under my list and mail chimp. So I'm actually gonna enable the visual builder, and you're going to see that the form now has the first and last email and anybody can subscribe. It's a very, very, very good, useful module. So I highly recommend to use this one, and I recommend to use mail chimp because, remember, it's free for the first. I think it says 2000 subscribers. That's a lot, you know, like that's a lot s. So it might be for the 1st 2000 subscribers. So that's another reason why you'd want to choose mail chimp. Okay, so that is the overview of the email often form. Let's go ahead now and introduce you to some other really cool features. All right. So next we're going to actually add another module. Gonna go to regular and just choose one right here, and we're actually gonna scroll down to the circle counters. So these are pretty basic guys. They're actually extremely basic. Now, I do have an example of these. So divvy Darryl's TV layout one dot com Let me give you a good example of why you'd want to use these ones. Okay, so going back over here, I'm going to answer it the male circle. So this is basically what you're seeing now I go to my website right here and I go ahead and scroll down. You're going to see that these are all things pop up just like that. So that is what the You know that that is so there's a lot of different way. So a little quiz right now? So just by looking at this, can you guys tell what this is? This? It's a text module. This is a divider. This is four of those icons. It's four of those modules, a text icon, a divider and a text icon. That's it. That's all it is. And the reason why it looks like that we did that earlier, Remember? We use those those background forms and, you know, so you guys can see there's a lot of use for it. It looks cool, looks professional. And I've customizes to really look amazing and look really cool. So that's another reason why you'd want to do that. So going back over here, like I said, you can add in the percent sign you could put in like our sales. You put in a number maybe like 50 and you can also make it a percent. So if you want it percent, or maybe you have, like, 1000 8000 customers, you know something like that, see how it changes and you can have the text color too dark or even have a tow light. But we can always change that. Later, in the more advanced settings, you can have the bar background color changes well, so maybe you want that to be black and you can disable it, of course, but we will talk about disabling later on in the more advanced Of course. Now for the design, you could have the circle color. You want to change the you know, the circle color as well The circle color opacity. So you can actually change the opacity of the circle color. So that's another cool feature about that. Now, for the title font, you can change the title Fall into our vos. Yeah, changing right there. You can change us whoever you want The title line spacing, etcetera Now also the number For now, the number finds very important just like the tables, the pricing tables This right here you can change the sort of any fonts and it really depends on what sort of nature website issue. No, if it's very professional, you might want to really professional looking font. It's more RC may be covered by your grace is like a more artsy type Look, you know, so that it looks like that so you can also do the not number of font size as well. If you make it bigger, you can make it smaller like that You can change the number text color just like that's making a blue You can also do the number spacing You could make it wound. It's way too big, right? Like that. Okay, now we've made this right here, so maybe you actually want to duplicate this row. You know, I think that's a good idea to make. Maybe four of these, you know, put these, uh, actually know what you probably need to make the module like this. This is a pretty like standard one where people do this for, you know, they have, like, four bars, and they make it full with it. Looks like that's and we can make it full with. I'm just showing you had it basically, you know, design it, you know, to make it look really cool and unique. And you can put in text underneath this just like I did over here. You can see I just put a, um I put a bar counter below its and I put some texts below it. So, you know, that's a basic use on how you can use these modules. And like I said, there's a different ways you can customize its. There's a lot of different ways you can use thes. You just have to be creative, and I'll talk more about how to find better examples later on in the advanced course. When we talk about, um, like what designed to stuff like that? So that's pretty much it guys for the circle counters, It's pretty basic. Let's go ahead and move on to another module. So I'm going to click over here and go to regular. We're gonna set the big one, and I believe next one we're going to talk about is the code module. Now, if you're not a developer, if you're not, um you know, um, if you're not developer, I wouldn't use it. I just wouldn't use it then. I am not going to really recommend this, because if you guys are watching this and you're probably not a developer, But if you are, this would basically basically where you can enter in your your custom CSS or your coding if you want to have some sort of extra feature, this is where you would entered in. And like you said, you could enter it in there and it will show up as needed. But I am not going to introduce this module because most people are not code developers, and this is not a coding course. So I'm not really going to talk too much about the coding module. Okay, so next we're going to do add new selection, but If you guys have any questions about coding or like that, there are other courses where you guys can learn about coding, maybe insert custom code in there. Maybe you want a certain form or something in there that just Devi does not offer. That isn't a solution on why you would probably want to use the coding section. Now, let's also talk about Thea Countdown timer. Now, the countdown timer guys is pretty similar. Teoh this right here. Except it basically gives a countdown. And this is good for, like, contact us pages or coming soon pages or something Where you want to introduce something? So right now I'm gonna say this countdown to the 31st. There you go. Did he already knows what date is? You know what time it is? And you can, you know, put, um, countdown to my birthday. Who just like that. And you can actually you can change the background, the color, etcetera. You know, you can change the hour by fonts. Um, whatever you'd want to basically change so you can actually alter this as well. You can add in a few hours added in a few minutes, so the text color you can have. It is lights you can add in a background color. If not, we'll see. Now it's all white. So maybe we need the background color. Right? So we'll probably put it like a black one. You know, something looks like black. And like I said, there's a lot of different features are ways you can use this. Now you can also change the header font. You know, count on my birthday, etcetera. You can change the number spacings. Anything about these numbers? Um, these font size at all for the numbers right here. The label phones as well, so you can change the label fonts if you personally like right here. So this fall on the bottom applies to the label fonds. Okay. And remember, um, let's just say you like I don't want it like this. You know the modules? No. Good. Remember, this row controls this module, so if you want to make it bigger, you know, you can do that simply easily. You can make it look like anything that you want, so this looks really cool. So there's a lot of different ways you can sort of introduce these modules and like I said , I'll have ah have a quiz for you guys later about. I'll show you a website and I just like How do I make this? You can you know how to do it. You know how to use the Davy modules. There's just It's just requires critical thinking at one point. All right, so that's an over you guys of the county module. Next, let's go ahead and go over one last module in this course, which is the comments module. So I'm going to actually save this right here. In our last lecture, we talked about block posts. I believe so. It was last last module, but let's just say you want to introduce a common section. So I'm going to go over here under my dashboard and we're gonna go to my post page so all posts and I'm going to test log to, and I'm going to enable the visual builder just like that. So this one works when you're in a post, and it's useful for a lot of other features if you want people to talk about comments like that. So if you want to add in an additional like submit your comments maybe, you know, at the bottom of those pages, Like when you go to Washington Post, where it says the way bottom, like, submit your comments. Maybe you want to have, like, your own form there. Right? So let me show you how to do that. So I'm gonna go ahead and, um, you know, I'm just gonna delete this one right here on, um, I'm going to just click on this at a new module and we will enter the comments module. So the comments module basically allows you to have an additional common section, and you can add us anywhere. Guys, you can have this on your You can add this on your home page, whatever you'd like, so you can design it. You can change the field background colors as well. So this is so you have a block post about something and you want, like, something on the way, way bottom of the page to talk about your comments, you know, And then somebody can comment on it, and, you know, it would all your changes there would be live. So, um, you know, it's it's just another feature that Devi has added. If you want to add in more comments or you want to have a specific comments section somewhere, and people can reply to it, you know, they can engage in it and all sorts of really cool stuff so that a lot of different ways you can use, you know, use this module. So I recommend it. So it's a cool module. It really is. This has a lot of work, and you can customize the but in the background color in all of those settings, guys. Okay, so that's about it for this lecture, guys, In the next lecture, we will talk about the log in module, so I will see you all there. 25. Sidebar and Gallery Module: How do you guys welcome back. So in this lecture, this is going to have the last overview of the remaining modules. So congratulations for making it this far. We have covered quite a bit of modules, but by now you're sort of becoming a devi expert. So let's go on now and just dive right into this and get started. So I'm going to click on this little blue icon, and we're going to open up the other modules, which would be the gallery module so scrolling down here, we're going to click on the gallery module. And what the dollar module does is that it showcases your your work. And remember, you can actually change the, you know, the spacing, the letters, the fonts, everything like that. Whatever you possibly can think of, you know, to change. You know, the title fund, you can make it bigger. You could make it smaller. All sorts of cool stuff. So going back over here now, we need to actually create a gallery first. Because right now is just giving us the standard ones by default. So over here, go to update gallery. Now, go ahead and just maybe add some images, and you can also hold the control button like that like that. And it will grab these four. So I have these four images. I'm a click on ads, a gallery click on Update gallery. So now we have these four images that show up and it show shows up on a regular size guys, so they might be not perfect. So, um, you know, that's just a way Teoh upload these now. Let's just say you want to change the layout. You can actually have a slider side instead. So let's just say you know, you want this to be like a basic slider. People could just, you know, slight through the images and see what it is great for photography, you know, it does have its purposes, and it opened up a light box right there so you can sort of see it Now. Let's just say you wants to have our automatic animation, So basically every 2000 every two seconds, the slider is going to change by itself. It's not going to require any anybody to click, or you can have it like maybe every one second. So everyone seconds. This is going to change by itself. So that is what the automatic, uh, animation does. So I'm gonna put it maybe 7000 seconds, because that's kind of kind of a long, uh, it's kind of too much flickering, you know, it's gonna like, you know, bothersome was eyes. It s also the grid layout. So what the grid layout does is that it gives it the text below it. So let's just say you want to have, you know, change your design tax or any of this other text. You could put it under all caps or whatever you want to add it in. So this is basically where you would, you know, change your font change or text colors facing etcetera in this section. So there's a lot of purposes for this guy's. You know, if you have, like, a if you're a photographer, you want to showcase a lot of your stuff. This is a good idea. And remember, you can make this full with, and you can also reduce the custom gutter as well and make it look something like that. So maybe you can have a really big archy. You know, our key design. You know you can you know, have a lot of pictures clump together, but sort of match at the same time. There's a lot of reasons why you'd want to use this module. You know, it does look really good and elegant, so this is basically an overview of the gallery module. So next it's going over to the next module, which we will talk about the map module. So the map module guys is identical to the full with map module. It's the same thing. So if I click on map right here, you're gonna have to get a Google ap. I keep Now if you haven't watched it before, I want you guys to go back and watch the full with map gallery because it's the same a p I key. There is no difference. So let's just go and say I want to be Ah, you know, my map centre address is in Pasadena. I want them to find Pasadena, California. Okay, cool. So now it's found Pasadena, California. Right here. But I need to sort of put in a mark, You know, I need to put in a little i d Mark. So to do that, we're gonna click on add new item and, like, put our business right here. And then right here, we're gonna put in Pasadena, California. Click on the check box, and there you go. So the, um you know, sometimes guys, the map doesn't show up like that. So I'm going actually going to find out why the pin it doesn't Sometimes it's really weird . You know, sometimes it works. Sometimes it doesn't. So I'm gonna click on find again, and it's you're this. Oh, you know, I locked it now, so I have to go back. So let me do that one more time. So I'm going to go back over here to Pasadena, California. But, you know, I find out this module has a lot of problems. Sometimes when it's not in the visual editor, when you're not using the visual editor and use the back, and it usually works more. But I have had some issues with his module, so it looks like it's acting up, So I'm gonna put Pasadena, California were there, so I know you know why I didn't purse find I didn't press find, That's why. All right, So I pressed find, and you see how the pins not coming up. So if this ever happens, you don't put our business. This ever happens to you guys. Just use the back and editor because it looks like right here we have entered incorrectly. It's just not showing up on this little map right here. So I'm gonna click on check and click on safe. And if the pin doesn't show up on the back and I'm sorry on the visual editor, then just use the back and editor. So I'm going to x individual builder. Now I'm going to scroll down, and it works. So it looks like just on the, uh, from the visual perspective, maybe they have to make a small updates where the pointer doesn't show up or not. But, you know, rest assured, it will show up. It does work. You're applying a broken theme, you know, like it's not like that. So just, you know, actually the visual builder and see, there it is now, So Okay, you know, that's a little small glitch, but remember, you can also make this full with, you know, just click on this full with and make the custom gutter toe one to number one. Just like that And there you go. So now you have a full with section. So it's basically the same thing as the full with module, except they just added in the custom gutter for your stuff like that. So if you want to showcase your portfolio where you are now, actually have an example of this module. So this is my one of my sister websites I've created it. I don't know what to do with it. I just made it for find I might sell it. So right here, you guys can see I added in the full with Matt module. So this is a perfect example of how you can use the full with Matt module. Okay, so next, let's go ahead and go into the other section where we will talk about the content for the log in form. So for the log inform, you would have to have some sort of, um, logging on your website. You know, like maybe people can log in on your website to, you know, like I know for mu commerce vendors, people can upload products onto your sites or for a forum. If you have a forum. This is where you would have a log in form. But if not, you know you don't have to use it. It's just for, you know, for long. But there's a lot of cool ways you can adjusted, and I actually recommend to use it on the widget section. But we will talk about that, actually in the next section. So I'm going to go down over here. Teoh to the, uh what's it called? That CTR. They log in form right here. So this is the log Inform. Now I'm gonna click on that and maybe, you know, log in, log in page. Now, if you want them to get redirected to a page, you can click on redirect Teoh redirected the current page. Or you can actually being to another page now for the background color. If you can change the background color of it right here. So you guys can see this is the log in page and I am currently logged in as howdy because I'm designing the website. So I am actually logged in right now. But if you have other people that logging on your websites, you can use this contact. I'm try this log in page. So for example, somebody has a form. You can use this log in page for your forum. Now, you can also do like you can enter in text. You know, uh, you know, log in here, dude. So it looks like that, and you can disable its, but we will talk about that a bit more on the invent sections, the design setting So you can change the the form field background. The reason why doesn't show is because I'm already currently logged in. And if I log out, I can't really show you this. So it would be difficult for me to show you. Actually, I can show you on my safari one. So I'm going to basically, you know, this is basically, you know, for these settings right here, so I can't really show you guys, but I will show you how it looks like from another point of view. So, um, I'm gonna click on this. I'm a click on safe, and we're actually going to open up my safari page and I'm actually going Teoh, go, Teoh, open up safari right here and we're going Teoh, See? Going to refresh this page? Let's see Here Is this the right page. Yes. So the log in page. There you go. So right here, you can see that has a user name and a log in. And if you have users that log in on your website, for whatever reasons, this is where they can enter the user name and password, and they will be able Teoh log in on their website. So right now, currently, I don't have any users that log in on this password. I'm sorry on this website, so I don't really need that. However, on my website darrell wilson dot com I do have people that logging on my website because the upload products to sell. So that is a reason why you would want to use the log in page. Now, let's go on over to the other section. We will talk about the sidebar. Now the sidebars. Probably good for the long page, right? Most people have, like, a subscribed to us something like that. So I'm just gonna go ahead and go Teoh, uh, plus new page and actually know what? We're going to integrate this. We're actually gonna integrate the Yeah, we're gonna integrate this specialty sections. And also the sidebar because they go hand in hand. So right here, I'm gonna use the Devi builder. Now, I've shown you guys the standard sections and the fullest sections. But maybe you want the specialty section, so the special section is sort of just divided up a different way. Guys, it's basically the same thing as a lot of other models. But do you see how it's kind of how the designs look different? Maybe you can have a big section here. They've sort of broken it up for you to sort of make it a little bit more creative. So, for example, right here, let's click on this one now. Right off the back. You see, I can put a module here, a model here in a module here. Now, maybe right here. I can add in the sidebar. So going over here, I'll add in a sidebar. Just click on, OK, maybe I can add in this sidebar and then right here. You hear that? And then right here was added like a text right here. We've gotten to you. See how you can sort of adjusted, be living more creative. So that's what the specialty sections for. It just creates a different style, You know, it creates a different format. So it really allows you to, um, you know, fully control and manage the website. So I just put in like a social media icon. I don't know. We're just gonna add in one right here, give you guys a basic overview of the, uh, of the sidebar. Okay, so I'm going to use the visual builder now. All right. Remember, I had a two sidebars. So this is one sidebar, and this is the other side bar, so this is basically good for block post, so maybe right here. I'm sorry. Maybe right here. We can actually do something where we can maybe just put in a blawg and then ah, sidebar, which is very common. So let's do that. I'm gonna enter a new section. I don't Something like, uh, like something like this right here. And this module will put a sidebar in. All right. And then this section right here, we will put in the, uh, blawg. That's a very common one. A lot of people tend to do that because it's pretty common, and I'll click on preview changes so you can see this looks pretty standard we have. Our recent posts are recent comments are archives are categories and everything. So this is our block post, and this is thesis sidebar. Now, there's a lot of different stuff we can do with the sidebars. So in the next section, I will introduce plug ins and I will introduce widgets. And then we will talk about how you can add widgets, like maybe a Facebook like barks or instagram feed or something like that onto these sidebar, because these ones were pretty much garbage. Like meta no one uses meta. No one uses categories. No one cares about your archives, you know. But maybe a facebook like box, or like something really nice would be there, you know, on my website, I use the widget. I use the site of our icon, and I actually have it under ah, see under my blawg. Let's see if I click on one of these that I admire. Yes, so right here I have the sidebar of ads. So I put, you know, I put in a bunch of ads right here on the side. Maybe somebody clicks on it. Maybe I'll make a commission, you know, who knows? You know, I'd rather leave it there and have a chance, then rather not have it there and not have a chance. Okay, so in the next section, we will talk more about plug ins and widgets and things. You can add it on the sidebar, but over the other than that, guys were pretty much done with all the modules. So if you guys have any questions about any of the models, feel free to ask and let me know. I'll see you all in the next lecture. 26. Quiz 3: Hey, guys, welcome to this lecture. This is a new quiz for you. Also. I want you to sort of look at this website and this is actually my website. So I want you to look at this website and sort of understand which models I used here. So I use a two column row. So right here we have these two columns right here. And I put an image up here, but actually pushed it down. And this was actually a layoff from divvy. Now, this right here is a text module, another text module, a text module. But this right here is a plug in. And this right here is just a regular button, so you can see right here. It's just a regular button. And the other part right here, this is for the mobile version. So this is disabled on the desktop. Next. You want to scroll down really simple guys. You know, it's a ah image. I just added a background right there. I put in a call to action, and as you can see right here is the ah limited offer. And it's just a call to action module and also this part right here. I You guys might not know what this is. These are actually four sliders that I have condensed together. So these are all four sliders, and I decided to sort of change the background on each of these. I reduce the padding. So as a result, it created it created this really cool effect that they're all scrunched together. Next, you have our YouTube testimonials, and this is also a layout from divvy. So it's basically a text module text module and then another Ah, three text models right here. So how actually made this was? Well, actually, full credit goes to Davy for making this. You guys can see the module right here. They just put the, um you know, the letter right there. The Darrell Wilson. And then they have an image, which is the ad media of five stars. So, just like that, they've created this. So remember, this is actually a pre made layout and my other lectures. We will talk about pre made layouts. So right off the back, I don't want to take any credit from Davy. They have created this layout, and I just imported it and used it on my website. next you have your other section, which is a text and another text with five images inside of it. So you can see right here. I'm going to scroll down and right here. You see, this is a text module. This is another text module. And if I open this, you're going to see that it's just five little pictures. I added, and I put links in them. So they click on this edit butts in. You guys can see that right here. I have a link, a custom euro, a link right there. So that is how I created that specialty section. So in effect on saving exits and we're gonna go to, uh, we're gonna check out maybe a two or three pages. Guys, I have, like, 20 pages on this website, so it could take us a long time. So let's go on now and look at the store. So I'm going to go over here on my other page and show you the back end. So this is the store, which is also another pre made layout created by divvy. I'm telling you, man, these guys will make your appetite for you. No problem. Just got a kind of edit and everything that so we're off the back of gas, Comptel that this is a text module and this is another text module. Now, you could have actually probably put just one text module, but sometimes I like the space in between them. This right here is a, um this right here is all text right here. And I added a divider around this column right here. You guys can see there is a divider around this column and I put text, text, text, text button and then divider because I wanted to sort of create the space I wanted to put below the button. And you guys can see it looks pretty good. So, you know, it's pretty standard, you know, text, text, text, sex, Tex, but in divider. And then blow that right here. I added another text module, and remember, he's here. It says terms of service. We can make that a link so you don't need to really adding a button. You know, you don't have to have a button for everything, you know, like, you know, you could just make this a hyperlink that will do just fine. So the next one I want to go to is probably, um Let's see where we go to. I build your websites. We can do that one. Maybe this is also very similar. It's probably the same thing you guys can see. This is a text module. This is price. Text text is basically the same thing, guys, except I just decided to throw in some different colors, and I decided to throw in some other layouts. This right here is a text module. A text module. No, I'm sorry. This right here is a call to action module Call to action. Call to action. And remember, I just did not add in the button for the call to action. OK, so it's a two column row with a call to action, so it's very simple. It's very easy to use, but now it's going on with the editorial section. So right here we have another interesting section and we'll go back over here and we will look at the back end and we'll go slow on this one because there might be some other things you're not sure about. Okay, So really quickly, I added in a ah, over here, we'll look at the website from the back end just to help you all out. So right here I added a text module, a text module. I just centered it. This section right here I just added in a text model, but I decided to give that some color and right here below that, I added in another text model, but I wanted to use some different text. And remember, I made this a basic paragraph. So, um, it is like, uh, you know, if I want to change the settings, I'll go to the text model and change that settings right here. We added another text module right here. We added a divider, and then right here, this is all a text module, and then this is a button. Okay, Now the same thing over here, guys, remember, it's the same exact thing. We just sort of spaced it out. You see how I have I have credit that so it looks pretty good. So, um, that's basically a rundown of the, um of this page. Now, one last page we're going to look at is the We'll just go to this page right here. We'll go to the wall Commerce editorial page and I'll show you the back end for this page as well. And in the lobby, it's because there are. I have a lot of pages on this website, and so I really do take a long time Teoh to do this. So this right here I added in a, um, a text module attacks module and this section right here. These are actually both text models Now, also I really did was take the YouTube video and I just went to the text and just took the video. Now, in order to do that, you just need to go to YouTube, go to my channel, and I will just go ahead and grab a video, and I will go ahead and click on share. Yes, here it says, Embed right there. Click on in bed, right Click this. Copy that, and then just put that right there and make sure there's a tab right here under the text module. There's a visual, and there's a text. Make sure you put it in the text. You put it in the visual. It will not work and just paste it in there just like that and what you do that I'll go ahead and save and exit just to show you how this looks. And now you're going to see to YouTube videos. So there you go. So there is another video of, ah, this website or this video, whatever. So that is how you would put in a YouTube video and your text module. So I'm gonna close this, all right, and we'll go back and preview this page so really quickly. This right here, Let's go ahead and check out what it actually did. I use here. I think I just use a regular. I used an image model. Okay, I could have used a text module, but, um, this is an image module, a text, a text, an image, a text, a text and image model, a text and then text below that we have used another module. You see what I used here? It's been a while. It has been a long while. I added the ah, the slider module. So this is basically just a slider module and I have sort of made it look like a testimonial section so you can have continual testimonials right here. So this is basically a slider except I just use this to blend in with everything. So remember, it's all about being creative. Guys with your websites, I just think and you can also look at other websites and get ideas that will really help you out. Okay, so that's it for this quiz. I hope I helped you get some more ideas on how you can use the divvy theme to create virtually anything. So I will see you all in the next lecture. 27. Plugins and widgets: Hey, guys, welcome back. So in this lecture, we're going to talk about plug ins and we're also going to talk about widgets. And the reason why I sort of combined them is because plugging the widgets really go hand in hand. There's a lot of reasons why a lot of plug ins that you install would basically go in the widget area. Now, let me give you guys Ah, quick overview of what a plug in is. So a plug in is basically an added feature to your website, and it doesn't cost anything. There are some premium plug ins, but a lot of them are free. So we got over here and go to plug ins and just go to add new. You're going to see less of plug ins, and these have all sorts of stuff. Maybe you want to see you a kind of theme someone's using. You know, this is a theme check where you can check out what kind of team they're using. This right here is super super cast, which basically reduces the cash so it makes your site a little faster and just clicking right here unpopular. You can see like the most popular ones, like, you know, a total cash that reduces the speed of the reduces the cash on the website Google XML site mop. So if you want to generate a site map, you can solve that plug in, well, commerce. This gives you the ability to sell something. Yoast Seo. This basically makes it so you're on page optimization is fully optimized. They have all sorts of really cool gadgets, guys. And, like contact form seven, which basically creates a contact us page updraft WordPress backup plug in. So this basically creates backup of your website. That's why I said, you know, you never need to buy those those like host Gator things or any website that offers like, Oh, well, back up your website. Just don't do it because you have this plug in right here and you don't need to pay for that. And they also have, like, the off indicator. So maybe if he wants to have extra security on your website, you can have a two way off indicator like a Google ad Analects dashboard. They have all sorts of plug ins, guys, so I really can't give you guys like what's the best plug in. You know, it's hard to get people that answer because everybody has a different need, you know, for your website. So, um, this is kind of the part where you guys would sort of venture off and find out. Maybe like I need on instagram. You know, our Facebook like box. Let's type in Facebook like box Facebook. Like bunks just like that. All right. And right here you're given a list of Facebook like box. So these witches claim that they will create a Facebook like box for you guys. Some of them are really bad, but some of them are really amazing. Now, I've personally started to use this one right here. This one. It works really well. It's easy. So all you need to do is click on install now and they click on Activate Now. I have already installed this. So for you guys, it will be like this. It would be like, you know, install now and then you see, it's installing right there and then it will say activates. Click on activate. And there you go. The plugging is now activated. Now we want to use it. So in order to use it. Some plug ins work in the sidebar. Some plug ins don't work in the sidebar, but a majority of them work in the sidebar slash widget area. Because remember this section right here. These are all widgets. They're like they're waiting for us to, like, design it. You know, you can add a subscriber form. You can add so many things on the on the sidebar. So let me give you an example of them. All right, so over here, in a plug ins, we've installed this plug in. Now we need to activate it. Right? So let's go on over to the appearance and we'll go to widgets. Okay, So this is our widget area right now. The sidebar. You guys can see the search, recent comments, archives categories. Meta Now, in this section is the same thing. Recent comments, archives categories, meta. So if you want to add something, you just have to drag it over. So let's say you want a calendar. I'm gonna take this right here and just drag it over right below search and put like our calendar and click on save. All right. Now, if I refresh the page, you're going to see a calendar come up below recent comments, and there you go. So now we have this calendar right there. So let's just say you want to add in the Facebook like box. I'm gonna scroll down over here to the ah, see Right here. This is not the correct one. Already here. Widget widget, Facebook like box. All right, so I'm going to take this right here and drag it over right below search, and it's gonna give us this open page right here. So maybe the TIGHTLY wanted to be like, uh, like us, the page I d So remember, you need to make sure that this is not a private profile, because if it's a private profile, it will not work. Because remember, it's a private profile, so you might want to use a fan teach. So I'm gonna go to my Facebook over here, and I'm going to go to my Facebook fan page and you see this You are all right here. So I'm actually just gonna go ahead and copy this right here, just like that. My conversations was open. Sorry. And I'm going to go back to the website and it, but it says, Put the page, I d there. So I'm gonna put the page I d there, but pasted in there Now you can also control the with, and you can also control the height. And these are pixels. So 180 pixels or 300 pixels, use the small header. You know, not really sure with that setting means use a small head or not. But you can just, you know, do trial and error. Do yes or no and then test them out. See the differences. You can show friends faces. You can show the pages posts as well. So that being said, let's go ahead now and save it and see if this plug in works. And sometimes guys, if plug ins don't work. It's very common. Sometimes they're just bad developers out there that, you know it doesn't work. So right here, Yes, and see the Facebook like box comes up. But let's just see how much we can push it to the side. You see how it's sort of crunched up like that? Maybe I wanted to be a little longer. So on the with section over here, maybe I'll put 300 and go to safe. All right, So you see how it is now. Right now, let's refresh the page. All right, So you guys can see it's much bigger now, So this right here is a little bit better. It looks pretty cool. So if you guys want some, it looks like that, remember? Just, you know, mess around with the pixel settings or mess around with the, you know, the studies, that sort of, you know, adapted to your website. Now, maybe you want to add in some advertisements, maybe you want to make some money Now, are you an affiliate or not? I don't know if you guys promote any websites or not, but if you're affiliates, I would recommend the affiliate programs more than the Google AdSense. And I'll explain why. So this right here is my Google AdSense account. Now, I can actually you know, this is my home. So right here, I can see my current balance, etcetera. Now, if I go to my ads, you can get to get code. Now all you need to do is copy and paste this code. So over here, just go ahead and you don't have to follow me by the way. I'm just showing you in the future. If you want to add advertisements on your website, this is how you would do it. You go back to your website and you would actually create an arbitrary text so the text would basically create the the ads for you. So I'm going to close these right here, just like that. Now, let's just say you want to add in the the advertisement. So I need to do is drag this over here and copy in this, uh, this code in the content box, Remember, it's the arbitrary text box you click on Save and then the ad will start to appear. So that's if you want to run like Google AdWords. But guys, I am sorry, AdSense, but, you know, working on the Internet, I always recommend the affiliate programs. Now, why don't recommend the affiliate programs is because they pay you more money. So let's just say, for example, you're in the niche of maybe, you know, uh, dog products. Now, I know every company out there like Petco or any company has an affiliate program, and they will give you banners. They will give you stuff to put on their website. So I'm gonna fill it for Debbie right here. And this is their ah affiliate box. Now they're saying, like you need to do is copy and paste these onto your website and the batter will show. So let's try him. I'm gonna go ahead and take this code. It's going to go ahead and copy this code, and we're gonna go back to our witness area, and I'm actually gonna take this out and paste it in there now for the title. Guys, you never really want to put in advertisements for advertise or a title for advertisements . You know, it's like you could, you know, put maybe 50% off. They're having a sale put. You don't really want to tell people this isn't added. Click it. You know, you never want to do that. So going back over here, I added in the the advertisement, So I'm gonna click on Refresh, And there you go. So now we have the elegant themes banner right there. So if somebody clicks on this and purchases it, I make a commission, So you might want to do some research on some really cool affiliate programs because personally the Google ads. It's just you can convince somebody to buy, you know, like, you know, like Web hosting or some sort of, you know, Amazon product. You're gonna get more money. Now, if they just click on a Google AdSense account or Google AdSense ad, they're not gonna make that much. You're not gonna make that much. I mean, granted, you will get paid for that click. But, you know, you might get a few cents, so it's it might not be worth your time, But like I said, if you can have both, you can have Ah, you know, Google ad and you can have your Philly ad so going back over here, let's just say you also might want to enter in another widget. So let's just go ahead and search for another widget. So I'm gonna go to plug ins and go to add new. Now, let's just go ahead and go to popular. So what is a cool widget? We cannot I have no idea that I'm just gonna go ahead and just find one that I think is like, you know, like, uh, like maybe, um, you know, actually, you know, it's a good thing to add on your sidebar is a subscription form and remember earlier how we made a, um, and account for male chimp. You can actually add Ah, subscriber form on your sidebar. So I'm gonna go logging on my mail ship account just like that, and we're gonna go to I believe it is Thea the lists, and I believe it is sign up forms. So right here, I believe it is the embed forms, so you can actually add this to your to your website. So if I go to select, they're gonna give me different kinds. So you want to look like this or you can look like this. You make it look like this or like that, or you can have your own custom. CSS. So I'm going to something really basic right now. I'm just gonna do this skinny and right here how it says copy and paste onto your sites. So all you do is just scroll down and copying all of this text and go back to our website over here and we're gonna go down to our witness section again and we're going to add this as an arbitrary text again So I'm going to take this, put it right here and go ahead and pace it in there just like that. And I sometimes if it doesn't work, maybe you miss like a space. Or maybe remember, if even one thing is missing, it will not work. And right here, you put maybe sign up. Subscribe now, right? That's pretty cool. Some click on save and I'm gonna refresh the page. So how you have it, The little list right here. It says Subscribe. Now subscribe to our mailing list. So there's a lot of reasons why you want to use the sidebar on your blog's page. So if you guys were interested in using the you know, the sidebar with the widgets, this is your you know, your solution and say, Guys, there's a widget for everything. There is like a There's a twitter. Ah, lot of people have twitter feeds. So if you want people to see your twitter feed, you can put that up there, you know, or your instagram feed or, you know, an advertisement or something that one or something similar to that. So if you're interested in affiliate programs, you guys can sign up for, you know, any affiliate program that you're interested in and you can Like I said, just place the AB right there. And if somebody clicks on it and buys its, you will make a commission. So I basically prefer the, um you know, that's over. Ah, you know, I prefer I prefer the affiliate programs more than the the AdSense account. But I also want to introduce you all to Google analytics because Google Analytics is, um it's very, uh it basically attracts the customers that come to your website, and I always tell people I says, You know, it's not required, but it should be required because if you don't know who is coming to your website or anything about it, how would you possibly know what's going on? So let's go ahead and teach you how to add Google Analytics the easy way now really quickly , we're gonna go to my Google Onyx account, and I'm gonna go ahead and log into my account. So sign in and just Google Analytics. Okay, so this is my Google, Alex. I have a lot of other websites I work with, so we're gonna go back to my website right here and we're going to go to the plug ins and go to add new and I recommend everybody do this. It's free, It doesn't cost anything. And it tells you who's coming to your website. So right there, you could type in Google analytics just like that. And this is the easy way, because the other way you have to install script. You have to involve code. It might be complicated. So right here, you can install now. And like I said, this will not show up on the wooded area. So this is like purely back end, you know? So I installed the widget. Alright. I installed the plug in. Now, sometimes guys, you guys can't find the the plug ins. You're kind of like, OK, it only says deactivate or edit. What do I do here? So we click on edit right here, you're gonna get to the screen and says, Don't don't mess with this because this only involves coding. If it says that, don't mess with it. Okay? Now it might end up being somewhere on your, uh, your left side. So you gonna have to hover over stuff, you know, like tools, settings. Okay, There it is. You see that? So understandings Google Analytics is there. It doesn't tell you where it's at, but, you know, it's it's there. So you just see this Web property, I d And that's all they give you. So all you need to do is go to your Google AdSense account and get your Web property. I d. Now, if your brand new analytics you would just basically, you know, sign up Baba ball. But you see this code right here, that right there, that's it. That's all I need. So all you need to do is find your code idea, and I think there's other ways to find it. You know, um, I think it's under reporting. Or customization or admin. Yeah, under admin. I think you go to property settings or tracking info. Let me see if I can find this out for you guys. There it is. So your property settings and this right here is your tracking. I d. So you just go ahead and copy this, and then you just go ahead and just paste it right there. Now, this is the easiest way to install Google analytics guys, cause trust me. There are a lot of other ways to solve Google analytics, and it involves, You know, moving HTML code involves all sorts of weird stuff. So once you have it on there, you'll be able to go to your reporting and you'll be able to see if people are visiting your website. So, for example, sessions. How many times are people coming to the website? The average session duration. How long are they on your websites? The balance rate, which is very important, which indicates the higher the bounce rate, the worse it is because that means people are going to your website and they leave right away. That is what we call a bounce rate. So the lower the balance rate, the better probably around 50% is a decent balance rate because we can make everybody happy , right? But, you know, um, that's just the way it goes now, the goal conversion rate. So this is your conversion rate. How many people are coming to website and converting? Meaning they're buying something. So I guess I guess I will have ah e commerce tutorial on TV in another tutorial. But don't worry for you guys watching. This will probably provide you guys with coupon code were Maybe it's even free. Uh, I don't know that I teach on a lot of other websites, but I'm kind of new to you to me, but I'm kind of well known on the Internet, So I will let you guys know about that. Don't worry. So that is a rundown of Google analytics and also the plug ins and also the widgets. And that's my my opinion about, you know, advertisements, etcetera. So you can have, you know, Google ads on right here. Or you can choose to use whatever it will to like. So once you're comfortable, you know, you can sort of venture off And remember, if you always want to delete one of these right here, you just delete it. You know, click on this arrow deleted, and we're gonna talk about the foot or later. But the foot or guys is the same exact way. You just put in some texts and then, you know, put something in and you're done. So it's it's pretty self explanatory for the foot area. It's just a different area, you know, This is a sidebar. This is the foot or area That's it. Alright, guys. So I think that's it for the plug ins and widgets. You guys have any questions regarding plug ins and widgets? Like I said, it's sort of like a self. The self learning process. You know, you have to sort of find a good plug in and then apply. That's your widget and you're done. That's pretty much it in. A lot of them work in different ways, you know. So if you have any questions about plug ins or widgets, feel free to put it in. You know, if you're looking for a specific plug in, feel free to let me know, OK, so next we're going to go ahead and go to the next section so I will see everybody there. 28. Custom CSS: Hey, guys, welcome back. So in this lecture, we're going to talk about custom, CSS and what features it can provide your website. So right off the back, you guys see this big great arc. Now, this arc is not a background. It's not a image. It's basically a custom CSS module that I added. So in order to do that in order to give your website a like a background are or something like that, you need to go over here to the gear icon and actually give you guys a piece of script. Now, it's really simple to use this script. So in the CSS, under the before section, you're going to see that piece of script right there. Now, I'm just gonna copy it, and you can see the ark is now gone. Now, I'm gonna go ahead and paste it in there just like that, and you're gonna get this really cool arc. And we can modify this Ark two. However, we want it to look. So for example, you see right there were says height, go ahead and change the height to maybe around. I don't know, 50%. So now the ark is only hitting around 50% of the page. Now, if you wanted to have 100% you just add 100%. Now, the with let's say you want to make the with maybe around 50 50%. You guys can see the Ark is there, but it's a little smaller. Maybe you want to do around 100 50%. So, yes, concede that it's covering more of the page. Next you have your degrees. So what degree do you want this to be? A So, for example, I'm gonna change us back to 105 and let's just do a 90 degree angle. Okay, So I'm gonna leave this right here and out of 90 degrees so you guys can see it is now adding 90 degree angle. Now, if I go in front of the nine to put a negative sign, you're going to see the piece of script changed to the negative, Uh, negative 90 degree so you can go ahead and poop, maybe 180 degrees. It really depends on what you're going for for your websites. But if you guys want to add in like, you know, an arc that looks like that, like this is a one degree angle. This is basically where you would do it at. So I'm gonna go ahead and put it at maybe around 1 50 Oregon to maybe 100. Let's just go and do leave. It adds negative 100. So look like that. So that's how I got that design. And remember, you can contact elegant themes on their support form and get any sort of custom CSS that you're trying to get. Now I do have a little bonus for you guys. So you guys can actually use this script. I'll put it in the lecture notes. But let's just say you want to get something that looks a little bit more unique. Now you see right here how How is this this upward arrow? You see how it says Just go ahead and copied the script and put it in the after section. So if we scroll down right here, this is the after section. So they're basically saying Just go ahead and just copy this page or copy this code and put it in the after section. So with this code, you'll get an upwards arrow Look, we scroll down you'll get these three era looks, so there's a lot of different ways and features. You can design your Web site and they give you pictures of what the custom CSS does. You know, like this little page fold right here, folded corner. And they have instructions for each one. Each one is not the same. Okay, so maybe you want three dots, or maybe you want to add two lines. Now one of my favorite ones is actually the, um, probably the zigzag, which is a really cool feature, but you'll need to actually get the color code. So right here they have, like the RGB a number, and you need to contact elegant themes to get the correct RGB number for your website. Because there's thousands of different ways you can add color you can add in the half circle, which is pretty cool, or you can have the top curve. I think the top purpose really cool where you see like the website, start to like curve around like that and you would just go ahead and, you know, follow these instructions and paste the code in there and also the bottom curve. Maybe you want the bottom of your website to have that really cool curve effect. My favorite one is going to be the Ark design, which is this right here. So I've actually implement this on a customer website and this was at your side advocacy. It's a website I built for a client, and right off the back to you guys will be able to see this arc design. So you see that have this arc design that is with the custom CSS model. And this right here was made with the divvy theme, And I added in the Ark design again. And I also added in another custom, CSS was gives it this really cool, like, you know, little cool design on the bottom right there. So this can all be done with the custom CSS module. So I'll actually put this page in the the notes as well. It's a, um it's a page by elegant themes. So during the 100 days of Devi, they had this. So if he wants to have these really cool custom CSS features, you just need a copy and paste those into your website Next. You guessed NC right here. How I have sort of created thes arc designs, and this is actually with the same piece of script. And I just put it in different angles and just change the code to sort of give it this really cool blue, you know, effect that it just looks like, you know, there's just designs on the page, all right? So other than that guy's also, if you contact elegant themes on their forms and they tell you to, you know, put put this code in your after or put it in your main elements or your before section. Now you guys will know where you can put code. Now there is one other place where you can put code. So let me show you where that is. It's actually in the devi options. So I'm gonna save this right here. Now I want to go back over here to our dashboard. And remember, if they tell you to put this in the theme of your websites, where you want a certain I don't know, whatever you want done, go down to divvy and go to theme options, and you're going to scroll down right here until you see the bottom of this section right here, which is the custom CSS. So sometimes they will ask you to insert it inside the theme. So the custom CSS that would be right here under your theme options. Okay, So feel free to sort of venture off on your own. And, you know, if you have a specific need for custom CSS So you're trying to a certain look, but the thing just doesn't offer it. Remember, there's always custom CSS and anything could be done with custom CSS. Okay, guys. So that's it, guys, for custom. CSS On the next lecture, we will talk more about, um, other stuff. All right, so I will see you all there. 29. GETTING IMAGES: Hey, guys, welcome to this lecture. Now, this lecture is a very important lecture. I'm gonna show you in this lecture how to get ideas for your website. And I'm also gonna show you how to get amazing images for free on your or for your website . So the first thing I'm gonna do is take you to this website. You don't have to follow me, but these are Devi theme examples. So these are all made with the debate team. So just by looking at some of these websites, you can get really cool ideas. So, for example, when you click on this website, the design space taco and right off the back this was made using the divvy team. So looking at these websites, you can already tell This is an image module, a text, a divider, a text and a call to action. And right here, same thing. It's an image, etcetera. Now I'm gonna also redirect you to another website. This website is called Theme four Stott nets, and what they do is they sell thousands and thousands of different types of wordpress themes. But a lot of these are really, really bad. In fact, I use. Actually, their top ones and their page bowlers are nothing compared to the divvy theme. However, they have a lot of template examples that will actually help you get ideas. So, for example, I'm going to actually tell you what I'm actually going to show you guys the website that I'm actually gonna build. So this right here is a website called Regency, but it's kind of low rated, but they have some really, really cool images that I want. In fact, I'm going to use these on my next e commerce tutorial. So right here, I'm gonna click on this layout. Now, I want those images, but if you actually right, click on it, you can't save it because it will save it as an HTML Web page. So how do you get images like this right here or really amazing images like this? Well, I'm gonna show you in this lecture, so the only thing you need to do is right. Click on this and go to inspect. All right, now, right off the back. You're gonna be brought to this strip of code right here. But don't worry about it's, you know, it's It's ah you know, it's it's, you know, it's you need to know any of this, but you see All right, that right here how they have this URL, Ajay pick image in the picture of that girl. This picture is that link right there. So if I want this slider image I also need to do is copied this link right here. So I'm actually gonna go ahead and click on copy. And now I'm gonna go over here and click on Pace. Enter And there you go. There is the image, and you can right click on this and say the image and save it to your computer. So that being said, you guys can actually start browsing around and shopping on the Internet like the sun right here, and go on other websites and sort of get their designs because a lot of these other websites, they have some amazing looking Photoshopped images. And maybe you just don't want to, you know, do that You don't have the skill and is totally ethical. There's nothing against the rule of something. People use my images all the time. In other websites, people use my videos on other websites all the time. you know, it's just the way it goes on the Internet. It's just, you know, not unless you copyright it, you know, which is, like, Istock photo. Some like that. But none of these are copyrighted. Anybody can use images. These are just demo images. So another example is let's say I want this German right here. Maybe I have an e commerce store that I want to use this image on. Right. So here's the image right here. Now on a right click and click on inspects right off the back. You guys can see the images right there and also have to do is just go ahead and copy this link. So I'm gonna copy this link, and I'm gonna pace it in here. Hope I added up to much air are too much script. Make sure those cones on aren't there. And there you go. There is the image. Okay, so you guess it sort of browse around on other websites. But remember, I would never recommend another theme. Ah, lot of these themes, like it is, it is low rated because the page bill is probably not that good, But remember, they have a lot of amazing and beautiful images that you can use from and Votto market. So you take the time to sort of go around and check out other themes. You know, like, if you're in a specific niche, let's talk about maybe construction construction. Right? So we have this one right here. I don't know. We're just gonna click on this one. There's they have thousands of themes, but I don't recommend any of them. But the images are very nice. That's it. Makes the theme look good. So right off the back, I'm gonna go ahead, maybe go to this one right here. And, uh, we're gonna check out this website right here. So we have this website right here, and I'm gonna scroll down. Maybe I want this background right here. This background, this guy media what? That background. So I'm gonna go ahead and click on inspect and, um let's see, right here. So right here. This is actually ah, embedded on it. So we probably can't use this image right here. Yeah, we cannot use it. It's not an image is probably embedded on the website. So, um and this is ah, slider. So it's built into the slide er, so probably get usual images. So let's find another one. Let's use this one probably can use his background. All right, so I will click on inspect. All right. And there you go. You see the link right there? So right here. I click on this link so we can take this background image right here. You go ahead and double click on it. Now, guys, if it's built into the slider, you probably can't extract the image because it's probably uploaded into a different database. So right there is the image. So that is another way, guys for you guys to, uh, get ideas for your website and is also another website called Template Monster. But guys, I recommend never to buy these. I am not endorsing these guys in any way. However, they have designers that have thousands of different websites that you can sort of pick from and take a look. And remember, once you're done with that, you guys can just sort of mimic eight with the divvy theme. Because these themes right here are based like a template they can't change, So the divvy theme can change. So that's why you know, I always prefer the Davy theme. It's probably the number one rated theme on the planet. So, like I said this right here. Like I said, I think I showed you guys this before. You know, a background image call to action. Four modules. But it's just getting you the idea of practicing on another website. Okay, so that's why I wanted to show you guys. You guys have any questions? Feel free to let me know. I hope this helps you out. I hope this gives you ideas also how to extract images from other websites. So I will see you all in the next lecture. 30. Adding And Loading Sections: Hey, guys, welcome back. So in this section, we're going to learn all about adding toe library and how we can save our progress and put it onto another page. So, for instance, let's have you want to take this entire layout and put it onto another page. It's very simple. All you need to do is go on this this gear icon, make sure it's the blue one. Remember, the blue one is actually controlling this entire row right here, this entire section. So over here, I'm gonna click on this and give it a name. So I'm gonna go ahead and put maybe, um uh, Robert Landing page. Ah, against Bill. Now, guys, I don't recommend using global items. Don't use global items. Basically, global items allows you to put it all over your websites. But right now there are some conflict with global items, so I'm not even going to talk about global items. But you can read all about global items on the Davy websites. But for now, I'm just gonna go ahead and do save to library, and you're gonna see it's gonna save. And I'm gonna click over here just to save it again. Okay, Now I'm going, Teoh, create a new page. So over here, I'm gonna go to plus new page, and I'm going to do something like tests. And I'm going to use the Davy Builder, and I'm gonna click on Use the visual builder. All right, So the visual builder is loading, and now I'm actually going to load the sleigh out on this on this section right here. So to do that, I'm gonna click on this blue icon, click on add from library, and I'm going to scroll down to Robert Landing page. Remember? Very that Page Robert landing page and just click on it. And there you go. So the pages loaded. That's it. So if you want to close that section just like that, So there you go. So we've actually, um, you know, we've we've created this page in a matter of seconds. So if you have content that you want to bring to another page, that is how you would do it. You would save its and added to the library, and you can load it and you can actually go to your your dashboard right here. And you can view all the layoffs you have. So go to divvy and go to divvy library. All right. And right here, you'll see Robert Landing page. So these are all of the layouts that I have, and we will talk about pre defined layout. Ah, probably in the next two lectures. Okay, but that is the basic overview of how to add something in and put it onto another page. Okay, so I will see you all in the next lecture. 31. Footer Area: Hey, guys, Welcome back. So in this lecture, we are going to talk about the footer. So what is a footer? Tree of Hall heard that word before. So it's going out of the bottom of the page. We're going to see this bottom part right here, which is the footer now. There's a lot of different ways we can design this. And just before we talked about plug ins and widgets. So right now, you can already tell that this is a Facebook like box widget, so you can understand how to use that. So let's just go ahead and now and go to, ah, closest box right here and reopen it so you guys can visually see it. We're gonna go over here to your section up here and go to theme customizer. All right, so it is loading, and now you guys can see that's back to where I was before. Now I'm just gonna go ahead and scroll all the way down to the bottom, and we're actually going to put in some widgets. So widgets is basically, um, like plug ins, just like we added, which is on our side bar, The same exact thing for the footer. There is no difference. So I hear foot area one I added in a text widget, but I'm going to remove this and do it from scratch. So footer area one. Now I can click on add a widget, just like before we can go ahead and select a drop down of widgets. So right here I'm gonna add in the arbitrary text and I'm gonna put, you know, learn about us, learn about us, and then right here we can add in some dummy content. You know, maybe you can add in something like, No, I don't know. See here. There you go. It's it's going in a rides. Okay, so it is loading my dummy contents, and there you go. So there really is no difference. Guys on to, you know, change. This is pretty standard. Now let's go back over here and go to fitter area, too. So this section right here controls foot area to now. I'm just gonna go ahead and delete this right here, and we're gonna add in another widget. Let's just go ahead and enter in. Maybe. Ah, what should we add in? Ah, search bar. You know, we can admit in a cool search bar and then maybe search now and also you guys can enter in . You know, like those subscribers. You know how earlier we talked about the male chimps subscriber form? You can add that on the bottom of the page as well. And I'm gonna go ahead and go back and the 30 area three. So, just like before guys with the widgets, I just simply put the widget in. And, you know, the same options came up from the sidebar. So it really is the same exact thing. Now we can also enter in. I'm sorry. Change the footer layout the color. So if you want change the foot or background color you know you can do that here. You could make it look like, however you want it to look, You can also change the, um you know, the ah, the font, the text size of the fonts. All these options apply to the, like, the header text right here. You can see that so you can fully edit the, uh, this foot area through these options on the widget on the foot or section footer elements you could have so show the social icons here at the bottom, or you can, you know, take it off. Next you have your foot or menu so you can change the foot or menu if you would like. But, you know, like I said, I probably just leave this. You leave the standard going back here we have the bottom bar, which is this section on the bottom. So let's say you want to, you know, put I put right here. Designed by Darrell Wilson Powered by Davey Theme. So right they're designed by Darrell Wilson. Powered by Debbie Theme, you can change the if you choose to have social icons you can have at the bottom. You can disable the foot or credits if you'd like. You don't have to have it. You can also change the text color at the bottom, and you can change anything you want here at this bottom bar. So, in a nutshell, guys, that's basically the footer section is very, very similar to the sidebars. I mean, you add in widgets, you add in whatever sort of plug ins you want to put in there. You can put in an instagram feed. You can put in a subscriber form. You can put in all sorts of stuff. So that's basically it, guys for the footer. So let's go on to the next lecture, so I will see you all there. 32. Divi Premade Layouts: Hey, guys, welcome back. So in this lecture, we're gonna talk all about pre defined layout. So basically creating a website and exporting and importing to another website and a lot of people have designed free templates that you can just import to your divvy theme and just use for free now really quickly. I want you guys to go Teoh my website right here and right here. It's darrell wilson dot com up with us a description and go to divvy layouts. And I have a lot of layouts. I currently sell like these air like six page websites that you can buy for 50 bucks. But we're gonna use the free one for this tutorial. So right here, you're going to see free layout pack for jamon exercise. So go ahead and click on that. And don't worry, I'll have a page where you can get, like, maybe 50 different kinds of layouts for free people, making all the time so really quick. If you want to view the demo, you can click on view the demo, and you can sort of see what this layout looks like. So you can actually just import this to your website and you can make any changes. You want to it. And you know this is live on your website. I mean, you have a phone custom made website in seconds. So let me show you how to use this. So we're gonna add this to the cart, all right? And then we're gonna view the cart. And now we're going Teoh, proceed to check out It's free. Doesn't cost anything. So just go ahead and put like your information on their, Like I'm on patrol. Wilson put my, you know, Darryl. But this and then put my phone. So right here, I just put a dress. Well, Avenue, men, I'll go ahead, put Rosemead, and then here, put a zip code. And there you go. So now I'm gonna go ahead and do Ah, place. Order. All right. So once you're done placing the order, you were brought to this peach. So the order was received, and you can download this layout right here. So layout for Jim Click on that. And right now it's downloading. So it's in a zip folder, but you need to make sure that you extract it. You can just do that by clicking on it. And it Willis extract. So now I'm gonna take this folder right here. I'm gonna put it right here. Now you need to make sure that you import the dot Jason files of a double click on this. You're going to see that these folders right here about the all Now the all is basically all of the layouts. So you can import thes independently, or you can just click on all which will do all of them. So the home, the contact, the services and about us. So you have a website already made for you. It's pretty amazing. So I'm going to Ah, go open this right here. And we're gonna go to our website right now. And I want you guys to use the divvy library. So we're gonna go to dashboard. We're gonna go downs to divvy and goats to the Diddy library, and we're going to upload those files. We're going to import these files onto our Davey library, so I'm going to click on Import and Export. We're going on import. Choose the file. Now. I'm gonna find Thea Devi layout right here. So it was the ah see Right here. It was e see if I can find it. I have Sony layouts. Did the whole I did the whole page. The whole folder. So it's gonna be here somewhere. Um, okay, right here. So I'm actually just going to use the home right here, so I just want to use the home. So I'm gonna cook on open, and then I'm gonna go ahead and import. And guys, if you cook on import and it just sits at 1% for a long time, it probably bugged out or something. So just close it, Just refresh the page and try it again. Okay, so I've successfully imported the layout. Okay, so it's loading now. I want to actually use that lay on my website, so I'm actually gonna go back over here and go to plus and go to page, and we're going to import this layout now. So right here we can put Jim and we can go to use the Davy Builder. And right over here, you can actually up important export this. So we're just going to click on import and we're going to do I'm sorry. We're going to go Teoh ad from library because we already added to our library. I prefer the library because sometimes new imported directly from your computer, Sometimes it doesn't work. Sometimes you just get random errors. But when you add it from library, it usually works, you know, 99% of the time. So right here, you see some of the layouts that we have. But this isn't the layout that I currently wanted, so I'm going to actually click on load from library. Sorry. Load from library. And right here. They've actually gave us a lot of pre defined layouts. But these are the ones that comes standard with Davey. So you can use these layout if you prefer. Um, you know, a lot of these air really cool to get you started with, So, um, I don't want to load Aeneas right now, but you guys can check this on your free time. You know, like, for example, I'll just do one. I'll just do like Thea. Let's just do the sales page, and then I'll click on previous changes. All right, so now this whole page is created for us. That's it. So everything's already done for you guys. You just need to put in your information and you're all set and you're all ready to go. So that's a really cool feature of how you can use Thea Davey premium layouts. But I don't want to use those layouts. I want to use the ones that we eat. We got from my website, so I don't think on load from library add from library and we're going to find the home for the gym right here. So the fitness layout kit for the home. So I've already done with this probably 40 times. And don't worry, guys. I'm going to give you a link where you can get a lot of other ones. So right here, I'm so click on load and I'm gonna click on preview just like that. And there you go. So this is live on the website, guys, everything's already done. You know, we have ah, fully made operation operating website. So if you're a web developer and you wants to give your client a website, this would be an ideal website to give them. You know, you have a really cool home page. It's really needs. There's a lot of cool features on its They've done all the hard work for you. So it's a really, really amazing feature that they've added for divvy and all you have to do for these. Open them up right here and you can see the models they used. So these are all the models that they used. You guys can see so really quickly. Guys, I'm going to link you to another website in the bonus material. And this website actually has a lot of really cool layout that elegant themes has created. So you can get all these layouts. In fact, this one right here is when I gave you guys. So it's for free on this website as well. And they have all these cool layouts that you can use, you know, like thes landing pages, pricing tables like custom pricing tables, portfolios they have, you know, Ah Devi headers, which they will tell you how to use that. But in layout packs, if you're too lazy to make buttons issue, no, they'll make you own custom buttons. They have, like a split screen layout. They have a contact us page and member earlier. How we talked about blawg posts If you scroll down right here, they have right here. Block posts. So, like I said, they have tons and tons of layout packs for you guys. So your websites basically already created. And if I got's to the block post, I'm actually going to see if we can preview this right here so you can download it here. But you guys, since he right here that these are the layout packs. So, like I said, the web, your block post is already made for you, and it's really professional. It looks like, you know, the Huffington Post. It looks really, really, really good. So that is another advantage of using the divvy thing. So the reason why I showed you this at the end or more to the end of the story because I don't want people just toe down little layout pack and then try to learn it, you know, from themselves. I said, no. I want you to learn how to use every module. So you understand how you can manipulate this to make it look how you want it to look so really quickly what we've actually, um, you know, we've saved this layout, but let's go ahead and say it. Maybe you want to export a layout so really quickly. This was the page that we did. Now you can click over here under this setting onto the page and you click on Export and I'll just put Test one and I'll click on Export Devi brotherly out just like that. There you go. Remember Tests one. And it's a Jason file of dot Jason Fall. So let's say you create a website. In fact, if you go to my website right here, these were actually websites that I created from scratch, and all I did was just export the layouts and you can purchase it. So, for example, will go check out this photography layout will view the demo. And I literally had to build this Web site from scratch. And then I said, OK, now I'll go ahead and sell the layout so you can purchase this whole layout for your website and that's it. Everything's already done. So you have the home d about us. Just it looks really cool and you have the services page and you have the pricing it there and you have the contact us right there. So this is the advantage of using the divvy theme a lot of other themes. Guys cannot do this, especially no free theme on the planets can do this right here. So this is a really big advantage of using the Davy theme. So also, if you guys, you know, watch this tutorial and you think that you're good at making layouts and you think that you can possibly make a career in this, I invite you to go to my website durables and dot com. You can actually apply as a vendor. So as a vendor you can actually create these layouts and sell them on my website. People I get maybe around, I don't know, like 7 8000 visitors a month, so people will see your layouts. They like it, they'll buy it. So it's basically passive income free, you know, So you can actually make your layouts and then submit them to me by fitting off this vendor form. Or you can start your own website. Maybe, you know, create your own Davey layouts, etcetera. So this is a really, really cool feature that Devi has introduced. So, um, I recommend using the premium layouts. And like I said, all these layoffs are for free guys. So it's It's truly amazing what you can do with TV theme. And it's just such a good is such a good bye. You know, it really is like there is no other way to make this any other easier for you. Right? So that's about it, guys, for this lecture. So I will see you guys all in the next lecture, and I hope this really helped you out. And I really encourage you all to use the Devi pre mate layouts. Okay, so I will see you all in the next lecture. 33. Ending: Alright, guys. Well, thank you for watching my course. You know, I really hope this course helped you out. And, Ah, if you guys ever need help with anything, feel free to ask questions. Also, if you guys want to sell your layouts, feel free to let me know, or you guys can actually, you know, purchase wine, one of mine. I'll provide you guys with a coupon code for a really big discount on these layouts. It's a lot of work, you know? I mean, like, take seven page website, and that probably takes, like, a week or so, you know, so you can get one for maybe, like, 25 bucks. Right? So that's it for it. Guys. Also, you guys confined me on YouTube. I'm pretty big on YouTube. You guys can search my name. Darrell wilson dot com where I teach all about WordPress tutorials and also digital marketing. So, like I said, um, you know, Please, you know, let me know how I did if I needed, you know, in performance on somewhere. Or if there's somewhere I did not cover, please feel for you to let me know. Guys, I hope this tutorial really helped you guys build your websites. And if there anything I did not cover, just proofread, let me know. Maybe I can add it in in the lecture. So thanks for watching guys, and I really appreciate it.