How To Make A Wordpress Website 2018 - Divi Theme Tutorial | Darrel Wilson | Skillshare

How To Make A Wordpress Website 2018 - Divi Theme Tutorial

Darrel Wilson, Wordpress Designer, Digital Marketer

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
18 Lessons (3h 2m)
    • 1. DIVI PART 1 INTRO

      3:15
    • 2. DIVI PART 2 Hosting and Wordpress

      8:04
    • 3. DIVI PART 3 Divi Theme Installation and Pages

      7:14
    • 4. DIVI PART 4 HOMEPAGE CREATION

      18:16
    • 5. DIVI PART 5 HOMEPAGE CREATION : SPLIT SCREEN

      8:25
    • 6. DIVI PART 6 DOUBLE SPLIT SCREEN

      12:38
    • 7. DIVI PART 7 FEATURES AND DIVI LIBAARY

      10:31
    • 8. DIVI PART 8 TESTIMONIALS AND DIVI LIBRARY

      12:28
    • 9. DIVI PART 9 Theme Customizer, settings

      6:34
    • 10. DIVI PART 10 Additional Resources

      4:37
    • 11. DIVI PART 11 Additional Resources

      2:59
    • 12. DIVI PART 12 Theme Customizer and Library

      9:58
    • 13. DIVI PART 13 About Us Page

      11:40
    • 14. DIVI PART 14 Slider

      13:07
    • 15. DIVI PART 15 Setting Up Blog Page

      8:12
    • 16. DIVI PART 16 Creating Contact Form

      14:58
    • 17. DIVI PART 17 ADDITIONAL LAYOUTS

      11:21
    • 18. CSS TUTORIAL

      17:52

About This Class

Why Take This AMAZING Course?

  • I am a highly rated instructor on udemy. I have over 400,000 views a month on tutorials with positive reviews!
  • Use The #1 Selling Theme for Wordpress On The PLANET
  • I Have Helped Teach And Create Over 500 Wordpress Websites! 
  • Get a Modern And Amazing Look For Your Website That Will Impress!
  • Learn From A Professional Who Creates Websites For a Living with over 6,000 Visits!
  • THE MOST UPDATE AND MODERN TUTORIAL. Dont Settle For Outdated Content!
  • Get A fully Responsive Website And Mobile Responsive
  • Over 15,000,000 Minutes Watched. Over 4 Million Views. In 180 Countries.

Unlike Other Lectures. I Cover Everything. Dont be left in the dark with other lectures that are only one hour long. I help my students and make sure they are 100% informed on all wordpress features. This lecture is very detailed and will make you fully understand how you can create your wordpress website from scratch as a beginner. In this tutorial you will learn how to make a wordpress step by step with no experience required!

Transcripts

