How To Make A Wordpress Website - Elementor Tutorial | Darrel Wilson | Skillshare

How To Make A Wordpress Website - Elementor Tutorial

Darrel Wilson, Wordpress Designer, Digital Marketer

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
10 Lessons (1h 13m)
    • 1. Intro

      2:12
    • 2. Elementor hosting

      3:03
    • 3. Elementor install wordpress

      2:37
    • 4. Elementor setting up website

      6:56
    • 5. Elementor designing home page

      7:02
    • 6. Elementor designing the template part 1

      8:34
    • 7. Elementor designing template part 2 + extra pages

      7:50
    • 8. Elementor creating contact form

      5:46
    • 9. Elementor theme customizer and blog

      15:20
    • 10. Elementor advanced features + ending

      13:17
23 students are watching this class

About This Class

Come learn how to make a wordpress website in 1 hour! ✅ I will show you step by step to easily create your wordpress website in a few clicks! Lets Get Started!

Get Hosting: https://darrelwilson.com/siteground70off

Download FREE Elementor: https://www.darrelwilson.com/elementor 

Download astra here: https://www.darrelwilson.com/astra

Its simple, gets your domain for your wordpress website. Install Wordpress. Install Your Wordpress Theme. Than simply install a plugin that will give you access to more than 1700+ elementor templates for free! I will also cover different features of the page builder such as mobile optimization, blend modes, and other features that you can use with the elementor page builder I

mage websites: http://www.pixabay.com Unsplash.com

Website To Choose Gradients http://www.uigradients.com

Grab A Logo Here! https://www.darrelwilson.com/fiverr

Upgrade Your Contact Form Here: https://www.darrelwilson.com/wpforms

Transcripts

