How To Make a WordPress Website - In 24 Easy Steps

hi this is Tyler and in this video I'm going to show you how to make three hundred four billion different websites step by step with no steps skip everyone even huge companies like Wix Squarespace and Weebly have the website creation process wrong but I finally figured out how to do it right I finally figured out how to get people to actually complete their website see the old way of creating a website was to either start off with a blank page which is terrifying you just have this blank screen in front of you and you don't know what to do or what to say and that is awful and almost no one finishes it I visit hundreds of people's websites it's like 2% it's crazy the second way is to import an entire page or an entire website but then you have all these pieces of content that don't go with your website and it's all mishmash and you have to delete things and once you delete things then it just doesn't get finished because it's not right so that's a terrible way of also doing your website and that's what all these big businesses are doing plus if you do import a website that already has all the content in it and you do change it and it even does look nice well you have the same website as another hundred thousand people so it's not very customized so how do you get that customized flexibility and speed well it's not starting off with a blank page and it's not importing an entire website I have figured out what to do and I think it's perfect it starts off with only using the best we're using the best platform in the world which is WordPress to create our website we're using the best page builder to build our pages which is Elementor and we're using the best free theme which is ocean WP then the magical part we went to the best websites in the world we went to Airbnb Nike Disney Apple uber and we saw all the best sections not the entire website just the best sections and we took those sections and we copied them and we redesigned them and we made them perfect so that you can import them into your website so you're gonna have the best sections of the best companies in the entire world you can import it in just one second just click import and you have the best design in the entire world right there in a second on website so far we have designed 200 different sections beautiful sections and all you have to do is click and import them and they're there in a second if you put five sections on each page that will give you 300 4 billion 278 million 4800 different websites so you never have to worry about your website looking like everyone else's but you also never have to look at a blank screen and be terrified you have the best designs at your fingertips in an instant and this is all step by step so if you just do the same things I do if you click where I click and do what I do then you'll have your own website at the end of this video a nine-year-old emailed me the other day showing me his website it was amazing and of course everything works on mobile phone tablet PC Mac whatever you want even though this video is for absolute beginners and you don't need to know a thing it can also be used by professional web designers you guys are probably using WordPress anyways and imagine having something to show a client in a day instead of a month and that's exactly what's happening a few weeks ago I got an email from n Manuel and he emailed me and told me that he lives in Florida and he was working as a sprint store manager and he saw one of my videos and it inspired him to become a web developer he was just thanking me for my videos and I was just so blown away that someone could watch something on YouTube and start their own business and it just it inspires me so much and so what we did is we collaborated on this video he's designed a whole bunch of the sections so if you need any help he's there to help you of course you could do it on your own it's easy step-by-step no coding anything like that but he's just there to help you if you need it his website is I create your site calm he's amazing so to build your website you can use a Mac or a PC or anything else all the software and everything is all online and again we're going to be using WordPress which is the most popular way to make a website in the entire world it's used by people like Forbes CNN Katy Perry jay-z Beyonce Sweden's official website Microsoft you see Boult Disney stoop dog Mercedes Ben UPS best buy the Rolling Stones etc alright so let's get started with a plan of what we're gonna do so our plan is right here it's easy it's in four steps we're gonna get our domain name get hosting install WordPress and create our website a domain name is the same thing as your website name so my domain name is Tyler com Facebook's domain name is facebook.com go goals don't my name is google.com without a domain name there's no place for people to go to see your website so you definitely need a domain name it's definitely required in order to have a website a domain name cost about thirteen dollars per year the next thing that we need to get is hosting hosting is a computer that's on 24 hours a day that holds all of your website information so it holds all of your content it holds all of your images it holds all of your text it holds your logo everything that you see on a website is a computer that's on 24 hours a day that's holding all of your information and that's what hosting is so if you only had a domain name but no hosting someone will go to your website but it would be blank there would be nothing there but with hosting someone goes to your website and they see all the text and images and information and all the content is there so again hosting is a computer that you rent out from a big warehouse that has really fast internet so that your website loads really quickly and that cost about ten dollars per month in step three we're going to install WordPress again WordPress is what's called a content management system it's just a fancy way of saying it helps you manage all your content so instead of having to know code like HTML and CSS all you have to do is type and upload pictures and it makes it really easy to create a website WordPress is the most popular way to make a website in the entire world and luckily for us WordPress is free the next thing that we're gonna do is create your website and because you're not paying a web developer thousands and thousands of dollars to create your website you're actually doing yourself that obviously is also going to be free so that is all of the necessary cost involved in creating your website so just to start out you're going to need to for that domain name which is $13 a year and pay for the hosting which is $10 a month so your initial cost to get your website on the internet would be $23 but I have a huge discount and that's gonna bring the cost down to ten dollars and 37 cents now that may change and fluctuate a dollar here or there a little bit but it should be around there and I think that's a great deal to get yourself on the internet and broadcasting to the entire world so the first thing that we're gonna do is steps one in two and luckily we could do that at the same place Hostgator com so I'm just gonna open up my browser and go to hostgator.com that's H OS t da t o r dot c om and I think Hostgator is really great I've been with them for about 12 years one of the best things is that they have 24/7 365 live chat support or you can email them or call them and the prices are really good so we have all these options we have web hosting cloud hosting wordpress hosting etc but we don't need to pay attention to any of them the only thing we need to pay attention to is the regular web hosting now you might think why not WordPress hosting but that just adds a whole bunch of bells and whistles and things that you don't need so we're just gonna stick to the basic web hosting so just go ahead and click on that so once we do that there are three different plans under web hosting we have the hatchling plan the baby plan and the business plan and what I recommend is the hatchling plan because you can upgrade to a plan at any time you want so if you want to go to a hatchling to baby you can upgrade anytime you want if you want to go to a baby plan to a business plan you can upgrade anytime you want and I just think the business plan has way too much stuff you don't need all the stuff that it includes and you can always upgrade later so we don't need the business plan so between the hatchling plan and the baby plan the difference is the baby plan lets you have as many domain names or websites as you want so you can have your website com your dog's website com your friends website net your mom's website org you can have as many websites as you want but usually people just start off with one website so that's why I recommend the hatchling plan and it is the least expensive so that's also awesome alright so all we have to do is click sign up now and now we have two options here we can register a new domain or you can say I already own this domain so if you bought your domain name already or your website name already from a place like GoDaddy and you've already purchased it then you're going to want to click I already own this domain and fill it out right here but if you're purchasing a new website name or domain name then you're gonna want to enter it in right here and here we can choose the extension type so I usually go with dot-com but you can do online sites tour that website tech sometimes the dot-com is not available so you can use the other ones or sometimes it's just kind of cool to have a dot site or dot online or a dot tech but that is totally up to you and once we choose our ComNet org it's gonna ask you do you want all these other ones and my advice is no you don't want all these other ones they just want to put on and add on some more money I don't feel like people are going to try to get your same website and copy you that just doesn't really happen and so you don't need to do it the next thing that we have here is domain privacy protection and what this does is it hides all of your information so when you buy or purchase a domain name people can see all of your contact information like your name and your email and your address but a lot of people don't like that I think it's fine personally but if you don't want that you can add on domain privacy protection but I trust people so I'm just gonna unmark that and continue on next it says choose a hosting plan we've already picked the hatchling plan which is great and now it wants to know the billing cycle so basically for this the longer that you commit to so if you pay thirty six months up front you're gonna get a bigger discount but it's gonna cost you more up front and the shorter amount of time that you commit for say one month it's gonna cost you less up front but you're not getting as big of a discount so it's really up to you but I'm gonna choose just the month-to-month option so it cost me the least amount of money up front next choose a username and security pin and enter in your billing information alright once you do that you the option to pay with credit card or PayPal I'm just gonna choose credit card put in your info and the expiration date then it's gonna ask you if you want to add on additional services and again I don't find that you need it because you can always add them on later if you find that you do need it but you probably won't need it at all so I'm just gonna uncheck those then we can see that that mountain too is $25.00 in 95 cents but if we put in save code that's SAV e c.o de and click validate we can see that the amount due goes down to 10 dollars and 37 cents now this is my code and I do get credit for it so thank you very much and it is the biggest discount code that there is and if it isn't please email me at tyler moore at gmail.com and say hey what's up man it's not the biggest discount no but it really is the biggest discount on the entire internet and i appreciate you putting it in because it gives me credit and helps me make these free tutorials so i really appreciate that thank you alright i'm just gonna scroll up because sometimes they add on the domain privacy protection after you add on the coupon but they didn't this time so that is good it's ten dollars thirty seven cents and we can review our order we have 24/7 365 fo and live chat and email support account activation money-back guarantee your domain name and our hatchling plan all right now you can click I have read and agree to the Terms of Service and click checkout now and you are done signing up for hosting the next thing that we're gonna do is install WordPress so all you have to do is click on hosting scroll down and click launch quick install once you do that you can exit out of this tab here and scroll down and click on WordPress and you can select a domain name for installation now I have a whole bunch of domain names but you'll probably only have one so I'm just gonna choose the domain name I want to install it on and we're can I leave this directory here blank because if you choose it then WordPress will install on your website comm forward slash something instead of your website com so we're just gonna leave that blank we're gonna click Next and we're gonna enter in a blog title I'm just going to title this create a website and you can change us later at any time so don't worry about it and for admin user I'm just gonna put in my name and I'm gonna put in my first name last name and put in my email address all right and we're gonna make sure automatically create a new database for this installation is marked off and we're gonna check the Terms of Service agreement then click install all right we're just gonna wait for WordPress to install really easy and our installation is complete so right now make sure to copy your username and password because it's important and print it or write it down or just put it in a file or something alright now if we check our website we can see that it is not gonna work yet and that's because the internet needs a little bit of time to realize that you've just got this new domain name so it takes time to spread throughout the entire world telling the internet that hey this website exists so we need to wait about two hours for our website to work and it could take as much as 24 hours but 99% of the time it takes about two hours and sometimes even less all right so we just have to wait for that so I'm gonna take a little break right now and come back in a few hours alright so I am back and now I'm going to check the website again and as you can see it works you have a live website on the internet that is your own that you've built now of course it doesn't have all of your content and the things that you want on it but a lot of people charge a lot of money just to get you to this place right here and you did it all yourself and it was super easy alright we can browse around your website and we can click on hello world this is just dummy content that WordPress automatically installs on your website but that's not very much fun we want to be able to log in and change it and make it your own so we can click on this tab and copy this password right here and now what we want to do is we want to go to your website comm forward slash WP dash ad mi n and you're gonna want to write that down or remember it of course you can Google how do I log into WordPress and find it that way also but this is how you log in to your website alright and we know that our user is whatever you said it to and our password is this big funky password so we're just gonna want to copy our password and paste it right in there and press login all right once we're logged in we can close this tab to keep everything organized and you can click I don't need help because we're gonna be doing all the steps manually and I think it's better to do it that way anyways all right once we do that the first thing that I like to do is change my password because I can't remember that crazy funky password so I want it to be something else so to do that go to users and click on your username and scroll all the way down and click generate password I'm gonna hide my password here and type in your password then press update profile so the next thing that we're gonna do is delete plugins and what plugins are is it adds functionality to your website and that's one of the things that makes WordPress great let's say that you want a contact form well by default WordPress doesn't come with a contact form so you download a plug-in that someone built and now you have a contact form or a photo gallery or an image slider so plugins add features to your website that people build and it's really really cool but what hosting companies do is they install all of these extra plugins on your website because well they get paid too and of course they're in the business of you know providing a service but also making money and that's alright but we don't want the plugins on our website so what we're gonna do is we're going to click plugins and we're gonna check this box on top and from the drop-down we're gonna press deactivate and apply and now deactivate all of the plugins but we still need to delete them so we're gonna check the box again and press delete and apply and press ok and that will delete all of the plugins on your website so that you can start off fresh the next thing that we're gonna do is update our permalinks and let me show you what that is so if we hover up right here and click visit site we go back to our site and we see this bar up here and that shows us that we're logged in so our users aren't going to see that we just see that but anyways if we scroll down and click on the hello world we can see up here it's our website com forward slash index dot PHP forward slash the date thin HelloWorld but that's not really professional you don't go to Google's website and click there about page and see Google com forward slash index dot PHP for slash about all you see is google.com forward slash about it's simple it's easy and it's professional so how do we get rid of that index dot PHP and that is where permalinks come into play so to change the permalinks all we have to do is hover over our website name and click dashboard then click settings and go to permalinks then I just like to click on post name you can obviously change yours and make yours different but I think post name is perfect then I click to save changes alright now we can hover over our website name and visit our site again and click on hello world again and now we can see it's just our website com forward slash hello world it is much simpler much plainer much cleaner and much more professional alright the next thing that we're gonna do is see if WordPress needs any updates we want to update our website before we do anything because sometimes updates can cause some changes to our website so we want to do it before and not after we've completed our website so what you do is hover over your website name and click on dashboard and click on updates now we don't have any updates right now but if we did all we would do is click on update and it would update WordPress for you the next thing that we're gonna do is install your theme a theme is the design of your website what your website looks like and that's one of the reasons why I love WordPress so much because thousands and thousands of people make themes for WordPress so you have thousands of designs to choose from so we can see what our theme looks like by just visiting our website so if we visit our website this is what it looks like it has this big image up here and if we scroll down we can see this is just what our website looks like so how do we change that how do we make it look much much better to do that just go back into your dashboard and go to appearance then themes now we see we have these three themes but how do we add and that's really easy we just click on add new once we do that we can scroll through all of the themes and look at them or we can go to popular and look at the popular themes they have many beautiful themes but I do have a favorite theme and this is the theme that you should install because this tutorial is based on this theme so if you install a different theme then you can't follow all the steps they'll be different so the theme that I love is ocean WP and again this is my favorite theme and we can go to details in preview and we can see that it has five stars it was rated 164 times and that's all great so we can exit out of there and we can click install so now the theme is installing and once it does that we can click on activate and now our theme is activated on our website now up top right here it says this theme recommends the following plug-in Elementor and ocean extra so we're gonna click begin installing plugins and again plugins add features to your website so it's extra things that the theme needs in order to work properly alright for now we're just going to install ocean extra and we'll install element or later so just click on install and it will install then we can click visit site and we can see that the theme or the design has changed so it doesn't look that great right now but it is the building block to a really beautiful website so the next thing that we're gonna do is delete some pages and post that WordPress installs automatically we just want to start off clean and blank and fresh so to do that let's go back into your dashboard by hovering over your name and clicking dashboard then click pages and we'll see this sample page and we can view it to see what it looks like yep just looks like a regular sample page and we can go back and we can click on trash alright once we've clicked on trash it goes into the trash can and we can delete permanently alright so that's how you delete pages now we're gonna delete our posts so just go to posts and hover over hello world and click on trash and we can go to trash and we can delete permanently the difference between pages and post pages our web pages like about services contact products or store and post our blog posts so if you want to create a blog you would click on post and create your blog posts there alright so we're done deleting our pages and posts and that was really easy the next thing that we're gonna learn how to do is change our title in tagline so to do that we can hover over our website name and click visit site and we can see our title up here create a website and our tagline just another WordPress website well ours isn't just another WordPress website ours is something great and amazing so we definitely want to change that to do that click on customize up here it didn't click site identity and we can see our site title I'll just change it real quick to show you that it changes and this is where you should put your business name and your tagline describes what you do or gives you more information about what it is so I'm just gonna put step by step with no steps skipped but if you did something like graphic design then you would put what you do so you can say you do drawings illustrations and websites so it really describes what you do in the tagline alright once you're done with that you can click on publish and exit out of there and we can see our title up here in our tagline right down here but it's not always gonna look like that that just kind of ugly I don't really like that so we're gonna remove that and make our website look much better a little bit later but alright that is how you add your title and tagline but now our website is blank so the next thing that we're gonna do is add pages to our website to do that hover over your title name and go to dashboard and click pages then click add new and you can enter in your page name we of course need a home page so I'm just gonna put in home and we're gonna leave it blank for now so we're just gonna click on publish alright once we do that we can add another page so we're just gonna press add new and we're gonna name this one about and we're gonna click on publish then again click on add new and we're gonna add services and click on publish then we're gonna click on add new and we're gonna put in contact and click publish then we can see all of our pages by clicking on pages and see all the pages right here of course you can add so many different pages you can add features or pricing or a store page where people can buy things and you can add a lot more pages we're just gonna have these four pages because it is a tutorial and I want to keep it as short as possible but the options are limitless all right so that is how to add pages we are done doing that so the next thing that we're gonna do is edit our menu to do that hover over your name and click visit site and we're gonna add links to this part right here and we're also gonna remove this space right here so let's click on customize and let's click on top bar then click general and uncheck enable top bar that will remove this space up here alright once we do that we can go back and now let's add all of our menu items so just click on menus and click create new menu then we can name our menu and I'm just gonna name it main and check it off as the main menu then press next and click add items so we're just gonna add home and we can click on custom link right here and make sure it's our website name then we could click Add items again and check off about services contact and we can go back and if we look at the top right of our website we can see at home about services and contact are added to our menu all right now we could go back to edit more settings and go to header then go to general and we can choose the style of our menu we can do full screen and that will make this little hamburger icon and when we click it it will make a full screen menu or we could do medium which will make it in the center or we can do transparent and what this does it makes them a new transparent so that if you build content on your website you will see the content through that menu so it'll be transparent through it so I think that's a really cool effect so let's just do that one alright now there's a border at the bottom of our menu and we don't want that so I'm just gonna uncheck that and for height you can make your menu really big or really small I'm just gonna keep it at 80 and for background color I'm just gonna make this black and this is for the background color if it was not trans parent now sometimes you don't want your pages to have a transparent menu just because it doesn't make sense and I'll show you that a little later on in the tutorial so we're just gonna make this a dark color not all the way black but pretty close to black and under transparent header settings I'm just gonna click on background color and I'm gonna make it black by click holding and dragging it all the way to the bottom left all right now we can mess with the transparent slider and if we slid it all the way to the left it would be completely transparent you would see right through it and if we slide it all the way to the right it wouldn't be transparent at all so I'm gonna slide it to about 23 so it is mostly transparent but you can still see the menu all right everything looks pretty good so let's go back and now let's change what the menu colors look like like the home about services contact let's change those colors so just click on menu and for a link color we're gonna make it all the way white so we're gonna just drag it to the top left and for a link hover color we're gonna change that and what that does is when you hover over a link like the home about services contact it will change colors to indicate that you're hovering over a link so we want it to be a slight change but not too dramatic so I'm just gonna make it a very light yellow and right here for the hex color code you can enter in your own number if you've copied and pasted from somewhere else or you want to use a very specific color for current menu item that is when you're on like let's say you click on the about page and you're on the about page the menu color can be different if you want it to be I just want it to be white so I'm just gonna make it white then I don't want a search box on my website but maybe you do but I don't so I'm gonna press disable and that will go away alrighty everything is looking pretty cool so we could click on the back button and click back again then we can go to typography now what typography is it's basically the fonts or text used in your entire website so you can change what the fonts look like for your site and you can change any of the fonts here but I want to change the logo and we can make the logo bigger or smaller and we could change the font family there are about 600 different fonts to choose from and you can look at the if you go to google.com forward slash fonts but we have all of these to choose from and I'm gonna choose one called permanent marker because it looks really cool and later I'm gonna show you how to make a logo but if you just want this as your logo that's totally cool and I think it works great alright that looks good let's go back so just click on main menu and we're gonna do a text transform so we're gonna make this all uppercase so now our menu is all upper case and of course you can make the font size bigger or smaller and you can make the letter spacing more so I'm just gonna make it two and what that does is it spaces out the letters so that it's a little bit wider and has more space in between them and that looks pretty good so we're gonna go back and we're gonna go back again now what we're gonna do is make that create a website we're gonna make that font white so just click on header and go to logo and we're gonna upload a logo later but if you want to use this as your logo that's awesome so go to select color and we're gonna make it white and the logo should turn white so now if your mouse is hovered over the logo it will turn blue but we are going to press select color and make that into so it turns black alright that looks pretty cool so now we can go back and go back again so the next thing that we're gonna do is set our homepage to the actual homepage right now our homepage is set up as a blog but we don't want it to be like that we want it to be as the page that we named home so just go to homepage settings and go to a static page so instead of our homepage being set to all these blog post again or just it's going to be a static page that we created and it can be set to any page it can be set to your about page or services page or contact page but we're gonna set it to the page that we named home so just click a static page and from the drop-down box we're gonna choose home and this is the page that we created so now when people go to your website it will be to this page right here alright so we're all done with that we can click on publish and we can exit out of there and now we can see that this page on your main website is set to the home page pretty cool and we can also see that the navigation works here if we go to about or services or contact it works so we have set up our navigation the next thing that I'm gonna do is show you how to add content the old way the not so fun way but it's still important to know so to do that you hover over your website name and go to dashboard and then click on pages and scroll down and find your homepage and click on it then we can add any content that we want right here and you can toggle this toolbar and get more options and we can bold things or italics things add different headings or paragraphs add in images or links but we're not gonna do any of that but it's super easy you can see right here it's just like Microsoft Word alright then we're gonna press update to save all of our changes and after we do that we're gonna press view page alright and we can see our content here this is the old way of creating a website not that fun but kind of interesting alright let's look at the new in improved way of creating a website and to do that we need to get a plugin and again a plug-in is something that extends the features of your website so thousands of people will make plugins or add-ons for WordPress and that's really the beauty of WordPress anyone can create something to build and add on to it so you can do practically anything so what we're gonna get here is a page building plugin so to do that just hover over your website and go to dashboard and click on plugins then click add new now we can search for plugins and we can search for element or elem en T ou R and press Enter and it should be the first one and it has five stars and 300,000 active installations so it's really good you can go to more details and you can see the screenshots of what it does and what it looks like and you can exit it there and press install now so now it's installed on your website but it's not activated yet so we just have to click on that activate button and it will activate all right now we have Elementor installed and activated on our website so we can go back to pages and we could go to our home page and now we're gonna see this edit with element or button right here and if we click on it we can use the element or page builder but we still have a title up here that we don't want and this I bar that we don't want we want to be able to use the entire page for Elementor so to do that just click on the back button and under a content layout go to 100% full width and if you click on title on the left you can disable the title so that will get rid of the title and the sidebar then press update once you do that you can view the page and now we see no title and no sidebar all right but let's edit with Elementor so let's just click on edit page and click Edit with Elementor now that we've done that it will have our old content here but we can hover over it and press the X to delete it and now we can add a new section so just click add new section and you can add one column two columns three columns four columns a sidebar all into your website so we're just gonna choose one column and we can add in text heading and click this button up here to add more then we can put in a text editor it's just like regular text or we can add in a video or a divider and we can also add in a button we can also do a testimonial or Google Maps so you get the point you can add practically anything but sometimes this experience is also daunting like how do you know what to do or maybe you're not a designer or you just don't have a lot of experience doing it or maybe you just want to save a lot of time and not have to build all these things from scratch or for memory or from inspiration from others so Elementor has done something really cool and you can go scroll down here and press add template and you can add an entire page so you can press insert and it will insert an entire website page into your website and we can exit out of all of these to see what it looks like and there we have it we have an entire complete website already done and all we have to do is change the information and I think this is really cool of Elementor and its really innovative and it's awesome to be able to just import it in just a second so we can go ahead and click on save and we can exit out of there and press view page and now we see we have a really cool-looking website already it doesn't have all of our content and everything on it but you can see the potential it is really cool and of course you could build any of this by scratch if you want to or you could just change out the information just click on it and we can change this to how to make a wordpress website and we can shift the columns over to make them smaller and we can scroll down and change any of this content and if we go to style we can change the colors we can delete images and add our own and it's all really easy alright so that is really really awesome and so cool and innovative of Elementor to do that and to allow us to use any of their templates but I think it could be taken one step further instead of importing an entire website you can import just different sections that you want because really you don't want to import an entire website usually you don't need the entire website to show up you just need a certain section you just need a client testimonial you just need a call-to-action you just need a video so you don't need the whole thing you just need certain sections and that's what I've done I've made all of these different sections that you can actually import into your website and with the click o button it can show up so I think that's even cooler than what Elementor has done which is super awesome so we're just gonna remove all of these sections and let me show you the even better way of creating your website so now let's find the templates that we want to use on our website to do that just go to Tyler comm that's Tyl ER dot c om and you can click on templates or view templates down here alright once we do that we have all of these different templates to choose from and these are all just different sections to choose from that you could insert into your website and over here are different categories so you can search for left right image text that means that there's an image on the left or right side and text on the left or right side so we could view that and we can see all of the templates that offer that or we can see the features templates and this is basically if you have different features for your app or product or different features for your services you have a bunch of different services you can list them here but now let's start creating our website and I'm just gonna click on headers and heroes this is like the main image of your website usually at the top but it could be used anywhere you can get creative with it and just scroll down and look for the one that you want I kind of like this one v1 so let's just go ahead and click on it and look at it and it's pretty cool it has a video in the background and a big call-to-action button and all we have to do is click on the download v1 template and I'm just gonna save it to my desktop and a new folder called templates and press create of course you can save the file wherever you want and I'm gonna save it there alright let's go back and let's search for another template let's just keep on scrolling down maybe we'll go to page two and I like this one P 4 so we can just click on it and you can press ctrl and click if you're on a Mac or command and click if you're on a PC or you can right click and open it in a new tab to open it in a new tab alright this one is pretty cool I really like it Alex awesome so I'm gonna press download template and save it takes it out of there and now let's get a client in testimonial we have all these to choose from I'm just gonna do this one looks really cool q4 and you can see it has a video in the background which is awesome so I'm gonna download that and press save and exit out of there then I'm going to go to call to action and sometimes you want your call to action at the bottom of the website so that when people reach the bottom they actually have something else to do or somewhere else to go and not just leave your website and I don't like any of these so I'm gonna go to page 2 and look at q1 alright that looks awesome let's download that template and go back and let's actually go back to page 2 I think I saw one that I did like yeah let's try q3 that looks pretty cool alright so lets just download that template save it and we can exit out of there okay now that we have all of our templates downloaded to our computer we need to upload them into our website so to do that we can exit out of there on the bottom left and press go to dashboard and we can actually press stay cuz let's save our changes click Save and now exit and go to your dashboard and go to Elementor then go to my library we're going to be adding templates to our Elementor library let's go back let's press import templates and press choose file and let's add them all so we're gonna add q3 we're going to open or going to import now and it will import then we're gonna press import templates again choose file q1 open then import and you get the point just import all of the rest of these I'm gonna speed this up a little bit because it is repetitive alright now that all of our templates are imported we can go back to pages and we can click on our home page and we can click Edit with element or that should launch element or then click add template and instead of pre-designed templates click on my templates and they should all be there and now we're just going to insert them so we're gonna insert v1 and bam it's there and we're gonna add template and we're going to go to my templates and we're going to insert p4 there it is an ad template go to my templates insert q4 pretty cool add templates my templates insert q1 and we got one more so go to add templates my templates and insert q3 all right so I think that is the new and improved way of creating a website I think it makes it much better you can combined all these different templates all these different sections into so many different combinations to get your website looking exactly like you want and not insert this entire page where there's a bunch of things that you don't really want so you have to delete them all so I think it is much better and I hope you're as excited about it as I am it'll make my job much easier building websites for people I know that all right now we can edit the page so what I'm gonna do is just click on this bike tour over here and I don't want it so I'm gonna go over to the pencil and I'm going to exit out of there and there's a little space right here and you can make this space bigger or smaller if you want but I don't need a space here so I'm just gonna exit out of that one too and then I'm gonna click on the title and I'm going to change it over here I'm gonna type in love what you do and for this bottom text here I'm going to change it and I'm gonna add in some text create a website and start your business so you can do what you really love all right then I'm gonna click on the button and I'm going to link it somewhere else so I'm going to link it to forward slash about so when someone clicks on it it's gonna go to your website comm forward slash about and I hope that's where your about page lives if not you have to change that link to maybe for size about - me or whatever your about page is named all you have to do to get that name is to visit your about page and whatever it says up on top in the URL field that is the name so just copy the four slash about four slash about - us forward slash about - me or whatever it is alright so that will link to that page and now to change the button style just click on style and we can scroll down and we can change the background color so maybe I want the background color to be transparent so you can make it go all the way down to transparent and that will make the button see-through which is a cool effect but you can't really see it so let's add a border to it so under a border type we can choose the drop-down we can go to solid and add in width I'm just gonna put two so it's two pixels wide and now we can see that see-through button which is really awesome alright and now maybe we want to change the love what you do font so all we have to do is click on it and go to style and under typography make sure that that is checked on and for size we can increase it or decrease it I'm gonna increase it to 94 and for family that's the font family I'm going to make it permanent marker just like the logo so it gives a cool little effect it looks like it's written over the video playing which is cool alright for line height I'm going to change that to 1 and that's how tall the line is and for letter spacing I'm going to space it out a little bit more at 0.7 so that the letters have a little room to breathe and now you see how it goes on two lines I don't want that to happen and that's because the content width is too small so I'm gonna show you how to make it bigger all you have to do is click on this whole section so this is the edit section button right here and if we click on it you can make your content with a thousand and it will allow the words not to be on two different lines alright what we want to do next is maybe add some space to the top and bottom you see how it's kind of scrunched it's kind of not very big this section here one of the coolest things that you could do in Elementor is add spacing and pad to the top and bottom of the entire section so to do that click on advanced in under padding we could change this to 240 so it gives a lot of space on the top and 100 so it gives some space on the bottom and that looks really awesome and some more amateur websites they don't really adjust the spacing correctly and I think adding a lot of space giving space to things is really one way of making your website look a lot more professional alright that looks pretty good we can also go back to style and this is the entire section style and if we want we can change this link because maybe we don't want it to be this video we want to choose the video that we want to be on this background so we can change that there but first let's go to background overlay and let's make it not purple because maybe we don't want it to be purple so we can just click on it and press clear and that will get rid of the purple and go to opacity and make it zero so it's all the way transparent and what you're seeing here is a black and white video so we can't change the video from being black and white we can't make it color because that's just the way the video is so we're gonna actually swap out the entire video so to do that click on background and up here where it says background type you have three different types once the classic background one is a gradient background so it goes from one color to another and the third one is the video background so right now we're already on the video background so we're just gonna keep it as that and we're gonna go search for a video so we can just open up a new tab and go to youtube.com and let's search for a video I'm just gonna type in GoPro Hero 6 that's the newest GoPro and just click on the first video and that looks pretty awesome so all you have to do is copy this URL right here so just right-click and copy or command C on a Mac ctrl C on a PC and we can paste it in right here now that will load any YouTube video right into your website which is really sweet if you have a video that you want to use like you have some footage of the beach or the mountains or a view or whatever then I recommend uploading it to YouTube first anyone who'd get a free account on YouTube then just copying the URL and putting it in here just like this and I recommend that because YouTube compresses the video for you and it does all these complex things that make it really good to stream online and here is our video now and that looks really sweet alright this is turning out great so let's go down to the next section and that looks pretty good of course we could change any of the text or any of the buttons or anything that we want let's go down to this next section we can change this quote and this one looks pretty good too and this hello section also looks great let's change this section down here so let's click on the text instead of saying writing made simple let's say WordPress made simple I hope this is simple for you guys if it is simple please remember to comment rate and subscribe thank you and let's scroll down some more and let's get rid of this image right here we don't need it and let's actually add a button to the bottom section but let's not create a new button let's just duplicate the button on top so scroll up go to the pencil icon and hover over it then click on the duplicate button and click hold and drag and you sort of have to wiggle it a little bit it's a little weird just like wiggle it down and drag in the button and let it go alright that's looking pretty sweet let's add something else by clicking on this box up here and dragging in the spacer and just increasing the space let's do a hundred if I can get it I'll just type it in here 100 so 100 pixels of space at the bottom that looks really nice and our website is looking all done I am very happy with it that's looking really cool we did it in almost no time let's see what it looks like on the mobile version so if we click this button over here and click on mobile we can see that it still looks pretty good but the join the next tour button is kind of squished so let's go back to the desktop version and let's make sure we save that first and let's exit out it there and view our page and we notice that on Elementor we looked at the mobile version the video still worked but actually if we make our page smaller we're gonna see that that video actually disappears because videos don't really play in the background like on your phone so on a really small screen the videos will stop playing it just doesn't work it's not the same technology really so it doesn't work well on your phone just playing a video in the background and the button again is sort of messed up so let's fix those things so we can exit out of there and the first thing that we want to do is fix the issue where the video is not playing like on your phone because it just won't play in the background on your phone so to do that click on the top section and under style under background fallback click the button to add a image and click on whatever image that you want and I'll show you how to get images later in just a second so we're just going to click any image that we want and press open and insert media okay so now we have this image that will work anytime the video doesn't load so anytime the video is too slow or they're on a mobile device and the video is just not loading any time that happens the image will show so that's really cool it's like a safety guard against bad things from happening alright so we can save that and exit out of there and view our page now if we squish the page we're gonna see instead of being blank it will show that image in the background and that looks really cool we still need to fix some things like this love what you do head line is too far up so we need to add a little more space to the top and the join the next tour button is on two lines wheeling one on one line so let's go ahead and fix that so let's go back to Elementor and go to the mobile view and click on the top section then go to advanced and now we have all of these buttons so we have these buttons for desktop tablet or mobile make sure the mobile button is clicked and under padding we are going to unlink the values and that's so that each of the top right bottom and left can be different so we're going to add 100 to the top and so that is only gonna be on the mobile view only when that screen is that small it's going to trigger that all right so let's save that and let's go to our page and click refresh and now let's see when we squish the page we can see that more space was added to the top and that looks really great alright we can even add a little bit more I'll just put 125 and that's gonna look perfect so the next thing that we need to do for our mobile website is to click on the button join the next tour then go to style and we can change the letter spacing but make sure the mobile icon is highlighted and we can mess with that it still goes on the next line though so we can scroll down a little bit and under text padding we can enter in 20 and that will make the padding a little bit less so it works perfectly on the mobile website alright that looks pretty good that scroll down to the bottom and click on the bottom join the next tour button and let's go to style and let's change the letter spacing to zero and that seemed it work for that section so let's just click on save and go to our website and press refresh and now if we look at it we can see that that headline is looking great and the button looks perfect if we scroll down the button looks perfect there also so now our website is completely mobile-friendly alright so we can exit out of there and view our desktop page one more time to make sure everything is looking fantastic which it is and now we can go to the dashboard because we are done setting up our homepage the next thing that we're gonna do is create our about page so what you want to do is click on go to dashboard and now let's import the templates for our about page so just go to element or my library open up Tyler comm and click on View templates then I'm gonna click all templates and just look for something that I like maybe go to the second page keep on looking and I'd like this Z one and actually maybe I'll use the Z 2 Z 3 and Z 4 I'll use all of them and that will be my about page just keep it pretty easy indicate command or control click you're on a Mac or PC and open them all up into new tabs all right then go ahead and download each one and we've already done this so I'll speed it up a little bit and once all of those are saved we can exit out of there and go to import templates choose file and import your template press open and import now and I'm gonna speed through all of that because we have done that before again and it's really easy so just import all of your templates alright and once you've imported all of your templates just go to pages and click on about and you want to make sure that the content layout is 100% full width and the title is disabled so that we have the whole entire page to play around with then press update and click Edit with Elementor alright now we can add our templates in so just click Add templates and click on my templates and we'll add all of them so I'm going to add Z 1 insert click add templates go to my templates Z to insert add templates my templates Z 3 insert add templates my templates Z 4 and insert alright once they're all inserted you can click on anything and change the information you can click on the button and change the text right here or change the link let's have this link to our contact page which lives at ford slash contact and that is looking pretty sweet if we scroll to the top and click on the edit section part they can go to style and we can choose this position as fixed for the image or scroll or default with default when you scroll down it will scroll like normal and if we choose scroll and scroll down it again it Scrolls like normal I guess but if we choose fixed and scroll down you can see the image stays in the same spot when you scroll down and it adds a cool little effect so we're just gonna keep that all right so we're gonna save all of that and exit of there and view our page and that is a really cool looking page and you can tell your story on the about Us page and they could click and go to the contact page but we haven't built that yet and if we squish it simulating a mobile phone and scroll down we can see that it's a little funky we see that Chris Brown is all the way to the left and so is Jessi olive pretty sure these are just made-up names but we're gonna fix them anyways all right so let's go back to Elementor and let's click on this button down here and click mobile to simulate the phone and let's click on our button because we want to add a little space to this button because it's a little cramped so if we click on it and go to style and choose typography as on then go to line height let's pump it up a little bit and we will make it 23 that looks pretty good all right then if we click on Chris and go to style click on content make sure the mobile button is highlighted and click Center it should Center and now we can click on Jessi and go to style then click content and press Center now we can scroll back up press save refresh our page and view the page looking great on desktop and all centered and perfect on mobile all right that's perfect let's exit out of there exit out of there also and go to our dashboard and we are done creating our about page the next page that we want to make is a services page of course this can be any page that you want so let's go to Elementor and let's go to my library and let's find some services templates to put on our page so again we can go to Tyler comm that's t yle RCom and we could just go to forward slash templates save us some time and let's go to headers and heroes and I like this v5 right here so I'm just going to open it up in a new tab and let's click on features and scroll down go to page to scroll down page 3 I guess maybe page 4 will have some luck page 5 we got to have some luck and say the best for last so let's click on c4 and now let's go to a miscellaneous one and click on p2 and there we have it our services page b5 c4 and p2 so let's download v5 and download c4 and download p2 and exit out of all of that then go to import templates choose file and just import all of those and once you're done importing you could click on pages and go to services and we can view our page and we see that we have that title and sidebar that we want to get rid of so we're just gonna go back in under content layout we'll do 100% full width they'll get rid of the sidebar and under title will disable I'll get rid of the title and press update all right then we can view our page and we see that there's nothing here it's a blank clean page for us to work on so we're just gonna press edit page and edit with Elementor then we're going to add template and we're gonna go to my templates and we're gonna add all of them so we're gonna add v5 very cool add template go to my templates and we're gonna add c4 very nice scroll down go to add templates go to my templates and p-two alright awesome and now we are going to edit it to our liking first let's click on the edit section so we're gonna edit the top section and we're gonna add a little more space at the top so we're gonna go to advanced and we're padding is we're gonna put 170 and we can see padding and margin so padding is on the inside and margin is on the outside so margin would push everything away and add like a blank white space at the top if you put like a hundred margin at the top but padding adds it to the inside so there's more padding at the inside of the top so you still see the background and everything it just pushes all the content down but within it I hope that makes sense alright once we're done with that we could click on the title and let's change it to what we do best and go to style and for the font family let's do open sans that's one of my favorite fonts I think that's the fun I use on my own website and then if you want to look at the fonts you can go to google.com forward slash fonts and check out all of the fonts here and you can uncheck these to only show handwritten fonts or serif or sans serif fonts or whatever you want and we can exit out of there I just want to show you those fonts and click to edit the section again then go to style and we're going change the background overlay so go to a background overlay and maybe we want it to be blue and then green so this will give us a gradient background overlay which i think is a really cool effect so click choose your color and we can drag this to green and we could choose this one as blue or what you could do is you can add in your own color if you've copied a color from a different part of your website you could just add in this hex code here there we go I like that green and now we will add in a blue and there we go so we have that nice blue alright so it looks good it goes from green to blue and now we're gonna change all of these icons so instead of Facebook let's type in WordPress find that icon and let's type in WordPress so maybe we do WordPress and for the next one we do the same thing let's type in paintbrush and put in design cuz maybe we do some design and let's go to the next one click on it and use a pencil and type in content because maybe we also do people's content alright that's looking pretty sweet now what we can do is change the second headline instead of fall in love with our features we can say we're pretty good at these things too and we could click this line here and we can make it a different color or of course type in any color that we want and we can click on this real time stats and change the content if we want or go to style and go to content and change the color I'm just gonna paste in that same color green as a line and I'm gonna do that for all of them so I'm just gonna speed this up a little bit so I'm not wasting any of your time and make them all that green color all right now we're gonna edit this last section here so let's click on edit the section then go to style and let's delete this image but before we do that let's actually search for a new image and one of my favorite websites to get images that are free and copyright free and you can use them however you want is pixabay.com that's p IX a ba y dot c om and we can search for interior design or anything else and if we scroll down this one looks pretty cool so let's go and click free download and I'll do the 1920 and press download nope it wants me to sign up for full resolution so the 1280 is just going to be fine alright so once we do that I'll just save it to my desktop and call it design and press save exit out of there and I will delete this image and add a new image and then go to upload files select files and find the image I just downloaded to my desktop and press open it will upload then we'll click insert media and it will insert and that is a pretty cool picture I like that that's pretty sweet alright after we do that let's click on advanced and unlink these padding values and we can add padding to the top and that's way too much so I'm going to add a little bit less and you can add padding also to the bottom so it gives a little bit more space to the top and bottom another way you could accomplish the same thing is to delete the padding from the top and bottom of the section make it zero it then actually click on this column right here where it says we're almost ready so click on that then go advanced it then go to margin and unlike the values and the margin is on the outside so it's gonna push this away from it so if we add stuff here it's gonna give more space not on the inside but on the outside of the top and bottom so I'm just gonna add 50 and 50 to the top and the bottom here in that way this little box right here will never touch the top and bottom it'll always have like a little border around it and that's exactly what we want so that looks great alright instead of saying we are almost ready I'm gonna put we can help you with and these are gonna be all my things that I can help you with so now we can go to style and maybe we want to change the color make it sort of black and go to size and adjust that a little bit you and we can click on this design here and we can go to style we could change the color and we could change it to any color that we want and then you can click on content and go to style and change it to any color that you want again just gonna paste in the same color and then do that for or front end but in any color you want and do that for back end put in any color very easy stuff and what we can also do is click on something like front end and add in a title and that will go above it and that will look fine or we can go below for inner text and put it in right there so I want to say that I'm good at WordPress 75 no way I am 100% alright but maybe my design is not 100% maybe that's 82 and that looks awesome then we'll take the social media links and exit out of there and for more updates follow us we're just gonna say start today it's gonna be a little call to action and go to style and change the font color to black or blackish and then for font family I want to do open sans again and for this space I'm just gonna put in less space and adjust it there then I'm gonna add a button by clicking on this button right here and then go on to button and drag it in it after I do that click on the button and for the text I'll put start and for the link I'll put contacts so they'll click on this and then they'll go to our contact page and they can contact us there for the size of the button let's just do medium and for the style you can click on style and go to border-radius and put in 20 and that will make all your edges rounded and for text padding you could change that that's how much padding is around the start button so you can put 10 50,000 you would probably never want a thousand that's a lot 110 100 alright that looks a little funky sorry I must change that maybe to 20s at the top and bottom to 60s man that still looks weird alright maybe we want the border radius to be 50 all the way around let's turn typography on I think it needs to be a bigger size or something that big all right 23 it is still looks funny I don't know do a better job than this guys all right we'll do 40 and 40 10 and 10 all right that looks all right that's pretty good I like it maybe make the text a little bit of smaller I'm going crazy with this I know this is just a demonstration you'll do a lot better job when you have time but that looks pretty good all right now let's also add a gradient background to this background so we want to click on the entire section then go to style and click background overlay then click gradient because it's gonna go from one color to the next and now we can click on the color for the first color and we're gonna make it green and for the second color we're gonna make it blue you can type in the hex code make that blue and we can type in a hex code for the green also if we want a very specific color all right so now we have our blue and green and it goes from green at the top to blue at the bottom but what if we want it to go from green on the left to blue on the right or vice versa you can change that with first location which is when does a blue in green start does it start in the middle does it start in the beginning let's make it start at 39 out of 104 blue it's the same thing where does it start or where does it end actually so we're gonna have it end at 100 and here's the angle so now we can rotate the angle and let's do 240 so it starts at blue at the bottom left corner and ends at green at the top right corner alright so it matches this up here or it starts at blue at the bottom green at the top and it's the same on the bottom right here and that looks pretty cool it matches pretty great all right let's just click on save and save all of that and exit out of there and view our page and this is our page and I love how the navigation picks up on that blue on the left and green on the right I think that is a really cool effect and if we scroll down our page is looking awesome and the we can help you with pops up with all of our abilities and it just slides to the right very cool and I love it if we squish it down like it is a mobile phone it's a little crammed up here what we do best but other than that the page is looking really awesome so let's just fix that real quick let's go back to Elementor and go to the mobile view and click on the very top section and go to advanced and under padding let's put in 130 press save go back to check our website and click on refresh check the mobile version and that is looking perfect and everything else looks great and mobile-friendly and awesome all right let's exit out of there go back to our desktop view exit out of there and go to our dashboard we are done with our services page the next thing that we're gonna do is our last page which is our contact page but before we do it let's import all of our templates so go to element or within my library once we do that we go to tailor comm forward slash templates and let's actually search for a template I'm gonna search for map and here we have u5 a nice map and let's just download it right here save it to our templates folder press save go back to templates and let's click on contact and maybe go to page two maybe page three and let's try this k5 all right that looks pretty cool we can delete this map here and put in a contact form so let's download the template and save it and exit out of there then let's import templates like import choose file click on templates and you've done this before so find the template and open and import now do that again for the other template import templates choose file k5 open import now and now let's start building our page so go to pages and click on contact and under content layout let's do a 100% full width and click on title and disable it then we can press update and click Edit with Elementor then we can add template and go to my templates and let's add u5 which will put in the map and then add template my templates and let's go to k5 and insert that and if we click on the map we can change the address so the address will be where the pin is you can also put in a city or even a state you could change the zoom level so it's really zoomed in or regularly zoomed in and that looks pretty good so let's scroll down and let's exit out of this map because we already have a map and let's click on these icons and go to style and go to icon and we can change the color and we can type in our color here if we want I'm just gonna do 2169 EF then click on the title and change the title to contact us and let's click on the Edit section and instead of full width which will make the contact us section and the form go all the way to the side let's make it boxed so it stays in a little box and let's not put anything in here it'll just be default alright for a Content position we want it to be default because if it's in the middle then all the content that we add is just going to be in the middle of the section instead of default which is what we want which is on the left side of each section all right now we can go to advanced and I think there's too much spacing at the top so I'm gonna change that from 150 to 102 I'm gonna change my address right here and I'm gonna put in my phone number right here and I'm going to delete this cuz I don't have two phone numbers and I'm gonna put in my email address Tyler Moore at gmail.com right here alright that looks pretty good so let's save that and we're not adding iform yet because we can't do that here we need to do it somewhere else but before I do that actually let me go to style and make this contact us open sans and make it less bold well well maybe a little more bold than that alright that looks right alright so let's click Save and what we're gonna do next is add a contact form right here so let's go ahead and do that eggs that are there and press go to dashboard and again we need a plugin and again a plug-in adds new cool features to your website like a contact form so just go ahead and click on plugins then click add new and search for contact form and one of my favorite ones is contact form 7 even though the one on the right is also super easy and maybe even a little bit easier than contact form 7 but i've been using contact form 7 for so long that i can't part with it but WP forms is super awesome also alright so we're just gonna click install now and then we're gonna click activate to activate our contact form 7 and we're gonna go to contact and we're just gonna click on contact form 1 and here you can change all of these fields but you want to make sure that you go to mail and change this or don't but just make sure that it has your email address because this is where when they fill out the form this is where it gets sent to so you want to make sure this has your email address in it and now what we can do is copy this contact form code here it's called a shortcode and go back to pages and click on contact then click edit with Elementor and now what we can do is search for shortcode sh o RT co d e and drag it in there and this will allow you to put that code into your page so just go ahead and paste that code in there and your contact form will show up now when anyone emails you it will go straight here and you can email them back and start a relationship alright and we can adjust this size so that the contact us is a little bit smaller that section and the contact form is a little bit bigger so adjust it to whatever you want then click save and exit out there and view our page and now we can see our page and it is really cool but maybe this contact us should be a little bit down so it's a little more even with the form so let's go here we can click on this section this column section right here go to advanced unlink the values for the margin and just put 10 here and press save and now if we refresh that contact us should go a little bit down and that looks a lot more even in level 2 my eye alright so that's pretty awesome but if we look up here we see the menu is over this map and it looks pretty weird so how do we make it so that the menu is just like a regular menu and not a see-through menu but only on this page and to do that all we have to do is not go to element or page but click on edit page and click on header then click under header style go to minimal and press update then view our page and now we can see it looks much much better and you can change this header color it just like you did on the transparent one by clicking on customize and header I believe alright so that looks pretty sweet and if we look at the mobile version and squish it down a little bit that looks perfect and that looks awesome the next thing that we're gonna do is add a logo right here instead of text even though the text looks pretty awesome so to do that we're just gonna exit out of there and we're gonna exit here and we're gonna go to the dashboard once we do that we could just click on visit site and let's open up a new tab and go to logo maker com that's L OG o ma ke R Co M we can exit out of this tutorial and find our logo so I'm just gonna look for triangle I don't know that seems like a pretty cool logo maybe and I'm just gonna search in searched and searched and searched and searched for the right triangle not a right triangle for the correct triangle and this one looks pretty cool so just click on it and in logo maker you can click hold and resize you can add text here you can put in your business name and drag it to the side or if you want to be like Apple you can just have the logo there you can change the font but we want a more modern looking logo for our website where it's just the logo that's what like Apple does and that's what logo maker also does if you see in the top left it's just our logo it doesn't say their name so we're gonna add that and to do that we're just going to right click on the text and press Delete and drag it so it's a big size it doesn't matter the exact size then we're gonna make it white and you can't see the logo there but it is there and we're gonna press save in the top right corner and press download and agree to give credit alright once we do that we will go to desktop and just name it logo dot PNG make sure it says dot PNG because PNG makes it so that there can be transparency so that it's not like a square box like if you save it as a JPEG it would be like a square box white in back of it but if you do a PNG and it will be like see-through all right so save that to your desktop or wherever we can exit out of logo maker then we can click on customize and go to header and click logo then click select logo and go to upload files select files go to your desktop or wherever you downloaded it to and choose the logo and press open then it will upload and choose select and click skip cropping because we don't want to crop it that we'll take off the top in the bottom so skip cropping and now we can see our logo is huge but we don't want it that big so go under max width and just change it so I'm gonna change it to about let's see 45 that looks pretty good I like it I like it a little small by depending on your logos dimensions it will definitely be different then we can press publish and exit out of there and now we can see we have this really cool-looking logo on our website and that is awesome so our website is almost done almost complete almost perfect but we have this bottom footer area here and we want to change it and make it look much better so just go to the dashboard and go to Elementor and go to my library and now we're going to import a footer template so I've created footer templates for you guys so you don't need to do all the work yourself alright so open up a new tab and go to Tyler comm click on templates and click on miscellaneous and we have a choice of a black footer here or a blue footer let's go with the black one and press download template and press save it's downloaded now we need to import templates choose file go to templates let's do the x1 template that's open and import now alright once we're done with that this is gonna be a little bit different so we need to go to theme panel and go to my library and add new so we're adding a new template to our theme panel put in the title you can just put in footer and again just like everything else we want the content layout to be a hundred percent full width and the title to be disabled now we can publish that click edit with element or add a template go to my ten and go to the x1 and insert it and here we're looking at doubles because one is a desktop version and one is a mobile version so the desktop version will only show on the desktop and the mobile version will only show if you're on a phone or a screen that's really small so to make sure that your menu is in here again just click on it and go to select menu and make sure it says main or whatever you named your menu next we're going to change out this logo so just click on it and press Delete and then we're gonna add in one we're gonna add in the a and press insert that looks pretty cool and you see it's cut off here a little bit on the right side and that's because the image size is set to thumbnail and not full so we want it to be full and now we see the whole thing and we can adjust the size here I'm gonna make it a little bit smaller and let's duplicate it and just click hold and drag it to the bottom one and let's go over this pencil and exit out of there and let's make it in the center because when all of this gets squished on a small screen it's all gonna stack up on top of each other so we want everything to be in the center on the mobile version alright and we can increase the size a little bit on that one now we can go over to the social media icons and click on Facebook actually we'll keep Facebook and for Instagram I'm just gonna type in YouTube and I'm gonna put in my YouTube URL and I'll click on Facebook and I'll change it to my facebook URL alright we'll hover over the pencil and we'll press the duplicate button and we'll just drag that below and we will exit out of this one and we will Center it so that it goes in the center alright that's about it so let's press save and exit out of there and view page and this looks really weird because we're just viewing the footer page but if we go to our home page and we scroll down we're not gonna see it because we haven't added the footer to our page yet so what we need to do is click on customize and let's scroll down so that we can see the footer then click on footer or bottom and we're actually going to disable it and that will leave us with just a black bar then we're gonna go back and go to footer widgets and select template so we're gonna select our template that we added so now footer is here so we're gonna select that and now we see our footer there but really there's black space on the top and bottom so if we go to select color and we make it a different color we can actually see it and we don't want all of that color there so where it says padding we're just gonna put in zeros sometimes when you put in one zero it doesn't work so sometimes you have to put in double zeros so just put in double zeros and we still see color on the left side and the right side and that's because the footer is not stretching all the way across so let's publish all of that and exit out of there and let's go back to our dashboard and then go to theme panel my library and click on footer and edit with Elementor and let's click on the top section first and boxed is fine right here but where it says stretch section let's click on yes and let's click on the second section and also press yes all right that should solve the issue where it doesn't stretch out all the way but we also forgot a step here if someone clicks on the logo at the bottom it should take you back to the home page that is the standard way of how things work usually so let's click on the first logo and under link - let's do custom URL and let's put in our website name alright and let's do that for the second one just click on it go to custom URL and put it on our website name now we exit out of there and view the page and it looks funny but if we go to the home page and we see it in a link to our home page and it stretches all the way across and it looks pretty fantastic now if we squish it the mobile version comes into play and everything is centered and that looks pretty awesome too the next thing that we're gonna do is change our fav icon and that's this little icon up here you could barely see it but you see it looks like a page right now we want our logo to be in there but if we keep our logo as white because it's a white background you're not gonna be able to see it so I want to change our logo into a black logo so that we can actually see that icon so to do that click on customize then click site identity and we can rehear site icon should be square and at least 512 by 512 pixels are right so let's go to logo maker.com again that's ello geo Mak are with know e-comm exit out of there and let's search for that triangle again and I will speed this up because takes a long time to find this triangle all right so we found the triangle and now I'm gonna make it bigger now if we move this layers panel we can see the crop button hiding behind it and the bottom right so just click on it and if we adjust it we can see in the top right the dimensions and the dimensions again if we look on the website need to be 512 by 512 so let's go back to logo maker and let's adjust it so we can see the width 512 and the height needs to be also 512 there we go then let's crop it right here let's move it and double click to crop and now that it's cropped we can click and drag the logo so that it fills it out and try to fill it out as much as possible then click Save logo alright and press download and just type fav icon exit out of there and select your image upload files select files click on fav icon press open and press select and click on crop image and now we can see we have that cool little a right in the top left corner click on publish and exit out of there and you have that little icon right up there and it looks really cool and really polishes off your website so that is how you create a website step by step with no step skipped I hope you love your website and I hope you got a lot out of this video and just be amazed at what you built it is truly amazing what you can do now and we can look at our website and it looks really cool we can go to the about page awesome our services page is beautiful click start' and go to the contact page and i think that we did a really really good job we could click on this bottom logo right here and it should take us back to our home page and it just looks amazing now there is one more thing that we need to do and that is to log out so we can view it as the visitor so just go over to the top right and hover over then click log out and then visit your site just like a visitor would and you are done creating your website so I hope you loved this video please remember to comment rate and subscribe I'm Tyler Moore thank you so much

Channel: Tyler Moore

Views: 5,645,574

Rating: 4.9057198 out of 5

Keywords: Create a website, make a website, build a website., Create a WordPress Website, WordPress website, WordPress tutorial, WordPress for beginners, WordPress Video

Id: 2cbvZf1jIJM

Length: 88min 3sec (5283 seconds)

Published: Tue Jan 02 2018