How To Make a WordPress Website - For Beginners

hi i'm tyler and in this video i'm going to show you how to make a wordpress website step by step with no steps skipped and wordpress is by far the most popular way to make a website in the entire world it's used by people like sony ups gm best buy the new york times jay-z and katy perry making a website has never been easier you just get your domain name and hosting install wordpress login and then choose the website that you want to import there are so many different options there's probably one that's super close to the business that you want to start once you find it then just click import after you do that you can literally change anything from the text to the font to the images to the backgrounds you can even put in 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 make one you can rearrange the menu and add a contact form you can literally make it look like any website that you want to look like and if you're a professional web developer you're probably using wordpress anyways so imagine with this new way to create a website making your clients websites in days instead of weeks or months i think they'll be so much happier and also you could probably make more money if you can turn around the websites a lot quicker you can also create this website using a mac or pc all the software is online so it doesn't really matter what you use and your website will work on all devices like your desktops your tablets and your mobile phones and before we begin i want to thank edmund well he was a subscriber of mine and he was working at 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 have just bought a new house so congratulations that's super awesome sometimes you can get millions of views on youtube and i just don't realize that that's actually millions of people so super grateful that he contacted me and told me that story and now in his spare time he helps me create these videos so just thank you so much emmanuel and congratulations to you and sadie if you guys need any help with this tutorial it is step by step so it should be super easy but if you do need any help he's there to help you his website is icreateyoursite.com as long as you follow the steps and do the things that i do you're going to have a website and it's going to be amazing now let's go over the basic steps to create our website and maybe the most important thing how much everything is going to cost there are four basic steps to create your website that's getting your domain name getting hosting installing wordpress and actually creating your website the first thing that we're gonna do is get your domain name your domain name is the same thing as your website name google's domain name is google.com my domain name is tyler.com your domain name could 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 a website name or a url and your domain name costs about thirteen dollars per year the next thing that we're gonna do is get hosting hosting is a computer that's on 24 hours a day seven days a week that holds all of your website information so if you only had a domain name but no hosting people would be able to type in yourwebsite.com but there would be no logo no text no images that show up because you need somewhere to hold all of that information in order to deliver to people 24 hours a day 7 days a week 365 days a year and that cost about 10 a month you get a bigger discount by signing up for more months at a time which is probably the smart thing to do and that could go down to about five dollars a month so the next thing that we're gonna do is install wordpress wordpress is what's called a content management system which is just a fancy way of saying it helps you manage all of your content so instead of having to do code and all this complex stuff all you have to do is drag in images and type and change around some settings and you have a website so we need to install that wordpress software onto your website and luckily for us wordpress is open source and free the next thing that we need to do is create your website so this includes building your pages choosing your colors putting in all your images and content and all the tools that i'm going to be showing you in this video are going to be absolutely free and you're going to be creating your website yourself so you don't need to pay anyone to do it so that's also free so the total cost to start creating your website would be twenty three dollars but i do have a discount so that's gonna bring it down to ten dollars and thirty seven cents to start your website and to be distributing it all across the world which i think is really awesome all right so let's do steps one and two we're gonna get your domain name and hosting and luckily we could do that at the same place hostgator.com so the first thing that we're gonna do is open up our browser and we're gonna get our domain name and hosting so to do that you can just go to hostgator.com that's 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 24 7 365 live chat email or phone support 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 all of them and if you do go with another host then this tutorial is going to be a little bit different but it should still be super easy to follow along so next we're going to see all of these different options web hosting website builder cloud hosting wordpress hosting reseller vps dedicated and domains and you might be thinking if we're doing a wordpress website why not do wordpress hosting but in my opinion that just has so many different bells and whistles that you don't really need and you can always upgrade later so we're just gonna stick with web hosting so go ahead and click on that and if we scroll down a little bit we're gonna see that we have three different plans the hatching plan the baby plan and the business plan the business plan in my opinion just has way too much stuff that you really don't need so it really is between the hatchling and the baby plan the difference between these is that the baby plan offers unlimited domains so you can have like your website.com yourmomswebsite.org a friendswebsite.net or a business clients website you can have as many websites as you want but with the hatching plan you can only have one website so like yourwebsite.com but because you can always upgrade your website at any time and you're probably only starting off with one website i recommend getting the hatching plan so we're just gonna click on buy now and now it's going to ask us to choose our domain name aka our website name and we can either register a new domain name or you can say i already own this domain name maybe you bought a domain name from somewhere like godaddy.com and you already have it you can enter it in right here so you put i already have this domain name.com.net.org whatever your website is you just put it in right here but because we are registering a new domain name i'm just going to click on register a new domain and i'm just going to put in my new domain learn how to create a website dot com but you can choose dot online dot site dot store dot website sometimes the dot com isn't available or sometimes it's just kind of cool to have the dot store dot space or dot host or dot net but i'm just gonna choose dot com and then it's gonna ask you do you want the dot club.site.net.online.space.website.org.me.info.com.host and i think the answer to that is no you don't need all of these different websites you just need one to focus on in my opinion and having the code.biz.host isn't really going to help you in my opinion so we're just going to skip that next it's going to ask you do you want domain privacy protection and what this is is when you register a new domain name it puts your business name and business address and phone number and email in a place where if someone looks up your website they can see it now i'm really torn about this because on one hand i really trust people and i feel like it should be out there for people to contact you but on the other hand i have heard a couple of people complain that they get some spam calls from people so this one is really up to you if you definitely don't want any spam calls or people contacting you then definitely get privacy protection but i trust people so i'm just going to uncheck it because it does also cost 14.95 a year all right so next it's going to ask us to choose a hosting plan and for our package type we already went over this so i'm just going to go with hatchling and for the billing cycle the basic strategy here is the longer you go for the bigger the discount you get but the more it is up front and the shorter you go for the less amount of discount you get but the least amount up front so it probably is the smartest to go with the three months six month 12 month or beyond to get the biggest discount and i'm going to show you how to get an even bigger discount in just a second but if you wanted to be the least amount upfront then you'd go with the one month all right after that just enter in your user name and security pin and then all of your information like email first name last name phone number address country and i'm going to change my state because i'm in california then you could put in your credit card or paypal and now it's going to ask us what additional services do we want so for the first one is site lock monitoring and this protects your site from hackers and we can always add this on later so i don't think that we really need it so i'm just going to uncheck it and for site backup i'm going to show you how to do that yourself so i don't think that we need it so we're just going to uncheck it and we can see that the amount due is 23.90 and i think that is an amazing deal to get your website out on the internet and just to be sharing with the world but if you enter in a coupon code save code s-a-v-e-c-o-d-e and click validate that goes down to ten dollars and 37 cents now if you went with a different plan like you got a three-month six-month or 12-month or longer plan it's going to give you an even bigger discount percent wise but again i think it's just amazing that you can have your website on the internet for 10.37 that's just crazy now this is my coupon code and hostgator told me that this is the biggest code that there is and i do get credit for it so it's definitely a win-win situation and i really appreciate you putting it in it helps me make these tutorials absolutely free all right next we're going to review our order we have 24 7 365 phone live chat email support instant account activation money back guarantee our domain registration and the hatching plan so we can just scroll down and click you have read and agree to hostgator's terms of service and click checkout now so congratulations we're all done getting your domain name and hosting the next thing that we're gonna do is install wordpress to do that all you have to do is click on hosting and you can click wordpress one click installation it might also be called quick install sometimes if you're on another host or even hostgator itself it's called quick install so you can either click wordpress one click installation or you can click on quick install all right once you do that we can close this tab and then we can select our domain name now i have a whole bunch of domain names but you probably only have one so i'm going to choose my domain name learn how to create a website dot com then it's going to ask you do you want to put something in this directory this slash directory and we want to leave this blank because we don't want wordpress installed on yourwebsite.com forward slash something we want it just installed on your mainwebsite.com if we look down here it says let a pro do it for you and it costs 3.99 or 1.99 or 99 and that is just way too much we're doing it all of our self right now so you don't need to have a pro do it for you and spend all this money it's super easy all right now we can just click on next then it's going to ask us to enter in the blog title which is the same as your website name so i'm just going to put in create a website but you can put in whatever you want because we can always change this later it's super easy and i'm going to show you how next for admin user you could put in your name or admin first name last name i'm just going to put in my first name and last name and my email address then i'm going to make sure automatically create a new database is checked and agree to the terms of service and click install all right now we can wait for wordpress to install and now our installation is complete i told you it was super easy under installation details i like to copy this and paste it somewhere safe or print it out so that i have it just in case i accidentally closed this tab and now we can go to our website but if we do go to our website and we just registered this new website it isn't going to 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 to two sometimes up to 24 but it usually doesn't take that long in order for your website to spread across the entire world so all we need 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 will be back in just a second all right i'm back it's been a couple of hours now i'm going to check my website so i'm just going to type in my website name and it works it says website coming soon but that's how you know that it is working so we are all done installing wordpress the next step that we're going to do is to log into wordpress it's super easy so to log into wordpress all you have to do is go to yourwebsite.com forward slash wp admin that's wp-a-d-m-i-n and press enter and this is how you log into wordpress so we could just copy our username and password we could type in our username here and paste our password and press login once we do that we are now logged into the dashboard that's what it's called when you log in it's called the dashboard and we can exit out of this tab right here and if we hover over our website name and click visit site we can see that we have a website now this website isn't 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 pretty cool i guess but it's really not that cool we're gonna make it so much better and up here is called the toolbar and it's only there when you're logged in so no one else sees it if they go to your website only you can see it because you're logged in so the next thing that we're going to do is change our password so we have that really long funky 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 dashboard and click on users and under your username click edit alright then after you do that we can scroll down all the way to the bottom and click on generate password and under new password i'm just gonna hide mine so the entire internet doesn't log into my website you could then type in your own password and click update profile all right now we have our entire website with our new password and we are done with that the next thing that we're gonna do is delete 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 for example with a really cool contact form or a really really cool way to edit the website but one of the best things about wordpress is that anyone can build things for wordpress so people build all of these different things for wordpress and you can add them on it's like by default your house doesn't have a refrigerator but you buy it and now your house can chill food and by default your house doesn't have a tv but you get one and now you can be entertained with movies that's the same idea with a plug-in wordpress can't do everything but you can install these free plug-ins and now you could do a whole bunch more cool things but sometimes in order for the hosting companies to offer you such a good deal they'll make partnerships with plug-in developers and it's plugins that you don't really need so i'm not going to be mad at the hosting companies for doing this they're offering everyone a really good deal on hosting but you don't need all of these unnecessary plugins so i want to show you how to delete all the plugins that you really don't need to do that click on plugins and then you can scroll down and check off the plugin box that will make all of the plugin selected then from the drop-down choose deactivate and apply we're deactivating all the plugins and then check the plugin box again that will select all of them and go to the drop down box again and go to delete and apply that will delete one by one all of your plugins and now your website is clean and you don't have all these plugins advertising things to you once we do that we're gonna 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 we scroll down and click on this hello world recent post up here in the url it says yourwebsite.com forward slash index.php forward 2018 0326 hello world now if we go to the google website or apple website and we click on their about page it just is going to say apple.com forward slash about it's not going to say apple.com forward slash index.php blah blah blah blah blah so we want to get rid of this index.php because it isn't professional and you do that through permalinks so to do that we're going to go back into the dashboard and let's get rid of this box right here and we're gonna go to settings then permalinks now we can see under custom structure it has this crazy way of displaying your url and we just want it to be simple so we're just gonna click on 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're gonna see it's our website dot com forward slash hello dash world which is perfect all right the next thing that we're going to do is we're going to make sure that wordpress is up to date so we're just going to hover over our website name and go back into the dashboard and then click on updates and it looks like our wordpress is up to date so that is perfect the next thing that we're going to do is change the theme of the website the theme of the website is the design of the website it's what the website looks like so 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 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 whole bunch of themes to look through but this tutorial is based on the astra theme and if you don't install the astra theme then you won't be able to follow all the instructions and this theme is really super amazing because you're allowed to install websites on it in seconds so we're just gonna search for astra astra and we're gonna click on install then we're gonna click on activate and now if we visit our website we're gonna see that it has changed its appearance now this is not great this is still pretty bad so in the next step i'm going to show you how to make it great so in the next step we're going to install a plug-in that allows you to import an entire website in one click and have it completed and completely done so to do that let's hover over our website name and go back into the dashboard 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 on install now and wait for it to install and then we can click on activate once our plugin is activated before we install all of these different pages on our website because that's what it's going to do it's going to import all of these different pages so that we have them on our website i want to go to pages and click on that and i want to delete all of these pages now you may have a lot more pages or you might not have any but i just want to start on a clean slate so we can just check this box next to title and from the drop down go to move to trash and apply and then we can click on trash and check the box next to title again and from the drop down go to delete permanently and apply all right now we don't have any pages on our website so we're starting clean alright so now we can import our site so let's go to appearance then astra sites and then it says select your favorite page builder and we're using elementor so click on elementor and now you have all of these different websites that you can choose from and in one click you have the entire site some of them are tagged agency which is an upgrade 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 adventure here which is my favorite one and we can click on it and we can preview it and it looks really good and we can install it by installing the required plugins first so again plugins add functionality to your website so this is going to add a contact form and it's going to add the elementor page builder so all we have to do is click on install plugins and they are going to install and they are going to activate by themselves and we can press ok to this little pop-up here and now it's going to import the entire website so this can take anywhere from 20 seconds to probably two minutes so i'm just going to speed it up a little bit and it is done importing and now we can view our site and bam we now have an entire website just imported and completed and done and i think that's really awesome it saves so much time rather than having to do every single page yourself it's all set up for you and now you can just change exactly what you want so we can close that tab right here and we can look at our site and it looks really really awesome [Music] we can also go to the about page and we see that that looks really cool too and we can see up here near the services page if we click on that that the entire website has that transparent header which is super cool but you can also change it to a non-transparent if you want and these pages look really amazing we can also go to our contact page and check that out and where it says we're ready let's talk that is the contact form 7 so people can fill it out and they can contact you about your product or services and we have this take action call to action up here and i'll show you how to set that up in a little while all right now we can click on our website name and we can go back to our website and that's how you import an entire website in just a couple of minutes the next thing that we're going to do is change your site title which is probably your business name so all we have to do is click on customize and then below right here we can click on layout and then we can click on header then click site identity and here you can put in a logo if you already have one if you don't have one i'm going to show you how to make a logo a little bit later in this video but if you just want to change the text right now we can do that by changing the site title right here this is usually your business name so i'm just going to leave it create a website and your tagline is more information that describes your business so if you're a graphic designer maybe it describes all the stuff that you do maybe you do animation or portraits or line drawings and your site title and tagline will display in the search engines so make sure it describes what you do alright once we're done with that we can click on the back button and click back again and back one more time and now we can go to typography and we can go to primary header the top navigation part of your website is called the header it's like your head it's at the top and the bottom is called the footer like your feet so just click on that and now we can change the font size maybe i'll make it really big or i can just keep it at 22 and now we can go back and we can change the colors so just go back twice and go to colors and background and go to header again and click transparent header and now we can select a color from the site title and you can make it any color that you want i'm just going to keep it white and for background overlay color that is the color of the header so we can choose a color and make it transparent if we want and that looks pretty cool but not that cool so we're not going to keep it and site title hover color that is when you hover over the name what color is it so we can hover with our mouse over it and we can turn it to black but i like it just white it's fine and there's all these other options that you can play with to make your site just perfect but we are going to publish that and exit out of there and that is how you change your site title name and tagline so the next thing that we're going to do is the fun part probably the part that you've been waiting for where you're going to edit your website and make it exactly how you want it so to do that all you have to do is click on edit with elementor up here and elementor again is the page builder that we installed once it loads we will be able to edit our website and we can edit anything on here on the left side we have all of 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 heading which is like a headline an image a text editor you can drag a video widget and then have a youtube video or your own video in there you can drag a button or a divider or spacer and a lot of this is just playing around with it so don't be afraid just to 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 just feel free to play around with it all it's a lot of fun over here on your right side is where your website is and they have a new inline editor where all you have to do is click on it and you can type in whatever you want or you can go on this left side and you can add more text here so that's how you change the content in the content tab here but how do you change the way it looks and that is with the style tab so go ahead and click on style and here we can change how everything looks so like the text color the font size and the font family so if we click on typography under size we can just drag the slider up and we can increase the size and you have so many different options of what it looks like you have almost unlimited control over it all right now we can click on this up here explore the colorful world and maybe we'll want to change that to something else like get it done with wordpress and we can also click on this little line right here sometimes it's hard to click because it's so small but you can click on it and you can change how wide it is with the weight and you can adjust the width to any size that you want and you can also change the color so we'll make this a sand color the next thing that we're going to do is change this button to do that all we have to do is click on it and go over on the left side and let's say that someone clicks on the button we want them to go to our about page all you have to do is start typing about and you'll see the page and just click on it and now when someone clicks on that 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 stuff or delete stuff and put whatever we want right here and to change the way the button looks we can go to style and we can click on 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 hover we can choose what color it is so instead of this red i'm going to choose a darker blue and that's what you want you want when someone hovers over your button for it to change color because that's what people expect people expect a button to change color just a little bit so that they know that it's a button all right that looks great and the next thing that we're going to do is change this image so to change this image we can just click on this entire section right 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 click on style and to change the image just click on the image all of these images show up 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 then you can click on 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 that's p-e-x-e-l-s dot c-o-m and it's a website of free stock photos so you can use any of these and they're really really cool and really high quality so it definitely makes your website look really awesome all right so i'm just gonna search for desert and this one looks good so i'll click on it and instead of just clicking download let's click this little arrow because we don't want to download the entire full image size because if we do that's going to make the file size really big and it's going to make our website a lot slower so instead of original let's click on large and let's press download all right let's just save that to our desktop and exit out of there and exit out of this tab and then we can select files and upload the image and if we see over here the image size is 357 kilobytes and that's probably what you want your image to be around your large images at least you don't want it to really go over 500 one megabyte is way too much so this is about perfect but you don't want too many of these really big images on your website because it'll make your website slow all right then press open and we can insert media and now we're going to see that beautiful image in the background right there and that looks really awesome but we can see that the image looks a lot darker than the regular image so the image on the website looks like there's something over it and there is it's called a background overlay and this effect is really cool if you have words over your image because sometimes the words won't pop unless you have a background overlay over it so if we scroll down and choose background overlay we're gonna see that a color is selected and if we click on it we can change this to any color and that's also really cool so if your logo is a certain way or your business has certain colors you can make your website have those colors also but i'm just gonna stay with black and opacity is how see-through it is so i'm just gonna lower the opacity so that it looks a little bit lighter but you can also darken it to all the way black and i'm just gonna choose about .23 all right that looks pretty good but what about all the space on the top right here and all the space on the bottom how do we control that maybe we want it less or maybe we want it more to do that just click on the entire 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 mess with the padding right now and let's make it a little less on the top and a little bit more on the bottom so that wordpress is hovering right over the sand dunes that 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 on the bottom and view what that looks like and it looks like wordpress is sort of sitting on top of the sand dunes and that's pretty cool alright that looks awesome let's go back to style and check out one more option and here where it says attachment fixed that's when you scroll the website the image won't move but what if you want the image to move when you scroll it you can just go back to scroll so now when we scroll the website the image moves or go back to fixed and now when we scroll the website the image stays there so that's a pretty cool effect so let's just keep that and now let's update our website and preview it by clicking the little i and we can see that our website is looking awesome alright let's exit out of there and go to the next section so let's scroll down to upcoming events and let's say we want this text right here we want it above the image all we have to do is click hold and drag where the pencil is and move it up we can do that to the other side also click where the pencil is click hold and drag move it up and let it go another technique that saves a lot of time and is super cool is copying styles so again style is the way something looks so we can go up to this button and we can copy it and we can go back down to this button right here and we can paste the style so that's not going to change the content that's just going to change the way it looks so that can save you so much time now let's say we want to add some more spacing to the learn more button we can go to advanced and we uncheck this link values together because if it is checked then all the values will be the same so if we put 90 at the top it'll be 90 at the top right bottom and left we only want it 90 at the top or 30 at the top or whatever it is so let's unlink them and put in 90 oh that's way too much let's put in maybe 30 or 35 and again we can copy that and paste the button style and it will paste with that spacing so that looks really great if you want to change these images it's really easy all you have to do is click on it 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 style and you can make it bigger or smaller by adjusting the width and you can align it perfectly with the other image all right now we can click this button and look at our website and it looks really awesome alright now let's scroll down and let's edit another section let's edit this explore section right here as you already know we can click on this text right here and go to style and change the colors that's all boring stuff now though right let's do something much better let's click on this little menu icon right up here and let's add something instead of just editing something so let's choose maybe a video and now we have a youtube video inside of our website and you can use any youtube video and you shouldn't have any issues with that so let's go ahead and find our own video so let's open up a new tab go to youtube.com and let's search for something maybe gopro surfing that should be cool and let's click on the first one and that looks really awesome so let's copy the url just right click copy and exit out of there and then right click and paste in the url field and now we have our own video or someone's video in there and you can also change the start time so when the video starts so let's say 70 seconds and we can also put an end time for when it ends but we'll just 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 in it and that's really really cool alright but i sort of feel like the right side of the video is a little too close to explore the world i want a little more space in between there so i can go to advanced and then i can unlink this margin so they're not all the same values and on the right side i can put 50 and that will give me a little bit more space on the right side and now i can click this button to preview it and it looks a lot better with a little more space from the right side of the video to explore the world all right but let's get rid of the margin let's just put it at zero again and now let's delete this entire column right here so we can click on the column and press delete and now we just have this big video in here which is pretty cool and it will play fine and everything [Music] and it looks pretty good except i think the video is a little bit too wide it would look a lot better if it was more centered so let's click on the entire section here and under content with let's drag that to about 900 or we can enter in the value right here and that looks much better it doesn't look like the video is so wide and overpowering all right we can also click on the pencil and we can see we have a lot more video options here like auto play or loop or mute or to show or hide the player controls you could really customize it any way you want so what happens if you mess up or you're just messing around with some things and you want to undo you can easily press ctrl z or command z if you're on a mac or you can click on this history button right here on the bottom left and it has all of your history and on the right side it has your revisions the difference between your regular action history and revisions is your revisions are the things that you have press updated and saved so the first time we created the website it made a revision so we can go all the way back to the first time with our individual actions that's like pressing ctrl z if you're on a pc or command z if you're on a mac a whole bunch of times but here we can jump to any of them really quickly so let me click on one and we can see it's taken us back to when i had two columns and what if i want to make this website a lot different what if i want instead for the video to be here i wanted something amazing i wanted the video to actually be in the background so instead of this image a video would be there the first thing that we would do is delete this column and we'd center everything so we just click on each thing and press enter click on that and click on that and maybe we wanted the button to look a little bit better so we copy this button and paste the button style and a lot of times it's hard to read when the text goes all the way from the left side to the right side so you want to contain it a little bit more so we can click on the whole section and for content with let's just enter in 800 right here and now let's get that video in the background so go to style and click on the video icon and let's paste that video link that we copied before and for start time let's put in 70 again and end time i don't know 96. all right so now it's going to loop from 70 to 96 it's just going to play over and over and over again but now it looks like there's a ghost and that's because there's a background overlay so just click on background overlay and we can delete it and now it looks super cool and we can change this to be white that'll probably look a lot better so just click on it change the color to white alright let's update that and let's preview our website and that looks pretty impressive that's awesome alright but we can close that tab the next thing that we're going to do is add a complete new section ourselves because you can create any of these sections that you want you can duplicate any sections from anyone's website or we can make our own just from our own mind so to do that let's scroll down and this section looks fine i like it but let's create a new one so we can click on the plus button to add different columns so we can choose one column two columns which you've seen which is like that youtube video with the youtube video on the left side and other content on the right side or we can choose three columns this is what three columns looks like there's a column on the left here and then there's two image columns on the right so one in the center and one on the right but we're just going to scroll down and go with one column then we can click on this widgets menu and we can click and hold and drag in a heading and we can change the text let me just put wordpress and center it then we can go to style and click on typography and we can change the font to anything we want there are like 600 fonts so it's a whole bunch one of my favorites is permanent marker and we can change the size of that but there are a whole bunch of other fonts my other more serious one is lato that i really like i also like open sans and roboto let's just go with latto though and we can change the size to 100 and make the font weight 100 or anything we want the font weight is how thick the font is i'm just going to put it at 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 next you can go to style and click on the typography and make it bigger or smaller and let's copy in a button so just go over to another button and duplicate it and where the pencil icon is click hold and drag it under and we can center it next let's change the text so maybe this will go to our contact us page and we can just start typing in contact and clicking on the page and it will go to that page when someone clicks on it now let's add some space to the button so go to advanced and where padding is let's put in 25 so it adds a little more white space to the button next let's add in a background so let's click on the entire section go to style and click on the classic background and just choose any color that you want maybe that looks a little bit flat so let's choose a gradient and we can choose this red color and make it a blue color so it goes from one blue to another that looks kind of cool for angle you can change the angle of the gradient so you can just mess with that and get it perfect for location that's like when does the second blue start and when does it end so it can start at a hundred percent or zero percent and of course again we can add a background to this section so we can open up a new tab let's go back to pixels.com and let's search for desert again and now we can choose another desert image and we can click on the large size instead of original and press download and save that to our desktop exit out of there go back to background type classic and choose an image upload files and select files choose the image and press open wait for it to upload and insert media now it looks a little bit crazy because the image is at 100 and it's just too big so we can go down here to size and choose cover and that will make the image squash down and resize which is the best option you'll probably want to use cover most of the time all right but let's change the words to white because we can't see it so just click on the words go to style go to text color and make it white do that for the other one too and now we want to add some spacing to the top and bottom so that we can see the image so everything looks like it has the correct spacing and it will look 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 which could be 160 and the bottom which can also be 160. and now that looks a whole lot better and we can see the desert so let's update that and let's preview our changes and we can preview it here or we can just go to our website so let's go to our website and we can see that we have the desert daytime at the top that cool video in the middle and at the bottom we have the night desert so that is really awesome but obviously your website's going to be a lot more thought out i was just trying to show you all the cool things that are most commonly used and the things that i'm excited about that help you control your website alright but let's exit out of there and move on to the next section in the next section i'm going to show you how to control the mobile version of your website so all you have to do on the bottom left here is click on the responsive mode icon and choose mobile once you do that you can see what it would look like on your phone and if we scroll all the way up we'll see that this wordpress is way 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 they will see it in the size right here the desktop version will not be affected next if we scroll down we're going to see that everything else is looking pretty good right here and that's because elementor is really good at making it all mobile friendly for you and if we get down to the video part of the website we need to change this because on your phone you're not going to be able to see the video it's different technology so the video is actually not going to work on people's phones so if we click the entire section and we go to style we can click on background fallback and this is so when the video doesn't work it will fall back to an image so it's always a good idea to have an image right here so let's click on it and let's choose the canoe and press insert media alright we don't see it yet because the video is still playing here and if we go to 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 right there and now we can mess with the background overlay again and we can actually see it if we choose a color we'll just make it black and we can make it darker or lighter but you want to make it something that also works with the video all right let's go to style and paste back in that video and we can see it here but it really won't be there once we see it on our phone and i'll show you that in a second next let's scroll down and we can see a whole 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 and scroll down and 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 are in the edit mode but if we expand this out right here it will disappear and it'll show how it really appears on the phone and if we scroll up we'll see that that video isn't there and the fallback image is there so let's click and let's expand this again and scroll down and let's fix this wordpress so just click on it go to style click typography enter in 44 just like the one above it and now we can update and that looks really great so now we can go back to the desktop version and we can see all of the changes on the mobile didn't affect the desktop version so we have as much control as we want but most of it gets done for you it's really a perfect balance alright so we're all 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 to add some cool effects so let's go to edit with elementor and let's click on this who we are and let's add an entrance animation so when we enter the page it's going to do a little animation it's going to be very subtle but i think pretty cool so let's click on it and then go to advanced and then under entrance animation we can choose fade and write and we can see it or zoom in right or we can choose swing or light speed in or roll in i'm going to keep it simple and just choose fade and up and we can change the speed to slow or normal or fast i'm going to keep it normal so that's pretty cool let's scroll down and for this image when you hover over it with your mouse i want to do a little animation so just click on the image and go to style and click on hover and under hover animation let's do pulse shrink not too sure about that let's try grow rotate that's one of my favorites so when you hover over it it will grow and tilt a little bit alright that's awesome let's go check those out let's press update and preview our changes and if you notice when it loads that who we are comes up and fades up and if we scroll down and hover over that image it grows and tilts so that's super awesome it's very subtle but i think it sort of polishes your website off 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 for the information but i think if it's really subtle it can add to it alright next we're going to click on services and let's learn how to rearrange this page alright so we're going to rearrange some of these rows and columns and maybe we'll enhance an image so let's click edit with elementor and if we scroll down we can click hold and drag an entire section and sort of wiggle it up and let it go 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 it and we can blur this image or change the brightness or the contrast or maybe the saturation make it a little bit more vivid and you can also change the hue so it's a certain color and we could turn the saturation down just a little bit so it doesn't look crazy and we can press update all right let's preview our site and close out this tab and we can see that the columns are rearranged and the rows are rearranged and that image looks pretty good the next thing that we're going to do is edit our projects page so go ahead and click on projects and what we're going to do here is add an image to the page so we can see we have a gallery here we're just going to add an image right in the gallery so we can click edit with elementor and just scroll down and click on the gallery and click add images and we can search for an image on pixels.com i'm just going to search for kayaking click on an image and download the large size save it to our desktop exit out of there and exit out of there upload the file select the file and click on it and open it and if we see under the image it says it's 808 kilobytes and that's a little bit too big so we need to edit the image and resize it so just click on edit image and it actually doesn't need to be 1920. so i'm just 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 just a small image in a gallery so we can click on add to gallery and we can rearrange it maybe we'll put it right there and click insert gallery and now that image is in the gallery and we can update it preview it exit out of there and we can look at it and it looks awesome all right the next thing that 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 info over here and we want to get this form working on the left side to do that click on edit with elementor and let's scroll down and for the address let's just click on it and change the address information next let's click on email us and change that information and let's click on call us and change that information we can also click on the social media and we can add our social media links right here and now we can click on our form but we're going to see that we can't edit it right here and that's because we're just provided a code for the form called a short code and i'll show you where to get this short code in just a second because this short code is the code to insert this form but to change the form let's update our website and let's go back to our website dot com forward slash wp-admin so we go into the dashboard and let's click on contact and we can see here it says miss configuration so we're going to fix that but if we scroll down and click on edit we can see that shortcode right up here so to get this shortcode to show up on any page that you want you would drag in a short code widget and then you just paste it in it's already done for you on the contact page but just in case your form for some reason isn't showing up you just copy this and you paste it right in so next if we scroll down we're gonna 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 send button so that's really good to remember remember that it asks for your name your email your message and if we click on mail this is what it's going to email you so where it says to that's what you want your email address to be from you want it to be from your website and then subject it 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're only going to see your name your email and your message we're not going to see anywhere where it says your subject so we need to change that but first where it says to let's add in your email address and from let's put in wordpress at yourwebsite.com because when you receive an email you're going to want to know that this email was from your website so it's going to say wordpress at 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 emails you the subject is just going to be their name all right and now we can see the message body it's going to be from their name their email and then it's going to have their message and then it's going to say this email was sent from a contact form on yourwebsite.com all right so let's save that and let's go see if it works so let's visit our site and go to contact and let's fill out this information and let's press send message and now we can open up our email and we can see that our email is sent and that looks awesome if you don't see your email in here every once in a while it might go into spam so you just have to mark it as not spam and once you do that it shouldn't be marked as spam anymore all right so let's exit out of there and go to our dashboard the next thing that we're going to do is add a new page from scratch because maybe you don't want all these pre-built pages for you you want to add your own of course so the first thing that 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're not going to be using wordpress's new gutenberg editor in my opinion it's not quite there yet and elementor is still better but we still need to add title right here so we're just going to add a why us page and once we do that we can click on edit with elementor for this page instead of building it from scratch like we did with the other sections i'm going to click on this folder right here and we have all of these different pages to choose from some of them are the upgraded version but i'm just going to be using the free version of the pages that are available and we can scroll through all of them but i'm just going to click on this one and i'm going to press insert now we have that page inserted and it's a beautiful page this could be any one of your pages this could even be your home page it looks really awesome if you don't want to use that entire page you're just checking it out 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 though let's click on blocks and now we have all of these different blocks so these are all of these different sections we have categories over here maybe we want a hero and we can look at this one and we can insert it alright so let's just hover over travel and click on delete and for this title let's put in y us and let's center everything and let's go to style for this one and make the text color white but make it not transparent and let's center this button and now when we look at it it looks all messed up because there is still some padding to the right so just click on the entire section and go to advanced and the padding wasn't there but it could have been so we need to click on the column and then go to advanced and then we see this 30 here now this isn't 30 pixels this is 30 and we can know that by these three little pixels em or percent at the right here so i just want to make that zero but actually we don't want the text to go all the way across so i'll make 15 on one side and 15 on the other so it looks like it's all centered nicely and now let's click on this entire section and go to style and let's delete this image and let's add in our own image maybe we want that canoe image so we can insert media and that looks really cool for background overlay let's make it a little lighter that looks pretty good and let's add another section so just click on the folder icon go back to blocks and let's go to testimonials search for something that we really like and let's just go with these three boxes insert that in and instead of customer reviews let's just put reviews and that looks pretty good let's add another section by clicking on the folder and let's go to team we could search for what we want and we'll click on this one right here and we'll insert it and that looks good let's delete this team let's go to the entire section and let's go to style and let's change this color to a light blue and let's click on this line and change that to a white alright that looks better let's update that and view it exit out of there and we see our website is looking really cool and that's really all it takes to make a page we can see up here that the navigation is white and that's because we didn't tell the website to make it a transparent navigation so let's go to edit page and if we scroll down on the right side where it says transparent header we can choose enable update that view our page and now we have our transparent header and that 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 to add it to the navigation so we are done adding our new page and the next section is to add it to the navigation so to do that just click on customize and then go to menus and click on the menu then click add items and you'll see your pages right here so just click on the plus sign and it will add it to the menu and we can click hold and drag to rearrange the menu let's put it right under the about and now we can see it up here and that looks pretty good but what if you have too many pages on your website and you need some sub navigation you can always click hold and drag in indent under where you want the sub navigation to be so now if we hover over our mouse over about you should theoretically be able to see it but the colors are wrong so let's go ahead and change the colors so let's go back and back again and go to colors and background then go to header and transparent header and under submenu where it says background color let's make that transparent now if we hover over it we can see that that submenu is showing up we only couldn't see it because it was a white background on white text all right if we want to change the color of that line we can go back and back again and go to base colors and under theme color we can change it to a green and now when we hover over our website we'll see that line as green and there are a whole bunch of other options to get it just perfect but i'm not going to save any of that i'm just going to exit out of there and press ok and our website will be like normal the next thing that i'm going to show you how to do is edit this button up here instead of take action i want to put the contact button up there so let's learn how to do that first let's go to customize and let's click on layout and let's click header then click primary header and for last item in menu we can choose none we can choose a search or we can keep it a button for the button text i want my contact button to be there so i'm going to put contact and then my contact page lives at my website dot com forward slash contact so i'm just going to put in forward slash contact and that will take you to the contact page for button style i'm just going to keep it custom button and i can click on customize button style and i'm going to choose header button and transparent header button here we can change any of it so we can go button background hover color that's when your mouse hovers over it we can change it a different color and now when we hover over it it will be a different color now we can go down to the border hover color and we can select any color or we can copy the color and paste it anywhere this is called a hex code you can just copy and paste it anywhere on your website so you have the exact same color so we're just going to paste it over here and that looks great but now we can see that we have two contact pages so how do we remove that one you already know how to do this so what you do is you go to the menu and you just remove it so let's go back and back again back one more time and we'll go to the menu and we'll go to menu and we'll click on it and we'll just remove it now that's gone now we have a really cool looking website so we can publish that and exit out of there and now our contact page is highlighted it's like a call to action so that people can be drawn to it to contact us and if we click on it we will go to the contact page all right and we can go back home and we can click on the contact page again and it should work throughout the entire website the next thing that we're going to do is create your logo i personally like simpler logos but of course you can create any logo you want so to create our logo i'm going to open up a new tab and go to logomaker.com that's l-o-g-o-m-a-k-r there's no e in there dot c-o-m and press enter then i'm gonna exit out of this video because i'll show you how it works and up in the search bar i'm just going to type in mountains you can of course search anything you want i think there's over a million different icons and if we scroll down maybe i'll find a mountain that i like something simple that one looks pretty good just click on it and it will import into the canvas and you can scale it and make it bigger move it resize rotate you can also click on the text tool and type something like the mountain i don't know we can click on it and change the color and move it and resize and adjust and that looks pretty good i mean we didn't spend much time with it but that looks great maybe we'll hover over the shapes and we'll get a circle and we can move it and then we can right click and send it to back and we can also resize it so maybe we'll make it bigger and we can change the color make it a very light blue there we go that looks pretty good and there you have a very simple logo i mean i hope yours is better but that might do if you needed something really quick all right but we can also right click and delete and we're going to delete the text also and we're just going to click hold and drag that mountain bigger and we're going to save it so at the top right there's a save button so just click on it and we're going to save it click download save it to our desktop maybe type in logo and i'm going to name it logo black and we're going to save it then we can exit 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 make it a white color and press save and download that and save it to our desktop all right now we can exit out of there and there and let's go to our home page even though it's going to be on every page and let's go to customize and then click layout and go to header then go to 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 you skip cropping we don't want to crop the logo and now it shows up and that doesn't look great for two reasons the text needs to be on the side of it and that logo needs to be white but why did 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 pages that don't have transparent header we want the logo to be black now we can click inline logo and site title to make the text go to the right of the logo and if you wanted you could just have the logo within the text also like the logo and the text together by unchecking display site title and then you'll just upload your logo with the text in it for logo width i want it to be a little smaller so i'm going to type 75 and that looks pretty good let's go back now let's go to transparent header let's check different logo for transparent header and let's select an image upload files select files and let's choose that logo that's white and press open and choose image and now we'll see a nice looking white logo in there let's change the logo with again to 75 and let's publish that exit out of there now we can see our beautiful logo in there and we can resize the page and we see the black version of the logo on the mobile website so that looks really great the next thing that we're going to do is edit our footer so if we scroll all the way down we can see it has all this text that isn't ours so how do we change that all we have to do is click on customize go to layout and click footer and choose footer bar let's scroll our website all the way down so that we can see it and we can also choose from two different layouts so we can click on this one and we can see all the text goes on the left and the right side i like it when it's stacked up so i'm going to choose that one for custom text i'm going to copy it and i'm going to paste it below and i'll show you why in just a second and for section 1 i'm going to make it a footer menu so it now wants me to assign a footer menu and we don't have one yet so let's go back back again back one more time and go to menus and we can make our main menu the footer menu if we click on it and we can just mark it off and that will become the menu the problem with that is our contact page isn't there because our contact page was a custom button and we removed it but let's just do that for now let's go back again and back one more time and let's go to colors and background let's change the colors of that menu i think i want it to be white so let's go to footer bar let's choose link color and let's make that white and that looks great but let's go back and back again and go to menus and let's actually make that menu not have the footer menu so let's uncheck that and go back and create a new footer menu so just create new menu let's name it footer let's mark it off as the footer menu press next add items and let's add home about services projects in contact and let's go back and back again now let's go back to layout footer footer bar and where it says footer bar top border color let's change that so it matches the background so that we can't see it all right now let's change all of our information in here to what we want and there's one trick that i want to show you if we make a new line it's not going to add it right here because this box only understands regular text in html so i'm going to show you one little html code to make a line break so it's the less than and then br and then greater than and that will add a nice line break and we can publish that and now we can see on the right side we have the home about services project contact menu our address phone number and email address and then our copyright and our website so that is super awesome and we can exit out of there the next thing that we're going to do is enable ssl and what ssl is it's 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 is giving it out for free you may have seen the not secure text up here that shows your customer when their information isn't encrypted so the way it works is if someone is filling out a credit card information or even on your contact form and filling out that information and sending it to you then that information has to travel through the internet and people like hackers or even your own internet service provider can see that information unless it's encrypted so that's what ssl does it encrypts all of your users information so that people can't intercept and steal any of your customers information alright so to enable ssl we're just going to go to our dashboard and then we're going to click on plugins and we're going to click add new then we're going to search for ssl and we're going to find a plugin called really simple ssl we are going to install now and then we're going to 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 was detected on your site so that means we have ssl on our website if you don't 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 all right then click go ahead activate ssl and now if we visit our website and we click up here it's still not going to show that we have ssl completely installed and that's because in elementor all of our images are using the http and not the https links so we need to rewrite the urls so all the links are https instead of just http that's a little technical but it's super easy to do it is also going to log us out because we need to log back into the https version of our website all right so just log back in go to forward slash wp-admin and we can see here that this is secured because it has no elementor images on it so that's super awesome put in your username and password and press login all right then let's go to elementor and go to tools and let's just regenerate css files resync the library just for good measure and then where it says replace url let's copy in our url up here don't copy in the slash or anything just the url and paste it in and paste it in again on this side and for the old address do the non-https so just put in http so get rid of that s so now we're telling the website that the old one was http our website and our new one is https our website and it's going to rewrite all of those urls for the images and links and everything so now we can replace url and press ok and we can visit our site and now we have that nice secure lock up there and our website is https google also ranks you higher when you have https and you also don't get that red not secure so google has been cracking down on it and they're very serious about it and they want all websites to be https because they don't want isps and hackers to intercept your customers information alright and if we go to any other page we're gonna 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 elementor change a little something make a space somewhere and press save and update and it should give you that lock symbol but all of my pages look great so we can go back to the home page and what i want to do here is just revert back to the original way the home page was so i'm going to click edit with elementor and i'm going to go to history and click on revisions and find the revision that we have when i first installed the website there it is and i think that's much better than what i was doing i was just messing around and that looks awesome so we can update that view our website hopefully you learned a whole bunch and now you're able to control your entire website and make it just like you want it so i wish you luck on your journey the last thing that we need to do is log out so just hover over your username and click log out and now we can go to our website and this is the way the user will see it with the logo navigation https ssl installed and it looks really really great so i hope you enjoyed this video please remember to comment rate and subscribe i'm tyler moore thank you so much

Channel: Tyler Moore

Views: 5,860,593

Keywords: create a website, make a website, build a website, how to build a website, how to create a website, how to make a website, create a WordPress website, Make a WordPress Website, Build a WordPress websiute, WordPress, WordPress tutorial, WordPress tutorial for beginners

Id: 8AZ8GqW5iak

Length: 72min 35sec (4355 seconds)

Published: Tue Jan 01 2019