How To Make a WordPress Website - For Beginners

Hi, I'm Tyler and in this video I'm going to show you how to create a

website

in WordPress step by step without skipping steps and WordPress is by far the most popular way to create a

website

in the world and it's used by people. like sony ups gm best buy the new york times jay-z and katy perry creating a website has never been easier, simply get your domain name and hosting, install

wordpress

, log in and then choose the website you want to import, there are so many different options There is probably one that is very close to the business you want to start once you find it then just click import after you do you can literally change anything from text to font to images to backgrounds , and you can even put a video. background if you want you can change columns and rearrange them you can delete columns you can add animations you can insert videos you can undo and you can add buttons you can change the spacing you can add pages and delete pages you can upload your own logo or I can show you how to create one.

You can rearrange the menu and add a contact form. You can literally

make

it look like any website you want, and if you're a professional web developer, you're probably using WordPress anyway. Imagine with this new way of creating a website making websites for your clients in days instead of weeks or months. I think they will be a lot happier and you could also probably

make

more money if you can turn websites around a lot faster. create this website using a Mac or PC, all the software is online so it really doesn't matter what you use and your website will work on all devices such as your desktops, your tablets and your mobile phones, and before we begin, I want to thank Edmund. he was a subscriber of mine and he was working on sprint and he watched my videos and he became a web developer and now he has his own business and he quit his job and now he and his wife Sadie just bought a new house, so congratulations. that's super amazing, sometimes you can get millions of views on youtube and I don't realize that it's actually millions of people very grateful that he contacted me and told me that story and now, in his time free, help me create these videos.

Thank you very much Emmanuel and congratulations to you and Sadie. If you need help with this tutorial, it's step by step, so it should be very easy, but if you need help, he's there to help you. His website is icreateyoursite.com. As long as you follow the steps and do the things I do, you will have a website and it will be amazing. Now let's go over the basic steps to creating our website and perhaps the most important thing is how far everything goes. To calculate the cost, there are four basic steps to creating your website: get your domain name, get hosting, install WordPress, and create your website.

The first thing we will do is obtain your domain name. Your domain name is the same as the name of your website. Google's domain name is google.com. My domain name is tyler.com. Your domain name can be anything you want.com.org.net. It's basically just the name of your website. Some people refer to it as a domain name or website name. A URL and its domain name costs about thirteen dollars per year, the next thing we will do is get hosting. Hosting is a computer that is on 24/7 and contains all your website information, so if you only had a domain name but no hosting person could write yourwebsite. com, but there would be no logo, no text, no images that would be displayed because you need a place to store all that information to be able to deliver it to people 24 hours a day, 7 days a week, 365 days a year and that costs around At $10 a month, you get a bigger discount if you sign up for more months at a time, which is probably the smartest thing to do and could go down to about $5 a month next time.

What we are going to do is install WordPress. WordPress is what's called a content management system, which is just a fancy way of saying that it helps you manage all of your content, so instead of having to write code and all this complex stuff, all you have to do is do is What we need to do is drag images and type and change some settings and you have a website so we need to install that WordPress software on your website and luckily for us WordPress is open source and free so Next thing we need to do is create your website.

So this includes creating your pages, choosing your colors, adding all your images and content, and all the tools that I'm going to show you in this video will be absolutely free and you will create your website yourself. you don't need to pay anyone to do it so it's also free so the total cost to start creating your website would be twenty three dollars but I have a discount so the cost will be reduced to ten dollars and thirty-seven cents to start. your website and distribute it all over the world, which I think is really amazing, so let's follow steps one and two, we will get your domain name and hosting and luckily we could do it in the same place hostgator.com, so First thing what we will do is open our browser and we will get our domain name and hosting, to do that you can go to hostgator.com which is h-o-s-t-g-a-t-o-r dot c-o-m and press enter and I think hostgator is really great, they have phone or email chat support at I live 24/7/365 and I've personally been with them for 13 years and their prices are really good, but there are thousands and thousands of different hosting companies and obviously I haven't tried them all. y If you choose another host, this tutorial will be a little different, but it should still be very easy to follow, so we'll look at all of these different options below. web hosting website builder cloud hosting

wordpress

hosting reseller dedicated vps and domains and you might be thinking that if we are making a WordPress website, why not do WordPress hosting?

But in my opinion, it has so many different features that you don't really need and you can always upgrade later, so we'll just stick with web hosting, so go ahead and click on that and if we scroll down a little bit we'll see that we have three different plans: the hatching plan, the baby plan and the business plan, in my opinion, the business plan. It just has too many things that you don't really need, so it's really between the hatchling plan and the baby plan. The difference between these is that the baby plan offers unlimited domains so you can have like your website.com, tumomswebsite.org, a friends website. .net or a business client's website, you can have as many websites as you want, but with the hatch plan you can only have one website, like yourwebsite.com, but because you can always update your website at any time and probably is just starting.

To end up with a website, I recommend getting the hatch plan, so we'll click buy now and now it will ask us to choose our domain name, also known as our website name, and we can register a new domain name or you can say me. You already have this domain name. Maybe you bought a domain name somewhere like godaddy.com and you already have it. You can enter it right here to put I already have this domain name.com.net.org, whatever your website is. Put it here, but since we're registering a new domain name, I'll just click register a new domain and put in my new domain.

Learn how to create a dot com website, but you can choose. dot online site dot dot store website dot sometimes dot com is not available or sometimes it's great to have dot store dot space or dot host or dot net but I'll just choose dot com and then it will ask do you want dot club.site.net. online.space.website.org.me.info.com.host and I think the answer is no? You don't need all these different websites, you just need one. In my opinion, what to focus on and having code.biz.host won't really help you, so let's skip it and next ask you if you want domain privacy protection and what it is. is when you register a new domain name, you put your business name, business address, phone number, and email in a place where if someone searches for your website, they can see it.