1. DIVI PART 1 INTRO: What's up, guys? My name is Darrell and today is the day you are going to learn how to make a WordPress websites step by step with no experience required. Now, in this WordPress tutorial, you're not just gonna learn how to create WordPress. Replace from scratch, but you're gonna learn how to create professional, modern, mobile, responsive websites that fit for 2000 and 18. In fact, this website was designed by a world class designer to help my viewers get some inspiration and ideas for your website. Because let's be honest, you know, nobody likes an ugly website, you know, how many times have you left a website? Because you like the way it looked. So in this video, I'm gonna show you how you can master WordPress and also create professional websites that look amazing. Now let me give you all a quick tour this website and show you how this page builder works in this WordPress tutorial. So today we are going to be using the number one rated WordPress theme in the world. We're going to be using the Devi theme and guys making websites today has never been easier . So, for example, let's just say I want to take this box and drag it right there. Take this box and drug it right there. Maybe he wants to change this text. So I'm going to type in something like great design. Click on Save and guys, That is it. The changes are alive. So it has never been easier to make a website today with the David theme. Now, let me give you guys a quick tour of the rest of the websites. So this right here is our about us page. And you guys can always change the color you can add in your own images. You can change. The font you can be is customizable as you want with your websites. So today I'm gonna be showing you how you can incorporate thes same designs on your website because it's really easy making websites with David. Theme is so simple. So this right here is our about us page, and next is our services page. So I'll be showing you guys how you guys can create this services page for your websites. So maybe you want a website for your business or your just like the regular person and kind of you know, poking around in a Tijuana website today in the sectorial. I'm going to show you how you can do that simply and easily. Guys, it's so easy. So this is our services page and next is our block page. So maybe you want to add a blawg to your websites. So right here we have these block posts and click on this one. And I'm gonna show you guys how you can incorporate a blogger on your website along with something like a facebook like box or ah, Twitter feed or instagram or whatever platform you use. There's tons of amount through today. It's hard to keep up with them and hear people can comment on its you know they can. You can reply to the comments and a man thanks for commenting and all that good stuff. And lastly always show you guys how to create this contact form and again, guys, you can change the color, you can change the font, and I will also be providing you guys with free images in the sectorial and templates to help get you started with design and the core for your websites. And lastly, let's say you're a small business owner, and you kind of want to tell people where you are. So I'll show you how you can incorporate Google maps on your websites so you can actually show people where you are located. So if you guys are ready to create an amazing website from scratch and you really want to learn how to use WordPress and make some really amazing designs, keep washing guys. Business tutorial. I'm gonna show you how to do it today, step by step. 2. DIVI PART 2 Hosting and Wordpress: So the first thing we're going to do is get our domain and hosting, and my link will provide you all with a 60% discount off your hosting. After that, we are going to purchase the divvy theme. Then we're going to install WordPress, and lastly, we are going to create our amazing WordPress websites. Now there is a link in the description of this video. It will take you to a page that looks just like this. Right here. So this is cyclone dot com and I use I cannot calm because I compared them against nine other competitors and the guys came up as number one as the most fastest yet. Also the most reliable. Do you have to worry about your website? Kind of like crashing or going down because you guys have some incredible of time. They also have a 24 hour customer support line and a 30 day money back guarantee. So that alone wins in my book. And that's me right there saying Hey, yeah, you know, these guys were amazing. I personally use these guys on my website as well. So right here is our hosting plans. Now I'm gonna talk about each one, but I'm going to recommend only one. So I recommend the grow big because with grow big, you gets unlimited websites hosted rather than just a single one. So, for example, let's say you're making websites and later want to make like two or three websites. You can do that with the grow big or even the go geek option. So for those of you have been around, were press for a while and you kind of want to upgrade. I recommend the go geek as well. So right here we go ahead and click on order. And right here you put in your domain so you can put in something like I love Star Wars. And then, you know, six or I left our six and then proceed. And then right now, it would tell you if that domain is available. So this domain is available, and right here you would put it in your account information. You know, your email, your password and then your client information, etcetera. And give them your social security number. I'm sitting. Don't don't put in your social. I just It's just a joke right here. You had put in your card number and then, you know, etcetera And you know, your billing address. Whatever you guys remember, these guys have a 30 day money back guarantee. So I recommend the 12 month period because, you know, 23 weeks will give you enough time to decide if this hosting companies for you or not. But trust me, I am almost guaranteed that this is because I use it. I've been around tons of hosting companies. I've had some nightmares. Like where I wake up on my side is gone on like Oh my God. You know, But these guys are really reliable on really fast now, also for the extra services I recommend, actually, everything now usually other services. I don't, but I'll just tell you what they do. So domain privacy basically protect your personal information if someone tries to look you up on the Internet. So if you would want that to click onto me in privacy and also the cyclone sites Ganor, this will basically check your website every single day to see if Website has been hacked or any malicious code has been injected. And this personally happened to me. Guys, I've been in Web design for a while. So I know that sometimes there's crazy people out there who want to, like, you know, spam your website with Viagra or something. This right here would be a great option for you. So after you're done putting all that information and you would click on terms of service Okay, that's enough. And then you click on pay now, so I will go ahead and meet you on the next page. All rights. Congratulations. You guys made it. So this section right here is the customer portal. So after you guys check out brought to this page right here, and this is the page or area where you can manage all your stuff. Such as, like, if you have a question about something you can go to support or you can like, you know, look at their fax. You guys can also update your billing information right here. You guys can also add additional services. So maybe you want to add, like a dedicated server or a cloud hosting or upgrade. You can do that. All right. Here is well, you can also add, like, you know, all this stuff right here. So tens of cool stuff, but you'll need to go to my accounts and we're going to install WordPress. So right here is your hosting account, and these are the domains. So I have tons of domain that I use. So right here we go to manage accounts, and then you go to go to see panel, you might get a little box that pops up, just press okay? And just keep going. Always press. Okay? Never read the warning signs. Okay, So right here, you're gonna go down, and you're gonna go to WordPress because we're going to install WordPress onto our domain. So here, WordPress and go ahead and scroll down right here. Click on install now. All right, so right here you go and find your domain. So the domain that you purchased should be right here somewhere. So, um, you know, just go ahead and click. It's so I'm just gonna select this one right here and right here. Make sure there is nothing there. Okay. Right here. You're gonna put your site name you guys. You can change this later, so don't worry about you. Cannot, like, you know I'm gonna change us toe like a patty with my dog and then the best dog right here . You can add your user name so you can put in, like, Patty or whatever you want. And then you can put in your password. And remember, he will need this password to log into WordPress. So I'll make mine the same. And then right here, make sure you put your email right here. I'll just leave it standard. And then once we're doing, we didn't select. You know your language. Those of you who speak a different language, you might want to put it right here. But I'm going to select English because I speak English and right here, you can add in something like these are plug ins. You don't need this. I'll talk more about plug ins a little bit later. In this tutorial, they're basically, like, added features for your websites. Okay, so what? You're done, you click on install, and it is installing WordPress onto our domain. It says it's gonna take, like, four minutes, guys, but it probably takes, like, maybe 15 20 seconds at most. All right, it's 100 1% done. Awesome. Okay. Congratulations, guys. We have installed wordpress now to access WordPress you click on this. You are all right here. All right, so is taking us to our website. And congratulations, guys. This is your website. So if you want to visit your website really quickly, you're kind of excited and click on visit sites. And this is your science. So this is live and right here we have Patty the best dog, and we have all this. Resource is so we have successfully installed wordpress onto our domain and hosting. So before we go any further, I want to kind of change to settings and WordPress that are very essential. So right here, I want to go to dashboard and again. Guys, this is like where all the magic happens. So when you want to make pages or post, you'll do everything back here. But not to worry. I'll run you through everything so you'll know what to do. So right here under users, go to your profile. Now, this is just for your purposes. So if you ever want to change your password in the future for WordPress, you do it right here. So it's growing down here. So right here under generate password. You click on this and type in whatever password you would want for your websites. And also, if you ever want to change the email website, this is where you would do it as well. Okay, so I'm not gonna change my password because I'm you know, I don't want to click on cancel now. One more setting I wants Teoh go through before we go any further Is Perma links. So right here, go to settings and go to Perma links. Now, right here we have our permanent settings. Now, usually it's under a day and name, but you always want to do post name. So, for example, when you go to a website like you see, it's like your website dot com dash about us, right? Not your website. Dash 20 A. All this crazy moment, Jumbo. And also post name is the best for Seo purposes. So who's going down here? I go to save changes. All right, so they actually really do. Guys is installed the Devi theme. But before we do that, let's take a look at our progress 3. DIVI PART 3 Divi Theme Installation and Pages: So first we got our domain and hosting congratulations. Then we installed WordPress. The next we're going to do is purchase and install the divvy thing. Now there is a link in the description of this video. It will take you to a page that looks just like this right here. And also congratulations. You guys get a 10% off. Now, this company is providing you wall with the Davy theme and also unlimited support for your website. So basically, if you guys ever have a problem with your website or something's not working, these guys will provide unlimited support for your website, which is pretty incredible. You get a team of developers to help you out with your website and also they provide you all with a 30 day money back guarantee. Now, in this industry, if you got other websites, they don't offer that many Web sites do not offer money back guarantees. But elegant themed is so confident that you will love the theme. They will provide you all with a 30 day money back guarantee. And I personally use this guy's on my own website. So I'm not just trying to tell you that Oh, Yeah, I go and buy. No, I use it on my website, and all of my clients would place as well because it's number one for a reason. So right here, I'm a go to sign up today. And then right here, you can do your user name, your email, your password confirm it's and then right here you put in your information and then complete registration. And as they have so many tutorials on, like, you know, they provide you all of free layouts like tutorials to help you get better with design. This company truly is amazing. So right here to go to complete registration. And I have an account guy. So I'm gonna go ahead and log in to my website and I get so many people on my YouTube channel who always balance around between tutorials and then they always come to mind. And they're kind of like, Man, I should have just listened for the beginning instead of wasting weeks of my time trying to find, like, other thieves, like guys press me. I've been on WordPress for a long time. I know what's good, and I know it's bad and this is good. You know. So right here is your account guy. So this is like your downloads and like, support. If you have a question or something, you can also check out there blogging comments. You know, you can block you check on their block. Controlling like a This is crazy. But no, I'm just kidding. They provide some really cool stuff. So I go back right here and right here is Debbie. So right here. Click on download. And this is going to download the Davy theme. All right, so we don't live with the TV theme. Now, let's go ahead and uploaded to our WordPress website. So I'm go to appearance right here and go to themes now. Right here. Click on add new and go to upload theme. Right Here we go to choose a file. I'm going to look for the downloads. So you look for your d V theme. So right here I have DV to go to open and then go to install now. All right, so it is installing the DVD. All right here. It tells me it has installed successfully right here. Click on Activate and voila! We have successfully installed the DVT and congratulations have you guys want to look at your website right now to see how it looks again? You guys and go right here to visit sites. And of course, it looks nothing like our website, but not to worry. We're gonna make a few changes and then we're going to start designing our website. So let's go ahead now and create some pages. So we want to make the home about the services and all that stuff so you can actually go right here to plus do and go to page or you go with your dashboard. It produces the same results right here. Pages add new. So it's going now and create some pages. So we're here to do a home page and go to publish. And then let's say I want to make another page. So right here at new. And then I want this to be our about us page, and then we'll go ahead and create be services and the blawg and the contact. So here services. Oh, yeah. Let me know what? You got. A lot of Star Wars, By the way. I didn't like it. I don't know. That was a devout Star Wars fan, But the last hours I was truly disappointed. I just didn't understand most of it. I felt like they were just in a hurry to make the movie and they just really didn't like have the, like, the quality writing content I was hoping for. So I was kind of Torrance. I'm a huge Star Wars fan. So anyways, so, guys, I made those pages. Now we need to actually add this to our menu. So let's go ahead and over here to appearance and go to menus. And let's go ahead and create a menu. So I always just do menu one man you want. What a great menu. Now, right here on the pages. I'm go to view. All So I was gonna select both homes, the blawg, contact all of this stuff right here and go to add to menu. So right here we have custom link. Now, we don't want this right here, but I'm explained to you what custom links are so right here. You can also see custom links. You can make your own links. Let's say, for example, you wants to link them to, like a PayPal donation or to another website you would just put in, like, you know whatever website you want. And then I hear but like, Darrell sites And then whenever they click on that link, they will be redirected to whatever you're all you put there and this u R l will show, or this will basically show them so that if you want a custom link and it could be like, you know, you can have it for all different type of reasons. But I just give you an example of what a custom link is. But for now, I'm going to remove it, and I want to go ahead degree this menu. So I want the about us right there, the home about us going to put the services right there, the block and the contact to make this a primary menu and go to save now. One thing. I also want to point out that if you guys want a drop down menu where you like, hover over something and display something else, you would just take this and simply drag it under and go to safe. So now if I go over to our Web site, you're going to see the HomeServices blogging contact and the about us will be a sub menu. So here we have the homeservices blogging contact. And if I hover over the home, this is now a subcategory, so you can put like services and then maybe, like, you know, like you're a contractor, like plumbing, roofing. Whatever else you want to offer, you can add that under. So now we need to actually set our home page. So we do that through the theme Customizer and guys. Every single theme out there has a theme. Customizer Devi has a very well designed theme custom. Africa has tons of options. You can really change a lot of stuff such as your logo and everything else. And also for those of you who don't have a logo and you are one, don't worry about it, because I'm going to provide you all with a website that will create a really cool logo for just five bucks. In fact, I use that website for my logo Now, right here you have some options, but not to worry. We'll need to use most of these right now. The one thing I want you guys to do is go to home page go to a static page and your home page you want to select as home. So what that means is when someone visits your website, they'll be redirected to whatever pays you put here. So I want to put home right there and go to publish, and then we hear him click on X. All right, so these are pages you guys can see the services, the blog's the contact. Of course, they're all empty because we haven't even started to decorate any of them. So let's go ahead now and do that. Let's go ahead now and creates this websites and make it look amazing. 4. DIVI PART 4 HOMEPAGE CREATION: click on enable visual boulder. And basically, this is what we use to kind of design our website from a visual standpoint, so we can basically see what we're doing. So right here we have this box. Now I'm just gonna delete this box and lead this and just kind of start over from scratch. So we have one column row right here, right click on this. Plus, and I want to add a single row right now. What you want in this row? Well, I want some text. So right here must select text guys. There's a bunch of different modules, you know, There's, like, a button. Um, you know, call to action in the contact form pictures. They have tons of modules. So, you know, I'm just letting you guys know basically what Davy offers. But for right now, I just want to select a text module, cause I just want to enter a simple text and right here on the type in elegance. All right, so right here, I'm going to click on this, and I want to like this as a heading text. Now, later, this tutorial. You understand why I'm doing that's but for right Now I just want to select this right here as a heading text. Now I want to design this. So right here, click on the design tab and click on heading texts because we selected a header text and I want to select a different fun. You know, I want to change this up, you know, it's right here. I'm a click on open sands. You guys can also search for whatever funds you want. They have tons of funds, you know? So I mean, they have just so many. And you can also upload them, like if you're like a developer or whatever and you want, like, downloading from, like, Google, Google fonts or something. They have tons of funds, but I don't think he needs to, because they have so many right here. But I'm just like open sands right here and then for the fonts. We can have it as light. So right here you can see it's getting lights or we're gonna have it something like ultra bold. Now you can also italicize it's You can make it all caps. You can, you know, you can kind of mess around with its to fit. Whatever you're trying to accomplish, but right here. I don't want to leave it. Is that I don't want to tell us. I don't like that. Now I want to align this to the center. So right, horrific on center alignment. Now you can see that it's central lines, and I want to make this text bigger. I want to make it really big. So here, I'm just gonna go ahead and select it now. Really cool trick that I'm going to show you guys right now. Let's say you want something bigger than 100 pixels. Well, you have to manually type it in, and then it'll basically show bigger like that. So that's a kind of a little trick if you wanted to be a little bit bigger. So right here we put, like, 120 pixels. Okay. And then what color do you want? This? Well, I can't want it like a pitch black. All right, so there is my letter and letter spacing. So if you guys want to space out the words, you guys can do it like that. You know, you can kind of understand how you can get creative. I've seen a lot of photographers kind of use that strategy. But right now he's gonna say no, don't use it. Also line high. We'll talk more about that a little bit later because we don't have anything above or below it. Too much also shadows. So this is a really cool option. You guys can add a shadow behind it. You are having this little cool shadow behind us. You can kind of emphasize what you're doing right here. Also for this box right here. You guys can actually move it right there. You can put it here. You can kind of be customizable. Do whatever you want. I like to kind of have it like this right here. Do you just, You know, I just kind of like to move it really quick her, You know, I just kind of like it like that also right here you can control the length of the shadow. So if you guys wanna have this cool effect where it's kind of like, you know, has this, you know this effect, you can have that as well. And of course, you can also change it vertically as well. So there's a lot of cool ways you can use to design this as well. All right, so but I don't really want a shadow, but I'm just kind of basically explaining what the shadow is. And also you can control the blur strength, like how much blurred he wants. You can change the actual color of the shadow. So instead of having that's gray, you can have something like a red. So you can see now we haven't read etcetera. So that's basically what a shadow is Now, guys, all these options basically are the same for all the modules. So once you learn the options for one module, you basically learn for all the modules. So you really only have to learn this once. And then once you use other modules, it's the same thing. But right here, it's gone. No, I don't want a shadow. All right, so I have made my font or my letter right there a word. Now let's just say you want to add something else. So it's to say, you know, I want some more writing. You know, I want some another text module below this. Now there's two ways you can do it. You can either click right here and just added, you know, enter and just add in some more text, you know? And it's gonna show up right there. And then, of course, you have to center align it, etcetera. Or we could just make another one. So let's just make another one. So right here, click on this. Plus, I want another text module, and right here I'm like, uh, here. I'm like, Welcome to the Debbie being all right and same thing, guys. So right here, I'm just gonna leave this as paragraph, which means it is just a basic text. So right here, I'm a goes to design click on text. And right here I want to change the color. So the light and the dark is sort of like a quick feature. So if you're, like, in a hurry to want to do it really quick, you can just change it to light or dark. But you can always change the color right here later. So right here, I'm gonna do a text fonts, open tans. I hear Amadou semi bold. Actually, I kind of wanted a little bit. Yeah, that's okay. I guess we'll just do bolt and then for the text, I'm gonna leave it as regular. We can change the text size, so maybe you want to keep its a little bit bigger, like that's. And for this text color, I want it pure black again and for the letter spacing. We can kind of space it out now. Also for the line height, we talked about line height. So lying high, basically is creating space between or above. So right here you can see it's kind of pushing space, reducing it So there's a lot of other ways you guys can use line hind, and we'll talk more about line hyphen, different ways. You can use it late in this tutorial. Now, let's just say you want to center. Align this text well, we just click on Centerline and you know that's basically it. So we basically made our section right here, so we have elegance. Welcome to the TV theme, etcetera. Now let's just say you want to go ahead and add a button, so maybe you want to add a button to this right here, just like we have on that other one and a buttons. Good guys, because it can link to other parts of your website So, for example, you can link it to your contact page if you want someone to fill out contact form or you can bring them anywhere you want. So it's basically directing your audience, and that's probably the best thing to do. It's all about like they're like, squeeze pages, you know, where they kind of control or people go. So you kind of want that on your website. So right here, go to Ah, I can't see it right there to also right here. I'm a click on this. Plus, we can always move these modules later. So not to worry and click on a button. All right, and then right here, I'm do get started, all right, and link. So where do you want this button to go? So if you want this button to go to a different part of your websites, you would get the link your l and link its or, you know you want to get to another website. You just put it in like that. But in our case, let's say, for example, we want to take this to our contact us page. You would take our domain right here and simply just go ahead, pace it right there and then it's dash contact. So if they click on this button, it'll take them to our contact page. Okay, so that's basically what the link is. And then for the design. Let's go ahead and design it. So I want this center aligned and for the butts in over the text effect is fine because we can decorate that are a little bit later for the button. I want to use custom sauce for this, but you guys were basically going to create one button and design. It's and then we're going to save it. And we can now use that button on different parts of our website without having to remake it all the time. Because basically what you make it, once you can save it in the library and then use it on different parts of your website. So here I must say, yes, I want to get this started. So here we have our button, but in text size, I want to say one there on 15 but in text color. So for this, but in text color, I can't want to change it to something like a Grady int feature. You know, I kind of want that, Grady it look, But just right now for the actual text color, I want that to be white now. It disappeared, but don't worry about it. Because remember, we just made the text white. So it's it's on a white background, Can't see it. So right here under the background color. I want to go ahead and select this feature right here. So we have background color now. This right here is the great ian feature. So if you want a grating feature, we can have it or one color, or we can even have an image. But that wouldn't make sense. Right? So, uh, just for gentle purposes also like the background color and didn't select maybe that color or blue. But if you want a grating feature, you can click on this right here. Click on check. Now I want to select the kind of purple color that I used. So right here under select color, I'm click on this and I'm gonna go and just type in the color code that it is. Instead of trying to find it manually. You can always like, you know, click on it and kind of drag it around to kind of see how it looks. But the Clark code I use in particular was 98 month six e eight. And then right here I used this other color 340 by 96 So I basically used this color right here. Now also begin change like the linear or radio. So basically, radio means it starts from the center, and then linear means it kind of starts from the outside and you can kind of control the degrees. So, for example, here, going like 100 degrees, it's kind of really hard to see on a button. I'll show you more about this on another section, but I actually use, like, 100 3 degree angle for my button. And then I had, like, a zero, you know, start position and, you know, just to give you guys an example, you can kind of you can kind of see how it's kind of starting at a different point, but we'll talk more about this in just a little bit. I don't really want a border with. So, for example, a border with would give it like a border and you know you guys can see it now, so if I hover over, you guys gonna see the border. But I don't really want a border right here. And, of course, you guys contained the border color as well. But for now, I'm just gonna go and just leave that we can have a border radius. So the higher the radius goes, the more circular it gets. Now you guys can see the button is circular, but I kind of want it squared like that. We can choose the letter spacing just like we have the other. You know, we have the spacing with the text. We could do the same thing with our butts in, but times believe it asking like to a default button. You guys can also change the font of this. So might want open sand, since we've been using that for a while. And then here you tell me, like lights or ah, I mean, that's too small. So regular, maybe. And then also we can like italicize it's or whatever we wanted to you. We can also add a but into it. So, for example, right here, click on a button. All right, Now the button doesn't show yet because we need to actually activate it. So right here it says a show icon on Lee on hover. So if I hover over it, it'll show it. But if I take this off, it's always going to show it. So I kind of want that instead. Now we can also change the icon to the left of the right side. So I kind of wanted, like tell them Hey, click right here, you know, And then right here we can actually change the icon color. But I prefer to be white. So I'm just going to leave it like that because I think it looks good now. Also, if someone hovers over the butts and you can actually change the But it how many times you been to a website where you kind of hover over it and it kind of like comes out at you or the color changes? So, for example, right here, like the hover background color. So these options are only for hover, so it's the same exact thing. But if I hover over, it's nice to see how it kind of turns green so you can kind of change the hover features as well. So you can change the text color on Lee when someone hovers over its to kind of emphasize like a click me or, you know, whatever you want your audience to do. So I'm not going to go through the hover off options too much, guys because, um, you know, they're basically the same thing all over again. You know, it's just for hovering over the button. So the background color, it's your here. I kinda we'll just leave it at this right here. So it'll kind of, you know, it'll fade in and out. We need to control the transparency there. So now someone fades over our hovers over, it turns out color. So I'm just giving you guys an idea of the hover over options. It's just so customizable what you guys can do with this theme. So I click on this right here. Now, let's just say I want to take this button and dragons. I want to take this and drag it below this little white insect there. These lines right here. So now I have that section that looks just like this, very similar to our website right here. You know, so because he gets started and then I hear virtually the same thing. Except our button right here is just a little bit more thinner, then the other button as well. So we've basically made our front page right here. Now I'm gonna introduce you guys to backgrounds, so let's say you want to add a background to this. So right here. This blue section right here controls this entire area, and you can control the padding right here. And you can also change like the margin, but right here and click on this and go to background. Now, first, let's just do a regular pitch color. So let's just do a one color. All right, so we have this irregular blank color, okay? And right here. Well, well, well. Let's keep it alive. So here is the grating feature again, as we talked about. So here we can do a great and future, just like we did for the bus. And guys, we can do the same exact thing for our background. You can have it radio. Let me give you guys a little better idea of some of these great and features, because now it's little bit more easier to see, So I go ahead and this like that. So here we go ahead and drag this down, smoking on this really quick, and I'm gonna go ahead and make this a bit longer. Same thing right here. We're gonna go ahead and make this a little bit longer like that. So you guys can see a little bit more easier now, right here. We go back over here and go to my background. And now we can kind of mess around these options a bit more to give you a better idea of what these are. So radio direction. You can change like you know how you want it to look. Linear. Leaner is actually a little bit better, guys, cause you can kind of get a better idea of of ingredient. And you can also create some really creative split screen effects. So right here we have the start position, and then we have, like, the the thean position as well. So you can totally create some really cool grading arms, Aria split screen effects with this. So I mean, you guys can get really customizable with this stuff, and it's our position. You kind of you know, put it like that. So I'm just giving you guys an idea of how you guys can use Thies to basically be really creative. And I've seen some really cool websites. Were they really take advantage over this stuff? But let's just say we want to go ahead and add in a background image. So I've shown you guys about Grady int undulate this and right here we have images, so I'm going to click right here. Now there is some images in description that this video if you guys choose to use them, you're more than welcome to If you guys want to use your own images or you want to seem to really cool ones, go to unspool ash dot com Owen splash dot com You guys have some amazing pictures. I mean, look at these pictures. You guys can, you know, find some really cool big pictures. See right here will do like night sky. Alright, Scott, that's a really famous one. And then I hear you have some beautiful pictures. Just really good, really amazing. So you can go out and grab them and these air free guys so you can use these on any websites or totally copyrighted the image that I used, the one with the in crowd here. This actually is owned by a website, so I'm not allowed to redistribute it. However, if you want to purchase that same exact one, I'll leave the link in the description. But I think most of you might want to use your own or you might want to use a demo. So right here my click on select files and I'm actually gonna go ahead and select the images that I have made for this tutorial. Some just liked all of them right here, and I go to open. Okay, so I'm gonna go ahead and wait for these to upload. So my images have finished uploading, and I'm going to just select an image right here. So I'm gonna select this one right here. This is 1950 by 1300 click on upload an image. And there you go. So now we have this background image on our website, and we could also have the Parallax effect. So right now it took it off. But if you want to add the parallax effect, that means when someone scrolls up and down the screen kind of follows. So that's a pretty cool, uh, thing you can add to your websites if you wants to add the parallax effect. Now turn this off. Now, I'm gonna go to delete this really quick and added another one, and I'm gonna show you, actually, how to add an overlay that your background So right here. I must select this one right here. You don't have to follow me if you guys do not want to, but I'm just showing you additional feature. So I have this background right here, and I click on this and click on this check. And now you guys can see that we have this overlay. Uh, this grating over late past are above our image. Now, if he wants to reduce the transparency, weaken do that. So you see how now I'm kind of reducing the transparency to kind of give it that look right there. So you guys can have a lot of ah fun with this as well. If you guys wants to change like the year, you know, get really customizable guys, it's just incredible what you guys can do with this theme that I mean your imagination is the limit, you know. So Ah, you guys can have fun with you Know this and mess around with it and see what color Grady and features work for you on your website. Okay. And again, you know, if you want to control the transparency, that's where you would do it. Okay, so that's basically in a nutshell. Guys of this front page right here. So right here with a gun safe. And again, Remember, we linked this part to our contact page. Okay? Now, really quickly. I want to click on this section right here and click on button. So basically, I am saving this, but in for later. So instead of redoing another button, we should just use the same butts and again, right? Could you might want to use the button somewhere else on our website rates. So right here and click on save toe library. And now we can load that, but in to another part of our library. So let's go ahead now and continue. Let's go ahead now and make the next section. We're gonna make a split screen section right here. 5. DIVI PART 5 HOMEPAGE CREATION : SPLIT SCREEN: I'm a click on this. Plus click on regular and you can see there's different rows. So basically, you can add a module to each specific roso right here. You can have, like, a call to action. A contact form, etcetera. So we look on this right here. Now, this section right here, I want to add a text module, and then I can put something like, you know, over here, you can see I've kind of put this right here. What we do, you will love it. Now I'm going to give you an example of how to add different fonts to the same text box. So what we do, you will love It's and then right here. I just added some basic text, you know, something similar, like that's And I could just go ahead and just I can just do it right there. Okay, so for this one right here, I want to do heading one for this one, right? Two or this one here I want to do heading to and in this one right here, I'll go ahead and leave it. OK, so heading one heading to and then regular text. So let's go on over to our design heading text. So we have a heading one, and we can go ahead and mess around with this. So you guys can see now how this is Onley changing this one right here Because heading one controls heading one text, Okay. And this was a new feature that they've introduced that really helped clarifying, like, situations on because it was before you had to, like, make each text row and then you have to, like, make a lot of text modules. But now you can just kind of add everything within the same one to make it much easier. So on this top one right here, I'm gonna do heavy. And here I want to add something like, I'll just leave as open tender over about a dozen really matter and then the alignments. Of course we can with the alignment to every wants, but I'm going to go ahead and just leave it to the left font size. Don't make it just a tad bigger. Let's do 55. And, um, you know, for now that's good. So it's going now it's like the next one. So h two, which is this one right here? right here. We can select, like open Sands or ah, changes to something like Roboto and said we could make it really thin. You know, we can make it really thin. It also make it a little bit bigger like that. Okay. And then for lines for letter spacing, you can kind of, like, you know, be creative. Yeah, that's kind of adding style to your website. So you guys are getting the idea of why you'd want to use some of these features, but also the line height. You might want to increase it to add some margin. And then, of course, you can add like that if you want, like a shadow. These options guys are the same for everything. So, um, you know, I'm not gonna cover all these all over again because you guys kind of get the idea of it. But there are some other options that we might want to talk about. Such as, like spacing, which we'll talk about in just a little bit. Spacing guys is probably one of the most important parts of Texas and positioning because it basically tells you where you want to position stuff. But for now, I'm going to go ahead and click on this. Now, the last part is just text. So if you want to change the text right here, we would click on this text section right here. Okay. So, text, then right here. We can come and change this to something. What we want able or open sands. And then right here we can change the color. So here we can make a little bit smaller. Bigger however you want to do it. Text color, black. So basically, guys, In short, what we've done is categorize the text. So I kind of want to control each and every one so want each one to have a different font and color, etcetera. OK. And another thing that we can do right here is click on this. Now, let's just say you want to add in a link, but you don't want to use the button. So right here, I'm gonna click on like, click me. I'm going to highlight this, going to scroll up and click on this insert link right here. Where do you want your visitors to go when they click on that? So here puts darrell wilson dot com. Are you have you? Have you have the https really pick you off the 80 p s, then? Okay, then click on check. So now if someone clicks on this, click me right here. They will be redirected to whatever you all. You put the right there, and you might want to kind of underlining or something, you know, I don't know. You can underline its or, you know, Attallah size it to let people know that it's a link. I think right here I underlined it. So that's that's if you want it, like, you know, you can add the that right there. So underlying you can add that Or of course, you go through the options and decorate its whatever you choose. Okay, so I hear you click on check now. Right here. Under this one right here. We can have different stuff. Guys like, you know, like a but in you can add like a call to action. You can like a like Hey, And then what's up then? Right here. You know, you can add in like other texts. Just give you an example of what that is. We will do a call to action a little bit later. In fact, call to action is basically what we have right here or on the second page. Just give you guys a quick example. This right here is a call to action. So when you're telling people to click on something that right there is a call to action here, they're pretty pretty, pretty well known, you know, but right here and click on Plus, and we're gonna go ahead and add an eight image. And this expert guys is pretty simple. But I'm going to show you a trick on how to add a split screen and later into the tutorial , we'll get a little bit more advanced a little bit towards the end of this horror when you guys were, you know, getting more comfortable with this. Sorry. Here. I want to select an image, select this one right here, and go to upload an image. All right, so now you have your image pretty cool, right? So we have this text right here, but we maybe want this text aligned, you know, somewhere in the middle, right? It's kind of a little bit too far or too to top. Want to kind of like in the middle with this picture. So under design right here we have sizing and we also have spacing. So margin basically controls where it starts from patting makes space. So, for example, if I add padding right here is gonna create space on the top. So let me give you an example. 50 pixels. You can see how it's creating space, and if I ADM. Or it's gonna create more space on the top and of course, you can add in tons of space where it just doesn't look good. So that's just an idea of what patting us. Maybe you want to add, like, 75 pixels so you guys can see that it's aligned with this right here to make it look really cool. Okay, Now, let's just say you want to kind of make this a split screen. So we want this image to cover everything, and we want this to cover everything. So this blue section right here click on check and go to design and go to spacing, and I want to change all this to zero. So basically, patting means I don't want any space anywhere. Scoops up a nine. Whoops. He's so 0000 Now for this other section right here, we can actually, either, you know, destroy the padding like, just like we did, or we can drag it. You could do the same thing, guys is This produces the same results. You know, you can take out the padding on either side to kind of, you know, take out the padding or, you know, whatever you can type it in, or you could just manually do it just like I did it before. So this right here is like creating padding, and then this right here destroys it. So that's just an idea of second wave how to, you know, minutely patting. So right here in a row, settings I want to go to design. And I want to make this a full with so under the spacing right here. I'm sorry. Under the sizing, I wanna go to make a full with and the custom gutter right here will actually squeeze everything to get really close. So you guys can see that we have that and I want to equalize these columns. Okay, so here, click on check. Now, we have this really cool split screen effect, but our text right here is kind of acting weird. Want to move this? So let's add some margin to it. So module settings, design, spacing and margin. So it's really simple, guys. So how much margin you on the top? Well, I want 30 and on the right, you can add 30 on the left. I want maybe 80 and then maybe some or on the top. You guess what I'm doing right here? I'm kind of controlling where I want it to be. So that's basically how you would use margin with text in a block like that late in. This tutorial will talk about another way. How you can do this. That is a little bit more difficult, but at the same time, it may be more responsive, so we'll talk about that a little bit later. But that is basically how we accomplished the split screen effect to our website. So this next time 6. DIVI PART 6 DOUBLE SPLIT SCREEN: I'm going to show you all how I accomplished this section right here. Now, this pattern you see right here, we'll do this a little bit later. In the end of the editorial, when we get a little bit more advanced, it just requires some small CSS. But for this section right here, I'm going to show you how I accomplished this section right here, along with these patterns right here, these icons with this ah background effect, I added, Right here. Okay, so right here, we'll click on over here and let's go and add a new section, guys. So here we click on add in your section regular. Now I'm click on this right here, and I'm go to text, and I hear it go to our features. All right. Our features and design. Well, what? We can change us to a heading Texas like we can. We can leave it or, you know, doesn't really matter at that point. So heading texts and right here I want to change this to just something like Open Sands. I'll make this ultra bold, and then I want to center align it right there. Now for the text size I want to make it maybe, like 50 or 50 and then we'll go ahead, leave everything else right here. I don't want to add any anything else to its. So just going to leave that right there now, also really quickly. I want to show you guys a really cool feature. So this blue box right here see how this white it's white right here is it's too much, you know, it's too much white, and we're not really telling our visitors like how we're directing them. So let's go ahead and click on this blue section right here and let's create a box shadows to sort of categorize the sections to help people navigate the web site better. So right here, under design, go to box shadow and right here on this box. And you see now how we have that little box shadow to kind of tell people that we're starting a new section. So that's a good idea on how you can kind of use the box shadow as well. So I'm gonna go ahead and just leave that box shadow right there. I wanna had too much and click on check. All right, so we basically created a box shadow around. That's too kind of, you know, tell people were starting from, you know? So all right, So I basically made that section now right here with a gun, plus and go to text. And right here I'm gonna type in features, and I'm gonna click on design text. I'm going to change this to changes to it. Doesn't matter. We leave it like that right here with you. Play fair play fair display. Okay, so then right here, believe it as well. Do bold. And then I want this text really big. Maybe, like 200 pixels. Okay. And then 20 pixels. And then right here, I'm a click on orientation right there. And right here, I want to make some space guy so I don't want to push this page down a little bit before I continue. So right here, I'm gonna go ahead and just drag this push this down more. I'm gonna make a little bit more space toe, you know, just give me some working room, you know? So right here I have this features. So we have designed and everything. Now what I want to do actually is I want to take this, and I kind of want to put it behind. And I also want to produce the transparency. So right here, take this and drag it above it. You guys can see it's overlapping now, and the reason why it's overlapping is because this Texas too big. So I actually want to make it transparent to kind of have that really cool needs designed look that I had before. So going to my text, I'm going to go to the text color, and I'm going to reduce the transparency of this. See how now it's really kind of fading away like that right there. So now it actually looks better, right? It looks like it's ah, you know, it's creative at the same time, so and then maybe we can, you know, change the text size. But you guys can see right here We did the same exact thing right here. So I did features and then right here we did the same exact thing. Except I just capitalized the f right here. So here. So then we can you know, that's basically how we accomplish this section right here, OK, and you know you can reduce the transparency mawr to have it like that. But I think that looks great. You know, I think that's really creative, and it's it's I think that's really appealing for your visitors. Now let's go in and out of a background image to the section. So right here under this section, remember, the blue section controls the background. So I just want to show you why I'm using the blue section. Sorry here. Background image select and I want to select. Well, it's like this one right here right now. I know that looks really ugly, but not to worry. So right here, under a background image position I want to do center left and I want to do, like, maybe fit. So now you guys can see that it's fitting center life is fitting and it's gonna actually follow. So basically, it's going to basically say, Look, no matter how big this gets, it's going to stay in the center left. That's basically what those options kind of mean. Now let's go and make some blurbs. This make something different besides text, you know, Texas, Texas Bori and I want to make something fun. So here we click on this out of new row. Click on three. No, we can do something like a blurb or we can use like a call to action. You got, like, a circle counter. There's tons of stuff like, for example, like number and then, like, 1000 or something, you know? So I'm just giving you an idea. Of what modules are there Just basically different tools to design your website. But I want to add in something cooler. I want to add in a blurb right here. Blurbs and gloves are great for, like, our services paid. You know where it's like, you talk about whatever you just kind of, like talk about stuff, and then you just put, like, a little, you know, tax that talks about nothing, you know, to impress visitors about your website. But I'm gonna have some dummy text right here. Actually, describe this right here. If you guys need dummy text, discarded dummy text, and then right here. I mean, I use this site all the time. We just just grab dummy tech. It doesn't mean anything. It's like I mean it. Maybe it's something in, like another language or something, but we just we just use it. You know, we just use it just to fill up space to kind of give us an idea of, you know what it would look like. So also, you can link it somewhere. So if you want, when they click on the icon or this text you can link, it's to a specific girl. You can add an image in the background or an icon. I want to use an icon. So I want to use, like, a phone or something. Yeah, I'm talking mobile, Responsive. We have a phone there, you know, to kind of talk about You know what we're talking about. So and then background right here. You can add a background. See, guys, these are all the same options again. So remember, um, I'm just kind of giving you guys an idea of that. So that's basically what that is. Now I want to add ingredient right here on that ingredient, and I want to use those same exact colors that I had before some click on this. You know, it's kind of annoying. I wish I wish I could, like, leave it like, you know the way it was, you know, or have like a stock option toe. Always select a great. And I was using so that color right there. No e there goes that school. And right here McGlynn's like the other one of before zero. Okay, 96 Okay. And then the grating type. It's a linear. And then right, you contain the green direction to something. Whatever you want to start position, you can even make, like, a split screen on this whole thing. You know, you can even add, like, a starting position like this right here. You know, I'm telling you guys, you guys could get really customizable with this stuff. So that's basically the option that I wanted. Now I'm going to go to the design right here, and I want to actually decorate the text and everything, because this is just so ugly. You know, we have to change that immediately. So the icon color I want as whites, um, we can also change, like the icon placement. We can have it to the left. We can use a circle icon. Um, alas tutorial. I believe I used this feature on the left, but for this tutorial, or you leave it on the top for the text. I want to center align, and I kind of want it light. Now you can change it like whatever you'd want. Like you can You can, you know, change the colorful onto whatever. But like I said, remember how we talked about, like, quickly doing it? That's exactly why we have it so quickly. And then you can add a tech shadow to this if you want, but I don't think it really matters too much. All right, take shadow color. No. So Tom attacks. We don't need a this stuff because we you know, we don't need that much border. Now. What a border is is if you wanna have rounded corners. So right here, I'm gonna put like, 10 pixels. Now you see how the box now has rounded corners and I think you can kind of like, keep going. But I kind of just like it, like that's you can add something like, you know, 50 pixels. But I think it's going to just like, you know, I that's that's too much. So I just wanted as 10 end's going down keer Now also contains the border with and also the border color. But I don't want a border with because that would just not look good. I mean, there's ways you can, you know, manipulate it to look good, but I'm not going to use that. I don't want to use the box shadows. The filters air just like different ways. You can like photo shop stuff, but these were actually much better on images, and we'll talk more about filters and stuff like that. I love it later and again. You guys got animation to this stuff. So if you wanted to, like, animate. So, for example, if someone scrolls down, then it can, like flip or fold or roll. And there's a lot of cool ways you guys can, you know, manipulate this when someone's on your website, and then these right here are just controls for it. So, for example, the duration. See how it kind of takes longer. You can even have a delay, so if someone scrolls down, it's gonna take four seconds and it's going to delay. You can also do the intensity, the starting capacity, which means it's going to be faded when it enters in, and then it kind of gets more darker as it goes So you guys can kind of have fun with these options. You guys can just mess around these options to basically understand what they do. But I don't want that. And I'm gonna go over here to sizing. So sizing, I think is good. We can always change the content with We can change all the stuff I choose not to spacing. I want to mess with this stuff. So I want to make this stuff a little bit bigger. You know, it's it's too close to everything, so I want to add some padding within it. So let me just show you what I'm going to be doing. So 45 pixels you can see now we're quitting space right there. Here. I want to add 30 pixels and then 45 pixels and 30 pixels. So we've kind of made it a little bit more unique. You know, we've made it's really nice and looks good, so I'll go ahead and click on this right now. Now we can also duplicate this instead of doing all that hard work all over again, so duplicate its drag it duplicated and then also drag its simple right and then of course , you guys can go ahead and change the options. Like for example, you might not want a Grady and background here. I think for my demo, I actually changes to whites so I can go ahead and just go to like my design and then go to , like, image. I would have to change this to something like a purple. So change the contents to purple and also the text to purple. Sorry. Here we can dio not the textile color but the title text. You guys get it so I can basically change it to all white again, But, uh, you know, that's a little redundant. You guys kind of understand the point of all that. So that's basically how we can create this section right here again. I just made it a little bit smaller. You guys can always reduce the size of this. But, you know, these are just basically settings where you would just kind of like after just kind of mess around with and stuff like that. And right here, the great is a little bit different just because I positioned it a little bit differently. But you guys understand the main point, so you guys can just duplicate this whole row again to get six, and then you would be good from there. Okay. So really quickly. My background image right here. I kind of want to change this option right here for background image. So for our background right here, I kind of wanted to either, you know, cover or actually it's will do actual size that looks a little bit more professional. So if you guys use cover, it's going to kind of like, you know, it's gonna It's gonna be a little bit bigger if it's going to be bigger. So I prefer using the actual size that we made for this tutorial and center left again, if you make this bigger, is going to, like, adjust to wherever that is. Okay. So that's basically guys how we created this section and again to just, you know, create the entire section I've just duplicated. And you can add in whatever features or blurbs you want to this section. Okay, so we're gonna go and delete this and click on safe, and we're going to go ahead and do the next section. So it's pretty simple, right? Pretty easy. You know, you guys are with me 7. DIVI PART 7 FEATURES AND DIVI LIBAARY: So let's go out now and make our next section. So this next act is gonna be a little bit more advanced. I guess you can say, but we're going to go ahead and make this section right here. So basically, this is a two column row, so text a divider, module text, text button and an image. And then I just reduced all the padding and then right here I did the same exact thing. Except I just inverted it. So we can basically just make one right here and then just duplicate the row and just switch the positions around. So let me just show you how we did. That's pretty simple. So right here, I'm click on Plus regular two column now, before we added an image right here. But I'm gonna show you an alternative way to do that. But I hear he's gonna go entering text and see what I put over here. I put in who we are, and then here I made it's like the changes heading, Then heading texts. We'll just changes to something like open Sands. And then we'll do like ultra bold and then right here, I'll just, you know, I'll just click on, OK, now I also want to add in a divider. So right here, click on, add a module and we look for the divider module. So with the divider module does is that it actually creates that line. But it actually makes space as well. So right here want to show the divider You cannot like a background to is or whatever, but I don't want to do that. So color just like this as this purple. And then we have styles. So here we can have like that, you know, dotted or dashed. Or however he wants to kind of mess around with That's but we could have it vertically centered bottom or the top sizing right here We can control the weights, which is how long you want it. And then the height of its and then also the with of it as well. Sorry. Here. Me. Go ahead and select it like that's and then right here you can choose it to, like, have it to the left or whatever. Don't put it right there. So just like we have it right here going to put its right below its OK, so I also want to see here. Yeah, that's OK. Height guys is basically how much space it's dividing. So the more you have gome or the less unless you're gonna have spacing. Now, I kind of want to mess around this a little bit, So I kind of want to create that messy little kind of look I have going on. I don't want to make it look like that. I want to kind of, you know, so right here, I kind of want to add something, like maybe 15 pixels and then also here on the U minus 20 pixels as well. Now, the reason why it's not moving is because under the sizing, we have this module alignments. Now, this rule overseas, it's. But by taking this off now, you can see that we kind of have that Messi look now on our website. All right, so let's go now and add in a new module. So I'm at in a text module and I'm over here and kind of just grab this text and go ahead and paste it in there. Now, how much do you guys? Another feature? Really quickly. So right here. If I hide all this and click on this quotations tab. We now have this little, like quotation bar. So if you couldn't go to your design under the text and you click on this little section now you can go ahead and kind of design, like the actual, like, quotation itself. So the text size the block alignments Utkan, you know, kind of like mess around with little bit. So that's just an additional feature that you can, you know, use you can change, like the specific block quote, text color. You can also change, like the block quote, text size and all this stuff. So this is basically the same thing, guys, except it's just adding that little bar in there and giving you a little bit more customization. But that's just, you know, just for you. So I'm not going to add that in. So I'm gonna go ahead and take that out and really quickly, right here. Want to move this dragon up, all right? And maybe this section right here, I want to go ahead and change this to something like bold gonna make it a little bit more darker. Okay. And then I'm gonna go ahead and add in some more text. So again, right here we can add in like either more text below its or we can add in another text module. It's really up to you at that point. But we're going click this and just I'm gonna insert more text below that. Okay. And this the Texas kind of kind of kind of. What? I don't like that, you know, we should make it a bit more regular, maybe even thin and maybe a little bit more darker. Are you open, Sands? And maybe we can change it to something like dark like pure black, a little bit more professional looking. And now let's talk about the butts in. So I want to add a button. But I don't want to make another one from scratch. You know, let's go ahead and use the same, But in that we've been using right, so right here under. Plus, we have added from library. And now we have that button that we say from earlier. So by clicking on, that's now we have the button right there and here we can go ahead and align the butts into wherever we want. So, for example, design alignments we can go ahead and push it to left right there. So that's that's gonna say this guy's a lot of time, you know, instead of having to manually remake it all over again. We just basically made a really cool section right here. Now, instead of adding an image right here, I want to show you guys another way. You can kind of manipulate this theme. So right here, under the settings, we have background. Now, you can also add pictures and everything else to each column. So here we have calling one background and then right here we have call him to background. So right here and click on image. Click on this. Now, I'm gonna go ahead and select this one right here, so quick, upload an image. You guys can see that we have that image there. Now I want to go ahead and manipulate this cause I want to actually make this kind of like a split screen effect, but not through the entire screen. So this is where some skills comes in. Also, another really cool thing about this right here is you guys can actually add stuff over its You can add like a text module over. It's. So instead of using photo shop and doing all the typical stuff, you guys can actually use the theme to kind of manipulated to basically say I want to add text over this instead of having to like Goto Photoshopped adding text over something because that's a nightmare. Photo shop and image sizing is probably some of the most annoying things about Web design. So really quickly, let's go ahead and fix this section. Now. I don't want any space up here, so I'm gonna go and drag this and drag that over here. I'm gonna go ahead and go to the design spacing now, right? Human adds your pictures and everything. So zero 00 Now, this is where things get a little confusing. But I kind of want to open you up to this because I want you guys to understand what I'm doing. So right here under the column one padding. I'm actually adding 100 pixels and something right here so you guys can see now it's kind of basically controlling the image, and also you can use percent. So, like, for example, you want to push something else. You guys can use, like a percentage some like That's if you guys choose to. So here I'm using 9% just to give you guys a brief idea of what I'm doing. So I basically did that whole section right there. But guys, I'm lazy. I don't wanna have to do everything all over again, you know? I want something quick, quick and easy, right? So let's just go ahead and duplicate this road and we'll switch everything on the opposite side. So I'm gonna go ahead and make sure all those things are correct. So for the design, for the spacing from the sizing one make sure it's custom gutter with one equalized column row, etcetera. OK, make sure that you have the gutter with to set one. Now, here. Don't click on duplicate guys. This stuff is pretty advanced. So if you're not understanding this 100% don't worry about it, because this is pretty advanced. But I just kind of want to open you guys up. So if you guys want to make something that looks like this on another website, you guys will know how to accomplish it. So right here, I'm going to say you know what's for the background. I want to add the background image, or I'm not gonna take this one out. We're gonna take this one out, and, uh, we're gonna add this under the 1st 1 instead. So, background image here, I'm gonna switch them. So all I'm doing right now, guys is switching everything. So I hear at this right here. All right, here. I'm gonna take this and simply just started driving everything over. Dragon, everything over all rights and push this one over. That's you. Get it below it. There we go. You got it? And then the last section right here, we're gonna add that again to the bottom right here. Okay, So I do need to change some settings because we have everything basically towards the like , the other side. So instead of having column one patting, we need to change column to patting. So right here, gone row, setting design spacing. And instead of road one, we're gonna use road to so 100 pixels right here, officials right here. And then we're gonna add 9% to there, and then we're gonna go and delete that top part right there. So we've just basically produced the same exact results to this other section. Now, another really cool stylist thing is let's say you want to add, like, a circle in the middle or something like that. You want to add something really cool and really, really unique to your website. So here we click on safe, all right. And over here under this setting, go to background and I'm at a background right here are back on image. And I'm out of this one right here. And I want to actually put this right here in the I want to put this in the center and I want to do the actual size. So now we can actually have that really cool effect right there. So that's another way you guys can use actual size and, you know, centering and stuff like that. Because now, guys, that looks beautiful. You know, that's a really beautiful section that we created. So now you know how to accomplish that. I know that was kind of confusing, but I'm just trying to open your no open you guys up to different revenues instead of, you know, just adding, like a blur. Blur, blur, image, image, image you know, So that part was probably the hardest part of the editorial. So you guys managed to do that part? Congratulations. Because that was probably one of the most confusing parts. But it is also, you know, it produces amazing results. So let's go ahead now and do the next sections. I'm gonna go and say this one time, and we're just gonna add some quick testimonials to our front page. Now, I don't wanna have to make every header section all over again. So what we're gonna do right here is we're gonna take this section right here. 8. DIVI PART 8 TESTIMONIALS AND DIVI LIBRARY: and we're gonna add this to the library because what we can do is basically copy and paste this on two different parts of our website and suddenly having to, you know, redo everything all over again. So right here I'm ago. Save Roto Library header section and say that the library. Okay, I'm gonna go ahead and scroll down right here. Now. Right here. I'm click on this icon. Are this plus new regular is at a single row now. Really quickly. I'm gonna close this and I want to add that other section two this part. So right here under this teal line right here, I'm gonna click on this, add from library and click on header section. So now we have that section we have right here. It would only need this box right here, so we can just delete it right now. So we have this section right here, but I wanted to say testimonials, so I'm to do test it, moan meals, but you guys going to see there's a problem. So this box is this Texas too large for this box? So we can either make the fonts smaller or we can make the road longer. So right here under the row settings. I'm gonna click on this and go to design sizing. And I would make this a full Withrow. So now we have this text Kind of It looks much better now, right? So it's not in the it's it's not like cloud climbing over each other. And then this section right here are features. I want to make that just a little bit bigger. So right here, it's a heading one text. So that means you have to go to design heading text. Don't make this just a little bigger. Maybe 70 pixels and go to Okay. Now, also, I want to add in a background image to this. So right here. Look, like on the section setting go to background image at an image, and it's just go ahead and find a background image. I'm add this one in right here. Okay, so that's also looking pretty cool. It looks like this part right here. I forgot to save it, so All right, here. I'm gonna dio testimonials. I didn't save it. I just forgot. Teoh guys added in, You know, I was being distracted and I want to add some space to hear, you know? So right here. That's kind of make some space. You know, it's push it down a little bit, you know? So we got some space going on right here. Now, I also want to add in some, uh, testimonials, obviously. So right here, click on this and go to a three column rope. No, guys, you can add like port. Ah, portfolio. You can add in basically anything you can, you know you can want right here so you can add in, like, an image, etcetera. You know, whatever you want, but just help you offer to told purposes. I want to go ahead and use the testimonial right here. So author name. So I'm gonna put Darrell Wilson job with the WordPress helper company, name up on my website and then contents. We can put it like a little bit about you know the person or, you know, you can talk about yourself or, you know, whatever you want to put paste that right there. So we've added in that information now for the design weaken Do icon quote. We can change the icon color so we can put it like purple or something else. So you guys can see right there. It's purple. Then you can also have a background color as well. For the text again, you can also change the text, so maybe you want to have it as, like, a dark or something else. But right here, I'm gonna put it as light. And for the image you can have our or portrait with everything else. We can go ahead and no decorate the image, but we need to upload the image first. So let's go ahead and do that. So let's go ahead and go back. To leave is our content right here. And go to image animals like the just like this guy right here. All right, so cool. We got that guy right there. Now, if you want to design the image, we can go ahead and change this and we can change the portrait height. You can get totally customizable with this section right here. So I'm gonna add in like a auto like a box shadow right there. And you know this stuff right here? I kind of don't want toe, You know, I'm I don't want to spend too much time with the blur and everything, cause you guys by now, understand the point of all that. So I'm not gonna go too far into that. It's going down here. We have the image, border color. It contains that to any club we want. But, um, you know, I don't want to use the image border color right now because we have to add a border with, and I just choose not to have one right now. So I'm gonna go ahead and nor that section you guys can also like, do like, like a little bit of photo shop. So you see, right here the image with the image saturation, the image you all the stuff you guys can get really no damage brightness. So you guys can kind of go through each one and kind of even control the photo. So if you guys wants to, you know, edit the photo Uh, you can do it right here instead of using photo shop because you know who likes Photoshopped? Photo shop is pretty annoying. And they have tons of different cool. Like, you know, color, burn or exclusion are whatever you want to add. You know they have tons of them So you guys gonna have Ah, really cool, fun time going through some of these and messing with some of them now for the body text right here. We can change the font. So maybe open Sands and I wanted to do this in the center, and then we can even include the text size. We could make a little bit bigger scrolling down here again. We can change the body, text, color and everything else, but I might want to make this background purple. So if I wait a little bit so I can kind of, you know, decorate the background and also for sizing again, you guys control the with of its you can make it a tiny testimonial or a very large testimonial. You can even make it very big and for spacing again, you guys understand margin and patting. So again, I can add in some margin or we can, you know, as an patting like 50 to kind of get you guys an idea of how that works. So okay. And then also for border, you know, same thing, guys. So I don't wanna go to these options again just because we've got to them some time, and you guys probably understand This would be pretty cool, though. Maybe like a fold to our section right here and right here, You guys, can you control the options as well? Ok, so also, let's go ahead and go to our We'll go to our content, and right here we can go to elements as well. We can choose to show the icon on. I want to show the icon for background right here. I kind of want to change this to a specific purple color. So right here, click on this and maybe changes to something like purple so you guys can get a better understanding of it. So, guys, instead of actually having to re do you know this all over again, We've basically made our settings. So instead, we're just gonna go ahead and duplicate it. And so we just drag and drop, dedicated and drag and drop. Okay, Now, one quick thing I want to do is maybe you want to add in like another, like a text right here, like another text module, and then maybe put some more stuff about it, cause it looks a little clumped, you know, some, like this right here and maybe add a little bit of Ah, you know, patting, which is space between these sections right here. So if you ever go to pace now, it looks like that because the row right here is full with. So if you want to do that, we'll have to either reduce the with of the text or we can just add it in a new section. So what I'm gonna do is I'm probably just gonna add this in a new section because I don't want to have to do that all over again. So right here I click on plus one column row and now here I can add the text. So one column, it's right here. There we go one and then right here we'll have the text because there's no right or wrong way to do it. You know, basically what I'm saying so you can add it. You know, you can add it in this right here and reduce the with of the text. Or you could just make a whole new row. So right here, I'm gonna go ahead and go to design and go to sizing. Now I can reduce the with right here to kind of control where I want it. And I can put it in the center like that to give it that they give it that kind of look, you know, and then I can type whatever I want about its etcetera. Now, also, for this section, you want to add some padding, right? These are too close to our text. So maybe right here. Under the design spacing, we can have some bottom padding to it. We got maybe 100 pixels. So you see how it's now creating space, All right? And also right here. Maybe you want to add in that whole purple background that we have so right here under background, I go to my ingredient and put in Ah, color. So here, I'm going to put in these cars I've been using right here. So it's zero. Here. It's 980 it already said that for a school and then also this color right here. Okay. Now, the reason why it's not showing is because we need to set the option for Grady int over image. So going over here, we have placed greedy in above background image. If I click on. Yes. Now you can see that the great will also go above the image. But we can't see the image because we might want to reduce the transparency here. Right. So right here I kind of want to reduce the transparency a little bit. And also for this color as well produced the transparency, but kind of give it that that color You know, that hint of the color that we want to kind of accommodate the rest of our websites. Okay, so you click on X now, I don't want to show you guys how to add Ah, little bit more design. I kind of want toe kind of want to do a little bit mawr of, I guess you want to say advanced work because we can actually add designs behind these columns. So right here under the row settings, we have background. So right here we have background column, one background calm too, and background call him three. So right here under background call on one. I'm a click on this right here, and I'm going to add something here so I can go ahead and make like a linear or, you know, you are a linear. And then right here we can kind of change the direction, etcetera. And then I'm not going to do a place ingredient above background. So basically, I have this section right here. Now, how do I see it? So I want to be able to see what I'm doing right here. So under the design tab right here under spacing, I want to go ahead and add in some, uh, patting right here. Maybe 25. Just give us some room and all right, here. I want enter something like 30 pixels and then 30 pixels, 30 pixels and then 30 pixels. So, basically what I'm doing, guys, is I'm shrinking this section right here. So now if you guys want this is totally optional. But this is just another way. How you guys can get more decor and design is if you go to your background section, and now you can kind of start fiddling with these options to see how this would look. You know how how decorated you can get with your website so we can kind of like Mr like this, then right here. Maybe we can add in this like purple, but also kind of like reduce its or you can kind of like that split screen. You know, there is just so many ways you can design this, and I'm just trying to help you guys out by understanding that there's totally no option or its limitless on what you can do. Guys, it's it's ah, it's truly amazing. So right here Oh, entering something all into a code will answer like the lettering are. Go ahead and go in my code hero entering. Okay? And then maybe right here, I can just, like, reduce the transparency like that's and then maybe even change the direction of this to kind of match like that's and ball off so we can go ahead and just do this for the next ones if you guys choose to have it. But I'm just trying to make you understand that there's there's so many other ways. You guys can customize this and become better designers because this is a really clean look and get guys. It's very easy to accomplish, So that is an example of how you can accomplish that section right here, or we added these backgrounds to it. Now I'm not gonna do it for the next two because you guys already know how to do these next two. So I'm just gonna go ahead and move on to the next section. So this next section we're here is our footer. Now there is 9. DIVI PART 9 Theme Customizer, settings : I can do this, guys. You guys can make a custom footer, which is the one you saw, or you can actually make a footer that is basically standard with Debbie. So I'll go ahead and give you guys an example. So right here is gonna go ahead and ex individual builder. Right here we go to my theme customizer. Now it looks like my front pages appear to fix that. So right here I go ahead and scroll down. And right here we have widgets, So witches are basically are footer section. So foot area one, we can add a widget. And what you want to add down there Well, maybe you want to add, like, a a text. So maybe, like, about us, or you know about us, and then you can talk about your company like we are amazing company that helps people. So you guys understand what a footer is, right? So right here and basically creating a bottom section, and this is kind of where plug ins might come into play. So I'm gonna go in and closes right now, and I'm going to go back to our dashboard and right here. I'm ago, Teoh plug ins and go to add new. So if you guys don't know what plug ins are, they're basically added features for your website. So, for example, let's say you want a Facebook like box. It was just type in Facebook like box, and then they give you a list of free plug ins that you can use now, some of these have pro versions, which means you have to pay for an additional feature. But generally, most of the ones on wordpress dot org's are free, and they worked pretty well. So right here, I'm gonna go and select this one right here. Facebook like box widget like box and go to activate. Now, you can also use this on your footer, and you can also use it on your block page. So we added in the widgets. So let's go out and go back to our website, and I must go down now. Right here. I'm a go to our theme customizer. Okay, so I'm gonna go ahead and scroll down again. What happened? My own painting. I deleted it on accident. All right, so I'm going to scroll down and go to widgets and go to footer area go to add a widgets. And now if you scroll down right here, we can see our Facebook like box widget. And here you can do, like, follow us. And here you would go ahead and enter in your Facebook I d. So my Facebook really quick go to my fan page and I'm to take this Think right here. So copy this and go over here and simply paste it in there. And of course, you can control like the with the height. So, for example, you can make this little bit bigger. Then I hear you came in, you know, adjust the height or some like that's too kind of Ah, you know, give him or decoration you can, you know you can hide the vote. The faces of its you can, you know, add additional stuff to its etcetera. So that's basically an example of, ah, plug in and the features it can do for your website. Now they also have twitter feeds. They have instagram, and it's just a matter of kind of branching off and kind of understanding or to go so for the dashboard right here under your plug ins and go to add new. And you said we type it in your instagram And this is basically where kind of like where I kind of stopped because there's so many which is out there, guys, I haven't tried all of these, but your best bet is to just install the one with the most like reviews and active installed because generally that's usually what works and is probably the most successful. And whenever you install plug in, they give, like, a little option right here, and you need to put in like your user I d. And then, you know, just just go ahead and answer the questions. Like for it. Rents is right here. I can log in and get my access token, I d. So you just log in and then display your feet and you just display that short code so you would copy and paste this short code. In fact, I'll go ahead and do it just this one time. So here we go ahead and log in and get my access token. So I got my access token. Now I'm going to click on tape changes. All right, I'm going to use this token now. All right, and save changes again. I will go to customize. And then here you can kind of customize it. But I'm gonna go ahead and go to my widget section. All right, thing customizer section, and then scroll down right here and then under our widgets, you have for every three we can add a widgets and then simply go ahead and find the Where is it? It's here somewhere. The instagram feed. You know, it's an arbitrary text. I have to add a text, and then I hear about, like, follow us on instagram and then text. And then you would simply go ahead and paste that short code in the text section right here . So I hear ongoing pace that in. And then when you put the you put your page, it would go ahead and show up right there. Sorry. Here we go and close it. I'm going to scroll down and voila. There you go. So all my stuff is often Kate ID. Now, I might want to reduce the size of this Facebook box because it's kind of breaking in the way. So here I go, to my theme customizer, and I'll just do that right now live in front of you guys. Sorry. Here we go ahead and go to my, uh, which it's 32 right here. And I want adjusted with two, maybe 200 pixels. So it's not colliding with that section. Okay, so that's an idea, guys. Of how you can make a footer with the Davy theme. Now, we're gonna make a custom footer in just a little bit. But for right now, um, I don't want to make it as of right now because you guys kind of already understand the constable footer. I do want to actually fix my homepage here, so I'm actually gonna do something really quick. I'm just gonna go ahead and low this up right here and maybe just out of butts in really quick and then Voila. That's my new home page. All right, So you guys were witnesses first. I maybe I change something I didn't really see. It's you know, that happens to me all the time. Then right here, I'm gonna go ahead and take this, but in maybe drag it below there and voila. There's a home page, guys. So it's that easy to make home pages, you know, so that mistake totally my fault. But you guys just witnessed how fast you can make a landing page with the Devi theme. 10. DIVI PART 10 Additional Resources: section. What? You guys take a break. You know, you guys have been working hard for about an hour and 1/2 so I kind of want to show you guys some websites and give you guys some additional free resource is to help you guys out . Now, if you guys need a logo So something like this up here, of course, you don't use that one. You guys should definitely go to Fiverr dot com. There is a link in the description of this video and you guys concerned we just type in, like, logo service or some like that, and these guys will make you like a logo for just five bucks. So they really help you out. And if you guys are on a budget, I would recommend this service mainly for logo services. Let me see your here logo does making me a liar. Now it's like the signs down. It's not working. No, it works, guys, but like I said, these guys make some really nice logos. I got my logo from these guys and they're pretty amazing. So if you guys need a logo, I recommend fiber for its again. There's a Lincoln description because Dubai I get, like, 50 Santer or something like that. But anyways, also, let's go ahead and talk about the TV theme options. So we haven't really discussed the debate team options at all. So it was kind of run you guys through on the option. So here, I'm gonna go And ex individual builder, You guys don't have to follow me here. I'm just gonna go ahead and give you guys an example of it. Sorry. Here we go to my dashboard and go to divvy and go to theme options. So here is where you can upload your logo. Now, also, you can upload a Fabrikant. So what a fabric on is is that little thing up there? So, for example, if I click on upload and just select Ah, just like this, you're going to see that on the top of the website. Once I save it, it will appear up there also my logo to go ahead and just upload a logo. So do said his logo fixed navigation bar. We'll talk about this little bits. All these option guys, I don't really personally use too much Google. A p I key. You will need this. Actually, if you decides to have a Google Maps, but that's only if you decide to have it. These right here are for the footer. So on the bottom of the page, there's a tiny little Facebook icons. Everything else, um, these are all enabled. If you want to take those off, you can just say, you know I don't want it. Did you want them? You can leave them enabled. And then right here, you put in your your rails for your website. These right here are for, well, commerce. So that's not for this tutorial. And like I said, a lot of these guys were just redundant. And this is custom CSS. We'll do custom CSS guys toward the end of the tutorial because custom CSS is, ah, little bit more advanced. It's not needed. But if you want to add like, extra stuff to websites, it maybe, uh, you know, it may be nice to have, but you don't need to know it a navigation. I don't use any of this stuff, so I just said you don't really need to. You know, you can actually exclude things from the navigation bar, but I don't know why you would do. That's because then you can just delete it from your menu, right? But there's still other options in here that you might want to use. So be sure just to check some of these outs again. I don't really. You know, you these too much just because they're not really needed, except for something like the updates, you know, that would be needed. So if you want updates, you put your name in a P I key there, and then you can go ahead and kind of mess around also. Let's go and talk about the theme customizer. So you guys can just sit back, relax, you know, get your favorite beer. You know, I don't know why that system is there. Is there somewhere I got to go to delete it? Uh, right here is like your general settings. Like your site identity. A lot of the stuff guys isn't really needed because, um, this stuff right here can be overridden by, like, the actual davey builder really quickly. I'm going to leave that testimonials that is really bothering me. So I'm gonna go ahead and go to visit site and enable this visual builder Oh, also, I don't really talk about this other sitting. So let's say, for example, we can't find a testimonial section. It disappeared. Maybe the text is white or something like that. So right here, over this section right here, I can click right there. No, I have this road right here. So that row actually actually be where the has mono sections coming from. So right here we go ahead and click on delete, and you can actually check all the models right here so we can kind of find out where that is coming from, so here can't really find its okay and then butts in same thing. So that's basically what that option is is pretty cool. We also have, like, additional settings, you know, um, told like that. I guess I got this is a bit more advanced. You guys kind of don't need to use this stuff too much, so But if you guys, you know, would like to, you know, mess with it, then you're more than welcome to also guys, if you want to see how your site looks on removal and you guys would go ahead and check those settings, so I'm click right here and go click on this right here. Or go back to our main you and then right here. We're good at ease again. Really quick, okay. 11. DIVI PART 11 Additional Resources: right here. This is how it looks like on a desktop. I'm sorry on the tablets. And of course, we have not optimized for mobile. And we'll get to mobile optimization in just a little bit. But Mobile station guys is really simple, so I know it looks like Oh, my gosh, that looks all clumped up, but literally, I can change this in a few seconds. So right here, under our features for the design for spacing, Um, that I'm sorry that the text size this is a paragraph. So text. So right here. Whenever you make changes, guys, for your text size, you click on this little icon right here and go to tablets and then simply just change how it looks on tablet and then also do the same thing for smartphone. You just reduce the size. So it's that easy to optimize. Your website for mobile and guys is very important optimized for mobile because, um, that's like half the traffic now. I think so. It's pretty importance. And let's say, for example, this part right here You know this picture right here? It's beautiful, right? But we don't really need need it for mobile. You know, we don't really need to show people this for mobile. So right here under this gear icon, I can go ahead and scroll down and go to leave. Is the background or the admin panel here, here for the design. We have our alignment, you can scroll down, and I'm gonna go to or not scroll down to go to advance and go to visibility. No, I don't want to show up on phones or tablets because it's just not needed. You know, I don't really need to show this huge image for mobile users, right? So if I click on check and that is basically it's that image will not show up on mobile. So it's a little bit more optimized and also the same thing right here again. So, guys, mobile optimization is really simple, you know, it's just a matter of doing it, so all right, here you click on that design, you would go to the text. And then again, when you click on the font, this little phone right here, you just go ahead and say, Okay. I wanted this size for the tablets and then for the smartphone. I wanted this size because it's way too big. And also guys, you can even go to advance and just visibility and just get rid of it if you don't want it . So that's just a quick little rundown mobile. Optimization will optimize his whole site, but I'm just kind of giving you guys a small brief overview of everything. Okay, so I'm gonna go ahead and exit out of this. Well, I'm actually a visual builder. There we go. Now. Another thing I want to show you guys is my channel because there's tons of great tutorials that I have that could be covered. A lot of you lost me questions regarding stuff like different plug ins or other things. Like, for example, the was when I had was here was a Google AdSense. So if you guys want to learn how to Google AdSense I have, it's a total for that. You guys want to learn how to use a side of revolution with total from that, I have tons of the totals for everything, but this is a comprehensive Devi themes tutorial. So I'm gonna go and go back to your guys and let's go ahead and go 12. DIVI PART 12 Theme Customizer and Library: through the theme customizer just a little bit more just to give you guys an idea of what a theme customizer is. So, like, we have buttons right here. You guys can change everything globally. I personally don't like to do. That's because I rather just change it here and not have to do it again or do it over here . This will apply to the entire theme also for ahead of navigation. You guys can go ahead and choose to change like your menu up here. So we have the primary menu bar and here you can, like, you know, totally customize the menu so you could make a bigger You can change the max logo height. So maybe I want it really big then right here. Beginning changed the fonts and everything else. Now I pretty much showed you guys these options, but I want to show you one in particular, which is the background color. So you want that transparent look, you just reduce the transparency and then right here we have a transparent menu. And then up here you guys can change like the drop them in your text color. You can change the font. You can change the text size for your menus, us getting bigger. So these are basically the options to control the menu. And again, you guys can hide the logo image and even make this full with like that's to make it look a little bit more elegant. But again, guys fought and you know people truly by your website, just based off position of color and images. You know, it's it's really true. You know, people don't really care about your product. But if they come to a website that looks like this where they feel elegance, just a shop on it, you know, you're kind of just like man like, you know, people go to the apple and they go toe to buy an iPhone, and they feel classy because the website is so well designed, they feel like a high class customer. I guess you can say by saying a man, that's that's really nice. I'm gonna buy some from this site and that's really the human brain when it comes to buying stuff online. If it looks beautiful and amazing, they'll by its If it looks like crap, they're just going to leave guys you have about five seconds to convince someone to stay on your websites. Now, this is the second menu bar. So again, you guys can go ahead and change the second or menu bar as well. Again. I don't want to get too much into the second or menu bar, but I'm gonna go ahead and and keep showing you guys some of these options, like header format. Here, you can change the logo. You can make it centered. You can even add a vertical navigation. You could put it also on the right side, and we could do, like, senator line with logo. See, that looks pretty neat, you know? And then here we have, like, a slide in have a full screen. So, uh, you know, you guys get the idea. So the second menu again, guys, they would control or I'm trying to slide in full screen. You would control that right here. So the option comes up right there as well. Okay. But I think maybe we should leave. It's I don't know what looks good. And I think I think the center kind looks good. You know, that really does look good, but again, it would probably push your stuff down a little bit. So just keep that in mind and going over here. We have header elements. You can choose this, show social icons and added, like a phone and email so you can add that right there. It will appear up there a little bit later. Um, going back here, fix navigation and hide the logo image. You know, that's when you scroll down so you can hide it. You scroll down. See that? So the fix navigation said these guys is when people scroll down. I'm sure you've seen on some websites where you scroll down the menu will do something different. So that's basically what that is So head on. Navigation. Um, we have blogger or buttons. We have footer, I run. You guess through the footer. You guys can also change the layout of the footer by going to lay out. And then you guys can add different columns. You can change the color right here to something that you would like. I'm not here. Ah, you know, bottom Bar Mobile. You guys basically already know that Did He has their own mobile optimization, so we don't needs to. They're just basically showing you what you can do, you know? But, you know, I would rather optimize it by each module because you have more control over it. Menus. We already created our menu. If you want to add a menu, you would do it right here. Widgets. You guys understand Widgets? Home page settings is wholly on our home page settings. CSS. We'll do a little bit later, but ah, in a nutshell, guys. That is basically the theme customizer settings for DB. Now, I actually want to show you guys Okay, You see how we have that little or up there? That's like the secondary menu where we added the phone number and everything else. So remember I told you guys was going appear so. There it is. It kind of takes time for that one to a beer. You have to like, close it and open it again. Now, once you get to go on my website right here, and I specifically made a TV footer just for this tutorial, and it's for free, so I don't charge for anything. So right here elegance that is the divvy footer. So I'm not gonna make you guys build this from scratch right here. I'm actually just going to give it to you guys away for free. So going down here, You guys go to my website. You guys add this to the carts. All right? And then right here. I gotta fix that. So, you to cart? I got a kind of Yeah. See, I need website helped you. So the view, the cart. And then here you go to proceed to check out it's free. And then once you guys are done putting in your name and email, it will you can place the order, and then from there, you can go ahead and download it. So there is the footer right there. So you need to download that and unzip it. Now, let's go ahead and go back to the detour on my guys. We're gonna go ahead and do the home page. We're going to do the about us page. I'm gonna show you the blawg. I'm actually going to give you a free layout for the services page to kind of help you do some homework. So I'm going to actually give you the services page to kind of help you understand how I did the services page and you got some kind of messed around with it. Kind of look it like, you know, some of the settings I've done to sort of help you guys understand. But once you guys do like the home, the about in the contact, I think you guys will be on your way. But one thing I want to point out is make sure to keep watching this tutorial all the way to the end because I've been knew this for a few years and I know people jump ahead and then they have questions. They're saying, Hey, this isn't working for me or Hey, this doesn't work and it says it's intimidatory if you just gotta watch it, you know? So I make sure to please stay till the end to watch that. Now I want to go ahead and upload that footer that I downloaded. So once you download it, you guys can go to your dashboard and go to divvy and go to divvy library Guys, DB Library is amazing. You can import and export layout. So right here we go to imports. Choose the file and we go to my desktop and I go to footie right here. And I'm going to import this right here, so I'm basically just going to imports. That's layout. No, guys, whenever you save, it pays. You can actually export that lay out and throw it on to a different part of your websites. So, like we did earlier with, you know, adding to the library, you can actually export entire pages and import them to different parts of your pages. So I'll have mawr information about that when we talk about, um, templates and Debbie library. A lot of stuff because I have tons of free goodies for you guys a little bit later. So I'm going over here to my site. Now. I'm going to enable the visual builder. Okay, go ahead and scroll down right here. Now, Right here. I'm go ahead and click on this, plus Leavitt's ad from library. And then there it is. We have Footer and Paula. So now we have this footer. Now, I want you guys to understand what's going on here. So this right here is just a text module, right? We're going to show you that again. This right here is a text module, and instead I just created buttons. And then I just made text. And I basically just made those link to those specific pages, just like we did earlier, where we linked this parts right here to the website. We're gonna do that on our footer. So it's just a more creative way to do a footer. So, for example, you can have this standard one which is less customizable, or you can have this one right here. Now, this section right here is an email opt in setting. So basically, you can actually connect your email subscriptions to this plug in. I'm sorry, this module. And then from there you can actually get people's emails and you know, all that good stuff. So right here you would just type in, like you know, But in tax, we have subscribed. You can add in your media and then your email account right here. You would select your provider, so I'm you know, I'm male. Chimp. You know, I use male chimp. And then from there you would select the list once you connected. Okay, so they have tons of of ah, service providers. And then right there you go to add. And then you would have to add in your A p I key to your to your to your provider. Okay, Now, I really can't go in depth into that because I don't know your provider, So it would be hard for me to do. I mean, I have a male chip tutorial, but there's so many providers out there, it's very difficult for me to kind of go on. For example, Fields, you guys can you choose to have feels like a first name, last name. But I think just the emails fine. And then success action. So once they subscribe what you want to say? Well, I want to say success. So you guys can kind of understand it then right here, Result message, but in And you can change like the Fonz, the color, everything about when it says success. So there's just tons of ways you guys can customize all these settings. Okay, so I'm giving you this footer for free just because I want to help you guys out. And you know, I don't wanna have to do text module because you guys totally get it by now with Tex and heading tax and everything else. So it's all about being creative guys. So again, you know, we made this for, you know, just for my viewers. And I think that this will really help you guys out in the long run because it's a really clean footer. It looks really nice. So that is basically a quick rundown of how to import products and also how to add a customizable footer. Now again, we can go to the footer section and our theme customizer and disabled this. Let's I'll just leave it up just for, you know, to tell purposes. Okay, So let's go ahead now and do our about us page. So stay with me, guys, because we're going to the about us page and I'm going to talk about the blawg and the contact, which we're gonna be really fast. And then I'm going to actually give you guys a copy of the services page 13. DIVI PART 13 About Us Page: Okay, so let's go and get started with our about us page on guys. This this sexist actually really quick because we actually have a lot of the stuff that we already need. So we don't need to really redesign a lot of stuff now, right here. I wanna click on this, and I want to click on this little icon right here. So I want to have two sections. Now, I'm gonna leave it up to you guys to decide which section you guys want. It's because I kind of want you guys to understand what we're doing here. So at a new row, add from library and I want to do header section. So many guys can see right here. Here. I'll give you guys a better look of its right here. We have this section right here. Now, I can go ahead and dragged this stuff up here. So, for example, let's go to use this section to kind of help you guys understand how to use this builder. So we're here. I'm delete this. I want to take this text and I want to drag it up there, and I want to take this text and I also want to drag it up there as well. And I don't really need this row anymore. You see, what I did there basically made a two column row, but I exported the one and I just used the content from its. Now it's going to see what it looks like right here. So right here. You guys can see we have the text now, and you guys can add it to the left side or the right side. Now I want to make this full with so design spacing are sizing. Sorry. Sorry, spaces. Same thing. Make this road full with. Now, this right here is a little bit too big, so we need to kind of reduce it. So I'm gonna go ahead and go to my text, and I'm going to actually just reduce this a little bit, so it's not kind of like, you know, it's not crashing onto everything. You do that one more time designed text, go ahead and reduce it like this. Okay, And then this section right here, I just want to put like, features. So we're gonna put features, and I'm going to make this just a little bit bigger. So this right here was are heading one heading texts and then I'm gonna go scroll down, and I'm gonna go ahead and add it in like that and again, I can also add in Ah, a little bit of margin to kind of push it up to kind of give it that effect. So I hope you guys know how to do that by now. So go to close this, go to spacing, and then we can go ahead. That's a margin to believe. It's 10 pixels. I was all right, We're gonna add it. See, it's it's no other way, guys. So sorry. So it's gonna be negative. So negative maybe like 50. Or maybe 25 maybe 40. Okay. And then all right here. I can also add in a background, and I'm just gonna go ahead and select something. That's and then I kind of want to add that grading overlay as well. So I kind of want to select those colors that have kind of been using wanna be consistent and guys, we could actually save this part so we can use this for the services, the blawg and the contacts who don't have to recreate that section anymore. So the library guys is really cool, and it's going to save you a ton of time. So anyone six e eight and then right here, you can kind of control the transparency of its right here. We're gonna go ahead and do the other one now. It's not showing because we have to set that on the option to show. So here. And I want to kind of reduced the transparency of it. So we're gonna go ahead and go to scrolling down here and then right here, place greedy in above background. So we have that beautiful look right there. So you guys can kind of ah, you know, you guys can change it to probably white. Why would probably a little bit better. So maybe we want to kind of make this a little bit more darker and then change the text that something like white. Okay, so then here seems a textile white, and, you know, we have to be, you know, very I guess you want to say accurate, because we're going to actually use this on different parts of our other pages. So we see right here what takes it was it was a heading text. So heading text and then which one changes color? Two white, and then we can change that one. Or you can leave it. You know, it's really up to you If you wants to have that look, or you can kind of go for you know, it's all about your design and style. You know, if you like that, look, you can keep it, or you can add that a white section to it. Okay, so let's go ahead now and make this section right here and again. We already have what we need. So we're here to click on plus regular single row, and I think we have to go to section right there. No, I'm sorry. That's the wrong one. We're gonna go to this teal icon at from Library and go to header section, and I'm gonna delete this so you have to kind of load that other one because that's the only way to kind of make it work. And I want to make some padding here. Let's push this down a little bit, so we have features, but instead you can do like a team and I put Let's introduce our here one teen and then right here. I'm changes to let's introduce, let's into produce. And then right here again, we can go ahead and add a three column row and we're going to add profiles. So you can either do it right here, or we can make a whole new section. So I hope you guys know that, you know, understand. So if I add this part, this part controls it still on because I want to do that because I'm gonna add a background to it. Sorry. Here, three. And it's going look for a profile. So we're gonna look for profile. We have a bunch of, um are we going to person? I think persons, when we look for Yep, person is the right one. They're here. Put Sarah Wilson. Then we hear what? But something like Owner adds there a wilson dot com right here. But my social links I'm just putting little signs just because I don't want to, you know, put a lot of in for I don't want to give you guys, you know, Not that I just want to put a lot of it. I don't want to overdo it. you know, there's no reason toe to go manually Do everything you know. So paste that all right. And then for the image I'm going to select. Ah, you'll be Daryl today. This guy right here. Do you not like that haircut, though? And then for background, we can go ahead and just leave it for now for the design right here for the icon again. You can change the icons color so we can add purple because it's kind of like our scheme right now. Close that image you guys can kind of create the image you guys wants. It's kind of cool because my last tutorial, I had to actually manually enter CSS. But with the new Davey thing, you don't need to do that no more. It's all included inside of it, so it's pretty cool. So title text. We can change this to something like open tans, and then we take just, like, semi bold and then we can align it in the center, which is cool, cause before you would need CSS and again guys, these options are a little redundant. So again, text, you know, text size going make a bigger etcetera. So you guys can kind of understand this because we've gone over this a few times, so I'm not gonna go over that again Body text. I do want to align it in the center like that or we can have it like justified Or however U S wants to align its then we hear in kind of It's too big. That's good. Really quickly. Let's go ahead and you design again and body text. We leave that flying spaces, you know the border to it. So if you guys want to add a border four pixel board around it and then we have to give it like a color like that's so over here I basically just added a box shadow with a small purple shadow around that. So that's basically how I accomplished that section. So, Dan, right here on the border, I can actually go ahead and just delete that, you know? But that's giving an example. All right, here we go ahead and take that out because I want to add a box shadow. I want to make it look a little bit more elegant box shadow again. We can go ahead, and that's and you know we can change the way this looks kind of give it some emphasis. See that? And then vertical position change that the shadow color, I put it. I was like a purple color. So you guys can see now has that purple color, and then we can change, like the interposition or outer shadow like that right there. So kind of like that is what we're going for right there. So basically, you know, the only thing that we need to do here is just maybe just add some padding. So for the spacing right here, you got some top hatting and then some bottom time, maybe even some right, Patty, you know, it's 10 each. Okay, now, again, guys, I'm lazy. So I'm just going to go ahead and copies because, you know, there's no reason toe to make to do this all over again because we've done all the settings for already. All you need to do now is just go ahead and change the images and you are all set for this section. So that's the person module. So it's going down here now. We also have a background. So right here, go to our background and I'm gonna go ahead and insert a background image. The So here I use this one right here and I want to actually do the middle section, so center, right. And then I want to do to actual size like that. So you guys gonna see it really adds the core. Just little things like that just really make your site look stunning. You know, it truly does. And right here we have the let's introduce for the partner section. So right here I'm just going to go ahead and add that at from library and do header section again. So pretty simple. And then let's go ahead and add some padding to this right here, so we can actually, you know, add padding by just dragging this. So here I just saw it. There we go. You just go ahead and push it down like that instead of having to actually, you know, adding it in, you know, typing it in manually so we can do it like that. And right here we just have a bunch of images. So I just basically made an image Models, we have three image modules. It's right here quick on this, and I must like the images image Click on that. So, like this, you know, images are always good guys, you know, like our, You know, our team, our futures. You know, it's half the websites that have them are just our totally fake cuts. That's just what people do in the industry. You know? They're like, Oh, yeah, this, you know, these are my partners, or these are people we work with. And I was like, No, you don't. You don't work with these people. You just think that but also right here, where do you image And right here, miss, Like this last one right here. So now we need to add the images below that So we can do that by just making a new row. Or we can add it below here inside the row. You know, we can add another two right there, but I'm going to go ahead, make a new role right here. So right here I click on this plus icon and click on this, and I'm going to go ahead and select an image model. Our image select. It's And then we have this one right here. Now, right here. We can kind of, ah, manipulated a little bit sore right here. Click on this image and we can actually click on these four. Now, we don't have to use all four, but we can just drag it in there like that. So we don't have to, you know, we don't have to use it the way it's designed. I'm just giving you guys examples on how you can kind of manipulate it to do what you want here, I'm out of no image and simply go ahead and select this one right here like that. So as a result, we have that look right there, okay? And scoring down. We're gonna go ahead and do this next section, which this is actually a slider. Now, guys, you can actually use this for your landing page. So all he really did here was just make a slider and we just made a transparent background . We added ingredient butts in, and then we just added some slides to it. So let's get started with that one. So right here, I'm looking 14. DIVI PART 14 Slider: I'm looking on. Plus regular click on that and add a slider module slider. See, I think I pass it, You know, if you guys can't find it, you know, this happens to me all the time. Just just type it in, you know, make life away easier, slider. And then right here, making make our slide. So welcome. Did he? And the bus in tax would be, like, learn more? And then right here, you can go ahead and add in some text right here. So I'm gonna go ahead and just copy and paste is dummy text. I don't want to take that, though. You guys can see we have the slider already right there. And then we would put the link. So if you want to add, it's like you at it there for background. I kind of want to make this background transparent. So I'm gonna go ahead and click on that, and I'm going to give it a white color. But I'm just going to reduce the transparency there. Okay, So right now you guys can kind of see it's all right for the design. We can add an overlay to its you guys get out like a back on overlay. You guys can kind of decorate the overlay as well. And again, you would need to reduce the transparency here to kind of, you know, get understanding of its Also, you can even add a text overlay. So if you want to add a text overlay, you guys can do that as well. So by going over here and say you want, like, a purple text overlay and then you can kind of reduce it like that as well to kind of give it that effect right there, So that looks really ugly. But I'm just giving you guys an example of how you can add a text over lace and also background over lease. So here we have navigation. You can choose to have arrows for your slides. Now, if you don't have, if you only have one slide, it's not going to show up. So you need to have more than one slide. So I should you have to add an additional slide. In fact, we're just gonna duplicate it. So for the alignment right here, we can have it center, or we can have it bottom. So slide an image or you have an image for image. We need to go ahead and add an image for you guys to see what that looks like. So here, on the contents were going to image a slide image. And I just put this phone right here just to give you guys an example of it. Sorry. Here we have this phone now because this is just for control purposes, so I know it doesn't look that good, but I'm just basically explaining to you what the options are so we can have this image on the bottom or we can even have. It's like on the on the the center, and you guys might want to use a bigger image than that one. That one is probably a very bad example. So let me just go ahead and give you guys an example of something a little bit bigger to help you guys understand what I'm talking about. Some like that, you know? Now the text is a little bit too big, so you might want to make the text a little bit smaller, but that's just giving an idea of something you guys can use for that. So if you want to, like, you know, present something or make it look good. You know, that's basically how you do it. Image right here. You guys can actually change the image on how it looks you guys and get really customizable . It's kind of hard because it actually, uh, refreshes so you have to kind of It's really not the best to do that. So you might want to edit this image like outside of the spider module. And then once you know your settings, you can kind of drag it, but you can, you know, I think it will disappear. So you kind of change the way it looks, etcetera or the opacity of it. And there's tons of other tutorial that l giving ties introduced to really get the most out of your slider. Now, here we have title text. So here, I might want to make this bold. Let's do this Suit is light and then we can go ahead and, you know, move the text alignments to make it look a little bit better. We can just use the regular text. This section right here would just control the regular text inside the content so it would control this section right here. But this section right here, we might need to change to just a regular paragraph. Okay. Like that. So that's basically how the cider could look. So welcome to Devi, etcetera. Now I'm gonna go and add in a background over this entire section right here to help you guys understand what I'm trying to achieve. So here we go ahead and click on this background, you can add a background image such as this one right here and then right here we can go ahead and even add in a We can add an overlay to it. So let me go ahead and add in a background to this and again I'm gonna head and enter in my I just enter in these ones. I'll just I'll just grab these really quick. I'll just take a gamble. We'll pick. Okay. And then from there, we can kind of do that. Now, remember, to get this to work, you must click on this option right here. And that will basically give you that transparent slider and again, guys, you can, you know, totally angle these directions again. You can even make a split screen effect with this as well. So there's a lot of options that you guys can kind of manipulate and do with this now, that object right there or that's it looks really ugly now. So let's just go ahead and delete the image. I personally don't like images on my sweater. Not unless like I have to really, you know, really change them up and make them, you know, special for the slider, because by default, I just don't like it. And as a result, right here we have this transparent slider like this, and let's say he wants to add in another slider. You can just duplicate it, and now you guys can see we have the arrows and we also have this. So if you want to edit that slide, you can go ahead and go to design and have fun with this right here. Now there's a lot of these settings are redundant. So here, for the button, choosing the custom style, we're basically going to decorate the button again. So this is where you would decorate the button. And then again, we can add in that, um you know, that greedy, in effect, you know, to its or If you want ingredient, you don't have to going back over here going to go and click on that spacing again. We can have some spacing to it. But again, I think that's I think the regular options were probably the best. And again you guys can add in some of the other stuff right here. So that's basically an example of how you can add a transparent slider. So we have this slide right here. I reduce the transparency of the slider, and I just basically added ingredient background. And again, you know you can do the same thing here. It's just different colors, and that's basically it. So it's just virtually different colors and different Grady, because I just I chose a really aggressive towards our style. Um, you guys can see that, you know? Let's see if we can change that up. Let's see. So here again we can change it so you can radio, you know, or ah, centered top left. You guys get the idea, you know? So it's just really, ah about creativity at this point. So, you know, we can kind of that's a pretty cool lining page like that. You know, we leave it like that. You know, that's that's it. But I'm just giving you guys an idea of how you guys can design the slider. And then, you know, the other options are all the same. Okay, so that's basically how you guys create a slider and also create a transparent slider. So next we have just a simple call to action. So called actions guys are probably one the most important part of your websites. For example, if you go to my website up here and you go to my home page, I have tons of call to actions because we wants to direct people to go to certain parts. So it calls action right here. It's going down. I have another called action right here. Testimonials. And I have another call to action right here. Okay, So having called to actions on your website is very important, and I highly recommend it because you really wants to tell your audience where to go on your website. So I'm gonna go ahead and add a new section and I'm going to add a regular section and just a simple section. Now here I'm at a call to action. Sorry, here like a ready talk. And then we do like some might call us. And then right here, I'm gonna go my secret websites and just simply grab some dummy text right here. So we're here for some dummy text and then link. So here it would be the Web site or the page you want them to go to. Now, if you guys don't know how it's to link people to different parts of the website, I'm gonna show you really quickly. So here we go to save. So we have call us, right? And let's say, for example, you want to take this to your contact peach. Well, I'm a click on my contact page right here. I'm going to copy this. I'm gonna go back to our about a speech, and so we just go ahead and insert that link right there. So that's basically how you guys can. All you gotta do is just copy and paste the link from whatever page and then just added in right there. The girl. So, for example, Link, just gonna go ahead and copy and paste that. So if they click on that now, they're going to our contact us page for the background. I kind of don't want anything there. So I'm not going to use the background color. And then also for our design for our text. We kind of need to change its too dark because we really can't see what we're doing without it. And here we can kind of be a little bit more declarative, You know, we can change like the shadow again and all that stuff. So you guys basically know the title text. We can go ahead and change this to something like Open Sands, or I think later was a good one. So he'll straight later. Later is a good one. And then you guys can, you know, center line, the text or wherever you want it. Title, text, color. You go and change that as well. Or we can add in like a box shadow to it or ah, title tech shadow, etcetera. So I'm not gonna go too far in these options. So here for body text again, we can change this to something like Lehto and center line. Right? Align justify its center, etcetera. It's going down. We can change these options. Not for the button. We can choose to have custom like a button text color. So maybe you want to text floor to be something like whites and then the butts in background color. You can change that to whatever color you want. So I was using, like that greedy in color. So right here is using like that purple color and then for my secondary color, I was like a bluish color. So I'll just do that just because it's, you know, it's quick and easy, quick and easy. So I'll go ahead and, um, I think that's about it for this section for border with, we can, you know, change the boredom with you can change the radius to make it circular, etcetera. But I'm not going to go too far into the button because we've already designed a button before and we can add a border around. This would be like, I don't know, 10 pixel like a border to its etcetera. And then right here, you can go ahead and give this border like a color or something. But I'm not really gonna do that. I'm actually gonna do something else and a little bit That's gonna be a little bit more creative than that's ah Bok Shadow might want to add a box channel to this to kind of emphasize it. And then, you know, we can kind of go through these and take a look. But they have something animations but our options. But I'm just gonna go ahead and just keep going. Toe here is gonna enter that. So now I kind of wants to change the actual size of this whole module. You know, it's it's too long. It's too big. I wanted to be just a little bit smaller. So right here in a row Settings click on that and I'll go to design and running. Go to sizing now under custom with right here I want to turn that on and basically enable this to how big I want. It's so right here. I would say this is right here a a comfortable, you know, comfortable size. So click on check. Now, guys, I want to be a little bit more creative. I want to kind of add just a little bit more to this. I don't want to leave. It looks a little naked, so I'm gonna go ahead and click on this right here and add a divider. All right, now look, we cannot see what we're doing. We can't see the divider. That's where this option comes in. So over here, we're gonna click on this. And now we're gonna kind of work right here, because it has the divider is so small. It's very hard for the thing to kind of control it. So right here and take the divider and drag it above the call to action. I'm gonna click on this. I'm out of backgrounds. We're gonna add a It's not a purple background color. You can add like ingredient, you know, or some like that's But, you know, it's up to you. But I'm just giving you guys like an idea. So right there, we added a color to it. Now for the design under the sizing. I want to make it really small. I want to make the height really small, but just enough to people can kind of barely see it. And I'm gonna show you what happens when we do all this. So I added a divider. I gave it a purple color and a very small height, and I go back to our website right here. You guys can now see that it's kind of it basically axes I as a top of border color. So it's just a creative way to kind of create a call to action, just like we have right here. Dealer difference here is just the text and the color. But the actual modules are the same exact models that I used for that lay out. Okay, so, you know, I'm just trying help you guys with inspiration and ideas. That kind of really hope you guys get creative with your websites. So here, I'm gonna go ahead and save it and guess we're done. We're done with the about US page. Now, we're gonna go ahead and move on to the blog's section. Let's just take a look at our website. It is really professional. It looks really good. And, you know, for ah, beginner, that makes this I gotta be honest. You guys are light years ahead of people who are trying to do it themselves. Because my first website was 15. DIVI PART 15 Setting Up Blog Page: Oh, terrible. It was so ugly now, really quickly before move onto the block section, I want to go ahead and actually goes to our about section and I want to copy this top part right here because I want to bring this to different parts of our website. So here we go ahead and enable the visual builder, and I'm gonna go ahead and click on this right here and save this section and do, like, header four pages. So now we can use this part for different parts of our website. Am I going to say that? I don't know if you need to save it when you exported, but I just do it just in case. I'm not really sure I don't want to like, you know, I have to do it all over again. So here I go ahead and go to enable the visual builder and guys Blood pages are really easy . Really, really quick. So, um, we're gonna go ahead and click on this plus right here and go to add from library and go to header for pages. So now you guys can see we have our header already done ready, and I can simply drag it up, or we can just go ahead and leave the other section and voila. Now we have the section ready for our next part, and right here we just have been blawg, you know, Or and then right here we can type in something like, you know, Plock. Something simple, right? And then right here and cook on Plus, click on regular click on this icon and we're gonna enter a block module. Now, the blawg is gonna be empty because we don't have any block posts. So guys making block post is really, really simple. So let's say you want to be a blogger, you know, we're gonna goto plus new and go to post. So just like you create pages or whatever, this is where you're gonna put your article in. So over here, I have my block page and I'm gonna go ahead and just copy everything, so I'm just gonna just give you guys an idea of what you guys can do. Now there's two ways you can make blocked pages. You can make it with the ditty builder, or you can make it without the Davy builder. So, for example, the best shaver for Christmas, and then right here I can just paste this and then right here, you can create a category for it. So maybe you want to have, like, things to buy, and then I want to set a featured image for it. And if each of these guys is important, because this is the thing people are going to see when they look at your posts and then I think that's about it. So right here we can click on Publish. All right, so we made one block post. Now, let's just go ahead. Made one more. I'm just going to show you how you can use the Davy Builder for instead. So right here a minute. But the best iPhone to get that's pretty easy. It's probably the newest one. But I've heard that they were kind of messing all their older phones or whatever. So here, we're gonna use the Davy Bullard said So load from library, and they have, like, some template that you guys can use. But I'm just gonna go ahead and just do like something simple. Like, I'm just gonna add the the text one. I think so. Here is gonna do a page full with a page full with. So it has some models right here already sets, and I'm going to publish this. So he was gonna click on public. I would make a new category so coolest things out of the category, and I'll set featured image for it. No guys for other themes. You really can't decorate your block post. So it's kind of frustrating. But with the divvy theme, you can basically use the divvy builder and all of its modules to actually add on your blog's post. So let's say you want to view this post go to view post and there you go. So there is the block post and this is one of the models that we use. And here's just this is just like a template guy. So it's pretty self explanatory. So let's go back to our blawg. And then right here we have an image, and then we have the product. So, guys, this is a little bit too big. So let's go ahead and edit the actual blawg module itself to basically show what we wanted to. Because quite honestly, that's pretty ugly. So right here we have like the post number. So how many post numbers do you want to display? You can also make it set certain categories. Onley. So let's say, for example, this block posts or this blank page you only want to show the coolest things. Then you would go ahead and select it. Okay. And again, you can show excerpt meaning like you can show like the actual like the contents from it. So extra would be like that stuff right there. And you can show a certain amount of extra like 200 words of the article or whatever you want to add. Okay, go ahead and go back. Was being a little glitchy there. But that's okay. So for the design, we have layouts. Now we have full with, and we have grid. Now I am a fan of grid. I think grid is much more nicer and much more cleaner than the standard way. So also for overlay, you can add it like an image overlay featured image overlay. You can not overly icon color, and also you can add a hover color over when they hover over it. You can go in and give that color right there, so you can see it's that color so you guys can get maybe kind of match. It's to your scheme of your website. So here we have, like a purple scheme going, you can go ahead and add. It's a swell right there. Okay, so there's other things you guys can do with it. A lot of these are redundant. So again, like, you know, for the title text, Do you want to, you know, change the font for the title text. You can change the font for each specific one, and again you can like the line. It's and it's really helpful because before you used to have are used to put a lot of CSS for this section, but they've actually improved their block section. So now you can basically add all these features to this section right here, or to your block posts as well. Maybe out of box shadow to it. There we go, so that looks pretty clean already. So it's really just small things guys that can make your blawg look truly amazing. So I'm going to click on this and click on safe right now. It's individual builder, So now if you just go ahead and look at it. We can do like, best iPhone to get. And if they click on its, you know they'll take into that page and then also right here we have this section right here. Now, if you guys want to monetize your blawg, there is a link in the description of this video. It will show you how to monetize your blog's for free. And also, for those of you who want to add, like the Facebook, which is right here and handle all this stuff, let's go and do that right now. So right here under widgets, we have the sidebar. So basically, you can add different stuff so you can have a search bar. Recent posts. You cannot recent comments, but I'm gonna go and lead all this stuff. You know who needs archives? Who needs who needs metal? What is all this we're going to need? All this junk is all junk right here. All right, here we can go ahead and like the Facebook like box that we had before and then right here you would enter in your page. You can enter in like, advertisement and image. There's also it's a really cool stuff. You can add a lot of these you can add like a plug ins, like so, like for instagram or for Twitter. And you can actually show it's on your, um, on Europe posts. So I'm gonna go ahead and go to my Facebook again. Goodbye. Messages for my page So embarrassing. People message me during my tutorials. It happened last time. Some guys like, Hey, bro, like I'm dating this girl when all white dude like I'm doing it to Tora Leigh, you know, follow us, save. I'm gonna go ahead and close that before, for someone really messages me so done right there. And let's go in and take a look at it now. So let's go ahead and visit the website, Go to our blawg and click on any of these Post It doesn't matter which post because it's all going to show up. And then right there you have the You'd have the widget right there. So again we can modify. Remember, we can change like the height and the width and everything. So, on your free time, you might want to do that. But basically, that's a quick nutshell of the blawg section. pretty simple, right? Pretty easy, you know. And this right here is your your sample one. So right here, you can go to your dashboard and you go to your posts right here. And these are all your posts. So let's say I don't want to. Hello, world. I'm gonna trash that one. So now that's not gonna show up on my block post anymore. It's right here. Blawg. And then Paula, it is gone. All right, so that was the blond piece, guys. Pretty simple. Let's go ahead and move on to the contact section now. 16. DIVI PART 16 Creating Contact Form: All right, So let's go on now and make our contact page. So right here. Click on enable Visual builder. And right here I'm actually going to click on this and we're going to add from library because we already have the header for our website. It's right here. I'm gonna take this and we can distract this on top and then just go ahead and weaken. Just leave this section. So right here You might want changes to something about our contact, right? So, contact. Yeah, that's ugly. Do you? Here we go. And then right here, we go ahead and move. That features. Now, you guys can also put this on the other side. So it really depends on what side you wanted on. So if you want it on the other side, you can go ahead and just drag. It's. And then also, you can just go ahead and drag that over there as well to give it that effect. So if you guys wanna have it on that side, you can do that. I'm just giving you an example of how you just drag and drop. So next, let's go ahead and click on this section. right click regular, and we're gonna add three blurbs. We're gonna add this section right here. Okay, so we're over here, I wanna select this, and I want to select a blurb Now for the title. I'm not gonna put a title on. I'll explain to you guys why? So he was gonna go in and copy this information and paste it right there now for the design tab, or is going down here for the image and icon. I want to actually use my own image. So I'm going to click on upload, and then right here, I'll put in an image right there and then for the design image. Nikon, we can change the placement to the left or to the top, but I don't wanna leave at the top. You know, I kind of like the way it looks, you know? And then we can change like the the border with we could change all sorts of stuff about it can change, You know, the color of this. But don't get too much into that. We'll talk more about the image filter after this contact page. So right here under the title text. Actually, we're having politics we're just going to use the regular text. I want to send our line. That's and ah, you know, we can add, then like you get a bit customizable. It's right here. I'm gonna enclosed. That's for the body text. We can go ahead and change this to something like a light. Maybe late. Oh, but we want to make it just a little bit bigger, you know, just a little bit bigger like that. Now, eventually wondering, you know, it's all scrunched up. This is where you would probably enter in some ah, body line haIf something like that's kind of decorate it and then maybe reduced. This is just a tad, you know, like something that right there, that's perfect. Then you can increase the line height as well can also increase the line spacing. It looks just like that. Okay. And then right here we go to the same exact thing. So over here, when you have a do one. And I basically just did the same thing for this one right here. So again we had the blur module. So should you guys, how to do one. So, um, if you don't want to add those other ones. You can just go ahead and do that. But, um, you guys kind of get it. So I'm just gonna go and copy and paste this and just kind of, you know, put it right there might want to add, like, a different image for it because, you know, kind of a perfectionist. So I kind of want toe. Just use different stuff. You know, just just the small images and text fonts. Brulee truly makes a difference. And it makes your site look so much better and so much difference than did so right here. Image an icon, upload. And then I'm just gonna put that one right there. Okay, Next we have our contact form. So right here we have a two column role. We have some information right here. And then we have a contact form. So right here, click on this section right here. Now we can also add it inside of this section and maybe even add. I'll do a bonus. We'll add in, like that other little area, so I'll explain what I'm gonna do right now. So I hear I'm click on this click on a two column rope and then on this reflection right here. I want to add a contact form, and then right here we have a contact form right here. I want to enter in a call to action, and I'm explains you guys why? I had a call to action. I did this before people were like, Why did you do that? So here, I'm gonna do, like, ready to talk, and then I can go ahead and put some dummy text. Okay? Now, I'm not gonna put a link, so I put a link. It's gonna create a button, right? I don't want to have a button. So I'm just gonna go ahead and say no, No button, because I add a button text right here and I add a link text to it is going to generate the button. No, I don't want a button. I just want I just like that position. You know, I like the You see how the call to action kind of is already designed for you. It's already made for you, so I really don't want to, um, you know, have to do that with the text model text module. I'm gonna have to, you know, center align it change the marsh, It'd batting, you know. So I'm kind of just stealing the ideas from other modules and kind of implementing it on my website. So that's kind of why I'm using that section right there. Now for the title texts. I want change this to something like black. And then maybe right here, you know, we can change the line. Yeah. Kind mess around with its, um, over here. I want to do lights and then Lehto, and then we make a little bit bigger, and then right here for the title there for them, just for the basic body texts we can just seeing diet to something else, like later or something. And we'll just give it a black color, cause we're Garcia going to take out the image. Arms are in the background, and then right here, you know, weaken at a buckshot or whatever old thrown it. So here, I want to go ahead and just get rid of this, given this background backgrounds really ugly. So we don't really need the background here. So here we go ahead and take out the background. No, I forget. It does that, You know, it does that sometimes. So I basically just added a section right here, and we added a contact form. Now I'm gonna go ahead and click on the settings, and we're gonna actually kind of go through somebody's setting. So for the for the text right here we have, like, a title. Ah, success message. So you guys can also read this but success messages basically saying, like, you know, success once they you know, once it properly goes to your email, Okay. And then right here we have the submit button texts. Such a submits. Now, right here for email. Gonna go ahead and put in the email. If you guys ever have a question on it again, you guys can read this. So I want to go ahead and put in my email address and then for the message pattern again. You guys always read this. You guys can define its however you want to receive it. But for right now, I'm not going to do that. Also for redirect. This is a really cool feature. So if somebody decides to fill out your contact form, do you want them to go to another page? Now? This is perfect for landing pages. So let's say it's like, Hey, you want free access to this? You want to make a $1,000,000? Uh, sign up for our newsletter and we'll send it to you, then try to sell you something. You know, That's how I was gonna make money. So all right, here we can put like a GPS roles in dot com and then, you know, background you go is designed every here, like the foreign field text. So I hear you kind of design it's and choose to however you want it to look title text again. You know, you can change all the settings or you guys can you guys go through these? You know, these are all redundant and the same. So you guys kind of understand what these are. So also, for like, the email, you can customize the email. You could give it like a conditional logic. Now, the conditional logic is pretty. Um, it's It could be a little complicated at times, So I'm going to link the description for elegant teams contact form because they actually made a really good one. And I don't want to go over the conditional logic and everything else because Elgon names has made a separate tutorial for it. It's basically like if somebody does something, what you want them to do And guys, this could be really customizable, like there's tons of stuff that you can do here. So most of you guys won't need to use this. This is probably for, like, people who are doing big stuff, like Like you want to take like, an order for contracting, Like, how many pounds of steel do you have if you have that many pounds of steel? Um, you know, what kind of lumber do you have? And it just goes all over the place. So I'm not gonna go into the conditional logic there, Um, also for field options, you might want to add, like, you know, is this required? But yes, for background, you guys contains the background for text, etcetera. So you guys kind of get the points of the contact form. So I'm going to go ahead and close that field options required. Yes. So if you guys wanted etcetera, conditional logic, background, and again, you guys can always, you know, decorate this. You know, you get customizable with the backgrounds for each of all these things. So let's go ahead and send myself an email and also used the redirect option because those are probably the most important part of the email contact form. You know, you want to make sure you get the emails right. So I'm gonna make sure that my email is correct and then also for the redirects. I want to make sure that it's darrell wilson dot com. So you click on check on this and click on Safe. So let's go ahead and send myself an email. So I'm exiting the visual builder because if it doesn't send it to your contact or your email and it's just not working, it's most likely you're hosting company. If you did not choose site ground and you chose some sort of like, you know, like free hosting companies work like your websites up and down every five minutes. It's probably not gonna work. So you want to make sure that you get it from a reliable ah hosting company right here. I put my email and then here. Hey, what's up, man? Great tutorial. And then right here mentoring 12 and then click on Submit. Now it should redirect me to my website, darrell wilson dot com. And there you go, Paula. So now let's go ahead and go to my email. So I have Gmail. So right here, I go over here and go to Gmail, and Voila. So we have new message from Patty. That's what we named the website and click on it. We can see that. Hey, what's up, man? Great tutorial. And it comes from our domain. So it's all about your hosting company at that point. So again, it's pretty simple. And then, you know, we got redirected as well. So we know the contact forms working pretty well. So it's going to go back to that domain. So do eveything. The Borg, okay. And go back to our contact. Now, Lastly, I'm gonna show you guys how to add in a Google Maps Now, before you. Actually, I had to enter like, an a p i and stuff like that, and it was a little bit confusing. I'm sorry you didn't have to enter in a p I, but now you have to. So people can be somewhat confused. I have that backwards. So right here I go to at a new section a full with and I want to enter a full with map. So before we actually do this, guys, we need to get a Google A p I key. And it's pretty simple. So I will show you how to get one right now, in case you want to add Google maps to your website. So here on enter Google a p I key and right here Click on this. The 1st 1 that comes up developers at Google and you have to have a Gmail accounts and guys is pretty simple. So just click on, get a key, and then you can create a project or select yours. So I'm just gonna click on this one right here. And if you guys don't have anything, it'll it'll prompt you to create one. So here we click on next, it's generating an A P I key and Paula. So there we go. It's gonna go to copy and paste that. All right, so now we need to go back to our our option right here. Now we need to actually, I'm gonna go and say this. We need to take the a p I key and insert it into the Davy theme options. So over here I'm a goes to dashboard, go down to divvy and go to theme options. Remember earlier how he said, We have to go back to Google. AP I Well, now we're going back there now. Also make sure that it's just like that. If you have the other information mumbo jumbo, it's not going to work out properly. Okay, so it's going down here going to go ahead and save the changes. Now let's go ahead and go back to our websites contact and let's go ahead and finish this right here. So I'm going to enable the visual builder doesn't see. It's kind of great out, you know, it's kind of great. So now guys, also, there's a lot of modules I didn't cover in this tutorial. So just like the full with, like image header, you know, it's kind of off to you guys to kind of venture off and kind of do your own thing, because now you guys have the basic understanding of a lot of the module, So a lot of these are very, very similar, you know, they might have different options, but in general it's all the same thing. So I hear you click on Plus our business, Our company went our company and then right here this is our company. And then right over here, you might want to put like, an address and like your phone number, everything else. And now for the map pin, I'm gonna put Hollywood Hollywood click on fines. There you go. It found Hollywood. So that is for the pin. So now that we've done, that's we can go ahead and click on check. And now we want to go to the map right here. So the map address you would type in your address. Generally, it's gonna be the same thing. Is it pin? So here find. And then Paula. So if I click on check, you can see that they click on it. Our company, this is our company. And then maybe right there, you can add in your address. Now there's a lot of other you guys can really, you know, design this for the map. You guys can change like the color, everything. I mean, it's just so so much you guys can do with this, so I'll leave it up to you guys to kind of mess around with. Like, if you guys want to Do you like the image filters and stuff like that? There's tons of other tutorials. In fact, I'll be linking a tutorial on the maps to kind of give you guys a better understanding of it. But in general, that's all you need. You just need the map in the background and, you know, that's pretty much it You can always add like a background to it, but yeah, so, yeah, I'm not gonna do that. So, in general, guys, like I said, you're just gonna be the map in the pin. You don't need a background, you know? Not unless you're adding an overlay to it. Do you want to get customizable, etcetera? So, in fact, the overlay won't even show unless you prompted to Okay, Sorry. Here, gone this Afrikaans safe. So right now you guys can see we've done the contact form now really quickly. Before we talk about this contact form and some other CSS, I want to actually show you guys how to import layouts just like we kind of did before. So I'm going to actually give you all now these services page, I'm going to give it to you 17. DIVI PART 17 ADDITIONAL LAYOUTS: So there is a Lincoln description that is called a services page. Now, I'm giving this to you guys because, you know, you guys wash this tutorial, and I'm really glad that you have made it this far, so I'm gonna go ahead and enabled the visual building. Now, there's a few ways you guys can upload layouts. Now I'm going to enable the visual builder. Now, this sometimes works. So this is kind of where, um, things could get a little weird with hosting and also Devi. So right here I'm a click on this, um, portability right here and go to import. I'm a choose the file. Go to my desktop and the it's called Elegant Services. So we'll click on that and go to import now if it doesn't work, see how it says this cannot be important by this etcetera. You guys can just go to the DB library now I hope they fix. That's because that's the reason why it's there. But sometimes it just does not work. So right here I go to add new I'm sorry, import export. Go to import and choose the file and then simply go ahead and find the elegant services and then import that lay out right there. So right now it is important. Now the baby library is probably the best way to import stuff. So it's called elegant services, all right, And sometimes it will time out like this and just be great. That happens sometimes. I'm glad it happened because people always tell me a man, you never get errors in your in your your to Tora. Let's say yes, I do. I get em all the time. Have to kind of edit them out. You know, it's it sucks, but it's just how where presses so services and right here I'm ago. It's too enable the visual builder and I can even go in the back way and go to edit page. In fact, let's just do it the back way. So right here I can go to edit page. So if you like working on the back end, you know, I I really wouldn't recommend it. You can do that. So right here we can do load from library, add from library, and we have elegant services right here and go to load. Okay. And then right here you click on preview changes now. One thing I want to mention before that is right here. You might want to look on updates, because if it's that's not the case than you know, it might not save. So here we go to view the page. All right, Now, this section right here, you guys probably gonna fix us already. But I'm going to talk a little bit more about some other stuff. Now, this is the services page. And again, it has tons of really cool stuff. So if you guys wants to kind of do your homework and see how I accomplished some of these changes, you are more than welcome to. But there is one thing that I want to mention about this my little borrowing clergy. That's weird. So it's going down here. So I want to mention the image filter now, because there's tons of ways you can, you know, modify the image filtering. So, for example, we have this picture right here now by default. Guys, this is just a question work. That's all it is. But we chose the image, and we basically inverted the background with the question work. So let me give you an example. So right here. Under this setting, under background, we can see column one now calmer on my default is just this background. So if I delete this and add in a different background to some, it looks like this right here. You concede it's basically picking up the exact background, but the other one was a much better result. So basically, how do we accomplish this? Well, we accomplished this with the inverse sitting on the filter options. So for the design under the filters, we have these settings right here. Now the invert is probably the most under looked. But in theory, it's supposed to look like this right here. But with the invert option, you can actually put in a image on the first section and then invert its and it will actually take that background and apply its two inside of your object, which is pretty incredible. So the other option again is really amazing. And if you guys want to see some examples of its, I'm gonna go ahead and give you guys this page right here. So this is an example of some stuff that you can do with the image filtering. So right here they basically blurt out these other parts right here. There's three columns. They just blurt amounts right here. You can see that they have actually reduced the text to kind of be absorbed in the background. Right here. You can see this animation right here. How it kind of just disappears and comes in like that and also right here. That's basically the same thing that we did right here and again. You can have some. It looks like this so you can have, like, a text, text text and then an image and then just invert everything on your page as well. And right here, same thing. And again, here are some other examples of things you can do with the Google maps and also, you know, you can actually, you know, inverts like the colors and everything else. So theater, just some examples that you guys can do with the Devi theme. It's incredible. And again right here. So also be linking some tutorials on the image filtering because L givings has provided to Toral's for them. And I don't want to cover everything too much in detail because I can probably spend another 30 minutes giving you guys examples on the image filtering, but the things that they have just created and accessibility with this WordPress theme is just it's I mean, I've been around all the themes and no other themes, no other What persons even come close to what this theme conduce for you and your websites . Okay, so that's basically nutshell. And really quickly, this section right here, um, if you guys don't know how to change this, you guys can actually, um, you guys can reduce this or you guys can, you know, put it on the other side, or you guys can even add some CSS. So the CSS that I'm talking about is something called watermark. Now, I'm not gonna be showing you guys he ss in the sectorial, but I'm going to make a video, and I'm going to link it in the description. This video. So you guys want to really improve your skills and you guys wants to kind of make something . Looks like this right here. And even on the home page, how we talked about, um, this section right here. I'm going to be creating a second tutorial, and it's gonna be targeted a little bit more for advanced users because ah, this tutorial designed for beginners And if you want to kind of, You know, if you're up for the challenge and you want to improve your skills, the tutorial is there for you. And also, I'm going to be providing you guys all with. Since you guys have been here watching this tutorial, I'm going to actually give you this entire layout for free. So you're going to receive the home, The about the services, the blawg and the contact page for this layout right here. So this layout was designed by the best TV child, and I've also included several other templates in my website just for my viewers. It's going to be password protected and the password is Patty. So if you guys go to my website, you guys will actually have access to give you these websites. So, guys, this is a big bonus for all of my viewers. I've actually invited five other WordPress designers and they've actually designed templates for my viewers, and you guys will have access to these templates and these were created by world class designers. Now this one was created by Mark Hendrickson. If you guys do want to visit their websites. Their link is in the description. But if you guys want access to this layout, it's on my Web sites. You guys can download it totally free, and this is just one of the many websites that you can get. It's just amazing. So I'm sure you guys how to basically use the layout system. So that's basically what these are. So these air layouts and they're also child things, and I invited these guys to teach on my arm. Sorry, Teoh. You know, I wanted to lay off from them for my viewers, and these guys created just some of the most amazing work. So again, this one is for Mark Hendrickson. And this is the layout that we use for this tutorial. You know? And these guys, I chose their layout for this tutorial. Now, there were some things in this tour and their layouts. I mean, that was a little bit too advanced, such as this section and also this section right here. But in my next video, where we talk about CSS and advanced features, I'm going to show you how we incorporated those designs, guys, because for a beginner this could be somewhat confusing. But, you know, if you guys want to have access to this entire layout, you guys can go ahead and download all this for free. So this was created by best TV child. And again, these are available on my Web sites. And this is just a way to say thank you guys for watching this tutorial all the way. And again, this is smart agency. So this is another design from another Websites and guys. He's all used to divvy thing. So holding to do is simply download. It's upload the layouts and you're good to go now. Some of these layouts guys, they do require some custom CSS. So what that means is you're gonna have to copy and paste some stuff onto these layouts to get them to work properly. Because sometimes in wordpress there's some limitations. And with the power of CSS, you can basically do anything. And this is a really cool feature they have right here. You know where everyone's kind of falling. And then right here, you can have this so you guys can have all these layouts totally free. They're listed on. My websites have given you guys the password. So you guys just, you know, you can just go ahead and enter in the password, and then you guys will have access time. I might make them available for free to the public a little bit later. But for now, I kind of want to give you guys a special access to all these layouts because this can really help you in your career of WordPress or even help you guys get ideas for some of your Web design jobs. This one right here was also created by Be Super Fine. Somewhere here was created by websites in Germany. He's actually a really good designer. This one was created by DVD in store, and again, I'll mention them on the comments. So, you know, hats off to all these guys for making these for my viewers because these are nothing short of amazing guys, and you guys want these layouts again. They are available for download for free on my website. There are some instructions, however, if you guys need to, um, you know, to download them. So this right here is like a black and white. He basically made to home pages, which is pretty cool of him to do and the services and then the contact. So again, these will be available for free on my websites will be password protected just for you guys. So again, thank you guys for watching. Now, guys, I hope this a Torah was really helpful. And I really invite you guys all to go to my YouTube channel and kind of just, you know, take a look at my YouTube channel and really see my content. I'm probably the top rated professor on you to me dot com for teaching WordPress. And, you know, I really hope that you guys, you know, succeed because I know people in the trying learn how to make websites and could be very difficult at times. And that's why I'm here, you know? So, I mean, I used to go to websites and just get screwed. I would pay, like, 45 grand and give me some template. And I was like, this looks like crap. So that's why I'm here. And I hope you guys enjoyed this tutorial. You know, I really it inspires me a lot too. Create these tutorials because people email me and I just like, throw um, I started my business because of you or whatever. So in the end, guys, I really hope this helps you guys out. So again, Thank you guys for watching this tutorial. Those layouts are available for free on my website, All for my viewers. So good luck, guys. And I'll see you guys in the next WordPress tutorial. 18. CSS TUTORIAL: Hey, guys, Welcome back. Now, in this video, I'm gonna actually show you all how I achieved some sections in my last TV tutorial. So massively tutorial, I had some really cool designs that you really can't do normally with, Davy. But you can just a little bit of extra CSS. So right here added this kind of contact form. That kind of has this slanted angle design. And I'm also going to show you how I created this contact form with some CSS with the debate team. Now, I'm just gonna go ahead and recreate everything from scratch. You guys know exactly how I did this, so it's gonna get started. So right here, I'm a click on this blue icon and go to regular now right here on us like a two column wrote animals like a text module and are here under some dummy texts. So right here, I'm gonna go, And I'm sure to decorate this a little bit just to give you guys a better understanding of it's just, you know, just make it look good. And so you guys get an idea of it. So 50 and maybe I want to add a box shadow and then right here again, we'll go ahead and go to think it's heading for, and then I'll just go ahead and just Ah, it's like a default. Maybe light. They just make it a little bit bigger, you know? Wrong one. So this is heading five. Sorry. Heading five. Make the slights, and then just make it a little bit bigger, Like that's and then I don't Maybe I can change this. Feel like we're bought over summer, but I was always a cool font. All right, Now, I'm not gonna do. The rest of you guys were just I'm just for doing that for just a toll purposes. We'll go ahead. Just make a quick little space right here. Okay? So this is my section now. The first thing I want to do is go ahead and go to this blue section and I want to reduce the padding. Now, the logic behind all of this is basically I want the teal section to kind of control everything. So right there, I added zero patty. Now I'm gonna back up here to the steel section, click on the gear icon, go to design, go to sizing. Wanna make this a full throw. A custom gutter with of just one. And I want to equalize these column Rose. All right, so going back over here, Going click on that now under. Actually, before we do that, I want to just do the background image. So background image Go to call him to under the background click on this picture I have right here and maybe give it that really cool parallax effect. So now that I've done that, now I can kind of mess around the margin a little bit Mawr to kind of give you guys an idea of what I'm actually doing. So right here under the spacing for the padding right here, I'm gonna add zero pixels and again, Imagine your pixels. So now there is absolutely no space on the top, but for a column one, I want to go ahead and add 200 pixels, and I want to create 200 more pixels. So you guys see what I'm doing right here? I'm basically kind of forcing the image to, um, you know, spread out. And also the text right here. Now, this section right here is a little too big. So I want to reduce this, but I don't want to use custom margin and patting, because when you do that, sometimes it can come out unresponsive. So I'm gonna go to my, uh, see right here my sizing And right here I'm gonna go to 400 pixels and I want to center align this just like that. So now I have that center aligned and it looks really good. Now, one more thing you guys can do if you want to add a border, you want to get a little more creative. You guys can go ahead out of border to the left side, right here. Now, this is totally optional, and it's a little bit too close, so I need to add some padding to that. Now, this is only if you want at the border. So I go to my spacing right here, and I believe it's the left side right here. So me to see if it's the left side use the patting, patting left side. There we go. So that kind of like makes it live It mawr like it gives. It was like some flavor, you know, that little bar right there. So now over here. I'm going to my gear icon. I'm actually gonna go to this section right here. I'm going to grab the CSS and explain to you how I did this. Know all the CSS needs to go on the teal section and it's going to have to go in the column one before it's right here. Advanced custom. CSS column one before I'll try to leave this in the description. If it doesn't work out, I will actually go ahead and leave a link and I make a block post for this custom CSS so really quickly right here to kind of give you guys an idea of what this is like. Basically, I want to control my contents. The position I wanted to be absolute. Now these other I can t see right here. This guy's just basically controls, like you know where you want the padding and you know how you want to adjust everything. But for right now, I want to go ahead and leave this. Now I need to give you guys need to add the Z index before we do with this because you guys can't really see the changes on making so right here under the common elements. I want to go to Z Index and just enter, like, 99 or 55 or whatever, anything but above one. And that's basically how achieved that. So looking at this now, we can kind of mess around with this a little bit. You guys get a little bit more customizable and kind of mess around with this, But basically, you know, I just added, like, you know, a margin to the negative 40 100 negative 150 pixels. A negative 110. And then right here, I transformed it so we can give it like a, you know, 100 20 degree angle or, you know, a 50 degree angle. So if you guys want there is a website called, I think like CSS Helper, and it basically gives you like the codes because they're basically commands. That kind of forced the theme to operate and do what you want to do that operates outside of the page builder. So right here we have zero degrees. But then, if I put in like 15 you can see how that slants 16 right there. Now for the background. We need to make sure that it is white because we're basically saying we want this to apply to the white background. So right here FF counts as something as whites and then I use the cases like it's not The colon is a semi colon to kind of close the bracket, and then this right here controls the box shadow so you guys can always increase or decrease the box shadow. So you see how it's like, kind of really increasing now, you know, So you guys get really customizable with all these options, But if you don't understand CSS, that's OK. But these are the command that you need to sort of achieve this section right here. So again, this basically dis controls like the angle of its I'm sorry, this controls like the the margin, the padding of it. This commander here basically shows you how much you want to transform to planet through the white section and in this section right here simply controls the box shadow. Now a quick run down of the Z index. So Z and X is basically for placement. So basically, if you want something to appear something before you would have a certain amount of the index's like if you wanted, like, three images, but you wanted this one toe overlap this one or this one overlap this one. That's where Z Index Z index comes into play. Okay, so that's basically how I accomplished this section right here. And you can see it generates a beautiful effect. In fact, you can actually, like just kind of, like, you know, even had just mawr sections to make it look really nice. So that's basically how I achieved this section right here. So I'm gonna click on safe, And now we're gonna go ahead and show you all how I accomplished this section right here with a little bit of CSS as well. So I'm going to go ahead and enable the visual builder and I guys, this contact form is a little tricky, so just bear with me and we'll do this step by step, So I'm gonna go ahead and go to a new section, so I need to create a new section. Actually, I need to create a new teal section, so make sure that this is a two column Thiel section. OK, now here I'm gonna put in a text module and we're here, I'm gonna go ahead and put in some, you know, some scribbles from garbage. Whatever. So I'm going, Decker, this just a little bit. So this is totally optional. I'm just kind of, you know, just making it look a little bit better. So you guys just get, like, a better understanding of it. So here we go ahead and bump it up, and it's quite make it bold, all right? And then for this section below that, I'll just make this just a little bit thinner. I think it's heading number three. I think it's heading for you're heading for Roboto, and I make this just a little bit thinner. Is that right? And see here that I entered this one right? Heading three. Probably different one. It is heading number two. So heading two heading to I'll place this under Roboto and make it just a little bit thinner. Now, before I begin, I want to change is also whites because, um, when I change the background color, I want to see what I'm doing. So right here, I'm gonna select White also for the title text right here, and select whites and again guys just hold the optional. You don't have to do any of this. This just for told to troll purpose is just to give you guys a better understanding of you know what? I'm what I'm trying to accomplish. So heading three make this white all right, whites, And then we'll make also the paragraph text white as well. So just text texts, and then it changes to a light. That's a quicker way of doing it. Okay, so it really quickly I'm gonna go ahead and go to the teal section right here and go to the row setting Now, guys, this might be a little confusing, so just stay with me right here. So under the background here, we're gonna go ahead and do this first to give you guys a better understanding of how you guys can see everything. So right here, I'm gonna go ahead and enter in a Grady in background, and I click on this, and I'm just like my colors I've been choosing. Go ahead. It's like this one right here and then for this column right here. I'm going to select this one right here now for the grating type lean years. Okay. The direction of this. I want this to be a 71 degree angle for the start position you 46%. And then again right here. The end 46% of what this does is it creates that kind of split screen effect these guys can see right there. Okay, so that's basically what that's trying to accomplish right there. So I'm going to go to the design tab, go to alignments. Now, the alignment right here is fine sizing. So I wanna make this eight full row, Actually, no, I want to a custom with We're going to 1200 pixels, 1200 pixels. I want to do a custom gutter with of zero, and I want to kind of squeeze everything together as much as I can, and I want to equalize the column, Rose. Now for spacing, this could be a little tricky, but just go ahead and do exactly as I'm doing to give you guys a better understanding. You guys will get more familiar once we kind of messed around with the settings right here . Almost like a zero pixels. Right here again. Zero pixels. And also for the bottom. You want zero pixels now for the custom padding one. Don't put anything. We don't need nothing there because we just wanted decorate custom padding number two. So here, almost like 100 pixels. And also, guys, instead of doing pixels, we can actually do percentages. So here I'm going to 10% to the rights 100 pixels right here. And then again, 10% left as well. So under the border, shadow everything else. I'm gonna go ahead and say no, I don't really need anything else. I will come back to the advanced, having just a little bit, right. Here we go. And click on check. Now, let's go to the module right here. The actual text module. So here I go to the background right here. And that's at a quick background color. Let's go ahead and out in a quick background. Color is like a dark greyish colors. If I could make a guess, it here something like that, you know, just to give us a better understanding of a darker color, just, you know, just help emphasize what we're doing, so All right. So I gave the text module a background color. No, over here for the design text I believe that standard. I wanna go to sizing now for the sizing right here. I want put 500 pixels and I'm going to leave the module line because we're actually going to use custom CSS to make this vertically centered. Exactly. Now for this basing right here we have custom margin. It's over. Custom Margin. Go and put 100 pixels to the top. That's going to give us some space. And then for the rights I'm gonna hand put minus 40 fixes for the bottom. I want to put 150 pixels as well. So basically just creating space right there. You got some kind of see a live preview of that. Now, for the custom padding right here. I wanna put 70 pixels, then 80 pixels to the rights and then 70 pixels. But again, to the left, I want to do 45 pixels. All right, so we'll go and check. That's not right here. I want to contact formerly quick. So here and in the contact form, don't click on check. Now, there's a few things I want to do right here. Now, first I want to go ahead and take this and I want to center align this section right here. So I click on this. Go to my gear. Advanced custom CSS. Now I'm gonna get the CSS for my other page right here. Just just because you know it is already copied and pasted. Don't worry. I'll put this CSS and description. Sorry. Here. Margin left, Auto. I'm going back over here under the main elements. It's going to be under margin left auto, and that's going to automatically put it in the center. So it is. You know, we know exactly it's in this, like the margins in the center so you can see it's it's, like, perfectly line right there to kind of give it that clashing effect. OK, so here and click on check now also, guys, the CSS is also in the description. So if you guys you know, if you guys need it, it's there. So over here, go to my gear icon and go to the advanced section for the teal section. Okay, so now we're that teal section custom CSS now, of course, guys, the CSS is way too long to type. I'm super lazy, so I'm going over here to the advanced happen. Just grab it really quick. I don't want type everything all over again. That's too much work for me, all right? And this is very familiar to the last section that we did. So just like we did for the other section where we made the, you know, the the rose and everything for the first part right here under. Call him, too. Before I wanted. Before this second section, I'm go ahead and paste that in there like that to give it this angle right here and a little explanation. But this does guy, so I want to control the content. You know, the position is absolute. So that means basically, I want this position kind of act first. You know, I don't want anything else to command over it. So by doing this, it's also like a Z index. It's almost the same thing. But position absolute is basically saying I want this position right here to appear first. So if that wasn't there, this section would come over it. And then right here, we just decorated it, you know? So added a top zero top zero, right? You know, minus 62 to kind of give it that angled look. And you guys can always adjust this to whatever you guys want. But for this contact form, I think it's really stylish because I really like it. And then right here we have a background image leaning ingredients. So this commander here guys is basically just controlling the leader grading because And if you use the actual module itself, you can't really, you know, go crazy with it. Like here. So here, we can actually give it a skewed angle past the actual box. So right here. You know, you could actually change this to something like 20 or 50. Or, you know, you guys can get us customizable as you want, but I think something like 10 is just really stylish. So right here it with a gun check. So now you guys can see we have this box right here, and we have this kind of like it's actually you guys can see the designs in front to take place. Now, one thing I want to also do is kind of changes contact form of it and show us how I saw that as well. So here I go to the gear icon go to design. Actually, don't go to each module. So name design layout full with. Now for the foreign field text. I want to go ahead and just make that all transparent. I don't want Teoh, you know I don't want any of this shown, So it's gonna have that look now a really cool trick on how to create the line. So it's not just sitting there, it's actually give it a bottom border. So these are another way you get really creative with the bottom border. So here, bottom border. I must like this one right here because I want a line to appear under here and I'm going to give it a one pixel of something like white to kind of match the colors just like that. See that? See how we kind of created that illusion, that this is the actual line, but in reality, it's his box right here. But this is much more stylish, right? So feel options Syria design layout full with. Then again right here, we're gonna go ahead and go to the field text and just get rid of that background and I'm going to add a t here. I'm going to add a bottom border again. Add this to something. I was like one of the changes to white to give it that look. And then again, you know the same exact thing guys for the message form. So here, design layout full with field text, we're gonna go and make this transparent, and then we're gonna go ahead and, you know, I can change the text of white spots. You know, I'm just way too lazy, So we're gonna set the border here to make it look good. Border, bottom border, then again one pixel and make it look quite like that. And there you go. That's exactly how we accomplish that form elements. I can always get rid of the capture, but I recommend having it on what you're gonna get spam. And people are gonna try to say you sex pills and all this weird stuff. I get so much just garbage, just like we'll have jobs. Who do they make money off that like it's crazy. So here we click on save. Now, guys, one thing I want to note that best TV child dot com was the designer original designer of this contact, so I made the just a middle person. So if you guys want to see more of their layouts, you guys, and go to their website at best. TV child dot com Link is also the description because again, these were strictly their designs. These were not my designs, but I helped, you know, collaborate and show people how to use its, because these are just some amazing designs. And those guys are really amazing designers. Okay, so that's basically it, guys, a quick rundown of how we accomplish those two sections. You have any questions? Feel free to let me know. I'll put the CSS and description of this video to help you guys out and again. The guys thank you for watching and good luck with the Devi theme, so I'll see you guys all later.