How To Make A Wordpress Website 2017 - Elementor Page Builder

1. Welcome To Course: Hey, everybody. I just want to go ahead and say thank you for taking my course. You know, you're on your way to becoming a Web designer or just an entrepreneur. Wanted to learn how to master WordPress as a complete beginner or just a regular business owner just wanting to create his own website. Now, I want to talk about what you can learn in this course and also what you can expect from it . Now, I'm actually one of the highest rated instructors on you to me, and I'm also known for my design. Guys, I really stress design as everything. What good is making a website if nobody likes it? Right. So in this course, I'm not just gonna teach you how to master WordPress and also master the helmets or page bowler, but I'm gonna show you how to emphasise design on everything. Now, in this course, you're gonna learn all about WordPress regular how to you use all the functions for WordPress and also how to use the elements or page builder, which is by far the number one free page builder right now on the market. So we'll talk about how to make it about us Page Services Page. We'll talk more about pre made layouts and what primi allows actually are. It's basically a page that has already done for you. Now this page bowler will do all of the hard work free. It will actually create your own page for you from scratch. You don't need to do anything whatsoever. So this is a paged and this is actually will be given to you for free. You don't have to pay for nothing and they have several free pre made layouts. So if you need help with inspiration and design, don't worry. This page roller has a lot for you. I have also included quizzes in this course and these quizzes are designed to sort of help you think about different styles and also help you achieve different looks for your website . And also we'll talk about the parallax effect. Now this is a very new style that a lot of weapons are doing. So you know, I'm very modern. I teach a lot of modern style trends in my tutorials. I do not like teaching old bad themes. If you want a bad theme if you want only website. This is not that the Taurel for you, So I'm just letting you know. Right now you're going to making something look really professional and also very easy. This stuff is so easy to learn, guys, it really, truly is. So in this course, you guys can expect to learn all this. The only thing that I will not be covering I will not be covering e commerce. I will cover that in a separate tutorial. But for now, we're going to learn how to use the page bowler. We will talk about how to master WordPress, how you can build sites for other people or yourself from scratch. So I hope this, you know, to Tora really helps you guys out. There's a lot I'm going to cover. And I really want to stress that by then it's tutorial. You guys will be able to master WordPress, but not just Master Wordpress guys. You know, creating a beautiful sight is everything. There's so many tutorials on the Internet where they're just teaching people garbage. I'm just like, why you teaching them how to make this ugly website? Nobody will go to it. No, they will buy it. Right. So, guys, you are in the right place. Just be consistent with this times. It can be frustrating. I know. Trust me. I have hit so money roads in the blocks in the road, so I know how it goes. So just be consistent with this tutorial. And also, guys watch it all the way before you ask me questions. I feel that a lot of the question people ask me in my past lectures are from people who just don't watch it. They just watch a video for five minutes. They don't watch the rest and then they throw me a bunch of questions. I said, Brother, it's in the It's in the video. You just gotta watch it, you know? So watch the videos, guys rape me. Appropriately, there's anything that I miss or there's anything that you want to talk about. Please feel free to let me know I'm here to help. OK, so let's go ahead now and get started with the course 2. Hosting : alright guys. So the first thing we're going to do is get a hosting and get a domain. Now you will also receive a free domain with this website and you will also receive the highest discount available for Team be hosting, which they have given me so I can give to my students. This company also gives you SST hosting which is currently the fastest hosting available on the market. So let's go ahead and click on Get started now. All right, so we have the starter, the business and the professional. I always recommend the business because with the business you get unlimited websites hosted rather than just one maybe down the road. You want to make more websites? Who knows? I don't know. We'll see what happens. So right year I'm to go to sign up now and go ahead and enter in your domain. So I'm gonna put in I love kylo ren and go to proceed. Let's hope that new Star Wars movie is good. It's called rogue one public. Watch it tomorrow so we'll see how that goes. I've heard great things from its I hope the hype is worth its Alright, Alright, so Congratulations right here. You're going to go ahead and put in your first name. Your last name, All this cool information right here. All right. And then right here. You can pay with a credit card, or you can pay with PayPal already. Now, the purchase information right here. They have actually chose the data center that is closest to us automatically. So we don't need to mess with that. And right here we have period. So we have a month, a month or 12 months now. I always recommend 12 months because the coupon code I'm going to give you is going to give you a bigger discount if you sign up longer. So right here, I'm going to decide to uncheck domain privacy protection. But I actually do recommend this. This basically hide your personal information. If somebody tries to Who is you? So you know, I'll go ahead. Leave it on. So right here under the promo code, you're gonna enter Darryl 626 That's actually my ZIP code. I live in Pasadena, California. So right here, click on apply. And your basic gonna pay only $86 for the entire year. So you get a free domain, and that is the maximum coupon code this website has to offer. And it's actually very, very cheap. So you're gonna have a whole website up for an entire year and free domain. Now, if you don't want domain privacy protection, you can go ahead and uncheck that box and the price will drop by $10. You will be just paying $76.45 or you can do month to month. But remember, this is a 7% discount off the entire amount, so you do month to month, you're not going to save as much. But remember, this company does give refunds, so if for any reason you're not satisfied, they will actually give you a full refund. All right, so once you're done with all this information right here and all this cool stuff right here , you're gonna go ahead and click on check out, and it's actually going to send you to your portal. And I will actually meet you right here. My portal, cause I have hosting with this company too. So I'm gonna go ahead and log in. Alrighty and you might get some pop ups. You know, asking you to buy their s yo or whatever you're, you know, whatever. They're trying to sell its up to you if you want to purchase those or not. But for the meantime, I'm just gonna go ahead and click on, maybe later. This is actually a portal, Beta that they have going on. They're gonna change their portal. So I'm gonna go. Yeah, maybe later already. So we gotta hosting in Vigata domain. All they need to do now is install WordPress, and it's very, very simple to do. So right here, we're just gonna scroll down to R C panel, log in and go ahead and choose your hosting accounts. So right here, I'm gonna go to log in. Alrighty. So welcome to your C panel. This is your C panel, and they've actually made it a lot user friendly, you know, before, it was a bunch of tiny little words and everything. And now they've kind of, you know, they got, you know, more modern, more trendy. It looks kind of good. So all me to do here is we're gonna go ahead and scroll down. Just keep scrolling. Just keep scrolling too. Right here. Where it says WordPress and WordPress is what we're going to use to create our website with . It's actually the most popular one. Actually think it's 35% of all websites on the Internet use WordPress. She's pretty crazy. That is a lot. It's already so all of you to do over here is just click on install now and right here is gonna say to protocol, Just go and leave this standard right here. Go ahead and make sure that you select your domain. So the name that you purchased make sure it's right there. Right here on the directory. Make sure there is nothing there. Okay, I repeat, make sure there is nothing there or are just going to insult your website. Dash WP which is not what we want for your site settings. We can change this later in WordPress. So it's not that big of an issue right here for your admin user. Go ahead and make a user name for yourself, and then also create a password. So, you know, I'm just gonna leave on admin and pass for now and go ahead and put in your email the one that you want, you know, if you do forgot password. Where do you want that email to go, etcetera. And we're gonna scroll down. And also, if you speak different languages, this website will accommodate it. So they have a bunch of different languages you can select. I only speak English, so I'm going to select English, and I'm gonna scroll down here, and I'm going to click on Install. And when I click on this is going to install WordPress onto my domain. Okay, so go ahead and click on install. All right, so it says it takes around, you know, 3 to 5 minutes, but it's actually much quicker than that. There you go. It's done. I was pretty quick. So remember, we have our user name and password, so mine was admin and then passed. Now we need to go ahead and click right here, and this will actually log into our web sites. So I clicked on that. Alrighty and we are logged onto wordpress. Awesome. So we got our hosting. We got our domain and we've installed wordpress. Congratulations, everybody. You are doing amazing. So in the next section we will actually install the theme and we will actually use the page builder. So I'll see you all there. 3. Theme and plugin: All right, guys, Welcome back. So now we're going to install the WordPress theme and we are going to add the page builder . So right here under appearance, go to themes. Now, how WordPress works is basically you install a theme on your website. Now, right here you can click on add new theme and these are all different types of themes. It's basically the structure of your website, how it looks and the feel of it etcetera. Now each of these have different page builders. Ah, lot of them have different styles of customizing, etcetera. So we're gonna actually going to use a very highly rated theme called Generate Press. So right here under the search bar, you can type in, generates press, generates press, and it's gonna be this one right here. And you can click on details in preview and it is very highly rated, you know, 309 reviews all five star. So we're going to be using a very good WordPress theme. So right here under this install button going to click on install, and this is going to install the theme on to our WORDPRESS website. So this is basically a small preview of how it's gonna look. But of course, it's not Look anything like it is. It's gonna look much better now right here. Gonna click on activate. All right. And let's just say you want to, you know, check it out. Check out your website and see how it looks. You can click on visit site right here. And this is our new site. Very boring. Very not pretty. OK, but don't worry, we're going to make it look amazing. So over here under our dashboard. Next we go to plug ins and we're gonna go to add new now a quick overview of plug ins. The best way I can describe plug ins are like APS for the iPhone. It's basically like APS for your website, such as creating a forum such as creating a social media website to click right here on our popular. We're gonna get all sorts of different. I mean, there are millions of plug ins and they all have different features. This right here creates a contact form. This right here improves your optimization on the search engine. This right here, it creates a capture. There are so many and the best way like I said to describe it is they are just APS for your WordPress website, and I could go on and on with with her with bludgeons. But there's over thousands of them right here. You can see there's thousands and there's over 34 pages. So really quickly. All we're going to do is install the page builder and we're going to be using a free page builder and is just hit the market and it's really, really, really good. So going type in L. A mentor. L a mentor so element or and are going to be using this page builder. Now This peso just came out, but it is already hitting blog's. It's already hitting all sorts of websites because of its ease of use. It is so easy to use this page builder so going to click on install now already. So it's installing. And these are also extra plug ins for this page bowler because it's go. It's getting so popular that people are actually creating plug ins just for this plug ins. Oh, it's actually becoming very, very popular as time goes. So here, go to click on activate. All right, congratulations. So we've installed the WordPress theme and we added Elemental, which we are going to use this to install our design our pages now. Like I said, it's totally Dragon dropped. Guys, it is super easy to use this page builder, and I'm gonna show you how to do that in this tutorial. So next, let's go ahead and go to the next section where we are going to create some pages, so I'll see you all there. 4. Creating Pagess: All right, guys, welcome back. So before we start designing the website, we want to go out and change some settings and also create some pages now, right here under settings, we go down to Perma links. Now, this is very important to do on all the road press websites. Now you see all these options we have right here. We want to change the common settings to post name. Now, the reason why we do this is because when you go to a website like Amazon, you know, it doesn't say amazon dot com dash shop rape, not amazon dot com dash 2016-1 to dash, etcetera. So with the post steam does it actually helps optimize your website for searching is like Google and Yahoo. So I don't know if being still around I think being is still around. So yeah, you want to do under post name and right here, click on save changes. Now, another thing I want to point out is you over here to users and just click on users and you're going to see your little profile right there. And you can actually go and make some changes right? here. You know, you can get a little declarative. Which one to use for this tutorial? Kind like midnight. I think it's more clear and the legislates good. And also, if you want to change your password or put in your email, this is where you're going to do it. So right here, this is your email. And also, let's say you want to change your password. So right here you click on generate password, and then you go ahead and just put in whatever you would like and then click on update profile. Okay, so that is basically how you change your password. So we'll click on Update profile now, And we are going to add some pages in So right here under pages. It's going to click on pages, and it comes with a sample page, but we're gonna go ahead and elite that we don't want that. So I'm gonna trash that and we're just going to go right here and add a new page just like , you know, home about. That's exactly what we're doing. So right here, we're gonna go to home. But there are some settings we need to change before we keep going now this the works very good with elemental because of its options with the sidebar layout and the foot or widgets . So right here you want to make sure that it says content. No sidebars. We want to have that selected widgets will go ahead and put maybe two. We will talk about widgets when we're done designing the page. You want to go ahead, make it full with. Because today every website is basically full with I don't think any new website has balked anymore. And also we want to do the the content title. So the continental, for example, We don't want to say home right here on our page. It already says home right here. So we don't want to say it twice, so that's exactly what we're doing. So we're taking the title out. We're making the page full with, and we're not adding any sidebars. Okay, so you need to make sure that those are in place before we design the page. So I'm not gon publish and it is creating the page. There you go. We have our page. It was fully created. If you want to see your page, all you need to do is click on preview changes right here, and it's just going to show you the page. Now, of course, the reason why it looks like this is because we haven't put anything on the Basia. There's nothing there. So that is basically how we designed the home page. So the next section, guys, we're going to start designing the page, so we're gonna use L. A mentor, and I'll see you all there. 5. Home Page 1: Alright, guys, let's go now and start designing our page. So right here, Going click on edit with L a mentor and it's going to open up a page and then from here, we're going to start designing our website. So I'm gonna go refer to this website right here, and we're gonna use this as a reference guy to sort of help us understand how we create this page. So right here, we're going to actually insert a text widget. So right here under our text editor, all need to do is simply go ahead and just take this and then just drag it right there. There it is. So actually right here. I want to actually delete all of this right here, and I want to just put in an image. All right, so I'm gonna click on backspace and then right here under Adam Media, we're gonna add in a picture right here. So right here. Click on select files. Now, in the previous slide before this, you guys were actually instructed to download a package from my dropbox. So go ahead and download all of those images and you can use those as a reference guide so I'm actually going to, you know, I'm actually going to upload all of these right now just to save me some time, and I'm gonna click on open, and then I'm actually going to download all of these. So I'm going to posit video for one seconds while these download. All right, guys, welcome back. So let's go ahead now and enter this little local right here. So we're going to answer the elementary logo, and you might want to put in your logo as well. And I don't have a logo. Don't worry. I will show you how you can get one. Very, very simply So right here. I mean, click on insert into page. Now you guys can see it's a little white, and that's just because we don't have a background yet, But not to worry. We will put in the background. So right there, we answered in the image right there. You guys cannot see it. That is okay. Now right here. Going to click on section. So how this works, guys, is this section is going to actually control the section. The column will control everything in the section. So right here on section we're gonna make this full with. So I want to make this full with now. You guys can see it has actually stretched across the page. Now, let's just say we want to go ahead and add in an image you want to start, you know, have something in the background to make our site look good. So right here under style, go here to classic for background. And now right here you can see image. Now there's also color. There's also a background, overly a border, etcetera. So right here, just click on this image box, and I'm going to go ahead and add in a background image. So we put this image of the horse and click on insert media. All right, so it looks pretty good. So far, it is a little small, but not to worry about it. So after you guys have done that, now we can see the logo right there. Now we can actually see something right. So clicking on this logo right here. Let's just say I want to center this. Let's say I want to move this local around somewhere where I want it to be right here under style. You see what says Alignment going to click on center. There you go. So now the box right there is in the center section. Okay, so we've added in that section and the reason why we can't see the rest of the pages because we haven't put enough content, but we can actually make this full with. So over here under contour section, we have all these other options right here. We have column gap. We have heights, and we have current position now for heights we can select fit to screen and will actually fit this section right here according to our screen. Now. Also, if you want to change the height of it such as men height, we can actually set the exact height that we want. So by dragging it, you can actually get the exact sort of position where you would like it to be for your website. So right there are probably leaving at 950 and Alcoa and close this. All right. So already it looks pretty cool. We have a logo in the middle. We have this beautiful background. Let's go. And Adam Seymour content. So right here, I'm gonna cook on these little these little nine squares, and I basically referred us back to our widgets. So these air basically things that we just drag and drop guys onto our page and helps us design something. So right here, under heading, I'm gonna go ahead and grab that, and I'm gonna put it right below there. Now you can see right here. We have text right there. So Siart says this is a heading elements. Just go ahead and put whatever you like. So welcome to this tutorial. Now, you can also change the size. So right here under size, we can select small. You can select medium, we can select large, extra large or extra extra large. I'm gonna leave it at extra large and right here are the alignments. I want to put s centre as well. So now you can see that the text now is centered. So going over here to style, we can change the text color. We can change the font. We can change all sorts of stuff. So right here on our topography being click on this and right here we have size. So right here you can actually control the exact size you want the page. I'm sorry, the text to look like, so I'll just go ahead and leave it at maybe 60 pixels. Like or care. Or you could just do this. I'm just gonna go and do this. There you go. 60. And for the text color, I want it white. So right here I can click on white. Now, you can also get different effects. So let's say you want it blew. Now let's say you want to reduce the transparency. So right here this second bar is the transparency bar. So if I take this and I drag it, you're going to see the letters sort of fade away because it's becoming more and more transparent. Now, you could do this for any single color. And this bar here controls the darkness of the color. So I want it more read or don't want it Lasts, Read more, read less. Read This right here will reduce the transparency, etcetera. So I don't want a white. I want to keep it simple. I won't leave that white. Okay, Now also, you can do other things. So for example, we want to change the transformation. We can have this all uppercase we can have all lower case or all capitalized. Now, I don't like to do this because this doesn't you know, I'd rather just do it myself. You know, I don't want them to say all of them. Upper case. I don't like that. If I wanted a certain way, I will do it. Right. So right here we have family. Now, this is the font. So it kind of font you guys want for your text? They have hundreds of fonts, usually out to recommend Google easy fonts. But this plug in, I think has enough funds for you. So, like I said, we could just grab anything. See, you're here. Which which it's ugly Fund. That is a ugly font. That was pretty cool. You know, I was cute, but one that I really stick to is Roboto. There's different kinds of our bottle. I think just roboto regular is good or bottle condenses, actually, pretty good too. But I'm just gonna do roboto, okay. And also the wait. So this walks to control the size of the fonts. So for example, but 300 you can see that is now skinnier, so you can go ahead and change the weights. Or you can make it bold for this style right here. We can have a normal italicized or there, that one right there. I think it's a bleak. So you know, a Talic Republican. Leave it as defaults for here. Line height. We'll talk a little bit more about line high and line spacing. Vice basing basically just makes space in between the letters. So, for example, right here is gonna go ahead and say just like that. Okay, so if you want line spacing, you could do that. Now, lying height is actually good for a bunch of text. So I'll talk about that in the next section and also advance. We'll talk more about margin and patting a little bit later, but I also want to talk about entrance animation. So right here. If you click on this, we can actually go to, you know, bouncing in and left. We can change the animation, So if somebody visits, the page is going to look like this, and you guys can also do this for your image. You can do this for your icon. You can do this for any single widget, so here I'll just go ahead and say, What about rolling? That's cool. I like it. That might do it. Or light speed. All right. We'll leave it at light speed. Actually, no, no, no. We're doing rolling. I like that one little bit better. Okay? And right here we will leave the margin and patting. We'll talk a little bit more about margin and patting just a little bit later. And for background color, we can go ahead and change the backup. But I don't recommend doing this because this is actually going to change the background color for this specific section, which I do not recommend. But just for tutorial sake, I will show you what it looks like. So classic we can go ahead and change the color right here. So you see how it's changing the color of the background color. Now, remember, it's only gonna do it for this specific section. Okay? So I don't recommend it, but some people love it, you know? So we would like the way that looks. I do not. But just for total purposes, I'm gonna go ahead and just clear that we don't want that. All right, So now let's go ahead and insert this other text widget right here. All right, so going back up here, click on that and go to text editor. And also gonna do guys is just take this text editor and just drag it under. Now, you see where that little line appears. That's where the text is going to show up. So I'm gonna go ahead and drop it. And there you go. We have text, and it's all right here. Now I'm gonna go to my famous website. This is a secret website that I go to Lots. Don't tell anybody about it. It's dummy text, and it's just basically dummy text. And it's just text to just fill in the page to make it kind of look finished. You can say so. I'm gonna go ahead and copy this and then go back here and I'm gonna go ahead and just backspace this and paste this in there. All right? Now, over here, under style. We're gonna align it, and we're going to add some text color to it. All right, now, I bet you're wondering, Darryl. I don't want it to stretch across the page like that. It doesn't look good and I totally agree. So we're gonna go ahead and change that. But first, let's go ahead and keep talking about some of the settings that we can change it under. So under the content, we have it right there under the style. We can click on topography right here. And, you know, we can go ahead and change the size. We can change the weights. All the same options that we had remember, this is going to be very consistent with a lot of the modules because a lot of the modules will work the same, and they will look the same for a lot of different types. So if you come across like when we talk about the icon widget, it's gonna look very similar to this. So once you sort of learn it for one widget, you kind of learn it for all widgets. And these are very self explanatory. I really don't know how else to tell you how to change the color, right? Like that's basically how you do it, you know, and over here under under advanced, same thing. We can have some margin settings right here. We can change the march. The I'm sorry. The interest animation, etcetera. Just like that. Okay, so that looks pretty pretty cool. 6. HomePage 2: So let's go ahead and put the text in this center. Now, there's two ways to do this. I'm gonna show you both ways right here under this section, right here. Go and click on section and right here, right here. It says content with we can make this box. So by doing this, we're sort of boxing in the text. You see how I did it? So now the text is in this little section right here. Now there is another way can do that by changing the padding for that section. So I'm going to go over here and take us back to full with I'm gonna click on this little text module and going to go to advanced now under padding right here. We're gonna make sure that this is unchecked and we want to make space to the left and to the right. So right here we can click on maybe like we'll put 500. Now, you guys can see that the padding right here is 500 pixels and always needed to that for the left side. So left 500 or, you know, wherever you're trying to position it. So I'll put maybe 600 and then this one can be, you know, 600 by 500 or whatever you trying to accomplish. That is another way you can basically control where you want the Texas specifically be. So that's basically where patting comes in a play. But we will find better reasons for patting a little bit later when we talk about, um, icons and backgrounds, etcetera. So for now, I'm gonna go and click on section, and we're just going to go to the, um what are the content section right here? And I was going to get boxed just like that. I think this is much cleaner. It looks easier. And this is the preferred. Now, let's go ahead and adding a button. So right here, we're going to take this little button icon and just group trying to get right under there . And there you go. We have a button. So we in a basically position this and I love this thing. Alignment centered looks perfect. Now, right here, we could have types such as info. Now all of this really does is change the color. This is like a short cut. So I hear success. They're basically telling you like secrets like these colors represent, you know, danger or etcetera. And you know it's proven. You know, a lot of people look at certain colors on the website like red, you know, already get away from it. Don't click on that website. That's basically what they've done. Now you We contains the text right here. So I'm gonna do contact us and link. So where do you want this link to go? So remember when doing this always start out with a CTP So a CPP zero wilson dot com And what size do you want this? Well, I want it medium. I want it large or want extra large. I'm just gonna go and leave it as a medium for now. And over here under style. Oh, I'm sorry for Icon. We can select a specific icon. And guys, they have hundreds of icons we can choose from. So, for example, let's just say I put in something like this Gears. You're going to see the gears pop up right next to the icon. And also we can change the icon spacing as well. You see how the icon is away from the text We can change that. Now. We can also decide if you want this before or after. So now the gear is after the text, or we can have it before. Okay, Now, I'm gonna probably put something like this. G What is that? G d? That looks pretty cool. We'll leave that. That's good. I like it. So here will go dis style. And we can change the text color. So, for example, if you want change the text color, this is where you would want to do it, okay? And butts and hover over. So when somebody hovers over the button, what do you want to show? So let's say, for example, I want pink text or What's that? Yeah, well, do something really obvious, like this pink text. And then we will actually have the background color to be green. So remember when I hover over this button, the background color is gonna change to green, and the text is now pink. You see that? So you want that look when somebody hovers over it? That is how you do it. Okay. And of course, right here we can change the button so really quickly about button radius. I will talk about that. But right here you contains the button background color. You can also change the fonts Now, Remember earlier how we talked about the family, the weight, all this etcetera. This is the same exact options for the text module guys. So from here on, out from the rest of the tutorial, I'm not really gonna cover all these again because at this point is very redundant to such a size, etcetera. So, you know, by now, hopefully you understand what this all means. Such as the fonts, the weights, the transformation and the style. Okay. And also the line heights and line spacing. Okay, so let's go down over here to the border type. Now we can have it as a solid. We can have it as a double, or we can have it as dotted. Okay, Now what that is is the border color on the outline. So right here, we'll put like a with will, put like five. You see how I put a with now it's dotted now is doubled. Now it's dashed, etcetera. So I'm gonna leave it as solid, like a solid one right there. And also the button radius right here So the bigger you have this, the more round it's going to be. So let's put this at 100. You see how it's now rounded at 100 but it's just a put 50. It is somewhat lighter, you know, but that is basically what the border radius does. So if you wanted to have, like a radius around these little icons, that is what it's four, okay, and also the text padding I wouldn't recommend doing. That's because it does look a little strange, but you can have the padding away from that. So maybe, you know there's always a use for something, guys. Maybe you can have three giant boxes. You know, there's always a specific use for each option. It's just what you wanted to be all right. And, of course, the bus that hover over. And also we can have an animation for that. You know you can have an animation for hover over so we can have like, a heartbeat right there or etcetera and under advanced right here is the margin. So, for example, let's say I want to move this button right? The say I wanna ask 500. Let's say I want it at, You know, I want the top around, like, you know, uh, something like this right here. We'll just do the top as 100. So basically, what it's doing is pushing a margin of 100 pixels from the button from the top. So that is what the margin basically does. And also the padding remember patting his just space. Okay, so right here, I want to create some space. I'll put 300 pixels, and it's gonna create 300 pixels of space right here. Okay. And also right here, the background border color. We can change the radius. Be contains a background. You can actually have a background color for this. Right here. So you can have a background image for your button or you can have. Like I said, this is the same options as before. So right here on her box shadow. I don't think box, it'll work for this section. So what a box shadow does. Guys, it creates this shadow over this section, but we will be using this when we talk more about icons. So for this section, it's not really good to show you There are a lot of good reasons to use the box shadow. It is a really, really cool feature. So other than that, guys, that is basically how we create our home page. We've basically created the logo, the text, a little bit of extra texts and the button. So now we're actually gonna move down right here, and we're going to create this section right here, so I'll talk more about, you know, more text. I'll talk about dividers and we will talk about the image model in the next section, so I will see you all there. 7. Images And Video: All right, guys, Welcome back. So we're going to add in a new section right here. So we're actually going to use some different widgets. So right here first that's going to put in our title. So I'm gonna grab this title and just put in this box right here. So here, I'm gonna put welcome to welcome to this tutorial, and I'm going to center this. And for the size, of course, we can put the size medium. We can put it large. I want an extra large right here. Okay. Now, for style, I want to change the text color to maybe something like black, and I kind of want to push it down a little bit. You know, this section right here. I want a little bit of space right here. So let's go and do that. Are the advance section right here under the top? Right here. Click on this thing right here. So what this does? Basically, if you leave it linked, it's going to apply it to all sections. So it's going to put bottom right here to the left and to the right. But I only want it to the top right here. so I don't really want that. So right here, backspace. This click on this little link right here. And I only wanted for the top, so that's a really good reason on why you want to use the margin. I know on the home page, there wasn't a lot of good uses for it. But as this editorial goes, guys, I'm going to give you good scenarios for everything. Okay, so I have the title right here. Now I want to add in a divider. I want to add in some style, so right here under divider. I want to take this and I want to just drag it under this right here, okay? And right here, this is basically creating space. Now we can make a lot of space or we can make a little bit of space, but I want to just use this for design. I don't really care about the gap right here or what it can do. I want to just use it for the design, so I'm actually going to reduce the gap all the way, and I want to make this centered. So now it's centered right here, and I want to reduce the with. So you see how the line is sort of reducing as well. So I'm going to basically make it just like this. So this is basically it's just creating, designed for a website. That's all I really want this to do. And right here begin change. It is dotted. We can change it as stashed, etcetera. But for now, I just won't leave it at that. And also the weight I can make this bigger. And also I can change the color, etcetera. OK, so that is what the divider is basically in a nutshell. So next I want to add in a new section right here. I want to add in some more techs and I also want added a widget. So right here, I'm gonna click on this little icon and we're gonna go to text editor and I wanna make a new section right here. So right here, I'm gonna put something like, um, I'll go ahead and put in some dummy text already, and I was gonna go and pace that in and for the style, I want it centered. So now you guys can see the text is centered and it doesn't look good. And then right here, we can actually do something else. So instead of creating a new section, we can actually insert another column. All right, so right here, under this little, little icons, we can just take this right here and then just drag it right here. So now you see how we've created columns within this section. You see that? Now? I only want one. I only want to put one image, so we need a delete one. Now. When doing this, you have to be very careful. Do not go to section and go to delete, because it will delete everything. Okay. You want to go to column right here and click on delete. Okay. So when I click on remove, Yes. Now we only have one column. So here, I want to put it in the image, and you can put in any image you would like, but right here, I'm gonna go to image right here, and then just drag this down, and right here, we're gonna go ahead and put in an image. So right here, I'm gonna click on the image and simply just grab an image that I've uploaded. So right here You know, there's a lot of when we can use. We can use these phones, you know, we can use everything. That's basically why I gave you all access to all of these right here. But I'm just gonna go ahead and use this one right here, and I'm a go to answer media. And there you go. So we have, you know, this little section talking about it, and we have this big, beautiful image, okay? And of course, we can change the image size to medium we can change it to, you know, large, full custom, whatever you would like. But I'll go ahead and leave it as large. We can also change the alignments. Now, the reason why it doesn't stretch across the page like before is because it's in this certain section. So it can't go without it. Can't go outside of it. You understand what I'm saying? So I'm gonna leave it as centered. Now you see what has linked to we can make a custom mural. So what that means is let's say somebody wants to click on this image. Where do you want to take them? We can put in a link right here. And if someone clicks on this image, it will take them there. Okay, so going back over here to none and we can put a caption like image or something like that , but I personally don't recommend doing. That's because I think that's a little old school. But of course, there is always a good reason for everything. But I'm not gonna use it for this and the style we can change the size of it. And the opacity is, well, we can have ah, hover animation for it. So somebody hovers over it, it shrinks. See that Pretty cool. Pretty cool. So probably put something like pull shrink. That's pretty cool. So you can go through some of these options. You know, these are basically a little bit redundant and right here under caption. If you decide to have the caption, of course you can edit the caption as well, but we actually disable the caption right here. We don't have anything right here and the advanced setting, Same thing bla These will not work because it's within this box. So we want to stretch it across the page over here or put a lot of margin. It will not work because it is one within this box. Okay, so going back over here, just like this section. Guys, we basically created this simple section. Really, really simple, Really easy. Now, let's go ahead and add in this bar right here. Let's go ahead and add in this really cool bar. So going back over here, we're gonna go and click on add a new section. Now there's different styles. And when we talk about the services, we will be using most of these. Okay, so for now, we're just going to use this one right here and right here under the sill. These little icons were just gonna grab the heading widget. And right here we can preserve that. Something like, um, you know, this is our This is our recent work, and I want to center this now. The size I'm gonna put it as large. Uh, maybe extra large. Now, also, I want to stretch this across the page. I don't want it to, you know, have this column section. So right here under section I'm gonna go over here toe for with all right and under content position I wanted in the middle, so What that does is basically you see how we have the outline right here, how the content is now in the middle of this section. That is what the content position does. But let's say I want to add in a background color to this. Let's create like a divider, sort of Ah ah, creative divider. So right here under the style button, we go to classic and we can change color. And this he wanted black. So now you can see that we have this section right here where it is now black, and we will talk more about this other one right here, which is a background video. Let's say, for example, you want a background video, I will talk about that right now in the next section. But for here, we're just going to use this specific section right here. Okay, so that's basically it. And I also want to add in a divider underneath that, so I kind of want to carry this little divider everywhere I go on the website, I kind of want to make it a little bit repetitive to sort of bring the style and the core to the website. So I'm actually going to go over here and put this as white. Now, over here under the icons, I want to grab the divider, and I'm just gonna go ahead and just drag it under. All right? So you see the divider right here. I'm gonna align this to the center. We're not gonna put any gap. And also, I want toe increase the weight a little bit, okay? And for solid relieve, it is there and then for color. I want to leave it as white. And for advanced. We can go ahead and probably leave all this the same. But I want to change the with right here. So with we're gonna make it a little bit closer like that for color, we're gonna go ahead and leave it as whites. All right, so that looks pretty cool. Looks good already. So the next section I also want to introduce you all to videos. So let's just say you want a video background. I know half you guys out there are probably super excited about videos. We can have this section as a video. So right here under section, we can go to advanced. Now. I think it's under style. It's under style. And this will actually play any YouTube video that you have. So I'm gonna go to my channel right here. I'm going to my channel right here under YouTube already. And I'm just gonna go ahead and grab in something like, uh, well, describing this, uh, this will Commerce product. Vintage tutorial? Actually, no. I think a better thing to do is go to four K. Fourcade Nature. That's actually a really good one to choose. So I'm gonna grab maybe something like this right here. I'm gonna copy this link. Oh, I hate this guy. He's so annoying, so annoying. You just like celebrity star that claims you. Is everything okay? So right here under the video discord and click on paste. All right, Now you see how the video starting to play in the background. So let's actually make this a little bit bigger. So right here under the section. All right, here. We can actually control the size of this. So under the advanced, let's just say we wanted, as you know, 500 by 500. So now you can see that we have this beautiful video right here, and it's playing So this is a really cool way. I'm gonna close these right here. It's only showing those because of the size of the video and that guy at annotations, so we can actually make a little bit smaller, You know, of 200. So you want something like this right here? This is how you would achieve the look. And like I said, this will play in the background. It looks really good. It looks really, really professional. But for now, I'm just gonna go ahead and leave it as a classic color. And I'm just gonna change the height back to, uh, we're gonna leave as zero right here. Okay? All right. So that was that section a little bit about videos a little bit about, um, you know, the divider and everything. Remember any video you want playing in the background? Always need to do is go to section of any section and just go to style and background video , and you can simply just pace it in there and it will play any video you want in the background of wherever you want it to be. Okay, so that's it for the section guys. Let's go ahead. and talk about how we make some really beautiful images and how we can reduce the gapping just like we did on this website right here. So I will see you all there. 8. Icons and Counters: All right, guys, Welcome back. So let's go in and add in some images now and have a really cool effect, like we did earlier. So over here under the ah, add new section. We want to click on this, and we want to actually set it to this four row right here. So we have four spaces for images. Okay, Now, let's insert the images. So right here, under image. I'm just gonna go and drag this. Choose the image right here, and I'm gonna go and select this one right here also like this one. Insert a media and then right here, I'll just go ahead and click on this. Adding another one answered the image, the sites for these images, By the way, guys are 5 70 by 5 70 But since you guys Condell it ease, you guys can probably already see for yourself. Sorry. Here in her image. Just drag it over here. Choose the image and this use this one right here. And then for the last one, we're gonna take this image, drag it over, choose the image, and I'll just go ahead and select this one right here. All right, so we have four images now, so we need to basically make this full with, and we need to reduce the gapping, so let's do that. So right here under section, we're gonna take this section right here, and we're gonna make this full with. All right, so now we have the full with section right here. So now it's full with. Now I hear or see his column gaps. Now you can choose the gap he would like. We can have a wider gap. We can have a wide gap, can have extended. We're gonna have a very narrow gap, or we can have no gap whatsoever. So now you can see the images are all lined up really good. And at this point, there is no need for us to do anything else. So do you want this? Look, this is how you can achieve it. Now I want to basically take this section right here, and I want to close it behind this section. Now there's a shortcut to do this. Guys don't have to make a whole new section again. We can actually duplicate Rose. So, for example, I'll just give you guys a quick little preview, right? here under section I can click on these little to duplicate Rose, and it's going to duplicate the entire section for us. But I don't want to do that just yet, at least not for this section. So for this section, I'm a click on this and I'm gonna delete this whole section right here. Now this right here, I want to take this so I'm not actually going to go to section and remember, guys, it must be section Don't do the column. If you do the column, it's just going to do everything inside of it. And we want to just basically take the entire section. So section I want to duplicate this. Now, I'm actually going to take this section right here, So if I hover over it how it's his drag section. I want to take this and just drag it under. Now you see where the teal bar is right there. Just drop it. Perfect. So here, up with something like this page, this page builder is simply amazing, and I'll make it a little bit smaller. And there you go. So now we have this section, we have the images. It was very simple to do. Obviously. Right? It wasn't hard at all. Now, let's go ahead and do the next section right here. We're actually gonna add in. Some cool icons were actually gonna add in the icon boxes. So over here, guys, we're going to click on out of new section. We're just gonna grab for now. You can choose whatever you want, but I'm just gonna go ahead and grab in four, and we're going to go up here and I'm gonna go to the icon box. So the icon box. So right here we can actually talk about the icon. So we'll say, you know, mobile responsive. We can put in some text right here. I hope that was the YouTube video. All right, I will grab some of this text right here and just go and paste it in there. Now, if you want this toe link somewhere when somebody clicks on it, you can go ahead and put in your your You are all right here. But for now, I'm not. I'm not gonna do that. Believe it. Blink. And here we can put it to the left. But to the rights. Oregon put it for the top Now, I bet you guys are wondering what this title HTML tag is. This is more for Seo purposes, and I'm not gonna get into, you know. H five h three tags. Age four tags. This tutorial. I do have a yo sectorial on YouTube. You guys were interested in that? You guys can check it out. But for this, I believe it as h three now for review. We can have it stacked. We can have it framed. And we changed the size of the circle. Maybe wanted box. Something like that. So right here we can actually change the iconic self. So I put mobile responsive, So I'm gonna type in phone. So phone right here, mobile phone. And, you know, I don't like the way that looks. Guys, I'm going to like that. I like I like you. And it's simple. Like it's simple. So for style, the primary color, um, you know, right now, I think for the primary color, we can probably leave. It s I mean, like like black. So you see how the phone is changing black And also we contains the icon spacing. We make the icon bigger. We can make the icon. We can rotate the icon and you know we can add spacing now with the spacing is is that it creates spacing from the icon from the text. All right, now the icon hover. Same thing if they hover over it. Do you want to have certain animations? And also, what color do you want? If somebody hovers over the icon and for contents, we can change the content. You can change the content title. So here we put black and we know these are a little bit more repetitive. You can change the font of the title. And then for the description that is this section right here. So you can change that. You know the color for the description. And also you can change the, um, font Ford as well. All right, so that's basically the icon, guys. Very self explanatory. Very simple. But, you know, I I don't want I don't want to redo that all over again. That was a lot of work, right? So right here we can click on just duplicate, and then we'll simply just drag it over here, duplicate, drag it over here and duplicate and just drag it over here Now, let's just say you want to duplicate this entire section all over again. Let's say you want right here. We have four other sections right here. So right here. Just simply click on section and just duplicate it. There you go. Now also, it's a little bit too close to the top right here. You guys see that? How These phones were kind of too close to the top. So let's add in some padding. So right here under section, we're gonna go to advanced and right here under the margin or under the padding will put 100. Now, make sure that this is unchecked. We don't want to link it together. I'll put 100 right here and remember like, let's say, for example, you can put a title right here. You know, you can put something else I chose not to, but if you would want, you can go ahead and just simply adding a title. But I think this section right here sort of emphasizes this section right here. So that's basically guys the icons. And also, if you want to make this full with, you can go to section under the contents section. You could make it full with. And you can also decide if you don't want any gaps. You don't want any gaps. You know, something that looks us like that's but that looks a little bit messed up. We don't want to do that yet, so I'm gonna leave it as boxed. I think the box that looks pretty clean, it looks simple. Now, I'm not gonna go through each and every one of these guys because it's very self explanatory on you know what you want to choose? You can, you know, change the position of the icon, whatever you would like, right. So I'm not gonna, you know, go too far in on every icon because, you know, one works for all. OK, so that is a quick run down of the icons. Next, let's go ahead and added the parallax effect with the buttons. So right here, we're going to actually go toe at an intersection and really click on this four column road right here. Okay, so we have this section. Now, let's go ahead and add in some numbers. So scrolling down right here, we're actually gonna have to find the counter this year. Says counter first and dragging up. Now, let's just say I wants to, you know, put the starting number 21 and and 2 100 It will start at one and then to 100 Oregon start at 50 whatever you would like. So right now, I'm just gonna say, OK, ended $100 or entered 100 right now. Right here. Under the animation duration, you can choose how fast you want it to be. But two seconds is pretty good. Anything longer than that, people might, you know, say OK. It's kind of not cool, you know? So right here will put number of for coffee cups, coffee cups. Now for style, we can change the text. Now I'm gonna leave it as white. I know you can't see it, but don't worry. We're going to put a background here that will actually make this visible now on their topography. Same thing I'm public. Believe it as whites. But I might want to make it a little bit bigger. It here we can change the size of it. And for the title right here. I want the title as whites case. Remember, this is the title and the topography. Let me look. Click away. This section right here will change the title. Okay, so going to advance We don't really need to anything there. But right here, under section going click on section I want to make this fool with and I want to add in a background so right here under content we're gonna make this section full with you can see it's full with now and I want a coda style and I want to add in a background. So over here, under classic, we're going to click on Image. And I'm just like one of these right here, just like this one right here. Okay, Now position. So this walks to control the position of the picture where you want it to be, but generally leave it as none. I kind of want just to cover an emphasis of all of it. The attachments we're gonna put it as fixed now with the fixed option does is that it creates the parallax effect. OK, repeats you never want. Repeat now what that does. Basically, it repeats the image like 45 times. It's really old and ugly. And if you have like, uh, I don't know. I don't know who does that anymore. I really don't know who were pizza images anymore. I just think it looks crazy. So I'm gonna put it as none. Now for size, we can put cover we can put, contain, or we can put auto etcetera. Now, over here, under the back on overlay, we can choose to have a background overlay on this image, but really quickly for the layout. I want to basically control the size of this right here. I can't really show you everything because I need to increase the height. So right here, under height, we're gonna put men screen. And how big do you want this size? So maybe we're gonna put it at 500. All right, now, I'm gonna click on the column again, and right here, you know, we can add in ah bok shadow to it. You see all the box shadow now emphasizes over that? That looks pretty cool. You know, it's it's a good reason Toe added it. You know? So the color we can change the color of that. You see, How has that background color we can control? Control the the spread right here or we can meet horizontal. We can make it vertical, etcetera. All right, for now, I'm gonna go and leave that blank, and we can change the spread of that color as well, you know? So you see how we have that animation over the the box right there. Do you want that? Go for it. Okay. But right now, I'm gonna go to call him right here, and we're actually going to duplicate this row. So I want to duplicate this section right here. Now, you see, How did that how? We just created a whole new section and it just meekly it basically made 1/5 column. So in order to do that, you have to click on this section right here. If you click on the column section and duplicate it, it's actually just gonna keep creating more roads, and it's gonna keep pushing it. Okay, so right here you want click on this section and just drag it this section and drag it and then this section for the column. I want to delete this. Make sure you do not click section the section. If you go to over here deleted, it will delete your entire section. I have done that so many times. So it was so frustrating when I first started. Like, this is stupid. Paige Miller. This doesn't work, you know. So right here, go to column and close it right there. Okay, so there you go. We have that beautiful section. It looks really good. Now, if I go ahead and I scroll, you see how we have that parallax effect now? So that's basically how we create the parallax effect. You must put it as fixed. All right? A repeat. You must put it as fixed and not scroll to achieve the parallax effect. But don't worry, We will talk a little bit more about Parallax when we go to this section on the page. I'm gonna close this right here. Actually, I'll go to my Wilson. I want to show you guys a quick little sample of I've actually made a fully functional parallax page. And we will talk more about this. How to achieve this? Look when we get to that part of the tutorial, okay? And I put in a video right here, of course, but you know, we'll talk more about how you can have a fully functional parallax effect with really cool things like that. Okay, so for now, guys, that's it for this section. That's it for the Parallax Effect and also the number counters. Like I said, you can change us under the style section. The text color, everything is here. So I don't want to talk about, you know, this section again because we've already dogged about it. Right? So let's go ahead on to the next section where we will talk about what are you talking about? The next section. You know, guys, I'm not scripted. When I do these tutorials, I just doing, You know, we will be talking about this section right here. We have this mobile phone and we will introduce the call to action, so I'll see you all there. 9. Phone And Carousel : All right, guys, welcome back. So let's go and added on the phone right here, and we'll actually add in some text along with a call to action. So the first thing we need to do is make a two column rope. So over here, under add new section will select two. And right here we're gonna grab an image and I will choose the image. And I'm gonna grab these phones right here and enter into media. Now, Guys, one thing I wants to tell you is when you answer images, make sure it's a PNG file. The PNG file will actually have that transparent background. So if you have a different color background, it won't matter because it will blend in perfectly. OK, so if you're grabbing JPEG files, the Jay Peak files will have the white in the background, and it will not look that. Okay, so make sure it's a PNG file. Okay, so I put in the image. Now let's go ahead and add in some text over here. So right here, I'm gonna grab the heading and right here. Oh, puts this tutorial is simple. Another thing I want to talk about is when you do, You know, put it in text on your website. Capitalizing the first word of every sorry first letter of every word is ideal. And a lot of people do that because it just looks good. And that's basically what everybody else does. So I want to basically make this into centered or actually, no, I want to put this to the left. I want to close to the phones and right here in your style. I'm gonna change this text to Black. Now, under the advanced section, I want to add in a margin. So right here, I'm gonna click on the little linked together and I'm gonna add in a margin. So you see now how it space apart. So that's basically a good reason why we can use the margin. Now, there's two ways to do this section. We can actually just over here, we can drag the text editor and right here, Or we can go ahead and grab columns and we can put the column there instead. So there's two ways to do that. Now what the columns does. Like I said, it just basically creates additional columns within the section. But I don't want to do that. So I'm gonna click on X and click on delete. But that's just another way to do it. I'm just showing you there's other ways to do it. Now, under text editor, I'm just gonna grab that. And you see how the blue line is right there. It's gonna drop it, and I'm gonna grab my famous dummy text, and I'm simply just going to put it in right there. Well, uh, and of course, being changed, the style contained the text color. We could make it a line, the centered. But right now we probably want to do either justified or left justified. Also looks good, but I want to keep it to the left, and I want to add in a call to action. So this button so we just drag it down, put it right there. Now I probably want to change the background color. You know, it doesn't look good like that. So under style, we can change the but the text color to whites and the background color to maybe something like black just like that. Perfect. That is perfect. Now I want to introduce you all to a new widget that we haven't been using. And that is the It is called the Image Carousel. Yeah, the image carousel. We were going to use this right now. Okay, So I'm gonna grab this and simply just add it in the news section. Now, what images do you want? Well, we need added or some few images. I want ad in this one. I want to add in this one. I want ad in this one, and I want to add in something like this right here, too. And I'm gonna go to credit gallery. You can give these names, but for this I'm not going to give him names. I'll show you why. I think it's good just like that. And I'm gonna go to insert a gallery. Now you're gonna see that the images air there, so the images air there and people can scroll through it and check it out. But let's go ahead and do a little bit more control. You know how many slides do you want to show? So for example, if you really want to to show Onley tour showing fuel, you won't want to show you can have only one to show. But I want maybe around three. Now it's sliced the scroll. You know, we can leave that as probably like no one were basically each. Only one will scroll, or you can have two slides out. Rules will scroll, etcetera. So image stretch. You want to stretch this, we can stretch it. I don't like the way it looks, because it does look a little pixelated. So right here, I'm gonna do no navigation. We can have it as arrows and dots. Now, the reason why you can't see the arrows is because they're white and we will change that in just a second. But we could have arrows and dots. We cannot just arrows. We can have dots, but I will leave it as a roan. Dots linked to we can make this link to a specific section. So let's say these are your partners. You can click on custom your l and if somebody clicks on these, it will take them to that. Websites. All right. Going to none. Let's go to additional. So pulse over hover where basically, it will put pulse over the hover the auto play. So do you want these to continually keep scrolling like that if you want that, you can leave it as yes. Now, Auto play speed. So it says 5000. Now, that's not 5000 seconds. It's 5000 milliseconds. So M s. So let's say you put it at 2000. It's gonna scroll a lot faster if we do that. So you see, it's gonna wait around two seconds. One to boom. Okay, it's supposed to go, but yeah, it's probably because we're on the page builder, but you can reduce it as well to like 1000 now. Infinite loop. Do you want us to keep going? Do you want it just to keep going? If you want that, go ahead and put yes, the animation speed. So how fast you wanted to enemy like like you see right now, How has that animation effect do you want it to be faster? You can put something like 1000. We're now it is a little bit slower or even do something like 100 where it's gonna go super fast. See that super fast? But for now, I'll just leave it at, I think, 500 to 300 and then direction. Obviously left or right, we're going? Leave it at left now for style. Now for the aero position. First off, let's change the arrow color so we can see them. I want to take him to black so you can see the arrows right here. Now for the aero position. Do you want them inside? Or you want them outside the box so outside they will be outside of the box. Inside, there will be inside. And of course, the dots You can change. You want them inside or outside. You can make the dots bigger or you can make them smaller. And you can also change the dots color. Now for image, you can choose to have it. As you know, custom. We can have custom spacing between the images. You can make these a little bit closer to each other or farther apart for the border type. We can choose to have it as doubled. We can have it as dotted, can have it as dashed. And we can change the with of those dots if you would like. And we can also change the color of those specific dots. Okay. But I don't want to get into that too much because that's just time consuming. And SS two core and decoration, I think seem like this is pretty standard. I think it looks pretty good. And of course, for the advanced we can change the margin. We can change the padding. Maybe you want to push this down a little bit or push it to the right or pushes to the top , etcetera. And with everything we can have entrance animation. So you see how we have the entrance animation. Where? What? It comes up like that. So for every setting, we can have animation. Okay, keep that in mind, because that's for every single module that we use. Okay, so that is basically this section, guys, that was basically the phone and these fighter session. Ah, the next session. We're actually going to go to the next page, or it is going to talk about the about us section. So I will see you all there 10. Theme Customizer: Alright guys, let's take a quick overview of our website. So look at our website right here. This is our landing page. You guys can see it's already looking beautiful. We've got a really, really good job at creating this page. But there are some things that I wants to change and also mentioned before we go on to the about US section Now right here is our widget section And don't worry, we will talk about widgets and footer and also at the end we will get a bit more advanced and talk about how you can create your own footer with the page builder. But really quickly, let's go ahead and talk about the theme customizer and also create all of the pages that we need. So right here under add new, we could go to page and you want to create the about us page So right here to go to about and right here. Remember, we want sidebar. I'm sorry. One content with no sidebar for the widgets will just go and put to for now. You want full with content and we want to go ahead and disable the content title and going to click on publish and we'll go to add new again and we'll add in the services page and same thing right here. Content. No sidebar to full with. Disable the content. I'll publish that and we'll go to add new again and then we'll go to Parallax and then we will do content. No sidebar to widgets full with, and you know we'll add a little to put that in. This is basically creating all the pages that we need, and then we'll do one more, which is the Contact US page and then right here. Content. No sidebars. Two widgets full with content and disable the content title and I'll publish that. Now let's talk about the theme customizer. So if you want to view your pages, just click on all pages right here and we have the about the contact, the home, the parallax and the service is okay, but we need to make some changes right now. If you go to the website, it's gonna look like this right here. And that's because we need to set the home page as static. So right here under customize ready, go down to static front page. Now, right here. It's is a static page. We need to cite the front page as our home page. Alrighty and we'll click on save and publish. Okay. And also we will talk more about the blawg a little bit later. But this theme does have I'm sorry, this page Miller does have specific sections. Ford Blog's. We might not need to use the block page. It's up to you, but I will talk about the belong features on this page builder. But let's go head back right here and let's say we have a logo. Now if you've invested, you know, in your website, what's $5? You know, with $5 you guys can get a very nice looking logo. And just before this session, we talked about you guys got a mind like you guys saw. Like a little article. There's a Web site called Fiverr dot com, and the fiber dot com is Basically they do everything for $5. I mean, they'll seeing you Happy birthday for $5. These guys will do anything. $5. It's pretty crazy. So just type in logo right here. Now, the link in the description that was an affiliate link. So if you guys do purchase something. I don't even receive a small commission. I think it's like the amount of people like bring. It's a very small commission, but it's that no cost to you. So it just, you know, it just helps me out. So I appreciate that. But right here, you guys can see you know these guys will make you really cool. Logos. Let's go ahead and click on something like still logo design. So logo design and we'll grab some like this right here. So these guys will build you a logo for just $5 guys. And they have some really nice stuff. You know, they really do make some nice logos. And a lot of these guys are based overseas, so it's very cheap for you. So I would recommend getting I got my little go off this websites, so I recommend it. No, let's say you have a logo. Let's upload it. So this is our section right here. First, go to a site identity What you want your website to say, So we can either say, you know, uh, this is gonna be Darryl's Darryl site, and we're predatory ALS you can't spell Now you can choose the Heidi's as well. So on my other page right here, actually disabled both of them. And I just have my logo. You can do that as well. You don't have a logo. You can leave it like that. So let's say you do have a logo. I'm gonna go to select logo. Now, they recommend the size of 3 50 by 70. But I think you could do 3 50 by 90. Now, this part is the length, so you kind of want it bigger. So I think I have my logo. It is. I put my logo somewhere else, but for now, I'll just go ahead and use something like, uh oh, is this one right here? Okay, so this is 3 50 by 80 and it's a PNG file. I can't trust that enough. It must be a PNG file, because if you change the color, it will blend. So here, just go ahead and do that will crop the image. And there you go. Now, let's just say I want to get rid of all this other stuff right here. I can click on hide and also hide. Okay. Now for the site icon. So you see right here how fiber has is green dots out of this website has his gear icon. You want to change that? Just click on select image right here, and all you need to do is just select the image. So right here, I'll just grab this one. I'll select it, but I want to crop it. So you see, right here how we have the picture of this little cool horse, we'll click on crop image. And now, from now on, you see the top left up here. Now, when someone comes to my website, it's going to show that instead Okay. Really cool. Really simple going back over here now. I don't recommend doing any of these. All these right here. I don't recommend because I like the way this looks. But if you want to change, I like the style of this right here. Under your layout, you go to container. You can change. You know the width of this. You can also do you know, one container, etcetera Also over here. Under header. You can make the header full with, or you can have it contained like that. And also you can choose to have this full. And the head alignment you can choose as center something like that. Right there. Okay, So if you want to have those settings, you know, there's some features that you can have. I personally I don't like it too much, but then again, you know, it's your website, so I'm just basically showing you how to style it. So I'm gonna go back over here. Primary navigation. We can change the settings on all of these. So the navigation content, which is this section right here We can have that contained the intern. Allegation Mugabe as full. Or we can change this to, you know, above the header. Whatever you would like thes air. Just basically settings where you can just, you know, decide where you want it to go. Um, I'm probably gonna leave it as you know, below the header navigation alignment, maybe centers. Good. You know, if we have it right here, maybe the centers good and navigation and drop down. If you have a drop down menu, we will talk about drop down menus in just a little bit. Um, it will actually create a, um, a hover icon or a menu item, etcetera. But I don't have any drop down menus right now, so it won't show you anything now for navigation search. We can choose to have that enabled. And what that will do is that will create this little icon, and people can search a website for something specific. OK, going back over here. Sidebars. We're not using sidebars. Maybe for a blocked page. We will. We will talk about the block page a little bit later. And also we have widgets, which we'll talk about widgets a little bit later. And menus. We can actually create a menu right now, So let's go ahead and do that. So right here, going to click on add a menu. We'll do menu one, create the menu, and let's go ahead and add some items. And so add some items. We will create the home blah, blah, blah, and had those in. All right, So now this is our menu right here. So home contact Parallax services and about now, if you want to change the format of this, we can go ahead and, you know, put it over there, or we're gonna put the contact over here, etcetera. Now if you want to create a drop down menu. Also need to do is take this and just simply drag it under that section like that. Okay? And this will create a drop down menu. Now, I will click on primary menu right here and now you see right here how we have this drop down menu. Where has the about? And now this is where the parallax page goes. So you want that effect? You can do that. But for now, I believe that as blink and you know, you can leave that as primary menu or, you know, it's up to you. If not ah, it is our primary menu. That's what we're using. But this theme doesn't like it does create that little button right there. So I don't want that there some to leave it as that and click on save and publish. So you create a menu and you know many zehr Good, because if you want to have that drop down effects, you can do that with the you have to create a menu in order to do that. Okay, Now, for widgets will talk about which it's a little bit later. An additional CSS. This is custom coding all the stuff over here. As far as colors and layouts for a link color, we actually will need to change this we probably won't change is something like whites. So that means like when we create custom links, which will be a little bit later when we talk about the, um What is it? The Custom footer. We will talk about why you want to change the link color. I found that out the hard way because I had a client who was kind of yelling at me, and I didn't know why. And I found out so All right, so that's basically it, guys, that's the theme. Customizer. Ah, lot of these right here, like colors. I wouldn't recommend these because we can change the color and also the topography on the actual page bowler itself. So we don't need to use what the theme customizer is giving us, so we can ignore a lot of this. But for the site identity and also the layout, we might want to change some of those settings and also make sure to change the front page . That is very, very, very important. Okay, so Michael you say them published? Alrighty. And like I said, Guys, goto fiber It's the best place to get your Web to get your logo. I mean, and you know, don't be cheap. Don't try to get a free logo. It's gonna be a nightmare. I mean, it's I've done it and I it I always go back to fiber. I just go back as it's not good. Just go to Fiverr, spend $5 get it. It's good. If not, if you don't have a logo or you don't want one, just use the text is perfectly fine. OK, now that we've created this, I'm a cook on the about page and we are going to create our about us page, so I will see you all there 11. About Us: Alright, guys. So let's go ahead now and do the about us page. So right here, I'm gonna go to edit page on the about us page. Now, if you can't find that you can also go to your pages right here by clicking all pages going to about. And we're going to edit this with L a mentor. And now that you guys are a little bit comfortable, we're gonna go ahead and kind of speed up the process a little bit. We're gonna kind of do this a little bit quickly to make you understand. It's kind of tease your brain. Okay, So right here under heading, I'm gonna go ahead and grab it. And guys, we're just gonna go ahead and make this same exact section. It's really simple. It's really easy. Okay, so over here, I'm gonna go ahead and changes to the about us. I'm gonna put this in the center for the style. I'm gonna change the text color to black. Now, over here, under style. I can change the topography, but I don't want to do that. Now Over here under section, I want to add in a background image So right here under style background type. We're gonna do classic, and we're going to image. Okay, now, right here. I'm going to select the crow. Now, the size of this is 1920 by 4 23 Okay, so I go ahead and answer into media now, going back. You see how it doesn't look good like that? We just need to go to lay out. We're gonna go to height and just simply change the high right here. So 400. That looks good. The column position middle. The content position I wanted in the middle. All right, now, right here. I'm click on the text and we can go to style. And right here on a topography, we can change the size of this text, but all right, now, let's go ahead and add in some more more sections. That section is pretty much finished. Easy going over here. We're gonna go to heading. And I was gonna go ahead and put in some text right here and, you know, right here I puts quick overview just like that. I'll put quick overview, and we're going to make this centered. Now. You want to go ahead and put this You know, we want to drag it down a little bit, but we also want to change the color. So the text color. I want to make it as black. And you remember, how would you push this down? Think about it. All right? It is under the advanced options, and it's the margin. Remember, we're creating a margin of 100 pixels just like that. Okay, Now we want to add in that bar. So I'm sure you guys know now how to add in the bar, clicking on this right here. We will go to the divider and then just drag it down. Now, the alignment must be in this centered, okay? And the gap. I want a very small gap, and then the with I'm going to just reduce it just like that. Okay, Simple. Easy. Now, the next section I want to add in a section right here. Actually, I want to add it in the text. And then we added a section right here, and we'll introduce you all to these bar counters. So over here, I'm gonna go to this section text editor. We're just gonna simply we can actually put it right here or we're gonna make a whole new section. So right here, I'll just go ahead and put in some dummy text and see if I paste. So I have my dummy textile there. See if I do. Yes. All right. Cool. Now for style. I kind of want this centered like that. Now, let's go ahead and add in your section. So add in your section will put two bars, this section right here. I will actually go to this section and go to text editor and simply just drag some Texan. All right, paste it in. Now let's say I want to create some space right here. You know, I actually want this section to have more padding. So clicking on section right here, I want to go to the advanced section right here, and I want to actually make some margin. Actually, we could make some padding, so but put like 100 right there, so that looks a little bit better. That divides it up a little bit more. We don't. We wanted to have some space. Now, right here. I'm gonna add in another module. So clicking here, I'm going to scroll down and we're gonna use the Progress bar just like that. So right here we have, you know, my skill. So Web design and then right here we have type. So these are just basically colors, you know, if you it's like a little shortcut, and right here, we have percentage will put, you know, something like 90%. Now you can actually choose to hide the percent sign, if you would like, so I'll just put, you know, hide it. So it'll just say 90 or just It'll just say the bar by mistake, and then right here will put success rate. All right, now, for style, I want the bar color to be something a little bit different. I want the Garko be black. You know, it does match my, my my style right here. Of what? I'm trying to accomplish it. Like the genre, the bar background color, we can change that and also the inner text color. So this is the inner text color. So we can change that to something like blue or gray or something like that. All right, now the title style, we'll probably changes to black, which is this section right here. And we can also go through here and change the font as well. And for the advanced section, we can choose to have, you know, an animation such as, you know, it's swinging down like that. Now, instead of actually creating a whole new module, we can just duplicate this row just like that, And also over here, we can actually decide, You know, this doesn't look too good. Maybe we can Adam some more text right here to sort of, you know, get it matched up. And also, we can actually do the line height. So over here, under the advanced section, I believe it is, or for the content style, it is topography. Sorry. And we can change the line height. So right here we can choose to basically match it up with those bars to make it look like that. You see how I did that? And also, this is the line spacing, but I kind of lonely that that's so the line height is a good idea to sort of match it up and to make it look really good. Okay, so now let's go ahead and add in the secondary bar right here. And I'm sure you guys know how to do this by now, but let's just go ahead and run through it. I'm a click on this. Grab this heading and simply just go ahead and push it in right there and we'll put our amazing team and center that, and maybe the size will leave it as something like a large or extra large. Now for the, um, for the section we're gonna click on section right here. We want to add in a color and also make this fool with so contents with will make it full with. And we'll actually go to style Classic and will change the color the black. So now that looks good. Now also, I want to make sure this content is in the middle. So right here on our content position, I'll put Mill. So now it's in the middle. And, of course, we can actually take one of these bars. Maybe you can duplicate these bars are really tricky. No, there really small. So we'll just grab this and we'll just put it down there like that and will probably change this text color to maybe something like whites. All right, now let's talk about the new section, which ears. It's actually profiles, but I actually made it like this. It doesn't come like this. So over here we go to add a new section will make three rows and we'll go to this box right here, and we'll do Image box told the image box. And right here we'll do an image. Now, actually, have the image is already here, so I'm gonna grab this one. And the size of these guys is 3 54 by 2 83 and we'll go to insert media. All right, so we have the image there and we'll put Stacey and right here we can put some different texts. I will go ahead and put in my famous dummy text that I was put in now for style. So we want to make this emphasize a little bit bigger so we can actually make it a little bit bigger. We'll make it or something, like, 80. And we can choose the image spacing as well from the text. But I'm gonna go ahead and leave it like that, and we can actually add animation to this so we can add in a pulse growth. They hover over it and also the content so we can change the content color we can change. So this right here is for the title. And this right here is for the description. So title color, I'll leave it as black. And for the description color, I'll probably leave it as something like Gray. All right, Cool. So we have this section right here. Now let's go. And out of some social icons. So I'm gonna click on this section right here, and we're gonna scroll down, and we're going to come across to see social icons and simply just take this and we can actually, you know, we'll do, actually, I think it'll be a little bit more helpful. Well, actually, insert a columns row. So by grabbing columns will grab this and put it right there. Now I'm going to take this and simply just drag it down here. I'm sorry. This section and simply drag it down here and here we can do two things, You know, we can I want only as one. So under columns, I'm going to destroy this. We only have one column, and here we will actually insert the social icons. Pretty cool. Looks good. Now, social icons always make everything look good. I don't know why now, in order to change this guy, that's really simple. Over here, under your social icons being click on, it's simply just go ahead and put whatever social media website you would like and then put in your well so it must be public or must be a fan page guys. So if you take him to a private profile, it's just going to say that this profile is private. Okay, so all you need to do is go on, enter your link for your Facebook page there and also your Twitter and also your Google. Plus, you can add more. So right here. I can click on this and go to something like WordPress At another item, Noble puts ah, flicker something like that, right, So that looks pretty good. So right now I'm gonna save it. All right, Cool. So we save that page and this is actually video is going to stop, and we're going to continue on the next slide 12. About 2: So let's continue with the about us. So also for the icons right here, you can choose the shape of them. If you want him circle, you want TEM some Sorry square or rounded Now a quick way to, you know, finish this section instead of doing that manually like we had before. We can just go ahead and duplicate this row. I'm sorry, this section and we'll drag it up right here. Now, also for the icons will double will double duplicate that, and we'll just go ahead and drag them right there as well. So right here. I want to make sure I put him right there. Okay, so that is a very quick way to just, you know, fully designed the page really quickly. Now, also, if you notice right here, you see how I have this column right here. So I should have done section. So I'm gonna go ahead and delete this, and I want to actually duplicate this section because this section controls the icon. So right here, intersection, click, duplicate. And then we're going to dragged the section right there. No, no, not call him. Will do. So we'll grab the section. There you go right there. Okay, so now they're aligned perfectly. It looks good. That said, we can do this again right here by going to call, Um, and we can just duplicate it like this as well. And we'll just delete this. Call him right here, All right. And you know we're here. We'll go ahead and put in somebody else, so I'll delete this. I will put in the picture of this guy right here and here. I'll change his name. So put what's meant to be his name. Bob will choose Bob. And then right here, we'll click on this and we'll choose. The image will delete this, and we'll put this picture of this woman right here, and we'll put her name as Jennifer. Jennifer. Okay, so this section looks pretty good, You know, it is a very clean section. It's straight to the point. It's simple. Now, let's go ahead and introduce you all to a new module which is actually called the, um I'm sorry, not a new module, but we're going to create a different style right here. Okay, so over here, we're gonna go to add a new section. We're gonna create two bars this time, and we want to create that effect of having this contact us anytime and also this Click me section right here. So right here, we'll go ahead and go over here and we'll drag him text, and we'll simply just put contact us anytime in the style. I will change the color to something like White. Now. The reason why I did that is because we're going to add in a background and it's going to look different. So under section right here ran changes sex into full with, and I want the content position in the middle over here in their style. We're gonna select this classic, and then we'll select color and we'll put his black. So now you can see that we have the content right there. Now we want to basically make this a little bit more centered. So right here, if I double click on the heading, we can just click on center alignment. Now, over here, all thing to do is drag in a button. So click on this. Go ahead and dragging a button. Now I'll probably put click me. You'll put contact us. Call to Action's guys are always very good to have the more call to actions, the better you want to direct your audience. You want to tell them what to do when they navigate your website. I know that sounds a little aggressive, but trust me. Ah, I've been a well designed for some time and it is really recommended. So I want to align it right there to the center and the type right here. Obviously these air just shortcut colors. So I want to change where they where they go. All put http dot dot dot gov dot darrell Wilson Hoops, darrell wilson dot com. And we can also select the icon to Maybe I want to put something like this little thing right there and then for style. Text color is good, actually know what? Let's take this this change. It was big. This little bit different will in invert the color will put the text color as black and then we will put the background color as white, so background color, white. So that looks pretty cool right there. And we can also change the font right here. And also the animation, etcetera, whatever we would like to do. But, you know I'm not gonna do that. And that is basically how we create this section. Guys, it was very simple, very easy. And we have a fully functional about us page in a matter of 10 to 15 minutes. Now I want to save this section. Guys, this section will not show up. So don't worry if there's all this weird stuff right here. If you just go ahead and click on right here this X and go to view the page, it's not going to show up. So this is the page that we created very sleek, very good looking. And it's straight to the point. So right here is the footer widgets, and we will talk about that a little bit later. Okay, so that's it for the about us page guys. Congratulations. Now let's go ahead and do the services page. And then after that, we will talk about Primi layouts and also the parallax effect. So I will see you all there 13. Quiz 11: All right, guys. Welcome to our first quiz in this quiz. I'm gonna show you all how I accomplished this look right here. So you can see I have those top bars that sort of just transition and they all that that really unique Look. So this one comes in from the left, the top and the left. And also, I have these two images overlapping each other. Now, you can do this with L. A mentor. You know, it's doable because you're doing Web design. Guys. It's really hard to get ideas and inspiration. And trust me, I've been there. It's hard to sort of design your site and figure out what's good for you. So I'm gonna show you some really cool design. So you some really cool strategies that you can use for your website. So going over here, all that it for this section, guys, is I basically just inserted three columns I made it full with, and what I did was I actually made the animation different for each and every one of them. So over here under my column section, this is my my current column section right here, and I'm just gonna click on this little icon and over here under style, you guys can see I've basically just left it alone. I've changed the primary color, the secondary color Nothing. Nothing too crazy. But under the advanced section right here I put the animation is fading toe left. So if someone scrolling down, it's has that cool look where they all kind of clash together and it fits perfectly. So basically I made three rows right here. And if you go to this section right here, I just made it full with That's all I did. So I made three columns I made a fool with, and I just changed the animation for each and every one of them. Now, for this section right here, this section is a little bit more advanced. So this is a two column row, so you'll have one call him right here, and I have another column right here. Now, these images are both the same size, So all they did was basically just insert an image right here. I didn't change anything. You go to the advanced. Nothing is done. But if you go to the sex the second section right here and we click on column and let's just go ahead and go to the advanced. You're going to see that I change the margin to a negative 300. So what that does is that it basically will move it the other way. So, for example, I leave it like that. A zero. We have just two images. Let's just change this again. 20 as well, just to show you all what looks like from scratch. So this is a two column row, but I want to push this down a little bit. I want to create some margin there, so I'm gonna do 100 and that will actually push it right there. Now, I can actually do something a little bit different. I can actually go minus 500. Let's see right here minus 400. And you see how the image kind of pops up right there so you can basically control the image of where you want it to go with the margin. So I know earlier the lesson. I kind of, you know, didn't talk about margin too much. And I met your thinking, Darryl, you know, I'm not learning anything, So this is a perfect example of why the margin is so important now for the left side, instead of giving it a 400 Martin to the left, I want to say, you know what? Let's go ahead and squish it to the page is going to give it minus 400 like that. So this is actually a really cool look and I've actually done it on another website. This is a website that I built for a client's a while ago. Hopefully, your website is still up and I actually incorporated that same exact look. So over here, under the leaves under the about US section. Now I'm gonna scroll down right here and you see how I have the images overlapping each other. It's a it's a look you can add to your site. You know, there are some things that you can accomplish with that. Look, there are some really cool features with the pictures kind of overlapping each other, just like right here. So just like I did it on this website, you can maybe put it to the left over here, maybe adding some content, etcetera. So I kind of want to pick your brain little bit. Guys, you know. I hope this helps. It's a pretty neat look. It's a cool look. Um, I have to work, which is coming up a little bit later. So, uh oh, Peak. I see you don't learn something from them, and I'll see you guys in the next lecture. 14. Services1: Hey, welcome back, guys. So, you know, hope that quiz helped you out. You know, hope to give you some more ideas for your websites. Now, we're gonna go ahead, make the services page. So right here, I'm gonna go to bed with L a mentor, and we're actually going to create a site that looks just like this right here. This is going to be the page that we are going to create. It's very simple. It's very practical. We have testimonials and also this cool accordion. So I'm gonna show you guys how to build this same exact page. So right here, let's go ahead and go to our heading. We're just gonna go ahead and dragged this down, and here we're just gonna put our services and nothing I want to talk about guys is Please make sure you stay till the end of this tutorial to learn a lot. I just want to make sure that you guys fully understand everything before you guys start to venture off and try to try new things. So right here I'm gonna go to style and maybe changes color to something like white and do remember how to change the background. You guys, anybody raise your hands. Okay, It's under section, so section go to full with style. Now, maybe we can add in a video. You know, you can add in your own video right here. Maybe. Let's go in and out of a video right here. We're gonna add in a video for this section. I'm gonna put four K nature right here, four k nature. And I'm just gonna go ahead and grab one of these and I'm gonna copy that. I hate that guy. He's so annoying. You want to be rich just by my e book for a dollar and you'll become rich? No, that's not true. OK, so we added the video, Lincoln right there. Now, under the layout, we want to go ahead and make sure that is a little bit bigger. So under the haIf, we can say minimum heights. And there you go. We have our services, and it looks amazing right there. Okay. It won't change the height. Remember, we can go ahead and change it, but I'm gonna go ahead and just leave it at 400 now also for the text right here. Make sure you click on the text, and we can change the heading size as well. So under style go to topography and we could make it a little bit bigger. All right. So something that looks just like this now also worry. Here, we're gonna go right here, and we're just gonna go ahead and drag this down right here, and we're going to create a title, So I'm gonna center it style. I'm gonna make it black. And I want to add a margin. You know, I want to make it a little bit down. You know, it's gonna make a little bit down right there. Click here, and I want to add a divider. I want to keep adding the same style that I have to my website. So here I when I reduced the gap, I want a center. It and I want to make the with just a little bit something simple like that. All right, so now I actually want to do a new section. We're going to use a six column section right here. So six columns just like this right here, and we're going to enter in. So Mike on boxes. So right here. Icon box go ahead and grab one right there. So it does look a little strange right there. But what we can do to fix that is make it to the left or the rights. But right here, we can basically just reduce the size of the text. Something simple like this that would basically, you know, keep it a little bit simple. But when we spread the page out, guys, it will look a little different. So right here, under sections we can go to full with, and it will actually reduce or I'm sorry, stretched the size of the text. So here we can basically do something like, um, you know, go to click on this story Here, I'll click on this, and then we'll say, You know, I want this to be a just And then we'll put, um, which we put manage managing, and then a hero added some dummy text. Oops. Let's go and get my famous dummy text right here already. So I'm gonna go ahead and grab some of this and we're going to go ahead and paste this in there. No, If I want to change the style, I can change the primary color to something like green and also the contents. So I want the contents to be this right here. I want to be black, so I'm gonna change the content title to Black. And remember how we did this earlier. We could just duplicate this and dragged over here. Duplicate this. This will save you a lot of time when you want to achieve a six column row. Now, you can also use images, guys, you can use all sorts of things. You know, at this point, you're starting to learn how to use the Paige Miller and Imagination is everything. And visiting other websites is also a very good idea to sort of help you discover different ways you can learn how to create your website. So our hero put simple here, we'll put something like, um, amazing. And then here will put fun. Then here we will go ahead and put simple or easy. Okay. And then here we'll go ahead and put something like, um, amazing. No. Cool. All right. So we have created our section right here. And also, if you guys need to change the color of this all seems to do is go to style and goats to the, you know, the primary color, which you can change to any color you would like. All right. And another thing I want to talk about. If you want to duplicate this whole section, remember, just go to section right here and go to duplicate and duplicate that entire section for you . Okay, so right now I don't want this whole section, but I'm just gonna go ahead, you know? I'll leave it in there. I'll leave it just for told purposes. Now, the next you want to do is actually create this section right here, which is sort of like an accordion. And I'm gonna teach you how to put these images in there as well. So right here, we're gonna go to add a new section. We're just gonna put one now running over here, and we're gonna scroll down, and we're going to use a new widget. This time. We're going to be using the tab section, Something like this right here. All right. Now for the tab, click on tab right here and say our work. And then right here we can talk about our work. So maybe something like, um, you know, I'm just gonna enter a dummy text guys because I don't even have to put it anymore. I just I just put I just I just write crazy stuff in and let's say we want that image. So what would enter? And right here? I want to go ahead and add media. So we'll click on that, and I'm gonna go ahead and grab in a picture. We will grab in something that looks like this right here. We'll grab on the crow. Now, let's say you want to change the size of this. This is a little bit smaller. If you go to our styles right here, we can actually change all this right here. The border with etcetera, tap content. But another way to change this picture, guys, is by clicking on the image itself and going to edit. Now, this section right here, you see all says medium right here. You can click on this and go to full size. So I want this full size. Something looks just like that right there. Really professional really looks good. And also going back to the cells guys, we can change the border with as well. You see how the border is starting to come into place right there. We can also change the border color, maybe want it black. And we can change the background color as well. You know, we can change the color of the background for this. You know those air so tacky. All those colors, Those do not work together. So close in closing that right there also the active color. So we can actually change the active color. So when somebody's actively clicking on it, we can actually change the active color as well. And then from here, we can also change the topography. Now, I just deleted that. Sorry, guys. I'm gonna go ahead and out one more time at in the crow. Sorry. Right here. I was also another way to change it. So by going to full size, you can also have this link to a specific girl. So right here, under linked to you can type in custom mural. Now, if somebody clicks on it, you want them to go to other websites? Always need to do is go ahead and put that in there and it will show up. Okay, so now it's going to tap to go to tab, too. So we're gonna go ahead and close this and go to tab, too. And here we're gonna puts our horse. And then right here, I'm gonna go ahead and maybe backspace all this stuff right here, and I'm going to paste this. Let's see, paste this and then I'm going to put a space right here, and we're going to add in a picture right here. So add media and I'm out in this horse so the size is full, so it's gonna be a full size picture, and it looks absolutely gorgeous. Beautiful. Okay, so that's basically how we add in the tab section is just another module. It's just another way that you can use to showcase your work. So, for example, you know they can go through put like, you know, our houses, our projects, our employees, whatever you want to do, you know, whatever you want to style it. This is how you would do it. And also you want to add new item. You click on, add a new item, able create another tab, so here is gonna go out of print and Demi text again. But enter and I will add in 1/3 picture just for to talk purposes. You know, it's that's added something like this phone right here. And this is a full size phone. So there you go. That is how we do it. Okay, so let's go ahead and added a new section, which is going to be the testimonial section. So right here, under add new section will click on that and we'll put to right here. So we have to these and we're gonna go up here, and all we're gonna do now is add in the testimonial section. So a testimonial gonna go ahead and grab that simple. So right here we have the text right here of what you want the testimonial to say. So what do you want these people to talk about? Your sites. So, you know, amazing work. Best tutorial on you to me, ever. You better if be a good review or else I will. Okay. We're gonna Yeah. Yeah. You guys get it right? Okay. So then right here under the image we can add in a picture for the image. So I'll put in something like this right here, and I'll enter that. And there you go. We have the picture of the guy and what is his name? So his name is John Doe. What is his job? Well, he's a designer image position. We can actually put this at the top right there. Or you can leave it at aside whatever you would like. Okay. And also, we can change the alignment as well. I think Senator always looks good now for style. We can put content color right here, and you can change the color of the content and also for the image itself. You can make the image a little bit bigger and we can actually add a border type to it. If we choose to have a border, I choose not to have a border. But you know Hey, you can do whatever you like right here And then right here. Of course, we can decide to add in a radius. So what the rays does guys, it just basically creates a circle around it. That is basically what the radius does now, for name right here. We can change the text and the the font for it. And also the same thing for the job. So for the designer, right here under job. We can just basically change the text color for that. Such Aziz blue. So now is blue. And we can also go ahead and change the you know, the topography as well. The size, whatever you want it to be etcetera. OK, so that's it for that section. Now, let's go ahead and just duplicate it. You know, duplicate this and drag it over here, and I might change the name. Now I'm gonna put, um What's your name? What's it? What's his name be? Jessica wouldn't have Jessica yet. That's why Jessica in there. And Jessica is a ah, what Jessica be? She is accountant. Alright. And then we'll go ahead and change the picture to Jessica right here. Insert into media. And there you go. And then right here says you say, Ah, he ripped me off. Just kidding. And then maybe a smiley face. Okay, so that is basically how we would add in the testimonial section, and that's it. Guys, we have a fully functional our services page. Now. Of course, this part is, you know, way too much. I wouldn't I would never recommend too much text people really by images. You know if it's beautiful. Images look good. The video looks good. Everybody loves it. There's too much texts. Nobody wants to read that stuff. They just They just don't care too much. They really don't know. One person that cares his you dress me. People just want to get straight to the point. Keep it simple and just, you know, Bebe straight for all. All right, so that's basically it for our services. Page, guys, uh, going back over here, we've actually created these same exact websites. So is very simple. And remember, guys, imagination is everything. You know, you guys are trying to learn how to use his page mother this point. So I'm going to talk a little bit more about now. Advanced features and also pre made layouts. Because now that we're starting to learn how to use a page Miller, maybe we could be a little bit more comfortable making, you know, taking a step further and getting a little bit more advanced. Okay, So I will see you all in the next lecture. 15. Widgets and Footer 1: Hey, guys, Welcome back in this section, we're gonna talk about widgets now. These things are the way bottom right here. I'm gonna talk about what these are and how you can enhance them. How you can make them whatever you want. There are millions of which it's out there. There's Instagram feeds. Twitter feeds Facebook like box about us. Things there. So many widgets out there. So I'm gonna give you a quick introduction on how you can improve your footer. So right here, gonna go to my dashboard and first I'm gonna show you what they are. So right here under the appearance in Click on Widgets. Now you see right here we have footer, Widget one, We have foot or widget to we have a right sidebar, a left sidebar and a header. Now we've actually disabled the sidebar, so we need to worry about that now. Over here under footer, widget one. These are current witness right now, so we can add an arbitrary text. So all then you would also need to do is take this, drag it over here. And maybe I could put this about us. You know, about us about us and then throw in some text right here. You know we can doing some dummy texts. I'll go to my secret website right here, and we will grab some dummy text all rights. My internet is a little slow going to copy this and then go ahead and paste this in there and then click on safe now also for the calendar. I'm saying, God, this calendar here, I'm dragging over two foot. Which it to put our date. Alright, so I've saved that. Now I'm gonna actually open up a new window right here, and we're going to show you now the widgets. So right here I must go down to the bottom right here. And there is the about us. And also the date is right there now. So remember, remember in the settings earlier how we had different widget styles, how there was basically four or five. So I'm gonna go to all pages right here. I'm gonna go to the home. I see right here it says footer widgets. She I only have two widgets. So right here is indicating I only have two widgets, but we can have up to five widgets on this WordPress theme. So here gonna go to four changes to four now, and I'm go to update settings and we're going to use for widgets now. So let's just say you want to get different widgets. So overhearing her plug ins, we're gonna go to add new and guys, this is the part where you sort of venture off and go into the wonderful world of WordPress And just basically find what you need, because I can't really tell you this is the best widget. This is the best plug in. It would be unfair and be biased for me to say that because there are so many widgets out there and each of these have a different function. You know these air Google Analytics, Mega slider, uninjured form. Ah, contact form, etcetera. So these are all widgets, and I like to basically say that these air like aps their APS for your WordPress websites. So I'm gonna show you all how to do a Facebook like box. So right here, I'm gonna do Facebook like box, and we'll just we'll get ah, huge less of them And guys, It does take time and trial and error to find good ones. Trust me. There are a lot of bad widgets out there. I have gone through a whole list. Like, for example, I was getting ah, coming soon, Coming soon plug in and like, it didn't work and, like, six of them didn't work. So right here, I'm go to install now, and we're just going to use this run right here as an example of a widget on our footer. So I'm gonna go activate right here. So we have actually activated the widget Facebook like box. Now, how do we basically use this cause over here we don't have any settings, etcetera. We have to go back to our widgets right here. So under appearance room, click on widgets and now you can see the Facebook face. I'm sorry that widget Facebook like box is a new option, and it's there. So you click on this and actually, I can just go ahead and say, You know what? I'm gonna go and take this and just drag it over to widget or footer. Widget number three. OK, so hero put Follow us. Paige, I d. This is where you want to enter in your facebook page. So right here I go to my Facebook and I'm going to go to my fan page right here, and I'm gonna take this girl right here. All right? I'm gonna go back to this for Page I d. I'm going to go and paste it in there for the with. I want to add 300 and also the height 300. You want to use a small header for now? Put No. You want to hide the cover furter? Sure. Yeah. I don't want I don't want the big You know, this is the cover one right here. I don't really want that on there. And you want to show friends faces? Yeah, Why not? Do you want to show page posts? Yeah, sure. So I'm gonna click on save now. Now it's going to go back to our website and refresh the page groups turning back to L. A mentor. There we go. And let's go ahead now and just scroll down to the bottom of the page and Walla. Now we have a beautiful Facebook like box. Very professional. Looks very good. Now. Also, you've noticed that this box right here is overlapping this widget. And that's because of the with right here. We made the with a little bit too big. So right here under with maybe we could do 1 50 and we'll go to save, and then over here will refresh the page. And there you go. So you can see it isn't a little bit too small now, but you guys can understand the idea, you know, just make the would make the with a little bit bigger. Maybe 200 will be good 200 and we'll go ahead and refresh the page. And I think that looks a little bit better. But also remember that the more would just that you have, the more scrunch that will be. And also we could make this full with. So this section right here, let's say, for example, it's box right now, but you can actually go into the theme customizer right here, and we can actually make this section full with, which means it will stretch across the entire page. So scrolling down right here, I'm gonna go to my things on her site Identity. No, it's under layouts and footer. So right here we have our footer with right here and we have full We have contained, but for the inter contained photo, maybe want to do full. And now you can see that this has actually spread apart. So now it goes apart, the entire spreads apart the entire page. So you guys get the idea there, You know, basically, it just allows, you know, Ah, look of the full with widgets or not. Now, I don't know which one looks better or not. I'm still 50 50 because I do like the full with look, but I think that this style might not go to good, but, you know, that's solely up to you. I am basically just letting you know how to change this. So I'm gonna go to save and publish, and I go back. Now, let's go ahead and maybe find another widget for us to install. So over here and plug ins were to go to add new and we can actually go to popular, you know, we can, you know, search around. There are tons of them. We can also go to recommended what they think that we might like base off our other searches. So there are quite a few right here, and maybe we can do something like, Let's see, here we can add in. Let's do a social icons, social icons. So they have a lot of them right here. I actually like the one by access press. I think actors press has some really good social icons. So we're gonna type that in right here. We're gonna type in access press once you start, you know, using WordPress for a while, you start to really know which has who has the best, Blufgan and everything. So right here is the social icons for WordPress. Plug in. I'm gonna go and click on Install now and use this one right here. And it's very highly rated. You know, it's it's for half star with over 70,000 active installs. So we're going to use this access press social icons. This is actually a really good one. I have a tutorial on this one on YouTube. So if you guys after this video, make sure to check that one out. Now, I'm gonna go to activate here, All right? Now, some plug ins will actually create a new menu, so see, right here how we have access press social icons. Some widgets are going to actually be on your left side. So make sure to remember that when you install a plug in, So I'm gonna go to actually suppress social icons. And I'm just gonna go ahead and create a new social icon. So right here, I'm gonna put the name of the set. What? The names. I'm gonna put social one social one. And right here I'm actually going to choose from available themes. And I'm just gonna go ahead and say I want something that looks like this right here. So we have all these icon this that have opened up. Now I just want the Facebook one. That's it. So right here under Facebook thing is right here. I'm gonna go ahead and put our Facebook or just put Facebook with I'm gonna go and put 50. Put 50 for the icon haIf So this is basically the icon height and the icon with all right, and then here I'm gonna go ahead and paste in my Facebook page and then right here all discord and put Facebook. Now I'm gonna scroll down right here, and we're going to, um, tool tip. We can show That's fine. Icon hover animation. So maybe I want this to pulse. If somebody hovers over it now, I'm gonna click on save icon set. All right, now they give us this short code. Now, this is Onley four text, so we don't really need to use this short code. We're going to put this on our widget section. So going back over here to appearance, going to widgets. Now you're gonna see access press, social icon trope. Now all of a sudden, see that? Let's go ahead now and put this under number four. So access for social icons, Um, and take this, drag it over, and then I'll put follow us, choose the icon, set Social one and go to safe. All right, now, I'm gonna go back over here and refresh this page, and I'm a scroll down all the way down all the way down. And there it is. So now we have our Facebook, And if I click on this, it's going to take me to my Facebook fan page. Okay, so that's quick rundown of widgets. Guys, there are ah lot of widgets out there, a lot of plug ins, So it's kind of hard for me to sort of teach you. What is the best plug in? I do have a lot of recommendations, however, on my YouTube channel. So be sure to check that out if you guys were interested. So that's it, guys, for the witches and the footer. Let's go on to the next sections. I will see you all there. 16. Layouts1: Hey, welcome back in this lecture, we're going to talk about pre made layouts and how you can create a website in seconds with L. A mentor. Also, we're gonna talk about how you can create your own layout and import them and export them to other different websites. So really quickly. Before I click on this, you want to make sure that your content is under no sidebars right here. You can decided the number of widgets pool talk about witches in just a little bit. And right here under full with contents, you can leave that checked right there. And also content title leave. That check is Well, now I'm gonna click on edit with L a mentor, and we're going to use the pre made layout L Motor has given with us. So right here, click on add Template and elemental has actually created all these templates for us to sort of help give us ideas and also inspiration. Now I'm gonna click on this one right here. We're gonna use this one. We're going to use this law firm one right here and there you go. So the website is created for us and this is live guys. So this is an entire website that has already made for us. All the hard work is done. All we need to do is go ahead and just take our images, put it in there, put our title, put our information, and there you go. So, for example, this is so you want to make a change to this? I'm gonna go and open this. It's pretty simple guys to score to click on it. We're here when puts number one in sales, and right here you can go ahead and change the texts. This is dummy text and up here, maybe want to go ahead and change this title right here. I'm gonna put Darryl and Wilson, Darryl and Wilson. And here I'll put something like, Cool you to me, instructor. The best. You mean structure, right? That's right. Okay, so the best you to me, instructor, just like that. Okay, Now, let's just say you want to basically keep this section. You know, I only like this section of the sleigh up. I don't like anything else. All this other stuff I don't like. Let's say I want to just take this and save it and loaded on to a different part of my website. It's very simple. So right here in your section, you click on this little save button, Secret's safe Click on that. And I'm gonna link this, uh, Lawley out I might go to save, So I have this one right here. LOL layout. Now, let's just say I want to load it onto a different part of my website right here on a scroll down and right here under add templates. I'm a click on add templates. Go to my templates and under law layouts, I'm just going to insert it. And there you go and you can use this guy's on any page on any certain part of the website . It doesn't have to be the same page. It could be any part of the website. Now, let's just say you have another domain. Let's just say you have another ah whole another website and you want to take this information and put it onto another website. You can do that right here under section. We're gonna click on section and we're gonna click on safe and we'll do something like, um, actually, no, we can actually just go to our library instead. So this section right here, Let's see. We can do this two ways. I'll just do like this. We'll just do it from scratch. All right. So I'm gonna do it from SECTION. We're going to save this, and we're gonna do export export one. And I'm a go to save right here. All right, so now we have export one right here. Now, let's just say you have another domain, and you want to take this layout and put it onto another website. So right here, I'm a click on export. And that's just a little morning. So right there is the layout right there. So it's l a mentor dot Jason. Now, let's just say you want to go ahead and load this onto another website. Also, you have to do that right now so that we have the layout right there. It's called elemental dot Jason, I'm going over here to view or to go on my dashboard. I'm not going to save any of this, and I'm gonna go down to L. A mentor, and I go to my library now, right here. I'm gonna click on import layouts, choose the file and I believe it was called l a mentor and see right here l a mentor. It is, right. It's There it is. Elementary, Doc. Jason! Right here. So that's the follow we have. And I'm gonna go to click on open and import now. And there you go. So, import import one is now on the website. So that is basically how you would take those layouts and export them onto a different domain. Because maybe you want to create a lot of layouts, and then maybe, you know, you have a client and you could just load a lay on their website and then bam, There you go. You know, your job is already done, so that's a really good idea. If you are a Web designer, it's a very good shortcut and loading, loading templates and libraries guys is no shame. You know, it's it saves a lot of time. It's still a very beautiful layout that they have created for us. So there's no shame in doing that. I do it all the time because sometimes clients wants a really nice website, and if they've already made something really good, just use that at some modifications, etcetera. OK, so that's basically my tutorial. Guys on layouts. You guys can go ahead and go through the list of layouts. You can use your own. You can export them, import them whatever you would like. All right, So that's it for this lecture, guys. I'll see you all in the next lecture. 17. Parallax1: Hey guys, welcome back. So in this lecture, we're going to talk all about the parallax section and how to achieve this look and how I did it. Now the Parallax Effect is actually growing popularity and a lot of people like it because it just looks really clean. It looks really fun and unique. So today we'll show you how to incorporate the Parallax effect like this onto your website . So let's go over here to our website and we're going to go to our page right here, and I'm a go to edit page and we're going to now click on edit with L a mentor. And as always, guys, make sure content ID with no sidebars, the widgets, you can choose how many widgets you would like. We talked about widgets in the previous lecture and also the full of content and also the contents title. So I'm gonna click on edit with L a mentor, and we're going to now create that beautiful parallax effect. So I'm gonna go ahead and just grab a heading right here, and I'm gonna go ahead and puts welcome to Parallax. And then here I'll go ahead and put enter now, also, for this style, we can choose to change this. I'm probably change it to whites. Now, I want to add a background to this. So under section right here, first things I want to do is I want to make this full with. And also Well, actually, I'll do the height next because I kind of want to show you the picture. First, I'll go to style. I'll go to classic and I go to image. Now, we can also put a video background as well. Okay, so I just want remind you all that is how you put video backgrounds. So over here and go to image. And I'm just going to select one of these images right here. Insert media. And now I'm gonna go back over here to layouts, and right here under haIf I'm gonna do Men heights. Now, this is basically where you can control the height of the picture right there. You see that? So you can go ahead and decide what she would like. I'll put something like open 700 7 700 then the content position. I want it in the middle, right here. All right, so maybe I want to make that just a little bit bigger. So if I click on this right here, we can actually go ahead and change. That will go to size, and I'll just do, like, extra extra large something that looks just like that. Now I want to make sure that this section right here is fixed because right now, if I scroll the picture kind of doesn't you know, it stays. So in order to get that that parallax effect look, you have to go to click on section and over here we're gonna go to style, and we're gonna have these options right here. So I believe it is under the, um the other the repeats or attachment? Yes. Or the attachment you're gonna want to keep it as fixed now with the fixed does is that it keeps the image where it is. So if you want to get that parallax effect, that is exactly how you do it. But let's take it a step further. Let's go ahead now and create another one right here. Let's go and create a whole new section. So right here I'm gonna go to add a new section. I'm gonna go ahead and put in this one right here. Grab this. I'll grab this header text animal puts our company is amazing and we'll put center. Not for the style. I'm gonna changes to whites, and then over here, I'm gonna click back, and we're gonna click on section now and section we want this full with we're gonna go to style. We want to go to classic, and right here we're going to go ahead and choose the image. Now, I'm gonna choose this one right here. All right? And now, in order to spread this out, we're gonna go back over here to lay out, and we're gonna go to hype and I can actually do fit to screen. And what fit the screen does it will actually fit it to your current screen. All right, but I think that's a little bit too big. I just want something around. Maybe we had 700 going on. Sounds good. It looks like that. And also we need to make sure that this is under fixed. So under style, we're gonna go to the attachments and make sure that this is under fixed right there. So now we have a double parallax effect right there. And also we can keep adding stuff right here. So for example, let's say I want to click on this right here. We could maybe add in the image carousel and just drag it under. And this guy didn't just added some images right here. You know, I didn't This one, this one and this one and this one right here I'll go to create a new gallery and insert the gallery. All right, so I have my four images there, and right here we could put images size. I'll probably put, you know, you can put 300 etcetera. So now you can see that we have our images there so that those look pretty cool. I think white images would probably look a little bit better on this background. But I'm just showing you how to do this just for you know, if the toll purposes and everything also, let's just say you want to add in some text. But before we out of the text, let's just create another section. Let's just create another one. Sort of Get this this duplicate, parallax beautiful effect that we got going on here. So over here. I'm gonna go to add a new section. Click on this one right here. Goto click on these right here. Grab the heading text. And we here I wanna put this is Parallax and click on, you know, center. The style changes to whites just like we've been doing. And I'm gonna click on these section parts and the section, remember, controls his whole section. I want this as full with and the content position. Keep it in the middle. And also the height. Two men Height. Right there. Now we need to add in a background image. That's the problem, right there Doesn't look, it doesn't have a background image over here. In your style, you click on classic click on image animals like this one. Now answer into media and Voila! There we go. It looks really good. Now, remember, for the attachment you have to change it to fixed. Fixed will give you the parallax effect Now going back to lay out. You want to basically make this a little bit bigger, just like that? That looks pretty good. And then here we can, you know, add in some more widgets. You know you can keep adding in content right here of the text widgets. And I'll just put it right there and then for the style I wanted in the center. And I want this text white just like that, okay? And also, let's say you want to add in some number counters right here. Let's go ahead and do that. So right here and click on this, and I'm actually going to put columns and I'm going to actually put this right here. Oops. I just put it anywhere right here and now we can actually insert the columns right here. So here, I'll take column and all, maybe add one. So we have three. Maybe three is good. Now, I want this section below the text right here. So I'm gonna click on this section, and I'm just going to click right there. And now we have the section below the text. So clicking on this icon right here and I want to go ahead and grab in some number counters . So number counters, and then right here, I'll go ahead and put you know that's that's okay, you know, cool number. I guess we can put something else, but I want to change that text to White. So under text color, I want to put that as whites and also for the title. I want to put that ass white asses. Well, now let's say I want to duplicate this row. Same thing I'm a duplicated. And there we go. So now let's go ahead and say you know it. Maybe I don't want to create a whole nother section. We've already made three sections with the point of doing everything all over again. Let's just duplicate an entire section and then just drag it over. So over here, I'm just gonna go ahead and click on section and we are going to duplicate that section right there. So now you guys can see the page has actually spread apart, which is another really cool look. But I want to just take this section and just drag it down. So I have this section here and I want to just drag it down right here. And there you go. Now we have a really cool parallax effect. You guys can see it looks really good. It started to come along. Now I also want to talk about video sliders. So there's a lot about videos, fighters that you can do. You know, For example, instead of having this big background, we can actually just incorporate a video slider. So adding a section right here we go to style and we just go ahead and grab in a YouTube video. And I really recommend grabbing in the four K videos because YouTube has everything. So it is a monstrous websites. So four k nature and, you know, grabbing one of these is, you know, probably one of your best solutions. So I'll just grab this one right here and we'll see how this one looks all right. And I'll go ahead and paste it in right there and while law So that is a really cool you know, background that you can have for your website. No, we have, ah, video cider plus the parallax effect, which looks pretty cool. So feel free guys to go through this, you know, and mess with the parallax settings you can have like a fully functional parallax page just stands out and you can decorate it. You can add all sorts of really cool stuff to it. So that's it for the section guys. I hope this has helped you. Let's go on to the next section, so I will see you all there 18. Quiz 2: All right, guys, welcome back to the next quiz. We're going to talk about how I made these pricing tables. So pricing tables are really nice, their unique. Now there are 1000 different styles. But I just want to show you the format of how to create a pricing table so you can create one for yourself. Now, really, all this is guys. If you look at this carefully, it's just a text, a text, a line. I added a Nikon this right here and a call to action. And then I just basically outlined the entire box with a color to sort of give it that distinct look like it's it's own pricing table. So right here under the column, you're going to see that I just basically change the background color here. See that our change, the color right there. This section right here is a header text. So I basically just made a tax rate here. This also is a header text, and I just basically, you know, I just basically made the size bigger to sort of give more emphasis to make it look like a pricing table, etcetera. And in this section right here is just a divider. So header, header divider. And in this section right here, actually, a little bit more customization. So this is basically the icon list gadget right here. So the icon list. Now I'm gonna delete this and show you exactly how I did it. So this right here is the icon list, and I'm just gonna drag it right here. Now, by default, it's gonna look like that. So how did I do? Oops. Sorry about that. So how did I get it to look something like this right here. We'll all that really did was put something like, you know, full S E o service. And I put a check right here. You can put whatever you like, and I'll put Web design company, and then right here will do you no credit check, which you have to be crazy to do that. But some companies out there, you know, I don't know. So right here we have these right here, everything. That's pretty good. But we need to basically align it to make it look a little bit better. So over here, under style, I want to make sure that it's centered. Okay, so we have it centered. Now, right here you can change the icon color to something like black right here. But the one important feature is that we need to use line spacing because the line spacing basically makes it. Give it that illusion that it's a pricing table. So over here, under text, we're gonna go to topography and right here under the line heights. We're going to make this a little bit bigger and you know, the line spacing we can you know, Mr Vice basing a little bit, etcetera. So that's basically how we made the pricing table. And also remember, once you're done creating this pricing table, all is you need to do guys is just duplicate the rose. Don't make it too hard on yourself. Don't tried to, you know, do everything by yourself. Just use technology, you know, use what's available right here. All need to do is just click on duplicate. And now it has a second row and then column duplicate. And then right here, all you need to do is just go ahead and change the title. And also right here. Same thing, you know, just to 99. And guys. There's also a lot of demos on how to make pricing tables. There's also this pressing table. And if you guys look at this price table very carefully, all of this really is, guys is this is one giant section right here. So let me show you the analogy behind this. So this right here is one giant section, and it's just gray. This is a column with a white background, a text, a text, the divider ICOM list and a call to action button. And if you notice when they have a hover over, it turns blue over here. Same exact thing. So it's just basically getting ideas and just learning how to use the page builder. And it looks complicated, but it's really not, You know, it's just a text. A text divider icon list. Ah, button with just a blue background, That's it. And right here, the out of the border radius. So the border radius is 10 and that basically gives it that rounded look. Change attitudes. I mean, like, zero. It's going to lose that look like right here. So this box right here see how it's now squared. So you want that rounded look. You need to add the border radius. Something around 20 to 30 would be great. So that's it, Guys, for this quiz. I hope this help you out. Maybe in the future you guys could make some pricing table That looked really, really cool. Maybe even better than my So I'll see you all in the next lecture. 19. Contact: Hey, guys, Welcome back. So in this lecture, we're going to talk about the contact form. We're going to used the Google Maps image. I'm gonna show you all how to use the contact form Plug in along with just creating a simple contact us page. So let's go ahead now and get started. I'm gonna go back over here to our contact form and right here, click on edit with L A mentor. Or if that is not that option is not available for you. Just go to edit page and on the contest The contact US section. Just click on any with l a mentor, and this will open up this whole section for us. So really quickly. It's very simple. Right here. Click on. Add in your section. We want to make this big map right here. So we have this section right here. Now, I just want to take Google maps right here and just drag it over there. Simple. Easy. Now here. I'm gonna go ahead and put Avalon Hollywood, and also we can control the zoom level. You know, we could make it zoom really close in, or we can make it zoom. Really close out, etcetera. I'm sorry. This is the the higher the number, the closer it zooms in. Also, you can change the height of this as well. But it was something like this right here and also prevent scroll. So that means if somebody, if somebody scrolls over it, Do you want to prevent the scroll or not? So, by clicking yes or no, see, now, if I use my mouse and scroll, it doesn't zoom in on it. So I think that's a good idea to do that. Sometimes people get stuck when they're scrolling down the page. They're like, Oh, my God says so. We're knowing. You know what I mean? I've done that a lot on a lot of websites. So right here, I'm gonna go to section. I want to make this full with. And also I want to make sure there's no gap right here. See that gap right there? I want to take out that gap. All right. So that is basically how you enter in Google Maps is very, very simple. There is a secondary way to do this. Now I'm gonna show you the secondary way just for two toll purpose is just to make you learn a little bit more. So what you can also do is go right here, out in a text editor, just drive it and grabbing a text. And now you see, there's two tabs. There's a visual in the text. Now for future reference guys, whenever a plug in or something tells you to enter a short code or a piece of script, it's always going to go in the text editor of the text box. Okay, so let me show you exactly what I mean. So I just backspace that now I'm gonna go to Google Maps right here. I'm gonna go to Google Maps, and I'm just gonna go ahead and put something like, uh, Dollinger, my hometown, Chatsworth, California. Now I'm going to click on share. Well, two in bed map. And you see this right here? This code. I'm gonna go ahead and copy this right here. I'm go back over here and I'm going to paste this in the box right there. So now if I go back over here now, you're going to see that this has actually shown up. So that is an alternative way to use the Google maps. Now, if use under visual, it's not gonna work. I just go ahead and just paste this code under visual. You're going to see all this code. Okay, so that's the difference. So whenever a plug in or something tells you to put it in your text arbitrary text, you must make sure it is under the text box or else it will not work. And that goes for everything that goes for short codes. That goes for a PHP code that goes for anything that a plug in gives you directly. Okay, so right here, I'm just going to go ahead and just lied. All this and we're not going to use this box. I'm going to go ahead and just delete this whole section. You know, it always does it sometimes. You know, if it does that too. You guys where it's like you click up like that. It just does that sometimes it's just weird. So I know. So now let's go ahead and add in a text right here. So I want to add in a text, a divider and a text. By now you're thinking, Oh, this is just practice, you know, this is pretty. Pretty simple. I hope you guys returning to learn how to use this. So here. But contact us. Put this in the center and for the style. I want to make it black. And I want to add a margin. I want to add some space right here. So clicking this, I'm gonna say why I wanted 100 100 pictures from there. Now, clicking this right here, one at a divider right under there. Reduced the gap, Put it in the middle and reduce the with right there. Oops. In the middle, right there. And also right here. I want to add in some new content. I want to just go ahead and Adam some text. Maybe you can talk about your websites or whatever you would like. So here, I'm gonna go to enter in some dummy text, and I'm going to grab this. Maybe that's too much, you know? I don't know. Maybe that's too much texts and see here. Pace it in. Yeah, maybe it's too much. Okay, something like that. All right. So now we have this next section right here where it's a little bit more divided where we have our office and we have this section right here, so I'm gonna show you how to do this. So here, I'm just gonna go ahead and say, All right, centered. I'm gonna go ahead, center this text now Right here. I'm gonna go add a new section and we're gonna click to All right. Now, over here. I want to grab the heading and I'm gonna put something like, ah, was our office hours, our office. And then I can also do something like, you know, the text. Of course, when they get black and for the advance, I can't want to push it a wave. I want to push away from the top right here. I'm gonna add some margin, so I'm not 100. Okay? So added some margin right there. Now also want to basically adding some icons right here. So, like, you know, our phone, our location, our fax number, etcetera. So the I call this would be the best bet for that. It would just take that and just drop it right there. All right? And also remember that you can add more. You know, we can add as many as we want. So right here we can add in something like, Ah, building Pasadena Boulevard, Hollywood, California, etcetera. So right here, I'll do something like, you know, our her phone and then begin. But something like, you know, for the icon will put well put phone and then right here, just go ahead and put your phone. You know? So 1 88 No, 288 a 9999 Okay, so that is basically how I achieved that look right there. So you can basically go through each one and, you know, design it also for the link. So if you want this to be a link where somebody would click on it and take them to another website, you would enter your link right there. Also for style. He can change the icon size to make a little bit bigger and also change the font color as well. Okay. And then, as of course, you can make it a line. You can make it to the rights, etcetera, wherever you wanted to be. Or you can actually go here and just change the text of the actual number itself. So here you can change the text, indent, and then maybe change the text color and topography as well. So you guys know what that is by now? I don't want to go through that again. So let's go ahead now and talk about the contact form plug in. So right here, go to save. And we're going to save our current progress, and we're gonna go to our dashboard now. Okay, Now, you should also do this under a different window. But, you know, just for to sell services, I'm just gonna go to dashboard, and we're just gonna do this from scratch, OK? So going over here to plug ins, we're gonna go to add new. No, there's a lot of plug ins out there. I used to recommend contact form seven, but I no longer recommend contact form seven because I just find a lot of my viewers and a lot of my audience find that it has kind of gold over time. So I am. You know, I am no longer recommending contact Form seven. I'll actually recommend Contact Bank and this plug it has worked for me, so I know that it works pretty well. And it's a relatively, um, you know, good plug in to use. It was a contact bank. See? Right here. It's called contact. Another way. You guys confined out just by going to contact for me here and there are tons of them right here. But a lot of these contact forms, you know, a lot of them are very old fashioned. Ah, lot of them don't work. The most popular one is contact form seven. But like I said, it has actually kind of doled over time. And I find that the plug in is not working well. Ah, lot of the times that I use Ah, contact form seven. That the plug, it actually just doesn't send it to spam bursted instead. Inbox, this is contact form seven. But I would not recommend us anymore because, um, ever since the new update of WordPress, it has gotten a lot of issues. But now let's go ahead and just and solve the plug in that we're looking for Serena, type in WP Contact Bank, and right here we're going to use this form. So right here. Just click on install now, and we're going to install this plug in. And what this plug in will do is it will basically create a contact form for us. So whenever somebody goes to our website and sends us an email, it will go straight to our inbox. Okay, so it is almost done installing and click on Activate. All right, so right here, you can see contact being late Edition is installed. Now, let's go ahead and use this contact form. So sometimes, guys, when you're when you install plug ins, sometimes it's kind of hard to find them. You've got to kind of have to look around. Sometimes it's under settings, etcetera, but arches right here. So just going click on contact pink. And they've actually basically made a demo forest. They've basically already created one for us, so let's just go ahead and use this one. But, you know, maybe I shouldn't do that. Let's go ahead now, Just create a whole new form just to show you just for ditto services. So right here we have formed name and we have a form description. We have a blank message. We have incorrect email message. A success message, etcetera. OK, so this is basically a quick forum that they have created for us. Now we can actually just take this right here and Let's say I want to add in a single line description right here. So right here we have the 2nd 1 right here. And maybe you want to add in something, like a paragraph text. So right here, we'll go ahead and change the names right here. So I'm gonna go to settings, and right here, I put like name now, Is this required or not required? So adds up to you. I'm gonna click on save. And right here again. Same thing right here. I'll do something like, um, message. And then maybe you'll hear a lot of email address. So email address settings. I want to make this required. Okay. And then right here will do check boxes, or you can do a select box. Um, you know, whatever you would like to add, there are a lot of gadgets here. So here, maybe you want to do something like, um, nothing. That's enough. Maybe just name as an email to keep it simple. You know, I think that's pretty good. So success message, you know, successfully sent successfully sent to being safe form. Now we can actually basically just use this this Ah, this contact form. So right here. This is the contact form that we have created. So I'm gonna go ahead and use this one. Now, I need to grab all of this, and I'm copy this. Now it's going over to our contact form. So pages, all pages contact us. All right, So all the meat did you now is just go ahead and we're going to scroll down right here, and we're going to use the WordPress widget. So right here, under award press. Want to take the arbitrary text and just go ahead and just drag that right there. And we want to take the short code and simply just paste it in right there, and then we'll click on save and voila. Now we have name, message and email, and they can just go ahead and submit their message. So that is it, guys for the contact us page, we basically created a fully functional contact us page have given them their map. We've given them the title right here, the office and the contact form as well. That's pretty much it for this section, guys. Also, let's go ahead and maybe adding another section right here. So I basically created another section right here on the bottom. And the only thing I did was I basically just added a new section right here. And actually, we can do this two ways. We can go to two columns and right here I can just go ahead and just add in a heading text right here. So it looks like that's and then I will go ahead and add in a text editor right below that . And also I did was basically go to section and then from section I went to advance. And I just basically created a margin right there just like that, and also right here under this section under this column, you can also add in a margin as well. You want to basically align the form to ever you want it to be. You can do that. So that's basically a quick rundown of how I created that second section right here on the contact form. So I said you could make this may be a little bit longer to maybe kind of match up to this text because this section right here, you can see that the contact box is longer so you can do that and also the your message will actually look a little bit bigger right here. Maybe we can make that a limit bigger when we create the contact form. So other than that, guys, that's basically it for the contact form. Section two. Pretty simple. Pretty straightforward, right? So I will see you all in the next section. 20. Blog: Hey, guys, welcome back. So now we're gonna talk about blogging. So in this tutorial, we're going to talk about how to make a blawg post. And I'm also gonna introduce you all to the pro version of L. A mentor because it does have some special features referring to the block post. So right here, if you want to start a new block post, you go right here to plus new and go to post, or we go down to our dashboard right here, and we can actually access it right here by going to posts and going to add new. So this right here is basically just creating a blawg post. And remember, we can also use elementary to design our blawg page. So instead of having the default one, we can actually create a custom blawg post. But right here, I'm gonna go ahead and put blawg post one, and, you know, I'll go ahead and put in whatever text you would likely here. So, for example, I'm just gonna go ahead. And so, like something simple right here. Just, you know, put whatever you want to talk about like a you know, cool stuff and right here. You know, we can put this a line in the center. Ah, line to the left weaken bullet we can italicize. It's all sorts of really cool features. Also the troubled. I'm sorry that the toolbar toggle does give some extra features like, you know, in denting. He wants to give special characters. You can put these in your posts or, you know, if you want to have a specific text color, you can do that as well. So there's a lot of little options right here that you can use to sort of, you know, mess around with your settings if you'd like. Now what important thing I want to do is go over here all the way down here and set a featured image. Guys, whenever you're doing any sort of post, you must have a featured image. It's basically a picture that represents your block post. So here I was gonna go ahead and put this guy right here and said that as featured image and that's basically it for the block posts. It looks like we, you know, we added some content in pretty simple also go on a credit category for it. So for example, this block post is going to be talking about animals and you might have other block posts that talk about something else, etcetera. So that's basically why you'd want to categorize your block posts and also tags. So maybe something like a dog animal, etcetera, And these other options are basically standard for the block post page. So let's go ahead now and publish this post already. Now we actually created page for this. We don't even have a page for the block posts. So right here under pages will go to well, actually load all pages. I think we might have one. No, we do not have one. So right here, we're gonna go to add new and type in blawg, and soon we just publish it right there. Okay. Now, in order for the post to appear on this page, we need to set this up in the theme customizer. So right here under thier I'm sorry. Customized. You click on that. Now we're gonna go down to static Front page. Now you see what says post Page? We want to make that the blawg page. Okay. And then we're here. We'll go to save and publish and also you notice right here. The menu now appears right here under Blawg. So the page looks good. Now, let's go ahead and go to our block page. So right here, I'm gonna go and click on Blawg. And there you go. So we have this cool little post right here, and you know, it has ah, featured image. It has this information right here, etcetera. So this is basically guys the block post in a nutshell. It's very simple. It's very straightforward. It's not hard to understand. And what the's are right here is these are basically widgets. You know how on the footer right here how we have those widgets. You can actually place the's on the side. So going over here to widgets, you see or hear it is right Sidebar. This section right here controls what you see on the blawg. Now you can add in your own you can in a Facebook like box. You can add in all sorts of cool. You know, whatever plug into you can find on the markets. But if you don't want thes, you can just go and say, you know I don't want to show archives. Click on delete, and I don't want to show categories delete, and I don't want to show meta and delete, that's And if you go back to our blonde page, you're gonna notice that Onley three of them appear here. So we have the recent posts and the recent comments. The other ones have disappeared as well. So that's a quick natural guys on how to make the block posts. And like I said, if they click on its there you go. There is the block post and making log in and they can leave a comment, etcetera, whatever they would like. Okay, so that's a quick summary of the blank page. But let's go ahead now and go back to our post. So gonna go to my post right here and we'll go to block post one. And you know, if you want to get customizable, you can add in that contact form right here. So, for example, you can click right here adding in the contact form, or you can add in a picture right here by going to add media and simply just putting in a picture. And let's say you wants to align this in the center you can do that. I mean, like this to help give your blog's some, you know, some. Some feel some customization. You know, it looks looks good. And also, um, other than that's that's basically it for the block post. But, you know, you also can edit this with the elements or Paige Miller. So right here on the click on Update, and we're gonna make a new post, we're gonna make a brand new post a new post, and we're gonna do block post one now and here, instead of just posting and content, I'm actually going to edit with L a mentor, and we can actually create a custom post right here. So right here, you can see now we can actually use this instead of what is given us. I by default. So maybe want to add an image right here. We can, you know, put in the image right here. And then right here, we can go ahead and say, you know, I want some text right here. I'll put in some text, you know, the most amazing trip, the most amazing horse and weaken center. It's And here we can go ahead and put maybe even a Google Maps, maybe even an icon. So when you're making these block post guys, I recommend using the elementary Paige Miller, because you have much more control over what you can do. And let's say, for example, you don't want this stuff here you don't want this year. You just want a picture and some content, you know, all that stuff to show. Let's go ahead now and go back. So we go to my dashboard right here. Now, when you make the block post, So right here, I'm gonna do block post, too. You would just do the same feature, guys, you would go down here. You would say I want the content, but I don't want any sidebars. And then right here, you're gonna say I want it full with, and I don't want the title to show. So right here. If I click on preview changes, it's basically just going to here. I'll go ahead and do it like this. It will be a little bit more clear, so I'm gonna click on publish right here and now I'm go to edit with, uh, the page builder. So now this is our post guys. So this basically is our post, and you can go ahead. I mean, you can insert a pre made layout for your post. You understand what I'm trying to make you think? So you can basically put anything you want here as your block post, and it's not considered a page is just your post. So let's go right here at Template. I'm gonna go and say, you know, I'm gonna just put something right here like Thea the layout one right here. And I'm gonna answer this, and I'm gonna go ahead and save it. And this is your new blawg post. This is a block post. This is not a page. This is a block post. So going back over here, I'm gonna go to view the page. Now, this is a post. So right here, you can see that this is the actual post itself. So you don't You're not limited by what the theme conduce that the page bowler can do anything you know, get even create amazing blog's, you know? And also right here on our blawg, you can see that the post is there. So, like I said, you're not limited to basically what the block tells you to do and all sorts of really cool features. Now, also, you might want to basically limits the amount of stuff that people see. So in order to do that, really go over here to posts and we're gonna go ahead and click on one of these post right here. Such is block Post, too. Hey, guys, one more thing. I want to point out if you want the excerpt on the bottom to show, you need to go to screen options up here and click on excerpt. And now you have the excerpt option. Okay, so right here under excerpt right here. Go ahead and just type in what you want them to preview. So this is a really cool blawg post click click here and also scrolling down right here. We're gonna put us featured image right here. So I'm gonna put featured image, and I'm gonna pitch a picture of this crow right here and use this as my featured image and then we'll go to update. So if I want to basically have Onley this right here and the crow, we have to go to the theme customizer and change that in the settings. So right here, I'm gonna go to customize. I'm gonna go down to Blawg and really go down to Onley. Show the excerpt saving publish, and we're done. So now when somebody clicks on the block, put post right here, they're just going to see what we told them to click on. I'm sorry, what we said, Teoh, we put in the excerpt and also the image they click on its they will be taken to the blawg post. Okay, so that is how you would basically used the blawg now for the pro version of Element or it actually has its own. So let me show you all what I'm talking about. I'm gonna go ahead and close all these tabs, and I'm gonna leave this one open, so we're gonna jump to my other website here. All right, so this is my other website, and I actually have the pro virgin installed now, right here. It says post right here, this page builder, actually, just take all your posts and just put it in a really neat order and align it very nicely. And it's really professional, really simple. And if somebody clicks on this, then they will be taken to the post page. So that is a feature of the elements or pro. If you would like, it's like I said, I have a link in the description. You guys can also use my coupon code. I will also have that you guys will save 10% off your purchase. You don't have to get it. But if you like the layout right here and also remember, you can put this on any single part of your website. So you're not really limited to the blawg page. Let's say, for example, you don't want to have a blocked page. So you just want to basically put in your post right here, That's what it's four. And there's all sorts of features and options about you know how many post you want to show how many columns? Etcetera. OK, so in a nutshell, guys, that is the blawg and also the block post. So also, one more thing I want to talk about is you can sort of do the same with the blawg post on just like the basic one, but it's very limited, So let me show you. I'm just gonna go to the about us page and I'm a go to edit with L. A mentor, and I'm actually going to take a WordPress widget known as Where Is it at recent posts. And I'm gonna drop it right here. So this is recent posts. And if you see right here, this actually has the block post to the block post one and all. My post right here. So in a way, I can sort of put it wherever I want. The problem is, is that it's very ugly, you can say, and it's very limited. And this is the default one you get with WordPress and a lot of the stuff that comes default WordPress guys is not really the best. So you can also put something like recent comments categories or, um, you know, pages, archives, etcetera, categories right here. And I had animals, so, you know, it is somewhat limited, guys. So I you know, I don't really recommend um, you know, the center one with the standard one with WordPress because it's just very limited, and it's just it's just not good, so you can choose to use that, But if you don't want the pro version, I recommend just making a blawg pays itself and just using that because the woman that comes default with WordPress is ugly. You know, no one's gonna like it. No one's gonna No one's gonna click on it. And it's really there's no picture, you know? It doesn't look good. So that's basically the block post. In a nutshell, guys, you guys can choose to have the elements or pro version or create the block page, or even use the standard when that comes with WordPress. Okay, that's it, guys on to the next lecture and I will see you all there. 21. Quiz 3: Hey, guys, Welcome to our last quiz and this quiz. We're gonna talk about how to have the split screen effect. Now. I'm sure you've seen websites where they have half their website one color and then half the other here. You can see that I have half the screen as a light green, and I put an object with it. And then on this section, I just put a basic object. So I'm just trying to emphasize the fact that you can have a split screen landing page or a split screen effect. So I'm gonna show you how I got this. And maybe you can do this for your website if you want the split screen effect. I have done this for clients websites. So it is a very popular trend. So here it looks like all that really did was have two sections. So going over here, I have one section right here, and I have another section right here. All right, now, all that really did was basically I added in a picture right here, but we're going to actually create this all over again because saying it is one thing. But I think for this quiz. I have to basically show you how I got it. So right here, I'm gonna go to add a new section I'm gonna put too. Okay. Now, right here of a click on section and you see how it says more structures right here. I actually grabbed the 66 33 right here. Now I can grab the 50% as well. I just chose to just grab the 66 33. So I'm gonna do that again. And right here. I'm gonna change this to full with and right here. I'm gonna leave the height as regular for now. So I'm gonna go ahead and add in a background right here. I'm gonna add an image I'm going to add in this image right here. All right, so we have these two images right here. Now, I want to basically start to stretch out this page a little bit. So for the height, I'm gonna put fit to screen. So now it is just fitting to the screen right here. Actually, I'll do something like men height. We'll do mean height. We'll do Men hide at eight. Or 7 79 79 right So I have these two boxes right here. Now, all I want to do is I'm going over here and on this section. I'm just gonna taken image. I'm just gonna answer that image. And right here, I'm gonna go ahead and choose the image and put it right there. And on this section right here and guys, you can put anything you can put in text widgets. You can put in any of these. I am just doing this just for two Tour purpose is just to help you get more ideas for your website. And over here, I'm gonna go ahead and put in this one right here. All right, So we have these two images, and also you guys can change the size of these. You know, if it's too big, we could make it a little bit smaller, etcetera. Oregon habit medium. Whatever you would like. All right, so over here, I want to actually change the section of the padding. And also, I want to add it and overlay so over style right here. I'm gonna go to actually, no, I'm gonna go to my column here. We're gonna do in the column. So when doing this, guys, it's very easy to get confused to click the image or click the section or click the column . So for the split screen effect, you're gonna want to click the column, okay? And then for a background type click on that. I wanna have a color. You know, I want to add in like, a blue color, but I want to make a transparent color. So let me where people can actually see a little bit. So something like that right there. Ok, now I'm gonna go to the advance section right here, and I'm actually going to disable. I know. I'll leave the padding and we'll add in some padding. Well, I don't 200 or will added something like 300. All right, so we've added in the padding for 300. Now, if you want to just basically add in enough padding right here to just cover the top and bottom so we can actually go back over here and put this right here and enable this at 300 and enable this at 300. Okay, so you can see that this section has been cleared and everything looks pretty good now as for this section right here. Let's say for example, you want to go ahead and push this section down over here. We're gonna actually click on the ah column right here, and I'm gonna go to advanced, and we're just gonna add a margin now. So now we're gonna add in a margin right here. So we're basically contradicting each other. Now I'm saying No, no, no, no. I know you want padding, but I want to go down, so I'm actually going to push this section down to basically get that effect. So that is another way how you guys can create this effect. It looks really good. And like I said, it's it's all about imagination guys and just figuring out what you want, you know, right here we can add in like a ah landing like a bunch of tax. And right here we can put like a girl looking, you know, to the left. And she can kind of like, be like, Oh, my gosh, those prices are so cheep, you know, something like that. So this is basically how you can create the the the effect that this landing page is basically split screen now I want to show you one more thing for some images like this right here. You might get this section right here. You need to make sure that when you put in your image right here, So I'm gonna go to section. So you want to make sure that the, um that the ah, the the section right here is actually under auto. So I think it's under the the column right here for the border type. Let me see here. So it is under the section, right here it is under the style. Oh, yeah, Right here. Ok, so it's over here, guys, You know, I do get lost. Sometimes I I use the page polar, but I don't memorize where all the options are. So when you do something like size, you want to make sure it's other either a container cover, so contain you might still have this effect right here. But if you have the the, um, the cover depending on your image, this will actually cover the entire section. Okay, so that's it. Guys, for this quiz, I hope I've helped you out. By using this strategy, you can create the split screen effect on your website to sort of create this illusion that the screen is split in half. So I hope that help you out. Sorry. You know, I don't memorize. All the options are on this page. Builder. I I use hundreds, but this is definitely one of the best page will as I've ever seen. So let's go ahead and go on to the next lecture. Guys, I'll see you all there. 22. Customer Footer: Hey, welcome back, guys. So this is gonna be a little bit more of an advanced tutorial. And I wanted to use this because I want to help you understand that Paige Miller. A little bit better now if you scroll down right here, you see this footer? Section the about the pages and follow us. Now, guys, this is not a footer that comes to the theme. I actually just created this myself, and I basically have the illusion of this is our new footer. So instead of using the default widgets that the theme gives us, we can go a little bit further and basically create our own footer. So I'm gonna show you today how to do that. So right here we have an about us, our pages. And then we have follow us with these social icons. So I'm gonna go to this page right here. And if I scroll down right here, we usually use these widgets right here. But if you want to get a little bit more customizable, I'm gonna show you how to do that. Sorry. Here. I'm gonna go to edit page. Now, before we do this, we need to change some settings. So under the foot or witness right here, we're gonna go ahead and put zero widgets. So basically saying I don't want any of those witches at the bottom of the page. So now when I click on edit with L a mentor, it's going to show that there is no we just at the bottom. And then from there, we're going to use our own custom footer. So right here the widgets are now gone. And right here we can just go and click on Add a new section and we're just basically gonna create a footer. Now it just like the widgets by click on, add a new section. How many columns do you want? You want a two column widget? You want a three column widget for column widget, etcetera. So I'm gonna go ahead and select four and right here I'm gonna probably put in the heading right here, and I'll go ahead and put this center and I'll just put about okay, and then right here. I'll just go ahead and grab some text editor right here, and I'll place that right there and right here we have some dummy text, so this is basically our about section. All right? Now, if I close this right here, you're going to see that, You know, it does look pretty good. And if we give it a color, it's going to represent a footer. So going back over here, I'm gonna go to the, um I'm gonna go to section, and you can actually decided to leave it full with or not. It's up to you if you want a full with foot or not. If not, you believe it. Boxed. So right here, I'm gonna go to style the background color. I mean, you could have a foot or you have a video playing at the bottom. You know, you can actually insert a video right here and have a video playing in the background if you would like. But for now, I'm just gonna go ahead and select a basic color right here, all right? And then going back over here, I want to change this. Maybe to white and also right here. I'm gonna change this to White as well. Okay, now, this section right here, what should I put here? Maybe pages now? Also, you guys have noticed that on this section right here. Have this line. Now, by now, you guys know what that is. It's just the divider, right here it is the divider. And I basically just put it in, and I can, you know, uh, reduce the gap a little bit and maybe make this white, and I will actually reduce the size of it. So I'm gonna center it and then reduce the with just like that. Okay? So over here, we'll do something a bit different. Walks to make a page is now this is where links get into place. And if you remember the beginning of editorial, I talked about links. Now they change colors. Now we're gonna talk about that. So right here, gonna put pages and I'm going to center this right here. And then for the style, I'm gonna go ahead and put white. Also, I can add in the divider right here. I just go ahead and dropping it right there. And the gap will just reduce the gap. Put this centered and I will do you still with and then I'll put in the color it here now, right here. We're actually going to use the heading again and we're just going to basically name the pages that we currently have. So basically saying, Okay, how many pages do you have? So right here. I'm actually going to drag this right here, Put it at the, um, let's see right here. We'll go ahead and drag this. It does get a little squishy sometimes. So here, I'm just gonna put home, and I'll center this and you see what says link right here? We're basically just going to grab the home page. So this right here, we're going to use this, but we need to start it at http. Remember that http and then right here will put www dot l a mentor tutorial dot com. Now, for the size, maybe I want a little bit smaller. Something like that. Perfect. Then here we will change it as white. Okay, so now if you hover over it, people will actually go to our home page. So instead of basically using the widgets, we can use this and I'm gonna have a duplicate this maybe three times. So here I will go ahead and put the about, And if you guys need help finding your permit links right here. Oops. wrong website goop sees we're gonna go to about just go to click on the about and then simply just crab this link right here and just copy it. Remember, you must start out with a CTP. So, http and then we'll go ahead and just spayed or paste that in right there. And there you go. And make sure there's nothing in the front. Make sure it's Yeah, it's all good. So we have the about us and then right here, begin to go ahead and change this to something like contact us. So put this under contact. And then once again, we'll go over here to the contact section and was simply described this link, and we'll go ahead and just pace that link right there. All right, Perfect. So number click on safe. All right. So before I go to the next section, if I hover over this, it's going that basically you see how the Texas Black I want to basically show you how to change that. So right here, I'm gonna go to view the page and we scroll down right here. You've you over over its black. OK, so it is black, and we need to basically make sure it is the color you want it to be. So right here, Go to customize. Okay. And, you know, I don't remember a word is exactly so I think it's under the, uh, trade layouts right here. Your primary navigation header. Know the container? No. Maybe under footer. No sidebars? No. Okay, so it is in here somewhere, and we're gonna go ahead, and we're just gonna keep going one by one until we find a guy. So there it is. So colors so right here we have the link color and the link color hover. So you want to basically make sure that the length color is what you want it to look like. And also the length color, the hover over is what you wanted to look like. So I hear Put blue. And here we go ahead and put red just for control purposes. And I'm gonna go ahead and say that Now we'll go ahead and scroll down. Now the links are red, and if I hover over it, it's blue. Do you see that? So that's basically how you would create that section. Okay. And if I click on it it's just gonna take me to my website. So I'm linking it to my home page. So that's ah, more advanced feature on how you can do it. And remember, make sure that the permanent is correctly, like right here. I did not enter it correctly, so I need to change that. And also right here. I did not as well. So here we go to edit with L. A mentor, and I'm just going to scroll down right here. And I would make sure see right here I do not. I entered it too much. So a CCP Elementary doc com about and perfect. All right, so I'll just save it. I'm just showing you that I you know, I made a small mistake. All right, Now, let's go ahead and do the social media icons. So I'm going to leave this call him right here, and I'm just going to put in some social media icons. So going down right here, we can basically just grab the social media icons from this section right here. All right, so we have the social media icons now, the link color is red, so maybe you might want to change that because the link color also influences the social icons. So here, I must say, you know, I kind of want him. Ah, you know, we can change, You know, the style of it. If we would like, we can have a circle like that. But another thing that you might want to do is to grab a heading text right here and put follow us. And then from here, we will go ahead and leave that there and over here, we're going to grab the divider on DSI if I get it. Okay, good. I got it. And I'm a reduced the gap center. Make the with little bit smaller to 20 and then I'm going to add the color in. All right. And then right here. Maybe I need to change this color to something like white. Okay, so now let's go ahead and just see how it looks. I'm just going to save it right here, and then we're just going to view the page and just see how it looks. So here, I'm gonna go to view page, and if I scroll down right here, you're gonna notice that it blends in perfectly. We have a foot or right here. You can even add in your your logo. Your company logo. Right here. Give some description. I'm just trying to basically open your eyes a little bit to make you think of the possibilities you have with this page builder. If there are no limitations. So instead of using the witches they give us, we can create our own custom footer. So that's it for this lecture, guys. Uh, I hope this helps you out. I would personally use this because I think this looks much better than the standard widgets. OK, off to the next lecture. 23. Mobile Optimization: All right, guys, Welcome back. So in this course, we're gonna talk about mobile optimization and guys. This is a very important lecture. Mobile optimization is extremely important because as of 2016 there are more mobile users than there are desktop users now. So you really need to make sure that your site is optimized for mobile. You must do this. It's a requirements. If you don't do it, you're gonna have problems on the road. All right, so let's go ahead and get started. Let me show you how to optimize your website. So right here, click on this little icon right here in the bottom right here. And we have three options. We have desktop tablet and mobile. So right here. If I go to mobile, This is what my website currently looks like on mobile. Now, the picture is not aligned properly on mobile, as you guys can see, maybe I want to change that. So right here, I'm gonna go do style. We're actually gonna click on this section right here. Anima go to style. And I'm basically going to change the position of this right here to get it aligned properly. There you go. So right now you guys can see it looks better on the mobile device. Now, let's keep scrolling down right here and let's go ahead and just start cracking down problems one by one. Now, generally, mobile is very, very easy. It usually optimizes very well, but let's say you want to change something. So right here, I'm gonna go down to style right here. I'm gonna go to content now. You see how there's three little bars right there. Circles. Right here. This is basically saying this is optimizing it for the mobile device. This one is optimizing it for the tablets, and this one is optimizing it for the desktop. So, for example, let's just say I want to go ahead and change the content right here. So I'm gonna open this up right here. Now, right here. You can see that I am currently changing the mobile version and I could make it bigger. I can make it smaller, etcetera. So, on mobile devices, they're going to see something like this right here. Okay, so I'm just letting you know that this is basically how you would make changes onto your websites with the page builder so screwing down right here. Let's go ahead and keep finding the see if you can find something that looks bad. See, right here it is basically fully optimized already. It's pretty incredible. But let's now check the tablet version. So I'm gonna go to tablet right here, and it looks like we have work to do. Yes, we do. So this section looks OK. This section looks ok, but scrolling down right here, this section looks crappy. This does not look good. So basically need to make sure that we fixed this section right here. Now there's a few ways we can do it. We can either reduce the size of the text or I think that's pretty much it, but we can reduce the size of the text, so let's do that. So right here in the content, I'm gonna go to you. First off, you see the title, the titles. Okay. Right here. But we need to go ahead and change the description right here. So the description I want to basically reduce the size right here. Something like that. Right there. Right, that looks a little bit more responsive. Do you see how that looks now? so going over here, I could do the same exact thing going to style content. Open up the topography right here. And then we're going to change the size. So something that looks like this right here. So this is very important. Guys. When you are optimizing your site for mobile, you need to basically skim through your whole website to make sure that's it is fully responsive. So I'm sorry you had to do to right here, so I don't I really don't know. You know you guys. Yeah. You guys got it. You got it. You got it. So it's going down here so you can find something else. Right Here we have these numbers. They look like crap. Let's change that. I'm a go to style right here and go to the title right here and open up this section. Now I want to basically change the size of that. So this section looks OK. Amazing sales, but I need to change this section right here. I need to change these numbers because it is just a little too big. So over here, under numbers. I'm open up this and we're going to change the size of the numbers. Something that looks we can push it just like that. Okay, so now the site is basically optimized for the tablet. Now, let's go ahead and check the phone. Perfect is fully optimized for the phone as well. So by doing this, guys, it's basically, you know, you just have to basically find out. You know what you wants to accomplish on etcetera, and, um, like I said it, Zaveri Simple. It's very easy. You just have to go through your sight and make sure that you make these changes for each specific device, Okay? And maybe right here, maybe I want to reduce the padding right here. You know, there is a little bit too much space right here. So right here, I'm gonna go to my section right here. I'm gonna make sure that this is Ah, see how this looks? Well, it looks OK there. And then the mobile. Yeah, Maybe I could just reduce the padding just by a little bit. So right here. I'm going to Maybe it's the right here and go to advanced. Ah, I can I can do some like this right here. I'll go ahead and put a top margin. Let's do some do some skills to some secrets. Well, actually, doing that actually really help just by changing into zero. You see how I did that? I just basically reduced these all to zero. And it looks like it just, you know, by default, it sets it to zero. So, I mean, that looks pretty good, right? For mobile? Yeah, I think so. So I'm gonna go ahead and click on safe. I was actually gonna change it to minus something, but I think that looks pretty good right there, too. Okay, it's going down here. Let's go and check another page. Let's go ahead and go to our menu right here, and we will actually have to go to our dashboard. And we're gonna go to all pages and let's just go ahead and look at the about us page. Let's see if there's any need for mobile optimization or tablet optimization on this section. So right here, I'm gonna go to tablet and scrolling down. You know, it does look pretty good on the tablets that's going and try the mobile right here. We're gonna go through the mobile now. Now, this section right here, you could change. You know, we could basically align in the center something like this right here that looks a little bit better on mobile device. And maybe we can also reduce the size of this text. I think it looks somewhat okay, though. Our team Bob. So like I was like I said, this page bowler is also super responsive. I mean, there is very little changes I have to make Teoh to make this mobile friendly. So it's going back up here. We're just gonna go and take a look again, and that is basically it. Guys. So remember to go through and go through each and everyone to make sure that your site is fully optimized for mobile and also the tablets. I cannot stress the importance of this guy's. It's very, very important. There are more people shopping with their phones than people actually using their desktop today. Okay, so that's it for this section, guys, I hope this helped. Let's go on to the next sections. I will see you all there 24. Pro Version: a guy. So I want to introduce you all to the pro version And what the pro features have that the free version does not. So right here, I'm gonna click on this. Now you see what says pro elements? So right here I have post portfolio form template a priceless a countdown slides and also will commerce products. So this right here is the slider right here. So this is basically a slider, and you can, you know, create animations for it. You can choose how you want it to look. There's all sorts of customization for so right here on the edit slides, you can see that I have a background color. I'm sorry. A background image. I can add a background overlay. I can set the speed of it. I can set the height. There is a lot of customization that you can do with this slider. So if you guys want to purchase the pro version, I do have a coupon code that will save you 10% your purchase. So that's just if you're interested in the pro version, you can get access to the slider. Now. Also, there's some other ones you know, earlier we talked about the Blawg, and this right here is basically the portfolio. And the portfolio is just another way on how you can present your blawg. So it also looks really, really good. Another thing we can do is the contact form. So this right here is our contact form, and this was created with the form plug in right here. So you don't need to go get your own plug in. You can just go ahead and get it yourself. So right here we have the portfolio. And also there is the posts, which I showed you all a little bit earlier, which looks a little bit something like that. So it's a little bit more cleaner than the standard way Wordpress gives it to you. So this is another way how you can use the pro version and going back over here. We have the pricing. So right here you can see the price lists. This right here is the priceless. It basically discreet his whole prices for you. So if you are in a rush on industry or some sort of industry, you want to show a menu. This is a very good feature. Next we have the number counters. So this is the number counters right here, and there are a lot of ways you can customize. It's and, you know, make it a little bit more customizable. So it's pretty simple and straightforward. You can program it to have, like, a countdown. You can program it to have all sorts of really cool stuff. So this is the countdown widget, and also we have will commerce products. So if you decide to sell something on here, all you need to do is just go ahead and take this, drag it over there and then they're your product is, it appears, and I guess that you can customize it. You can do all sorts of really cool stuff with it. You can change the entrance animation for its etcetera. So that's basically most of the pro version guys. If you guys were interested in that, there is a coupon code. I believe it is Darrell Wilson. Something. It's in the PDF file. I really don't keep track of my coupon code. So that's it, guys, for the pro version, it does have some cool features, and there are a lot of cool ways you can use it to implement on your website. So that's it for this section, guys, I'll see you all in the next section. 25. Phone Section: All right, guys, welcome back. So let's go and added on the phone right here, and we'll actually add in some text along with a call to action. So the first thing we need to do is make a two column rope. So over here, under add new section will select two. And right here we're gonna grab an image and I will choose the image. And I'm gonna grab these phones right here and enter into media. Now, Guys, one thing I want to tell you is when you enter images, make sure it's a PNG file. The PNG file will actually have that transparent background. So if you have a different color background, it won't matter because it will blend in perfectly. OK, so if you're grabbing Jay Peak files, the J pic files will have the white in the background, and it will not look good. Okay, so make sure it's a PNG file. Okay, so I put in the image. Now let's go ahead and add in some text over here. So right here, I'm gonna grab the heading and right here. Oh, puts this tutorial is simple. Another thing I want to talk about is when you do, you know, put it in text on your website. Capitalizing the first word of every sorry first letter of every word is ideal. And a lot of people do that because it just looks good. And that's basically what everybody else does. So I want to basically make this in the center or actually, no, I want to put this to the left. I want it close to the phones and right here in your style. I'm gonna change this text to Black. Now, under the advanced section, I want to add in a margin. So right here, I'm gonna click on that little linked together, and I'm gonna add in a margin. So you see now how it space apart. So that's basically a good reason why we can use the margin. Now, there's two ways to do this section. We can actually just over here, we can drag the text editor and right here, Or we can go ahead and grab columns and we can put the columns there instead. So there's two ways to do that. Now what the columns does. Like I said, it just basically creates additional columns within the section. But I don't want to do that. So I'm gonna click on X and click on delete. But that's just another way to do it. I'm just showing you there's other ways to do it. Now, under text editor, I'm just gonna grab that. And you see how the blue line is right there. It's gonna drop it, and I'm gonna grab my famous dummy text, and I'm simply just going to put it in right there. Well, uh, and of course, being changed, the style contained the text color. We could make it a line, the centered. But right now we probably want to do either justified or left justified. Also looks good, but I want to keep it to the left, and I want to add in a call to action. So this button so we just drag it down, put it right there. Now I probably want to change the background color. You know, it doesn't look good like that. So under style, we can change the but the text color to whites and the background color to maybe something like black just like that. Perfect. That is perfect. Now I want to introduce you all to a new widget that we haven't been using. And that is the it is called the Image Carousel. Yeah, the image carousel. We were going to use this right now. Okay, So I'm gonna grab this and simply just add it in the news section. Now, what images do you want? Well, we need added or some few images. I want ad in this one. I want to add in this one. I want ad in this one, and I want to add in something like this right here, too. And I'm gonna go to creative gallery. You can give these names, but for this I'm not going to give them names. I'll show you why. I think it looks good just like that. And I'm gonna go to enter into gallery. Now you're gonna see that the images air there, so the images air there and people can scroll through it and check it out. But let's go ahead and do a little bit more control. You know how many slides do you want to show? So for example, if you really want to to show Onley tour showing Feeley won't want to show you can have only one to show, but I want maybe around three. Now it's sliced the scroll. You know, we can leave that as probably like no one for basically each only one will scroll or you can have two slides out. Rules will scroll, etcetera. So image stretch. You want to stretch this, we can stretch it. I don't like the way it looks because it does look a little pixelated. So right here, I'm gonna do no navigation. We can have it as arrows and dots. Now, the reason why you can't see the arrows is because they're white and we will change that in just a second. But we could have arrows and dots. We cannot just arrows. We can have dots, but I will leave it as a row and dots linked to we can make this link to a specific section . So let's say these are your partners. You can click on custom your oh, and if somebody clicks on these, it will take them to that. Websites. All right. Going to none. Let's go to additional. So pulse over hover where basically it will put pulse over the hover the auto play. So do you want these to continually keep scrolling like that. If you want that, you can leave it as yes. Now. Auto play speed. So it says 5000. Now, that's not 5000 seconds. It's 5000 milliseconds. So M s. So let's say you put it at 2000. It's gonna scroll a lot faster if we do that. So you see, it's gonna wait around two seconds. One to boom. Okay, it's supposed to go, but yeah, it's probably because we're on the page builder, but you can reduce it as well to like 1000 now. Infinite loop. Do you want us to keep going? Do you want it just to keep going? If you want that, go ahead and put yes, the animation speed. So how fast you wanted to enemy like like you see right now, How has that animation effect do you want it to be faster? You can put something like 1000. We're now it is a little bit slower or even do something like 100 where it's gonna go super fast. See that super fast? But for now, I'll just leave it at, I think, 500 to 300 and then direction obviously left her rights. We're going Leave it at left now for style. Now for the aero position. First off, let's change the arrow color so we can see them. I want to take him to black so you can see the arrows right here. Now for the aero position. Do you want them inside? Or you want them outside the box. So outside they will be outside of the box. Inside, they will be inside. And of course, the dots You can change. You want them inside or outside. You can make the dots bigger or you can make them smaller. And you can also change the dots color. Now for image, we can choose to have it. As you know, custom. We could have custom spacing between the images. You can make these a little bit closer to each other or farther apart for the border type. We can choose to have it as doubled. We can have it as dotted. We can have it as dashed. And we can change the with of those dots if you would like. And we can also change the color of those specific dots. Okay. But I don't want to get into that too much because that's just time consuming. And SS two core and decoration, I think seem like this is pretty standard. I think it looks pretty good. And of course, for the advanced we can change the margin. We can change the padding. Maybe you want to push this down a little bit or push it to the right or pushes to the top , etcetera. And with everything we can have entrance animation. So you see how we have the entrance animation? Well, what it comes up like that. So for every setting, we can have animation. Okay, keep that in mind, because that's for every single module that we use. Okay, so that is basically this section, guys, that was basically the phone and these fighter session. Ah, the next section. We're actually going to go to the next page, or it is going to talk about the about us section, so I will see you all there 26. Theme and plugin: All right, guys, Welcome back. So now we're going to install the WordPress theme and we are going to add the page builder . So right here under appearance, go to themes. Now, how WordPress works is basically you install a theme on your website. Now, right here you can click on add new theme and these are all different types of themes. It's basically the structure of your website, how it looks and the feel of it etcetera. Now each of these have different page builders. Ah, lot of them have different styles of customizing, etcetera. So we're gonna actually going to use a very highly rated theme called Generate Press. So right here under the search bar, you can type in, generates press, generates press, and it's gonna be this one right here. And you can click on details in preview and it is very highly rated, you know, 309 reviews all five star. So we're going to be using a very good WordPress theme. So right here under this install button going to click on install, and this is going to install the theme on to our WORDPRESS website. So this is basically a small preview of how it's gonna look. But of course, it's not Look anything like it is. It's gonna look much better now right here. Gonna click on activate. All right. And let's just say you want to, you know, check it out. Check out your website and see how it looks. You can click on visit site right here. And this is our new site. Very boring. Very not pretty. OK, but don't worry, we're going to make it look amazing. So over here under our dashboard. Next we go to plug ins and we're gonna go to add new now a quick overview of plug ins. The best way I can describe plug ins are like APS for the iPhone. It's basically like APS for your website, such as creating a forum such as creating a social media website to click right here on our popular. We're gonna get all sorts of different. I mean, there are millions of plug ins and they all have different features. This right here creates a contact form. This right here improves your optimization on the search engine. This right here, it creates a capture. There are so many and the best way like I said to describe it is they are just APS for your WordPress website, and I could go on and on with with her with bludgeons. But there's over thousands of them right here. You can see there's thousands and there's over 34 pages. So really quickly. All we're going to do is install the page builder and we're going to be using a free page builder and is just hit the market and it's really, really, really good. So going type in L. A mentor. L a mentor so element or and are going to be using this page builder. Now This peso just came out, but it is already hitting blog's. It's already hitting all sorts of websites because of its ease of use. It is so easy to use this page builder so going to click on install now already. So it's installing. And these are also extra plug ins for this page bowler because it's go. It's getting so popular that people are actually creating plug ins just for this plug ins. Oh, it's actually becoming very, very popular as time goes. So here, go to click on activate. All right, congratulations. So we've installed the WordPress theme and we added Elemental, which we are going to use this to install our design our pages now. Like I said, it's totally Dragon dropped. Guys, it is super easy to use this page builder, and I'm gonna show you how to do that in this tutorial. So next, let's go ahead and go to the next section where we are going to create some pages, so I'll see you all there. 27. Ending: All right, guys. Congratulations on completing the course. Give yourself a hand. I hope this course helped you learn how to use WordPress better. I hope it helps you learn how to use the elements. Or page builder, which is going to be I'm telling you guys is gonna be the number one free page builder on the market. Now, by then of this course, I hope you guys can make this websites. You guys have trouble. Feel free to ask me questions. Let me know if you guys need help with anything. Also, I want to tell you guys about my YouTube channel. So my YouTube channel is everything. WordPress whether you want to learn how to install Google analytics, whether you want to learn how to install the Yoast Seo plug in or even set up a live chat on your website for free. My YouTube channel talks everything about WordPress so that they said Guys, I hope you guys give me a good rating and I hope to see you all in the next course. I will see you all later.