I'm really worried about this because, on the one hand, I really trust. people and I feel like you should be available for people to contact you, but on the other hand I've heard a couple of people complain that they get some unwanted calls from people, so this is really up to you if you definitely don't. If you want to receive unwanted calls or people contacting you, you will definitely get privacy protection, but I trust people so I'm going to uncheck it because it also costs 14.95 a year, so next it will ask us to choose a plan accommodation and for our type of package we already went over this, so I'm going to stick with hatchling and for the billing cycle, the basic strategy here is that the longer you spend, the bigger the discount you'll get, but the further ahead you are and shorter go for the smallest amount of discount you get, but the least amount up front, so it's probably smarter to go for the three months, six months, 12 months or more to get the biggest discount and I'll show you how to get a an even bigger discount in just a second, but if you want to get the least amount upfront then you will opt for one month, after that just enter your username and security pin and then all your information such as first and last name of the email. name phone number address country and I'm going to change my state because I'm in California so you could enter your credit card or paypal and now it will ask us what additional services we want so the first one is the site block monitoring and this protects your site from hackers and we can always add this later so I don't think we really need it so I'm just going to uncheck it and to back up the site I'll show you how to do it. do it yourself so I don't think we need it so we'll just uncheck it and we can see that the amount due is 23.90 and I think that's an amazing deal to put your website on the internet and just to share with the world, but if you enter a coupon code, save the code, save the code and click validate, that drops to ten dollars and 37 cents now if you opted for a different plan, like if you had a three-month, six-month, or 12 months. plan for a month or more, it will give you an even bigger percentage discount, but again I think it's just amazing that you can have your website on the internet for 10.37, that's crazy.

This is my coupon code and hostgator told me that this is the biggest code out there and I get credit for it so it's definitely a win-win situation and I really appreciate you including it. It helps me make these tutorials absolutely free. Very good, next we will review our order. We have 24 7 365 phone live chat email support instant account activation money back guarantee our domain registration and hatching plan so we can scroll down and click you have read and agree to the hostgator terms of service and click checkout now, so congratulations, we're done. your domain name and hosting, the next thing we will do is install WordPress to do that, all you have to do is click on hosting and you can click on one-click WordPress installation.

Sometimes it can also be called express install if you are on another host or even hostgator itself it is called express install so you can click wordpress install with one click or you can click express install once you do it, we can close this tab and then we can select our domain name. Now I have a complete. There are a ton of domain names, but you probably only have one, so I'm going to choose my domain name, learn how to create a dot com website, and then ask you if you want to put something in this directory, this slash directory, and we want to let this blank because we don't want WordPress to be installed on your website.com forward slash something we want it to just be installed on your main website.com if we look down here it says let a professional do it for you and it costs 3 .99 or 1.99 or 99 and that's too much, we're doing it ourselves right now so you don't need a professional to do it for you and spend all this money.

It's super easy now, we can just click Next. It's going to ask us to enter the title of the blog, which is the same as the name of your website, so I'm just going to enter create a website, but you can enter whatever you want because we can always change this later, it's super easy and I'm going to show you how below, for the admin user, you can enter your first name or admin name, last name. I'm just going to enter myfirst name, last name and my email address, then I'll make sure. automatically create a new database is checked and you agree to the terms of service and click install now we can wait for WordPress to install and now our installation is complete.

I told them it was very easy in the installation details. I like to copy this and paste. Keep it somewhere safe or print it out so you have it in case you accidentally close this tab and now we can go to our website, but if we go to our website and we just registered this new website, it won't work. So we can go to it and we can see that it's not working and that's because it takes a couple of hours, maybe one or two, sometimes up to 24, but it usually doesn't take that long for your website to spread all over. the place. world so all we have to do is wait a little while you can go to the beach go to the park play with your kids play an online game I don't know I'm going to go to the beach right now and I'll be back in just a second it's Well, I'm back, it's been a couple of hours.

Now I'm going to check out my website, so I'm going to type in the name of my website and it's working, it says website coming soon, but that's how you know it's working, so we're done installing WordPress. The next step we are going to do is log into WordPress. It's very easy, so to log in to WordPress, all you have to do. is go to yourwebsite.com forward slash wp admin which is wp-a-d-m-i-n and press enter and this is how you log in to wordpress so we can copy our username and password we can type our username here and paste our password and press login once you do that, now we're logged into the dashboard, that's what it's called when you log in, it's called dashboard and we can exit this tab right here and if we hover over our website name and click visit site, we can see we have a website now, this website is not that impressive, but it is a website and people would charge you 399 or 199 or 99 just to get here and I think that's ridiculous because it's super easy and This website is cool I guess, but it's not really that.

Great, we're going to make it a lot better and up here it's called the toolbar and it's only there when you log in so no one else sees it if they go to your website, only you can see it because you're already logged in. So the next thing we're going to do is change our password to have that really long, original password that's hard to remember right now, but we want to change it to our own password, so all you have to do is hover over your website. name and go back to the panel and click on users and under your username click on edit okay after doing that we can scroll down to the bottom and click on generate password and under new password I'm just going to hide mine , so All Internet does not log in to my website.

You can then type your own password and click Update Profile. Now we have our entire website with our new password and we are done. The next thing we will do is remove all of our plugins, but what are plugins? Plugins help you extend the functionality of WordPress and what that basically means is that WordPress doesn't come with everything, it doesn't come with, for example, a really cool contact form or a really cool form. edit the website, but one of the best things about WordPress is that anyone can create things for WordPress, so people create all these different things for WordPress and you can add them.

It's like by default your house doesn't have a refrigerator but you buy it and now your house can cool food and by default your house doesn't have a TV but you get one and now you can entertain yourself with movies, that's the same idea with a wordpress plugin can't do everything but you can install these free plugins and now you will be able to do a lot more cool things but sometimes in order for hosting companies to offer you such a good deal they will partner with plugin developers and they are plugins that you I don't really need it, so I'm not going to get mad at hosting companies for doing this.

