How To Make a WordPress Website - 2022

by the end of this video you're gonna know how to make your own website like this one or this music one a doctor website maybe you work on houses or we could be like brian the freelancer maybe you take care of dogs oh or dave the voice artist or maybe you work out you can teach baking coffee maybe you sell books maybe you run a hotel i don't know but what i do know is that you're going to learn how to make all these different websites step-by-step with no steps skipped you're going to learn how you can customize absolutely everything on your website like this and this this this yep uh-huh and all of this good boy we're also gonna look at other great websites to get inspiration for our own website like this pixar website we can learn how to make our heading text look just like this for this lego website we can learn how to make our buttons use the same style we'll even learn how to get an effect like this which is absolutely beautiful and that's the same effect that apple uses on their website so we're gonna make your website in three different steps the first thing that we're gonna do is get you online and we're gonna get your website name and hosting your website name is like yourwebsite.com and hosting is a computer that's on 24 hours a day that holds all of your website information so if you only had a website name but you didn't have hosting then your website would come up blank the second thing that we're going to do is install wordpress wordpress is the most popular way in the entire world to make a website and it's super easy to install and the third thing that we're gonna do is design your website and the only part that cost any money out of all these steps is step number one getting your website name and hosting and installing wordpress is free and for designing your website a developer might charge you something like two thousand dollars for a website like this but since you're gonna make it yourself in this video it's gonna be free and no matter what type of website you have there's no way of getting around the cost of your website name and hosting but it only cost about thirty dollars for the entire year and i think that's a super great deal to have your website online so let's get you online and do step number one all we have to do is open up an internet browser and go to hostgator.com and press enter and i do get a commission for recommending hostgator so thank you guys so much but i've been using hostgator myself for 16 years and been recommending it on youtube for 10 years there are thousands and thousands of hosting companies to choose from obviously i haven't tried all of them but i really like hostgator because of their 24 7 365 live chat and phone support and their prices are amazing for getting started to get your website name and hosting just hover over hosting and we can see these three different options shared hosting website builder and wordpress hosting you would think that we would use wordpress hosting because we're making a wordpress website but that's actually just way too much we don't need all of these things that come with it and it costs more money and we can always upgrade later so what we want to do is click on shared hosting and once we do that we can scroll down and we can see these three different plans and we can check out the prices for these plans right here right now it's 275 a month but i have a little trick if you go to hostgator.com forward slash unlock un-lock and press enter we can see that the highest discount is unlocked and we also get this free website name so now we can scroll down and we can see these plans and we can see the prices are much better so we have these three different plans the hatching plan the baby plan and the business plan the business plan is just way more than we need right now so we don't even need to think about it because we can always upgrade later so it really is between the hatching plan and the baby plan the only difference is the baby plan offers you unlimited websites so you can have like yourwebsite.com a businessclientswebsite.net yourmomswebsite.org all on a single hosting plan but my recommendation is to go with the hatching plan because again you can always upgrade later but if you know you want multiple websites from the beginning then go with the baby plan but because i'm only making one website right now i'm gonna choose the hatching plan and just click buy now now we have these two different options are we registering a new domain or do we already own a domain you would choose i already own this domain if you already purchased a domain from somewhere like godaddy.com then you can just type it in right here but today i'm registering a new domain so i'm just gonna click on that and i'm gonna type it in right here then it's going to ask you what you want the ending of your domain name to be the most common ending is com but if that one's taken you can always use the other ones like dot net or dot org then we can just skip this because i don't think we need to purchase any extra website names next we're going to scroll down to domain privacy protection domain privacy protection hides all of your information so that no one can look up who owns your website if you don't care about someone looking up your information and you want to save 15 a year you can uncheck it but you may get some spam calls or some spam emails i'm just gonna uncheck it to save the most amount of money so next we already chose our hosting plan and for the billing cycle we can open this up and what we want to do is save the most amount of money the one month plan isn't really that great because the discount only gets applied once the following months are charged at full price and we don't get a free domain name with this plan with the 36 months we save the most amount of money in the long run but it costs the most amount of money up front so i think the best option for most people is the 12 month plan and that's because you only pay a small amount of money up front and it's also the least expensive plan that gives you a free domain name so i'm just gonna click on the 12 month plan now we can scroll down and create our hostgator account so just enter in your email confirm email put in your password and choose a security pin then we can enter in all of our billing information over here and now it's going to ask us our payment type so i'm just going to choose credit card but you can also choose paypal and don't worry guys this isn't my real information after we do that we can scroll down and it's going to ask us do we want any of these additional services and we don't really need any of them because we can always download something for free on our wordpress website that achieves the same thing as all of these so we're gonna make sure that they're all unchecked and we're gonna save a ton of money now we can scroll down to enter in our coupon code make sure it says unlock here which it probably already does and that's going to give you the biggest discount possible even bigger than their best black friday deals and now we can review our order we have 24 7 365 support instant account activation 45 day money back guarantee our domain name for one year for free and we're on the one year plan so that comes out to be about 33 this fluctuates a little bit it could be anywhere from 30 to 40 but anywhere in there is an excellent deal to have your website online so now we can agree to hostgator's terms of service and click checkout now all right congratulations you've actually done the hardest part which is just deciding that you actually want a website the next thing that we're gonna do is install wordpress so we can just search around here for anything that says install wordpress mine says it right here so just click on it then if we scroll down we're gonna see this install now all we have to do is click on that and then we're gonna choose your website name right here you probably only have one and this is the website that wordpress is gonna install on and then right here we're gonna leave this directory blank as it is then we wanna keep all of these values the same like https and whatever number is up here just leave it as default if we scroll down we can enter in our site name i'm just gonna put in make a website for mine and for site description i'm just gonna put in learn how to make a website but i'm gonna show you how to change both of these later so right now you can just put in anything for admin username i like to put in my name because i can actually remember it so just put in your name right here then i'm going to put in my password then i'm going to put in my email address so just put in your email and now we've created your login for your wordpress account next we can scroll down to choose a language i really recommend that you keep it as english for now because it's going to make it easy to follow along this tutorial you'll be able to change it to something else later then we can scroll down and we're going to skip all of these themes because i'm gonna show you how to install a better one and then just click install this might take a couple of minutes but with the magic of editing i'm gonna speed all of this up and bam now it says congratulations wordpress has installed successfully but has it really let's take a look by clicking on our website name right here and the website comes up blank and that's because it can take anywhere from 10 minutes to an hour for your website to come online sometimes but it's very rare it can take up to 24 hours so we're just gonna have to wait a little while until that happens so now we can go back right here and right now i'm just gonna take a little break i'm gonna go for a quick walk and i'll be back in a second all right so i'm back it's been about 20 minutes so now let's check out our website so we can just click on it so congratulations your website is now online some developers would charge you 500 just to get here which is absolutely ridiculous so now let's begin editing your website in order to edit your website you have to log into your website to log into your website 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 remember that username and password that we just made all we have to do is enter the username here and our password here and just press login so now we're in the dashboard of your website the dashboard is the back end of your website to switch to the front end of your website again all you have to do is click on your business name sometimes in order to show this toolbar up here you have to click on refresh so just click on refresh and now we can see this toolbar up here this only shows if you're logged in to go back into the dashboard all you have to do is click on your name again and now you can switch back and forth to the back end of your website and to the front end of your website the first thing that we want to do in the back end is delete all the plugins but what are plugins plugins are like little programs or apps on your website a lot of times hosting companies install a whole bunch of plugins basically apps on your website that you don't really need as we can see here this is a complete mess there's so many things trying to get your attention but we really just want to start off fresh and clean for our website plugins are super cool they allow you to add different programs to your website for example by default wordpress doesn't have a contact form where people can fill it out and press send and that message will get sent to your email you can easily download a plugin so that you can do that and that's what makes wordpress so great you can download thousands and thousands of plugins to customize your website exactly how you want it but we just want to start fresh and clean for now so we're gonna delete all of these plugins and start off blank so all you have to do to do that is go to plugins and then we can scroll down and we can see all of these different plugins that are installed we can click on this box to select all of them and then we can go up here and then go to deactivate and apply this will deactivate all of the plugins and then once we do that we can click on this again to select all of them and go to delete and apply then press ok and now all your plugins are deleted now if we go back to our dashboard we can see it's cleaned up we don't have all those messages and it looks much much better we also want to delete all the posts like blog posts so all we have to do is click on post and we can hover over it and we can click on trash and then we can go to our trash and we can delete permanently the next thing that we want to delete is pages so just click on pages and we can select these two pages and go up here and move to trash and apply and then go to our trash select them all again go up here and delete permanently and apply and now we can all start on the same page the next thing that we're going to do is switch our theme the theme is the design of your website let me show you what it looks like we can click on your name on the top left to go to the front end of your website and we can see that this is the theme this is the default design of your website yours might look a little different but it doesn't matter because we're going to replace this default design for something much better all we have to do is go back to the back end of your website by clicking on your name and then we need a new plugin so let's go to plugins add new the plugin we need is called starter templates so just start typing starter templates and press enter and we can see it right here it has 5 out of 5 stars with 1 million active installations and we can go ahead and click install now to install that to our website then we can click on activate to activate it and now when we go to appearance we can see this new menu option called starter templates so just go ahead and click on that and then we can scroll down and then we can click on build your website now and we have all of these different options right here but elementor by far is the best visual page builder so just click on elementor once we do that we can choose and install any of these websites in just one click there are so many different designs that you can pick from you can make a website for any type of business we could do a search for something like law or church or real estate or anything that you want and many of the best ones are absolutely free and i think that's super awesome but for this tutorial we're installing love nature because it's one of the best ones to start off with and i think you should choose it too because this way you can follow along and learn easily then later you can replace it with any design that you want so let's go ahead and click on it and we can see what this template looks like by scrolling with this preview right here and here it's going to ask us to put in our logo but we're going to do this later so let's just skip it and continue then it's going to allow us to choose between some default colors for our theme and we can change them like this but i really like the default colors so i'm just going to click continue then we're also going to go with the default fonts and click continue then we can skip all of this and just click submit and build my website and that's going to import the entire template into your website saving you hundreds of hours of work now through the magic of editing i'm gonna speed this up but it might take a little while and now congrats your website has imported successfully we can now click view your website up here and we can see what our website looks like and as we can see our website looks beautiful it imported all of these images this entire home page and all of these pages up here it also got our contact page working and it also added two new plugins so if we go back to the back end of our website and we go down and we click on plugins we can see it added these extra plugins right here which again are like apps for our website we can see here that we installed the starter templates one ourselves and that gave us the ability to import this website and then it automatically installed these other two when we imported the template it installed elementor which is the visual designer so now you can design your website visually it also added wp forms lite and that's the plugin that allows us to have a contact form on our contact page where people can just fill it out and press send and it'll send to your email and if you're ever worried about any terminology or any words that we're using don't worry we're gonna do it all step by step together so you guys can just follow along the next thing that we're going to do is we're going to change the general settings of your website so if you go to settings and then general this is where you can change your site title which is usually just your business name and you can also change your tagline which explains your website so if we open up a new tab right here and we go to our website and we hover over it we can see it says make a website learn how to make a website and that corresponds with this make a website and learn how to make a website this is also what's going to show up in the search engines but you can always change it and update it later next is this section right here but we don't want to touch it at all this will break your website so don't change it then right here we can update our email address but your email should already be in there also if we scroll down we can change your language right here and we can also change the date format then if we scroll all the way down we can click save changes the next thing that we're gonna do is the fun part which is designing our website so all we have to do is click on our website name up here and now we can click on edit with elementor but sometimes this doesn't show up so you have to go back into the back end of your website by clicking on your website name and then going to pages and when we hover over all of our pages we can see edit with elementor and we can just click on it for the home page so now we can edit everything here except for the very top of our website which is called the header in the very bottom of our website which is called the footer later we're going to be able to edit all of that but right now it's just the inner page that we're editing and designing the main concept here is anything that you click on the right side right here you can edit on the left side right here so we can click this button on the right side and we can edit it on the left side just like this or we can click on this text on the right side and we can edit it on the left side so this is going to make way more sense once we start editing our website so let's just jump in and begin editing and we're going to learn everything just by doing it it's going to be super easy and we're going to do it all step by step together the first thing that we're going to do is edit your text once you learn this you're going to be able to edit your text anywhere on your entire website if we take a look at this pixar website we can see that they have this huge background image with this text over it and that's the same as on our website we have this huge background image with this white text over it but what if we wanted to change our text to look something more like the pixar website it's super simple first we can delete any text on our website by simply going over it and then we see this blue border with this pencil icon and what we can do is we can right click on the pencil and we can click delete that's going to delete our text from our website and you can do that anywhere to any text then you can just click on any of your text like this nature over here and you can change it to anything that you want on the left side and here we have three tabs content style and advanced you don't need to worry about advanced right now so let's just focus on content and style for content we can change the text and how it's aligned for example we could change this text to something else i'm to capitalize it and i'm going to change it to explore and we could align it to the left the right or the center and now we can see those changes live on our website we can now move on to style style is where we control how our text looks like the color and the size first we can change its color here by clicking on it and right now it's white but we can change it however we want just by clicking and dragging around and we can make it any color we want but let's just keep it white and next under typography we can change the font we can do that by clicking on this and there are so many different fonts to choose from we can make it look more like the pixar page by using the josephine sans font which is very similar then we can change its size over here by dragging the slider and we can make it bigger or smaller or we can input the size we want by typing in 70 right here and under here we can adjust the weight which is how bold the text is and we can just set this to bold and finally we can improve the letter spacing down here we can increase this all the way up to 10 to make it very close to the pixar text or we can even type in a higher number like 15 to give it even more space and now we can look at it and we've made the text look exactly how we wanted you can do the same thing to change this r services or if we scroll down you can also put in your own services down here and customize all of these three boxes you can also change this testimonial right here so basically just click any text anywhere on your entire website and use content and style to make your text look like anything you want we can also add any text that we want on our website by simply clicking on this elements button then we can click hold and drag this heading right here right onto our website and that will add it to our website if we wanted some paragraph text we can just click hold and drag this text editor drop it into our website and now we'll again add it to our website now we can use content and style like we just learned to make our text look like any text we want but i'm going to delete that text by hovering my mouse over it right clicking on the pencil icon and pressing delete and that's how you can add text anywhere on your website the next thing that we're gonna learn is how to add buttons and edit buttons on your website so let's add buttons by clicking on the widget icon and we see where it says button and we can simply drag this button anywhere on our website then we can align this button to the left to the right or the center and we can also get rid of any button on our website by simply hovering over it right clicking the pencil icon and pressing delete and now let's say we want our button to look like this lego.com button we can see that this button has this white background right here and when you hover over it the button turns black and it also has this icon so let's go back to our website and let's recreate that button first let's click on it and again we can see the content and style right here so for content we can change the button text over here for example we can make it say start now we can also change where the button links to right now it links to our services page but we can type in contact over here and we can make it link to our contact page but we're going to leave it as it is and down here we can also change its alignment to the left the right or the center and we can give it an icon just like the lego button we can use any of these icons if we wanted to make something similar to lego we can just search for grader and we have the similar icon here but i'm going to type in long arrow and click insert then change the position to after and that looks great next under style if we open up typography we can change the size of the text inside the button let's make it a bit bigger say 18 and we can also change any of these other settings just like we did with the text next we can change the text color over here and make it black just like the lego button we can also change the background color down here and we're going to change the background color to white just like the other button and if we click on hover we can adjust the same settings again but these are only going to show up when we hover our mouse over the button and as we can see that would be the same colors but just in reverse so that would be white text and a black background now if we hover over with our mouse we can see that change next we can give our button a border for example we could do a solid border that's seven pixels and we can change its color here but let's go back to no border because lego didn't have a border next for the radius this is how rounded the buttons four corners are for example if we put in 40 pixels for all of the corners it will be much more round and if we put in 0 it's going to be very sharp but we'll leave it at 4 because that looks a lot like the lego button and finally for padding padding is how much space is on the inside of the button for example if we make it 18 20 18 24 it'll make it look like the same spacing as the lego button and if we take a look at the lego website we can see that our button looks very similar to this button and that's how you can create any style of button that you want alright but maybe we actually don't like any of that and we want to go in reverse and we want to undo everything that we just did how can we do that all you have to do is click anywhere on the right side of the page then press ctrl z if you're on a pc or command z if you're on a mac and that will undo all of your changes one change at a time so we're gonna press it as many times as we need in order to go back to how it was and if we go back a little bit too far we can always press ctrl shift z if you're on a pc or command shift z if you're on a mac and that will redo our changes and this is exactly how we want it our old colors and size with our added icon and start now text and that's how you can change every button on your entire website and make it look exactly how you want so now we know how to edit all of our text on our website and all of our buttons on our website next let's talk about sections and how to control them so your entire website is made out of sections we can see that it's a section by this blue border right here if we scroll down we can see that this is a section by this blue border on the outside here and this is a section by this blue border around this section all of our text and images and buttons are contained within these sections if we open up this navigator towards this bottom left right here we can visualize all of our sections here and we can just click on them and i'll go directly to that section so we can click on this one it'll go to that section and if we click on this one it'll go to that section if we click on this section we can see that this section has two different columns and we can open it up right here and we can see it has a column on the left side and a column on the right side and this allows content to be on the left side or content to be on the right side we can tell that it's a column visually by when we hover over it we can see this column icon and it's outlined by this gray border right here inside of each column you can drop different widgets by just clicking on widgets and click hold and dragging like we did before and drop anything within these columns we can see all of the different widgets inside the column by clicking on this and we can see this text editor and this heading and this text editor and the button and that corresponds with this text editor heading text editor button this navigator makes it super easy to select any of these elements and that way you can change any of the different settings but we can exit out of the navigator and we can actually click hold and drag any section in order to rearrange it and what we have to do is sort of wiggle it a little bit and when we see this blue bar we can let it go and that will drop it right in there we can also drag and rearrange columns also so we just click hold and drag and we can rearrange any of these we can also resize any column by just going in between two columns and clicking holding and dragging and we can rearrange all of these if we scroll down we can also add a new section by clicking on this plus and we can add one section with one column a section with two columns or three columns or four columns or more once you add a different section you can add different widgets to it in order to add new things to your website but we're going to be going over that later and just like with any other part of your website we can undo all of that by just pressing ctrl z if you're on a pc or command z if you're on a mac and that will undo all of your changes and now we know how to control all of the different sections in all of the different columns on our website the next thing that we're going to learn how to do is how to add edit or delete any images we're also going to learn how to find amazing copyright free images for your website just like i found for these ones behind me your images play a huge role in the design of your website so let's learn how to control them let's say we wanted to change this image right here all we have to do is click on it and then go over to choose image and click on that and if we have any files that we want to upload we can upload any files from our computer right here by clicking on upload files maybe you don't have any images right now so we can open up a new tab and we can find copyright free images by going to a website like pexels.com or we can go to another website like unsplash.com or my favorite is pixabay.com and now we can search for any image that we want maybe we'll search for country road guitar because maybe we're selling guitar lessons on our website and we can find that image right here and just click on it and now we can download it so just click free download we don't want to download the highest resolution image because that's way too big of a file size and that's gonna slow down our website the second one is perfect so we can just click download and we can download that file by saying i'm not a robot and then we can download now that that's downloaded i can drag it to my desktop and now let's upload that to our website by going back to our website and selecting files we can see that file right here and we can press open that will upload it and we can just press insert media and now we have that image right in our website we can also go to style up here and we can change the width of the image so we can make it really small or really big right now it's taking up 100 percent of the column but we can do something like 85 to make it much smaller we can also change the opacity or how see-through it is and just like with the button we can go to border type and we can choose a border if we want we can also go to css filters right here and we can change how it looks like the brightness or the saturation we can reset all that by pressing on reset we can also change the border radius or how round the edges are right here so if we put in something like 200 it'll be super round and if we put in something like 20 it'll be just a little round we can also add any image wherever we want on our website by just click holding and dragging and we can insert an image in wherever we want and then of course you can choose an image select it and press insert media but maybe we don't like that so to delete an image all we have to do is hover over the pencil icon right click and press delete awesome now we know how to add delete change images and find awesome images for your website but what about this image up here it seems different and it is different it's a background image backgrounds are a super important part of our design you'll often want to change a background to achieve a desired look for your website let me show you what i mean if we take a look at this airbnb website we can see this huge background image right here and we can see all of the different text and buttons on top of the background and that's just like our website we have the text and button on top of the background image so let's go and change our own background image all we have to do to do that is go up here and click on these six dots right here and now we're controlling the settings for this entire section so we can change our background image if we click on style and all we have to do is click on choose image right here and we can upload our own file by clicking on upload files you guys can go in the description below to see the file but it's right here and we can just double click to unzip it and now we can go back to our website and we can select files we can find that folder and go to our home page and upload that new image of course you can upload any image that you want and we can press open once that's uploaded we can insert media and that's going to change the background image for our website and here we can change the position of our image and we want to make sure the size is cover that's going to make your image cover the entire space of the section but right now we can see that the image is a little dark so let's change that let's scroll down and go over to background overlay and we can see that it has opacity on it so if we adjust the slider to all the way up it'll be all the way black and if we do it all the way down it'll be completely see-through we can change the color of the opacity right here and that gives it a background overlay but we're gonna lighten up this image and give it a zero opacity so that the background overlay is completely see-through so this is looking great let's move on to this testimonial section down here and we can see that this also has a background but it's a background color and not an image we can select this section right here and we can go to style and we can see it says color and it has this color right here and we can change it to any color that you want any color of the rainbow so we can click off of this and we can undo and we can go back to our original color another really cool thing that we can do here is we can click on this entire section and we can go to style and we can click on this slideshow right here and we can upload some images so let's upload our files and select our files and let's find three images we can select the first one and then we can hold shift and select the last one and that will select all of them then we can press create new gallery and insert gallery that's going to insert it right here and we can change the duration to something like 2000 so it's much quicker this will be two seconds and now our slideshow is right in here and i think this is just a really cool effect and then we can mess up these transitions over here and we can scroll down and we can turn on this ken burns effect and i think that's super cool and maybe we don't like all of those changes so we can just click on classic and that'll get rid of the slideshow now we're all done with backgrounds so let's move on to spacing next the spacing on your website is super important without spacing everything would be smashed together and it would look terrible everything on your website has spacing around it for example let's select this button right here and let's say we want to move this button down and maybe to the right we can simply click advanced here and we can go to padding and we can make sure the values are unlinked so that we can add different values for each field for the top let's put in something like 100 and we can see that it adds 100 pixels of space to the top and for the left if we put in 50 that'll add 50 pixels of space to the left if we wanted more we could add 90 pixels of space and that'll add more to the left and that's how we can position this button exactly how we want to but of course we can bring this button back to zero to put it exactly how it was before and just like this button everything else has spacing around it if we click on this text and we go to advanced we can see it has 20 pixels of space on the top and 20 pixels of space on the bottom that's the same as this image if we click on it and we go to advanced we can see it has 16 pixels of space all around it we can also click on this entire column right here and we can see if we go to advanced all of the space on the right side the text doesn't go all the way across because we have 250 pixels of space right here if we put in zero right here we can see that it goes all the way across and that looks much worse than the 250 pixels of space and that's what allows the text to stay on the left side we can also click an entire section like this and go to advanced and we can see that there's 50 pixels of space up here and 50 pixels of space on the bottom right here so even entire sections have spacing themselves but if we look under advanced we have margin and padding but what is margin and how is it different from padding the easiest way to explain it is down here in this quote section so we can click on this entire section and we can see that we have 50 pixels of space on the top which is right here and 50 pixels of space on the bottom which is right here if we change that to 150 it'll add a whole bunch more space right here and we can see all of that space was applied inside this blue box but if we unlink these values right here for margin and we give it 150 for the top margin we can see that that pushed this section away and it added more space outside of it so that's the key difference of margin and padding margin is on the outside where padding is on the inside but most of the time they act the same so you can usually just use padding and not worry about it too much so let's undo those changes aside from padding and margin entire sections can also have a specific height we can just click on this section up here and under height we can see minimum height and we can set the slider to more or less and that's going to make our section bigger or smaller alright so that's how you control the spacing on your entire website now that we understand spacing i want to show you how to do something super cool that apple does on their own website but first let's save all of our changes by clicking on this green update button and then we can go to ourmainwebsite.com and preview our website and that will show all the changes that we just made the next thing that we're going to do is edit the about page so just click on about and then we can click on edit with elementor and now we can edit all the same things that we edited on the home page like the text the background the images the spacing and our about page is looking really great but let's say that we want a video right here instead of this image let's add a video from youtube and elementor makes it super easy to do that all we have to do is go over to our widgets right here and click hold and drag in a video this video could be about you a testimonial or about your product or services if you do have your own video for your website i recommend going to youtube and uploading it there first and then you can take that link and you can put it in right here so we can go up here and let's remove this image by clicking on the pencil icon right clicking and press delete then we can search for a youtube video by opening up a new tab and just searching for anything youtube gopro surfing girl and we can click on this video and maybe we like this video right here so we can just copy this url exit out of there and here and then we can just paste in that video right here and that will make the video show up on our website we can play the video directly on our website by just clicking on play and skip around just like a normal video you also have a whole bunch of video options right here and you can pause the video just like normal but let's say we change our mind and we want our image back we can press command z or control z or we can go over here to this history and we can move back and forward into time we can go back to where we just started editing and that will remove all that video and transport us back to the beginning and next i want to show you something even cooler that we can do with video if we scroll down here and click on this entire section and then we can go to style right here and we can make this color a different color maybe we'll make it this green and we'll go over here and we'll change this text and we'll go to style and we'll make this color white and we'll also change the color of her name down here go to style and we'll also make her name white just so we can see it on our new green background and we can't see this quote too good either and it's an image so i'm just gonna delete this by right clicking and pressing delete and then i'm going to go over here and i'm going to find a divider and click hold and drag it in and let's make this 22 percent wide and center it and then let's give it an icon in the middle and let's choose a different icon let's choose something like a quote icon because we replaced those quotes from before and then press insert then again let's change the color by going to style with color we can make it white and we can also change the weight to 3 so that that line is thicker then for icon we can do the same by changing its color to white right here and we'll change the size to 25 and then we'll give it a bit more space by changing the spacing to 20. all right perfect now it's time for the magic part let's change this whole background by clicking on it clicking on the video right here pasting in that video we can change the start and end time maybe we'll put in 67 seconds and we'll end it at 94 seconds and now we can see that the text doesn't pop very much so let's add in a background overlay by scrolling down and going to background overlay clicking on this classic changing the color let's change it to black and for opacity let's make it more transparent by putting in 0.2 and now the text looks much better against the video background and this looks really awesome but there's one more thing that we need to do and what we want to do is we want to select a fallback image and this fallback image is for if for some reason the video doesn't load it'll show an image instead so we can just click choose image and let's go with this image right here and insert media now if this video doesn't show the image will show instead it's like a backup plan and the last thing that we want to do is control how big this section is maybe we want it a tiny bit bigger so let's go all the way up here to layout and for height let's go to min height and we can make it bigger or smaller right here and that's not looking quite right so maybe we'll put in something like i don't know 4 20. all right and now let's update to save all of those changes and let's go to the front end of our website to see what all of that looks like we can just click our about page and we can see that image in there and we can see this really cool background video and if we go to the apple website and we open it up in a new tab then we can scroll down and we can see that they use a similar video background as we use on our website and it has all of these text and buttons on top and that's looking super cool and now we know how to make the same exact effect on our website so now we know how to edit an about page we know how to insert a video and make a video background the next thing that we're going to do is edit our services all you have to do is click on services and click edit with elementor just like before we can use everything that we learned on the other pages like changing our background our text our spacing we put in some helpful text right here so you can know what to do to put in your own services but of course you can change this page however you want because you already know how to change this image the headline this text and this button but there is one thing that is unique about this page and that's these icons down here we can easily change any of these icons however we want by just clicking on them then going over here and changing them maybe i'll search for something like hands and we can click that and insert it we can also change this one right here again just by clicking on it clicking on the icon searching for something let's say we want a clock we'll just search for it click on it and insert it if we want to change the text here all we have to do is click on it and then on the left side we can put in something like to our response and last we can change this award icon right here to something else maybe we'll put in something like graduation cap and we can click on it and insert it and it'll change it right there and that looks beautiful i like this even better than when we started so let's see what this entire page looks like on desktop we can minimize this right here by clicking on this and we can just preview our page and that looks really great but i wonder how does this look like on a tablet or a phone it's super important for your websites to work on phones and tablets because anywhere from 50 to 80 percent of your traffic is gonna be coming from those devices and elementor makes it super easy to make your website mobile friendly all we have to do is click on this responsive mode over here and we can see these three icons up here desktop tablet and mobile so let's click on tablet and see what our website looks like on the tablet device and right now it's looking really good and if we click on our services right here we can see on the left right here some of these values have this icon right here and that's the same as style if we go to style and we go to typography we can see that some of these values like the size have this icon right here and what this icon does it allows you to change this setting independently of the desktop and the mobile versions for example we can make this text bigger or smaller just for tablet so let's say we make it pretty small and then we go to our mobile and we can see if we go under typography this size is different it's 54 where the tablet size is 45 and the desktop size is 76. some of these settings like the wait and the font family don't have that icon so you can't set them independently of each other this means that the font family and the weight of the text is always going to be the same no matter which device you're on but we can have a unique size a unique line height and a unique letter spacing and we can do this with all sorts of values from size and typography like we just did to spacing and section height and we can see this if we select our second section by going to tablet mode and selecting it right here if we go to advanced we can see our spacing settings also have this icon which means they can be unique and independent of each other for example for tablet we have these margins of 90 and 50 but if we go to mobile we have 60 and 60. and we can make it less right here we can put in 30 and 30 and that will change the spacing but just on the mobile so again we can do this for all sections columns and elements on our page only if the setting in the left panel has this responsive icon right here and that's how we make our website mobile friendly uh what but there is one more thing uh well but there is one more thing if we click on desktop here and we scroll down and we can see that these icons show up on the desktop version but if we switch to tablet or mobile let's just click on tablet and we scroll down we can see that these icons are grayed out this is because they're hidden on tablet and mobile you can hide or show any element on any device by simply clicking on it like this section right here and then if we go to advanced and under responsive if we open that up we can see that this section shows on desktop and it's hidden on tablet and mobile we could show these on tablet and then it wouldn't be grayed out and we'd be able to see that on our tablet device so this lets you control every single element's responsiveness exactly how you want now that we learn how to make your website mobile friendly your website will work perfect on every device so let's go ahead and update that and we're going to move on to our final page the contact page so let's just click on it and let's click edit with elementor and again we can change all of this information just like we learned on other pages you can put in your own email phone location and social media accounts right here and we can also change these images here or remove this whole section if you don't want it but what if we want to add a cool map we can click on the widgets then we can scroll down to google maps click hold and drag that in there then we can put in a location right here and we can also adjust the zoom and the height of the map let's also go to advanced and fix this spacing so let's unlink our padding so the values can be different we're going to want 70 50 00 and 50. now we can preview our map and that is looking really great but there is one thing that we can't edit on this page and that's this contact form right here if we click on it we can see that it says wp forms 10. this is called a short code this code inserts this contact form but how do we edit this contact form right here let's open up a new tab and let's go to our dashboard and we see this wp forms right here let's click on it and we see this contact form and it says wp forms 10. this is the same short code that was inserted into our page so let's click on it to edit it and now we see this contact form we can change any of this or we can add a multiple choice by just click holding and dragging and we can click on it and maybe we can give your user some options of what service they're interested in then we can click on save and now that it's saved we can go back to contact and now we can see that this has been updated so let's just try to send an email we'll put in the second choice fill out all this information and press send and we can see this message here it says thanks for contacting us that's the same message as over here if we go to settings confirmation it says thanks for contacting us so if we change this it'll change that message but i'm going to go back to how it was let's go back to fields and let's delete this and press ok and press save now when we refresh our page right here that will all get updated and now let's check our email so let's open up our email and that will send you this email right into your email inbox so now we can exit out of all of them and next we're going to learn how to add a new page this is going to allow you to put any page that you want on your website like maybe you want an r projects page a courses page or a restaurant menu or any other page that you can think of to do that all we have to do is go to pages and then we can click on add new we can exit out of here you can add absolutely any page that you want on your website i'm just going to name this one projects then to add that page all we have to do is click on publish right here and click publish again and then we're going to click on edit with elementor and now there are three different ways to make a beautiful design on your website the first way is we can click on this s right here and we can go over here and go to free and all of these pages are free so you can import all of them in just one click or we can go up here and we can search for something like projects and we can click on our projects and we can just import this entire template saving you tons and tons of time and now we can customize this however we want we can put in our own title here we can delete any sections that we don't need like this one and this one and that will leave us with just the elements that we want on our page and that's how you can save so much time when starting a completely new page on your website another way to quickly add new designs is to add pre-made sections to our website these sections are called blocks we can again click on the s and instead of pages let's click on blocks and now we can insert any of these blocks on our website we can go here and we can search for maybe statistics and we can click on this block and we can import this block we can also import any of the other blocks there are so many options to choose from we can of course customize this block by clicking on the entire section going to style and i just want to give it like a very light gray background then we can go back and maybe we want to change this color to one of the theme colors so click on it and then go to style and go to color and we can make it any color that we want right here or what we can do is we can click on this globe icon right here and we can choose one of our theme colors like this yellow and this is looking really good obviously you can change this you can put number of clients how many hours you work how many projects you've completed and edit all the rest so now this entire page is looking great we can update this it's already mobile friendly which saves us a ton of time so let's preview it by pressing on this i and we can see that the page is looking really awesome except we don't have this transparent header right here and we can barely see the phone number so in order to edit the page all we have to do is click on edit page and we're going to fix this transparent header we can just click on this astra settings right here scroll all the way down go to transparent header and enable then press update and we can preview that by clicking on preview and preview in a new tab and now we can see that this is now transparent so that was the first way to make a beautiful page which was by adding pre-made designs the second way is to simply copy a section from another page that we already have on our website let's say we want to copy something from the about page to do that let's go to the about page by clicking it up here and then click on edit with elementor and let's say we wanted this header right here all we have to do is go up here and press copy and let's go back to our projects page and we can scroll down and we can right click and paste now let's click hold and drag all the way up to right here and let it go and then we can exit out of this one right here and we can edit this by putting in our projects and we can change the image by clicking on it going to style choosing image let's upload a file and select a file we have this image right here from the zip in the description below then press open and let's insert media now that's looking perfect and let's say we want to copy this section also so just right click on it and press copy and go back to our projects page again scroll all the way down right click and paste and that way we copied the top and the bottom sections from our existing about page to our new projects page so now we know how to insert pre-made designs and how to copy a design from an existing page the third and final way that we can put in a new design is by making it from scratch this is usually only worth it if you want to make something really specific here's how to do it we can click on this plus button and we can add one column two three or more i'm just going to add in one column and then click on our widgets and we can drag in a heading we can drag in some text and we can drag in a button or anything else there's tons and tons of things that you can drag into your website and then of course you can edit everything right here i'm just gonna center everything and we can also center this button then we can add a background and spacing and everything else you've learned and that's how you make a new section from scratch but i'm just going to exit out of that so now let's update this and take a look at our final result and we can just click on preview and now that page is looking really nice and really beautiful and we've built it in just a couple of minutes saving you hours and hours of time but there is actually one more thing that we need to do we need to add this new page to our menu so that our users can actually click on it and go to the page that we just made so let's exit out of these two tabs right here and let's go to our dashboard by clicking on our website name then we can go to appearance and menus and we can edit everything about our menu right here we can click on its name and we can change the menu name if you want but i'm just going to add a new page by clicking on this projects over here this is where all of our pages are and clicking add to menu once we do that we can click hold and drag our projects page and position it however we want then we can click on save menu then we can go over here and we can right click and we can open up in a new tab so that we can see the menu changes that we just made let's take a look and now we can see home about services projects and contact so now that projects is in our menu and if we scroll down we can see that projects is also in our footer so it added it in both places let's scroll back up i want to show you one more thing that's really cool let's go back to our menus scroll down and we can actually indent any of these by just click holding and dragging and this will create a sub menu so we can press save menu and again we can go to our website and refresh and now that's going to be a sub menu under services and i think that's looking really cool so that's how we add a new page that's how we design it beautifully and that's how we add it to the menu the next thing that we're going to learn is how to edit this header up here this logo this menu and this phone number and we're gonna start with this logo if you don't have a logo we can make one right now or you can insert your own logo right here we're gonna open up a new tab and we're gonna go to logomaker.com that's l-o-g-o-m-a-k-r without the e dot c-o-m then we can click on start my design then i'm gonna create a new design and we can search over three million graphics right here i'm just gonna search for something like mountain then i can click on it and now insert it in there to edit this logo we can do things like click holding and dragging to move it we can also resize it by holding onto its corners and resizing it we can also add text to this logo by clicking on the t and we can type in our text right here then we can resize this text and we can move it just by clicking on it and that is like a regular logo but i want my logo to be like apple's logo where it's just the icon so we're going to get rid of this text by just clicking on it and then pressing delete and we're going to resize this by clicking on it and making it bigger and then i think i want to circle around this so i'm going to go up here and search for circle and maybe we like this one right here so we can click on it and resize that to make it bigger and maybe we can make this one a little bit smaller you can also use your arrow keys to position it perfectly and i'm going to perfectly center it in the circle like this now i'm gonna save two different versions of my logo so i'm gonna highlight all of this and i'm gonna change the color you can change it to any color i'm gonna save one version as white you can't really see it right now but you will be able to on our website and i'm just gonna save that and i'm gonna download it right here so that's our first version and then i'm gonna select everything and create a second version then i'm gonna type in the code for our theme color this dark green and we're gonna save this version of the logo too this is gonna go at the bottom of our website click save logo and then download it right here then we can exit out of there and the last thing that i'm gonna do is i'm gonna save it for this fav icon right here this makes it so that your user can identify your website really quick if they have a whole bunch of tabs open and this needs to be a perfect square so i'm just going to remove this circle by clicking on it and pressing delete and then i'm going to click on this crop to make it that perfect square and then i'm going to drag it maybe we'll drag it 300 by 300 and then just click apply crop now i'm going to position this perfectly in the center and as big as i can get it then we're going to click on save right here and we're going to save this fave icon and that's how you can create your own logo for your website if you don't already have one now that we're done with all of that we can exit out of logo maker and the next thing that we're gonna do is insert all those logos onto our website and to do that all we have to do is go back into our dashboard and then scroll down here go to appearance and then customize and then what we're going to do is we're going to click on header builder once we do that because the header is transparent we want to click on customize transparent header then we're going to scroll down and we're going to insert our own logo by clicking on change image then we're going to click on upload files then i'm going to press select files and then we're going to upload this white version of our logo right here and press open then click on choose image and that logo is going to be replaced right there so that's how you can insert your own logo after that we can adjust the size by scrolling down and changing the width of this logo for the desktop version i want to put in 55 and just like on elementor we have these different responsive modes here so we can just click on the tablet and we can change the logo size just for the tablet by putting in something like 50 and we can also do the same thing for mobile by just clicking on it and putting in something like 45. we can hide this right here to preview it and we can see it's perfect and we can reshow this so now let's go back to desktop and let's learn how to change these menu colors and this phone number up here so we can go over here and scroll up and go to design and where it says text slash link under menu color we can change it to any color that we want but we want to leave it as white so i'm just going to click on this and that's how you can change your menu color to edit this phone number right here all we have to do is click on this button element and we can change it right here so we can make this a link if we wanted to link it to our contact page we can type in contact and just type in slash contact here for the link or you can just leave it as a phone number and edit this to be your own phone number you can also change the color by clicking on design and you can change the entire button and its colors and its border right here we can also rearrange any of these menu items right here by simply clicking holding and dragging and we can rearrange it in any way that we want if we didn't want something like our button here we can just press x and that will remove it from the header and that's how you edit your header we can click on publish changes to save all of those changes and we can go back and back again and next we're going to scroll down and we're going to go to site identity and then for our site icon which is this icon up here we can select it upload files and select files we're going to select that fav icon right here and press open then press select and skip cropping and now we're going to be able to see that icon right up here this is going to help people identify your website when there are many tabs open now we can click on publish to publish those changes and the next thing that we're going to learn is how to edit your footer to do that just click on back and we can scroll all the way down to the bottom of our website our footer and we can control our footer in the same way by clicking on footer builder right here to control the menu all you have to do is click on this footer menu here and we have a whole bunch of options like design where you can change all the colors or general where you can change the alignment like to the center or to the right next we could replace this logo right here by just clicking on this html one and then going over here and clicking on it and then clicking on the pencil icon then we can press replace to replace our logo and then we can upload files and select files then we can choose our file and press open and then we replace and now it's too big so i'm going to edit it again then we can center it and we can give it a custom size and we're going to make it the same which is 55 just like our header then we're going to link it to a custom url and we're just going to put in slash because that's going to link it to our home page then press update and now that looks much better last we can click on copyright and you might not want my name in here so we can just highlight everything and paste whatever you want in there and you can copy this shortcode and this will insert your copyright right here then if we want to link this all we have to do is highlight it press the link button and again we can just put in slash to link it to our home page and for responsiveness we can control the same way by clicking on these icons down here but the website already looks great on all devices but i'm just going to publish that and that's how you control your header and your footer and now we can exit out of there and see our website and that is it congratulations our website is looking beautiful there's one last thing that we can do it's completely optional and that's to log out you might want to do this so you can view your website exactly how your user would view it so all we have to do is go up here and press log out and then we can go back to our main website and now we're viewing our website exactly how your user would view it without that toolbar on top so we've done everything step by step with no steps skipped this website took a ton of work and it took many people to create it i would like to thank our editor and i also would like to thank andre because this tutorial took hundreds and hundreds of hours and we both did it together it took tons of work behind the scenes and i just wanted to say thank you so much thank you so much as well tyler it was a real pleasure working on this video together with you and i really hope everyone enjoyed watching it andre's also working on a guide that has all these steps in it just in case anything gets updated or changes the guide will be there to help you and the guide is always going to be up to date it's in the description below so please remember to comment rate and subscribe i'm tyler moore thank you so much but wait there's one more thing and that is if you have any questions we answer every single question in the comments below no question goes unanswered that way you can follow along step by step and know that we're here if you run into any issues also wordpress is so amazing because it allows you to do practically anything if you want to make a blog or an e-commerce store you can do that by following my other tutorials again step by step all right seriously that's it peace

Channel: Tyler Moore

Views: 1,036,896

Keywords: wordpress tutorial, wordpress tutorial for beginners, wordpress 2022, how to make a wordpress website, create a wordpress website, build a wordpress website, make a website, build a website, create a website, wordpress website tutorial, wordpress tutorial for beginners step by step - chapter 5 install wordpress using softaculous

Id: yC6ZfIF-R9k

Length: 62min 32sec (3752 seconds)

Published: Mon Jan 03 2022