1. Intro: what is going on? Everybody, My name is Darrell, and today I'll be showing you how to make a WordPress website step by step in just a few simple steps. Now I'll be completely honest with you all. Making a website a few years ago used to be a little complicated, but today it has gotten so easy. It's simple. You pick your domain, you install WordPress, install your free theme and then choose from more than 1725 professionally made templates for your new website and then simply make any changes. You want your website like changing the text, switching the fonts or color. You can adjust the position of these columns. You can also change the images and also move them to anywhere that you want. You can create a beautiful menu, or you can add these really cool shape dividers at a beautiful Grady and backgrounds, a video background or both, and then out of contact form so people can fill it out and it will go directly to your email inbox. And let's not forget your website will be fully optimized for Mac PC. Any tablet in all mobile devices and This is the website that we're going to make today, and as you can see, it looks simply incredible. We have our menu right here. Our logo, this beautiful grading overlay scrolling down right here. You can see that it just looks like a really professionally well designed website. So in this video, I'm not just gonna show you how to make any website. We're gonna make professional and beautiful looking websites. And don't forget, you can add as many pages as you want, so I'll show you how you can add that your about us page. And also, if you want your contact us page as well, and you can easily charge someone $5000 to make this same website. And in this video today, I'll show you how to do it today for free. And don't worry, I'm not going to drive a Lamborghini. I'm not gonna, so you of course. I'm just going to show you today on how to make a website step by step. Now, in case you want to know who I am, my name is zero Wilson and I used to be a full time Web designer. A few years ago. I switched over. And now I'm a full time WordPress instructor here on YouTube. And many of my viewers have watched these two Toral's and made a website for their business . In fact, other ones have actually even started their own Web design business watching these same videos. So if you're ready to learn how to make websites that are professional, that look great, that are mobile, responsive and just really look nice saying this video, I'm gonna show you how to do it today. Step by step. So let's go to the first step, which is getting your domain. 2. Elementor hosting: So we're going to do this in four simple steps. Step one is we're going to get your domain and hosting. So, for example, your website dot com Step two is we're going to install WordPress. Step three is we're going to install our theme and are free page builder. So we can import are free templates. Step four is I'm gonna show you how to make your website look amazing. Now there is a link in the description of this video. It will take you to a page. Looks just like this right here. And this is cyclone dot com. Now I have been through many Web hosting companies. Host Gator Blue hosts and hands down site. Ground is the best. It's the fastest. It also has the best up time as well. And I even tested them against 15 other way posting companies for three months. And cycle came Oppa's number one as the fastest and the most reliable, with 24 hour customer support and even a 30 day money back guarantee. So you can be certain that this is the ultimate and the best Web hosting company to choose from. Now there's three plans right here So we have the grow big to start up and the grow geek. Now, in all my videos, I recommend the grow big option. Because with the grow big option, you can host unlimited websites rather than just a single website rights. And personally, if you're just getting started out, I don't think you need to go geek just yet. And remember, you can always upgrade later. So right here under the grow big click on get plan. Now we're going to register your domain name, so get a coffee. Do what you gotta do to think about your new website. So right here, I'll just do something like elements or guide. L a mentor guy dot com and I'll click on proceeds. Remember, this is your website address. So this is going to be the name of your website. So give it some thought, all right? And right here, we're going to go ahead and put in our counter information. So you put your email, your password yada yada. I'm sure you've all seen these thes screens before. You give him your social security number and your bank account. I'm just kidding. You don't do that. So here you put in your client information. Your payment information with credit card etcetera. Now scroll down right here. And I want to talk about the hosting services. So in all my videos are recommending 12 months because 12 months will give you the biggest discount. And remember, you also get a 30 day money back guarantee. So you're really not risking anything at all in this video and right here for the exercise of is's I'm just gonna say, click this right here. The domain privacy. Because if you don't click on this, people can actually see your personal information. They're going to send you spam. They're going to send you Viagra. They're gonna send you sex pills. All this really weird and bizarre stuff that you're going to get in your email. So please make sure you protect it and have the domain privacy checked. And once you're done with, that's you'll scroll down, you click on. I have confirmed I have read and agreed to the cycle in terms. I'm sure you're all going to read this right here and also this right here, right, So I'll just look the other way. What, you guys do that. And if you want to receive emails from site ground, you can check this box right here. And once you're done filling in all the information, you'll click on pay now. And I will meet you on the very next page. All right, cool. So I signed up for my hosting package. Now, right here. Click on. Proceed to customer area. 3. Elementor install wordpress: right now, they're basically getting our Web hosting account set up for us right here. You can see we have set up sites, so click on set up site. Now. Right here. We have the option to start a new website and migrated websites. And right here under start, a new website will click on select right here and choose the application. So right now we're gonna use wordpress. So click on select now. Right here. Make sure you enter in your email and password. Now, this is actually to log in and make changes to your website. So later on, when we build our website and you want to log back in and kind of change stuff and modify stuff, make sure you write this down so you don't forget it. So what? You put in your email and your password, you'll click on. Continue right here. Now they're offering another service. But for right now, I'm just gonna decline it. You can always get it. I have this on my website Cyclone site scanner. It will basically scan your website every single day to see if anyone's like, put anything like malicious code or anything, but for people getting started. It You probably don't need that right now. So right here, Click on finish now. Right now, Cyclone is actually setting up your website. And since selling WordPress onto your domain so we can build our websites. Also, while you're waiting, go and let me know what kind of website? Your building. If you're building a website for your friend or for your business, I'm always interested to hear what people are building with the tutorials. All right, cool. So our website has been created. So go ahead and scroll down right here and go to manage websites already. And this is basically your new dashboard. So this is the dashboard to always do something. And if you want information about your website, this is where you're going to get it. So here you can make email accounts. You can see your name servers. You can see your I p address page views and also visitors for people who are visiting your websites. Now, on the left side, right here, you'll click on WordPress and click on install and manage. Now scroll down right here. And you should see your domain right here. Now we already have WordPress installed. So toe log in to your new website right here. Just click on, log in to admin panel. All right, now right here is gonna ask us for like a set up wizard. Personally, you don't need to do this. And you can just click on exit right here. And congratulations. This is your to wordpress websites. Your website is now live on the internet. If you want to see your website, you can go over here and click on visit sites. And this is now your new WordPress websites. Let's go back over here. Click on dashboard and this guy to make some changes now to your website. 4. Elementor setting up website: now right here on her plug ins. Click on plug ins and click on install plug ins. We don't need this plug in installed this WordPress starter. It's just basically something to, like help us get started. But we don't really need this and we'll talk about what plug ins are a little bit more just a bit. But right here, click on deactivates Now, also over here under users. If you want to change your password to your email, go to your profile right here under users and also right here. You can kind of change the scheme of your how it looks. I like midnight. I just think it looks a little bit better. But if you want to change the email and password for your accounts right here under nickname, you can change this and then right here in your email, you can also change this as well. So this right here is the email where you're going to If you do like forgot password. This is what's going to go also to change your password right here. Click on Generate password and you can put in any password you wants. And then right here, you'll click on update profile. All right. And there's one more thing we need to do before we start getting a little bit more to the bill. The building process right here in your settings will go to Perma links. Now, I want you to change a permanent right here to post name. And the reason why we do this is because usually and you go to a website, right? You see your website dot com slash about us right or you know your website dot com Dash. Contact us not two zero 9-10 dash 13. There's no reason to have all that. So put it on her post name and click on save changes. All right, cool. So what you done with that? Let's go to make some pages now. So over here on your pages, you click on all pages. Now, these are the pages that are basically created by default when you make wordpress so we don't need these pages. So to delete a page right here, just click on trash. And also here for Conn trash. No, right here on her pages. Click on Add New and that's going to make a home page. So I'm gonna close this right here and under title. Do home right there and click on Publish and publish Now, also, to make another page. We can do a short cut right here, click on plus new gun page, and then it's going to do a new one. I will do about us published that page and then over here under plus new let's do one more and this is do the contact US page. Contact us and click on Publish and there you go. Now, if you go our website right here, click on Visit Side. You'll notice that the pages aren't there. There's nowhere for the pages to click on, so let's go out and create a menu. So over here under dashboard, we'll go to appearance. Emma, go to menus. Now give your menu a name right here. So this is the primary menu. So primary menu and click on Create a menu and those pages that we just created right here , So home about us and contact us. Click on add to menu, and you can always rearrange this, so I want the home page first. I want about us in the middle and the contact us at the end, and I want to make this a primary menu and click on save menu. So now let's go back and check our website right here. So visit sites, and now you see, we have the home page, the about us page and the contact US page. Now, don't worry about all this right here. We're gonna change all of this. I know this looks. This is the default theme they use so we could make our side, like way better. So now that we've actually created a menu, let's go ahead and download the page builder. Now, there is a link in the description of this video, and it will take you to a page Who purchased? I'm sorry. Do get L a mentor for free for free. So you can also get there by going to darrell wilson dot com slash l a mentor and right here you cook on free download. Go ahead and put in your email address describing download. And now you'll see on the bottom left. Right there. It is now downloading on our websites. There we go are sounding onto your computer. All right, and go back over here. Go. Teoh dashboard. Now we're going to install the page builder. So this is what we used to actually build the page. So right here, Click on, add New Now. In short, if you're completely nude to plug in that you have no idea what they are pledging their basically applications for your website. So right here, just click on popular and you kind of browse around. You kind of get understanding, so ah, contact form. This will allow you to put a contact form on your websites. Yost. This will actually help improve the S e o for your websites. This right here prevent spam. You know, it's so you don't get a bunch of weird people asking you for stuff or trying to sell you anything. Well, commerce, this allows you to sell online. In fact, I will have a follow up video on how you can turn this website into an e commerce website. So make sure to check that out. That will be in the description of this video in just a few days when I make this video. But right now, just click on upload, plug in, choose the file, and go ahead and select what we downloaded. So right here L a mentor. Open and click on Install now, So now it's installing the page builder onto our Web sites, All right, and right here. Click on, Activate Plugging and I'll go ahead and close this. Now there's one more plug and I want you to install really quickly. So let's go back over here to plug ins and click on Add New and right here. The stipend in Votto and Votto just like that. E n v a t o. And this is the plug in. We're going to insult right here. It's called in Votto. Elements. Photos and elementary templates will click on Install Now. Now what? This is what we're installing as these air the template Cesaire What 1700 plus templates that you can use and we can modify with the page bowler. So it's basically a big template pack with tons of just amazing free Web template that we can use for a website. So now we've installed the page builder. Let's install a theme for our website. So right here in her appearance, go to themes and click on add new now in shorts. How WordPress kind of works is you can kind of see Hear how there's different kind of schemes and styles for your website. So everything has a different function, but we're gonna be using only the best theme. So right here, under popular. Go ahead and scroll down and you're gonna find Astro right here. You can also get there right here by going to search themes and typing in Astra and right here, click on Install. Now Astra has the most active in solves. It's also a free theme and also has just tons of amazing reviews, tons of features for a website that won't restrict us. So I mean, it has, like, transparent menu hit as a bunch of features that we can add to our website now, once you've installed it right here, click on activate. All right. And right here it says new theme activated visit sites. So click on visit sites and you can see now how the sites kind of change. You know, it looks very different and what we want to do here is we want to go ahead and build our website right here. So click on your home page right now, go to home and we're now going to create our websites with this 5. Elementor designing home page: home page. So right here. Click on edit page. Now, on the right side, right here. You notice we have these different options. So for the sidebar, I don't want a sidebar. Right. And I want the content full with right. I wanted to extend all the way, and I want to disable the title, meaning I don't want the home to show when we build our website. So I just kind of want a blank sheet so we can build our website. So right here, click on update. And also you click on view the page. If you want to see your site and you're going to see everything is completely gone, right, So go back to edit page. And now we can build the website with elemental or so right up here, which is any with elements. Or click right there. All right, cool. So now we can start building the website. So for example, right here, how this works, in a nutshell is Let's say, for instance, you want to drag something over here. Let's just say I want to take my heading. I'll drag it right there. Click back here. We'll take some text. I'll just put it right there and you see where that bar is now that's what we can kind of put stuff. I'll click back here. I'll just dragging a but in etcetera like that. But go ahead and close this really quickly, So a better way to do that is to click on the plus icon and click on this row, which will create a row Here are going to say All right, I want some heading texts, and right here we can center. It's and let's just say you wants to change, like the size of its or the style right here in your style. You click on that, and under topography you can change the font and everything. So here you want this phones or this fonds etcetera. I like monster rants. I think monster out there really good, really get Ah, fonts for the weights will change. That's a bold and for the text color. I wanted to be black, and we can also change the size of this as well. So over here in a topography on the signs, we could just drag this to be as big as we want it like that, or a small now, Also we can do here is add spacing. But before we talk about margins, spacing, let's go and add in some more elements right here. So under this text editor, I want to take this and dragged out right here under the style. I want to center this and I want to add a button. So right here, take a butts in and just go ahead and put this there and right here, click on this and I want to center line this and I want a black butts. And, you know, I wanted to be black, right? Really quick. Now, Right now, I'm just giving you all a crash course. You know, right now, I'm just kind of showing you the option showing you how to build stuff. We'll be using templates and everything in just a bit, but I want to make sure you kind of understand how to use the builder before we just jump into the templates. Right? So right here under this section right here. This right here actually controls this section right here. So you want to add a background or something? You want to change something? This is where you're going to design it. So, for example, let's say I want to add in a background so style right here for background. We have classic Grady INTs video and a slide show. So let's say, for instance, I just want to classic and just put a simple color right here. You can see now how this changes if you want to add in a Grady int, including ingredients, and now you can add two different colors like this and like this, and then you can also kind of control the location of its. You can control the location of it, etcetera. Go back over here. I don't like grading too much are great works, but you have to be really careful. You know, it's it looks nice in the beginning, but it's actually really hard to carry it out throughout your website. Also right here, you can go to image and click on, choose an image and upload an image. Now a great place to go get images is picks obey and also in splash dot com. So picks obey picks of a dot com and also in splash dot com. These are great websites to choose from, and, um, you can basically get any sort of image that you want for your websites. Now, once you download one of these images that say you want to download something like this right here, you click on download free and download it. You can go to this website right here called reduce images dot com, and this will actually reduce the size of it. So make sure your site loads really fast in everything by kind of minimizing these images. So right here, just click on upload image. You'll go ahead and just put it in the image that you downloaded, and then you'll go ahead and make sure that the image is smaller. It will reduce the size of the image to make sure your sights running much faster. So let's go back to our Web site really quickly and right here in the media library on select file and I just select the image that will use right here and click on insert media . Now I want this to extend all the way across the screen. So right here under layouts, we have height right here. I want this to fit to the screen, and now you can see right here how it now fits to the screen. And maybe I kind of want to change the text to something like whites, right? So changes to whites double click on this style text color, whites, etcetera. So next discord and scroll down right here and right here cooking these icons. And let's say, for example, you want to add another section. You can simply just click on this. Plus, let's say I want a three column row and escorting, dragging some elements right here so I'll just simply take this icon box, put it right there, click on these again, and then maybe you want something like an image box and then click on this again. And then maybe right here we can add in something like a video or an icon list or even a progress bar and just drag it in right there. And let's say I want to duplicate this, so I want more of these on the right click. I can click on Duplicate Duplicate, and we can even do this for the entire row. So, for example, right here I'll click on this blue section right here, click on Duplicate, and it's gonna duplicate the entire row for us, so we don't have to make you know everything from scratch again. So once you actually designed something right here, you can just duplicate it's and then change it. Now, whenever you use a module, whenever you want to design it, you can see here we have different options. So I have a star icon right there. But under icon library, I can change this to anything that we want. So changes to something like a taxi will use a taxi and then under the style section, we can change the color of this to anything that we want right there so black we can change the spacing. We can change the size and we can also even rotated. Looks like that over here we can choose an image. So if you have an image that you want to use, you can go ahead and just put in the image right there. You can change the title. You can add some description and also you want at a link right here you can put a link which will talk more about links in just a little bit. So, for example, will probably link this to something else. on our website once we actually have something for, It's a link to you right now that we've done this right here. We have this section right here. Now you have a basic understanding of kind of how to use the page bowler and how to change stuff. Let's go a step further now and let's go ahead and use some templates. So it's going to delete all this. I'm just gonna close all this right here and I'll click on update. Let's go back over here to exit the dashboard and now, right here under elements. I'm gonna click right here on elements now, right here. It's saying to use our plug in, he will need to accept our terms saying Okay, sure, I will agree, and I will go to continue now with this plug in, Will allows us to do is to basically get thes starter websites and sections that we can apply for our 6. Elementor designing the template part 1: our website. I'm going closed. All these tabs right here. I don't like a lot of these tabs open. I don't know. I have a mall opened right here, so I'll just close all these tabs and let's go ahead and now find a template for your website. So congratulations on getting your new domain and hosting with Site ground. Now, this next section I want to show you now how you can actually like the templates and import . It's to your WordPress website. Let's go back to this tutorial. So first I'm a closed this right here. And you have these different templates. Now, these are your premium. You have to pay for these ones. But below this right here you have all these other free templates. All right, Here you have free template kids for L a mentor. You have more than 1700 to choose from. Now, what I want you to do first before we go into that is over here in their search. Click right there. Click on corporate and business. And what we're gonna do right now is I'm gonna show you how you can kind of ad ingredient background. You can change stuff how you can rearrange icons and everything to make sure that you can kind of use this. How you want it to look for your website. So right here in the corporate and business, I'll scroll down right here, and we have these free templates, fella. Mentor sold. Scroll down right here and the one I want to grab is this one right here? Professional services. Now, this is the one we're gonna use right here. Home number two. Click on this and click on import templates. What it's doing right now is actually taking this template is putting inside of our elements or library, which will show you how you can access that library so that I've done that that's going to go to our page. So over here, in their pages, under all pages, we'll click on the home page. So right here we've click on view or we can click on Edit Element, or either way gets us to the same place. So I'll just click on any with l a mentor now. Right here. You notice we have this little sign right here. So this is right here. We can actually send the block, so I'm sorry. Import the blocks. So right here, for example. Click on blocks and it's a for instance. I want to click on Sub Hero and I want to add this block to the page. We can do that and then we'll add the block so you can see now how we can add blocks to our page. Another way is right here under the template section. Under my templates. Right here It says professional services home to this is now a templates stored and right here. Or click on insert and God Yes, And it's now going to take that template that were imported and now it's going to put it on our website right here. So you can see right here. Now we have the the website imported. Everything looks good, etcetera. All right, it's going back up. So it's going to make some changes now Really quickly. You can see right here how we have this greeting background, how we sent her this text and now we have two buttons right here. So let's go ahead and try to achieve that right now. So right here. The first thing I want to do is I want to add an ingredient background. So in order to do that right here, I'll click on this little icon right here which, remember, controls the whole section over here under style. We'll go ahead and close this right here and go to background overlay. Now what we can do here is we can add a Grady and backgrounds on top of our image or video . So, for instance, right here, African ingredients. And now you can see how there's a great in color over our background. Now, if you need help with grating colors, I recommend going to this website right here. So just go to google dot com and type in like a grating colors, grading colors and you white ingredients is my personal favorite, cause it shows you exactly what it will look like. And I'll give you the code to use so discordant scroll through, like maybe one or two or three of these, and you can just go and grab and pick one. So this is the one I used right here so you can see how this great it looks very similar to this one right here. I just kind of reduced the opacity. So what? You'll do here is you just simply take this code. Copy it. Go back over here. And for the first color, just go ahead and pace that code in there and then over here for the second code, I'll just go ahead and paste this one over here and now, Aiken, Now we can see that there is now a Grady in background. And again, remember, you can always change the location. You can also change the angle as well, and you can also reduce the opacity of it. So just depending on how much you want but the greed and actually helped people see the text So you don't want to really get rid of it. Because then people really looked really messy. I mean, look at this. Like that Just looks like too much. It's too clustered, right? It doesn't. You can see how it's a little bit harder to read the text. There's so much moving in the back. So all change this over here. Now, let's go ahead and make it like this right here. So what I'll do is I don't want this right here. It's all right. Click then click on delete. Now. Right here. I want to send her this, and I want to sort of change the text right here. I like monster at this other funds Really ugly. You know, this is like the default font monster rats. And I wanna make this bold. And I want to make this a little bigger. Same thing right here. I'll click here style center Now, right here. I want to duplicate this button because we need to buttons. Right. But I don't wanna have to make one button from scratch. So right here. If I click over here, I can drag a button right here, and then we'll have to modify this and change everything. But I think a better way to do this is going to delete this right click and duplicated. Now we have two buttons. Now, over here, I want to say, All right. I want a new section with two columns. So right here under intersection. I want to take this and I want to drag it right there. Now, you see, we have these two spaces. So what I'll do right here. It will take this on this blue pen and I'll go ahead and drag it in this box and take this one right here and drag it in this box right here. Now we need to kind of align these buttons so I'll click on this button right here and do alignments to the rights. And there you go. Now, maybe we want to change the text, like learn more and then I'll click on this button right here, and I'll do contact us. And maybe I want to kind of get rid of this color. You know, I don't want I kind of want toe. Have one. Like, uh, you know, I don't know. I don't I don't want to colors, You know, the two colors is it hits a little ugly, so I kind of want to have a transparent background. So right here, click on this button style and the background color. We'll go ahead and leave. It is blink right now that actually disappeared. So what I want to do is I want to add a border. So right here under border under border radius. I'll put it like I'll put in too. I'll put in solid right here. And for the width of this border, I want around two pixels, something like that right there. And also for this one, we should do the same thing, right? Cause now this is a little bit bigger, so we want to make sure these are, like the same size. So border type solid, putting two. And there you go, and we can have some border radius. What border readies does is that it turns it into a circle. You see how now it's a circle and this is a square. So the more border race you have, it'll change into a circle like that. All right, so, guys, congratulations. We have just made our home page really simple, really easy to do, right? So now be done. This is going and scroll down right here. Let's make some changes. Now, sometimes guys, when using this builder, weird stuff happens like the little boxes. Just click on it, and it'll it'll work. So it just does that weird stuff? I don't know. You know, I'm not I don't know why it does that stuff. I don't know why. Now, if you want to change something or modify something, just simply take this dragon over here right here. We contains the text to result based results results driven. And now we can kind of modify everything. So now you can understand how we change stuff. No, this one right here is called the divider. Wouldn't really talk about this too much, but what a divider does that ad space. So, for example, right here we can take this with and then let's say, for instance, I want to say, you know what I want, Toe put it in the center, make a little bit better. And also right here we have this style which you can control the weights and also the gap as well. So you see now how it's creating space. All right, you see that now? Another thing I want to teach you all is about padding. So padding is probably something that's probably you don't really use to monitor. You don't really understand on how to use. So what padding and margin is is that it creates space so you can create space and doing stuff cause you know, how do you make space between things? So right here I click on this right here and under the advanced section, I want to add some padding. So I want space right here. right. So right here under padding, I want to go ahead and add in some padding to the top. You see now, how is creating space between these? So whenever you want to add space between something, the padding is what you're going to use. So let's go ahead and test something out right here. Let's just say, for instance, um, I want to add more. 7. Elementor designing template part 2 + extra pages: patting. I want to have more padding right here. So right here, I cook on this section, go to the advanced and now on the top section allowed. Patty, you see that Howard pushing space? So that's an example of how you can use patting and patting is very important. It's a big part of learning, but just kind of does just kind of think about how you want things structured and apply padding to where you want it to go. So, for instance, right here I have to much space right here. So I want to go ahead and reduce the padding. I don't want a lot of padding, so what I'll do right here is I'll click on this row, which controls this section under the advanced section. We can actually reduce the padding or is that we can actually reduce the margin. So right here, I'm gonna say I want this actually start from a dirt a separate point. You see that now how we're reducing the margin so margin is basically where it starts from . That's what margin means in a nutshell. Padding means the space between something. So margin is saying, I want this to start minus 50 pixels. So I want this section to start over here, you know, and you can create a lot of beautiful effects with margin, with reduction of margin and everything. So it's going on right here. If you want to make changes to something, you'll put it right there. You'll edit it's this section right here. I'll click on this and I want to add an a grade in overlay the same one we had before. So style click on this great and overlay radiance. And here we can go ahead and add in some ingredients something like that's and the other section I had was we had blue or something like that was like something like that You get you guys get it was this is on hover. Sorry. So right here. Second color there something like that right now for the hover option. This means in fact, all your icons are gonna have the hover feature is when someone hovers over this. What do you want to display? How do you want it to change? The button right here has a style section and they have their normal and they have the hover now, right here I'll change it to something like Green. Now, when I hover over this button, it's now going to change to Green right there. All right, so you can kind of understand how that works. So now let's go ahead and say, You know what? I don't want this section right here. I want to get rid of this and I want to import a new section. So right here under. Plus, we'll click on this right here and click on the blocks. Now, what will do here is a look for templates. So right here. Oh, click on team. We'll go ahead and scroll down right here. Now these right here we cannot use because this is part of their pro feature. But I'll just go and say, You know, I like this one right here. So right here, add the block to page and it's going to now insert this section onto our Web sites. And then again, we can go and make changes. We can swap out the images, we can make any changes he wants etcetera. So now you guys kind of know how to design everything. Let's go ahead and just keeps growing down right here. scrolling down anything you want to change. We could go ahead and over here and we'll center this. We will center this and we will center this now whenever you want to add in a new section right here, click on this plus section. And let's just say you don't want to use this. You don't want to use the templates. You don't want to use the blocks. You can click on this plus icon say all right, I want to make my own section and I want to make a three column road. So right here, I'll go ahead and take these and I'll just simply dragging an icon box and go back over here. We'll add in a Nikon and feel free to use your imagination here. You know, you can put anything that you want on top of this. You can put it in a text editor. You can take this and take this right here and let me see right here, take this and put it above. Essentially, it's the same thing. So whatever you're trying to accomplish your achieve, whatever works, you know, you don't have to use the modules the way they want them to use them. It's all about creativity. You can do anything that you want. So right here, image box. And then over here we'll add in something like social icons, etcetera. So you kind of get an understanding of how this works, and then you can kind of modify stuff so not have shown you all how you can modify your website. Lets go click on Update right here and let's go ahead and exit this page and click on view page and see what we've done right here. Now the first thing you've noticed is that our header and our footer have disappeared, so we need to actually change something. So right here under edit page whenever you imported template, they actually have it to elemental canvas. So right here on your page attributes under templates. You always want to make sure that it's elementary full with click on update and I'll click on view page, and now you can see that we have our header back. The reason why it's elements or canvases, because when you create this elements or canvases actually option to actually get rid of the theme customizer and then just have only the page builder. So if you want to have your theme customizer, you can have it. And if you don't want it, you can do the elemental or canvas, which will actually disable all of the theme functions. And Onley have the page builder. So right here, let's click on about us and that's going to design this one right now, so I'll click on Edit Page now, right here. Elementary Full with again right here will change this to no sidebar content full with stretched and disable the title. Make sure you have these settings always checked because this is actually the optimal way of building the sites. And right here, click on Edit with L. A mentor. Now right here again, Click on the in Vado here, corporate business. We'll go ahead and scroll down right here and then right here in the professional services will click on that, and I want the about US section now. So right here I'll go ahead and find the about us section and simply just click on imports import templates. All right, cool. Now we can also just go ahead and import the contact page as well. So let's go and find our contact us section. So right here. Contact us. Import the template. Now, this is importing it to our library so we can use it for later. So right here I close this and right here under this section, I'll click on the template, My templates. And now we have the about us section. So click on insert and click on. Yes. All right, Cool. Now these templates actually change the page Two elements or canvas. So you want to make sure that it's l'aventure full with right there and voila! Here, click on updates. And now you can see that we have a full websites that has already made for us. And you could go ahead, make any changes that you want to. It's so now let's click on Contact us right here or will actually have to close this really quick. So view the page, click on contact us and let's do the same thing for this page right here. And then I'll show you how you can set up a contact form on your website. So right here again, I want to make sure you understand how to do this. Elements are full with customizer. No sidebar stretched disable the title and update Now also right here we can actually even have a transparent header for this page. So let's just enable that really quickly just to give you an example of what? This theme conduce. Now, this options are here because this is the being customizer. This is what the theme is doing for us. That's why we need the theme with this page builder. So right here, Click on with L a mentor. Here, I'll click on this, my templates and we will go ahead and import the contact US section right here. All right. And again, make sure this page layout is said to elements were full with. Now you can see here how this is now a transparent, so you can see the white background behind it and also our logos right there. And don't worry about the logo. I'll show you how to get one in just a bit. After we talk about the theme customizer. Now we need to install a contact form on to our website 8. Elementor creating contact form: So when someone comes to our website and fill out our form, it will go directly to your email. So over here under WordPress, go to dashboard. And what we're gonna do now is we're going to install a plug in. So right now, plug ins. Add new. And over here you'll just type in. You just type in contact form. Now there's various contact forms. A lot of companies make a lot of different plug ins. The one I think is the best that works really well is WP forms right here. So right here. Click on install now and we're going to install this plug in. All right, click on activates. All right, cool. So it activated the plug in for us now, right here. It says, Create your first form. Good. And click on this right here now going to give your former name right here. Or you can select from a template. Personally, I think selecting from a template is actually a bit better. Everything's made for you, so let's do that. So right here at our simple contact form, I'll click on this right here. So here you can edit your contact form and let's say, for instance, you want people to fill in like a phone number of something. You can go right here under single line text. Just drag it right there and then right here you can put in something like phone number, phone number and make this eight required section. And once you're done, you click on Save. Now there is a pro version to this as well. So there are other things that you can add to. This is well, I will have a link in the description of this video. If you decide to purchase this, it's just Ah, an add on for this contact form. So if you wanna have, like, a password or file upload or something like that, you can go ahead and put it on your contact for him. But for most of us getting started, you don't need that. But for those of you who wants to purchase it, there is a link below. Now, once you've actually done all of this, this is our contact form. So overhears two settings. Now, this options right here are just being for like, you know, just just for you know, when something is sending is going to, say sending the submit butts in etcetera so you can go ahead and change all this. And you can kind of go through all this and check it out right here on your set up. We can go ahead and go to our form. Let's go ahead and do that. So one more thing I want to do here is under settings right here. Let me just make sure that this is going to your email right here. So confirmation notifications. Now, this is what you might want to change, but you might want to leave it, so send to email address. So where do you want this to send it to? Now, by default, this plug in is going to send its to the WordPress email address. That you sense if you wanted to send to a different address, you can go ahead and put in right there. All right, so that's just a way of how you can change email addresses if you decide to do that. But that's, you know, that's your business. I'm not gonna you know, I'm not gonna get into that also, when you get a contact or when someone fills out your contact form what you wanted to say? So right here you can put in, like, new email from my website and click on safe. All right? And right here on this X exits. And right here now is the one that we have so simple contact for more than just this one right here. We can get on preview right here to view it. Well, let's go back really quick. I think that was was weird. Yes, this one right here. So let's go ahead and take this short code right here. All right? We'll copy. That's will go back to our we'll go back to our contact section, and we'll go ahead and just paste it in there. So for the contact us just click on edit with L A mentor. Now, right here. We don't really need all this text, so we can just go ahead and just get rid of all of this and right here under the text section. Just go ahead and pace that short code. Now, whatever you get a show called with WordPress. Let's say you're using another plug in what you can do here is this. Go to this right here. Take any text editor. Drag it anywhere you want and then under the text section right here, the text tab. Just go ahead and pace any short code. So let's say you get another plug in and it says, Pace, the short code here. This is what they're talking about. So whenever you get a short code from another plug in, you want to go ahead. You put it in a text editor, put it in the tech section and they just paste it in there and you are all good to go. But I don't really need this because we already have this. So here or click on deletes and we'll click on updates. Now, right here. I want to click on pretty changes. I want to see how this looks, because this right here is actually kind of buggy. But watch this preview changes, and now you can see it looks much better, right? I don't know why it does that, but let's just let's just give this a quick little um, let's just try to see if this is working or not. Let's just give this a test run. So right here under settings. I'm sorry. Over here I'll go to view the page, and that's fill this out now. So I'll just put Wilson Darrelle. I'll put in my email address right here. I'll put in a fake phone number. So what, 800? What's that one? That one thing on YouTube. Those guys at the Talk Crap hotline were like, If you're angry, you can call them toe like talk crap. It's pretty funny. It's it's called Gangster Party Hotline or something. That's really funny. Hey, what's up? Here are click on submits. All right, cool. So it send it to our email. Let's go ahead and check our email now to see if it's working. All right, so this is my email right here and you can see new email from my websites. I click on its and then right here. You can see this is all looking good here. I'll say, Yeah, this is safe, of course. So that's just that's just email. But the message will display right here, so we know your contact form is now working. All right, so, congratulations. You now have a contact form on your website and people continue messages, and it'll go directly to your email inbox. 9. Elementor theme customizer and blog: So this stuff is pretty simple, right? It is. So in this next section, now that we've covered the page builder, I'm gonna talk to you about the theme customizers. So the actual theme, which is basically the wrapper around the page builder. So I'm gonna cover all of that in this section. So let's go back to the editorial. Now, when someone first visits your website, you're gonna notice they're brought to this probably blank page right here. And this is where the being customizer comes into play. All right, so right here we have this customized section. You can also get over going to your dashboard and clicking on customize your website. Now, this is basically what the theme is doing. Now, this theme has a pro version and you can go ahead and purchase it. There is a link in the description below, but for most of us getting started, you don't really need the pro version Jess yet. So the first thing you want to do right here is go to home page, go to a static page and change your home page to home right here. Now, this is going to basically make it so whenever someone visits your websites, it's then going to go to your home page. So going back over here, we have different options. So we have header breadcrumbs, Blog's sidebar, footer all these options right here. Let's just go through some of these to kind of make you understand what this is. So right here is header now site identity. Now this is where we talked about a logo. So if you have a logo, you can go and put it right here by clicking on select logo and just go ahead and click on the logo and select its cropped the image. And then there you go. The local will display right here and then also maybe right here. I want to take off the site title so I don't want the site title. Take those off. So now, sister logo. Now, if you need a logo, there's a link in the description. This video. It's a fiver dot com guys. This is where I got my logo from. It's an amazing website. I do have a 20% discount. Will put that coupon on the screen, but just do something like logo. Just type in local. That's it and you'll find people that can make you logo for the little US $5 really, really cheap stuff. And it's going to scroll down right here is going to go find a $5 gig right here. No, no. If I target, let's change our budget right here to $5. And the max is $10. And let's take a look. All right, much better. So you get a logo from one of these people right here, and they can make you a really professional logo for your WordPress websites. And again, you know, I got my logo from these guys. They're really, really good. And once you actually make a partnership with someone, you can use them for something else, like a background or something else. This is where you can outsource everything and find people from other countries that will make really quality good products for really, really cheap. Now let's just take a local that I got from them so right here and click on remove select logo, upload files, select files, and I'll go ahead and use a logo that I got right here. Host helper dot com. This is a website that I'm currently working on right now. Sorry. Here. I'll just say I'll just produced this. I want the logo. Just show like that. Rates. And there you go. Cropped the image. So there is my logo, and it's a little bit too big, so I wanna make it a little bit smaller. And there you go. So there is my logo on my websites now also cite icon. So this right here is the site icon. You go to a website and you see a little little thing right there. That's the site icon. So I'll go ahead and put that as well for my website. So now you can see up here how that displays and going down right here. If you want to just have the actual letters like, you know, you can spell out your website. You can have that as well, or you can actually disable that. So that's just what that does going down here. Primary header. This is where you can change like the layout of your menu. So you can see now how this kind of adjusting and changing to any certain style we can have This is full with or you can have it is content with the bottom border size. Just go ahead and mess around with this. You can kind of see what this does. Ah, lot of these settings. You'll understand what they do just by kind of messing around with it. So you can see here now has that black bar looks pretty neat. Looks pretty sharp. Looks pretty cool. I like that. Let's go back over here. We can change our transparent menu to the entire website if we wanted to. So you can see now how it's transparent on the entire websites. Um, going down here, we contains other options. If you want to do that, remember, this section is controlling the header. So this is right here is called the header. This top section up here. Blood, We're not gonna cover block. It's basically how you can incorporate a blogger on your website. I have other tutorials on that, but for right now, I think most of us just want a basic websites for the footer section is probably one of the most important ones right here. So it's going on right Here is the footer section. And right here we have foot or widgets and this right now will allow us to display widgets on our websites. So I just went ahead and I activated. It's so we can kind of go ahead and mess around with the background color and change stuff , etcetera. So let's go ahead and contents. We can change the topography, the link color, etcetera. So there's just a way of how you can design your footer. And don't worry, we'll be talking about the foot of the last. Make sure you understand what I'm talking about. Uh, menu. You get that widgets. This is all controlling the foot area. CSS. Most of you don't need CSS. So just north that section. Let's go ahead now and design your footer. This was the area we did not really talk about. That's pretty important. So let's go ahead and click on Publish and click on Close. Now it's going over here to our appearance and widgets. Now the footer widget right here is basically where you can add things to the footer. So, for example, you can go ahead and dragon a gallery image on your footer. You can grab pages on your footer, etcetera. Now I'm going to click on Save right here. And this is visit the website really quickly just to give you an example. So you see here how we added pages and we added a gallery, but we didn't add any images. So let's click on customize right here. We can actually customize it from right here as well. It would make more sense to customize it from here as well. Let's scroll down to the bottom. Goto, Footer, footer widgets see footer bar as it footer. Widgets. I think it is actually on the widget section. Right here. There you go. Widget area one. So this is the gallery. But I want to remove this and I want to add a widget right here. And I want to display just some text right here. So texts and I'll put like, how we got started. We got started. And then over here, I'll just simply go ahead and copy this and pace it right there. All right, this section right here we have pages for the area three. We can add a widget. Maybe we can even add in like, a day. BP form the form plugging that we have. We can put ah form right here. and we can use the form that we use from earlier. So it's just another way on how people can, you know, fill out a form. If you want to do that's or if you wanted change it. Of course, you might want to optimize this and they could look a little bit better. Maybe just having, like, your name and email and that's it, right? Maybe even at the bottom. You can use any reforms to collect emails for email subscribers as well. And then right here you can do something like email lists or something like that, you know? So you know how to kind of use stuff. You can kind of go back and check it out. But I'm just giving you an example. Now, over here, what I want you to do is I want to install a plug in that will give you the ability to have a Facebook like box. So it's quick. Check this right here, and we're gonna going to assaulted plug in so plug ins add new. I know many of you use Facebook all the time, and they're addicted like my girlfriend. All she does is like refresh the page on my dude like you're sick, you know, like like what is going to change? What is so important with Facebook? It's these people out there. It's like a It's like a narcissistic like era where everyone's like, Oh, I need the likes. I need the attention. If I don't get it, I'm no good. It's like it's like, OK, you belong in a mental institution, you know? And I'll just take a gamble here. I'll just I'll just choose this developer. Maybe this one will be good. So show me blogging like share box plugging. Let's click on Install now. So when you want to do here is you kind of want to go through, find a high rated one and use that plug in and this goes for anything. Guys, this goes for contact forms. This goes for virtually anything. So let's go back over here to visit sites and go to customize and right here under widgets . Would you area four at a widget and now we have the Facebook page like box. So it's going to scroll down right here to make sure we can see what we're doing right here . So right here, I'll just do like, like follow me. And then right here, I think this is my Facebook Facebook. Darrell Wilson of three. There we go. There's my Facebook. Cool. And then right here, we can kind of change the width of everything. So every plugging guys works differently. You know, I'm not a professional with every plug in, because every plug and works a specific way. But what you can do here is you can kind of go through each plug in. If you want to use this one. You can, you know at this point is trial and error. You know, I don't know what the best plug in is out there because there's over 50,000 of them. Well, you get what I'm saying here, I'll just do something like 300 pixels. I want to show some things right here. Show why profile photos when friends like it's and you can kind of go ahead and mess around . That's and, you know, also go to my Facebook page. Give it like, you know, I just hit 10,000. Likes pretty exciting stuff, so thanks. Yeah. Anyways, here I got publish and ah, that's that. So not a show. You guys how to how to do that right there. Let me just kind of give you all Ah, general overview of everything in WordPress to make sure that you understand everything. So this section is gonna be talking more about, like, the miscellaneous setting. So what does everything do for my websites? So right here we have settings. General, this is basically like your time zone. Your tagline. Your site, Your well, your language. Your date, your time, etcetera tools. Right Here is something where, um might be for, like, a developer or another platform? Um site health. This just shows like higher sites doing appearance. You have themes. I remember. There's other themes out there. You don't have to use Onley Astro, but I recommend to use Astra. You can use this theme. Hello, elementary theme. You can use ocean EVP. In fact, I haven't of the Torah. Why talk about ocean EVP and also Astra as well. And over here you have templates. These are the safe templates that we have in our library. You can actually go through each template and edit them as well. If you want to do that. So what you can do is you can import of templates, then you can modify it and make changes to its right here. Pages. So you want to go ahead and add a new page? You just click on what this come from my instagram feed demo. I have no idea what I came from. It was weird Fleet that that's out of it. It's gone. It's gone. So what, you want to make a page click on, add new new page and then change all the settings like right here and click on Publish. And then you can edit with L. A mentor. Also, if you want to delete the page, you can go over here to new page, click on trash, get rid of its if you wants to adjust the pages right here you go to appearance, go to menu. And right here we have home about contact us. I don't use Facebook demo, but whenever you have a new page, you want to go and just click on that and then just put it right there. So that's where you want a new page. You can also have a drop down menu as well. So, for example, if I want to have this random Pedro where it came from, I think it came from that plug in. If someone knows in the comments, let me know. Let me know what this base came from. It's like the WordPress ghost came in my website right here in the visit sites. Now you see that we have this drop down menu, and if someone clicks on this that go to Facebook demo so I probably let's see, this is a Facebook page created by the plug it automatically. Please do not delete to make the plug and work properly. Okay, that makes more sense. You know, I love the developers. Give us little signals to let this let us know. Uh oh. What's working and what's not. Now, over here on your plug ins, Click on Add New. Now there's a lot of popular plug ins and I actually have tutorials on many of these Plug in. So Yost right here is a very powerful playing. It will help your website get searched more on Google, so make sure you have this installed and watch my tutorial on how to do that. Also right here. Who commerce. I will be making a blue commerce tutorial with this same builder and this same theme, and it will teach you how to make an e commerce website. So you wanna watch that in the future? There will be a link below in this team video to check that out really quickly. I'll just go ahead and show you how to make a blawg. It's really simple. Let's go over here to Page and we'll just go to block right here and I'll just we'll do you a favor. This is the bonus section. You guys are getting a bonus now. Usually people gotta pay for this. You guys are getting it for free. And right here under post. This is where you want a blawg. So post equals blawg. So, um, my life is terrible. And then right here, you can explain. Why are you going to say, you know, guys of my life is terrible. My girlfriend broke up with me. My dog doesn't like me. Whatever you want to put right here, you can go and put it. And over here, under documents under featured image. This is the image of the block post. So we'll put something like this girl right here. Air will put this group this girl right here. Click on safe and click on Publish. Now we need to assign this post to a certain page. So let's go out and do that. So we're over here, going visit sites customized. And now we're going to basically a sign our blawg toe a certain page. So right here on our home page posts. Blawg publish. You get that? All right. Here, I'll close this. So now we need to assign the block to our menu. So over here, under dashboard, we'll go to appearance and go to menu and then blawg at two menu, and then adjust this to where you want it to go. Save menu, visit sites. And now we have blawg. And now you can see that here is the block. Now these right here are widgets. Remember earlier how we had sidebar widgets? You can actually use any widget you want. So on my website, darrell wilson dot com. You can see I have widgets on my block page, so I'll just give you an example right here. Go to my blawg. That's running a little slow, guys. I know I'm actually on the process of changing it. So these right here I have social icons here. I have an image with an affiliate link and here I have a sign up form. Now, this is actually called the plug ins right here from elegant themes. It's from actually a competitor, a competitor company. But they make a really amazing plug in, so you can see here. Have someone clicks on this. It will go directly to my Facebook page or something like that. I have in the Tora and this is well, this right here, Bloom, it's another plug in that will basically collect emails. And of course, I have another plug in or to tora on that as well. And this right here, someone clicks on it. They can read my block post. Now this right here is all made with elemental or so This right here has the the image. We have these social shares and etcetera, so you can kind of go through your block post, click on it, and then you can add the same thing. So all you really need here is just some social icons. You can go in and out some buttons right there and then go ahead and talk about your life problems. 10. Elementor advanced features + ending: now there is a pro version for this page builder. But quite honestly, the free version works great for you. But I will be having a second tour on how to use the pro version. So you do want to upgrade to the pro version. There is a link below to purchase its and I'll be having a second tutorial. Basically the pro version. It adds a lot more functionality, has more features in the free version. We'll be covering that Maurin another video, right? But let's go back to the editorial now. In this next section, I want you guys to follow me here. We're gonna talk more about the advanced features of this plug in and things this conduce to make your site look a lot better. And also some things like absolute positioning, etcetera. Now I want to show you all this shape dividers first. So you might have noticed I have the shape dividers like this on my website, and I'm gonna show you how I added those on this is included in the free version. Now, right here, click on these dots right here. And all you need to do right here is go to advanced on. I'm sorry. Style right here under shape divider. You now the option for top and bottom. So with top right here, you can see I have different styles of the shape dividers. Also, I can control the color of that as well. Also, I can flip, it's and I can even change. There you go flip and then even change the height of it as well. So this is one feature that I didn't really cover too much in the literal because, um, you know, it's just I didn't really feel there was a need for I kind of wanted to show you privately . Now, this is a really amazing feature, and you can just add some really cool stuff, your websites. Now there's another really amazing feature about this plug in, and it has to do with images and also other widgets that you can kind of mess around with now, right here, Cook on this. This image right here. I'll go to the advanced section and I'll click on custom positioning now, right here in the position. All changes to something like absolute now absolutely. This allows me to do is take this image and virtually place it anywhere I want on the website and then click on update and save. You can see here how have moved these images around like this. And then kind of just There you go. Now we have the images like head, you know. So this is just an amazing feature. It allows you to really modify stuff really fast and change things. But I will give you a warning that you should not be using this to make your website to use this sparingly uses for something like small little images. But do not design your website with this because you were gonna have tons and tons of optimization problems. But for most of us, you can kind of use this for something standard, you know? So what I'm saying is use despairingly. Don't go crazy with it. Don't be like, you know. Don't be like this, you know, like, don't do this If you want, do something like this. You know this this gives a little bit better. And then once you do this, you can optimize it for removal. Okay, so this is just another amazing feature that I found with elemental hero. Click on updates next talk about blend modes. Next, we'll talk about blend modes. Now, whenever you use a heading text, you have the option over here under style with a blend mode. Now, what blend mode is that basically allows you to add some different kind of blends to your current text. Now, to be quite honest, I am not a professional of photo shop. So some of these I don't know how if they work, but you can kind of mess around with ease and understand what they're trying to do. So, for example, right here multiply. Not sure what that is. Screen. Okay, overlay. Here we go. Here we go. Overlay. There you go. So now you can see has this effect right here. And you kind of just go through a lot of these and see what they do. Lighten dollar color, Dodge. It looks like right here it's like kind of like having this effect right here. This might be for, like, retro or something like that. A saturation. You can see the Texas kind of blended in the back, but it's very saturated. Uh, color. Not sure Difference. There you go. That has a really cool feature. And also right here. Exclusion. Ah, Hugh and Lou Masaji. Now let's go over here. The one I feel is probably the best one is probably overlay and also, um, exclusion as well. But depending on the background, depending on what images in the back and what color text you have, it'll achieve a certain style. So just kind of go through the saturation XYZ and the blend modes and see if you can come up with something creative. They do have a tutorial on the elementary channel, but to be honest, it's very limited. It talks maybe about maybe one or two of the blend mode, because there's just so many different ways on how you can achieve blend mode. So, um, go ahead and mess around with the blend mode, see if you can come up with something creative. But this again, Is this an amazing feature that comes with the L. A. Mentor page builder? Next, I want to talk to you about mobile optimization. Now, this is extremely important because you have more mobile visitors than you do have desktop users as of 2018 which was last year, So in this section, I'm gonna show you how to optimize your website for the tablet and also for the mobile device. So over here, I have the builder activated. Now on the bottom, Left, right here. We see responsive mood. I hope you guys don't mind. I made my screen bigger. Two k to give you all. Ah, bigger understanding. And just so you can see everything right here, we have responsive mode. Click on this and click on tablets. Now you can actually make changes to anything on the tablets. So it's going down right here. You can see that this actually looks pretty mobile. Optimized already. If there's something that you want to change, you would click on this and then make a change. You see how? Right. Here, this button. How it has that blue symbol on it. That means right now this is being modified for people visiting your tablet on Lee on the tablet or wait. Say that, right? Yeah. Visiting your website. Only haunted salad. All right, what's going on right here? Now there's some sections that you might not need. You know, maybe you don't wanna have everything on this website like, uh, maybe you don't want to have this guy on your site right here, Like, you know, I just don't need this guy right now. He's just not popular. What you can do here is edit the column. Go to advance, you can go to Responsive, and you can disable this on tablet and mobile. So now this section right here will not display for people who are visiting your website on a tablet or a mobile device. Same thing right here. Maybe we don't need this image. There's this image is useless, right? So let's just get rid of it. So right here, click on this advance Responsive Hide on a tablet and hide on mobile. It's going on right here is anything that you want to change. This is where we're going to do it. And it's pretty important, actually, to make sure that everything looks perfect on mobile because again they're arm or mobile users and there are desktop users. So this is really, really important. Guys and actually Google. Watch the rank your website better. If your site is more mobile friendly, click on updates. Now let's go ahead and change is responsive mode to the mobile. All right, let's go back up to the top. Now, this direction right here. I mean, we don't really even need this. But in what we can do here is, maybe we can center it or we can even go to advance. And we could just get rid of this, but an altogether if if we don't need it. So I already have it on height on tablet in Mobile. But if you want to actually display like this, it will now display, or you can actually just hide it and only have one button plus this stack. But it was kind of ugly, right? It's going down right here. Everything looks good now again, you can always center this. You know, you can actually send this line. That will be a little bit more optimized. Right? So you can actually position this to be a little bit more centered? Um, not that important over here again. Same thing you can actually go to style. And you can actually send it this as well. It's going down here. We don't need this, but this is actually already disabled. So for the advanced member, we disabled the section for mobile. Maybe this section right here we can actually center this and center this for our mobile users. And also senator this as well for our mobile users. It's going down here and it looks like everything else is pretty much adequate. Everything looks good. Maybe we don't need. Maybe we don't even need this whole section right here. This this are our company. We can actually get rid of that, or we can actually just get rid of this. This gallery advance. We can just go ahead responsive and get rid of this gallery altogether. We don't really need it. Maybe we just need the text right there. So I try to make you understand how you can optimize your website for the mobile devices. It's very important that you do this after you make a website because, um, your website will actually start to rank lower if Google thinks that your site is not mobile responsive. But it looks like by default that the temple that we use already made this pretty mobile responsive. I don't really see any letters that are clumps together. Let's just click on update right here. Let's go to the contact us page and see if we can find something that just looks like crap . Let's just let's see if we can find something just looks terrible. You know that we can actually have a note that saying, Okay, this looks bad, Responsive mode and click on contact. It's going down. Everything looks pretty mobile optimized here. But if you see something like like, for example, right here, I'll just give you an example of what? What? Not mobile optimizes. I'll just click on this right here. Contents or style? Topography and the size. Maybe something like that right there. This obviously right here is not mobile responsive. It does not look friendly on the mobile device. You need to make sure the Texas smaller so something like this right here would be more practical. Right? So that's an example of something. When you see something, it's not mobile optimized usually has to deal with something like big text or when a letter would actually overlap and go on the bottom. But just go through your website, make sure it's fully optimized, and again it's very important. So, yeah, make sure sites mobile optimized. Very important. Let's go on to the next section. Next. What we're gonna do is we're gonna put a SSL on your website now on the top left right here . You've noticed throughout this whole tutorial this says not secure. Now, anyone coming to your website is going to be given a warning by Google saying this could be a scam website or something crazy like that, but it's really not. We just need to install the SSL on our website. So let's go over here to dashboard and we're going to install a plug in. So over here, plug ins, add new. But it's become really useful, guys. I mean, if you have to do this by code, it would take you, like, a long, long time. So right here. I've been really simple SSL. All right, and right here, click on install. Now, now, also make sure that you have your WordPress user name and your password written down somewhere, because when you activate this plug in, it's going to kick you out of wordpress. Okay? So just make sure that you have it written down somewhere. So you don't email me back and say, Hey, I got locked out of my website. I know how to get back in etcetera. Right here. Click on activity. All right now right here is just go ahead and activate the SSL. So go ahead and click on, go ahead and activate SSL. And then right here to click on visit website and now on the top left. You see out that's gone right now. So right here is go ahead and just go to dash WP Dash adamant and let's re log in and you know it's right here in the top left. Now how it says connection is secure. So now your website is fully secure and people won't get warnings saying that your site is has scam or anything like that. So that's how you install the SSL on your websites. That's basically the entire tutorial. Guys, I've showed you how to make pages. I said you had a modify stuff. Now there is a pro version to L. A mentor, So this pays builder that's going to go out and check out really quick here. I'll just go to visit sites and go to bed with elemental or this actually has a pro version . Now there's a lot more you can do in the pro version, and I'll be talking about that and making a separate video about the pro version asked a really amazing features. If you want to support me, there is a link below to purchase elementary pro, and basically I make money through really commission. So it helps me continue to make these totals for free. But I will be having a full to tora on elements of pro. They have some amazing features, including a theme builder of commerce builder just thons of really amazing features. So make sure to check that out. Also be having a well commerce editorial e commerce, a Toro as well with the same builder. So that's it for this tutorial, guys, hopefully by now you know how to design your web site. I think we covered everything. We covered the contact form. We covered global optimization. And should you had incorporated blawg, I showed you how to create different pages. I've showed you about plug ins and how to create a header. And also a footer for your WordPress websites. Again, guys, make sure you like this video. I really, really appreciate it. I wish you all the best of luck and good luck on your new websites. So I told you guys That was really easy, right? I mean, literally. We got our domain important. A template modified it, change the images. And now you have the website that you want. So congratulations on the new websites. Also, I will be having to fall tutorials for this one. So I'll be showing you how to the pro version. And also for those of you who want to sell something, I will be having another tutorial on how to make an e commerce website with this same pays builder. So make sure not to miss it. My name is Gerald Wilson. I hope you enjoy this video and I will see you guys next video and enjoy your new website.