They are offering everyone a very good deal on hosting, but you don't need all these unnecessary plugins, so I want to show you how to remove them all. the plugins that you don't really need to do, click on plugins and then you can scroll down and check the plugin box which will select all the plugins, then from the drop down menu choose deactivate and apply, we are deactivating all. the plugins and then check the plugin box again to select all of them and go to the dropdown box again and go to remove and apply, that will remove one by one all your plugins and now your website is clean and you don't have all these plugins that you they advertise things once we do that we're going to change something called permalinks and the easiest way to explain it is to show you an example so if we hover over our website name and click on visit site and scroll down and click on this recent hello world post here on the url that says yourwebsite.com forward slash index.php forward 2018 0326 hello world now if we go to Google website or Apple website and click on their About page de, it's just going to say forward slash from apple.com it's not going to say forward slash from apple.com index.php blah, blah, blah, blah, blah, so we want to get rid of this index.php because it's not professional and it's done through permanent links. to do that, we're going to go back to the dashboard and delete this box right here and we're going to go to settings and then permalinks.

Now we can see that in the custom structure it has this crazy way of displaying its URL and we just want to keep it simple, so let's click on the post name, scroll down and click save changes now. If we go back and visit our site and go back to that hello world, we'll see that it's our website, slash dot com. Hello Dash world, which is perfect. The next thing we'll do is make sure WordPress is up to date, so we'll simply hover over our website name and return to the dashboard. and then click on updates and it looks like our wordpress is updated so that's perfect, the next thing we will do is change the theme of the website, the theme of the website is the design of the website, it is what the website is See like this right now when people visit our website our website looks a certain way but if we change the theme of the website it will look in a different and much better way so to change your theme just go to appearance and click on themes then click on add new and there are a lot of themes to check out but this tutorial is based on astra theme and if you don't install astra theme you won't be able to follow all the instructions and this Theme is really super amazing because you can install websites on it in seconds so we will just search for astra astra and click on install then click on activate and now if we visit our website we will see that it has changed its appearance now this is not It's cool, it's still pretty bad, so in the next step I'll show you how to make it cool, so in the next step we'll install a plugin. which allows you to import an entire website with a single click and complete it and make it completely, for this let's hover over the name of our website and go back to the control panel once we do that, we can click on plugins and then click add new and now. we can search for a plugin this one is called astra starter sites then we can click install now and wait for it to install and then we can click activate once our plugin is activated before we install all these different pages on our website because that's what it's going to do: it's going to import all these different pages so that we have them on our website.

I want to go to the pages and click on them and I want to delete all these pages. Now you may have many more pages. or I may not have any but I just want to start from scratch so we can check this box next to the title and from the drop down go to the trash and apply and then we can click on the trash and check the next box. to the title again and from the dropdown menu go to permanently delete and apply everything now we don't have any pages on our website so we are starting to clean up now we can import our site so let's go to appearance then sites from astra and then it says select your favorite page builder and we are using Elementor so click on Elementor and now you will have all these different websites that you can choose from and with one click you will have the entire site, some of them are labeled as an agency, which is an update, but you can always scroll up and go to the free ones and you can see all the free ones and we can see outdoor adventures here, which is my favorite and we can click on it and we can get a view preview and it looks great and We can install it by first installing the required plugins so again plugins add functionality to your website so this will add a contact form and add the element or page builder so all that We have to do is click on install plugins and they will be there.

They're going to install and activate on their own and we can hit OK on this little popup here and now it's going to import the entire website, so this could take anywhere from 20 seconds to probably two minutes, so I'm just going to speed this up a little bit. bit and the import finishes and now we can see our site and bam, now we have a complete website just imported, completed and ready, and I think that's really amazing, it saves a lot of time instead of having to make everything one page, it's all set up for you and now you can change exactly what you want so we can close that tab right here and we can see our site and it looks really amazing.

We can also go to the About page and Look, that looks great too and we can see here near the services page, if we click on that, that the whole website has that transparent header which is super cool, but also you can change it to a non-transparent one if you want and these. The pages look really amazing, we can also go to our contact page and check it and where it says we are ready let's talk, that is contact form 7 so people can fill it out and contact you about your product or services and we . have this call to action to take action here and I'll show you how to set it up in a moment.

Now we can click on the name of our website and we can go back to our website and this is how to import an entire website. in just a couple of minutes, the next thing we're going to do is change the title of your site, which is probably the name of your business, so all we have to do is click customize and then down here we can click on design and then You can click on the header, then click on site identity and here you can put a logo if you already have one. If you don't have one, I'll show you how to make a logo a little later in this video, but if I just want to change the text right now, we can do that by changing the site title right here, this is usually the name of your company, so I'll let you create a website and your tagline is more information that describes your company, so if you're a graphic designer, maybe describe all the things you do, maybe you make animations, portraits or line drawings, and the title and tagline of your site will show up in search engines, so make sure it describes well what you do once we're done. that we can click on the back button and click again and again and now we can go to typography and we can go to the main header the top navigation part of your website is called header it is like your head is on the top and the bottom part is called footer like your footers so just click on that and now we can change the font size maybe make it really big or I can keep it at 22 and now we can go back and change the colors like this than go back twice and go to colors and background and go to header again and click on transparent header and now we can select a color of the site title and you can give it any color you want.

I'm going to keep it. white and for the background overlay color, which is the header color, so we can pick a color and make it transparent if we want, and that looks great, but not that great, so we won't keep it and the color of site title scrolling. it's when you hover over the name, what color is it, so we can hover over it and we can make it black, but I like just white, okay, and there's all these other options that you can play with to create your site. . just perfect, but we'll publish it and get out of there and that's how you change the name of the title and the tagline of your site, so the next thing we're going to do is the fun part, probably the part you've been waiting for. to know where you are going to edit your website anddo it exactly how you want it, to do that all you have to do is click edit with Elementor up here and Elementor again is the page builder that we install once it loads. we'll be able to edit our website and we can edit anything here on the left side we have all these different widgets and what widgets are is you can drag any of these and add them to your website so you can drag a header which is like a title an image a text editor you can drag a video widget and then have a youtube video or your own video there you can drag a button or a divider or spacer and a lot of this is just playing with it so don't be afraid to just drag things and you can always press Ctrl Z if you're on a PC or Command Z on a Mac to undo things, so feel free to play around with everything, it's a lot of fun here on your right. is where your website is and they have a new online editor where all you have to do is click on it and you can type whatever you want or you can go to this left side and you can add more text here, that's how you change. the content in the content tab here, but how do you change the appearance?

And that's with the style tab, so go ahead and click on style and here we can change the look of everything, as well as the text color, font size, and font family. So if we click on typography below size, we can just drag the slider up and we can increase the size. You have so many different options of what it looks like, you have almost unlimited control over everything right now, we can click on this up here. explore the colorful world and maybe we want to change that to something else like doing it with wordpress and we can also click on this little line right here, sometimes it's hard to click because it's very small, but you can click on it and you can change the width with the weight and you can adjust the width to any size you want and you can also change the color so we will make it sand color.

The next thing we're going to do is change this. button to do that, all we have to do is click on it and go to the left side and let's say someone clicks on the button, we want them to go to our About page, all they have to do. What to do to do is start typing and you will see the page and just click on it and now when someone clicks on the learn more button it will take them to the About page. We can also change the text of the button right here so we can just add more things or remove things and put whatever we want here and to change the appearance of the button, we can go to the style and we can click on the background color and we can change it to any color we want.

I'm going to choose a light blue and if we hover over the button we can see that it turns a different color, but if we click on the cursor we can choose what color it is, so instead of this red I'm going to choose a blue darker and that's what you want. you want when someone hovers over your button it changes color because that's what people expect, people expect a button to change color just a little bit so they know it's a cool looking button and the next thing we do it What we're going to do is change this image, so to change this image we can just click on this whole section here in the middle or you can right click and choose edit section to change the way it looks, all we have to do is do is click on style and to change the image just click on the image.

All of these images appear here because they were imported along with the website, so you can choose any of these images, but let's say you want to choose your own image or an image from another website. You can click upload files and now you can choose an image from your computer or we can search for one on the Internet. I really like this website called pixels.com which is p-e-x-e-l-s dot c-o-m and it's a free stock photography website so you can use any of these and they're really cool and really high quality so it definitely makes your website looks really awesome so I'm just going to search for desert and this one looks good so I'm going to click on it and instead of just clicking. download let's click on this little arrow because we don't want to download the full size of the image because if we do, the file size will be very big and our website will be much slower, so instead of original, let's click on large and let's press download, okay, let's save that to our desktop and let's exit from there and exit this tab and then we can select files and upload the image and if we see here the image size is 357 kilobytes and that's probably what you want your image is around your large images, at least you don't want it to be over 500, one megabyte is too much so this is perfect, but you don't want too many of these really large images on your website. because it will make your website slow, so press open and we can insert media and now we will see that beautiful image in the background right there and it looks really impressive, but we can see that the image looks a lot darker. than the normal image so the image on the website looks like there is something on top of it and it is called background overlay and this effect is really cool if you have words over your image because sometimes the words don't appear unless you have a background. overlay it, so if we scroll down and choose background overlay, we'll see that a color is selected and if we click on it we can change it to any color and that's cool too, if your logo is a certain way or your business has certain colors, you can make your website have those colors too, but I'll stick with black and the opacity is how transparent it is, so I'll just reduce the opacity so it looks a little bit lighter, but I can also make it completely dark in black and I'm just going to choose about .23.

Okay, it looks pretty good, but what about all the space at the top here and all the space at the bottom? How do we control that? We want it less or maybe we want it more to do that just click on the whole section and go to advanced and now we can play with the padding the padding is on the inside and the margin is on the outside so we want to get into with the padding right now and let's make it a little less at the top and a little more at the bottom so that WordPress hovers over the sand dunes, which looks great and we can even adjust it a little more if we want so that WordPress is on top of the sand dunes and we can put a little less space at the bottom and see how that looks and it looks like WordPress is sitting on top of the sand dunes and that's cool, okay, that looks awesome, let's go back to style and check out one more option and here where it says attachment fixed is when you scroll the website the image will not move but what if you want the image to move when you scroll it?

It can be scrolled again so now when we scroll the website the image moves or we go back to the fixed position and now when we scroll the website the image stays there so it's quite an effect okay, so let's keep it and now let's refresh our website and preview it by clicking on the little i and we can. Let's see our website looks amazing, okay, let's get out of there and go to the next section, so scroll down to the next events and let's say we want this text here, we want it on top of the image, all we have to do is click hold and drag where the pencil is and move it up, we can do it to the other side also click where the pencil is, click hold and drag, move it up and drop it another technique that saves a lot of time and it's cool is to copy styles, like this Again, style is the appearance of something, so we can go up to this button and we can copy it and we can go back to this button right here and we can paste the style so that doesn't change the content that will just change . the way it looks can save you a lot of time now, let's say we want to add more space to the learn more button, we can go to advanced and uncheck the values ​​of this link together because if it is checked, all the values ​​will be the same, like this that if we put 90 at the top it will be 90 at the top right, bottom and left, we just want 90 at the top or 30 at the top or whatever, so let's unlink them and put 90, oh that's right . too much, let's put in maybe 30 or 35 and again we can copy and paste the button style and it will paste with that space so it looks really cool if you want to change these images it's very easy all you have to do is click and click on the image again and upload your own image or choose any image you want and press insert media now we can go to the style and you can make it bigger or smaller by adjusting the width and you can align it perfectly with the other image.

Alright, now we can click on this button and look at our website and it looks really amazing. Alright, scroll down and let's edit another section. Let's edit this explore section right here, as you know, we can click on this text here and go to. stylizing and changing colors, that's all boring now, but hey, let's do something much better, let's click on this little menu icon up here and add something instead of just editing something, so let's choose maybe a video and now we have a YouTube video inside. from our website and you can use any youtube video and you shouldn't have any problem with that so let's go ahead and find our own video so let's open a new tab go to youtube.com and search for something maybe gopro browsing that's why. it should be great and let's click on the first one and it looks really awesome so let's copy the url just right click on copy and get out of there and then right click and paste into the url field and now we have our own video or someone's video. there and you can also change the start time for when the video starts, let's say 70 seconds and we can also put an end time for when it ends, but we'll leave it blank and now we can click on this button to see our website and we can play the video and that looks super awesome now our website has a video and that's really cool but I feel like the right side of the video is too close to explore the world.

I want a little bit more space between them so I can go advanced and then I can unbind this margin so that they're not all the same values ​​and on the right side I can put 50 and that will give me a little more space on the right side and now I can click this button to preview it and it looks much better with a little more space from the right side of the video to explore the world, but let's remove the margin, set it to zero again and now let's remove this entire column here same so we can click on the column and press delete and now we just have this great video here which is very good and it will play fine and everything and it looks pretty good except I think the video is a little too wide it would look much better if it was more centered, so let's click on the whole section here and under the content, let's drag that to about 900 or we can enter the value right here and it will look much better.

It doesn't seem like the video is all that broad and overwhelming. We can also click on the pencil and we can see that we have a lot more video options here, like autoplay, loop or mute, or show or hide the player controls. Customize it however you want, so what happens if you make a mistake or are just messing around with some things and want to undo them? You can easily press ctrl z or command z if you're on a Mac or you can click this. history button right here on the bottom left and you have all your history and on the right side you have your reviews.

The difference between your normal action history and revisions is that your revisions are the things you've pressed, updated, and saved the first time. we created the website, we did a revision so we can go back to the first time with our individual actions, which is like pressing Ctrl Z if you're on a PC or Command Z if you're on a Mac, a bunch of times, but here we can jump to any of them very quickly, so let me click on one and we can see that it has taken us back to when it had two columns and what if I want this website to be very different?

What if instead I wanted the video to be here I wanted something awesome I wanted the video to actually be in the background so instead of this image there would be a video there the first thing we would do is remove this column and center everything so we just do click on everything and press enter and click on that and click on that and maybe we wanted the button to look a little better so we copy this button and paste the button style and a lot of times it's hard to read when the text everything goes from the left side to the right side so you want to hold it a little bit more so we can click through the whole section and for the content let's enter 800 right here and now let's put that video in the background so go to style and click the iconof video and let's paste the link of the video that we copied before and for the start time let's put 70 again and the end time I don't know 96.

Okay, now it's going to go from 70 to 96, it's just going to play over and over again. , but now it looks like there's a ghost and that's because there's an overlapping background, so just click on the overlapping background and we can delete it and now it looks great and we can change it to be white. It's probably going to look a lot better so just click on it and change the color to white okay let's update that and preview our website and it looks pretty awesome that's awesome but we can close that tab on the next thing we are going to do. is to add a completely new section ourselves because you can create any of these sections you want, you can duplicate any section of anyone's website or we can create our own from our own mind, so to do that scroll down and this section you can see it well.

Like, but let's create a new one so we can click the plus button to add different columns, so we can choose one column, two columns that you've seen, which is like that YouTube video with the YouTube video on the side left and other content. on the right side or we can choose three columns, this is what three columns look like, there's one column on the left here and then there are two columns of images on the right, one in the center and one on the right, but we're just going to scroll down and go with a column, then we can click on this widget menu and we can click and hold and drag on a header and we can change the text, let me just put wordpress and center it, then we can go to style and do click on typography. and we can change the font to anything we want.

There are like 600 fonts, so there are a lot. One of my favorites is permanent marker and we can change its size, but there are many other sources. The other, more serious one is. Lato I really like it, I also like open sans and roboto. However, let's go with latto and we can change the size to 100 and make the font weight 100 or whatever we want. Font weight is the thickness of the font. to set it to 700 and I'm going to click on that menu again and just drag in the text editor and change the text and center it.

Then you can go to style and click on the font and make it bigger or smaller and let's copy. on a button so just go to another button and duplicate it and where the pencil icon is click hold and drag it down and we can center it next let's change the text so maybe this will go to our page Contact us and we can get started. by typing contact and clicking on the page, you will go to that page when someone clicks on it. Now let's add some space to the button, so let's go to advanced and where the padding is, let's place 25 to add a little more white space to the Next, let's add a background, so let's click on the entire section, go to style and click on the classic background and just choose the color you want, maybe it looks a little bit flat. let's choose a gradient and we can choose this red color and turn it into a blue color so that it goes from one blue to another, which will looks great for the angle.

You can change the angle of the gradient so you can just play with it and get it. perfect for a location that's like when does the second blue start and when does it end so it can start at one hundred percent or zero percent and of course again we can add a background to this section so we can open a new tab, let's go back to pixels.com and let's search for desert again and now we can choose another image of the desert and we can click on the large size instead of the original and press download and save it to our desktop, get out of there, go back to the classic background type and choose an image upload files and select files choose image and press open wait for it to load and insert media now it looks a little crazy because the image is at 100 and it's too big so we can go down here to adjust the size and choose the cover. and that will make the image squish and resize, which is the best option, you'll probably want to use the cover most of the time, but let's change the words to white because we can't see them, so just click on the words. to style it go to the text color and make it white do the same with the other one as well and now we want to add some space at the top and bottom so we can see the image so everything looks like it has the correct spacing and is you'll see a lot better so click on the whole section and then go to advanced and then unlink the values ​​so they're not all the same because we only need the top part which could be 160 and the bottom part which can also be 160.

And now that looks a lot better and we can see the desert so let's update that and preview our changes and we can preview here or we can just go to our website so let's go to our website and we can see we have the desert during the day at At the top, that cool video in the middle and at the bottom we have the desert at night, so it's really amazing, but obviously your website will be a lot more thought out. I was just trying to show you all the cool things that are used most often. and the things that I'm excited about that help you control your website, but let's get out of there and move on to the next section.

In the next section, I'll show you how to control the mobile version of your website. all you have to do at the bottom left here is click on the responsive mode icon and choose mobile. Once you do that you will be able to see how it would look on your phone and if we scroll up we will see that this wordpress is too big on our phone so all we have to do is click on it then go to style and click on typography and we want to make sure that this mobile icon is selected and now we can change the size and this will only change the size for the mobile version, so only if someone visits your website on their phone will they see it in the size here , the desktop version will not be affected below, if we scroll down we will see that everything else looks pretty good, right? here and that's because Elementor is really good at making everything mobile friendly for you and if we go down to the video part of the website, we need to change this because on your phone you won't be able to see the video. different technology, so the video won't actually work on people's phones, so if we click on the whole section and go to style, we can click on the background backup and this is like this, when the video doesn't work, it will return to an image.

So it's always a good idea to have an image right here, so let's click on it, choose the canoe and press Insert Media. Okay, we don't see it yet because the video is still playing here and if we go to the background overlay, we can decrease the opacity of the image, so let me show you what it would look like if the video wasn't here, so I'm just going to delete the video and there's the image and now we can alter the background overlay again and In fact, we can see if we pick a color, we'll just make it black and we can make it darker or lighter, but you want it to be something that also works with the video.

Okay, let's go to style and paste back into that video. and we can see it here, but it won't really be there once we see it on our phone and I'll show you that in a second, scroll down and we can see a bunch of images right here, one, two, three, four. but I think that's too many, so let's hide an image if people are on their phones, so all you have to do is click on an image and then go to advanced, scroll down, go to responsive and click hide on mobile now that image will be gone on the mobile version of the website, it's still showing here because we're in edit mode, but if we expand this right here, it will disappear and show how it actually appears on the phone and if we scroll down above, I see that video is not there and the alternative image is there, so let's click and expand this again and scroll down and fix this wordpress, so just click on it, go to style, click on typography, enter in 44, like the one above and now we can refresh and that looks really cool, so now we can go back to the desktop version and we can see that all the changes on mobile didn't affect the desktop version, so that we have all the control we want, but most of it. it's done for you it's really a perfect balance so we're done editing our mobile website so let's go back to our website and now let's click on about to edit our about page so on this page I just want add some interesting effects. so let's go to edit with Elementor and click on who we are and add an entrance animation so that when we enter the page we do a little animation, it will be very subtle, but I think it's cool, so let's click on it. and then go to advanced and then in input animation we can choose to fade and write and we can see it or zoom in to the right or we can choose to oscillate or light speed or roll.

I'm going to keep it simple and just choose fade and up and we can change the speed to slow, normal or fast. I'm going to keep it normal, so that's fine, scroll down and for this image, when you mouse over it, I want to do a little animation, so just click. on the image and go to the style and click hover and under the hover animation, let's reduce the pulse, I'm not too sure about that, let's try growing, rotating, that's one of my favorites, so when you hover the cursor over it will grow and tilt a little bit, okay, that's awesome. let's go through them, hit refresh and preview our changes and if you notice that when it loads who we are appears and fades out and if we scroll down and hover over that image it grows and tilts, that's super awesome , it's very subtle, but I think it kind of polishes your website and makes it look really professional.

You don't want to add too many or go crazy with it because it can get annoying. People are mainly there just to get information, but I think it's really subtle. we can add to it okay, next we'll click on services and we'll learn how to rearrange this page, so let's rearrange some of these rows and columns and maybe enhance an image, so let's click edit with Elementor. and if we scroll down we can click hold and drag a whole section and move it up and drop it and now that section is on top of the other one and now let's click hold and drag this column to this side and click hold and drag this column to this side and now let's enhance an image so we can click on it and we can go to style and under CSS filters we can click on it and we can blur this image or change the brightness or the contrast or maybe the saturation. make it a little more vivid and you can also change the hue to be a certain color and we could lower the saturation a little bit so it doesn't look crazy and we can hit refresh, okay, let's preview our site and close it.

We exit this tab and we can see that the columns and rows are rearranged and that image looks pretty good. The next thing we're going to do is edit our projects page, so go ahead and click on projects and what we're on. What we're going to do here is add an image to the page so we can see that we have a gallery. Here we're just going to add an image directly into the gallery so we can click on edit with Elementor and just scroll down and click on the gallery and click on add images and we can search for an image on pixels.com.

I'm just going to search for kayak, click on an image and download the large size, save it to our desktop, exit from there and exit from there, upload the file, select the file and we click on it and open it and if we see below the image says it's 808 kilobytes and that's a little too big so we need to edit the image and resize it so just click edit image and it actually doesn't. should be 1920. So I'm going to make it 900 pixels wide and press scale and we can save that and now the image size is 120 kilobytes, which is much better, especially for a small image in a gallery, so we can click. on add to gallery and we can rearrange it, maybe we put it there and click insert gallery and now that image is in the gallery and we can update it, preview it, get out of there and we can look at it and it looks amazing.

Alright, the next thing we're going to do is edit our contact page, so let's click on contact and what we want to change is this contact information here and we want this form to work on the left side to do that click. in edit with Elementor and scroll down and for the address just click on it andchange the address information then click on email us and change that information and click on call us and change that information also we can click on social media and we can add our social media links here and now we can click in our form, but we'll see that we can't edit it here and that's because we just provided code for the form called short. code and I'll show you where to get this shortcode in just a second because this shortcode is the code to embed this form but to change the form let's refresh our website and go back to our website dot com slash wp- admin so we go to the dashboard and we click on contact and we can see here it says missing configuration, so let's fix that, but if we scroll down and click edit, we can see that shortcode up here to get this. shortcode to appear on any page you want, drag a shortcode widget and then just paste it, it is already done for you on the contact page but in case your form for some reason does not appear just Copy this and paste it directly, so next if we scroll down, we'll see what the form looks like, but in code form, so we see how it asks for your name, your email, your message, and then it has that submit button, like this that that is. very good to remember, remember that it asks for your name, your email, your message and if we click on email, this is what it will send you by email, so where it says from that is where you want your email address to be from electronic. your website and then the subject has this bracket, your subject and then another bracket, but we never had a bracket, your subject in our form, so if we go back to the fields that we have, we will only see your name, your email and your We will not see any message where it says your subject, so we need to change it, but first where it says let's add your email address and from let's put wordpress in yourwebsite.com because when you receive an email, we will want to know that this email is coming from your site web, so it will say wordpress on yourwebsite.com and where it says your subject, we don't actually have a subject field on our form, we have a name field, so we're going to change that to your name instead of your subject , so when someone sends you an email, the subject will just be your name and now we can see the body of the message, it will be your name, your email and then it will have your message and then it will say that this email was sent from a contact form on yourwebsite.com.

Okay, so let's save that and see if it works. Let's visit our site and go to contact, fill out this information and press send message and now we can open our email and we can see that our email has been sent and that looks amazing if you don't see your email here from time to time it could become in spam, so you just have to mark not spam and once you do that it should no longer be marked as spam, so let's get out of there and go to our control panel. The next thing we're going to do is add a new page from scratch because maybe you don't want all of these pre-made pages, you want to add your own of course, so the first thing we're going to do is click on pages and then we're going to click on add new and this is the new wordpress 5 gutenberg editor and you can learn how it works and everything, but we are not going to use the new wordpress gutenberg editor, in my opinion it is not there yet and Elementor is even better, but we still need to add the title here same. so we're just going to add a why us page and once we do that, we can click edit with Elementor for this page instead of creating it from scratch like we did for the other sections.

I'm going to click on this folder on the right. here and we have all these different pages to choose from, some of them are the enhanced version, but I'm just going to use the free version of the pages that are available and we can scroll through all of them, but I'm just I'll click on this one and press Insert. Now we have that page inserted and it's a beautiful page. It could be any of your pages, this could even be your home page. It looks really amazing. If you don't want to use that entire page, you're just reviewing it.

You can press Ctrl Z if you're on a PC or Command Z if you're on a Mac, just undo that and let's click on the folder again instead of pages this time, although let's click on the blocks and now we have all these blocks different so these are all these different sections we have categories here maybe we want a hero and we can look at this one and we can insert it okay so let's just hover over the journey and click delete and for this title let's place and let's center everything and go to the style for this one and make the text color. white but let's not make it transparent and center this button and now when we look at it, it looks all messy because there's still some padding on the right, so just click on the whole section and go to advanced and the padding wasn't there. but it could have been like this, we need to click on the column and then go to advanced and then we see these 30 here now, this is not 30 pixels, it's 30 and we can know that by these three little pixels em or percentage in the here, like this which I just want to make that zero, but we don't really want the text to go all the way in, so I'm going to make 15 on one side and 15 on the other so it looks like it's all centered and now click on this whole section and go to style and let's delete this image and add our own image, maybe we want that canoe image so we can insert media and it looks great for the background overlay, let's make it a little bit lighter and it looks pretty good. and let's add another section, so just click on the folder icon, go back to the blocks and let's go to the testimonials, find something that we really like and let's go with these three boxes, insert it and instead of customer reviews, just Let's put reviews and stuff. looks pretty good, let's add another section by clicking on the folder and go to the team, we can search for what we want and we'll click on this one right here and insert it and that looks good, let's delete this team, let's go. to the whole section and let's go to the style and let's change this color to light blue and let's click on this line and let's change it to a white, okay, it looks better, let's update that and see that we come out of there and see that our website is looks really cool and that's all it takes to create a page.

We can see here that the navigation is white and that's because we didn't tell the website to make transparent navigation, so let's go to edit the page and if we scroll down. on the right side where it says transparent header we can choose to enable refresh to see our page and now we have our transparent header and it looks super awesome but the problem is that we don't see this why us page in the navigation and that's because we need add it to navigation to finish adding our new page and the next section is to add it to navigation so to do that just click on customize and then go to menus and click on menu then click on add items and You'll see your pages right here, so just click the plus sign and it will be added to the menu.

We can click hold and drag to rearrange the menu. Let's put it right under About and now we can see it up here. That looks pretty good, but what if you have too many pages on your website and need some secondary navigation? You can always click hold and drag indent below where you want the secondary navigation to be, so now if we mouse over you In theory, we should be able to see it, but the colors are wrong, so let's go ahead and change the colors , so let's go back again and again and go to colors and background, then let's go to header and transparent header and under the submenu where it says background color, let's do Now it's transparent, if we hover over it, we can see that submenu appears , only we couldn't see it because it was a white background on white text.

Okay, if we want to change the color of that line, we can go back and Go back again and go to the base colors and in the theme color, we can change it to green and now when we hover over our website, we will see that line as green and there are many other options to make it perfect, but I'm not going to save any of that, I'm just going to get out of there and press OK and our website will be normal. The next thing I'm going to show you how to do is edit this button up here. to take action, I want to put the contact button up there, so let's learn how to do it first, let's go to customize and click on the layout, click on the header, then click on the main header and for the last menu item we can choose none. a search or we can keep it as a button for the button text.

I want my contact button to be there, so I'm just going to put in contact and then my contact page is on my website dot com, forward slash, contact, so I'm just going to enter forward slash contact and that's it. It will take you to the contact page to see the button style. I'm just going to keep it as a custom button and I can click on customize button style and I'm going to choose the header button and the transparent header button here. we can change any of them so that we can go to the button background color on hover i.e. when the mouse hovers over it we can change it to a different color and now when we hover over it it will have a different color , we can now go down to the border color on hover. and we can select any color or we can copy the color and paste it anywhere.

This is called hexadecimal code. You can just copy and paste it anywhere on your website so you have the exact same color, so we'll just paste it on top. here and that looks great, but now we can see that we have two contact pages, so how do we delete that one? You already know how to do this, so what you need to do is go to the menu and just delete it, so let's go back and back again back once again and we'll go to the menu and we'll go to the menu and click on it and we'll delete it now that it's done. is not there, now we have a very attractive website so we can post that and get out of there and now our contact page is highlighted, it's like a call to action so that people can be attracted to contact us and if we click on it we'll go to the contact page and we can come back.

Home and we can click on the contact page again and it should work on the entire website. The next thing we will do is create your logo. I personally like simpler logos, but of course you can create any logo you want. our logo, I'm going to open a new tab and I'm going to go to logomaker.com, that's l-o-g-o-m-a-k-r, there's no e there, dot c-o-m and I'm going to press enter, then I'm going to exit this video because I'm going to show you how it works and up in the search bar I'm just going to type mountains, of course you can search whatever you want.

I think there are over a million different icons and if we scroll down I might find a mountain I like, something simple to see. pretty good just click on it and it will be imported to the canvas and you can scale it and make it bigger move it resize rotate you can also click on the type tool and type something like mountain I don't know we can click on it and change the color and move it and resize it and adjust and that looks pretty cool, I mean we didn't spend a lot of time with it, but it looks cool, maybe we hover over the shapes and we get a circle and we can move around. and then we can right click and send it back and we can also resize it, so maybe we make it bigger and we can change the color so it's a very light blue, there we go, it looks pretty good and there you have a very simple, I mean, I hope yours is better, but that might do if you need something really quick, okay, but we can also right click and delete and we're going to delete the text as well and we're just going to click hold and drag that bigger mountain and we'll save it, so on the top right there's a save button, so just click on it and we'll save it, click download, save it to our desktop, maybe type in the logo and I'll go. to name it black logo and we're going to save it, then we can get out of there and I also want to save a white version of the logo and I'll show you why in just a second, so just click on it to do that. a white color and press save and download it and save it to our desktop.

Now we can get out of there and out of there and go to our home page, although it will be on each page, let's go to customize and then click. design and go to the header then go to the site identity and where it says logo select the logo and upload files select files and let's select the black version of the logo and press open and press select and make sure to skip cropping we don't want croppingthe logo and now it appears and that doesn't look very good for two reasons: the text should be on the side and that logo should be white, but why do we upload the black version if the logo is supposed to be? white and that's because when we go to our mobile website the header is white so we want our logo to be black and for any other page that doesn't have a transparent header we want the logo to be black.

Now we can click on the logo and the site online. title to make the text go to the right of the logo and if you want you can have the logo inside the text and also like the logo and text together by unchecking show site title and then it will just upload your logo with the text . on it for the width of the logo I want it to be a little bit smaller, so I'm going to write 75 and that looks pretty good. Let's go back now, let's go to the transparent header. Let's check a different logo for the transparent header and select an image to upload files. files and let's choose that logo which is white and press open and choose an image and now we will see a nice white logo there, let's change the logo back to 75 and post that output from there now we can see our beautiful logo. there and we can resize the page and we see the black version of the logo on the mobile website, so it looks really cool.

The next thing we're going to do is edit our footer, so if we scroll down we can Look, it's got all this text that's not ours, so how do we change that? All we have to do is click customize, go to layout, click footer and choose footer bar. Let's scroll our website down so we can see it. and we can also choose between two different layouts, so we can click on this one and we can see that all the text goes on the left and right side. I like it when it's stacked, so I'll choose that one for custom text.

I'm going to copy and paste it below and show you why in just a second and for section 1 I'm going to make it a footer menu, so now it wants me to assign a footer to it. menu and we don't have one yet, so let's go back one more time and go to the menus and we can make our main menu the footer menu if we click on it and we can just check it and that will become the menu, the problem with that is our contact page is not there because our contact page was a custom button and we removed it, but let's do it for now, let's go back again and again and go to the colors and background, let's change the colors of that menu I think I want it to be white, so let's go to the footer bar, let's choose the link color and make it white and it looks great, but let's go back again and again and go to the menus and make that menu not we have the footer menu, so let's uncheck that and go back and create a new footer menu, so just create a new menu, let's call it footer, let's mark it as footer menu, press next, add items and let's add home about service projects in contact and let's go. again and again now let's go back to the footer bar layout and where it says footer bar top border color, let's change that to match the background so we can't see everything now, let's change all of our information here for what we want and there is a trick that I want to show you if we create a new line we will not add it here because this box only understands normal text in html so I will show you a little html code to create a line break so is less than and then br and then greater than and that will add a nice line break and we can publish it and now we can see on the right side that we have the home page about services project contact menu our address phone number and email address email and then our copyright and our website, that's super awesome and we can get out of there.

The next thing we will do is enable SSL and what is SSL. It is security for our website. You used to have to pay. for ssl, but google is really cracking down on sites that don't have ssl, so now hostgator offers it for free. You may have seen the unsecured text here that shows your customer when their information is not encrypted, so the way that works is that if someone fills out a credit card information or even on your contact form , fills out that information and sends it to you, then that information has to travel over the Internet and people like hackers or even your own Internet Service Provider can see it. information unless it's encrypted, then that's what SSL does: it encrypts all of your users' information so that people can't intercept and steal your customers' information.

So to enable SSL, we'll just go to our control panel and then Click on plugins and click on Add new, then we'll search for ssl and we'll find a really simple plugin called ssl that we'll install from time to time and then click. activate once our plugin is activated we can go to settings and go to SSL and if we scroll down we can see a check mark next to an SSL certificate. It was detected on your site which means we have ssl on our site web, if not you need to contact hostgator or whatever host you have, they should offer it to you for free but it should work in most cases by default, ok then click. go ahead and activate ssl and now if we visit our website and click here it still won't show that we have ssl fully installed and that is because in Elementor all our images use the http links and not https so we need to rewrite the URL to make all links https instead of just http, that's a bit technical but it's very easy to do.

It will also log us out because we need to log back into the https version of our website, so just log back in. go to slash wp-admin and we can see here this is secure because it doesn't have any Elementor images so it's super awesome enter your username and password and hit login then let's go to Elementor and go to tools and let's just regenerate the css files, resynchronize the library just in case and then where it says replace URL, let's copy our URL up here, don't copy the forward slash or anything, just the URL and paste it and paste it again on this side. and for the address above do anything other than https, so just enter http to get rid of that.

Now we are telling the website that the old one was http our website and the new one is https our website and it will rewrite it. all those URLs for the images and links and everything, so now we can replace the URL and press OK and we can visit our site and now we have that nice secure padlock there and our website is https. Google also ranks you higher when you have https. and that red is not showing up either which is not secure so google has been cracking down on it and they take it very seriously and they want all websites to be https because they don't want isps and hackers to intercept the information of their clients. and if we go to any other page, we'll see that we have that nice lock symbol and if on one of these pages you don't see the lock symbol, just click edit with item or change something, make a space somewhere and press save and refresh and it should show you that lock symbol but all my pages look great so we can go back to the home page and what I want to do here is go back to the original way the home page was so I'm going I'm going to click on edit with Elementor and I'm going to go to history and click on reviews and find the review that we had when I first installed the website.

There it is and I think it's much better than what I was doing. I was just kidding. around and it looks amazing, so we can update that view on our website. Hopefully you have learned a lot and now you can control your entire website and make it just the way you want it so I wish you luck on your journey the last thing we need to do is log out so just hover over your username user and click log out and now we can go to our website and this is the way the user will see it with the https ssl navigation logo installed and it looks really cool so I hope you enjoyed this video.

Remember to comment, rate and subscribe. I'm Tyler Moore. Thank you so much.