How To Make a WordPress Website - 2023

today we're going to use WordPress the best and most popular way in the entire world to create a website it's used by the best companies and artists for their own websites and it's really easy we're going to be doing it all step by step with no steps skipped hi I'm Tyler Moore and to make a website it's just three simple steps first we have to set up your website and then we're going to organize your website and then we're going to design your website the first thing that we need to do is we need to set up our website so we need to do the intro which we've already done we need to do the overview which we're doing now and then we need to set up your website name and hosting super easy to explain your website name is yourwebsite.com and hosting is where you store all of your website files after that we're going to install WordPress WordPress is the most popular and best platform in the entire world and it's super simple to install after that we're going to log into your website super easy and then we're going to be done with the setup phase the next phase is the organize phase so we're just going to organize a few things so that we can begin designing basically we're going to delete something called plugins which is basically basically like apps or programs on your website that they include automatically that we don't need then we're going to delete the sample pages and posts then we're going to back up your website so you never need to worry about messing up and then we're going to do your site title and taglines and this basically describes your website to the search engines so you can get ranked better and then we'll be done with organizing your website and finally we'll begin to design your website the first thing that we're going to do is we're going to choose your designs and there's so many different designs to choose from and this is just going to be your starting point and you can mix and match different designs together to create basically any design that you want then we're going to get into the theme style the theme style is basically all of the default colors and the default fonts you want throughout your entire website and after that we're going to edit your home page and here I'm going to show you a whole bunch of Tricks basically like how to change your text how to change your buttons your backgrounds your colors background overlays inserting new images deleting sections moving sections deleting columns the different spacing around everything adding new sections rearranging new sections creating multiple columns and updating your website once we do that I'm going to show you how to make your website mobile friendly it's already 99 mobile friendly so it's going to work on your phones and tablets and everything like that and then we're going to get into the about page where I'm going to show you how to save a lot of time by adding blocks instead of having to recreate and build your website from scratch you can use these different blocks that are going to save you so much time and then we're going to get into the services page obviously this could be any page you don't need to have an about or Services page you can delete any Pages or change it however you want but in this section I'm going to show you how to import an entire page from a different template and this is super cool because you can mix and match so many different templates together to make your own and then we're going to learn about the contact page how to edit it and then how to edit the form on the contact page because you can have a contact form so that your visitors can get in touch with you super easy all they have to do is fill out this form in that form we'll email you to your email address and you can start having a conversation with them in that way after that I'm going to show show you how to put in a brand new page so you can put in any page that you want on your website I'm going to show you how to put in a projects page but obviously you can put in any page that you want and then I'm going to show you how to create your own logo or insert a logo that you already have and finally we're going to get into the header and the footer which is just the top of your website and the bottom of your website basically where your logo is and your menu links are and I'm going to show you how to add in a cool button at the top of your website and I'll also show you how to edit your footer and then that's it congratulations we're all done that could have cost you thousands and thousands of dollars but you're doing it all yourself and you're learning something cool and we're going to be doing it all step by step with no step skipped so we're done with the overview now let's learn about the only part that costs money getting your website name and hosting also in the description below I have a website checklist where you can keep track of all of your progress and it also links to each part of the video I also respond to each and every comment whether it's just a thank you or if you get stuck with something I'm always here to help alright so let's begin so what is your website name and hosting your website name and hosting are the only thing that costs money and it's super easy to understand your website name is basically yourwebsite.com or yourbusiness.com and Google's website name is google.com and Apple's website name is apple.com so that's your website name you need something to type in order for someone to go to your website hosting is a little bit different hosting is a place that stores all of the information so if you had a website name and no hosting then we'd be able to type in your website name right here but the website would come up blank because there's no place to store all of your text images and files but if we had a website name and hosting then we would see all of our text and images and files and everything like that so it's super important to have hosting because without it your website would come up blank so this right here is basically what hosting is it's a computer that's on 24 7 that holds all of your images and all of your texts and then those images can be displayed on your website and the text can be displayed on your website let's see a really quick example let's say someone types in the website google.com so right here they type in google.com that's where they want to go then that request gets sent to this hosting computer right here and then this hosting computer that's storing all of the text and images sends all of that information back to their computer and we can see that website get transferred back so it travels from this computer all the way back to their computer right here and then we can see the Google Website so your website name costs about 15 per year and that's before discounts I'll show you how to get a discount in just a second and hosting cost about ten dollars per month again before discounts but in total with all of the discounts and everything else it costs about thirty dollars for the entire year and I think that's a really good deal to have your website spread across the entire world operating 24 7 365. and again that's the only thing that you need to pay for there are no extra costs for your website alright so let's get your website name and hosting and luckily we can do that at the same place all we have to do is open up our browser and go to hostgator.com that's h-o-s-t-g-a-t-o-r Dot c-o-m and press enter I do get a commission for recommending HostGator so thank you so much and I've been recommending them on YouTube for 11 years now I can't believe it's been that long I really like them because they have super great prices and they have 24 7 365 live chat phone and email support but there are thousands and thousands of Hosting companies and obviously I haven't tried all of them so if your hosting company is different this tutorial might be a little bit different but you should be able to follow along just fine we can see these different buttons up here but what you want to do is hover over hosting and then we see these three right here and you'd think that you would use WordPress hosting but it just costs more and we can always upgrade later so what we're going to do is install WordPress on the shared hosting so just click on shared hosting if we scroll down we can see these three different plans and we can see it says 275 for this hatchling plan but there's a trick if you go up here and you type unlock and press enter we can see that the biggest discount is unlocked and if we scroll down we can see that the prices have changed and now we're getting a much bigger discount so there's three different plans the hatchling plan the baby plan and the business plan the business plan is just way too much we don't need all of these things and we can always upgrade later so it really is between the hatching plan and the baby plan the difference between the hatching plan and the baby plan is that the baby plan offers unlimited websites so you can have like your website.com your friendswebsite.net yourmomswebsite.org you can have as many websites as you want on the single baby plan but with the hatching plan you can only have one website but because most people are only starting off with one website anyways I recommend getting the hatching plan and then you can always upgrade later unless you know for sure you already have two websites that you want to make then you'd use a baby plan but really the hatchling plan is everything that most people need so we're just going to scroll down and click on buy now now it's going to ask us are we registering a new domain or do we already own a domain you would click I already own this domain if you got your domain name from somewhere like godaddy.com and you already own it but today I'm registering a new domain so I'm just going to click on register a new domain and I'm going to put in the domain name right here and now it's going to ask us do we want it to be our businessname.com or Dot online or Dot site or dot store the most common is.com so I would stick with that if I could but sometimes your domain name isn't available because someone else already registered it and in that case you would either think of a new domain name or you would change the ending right here if you're a non-profit maybe you'd want a DOT org but we're just gonna stick with the.com next if we scroll down it's going to ask us do we want the.com and the dot Club in the Dot site and the.net in my opinion you don't need all of these they obviously just want to make more money but I don't think someone's gonna like steal your business or anything like that so I think just get one domain name as your primary domain and then we can scroll down and we can look at domain privacy protection so when you register a new domain your information like your email and your phone number gets registered to this domain name then anyone online can look it up and sometimes you might get a few spam calls or spam emails that are a little bit annoying and if you definitely didn't want that to happen then you would enable domain privacy protection and what this does is it hides all of your information like your email and your phone number but in the spirit of saving the most amount of money and just knowing that we may get a couple of spam calls and spam emails I'm going to uncheck this and I'm Gonna Save 15 a year next we can scroll down and we're going to choose a hosting plan we already chose the hatching plan so we're just gonna leave that and next the billing cycle this is where a little bit of strategy comes into play because if we go with the one month plan then our discount is only applied for that one single month so if we go with the one month plan even though we're paying the least amount up front that discount only gets applied for that one month so we're actually going to be paying the most amount in the long run if we go with a 36 month plan we're going to be paying the most amount up front but saving the most amount in the long run I think the perfect balance is the 12-month plan or you're not paying much up front and you're saving a lot in the long run and it's actually the cheapest amount per month of all the plans next we can scroll down and we can enter in our email address confirm our email address enter in our password then put in a security pin scroll down and we can enter in our billing information like our first name last name phone number address country city and state I'm in California next we can scroll back up and enter in our payment type we can pay by credit card or PayPal and don't worry this is not my real credit card number then we can scroll down and it's going to ask us do we want to add additional services so for our SSL certificate that's when you get this little lock up here and we would think that we would need it but actually this is Advanced SSL your website already comes with SSL so we don't need this right here next is securing your website the beautiful thing about WordPress is we can download something called a plugin that will add extra security to our website so we don't need this and we're saving 36 dollars a year for professional email your website already comes with basic email but this is something that I would consider maybe in the future especially if you already use Google for your other email addresses but we can always get this later so we don't need to worry about it right now and this is site backup so it'll back up your website and even though this is a great idea again we can download something called a plugin for free that will back up our website for us and we'll save 24. a year next is SEO tools and while that's a great idea again there's a plug-in that's free that you can install on your website that will save you thirty five dollars a year so we don't need any of these additional services so make sure they're all blank then make sure our coupon code is unlocked that's the highest coupon code that there is and now we can scroll down and we can review our order 24 7 365 live chat email support instant account activation money back guarantee for 45 days we are registering our domain name and we have the 12 month plan or whatever plan you chose and it says the amount is about thirty dollars so anywhere from thirty dollars to forty dollars sometimes this fluctuates a little bit but anywhere in between there is a great deal to have your website online and spread across the entire world next we can scroll down and check that we have read the terms of service and then click checkout now all right congratulations you've done the hardest part which is just decide that you actually want a website everything else is pretty easy after that the next thing that we're gonna do is install WordPress so just find any button that says install WordPress and go ahead and click on it then we're going to see this right here and it used to be super hard but now all you have to do is click on install now and now it's going to ask us for some information leave this as it is your domain name will probably already be selected but if it's not you can just select it from here next we're going to make sure that this is blank right here we don't want to put anything right here because if we do it's going to install it on your website.com forward slash something instead of just yourwebsite.com we want to leave this as default whatever it is and then we want to scroll down to our site settings and for our site name that usually is just your business name or if you don't have a business it's just your name next is your site description and this is something that describes your site so for example if you made logos and you're from Los Angeles maybe you'd put Los Angeles logo designer or if you're the best math tutor in the world maybe you would put best math tutor in the world I'm just gonna put learn how to make a website and for your admin username I like to put my name and for your password I like to change this password to something that I can remember and just put it in right here then for your admin email this is important so we want to change it to our main email so I'm just going to put in my Gmail and that's because if you have to recover your password or something it'll send it here next we're going to scroll down and for select language I would recommend keeping it as English even if you speak another language and that's because you'll be able to follow this tutorial much easier if you keep it on English then later you can change it we don't need to worry about this we can always do that later we're gonna scroll down and we're going to skip select themes I'm going to show you how to do that later and if you want you can put in your email right here it's not necessary but it will send some additional details to your email address then all we have to do is Click install and if we scroll up we can see it installing so it's doing all of this magic behind the scenes setting up databases and all of that stuff for you that used to be hard but now is super super simple so all we have to do is wait a couple of minutes and WordPress will be installed so it says congratulations the software was installed successfully but has it really if we go to our website right here and click on it we can see that the website can't be reached and that's because it takes your website anywhere from 10 to 20 minutes to spread across the entire world and let everyone know that it exists so we're gonna have to wait 10 to 20 minutes sometimes it's very rare it can take an hour and it's super super rare for it to take up to 24 hours but it has happened so I'm just going to take a little break right now I'm going to close this up here and I'm going to go for a walk and I'll be back in about 10 minutes alright so so I'm back it's been about 15 minutes let's go ahead and check out our website and we can see that our website works some developers would charge you 500 just to get to here which is ridiculous this is so easy so now that we have our website we can go ahead and close this right here and right now we're viewing the website as a visitor would view it in order to make changes to your website we have to log in so we can go up here and go to yourwebsite.com forward slash WP Dash admin and then press enter and now we can enter in that username and password that we just made so I'm just going to put in my name as the username and the password that I made right here then just press login and now we're logged into your website and this is where you can make changes this is called the dashboard to get back to the front end of your website as your users would see it you just click on your business name up here and that will transport you back to the front end of your website in order to get back to the back end or the dashboard of your website sometimes you have to click on refresh right here and this bar will show up right here this means that you're logged in your users can't see it only you can see it because you're logged in and to get to the dashboard again all you have to do is click on your website name again so that's how you get to the front end and the back end of your website the next thing that you might notice is if we scroll down here we have all of these things jumping out trying to grab our attention and what the hosting companies do is they load you up with a whole bunch of plugins already pre-installed on your website it's like when you get a phone and you have all of these apps that you didn't download or you get a computer and you have a all these programs already installed that you don't really need the hosting companies do the same thing they have all of these plugins that you don't really need that are just cluttering up your website but plugins are super important and what they are is they're little apps or little programs that you can install on your website for free that help you do things for example by default WordPress doesn't have a contact form so we can download a plug-in and now your website can have a contact form or by default your website can't make backups so we can download a free plugin and now your website can make backups but most of these plugins we don't need so the first thing that we're going to do is delete all of these plugins that we don't need so go over to plugins right here then we can scroll down and we can see all of the plugins installed and if we scroll back up what we can do is we can check this box it'll select all of them go up here first we're going to deactivate them and then click apply and then go here again and go to the drop down and press delete and then apply and that's going to delete all of the plugins then we can press OK and now all of our plugins are deleted so if we go back to the dashboard we can see that this looks much better this looks much more clean but in order to clean our website perfectly we also need to delete the pages and the posts so let's go to the front end of our website by clicking on our name and we can see here we have a sample page right here we can just click on it and we see the sample page we didn't make the sample page and so we want to delete this sample page let's click on this right here to go to our main website and we can also see this hello world right here this is like a blog post and we didn't make it so we are going to delete it so in order to delete our page in our post let's go to the back end of the website and click on pages we can see these two pages right here we can select both of them we can go here move them to the track and apply and then click on the trash select this so it selects both of them go to delete permanently and apply now we have zero Pages let's go to post right here we can hover over it and click on trash and then we can go to the trash just because I want everything super clean hover over it and press delete permanently now if we go to our website we can see that our website is blank it doesn't look great yet but it will look great really soon the one thing that I really like doing once I have a clean website is to make a backup then I'll always know I can go back to a clean fresh start and it makes me feel like I can be free and make any sort of wild changes that I want and I won't break anything because I can always go back so to do that we're going to download a plugin so just hover over your website name click on it to go to the dashboard click on plugins then we're going to add a new plugin right here and then we're going to search for a plug-in right here and the plugin has a super weird name but trust me it's the best backup plugin it's called all-in-one WP migration and we can see that it has four million active installations almost 7 000 reviews with four and a half out of five stars so all we have to do is click on install now that will install it to our website and then we have the activated so just click on activate and that will activate it on our website now if we look over here we have this new all-in-one WP migration menu item and we can just click on it and we can say export to and we want to export this to a file once we do that it's going to Archive it and it's going to tell us to download it so now we can just download this to our computer and now it's downloaded I'm just going to drag this to my desktop and just exit out of here that's all you need to do then press close and now we always have that backup so we can make any changes we want right now and let's say we did something crazy and messed up the website somehow we would just click on import and we would drag this file from your desktop to right here and it will import this clean backup I'm going to stop the import right now because I don't need to do it but that's how you would import your backup onto your website so these are like checkpoints in a game to ensure that you never lose progress on your website alright so let's go back to our dashboard right here the next thing that we're going to do is we're going to learn how to change your site title and tagline in WordPress so all we have to do is click up here and we can see it if we hover over our website name we can see that it says create a website that's our title and learn how to make a website that's our tagline this is super important because this is what shows up in the search engines and it gets people to click on your website so you want to have a good site title that's usually your business name and a tagline that really describes your business well alright so to change it we want to go into the back end by just clicking on your business name and then going to settings and general once we're here we can change that site title right here and we can change this tagline right here we don't want to change any of this right here because that will break your website but we do want to make sure that this says your email and we can scroll down and we can press save changes and that's how you change your site title and tagline the next thing that we're going to do is install your theme the theme is the design of your website let's look at it we can go to the front end of your website and we can see that this is the current theme and right now this theme is pretty crappy we can't do anything on this theme that we want it has a certain design that probably doesn't speak to you and it's just not that great before there used to be themes for every different type of business so if you're a plumber you get a plumber theme if you're a designer you get a designer theme if you're a marketer you get a marketer theme but that's the old way of doing it the new way is you have one theme that can turn into any type of website so literally everything can be changed within this theme so that's what we're going to be installing this one theme that can be anything it can look like any type of website you see on the internet so to change our theme all we have to do is go back into the dashboard by clicking on our website name and then going to appearance and themes so right now this theme is installed right here we're going to be adding a new one by clicking on add new and we're going to be installing this theme right here but let's go ahead and search for it we can just search for Astra a-s-t-r-a and press enter and we can see this Astra theme right here we can go to details in preview and we can see that it's rated five thousand times five out of 5 stars super great this is a preview of what the theme will look like but because it's blank it doesn't have anything on it and it looks terrible we're gonna make it look super great really soon so just click install and then we can click on activate now our theme is activated we can go ahead and look at it on our website it still looks terrible but this is the blank website or the skeleton that will allow us to do anything the next thing that we're going to do is install a plugin that will save you so many hours and make your website really professional it's going to allow you to import almost any design into your website as a starting point that you can then edit to do that all you have to do is hover over your website name and click on it and then scroll down and click on plugins once you do that you can click on add new and this is how you could add any plugin to your website then over here we can search for a plugin called starter templates s-t-a-r-t-e r t e m p l a t e s then we can see the starter templates it's been installed a million times and has 3400 five-star reviews and we can click on install now once we do that we can click on activate and now when we go over to appearance and starter templates we can see this new item right here and we can click on it once we do that we can scroll down and click build your website now then it's going to ask us to select a page builder and by far Elementor is the best page builder so we're going to select that one and now we can see all of the templates that we have access to some of these templates are paid but a lot of them are free you can tell if they're paid by if they say premium on them right here but I think the free ones are just amazing once we find one that we like we can go ahead and click on it and then we can open it up right here and we can preview all of the different pages if we want to see what we're getting but you should know that you you can mix and match different templates so if you like one page from one of them and another page from another one I'm going to show you how to do that too if this is not the one that we want we can open this back up and exit out of here and we can continue our search we can also go up here and search for a template I made one called Earth just for this tutorial I designed this template myself I think it's beautiful I submitted it so that they can include it for free you can choose something different but just know that this tutorial might be slightly different but you should be able to follow along just fine so we can click on it and we can check out all of the pages so we can check out the home page right here scroll back up and check out the about page and check that out then we can check out the services page make sure that we really like it and we can check out the contact page where people can get in contact with you they can email you they can call you but of course you can change all of these Pages however you want so let's go back to our home page and open this back up and I'm going to show you how to create and put in your logo later so we can just press Skip and continue here you can change the colors to any colors that you want and it'll change across the entire template I'm also going to show you how to do this later so you can just keep it default or choose whatever you want we can also change the font to anything that we want but I'm just going to keep it as the default and again we can change that later then we can press continue we can scroll down and we can press submit and build my website installing the template can take anywhere from 20 seconds to two minutes if you ever want to change or reinstall your template you can just follow the steps and do it again but just know that it will rewrite your entire website right now it's installing all the designs all the extra plugins you'll need like a contact form adjusting all the colors and making it mobile friendly so bam now it's done you have saved so many hours of time we can go ahead and click view your website so instead of having to create every web page yourself this gives you an amazing starting point and you can just change whatever you want the next thing that we're going to do is change your theme style you'd want to do this so that your website has consistent fonts and colors we did this in the previous section but it's important to know how to access this for the future it's super easy all we have to do is click on customize up here and then click on global right here and then we can click on typography which is the same thing as your fonts and if we scroll down a little bit we have the heading font which is like the big text up here and right here and we also have the body font which is all of this text here here and even up here so if we wanted to change the heading font we could just click on it and there are hundreds and hundreds of fonts to choose from so you could just change it and we can see that it has changed we could change it again and we can see that it will change again and we can see that any heading will change right here I'm going to go back to Joss because that's what I like and for the body font it's pretty much the same thing you just click on it and we can change it here and we can see that it will change and it also changes up here but I'm going to go back to Roboto because I think that one's awesome and for your colors all you have to do is go back and go to colors and we can change all of the different colors right here these are just the general colors on your entire website so we can like go here and change these different colors and you just have to play around with these colors to see where it changes if you want to reset the colors back to how they originally were you can just press reset right here you can also go on each page and change the colors however you want so if you wanted this button to be different then the general colors on the entire website you can change this page individually once you have the colors you want we're going to click on publish then we're going to click on the X to exit out of here so that's how you change all of your colors and all of your fonts for the entire website the next thing that we're going to do is probably the part that you've been waiting for the fun part and that's editing the pages to be exactly how you want to edit your website all you have to do is click on edit with Elementor Elementor is a visual page builder that's going to make editing your website super easy you can change anything on your website by just clicking on whatever you want and then on the left side you can just start typing in your own content so we can do that again by clicking on anything that we want and then type in something different you'll get different options on the left side depending on what you click on the right side so if we click this button it's going to give us different options right here and here we can change what the button says and where the button links to so we can just start typing in contact and I'll automatically find our contact page and we can just click on it and now this button will link us to the contact page so when someone clicks on it they will get sent directly to your contact page if we want to change the background image it's super easy all we have to do is click on these six dots up here and then we can click on the style button right here and we can just click on this image and obviously you can upload your own images or there are a couple websites that I really like that help you download copyright free images the first one is pexels.com p-e-x-e-l-s.com the second one is pixabay.com and the third one is unsplash.com u-n-s-p-l-a-s-h.com but let's actually close all of these different tabs up here and we just want to search pixels and we can search copyright free images for our website and when we find something that we like we can just click on the download button and that will download the image to your computer and then I'm going to drag it to my desktop so I can find it easily and then we're all done with this tab so we can just close it right here and now I could go back to my website and press select files find that on my desktop and press open that's going to upload it to our website and once it's uploaded we can just click on insert media and that's looking really good except we can't see the words that well to change the color of the words all we have to do is click on the word and instead of content this time we want to click on style then we can just change the text color here and we can select whatever color we want and we can do that really quickly with any of the other texts select it go to style change the text color and now we can see it we can also do the same thing with the buttons where we can just click on it and then go to style then for background type we can click on classic and for color we can change the button color right here if we want to change the text color all we have to do is click on text color and we can change that right here also and we can also change things like the Border radius which is how rounded the button edges are so if we put in something like 50 it'll make it rounded like that and we can also change the button hover color so when you hover over this button it should change slightly so that people know that it's a button so we can click on Hover and for background we can do classic and for the color we can just make it slightly different than the other color and we can see that subtle change right here so that's looking pretty good another thing that we can do is put a background overlay on this image so that we can see the text even better so we can just click on the six dots right here and then go to style and go to background overlay and we can choose the color right here so we'll choose a dark color and we can make it all the way black or make it a little lighter and that's looking pretty good if you don't like any of those changes and you want to undo all of that all you have to do is press Ctrl Z if you're on a PC or command Z if you're on a Mac and you can go backwards in time and undo all of those things another cool thing that we can do is we can click hold and drag any section and rearrange it so we can just click and hold the six dots right here and just drag it up and when we see a blue line we can let it go and now we've moved the section to right here we can also exit out of any section so just press on the X and that will delete the section and within all of these sections there's different columns so we can actually click hold and drag and rearrange these columns also and you can move this column over here you can also if you wanted to delete any of these columns by just right clicking and pressing delete of course now you can also undo all of that again by pressing Ctrl Z if you're on a PC or command Z if you're on a Mac the next thing that we're going to learn is going to make your website so super pro and that is the spacing the spacing of your website is super important and there's three different ways to control it the first way is to click on a section and then under layout and under height we have this minimum height and this is the minimum height of this entire section and we can change the values right here so we can make it really big or really small now let's scroll down and click on this section right here and the second way to control the spacing is this Advanced right here so the margin is the spacing on the outside of this box right here so we have 80 pixels of space up here and for the bottom we have 80 pixels of space down here if we didn't have the space for example if we put in zero it would be too close and it would look crammed and your website wouldn't look professional if we made it too much like 190 it just wouldn't look right and it would be way too much space so we're just going to keep that as 80. if we scroll down to the talk to a sec section and we click on the section and go to Advanced we can see that the margin has nothing so there's no spacing because the section above it already has 80 pixels of space so this doesn't need any spacing but we can see that it has padding and has padding of 100 and 200 so what's the difference between margin spacing and padding spacing margin spacing is a space on the outside padding is space on the inside of the section or the inside of this blue box right here so if we change the margin to 200 we see that the spacing changed on the outside and it also added more space to the bottom right here but the inside spacing didn't change so if we go back to zero we can see that it removed the spacing from the top and the bottom but didn't affect inside of it if we wanted effect inside of it we would have to change the padding so the padding is the spacing on the inside so we can say zero and 0 0 and that would look terrible because there's just not enough space it doesn't have enough breathing room we can undo that by pressing Ctrl Z on a Mac or command Z on a PC and we can see that 100 and 200 looks much much better so that's the difference between margin spacing which is spacing on the outside and padding spacing which is spacing on the inside of this blue box right here every single thing that you click on has the ability to have different spacing so we can click on this talk to us go to Advanced and we see that it also has a margin and a padding so if we wanted to add more space between here we could either use margin which would be spacing on the outside or padding it doesn't matter which will be spacing on the inside to change the distance between these two texts so in this case it really doesn't matter what you choose we're just going to go with padding and we want to change only the padding bottom so let's see what happens I'm going to put in 50 and it changed for all of the values and that's because this is linked right here so I'm going to go back to zero I'm going to unlink these values and then I'm going to change it to 50 and that'll allow us to change only the bottom value and now that bottom value has space right here all right but that's ugly so I'm going to undo that and just keep it at zero the third and final way to control spacing is to actually drag in a spacer so what we can do is we can click on this elements button to see all of the things that we can add to our website and we have this spacer right here so we can click hold and drag any spacer in between anything and we can actually change the spacing right here you can delete the spacer if you want by right clicking on the spacer and just pressing delete or you can press Ctrl Z or command Z to undo and there actually is a spacer up here so we can click on it right here and we can change the height of of this and we can make it bigger or smaller just by moving the slider right here once you've made some edits to your website you can just click on update to save all of your changes and then you can press on this I right here in order to preview all of your changes and we have all of our changes right here and now we know how to use the spacing and also how to update our website to create a new section all you have to do is scroll down and hover over any section and press this plus button or we can scroll all the way down and press this plus button right here and now what I like to do is I like to go to another website and get some inspiration so I'm just going to open up a new tab and we're going to go to pixar.com I really like their films so we can go to their website and just click on short films or anything that you want and we're going to copy this right here so maybe we'll copy this up here and we'll take inspiration from this right here and these sections down here how would we recreate this and obviously you can do this for any website and use same technique and recreate any website that you want so we can see this section right here it's only one column across it's not divided into two different columns or four different columns as it is down here so let's go ahead on our website and let's add in one column so right here we can add in one column so just click on it and on that Pixar website they had a background so let's go ahead and click on these six dots and go to style and here we're going to add in a background so under background type just click on classic and we're going to add an image so just press this plus button right here and now we can go to one of those websites like pexels.com p-e-x-e-l-s Dot c-o-m and we can search for something like nature run I don't know and we can scroll down and we can try to find something and let's say we really like this one we don't want to download the Large Size because that will make our website a little bit slow so just click on the image and with this drop down right here we can click on it and we see that the original size is way too big and the large size is pretty good so you usually want to go with the large or medium sizes we're just going to click on large and press download selected files this will make sure that your website is fast because the file size isn't that big alright let's go back to our website and let's just drag in that image after we click on upload files we can just take the image from over here or wherever it is maybe it's on your desktop and click hold and drag it in once that file has uploaded we can go ahead and press insert media right here and now we notice because this section is so small we can't see it so what we need to do is go to Advanced right here and then we're going to unlink the padding so all the values aren't the same and we're going to add 250 pixels of space to the top and 250 pixels of space to the bottom and that looks alright but we still can't see the whole image right here so what we need to do is go to style and then under size we want to make it cover and you usually always want to make it cover this allows you to see the entire image without any white space around the edges alright so this looks much much better what we also can do is we can position this image and maybe we want to make the image Center Center so it just shows up like that but that didn't show up that great so I'm just gonna keep it as the default but I just want you to know that you can position it in any way that you want so now that we have the background image just like on the Pixar website we also need some text so let's go ahead and add in some text we can click on the elements icon right here and we can drag in a heading so just click hold and drag to the center box right here now that we have that we can align it to the center we can put in some inspirational text or whatever you want and now we can style it differently so let's click on style and let's make the text color white just like on the Pixar website and under typography let's make the size a little bit bigger maybe we'll make it something like 50 and and let's make it a little bit more bold which is the weight so let's go over here and let's make that 600 or semi-bold and let's make the letter spacing have a little bit more space so we can go over to letter spacing and go to something like six and that looks pretty good for the text except for we can't see it that well one of the cool things that we can do is we can click on the entire section and then if we click on style and scroll down a little bit to background overlay we can click on that and we can click on just classic and we can add a color let's add black and then we can make it darker or lighter let's make the opacity about 0.2 and now we can see that text just great if we go to the Pixar website we can see that it looks obviously different but we took a lot of inspiration from it but if we scroll right here we can see that he sort of stays in the same area and we can also achieve that on our website by going back and clicking on background and under attachment we can click on fixed and now the image will sort sort of stay in the same area it's a pretty cool effect but personally I like the regular default effect better where it just Scrolls normally so we can preview those changes real quick by clicking on this button and I think that's looking pretty cool I really like that let's continue editing our website by clicking this out and let's say that we don't like this section right here we want to drag it somewhere we can just click hold and drag this entire section until we see this blue line right here and we can let it go and now that section is above this one so that's pretty cool and a little fancy but what if just like on the Pixar website we just want to add some regular text like this let's go ahead and copy this text obviously you can type in your own and let's go back to our website what we want to do is we want to create one column because there's only one column of text and we can hover over this section and we can add a new section right here so we're going to add a new section we're going to click on the plus we're just going to add in one column because it wasn't multiple Columns of text and then we're going to click on the the elements right here and we're going to drag in a text editor so this is just regular plain text so click hold and drag until you see the blue and let it go now we could paste in all of that text by using the visual and pasting it in the problem is it's going to take the formatting from this Pixar website and it's going to paste it into our website which is not what we want we just want the plain text so just click on text right here and highlight everything delete it and just paste it in there once we do that we can go back to visual and then we can format it any way we want for instance we need to put in a paragraph right here and that's looking pretty good all right I think the text was a little lighter on the Pixar website so let's go to style and let's go to text color and let's change that so I'm going to change that to something like that right there and now that looks a little bit lighter and I'm going to make the font a little bit bigger so I'm going to go over to typography and set the size to be about let's say 18 we could just type it in right there and the line height was a little different basically the spacing between each of these lines was a little bit more on the Pixar website so we can go to typography again go down here and change the line height maybe let's do something like 35. all right so that's looking a little bit better but if we open it up like this we can see that our text goes all the way across the screen which is kind of hard to read it would be better if it just went here to here like we can see on the Pixar website it's a little more narrow between here and here it doesn't go all the way across the screen and there's padding up here padding over here and padding over here so we can easily add that by going to our website let's click this out again let's click on the entire section and there are multiple ways to do this but the easiest way is just to go to this width and let's put it at about 960. we just type that in right there and now we can see that it doesn't go all the way across there's a little padding on here and here but not enough padding at the top so let's fix that again we can click on the entire set section and then go to Advanced and then we're going to unlink all of these padding values because we only want padding on the top right now and I'm going to put in 125. and there you go our text is looking much better and it sort of has enough space all around and that's why I wanted to show you spacing because spacing is super super important the next thing that we're going to do is go back to the Pixar website and we see this little line right here we can even do that super easily so let's go back here let's add another section so let's open this up and hover over this go to plus and plus it's just one column so we'll just put in one column and we're going to click on the elements right here and we're going to click hold and drag in this divider now this is a bit too big so what we can do is we can go over to width and we can shrink that down maybe we'll shrink it down to about 15 and we'll make the alignment in the center you can add cool things like stars to the middle of it or different icons or even put in some text in the middle of it but we're just going to go to style and we're going to make it a bit lighter so we're going to click on the color and we're going to drag in some color that we like all right that looks pretty good to me we can click off of that and now we can go back to the Pixar website and see that we have something that looks like this and this and this what about these we can easily do that also maybe these are your different projects or something and they go to different pages or you just want to have some sort of gallery to show all of your stuff super easy to do also but we have to notice that this is one column this is one column this is one column but this is four columns one two three four there's four different places that we can put in things right here so if we go back to our website and we add in a new section by hovering over and pressing this plus and then pressing plus again we don't want to select the one column we want to select the four columns so now we can drag in widgets to each of these right here the first one that we're going to drag in is an image widget so just click on the elements button and go over to image and click hold and drag and we can drag in an image right here all right now I'm going to go back to pixels and I'm going to search for some images so I'm just going to search for nature and I'm going to give it a filter because I only want ones that are vertical so I'm going to go to filters and I'm going to click and I'm going to choose vertical now I can see all nature pictures that are vertical and I could just start downloading them so I'm going to download four and sometimes I can't choose which image to do so with the magic of editing I'm going to speed this process up and choose four pictures and of course I'm going to download them in the large or medium size format I'm just going to do medium because that's big enough for the four different columns all right I found those four Images let's go back to our website and let's put them in so just click on the image click choose image and we're going to upload files and we're going to upload all of those files so just click hold and drag and do that to the rest of them all right now that we have all those files we can just insert media for the first one and we're going to go to style right here and we're going to make it a certain height so we're just going to do height and we're going to make that 365. that's going to stretch out the image a little bit so again we want to make it so it says cover and that will make it so it's not distorted now that we have all the the settings for this one that we want like cover and the height we can go ahead and right click on it and press copy and we can right click and paste into each of these columns so we can just paste paste paste now it's easy to change the image for each of these so just click on it go to choose image and we can select a different image and insert media do that again select choose image select the image insert media click on it choose image and select it in insert media all right to me that's looking pretty good they did on this website right here have text at the bottom right here that's pretty easy to do all we have to do is click on this elements then click hold and drag in a heading under it and we can type in whatever we want right here so maybe we'll just put in Jungle and we can Center that and then go to style and go to typography and we can make that a little bit smaller we can make it really small or I like it about 20. once we have that done again we can just go ahead and right click copy and and then right click and paste right click and paste right click and paste then we can type in different names right here with text you can actually double click and just start typing so we can type in River Forest and mountain and if we wanted to make multiple of these sections we don't have to recreate everything we can just right click on this entire section and press duplicate and now we have another one and we can just keep on doing that and we can change the spacing in between these to make it look a little bit better but I like just four so I'm just going to exit out of there and I want to add a little space down here because it's a little bit too close so I'm going to go to this section and then go to Advanced and then I'm going to unlink these values and I'm going to add 125 pixels of space to the bottom and to me that looks way better it has more breathing room I can check out what this all looks like by clicking on this button and we can see that our website is actually looking pretty cool I really like that and it looks a lot different than this Pixar website but we took inspiration from one of the best companies and we really made it our own nobody would think that we copied it but we definitely used some of their really cool ideas to make our own website and make it look really cool too Alright once we've done that we can go ahead and update our website so it saves all of those changes and we can actually preview our changes by clicking on the I right here and we can just go to our main website because it's on our main website and we can scroll down and we can see these changes right here and that's looking really cool we've just updated our website we can close these tabs up here because we don't need them anymore and we can exit out of this another thing that you should know about is none of your work has ever lost we can go down here to the history and we can click on it and we can see all of the actions we've made and all of the revisions we've made the actions are like everything that you just did so I can undo that margin I can undo editing this title I can go way up here and undo all of these things like I didn't do any of that or I didn't do any of of that and I could go all the way basically to the beginning and have my website just as I did at the start or I can travel forward in time and re-put in all of those changes and get them all back so the actions are the things that you did today the revisions are things that you've done not only today but the bigger changes maybe you want to go and see what your website looked like two weeks ago so we can click on that and we can see that this is what it looked like two weeks ago or we can see what it looked like just right now and we can apply those changes anytime you want so don't be afraid to mess around with your website because you can always go to this history right here and you can move backwards and forward in time and see all those changes that you just made so I'm just going to click on apply because I like the changes that I just made and our website is looking pretty awesome except for one thing what does our website look like on mobile devices like our phones we can go down here to the responsive mode and we can click up here on our mobile device and now we can look at our website alright that looks pretty good good except for it's a little bit crammed right there like I would want it to have a little bit more breathing room this looks like it's too big of a word kind of if we scroll down that looks good and it looks good because all of the templates are already mobile optimized but if we go down here this adventure awaits the adventure is too big and that doesn't look right and maybe I want to see the lady running or the dog so that's not right and if we scroll down we can see that these images look pretty good except for this one's not wide enough so maybe I'll make them all 100 width and that looks pretty good so we have a couple of changes that we need to make but only for the mobile website because the desktop website looks fine so what we can do is we can click on any section and then we can go to style and then we can go to typography and we can see that we have a size here but we not only have a size here we have this mobile icon and if you don't see the mobile icon then that means it changes across the desktop tablet and mobile versions but if you see the mobile icon then it only changes for the mobile light so this isn't going to affect how the desktop site looks so let's put this a little bit smaller let's put it at 40 just for the mobile website but on the regular website it's going to be 50. so we can actually click on this and we can see desktop version is actually 80. and we can go here we can see tablet version is 60 and mobile version is 40. so that makes sense to me it needs to be smaller because you're on a smaller screen now let's scroll down and see what other fixes that we can do this isn't looking right to me so let's go ahead and click on this and let's go to typography and for the mobile version right here let's again let's make this 40. that looks right to me this image is not position right so let's click on the entire section and we have position right here and we can position it Center Center and maybe we see the dog or we can position it center right and we can see the lady running which looks great to me all right let's keep on going let's scroll down a little bit we can click on each of these right here and we can make the width 100 because it's not going all the way across so let's make the width 100 and click Style with 100 Style with a hundred and to me that's looking much much better they're all the same width which is a hundred percent so that's looking awesome and that's only for the mobile versions all right now we can click on update and go back to our desktop or tablet version and we can see that none of those changes affected the desktop version the text is still big but now our mobile version is perfectly optimized for everyone's tablets and everyone's phones now let's go to our home page and learn something that's going to save us a ton of time we can edit the about section by just clicking on it and then we can click on edit with Elementor and of course we can change or create anything just like we did on our home page but most of the time we don't actually have to do any of that work because we can use something called blocks let's say we wanted to add testimonials to our web page right here we can just scroll down and click on this s right here and then we can click on blocks and we can mix and match any of these and make millions and millions of different variations of websites so if we wanted a testimonial we can just click on it and we can import this block right here once it's done importing we can just click hold and drag it anywhere we want maybe we want it right under here and we can change this however we want maybe we want this to say testimonials and of course you can click on any of this and change the content and put all of your testimonials right here let's say we wanted another section we wanted an FAQ we could just press this plus button right here click on the S go to blocks and then we can actually filter it so we can go here and go to FAQ right here and now we have all of these different FAQ blocks to choose from we can just choose any one we want and we can press import block then we can find it on our website and just click hold and drag it anywhere we want and we can exit out of this right here and now we have this really cool FAQ we can of course change all the content right here by clicking on it and we can update that then we can preview it by clicking on this I right here and we can just remove all this preview stuff right here because it's actually updated and we can view our website and we see the testimonials right there and we see the FAQ right here of course you can add color or change it and make it however you want it's also already mobile friendly so we don't have to change any of those settings it should work perfectly right out of the box and just using that technique right there will save you so much time and you can actually make millions and millions of different types of websites by just combining different blocks together and I think it's going to save you so much time so we can close this tab up here and we can go to the services page and now I'm going to show you something that's going to save you even more time so we can just click on edit with Elementor like we always do and of course you can edit anything just like on the home page or any other page and if we scroll all the way down we can again click this s right here and instead of importing blocks we're going to import pages so out of all of the different templates you can actually import any page from any template into your website and mix and match any templates together this is super cool what I like to do is Click right here and go to free and we can choose any template and any page on that template to import into our website let's just click on this Lotus Spa right here and maybe we want to import this Services page right here we like this page more than our services page so we can just click on it and we can click import template all right now this template is imported we don't need any of this other stuff because we're going to use this template instead of the original one so we can just X out of all of these different sections to delete them and now we have this website right here but maybe we don't want all the sections let's go down let's delete this section right here and let's go up let's delete this section and this section and maybe because this is our services page we can just put in Services right here and it looks a little bit too cram to me so we're going to click on the entire section and go to Advanced to add more spacing and let's add 150 pixels of space to the top all right we can update that and we can preview our website by clicking on the I and we can exit out of here and now we see we have our new Services page and it looks much much different from our original template and of course you can change all this content you can swap out all the images just like we learned on our home page now that we've edited the about and services page let's edit the contact page so just click on contact and then again we can click on edit with Elementor so you can change any of this content however you want just like the other pages and over here on email we can just click on it and you'd obviously add in your email instead of this email mail and you can add in your phone number or just delete this section in your address or just delete this section and of course you can click on any of these social media icons and add in your own social media links right here so that's pretty much the same as everything else we can also add in a map right here let's do that real quick let's click on this plus section and let's have a map go all the way across so we'll add in one column and then we'll just click on the elements right here and we'll find a map widget so just click hold and drag the Google Maps and we can change the location to an exact address or just a city let's go with Malibu California and you can change in how much it zooms in the height but I like how it is right here I think I want the map to go all the way across the website right now so if we open this up we can see that there's space here and space here so let's make it go all the way across by clicking on the entire section right here and then for Content let's go with full width that will make it go mostly cross but there's still a little bit of space right here we can see so we can open this back up and then we can click on this column right here and then we can go to Advanced and it actually has some default padding so we're going to make the padding zero and that's going to make it go all the way across now we can see that it looks really really cool and with this map you can just double click on it to zoom you can drag around you can even do satellite and I think if you're going to add a map then that's pretty cool but what about up here we have this contact form how do we edit this we can open this back up and if we click on this contact form right here and we click on edit this selected form right here this is how we edit this form so it's a little bit different than editing with Elementor and that's because this form is a different plugin this form is WP forms and it integrates within Elementor the visual page builder but it's a different plugin so to edit it's pretty easy all we have to do is just hover over it and let's say we don't want this phone number we don't want want to ask people for their phone number so we can just click on delete and press OK and now the phone number is gone if we want to add another field we can add all of these different fields to it let's add in a multiple choice so let's just click hold and drag a multiple choice right there and maybe we don't like it positioned here so we can just click hold and drag it all the way to the bottom and then we can click on it to change it and maybe we'll put in something like how did you hear about us so it might be good to get some marketing data and maybe we'll put in Google social media or from a friend alright now that we have that or any of the other fields that you want to add we want to make sure it's going to the right email so we can click on settings and we can click on notifications and if we scroll down here this admin email is the email address that you're using for your WordPress account if you want to go somewhere else you put in another email address right here so this send to email address is where the information is going to get sent to so when someone fills it out it's going to send to whatever email address you put in right here email subject line you can change that if you want that's just the subject line of the email from name this is just your website name that it's going to say it's from and then from email you could just put an admin at yourwebsite.com and this is because we're sending it from your website and then reply to email address when someone's filling out the form they put in their email address and so when it goes into your email inbox it's going to reply to their email address I'll show you that in just a second and then this all Fields this just means that all of the fields that you put in it's going to send you an email alright so let's get an example let's click on Save and let's exit out of here and now it's going to update with our options how did you hear about us and it's going to delete that phone number field right there so let's just update this and let's preview it by clicking on the I and let's exit out of here and we can just delete all of that preview stuff right there we don't need it and we can see that we have our form right here so let's enter in some information let's say my name is Tyler because it is and let's say I'm at hello tyler.com and my message is hey there maybe they heard about you from a friend and we can just click on send now so that's gonna get sent and now we can open up our email by just typing it in there and we can see our new email right here we can just click on it and we can see who it's from it's from admin at our website.com we can see the visitors email right here and the message and how did you hear about us from a friend and when we click reply it's going to reply to their email address that they filled out and then you can email them back and answer whatever questions they have so that's how your form works on your website that's how you edit it so that people can get in contact with you so we know we can edit any of these pages but what about adding a new page to add a new page all we have to do is go to the dashboard by clicking on our website name and then click on pages and we can see all of our pages right here and we can just press add new once we do that we can exit out of this and we can add a title to our page I'm just going to name this projects of course you can choose any name that you want you can make any page that you want and then we can click on edit with Elementor because Elementor is our visual page builder so just click on that and now we've created a new page but it's blank we could of course import any page or any block by clicking on this but there's something else that we can do if we open up a new tab and we go to our website and we click on edit with Elementor we can actually copy any section by just right clicking right here and then press copy and then we can go back to our page that we're creating and we can right click and we can press paste this is going to save us so much time but what if we want to copy this entire home page it would take a bunch of time to copy each section we can also make this page a template and that way it'll copy the entire page you can also save any template to your website and then import it to any other WordPress website so to save a 10 template we can just click on this Arrow next to the update and we can press save template and we're going to call this template home because it's our home page and we're going to press save now we have this template right here so we can exit out of this and we can actually exit out of this page right here now let's delete this section right here and let's go to this folder right here and go to my templates and now we can see this new home template and we can press insert and then we're going to press apply and that's going to import that page and now we have the entire page on our website so we can just check that out this is the entire home page and this is going to save you so much time and keep it consistent across your entire website maybe we don't want all of this though so we can exit out of this and this and this and this and maybe this too and maybe because this is our projects page we can put up here our projects and let's scroll down and maybe we have all of our projects right here so we can just go ahead and duplicate this and we'll have all of our projects here we can even make this a link to different pages to show our individual projects like that so that when people click on any of these right here they can go and get more detail about that specific project all right that looks really cool and great except for we have a little issue this has a white background this is not a transparent header like our other headers so it doesn't look the same if we click on publish and we preview this we can see this background right here but if we go to our home page we can see that it's actually transparent right here to make it transparent is pretty easy let's exit out of here and let's preview this one more time and then we can click on edit page up here this is the same thing as going to the dashboard and clicking on pages and what we can do is we can click on this a right here for Astra and go down to advanced settings and where it says transparent header we want to enable it once we do that we can exit out of here and we can press update and now we can exit out of here and click on preview to preview our projects page and we can preview do it in a new tab we can see that our projects page now has that transparent header just like the home page but we have a little problem let's close this right here because we don't need it and let's go to our home page and I see the home about services and contact but they don't see the projects page so how do they look at our projects when they can't find the projects page the next thing that we're going to do is we're going to add a new page to this menu up here and to do that is super simple all we have to do is go to the dashboard by clicking on our website name and then going to appearance and then menus alright let's open up a new tab and let's go to our website again just so I can show you it says home about services and contact and over here it says home about services and contact so this menu right here corresponds with this menu up here to change it is really easy we can just go back here and we can see pages right here these are all of our Pages we can view all or see the most recent and we can click on our our projects page and we can add it to the menu and what we can do is we can click hold and drag this projects wherever we want I'm going to drag it right under services so now it'll read home about Services projects and contact and we can press save menu once we do that we can go ahead and refresh our page right here and we can see now we have this projects right here so it's home about Services projects and contact and our visitors can click on it and they can visit our projects page we can also make a sub menu so we can click back to our menus and we can scroll down and instead of this projects being its own menu link we can actually put it under about and this would just be the same link but if we click hold and drag and indent it a little bit it'll be a sub menu under the about so maybe you want to learn about us and then you want to learn about our projects and then we can press save menu right here and once that's saved we can go back to our website and click on our logo to go home and now we can see this about has a down arrow indicating a submenu and our projects is under it so basically if you have a whole bunch of links and they won't all fit then you can start categorizing them under these different main links say that we don't want our projects page to be on the menu anymore we want to delete it we can go here and press this and we can press remove and that will remove it from our website we can press save menu and now we can go back and we can go to our home page and we can see that the projects doesn't exist anywhere on our menu anymore and now we can exit out of this right here if we wanted our projects page to be completely deleted off of our website you'd go to pages and you delete it from there just like we learned before now let's go back to the front end of our website by clicking on our website name and we can see this logo right here but what if we want to put in our own logo that's super easy all we have to do is click on customize and the first logo that we're going to create is going to be super simple just your text right here your business name right here but then I'll show you how to insert your own logo to do that we can click on header Builder and we see site title and logo and to remove this logo just click on remove right here and remove right here then we can scroll down and we can press display site title that's going to display our site title so whatever you put in here it's going to display right here we can't really see it right now because this is white so to change that and make your super simple logo just scroll up here and customize transparent header and then press design and where it says site title right here we can make that any color that we want so we can make that a green or a blue or a black let's just make it black for now and this is the hover so when you hover over it it'll turn green and it would do that if we're on the real website and that looks pretty good that might be good enough for you a lot of websites just have that but maybe you want something a little bit better or maybe you have your own logo so let's go back and again click on site title and Logo you can upload your logo right here or I can show you how to make one right now so to make a logo we're going to open up a new website and we're going to go to logomaker.com that's l-o-g-o-m-a-k-r without the e.com and press enter once we do that we can press start my design and we're going to create a new design and we can search for an icon something like Earth maybe or whatever your business does and we can scroll down and try to find the right icon for us and they have millions and millions and millions of different icons but I think I like this one right here and I can click hold and drag this around maybe I'll put it over here maybe I can resize it a little bit make it a little bit smaller then I'll add some text maybe and I'll go with something like simple and modern text and I'll do something like Josephine Sans I like that one then I can type in whatever your business name is right here so we can just type in something like Earth or this would be your business name and you can make it a little bit smaller here and then you can make it bigger here by resizing it maybe we'll do something like that and then we can just click off of it and click hold and drag it around maybe I'll drag it right here and maybe I'll make this a little bit bigger just a tiny bit and put this over here you can also use your arrows to make it exactly where you want it so we can just use our arrow keys and put it about there all right that looks pretty good to me I don't like the colors though so I'll highlight both of them and maybe I'll go with uh let's see something like a greenish blue and drag it down here maybe something like that alright I'm really liking that I think that's pretty cool and then we can click on Save right here and then what we would usually do is click on download low resolution PNG files but there is a trick instead of getting the low resolution files we can actually just click hold and drag this to our desktop and this is under the examples where it shows you all the examples of everything that you can use your logo on which is pretty cool so just click hold and drag this to our desktop and that will actually give us the high resolution file right there so that's a little secret to get the really nice high resolution files but if you want the super resolution files and you want to support logo maker because I think they're pretty cool you can press download your files right here and you can purchase a super resolution files which makes all your logos based off of math so they look perfect in crisp so no matter how big they are even if they're blown up on like an entire billboard alright so let's exit out of there and let's get that logo that we dragged to our desktop and we can exit out of this right here and we can go to our website and now where it says select logo we can upload that logo that we drag to our desktop so we can press upload files and select files and it should be called download.png and then we can press open and we can press select and we can skip cropping because we didn't want to crop it it's already cropped and then what we're going to do is we're going to go down and we're also going to do the retina logo by pressing select image and we're going to click on it and we're going to choose image the retina logo is for retina displays so this one would show up on regular displays and this one would show up on super high resolution displays then what we can do is we can go down and we can click off display site title and now we can see our logo but it's super small so we can go here and we can put in 155 and now that to me looks super good but if we scroll down we can see something that's called site icon and our site icon right now is this W logo maker site icon is a whole bunch of shapes right here and Apple's site icon is this apple right here so we want our site icon just to be an icon that helps identify our site when we have these tabs open like this so we can go back to logo maker and we can create our site Icon by just going here and we can delete the this and we can go here and we can make this icon bigger and then we can press save right here and we can use the same trick by click hold and dragging it to our desktop but of course do support logo maker if you're actually going to use this for your logo and then we can exit out of here and we can go to our website again and we can click on site icon and then we can select our site icon and we can upload files and select files and we see our site icon on our desktop that we dragged and we can press open and we can press select we don't want to crop it too close because it won't look that great as an app icon so we want to give it a little bit of space but not too much because we want it to be as big as possible and then we can press crop image once we do that we can go ahead and click on publish and we can exit out of there and now we can see not only our logo but we can also see our site icon up here and that's going to help identify our website so I think that's pretty cool we can exit out of these tabs right here and the next thing that we're going to learn is how to change this header up here we already learned how to change this logo up here and how to add a page but how do we change the colors of these links and maybe add a button or anything else up here all we have to do is click on customize and then click header Builder and now we see the site title and logo that corresponds with this right here and we see this primary menu that corresponds with this right here so we could do things like click hold and drag this over here or put this primary menu over here we can also move this primary menu above or below but I think I liked it how it was that's usually what people do they have the logo on the left side and the menu on the right side so we're just going to keep it like that let's say we wanted to add something maybe we wanted to add a button so we can just press this plus right here and we can add things like search or social media but we're going to add a button so just click on button and now we can see that there's nothing in the button so we can click on the button and we can say the text is our projects and we can link it to our projects page which was forward slash projects so now this link will go to ourwebsite.com forward slash projects we don't need to put in the whole our website.com we just need to put in forward slash projects and now we can click on it and we can see that it will go to our projects page we can also change the design of our button by clicking on design and we can go to background color and we can change the background color right here we can change it to whatever color that we want but I'm just going to revert back we can also change the text color so maybe we don't want it to be white we want it to be black or we can undo that right there we can also make a border if we put in a border we need to put in a border with that will give it a border around the button right here and we can also change the font right here something kind of cool that we can do down here is with the Border radius we can make this rounded so we can just increase it right here and it will make it round over there and I think that looks pretty good that's pretty cool but what if we want to change the color of these links up here that's pretty easy we can scroll up and go back and we can go down and click on transparent header right here then we can click on design and then Under menu color right here we can make the text link any color that we want so we could make this any color that we want right here maybe we'll make it a white or something but we can't see that so we can make it any other color that we want and then this color is the hover color so we can click on it and we can make it any color that we want also so now we can see when we hover over it it turns that color now obviously that doesn't look that great so we're just going to revert back but this is the area to control all of the colors right here we can also change these options for your tablet and your phones if we click down here we can click on the mobile icon and maybe let's say our logo is a bit too small so we click on site title and logo and actually we can't really see it right here so let's hide this control and hide this Builder and now let's show that control again and now now we can scroll down and we can change this logo with because it has this mobile icon right here it's only going to change it for the mobile website so we can put in something like 130 and make it bigger and that looks much better for this menu icon up here we can also change that let's hide this control again and show this Builder and we can do that by pressing this toggle button right here and then we can change this however we want so let's show this real quick and we can change any of these options right here we can make it outlined and we can go to design right here and we can change all the colors and make it any color that we want so that's super cool we can also add a button to this menu right here so if we wanted a button like our projects button we could do that so let me hide this and show this right here and you do that by clicking on this primary menu right here and then what we can do is we can press this plus button right here and we can add a button so we can just press on the button and now when we press on that menu I know you can barely see it we have this R projects button right here so we can click on the button and of course change any of the design anything that we want we can change any of the colors or anything like that just like we learned before you can also change the margin or how much spacing is on the left side or right side and we can press unlink and we can put 60 pixels of space on the left side so that it looks more centered or maybe we don't like that at all and we can delete it and if someone's using a tablet again we can change the size of our logo by clicking on site title and logo and then clicking on the tablet version and we can scroll down that looks a little bit too small for me and we can change it to something bigger like 150 alright so that looks perfect on our tablet now so let's go back to our desktop and now we can learn how to change the footer so that was the header we learned how to change the colors and add a button and how to make it mobile optimized if we scroll down we can see the footer how do we change that it's pretty much to the same and don't worry this just looks smushed because we have all these controls right here out it won't look like that on your real website so to change this footer right here we can scroll all the way up and go back and then go back again and then we can go to footer Builder and of course we could move anything around just like we did on the header we can move this here this here we can switch anything that we want I'm just going to keep it as it was normally because that's how I like it and the first thing that we can edit right here is you're going to want to put in your copyright information so you're going to want to put in maybe the name of your website right here and instead of this year right here you don't want to have to change it every single year so what you can do is you can do left bracket current underscore year and then a right bracket and that will put in the current year and this is what's called a short code and this will put in the current year so that you don't have to change it every single year we can also replace this logo if we want right here we can just click on it and we can just click on this over here and we can press delete right here on the X and then we can add media and maybe we want to add our icon I think that'll look pretty cool and we can insert this into post once it's inserted it's way too big so what we want to do is we want to click on it and press the little pencil icon to edit it and for size maybe we'll do something like custom size and something like 40 by 40. I think that'll be good and we want it to link to our home page so this is a little trick but all you have to do to link to your home page from any page is make a forward slash once we do that we can click on update and that will get much smaller and we can publish that and we can exit out of there and now we have our projects page right here we can click on it and we can click on it from any page that we want we can scroll all the way down and we see this little icon right here and that'll take us back to our home page there is one last optional step that you can do and that's logging out so that you can visit your home page just like a visitor would view it and we can do that by hovering over our name up here and pressing log out once we do that we can delete all of this to go to our main website and we can see our website just like a visitor would see it so congrats we learned so much you guys should be super proud please remember to comment rate and subscribe I'm Tyler Moore thank you so much

Channel: Tyler Moore

Views: 88,218

Keywords: make a website, create a website, how to make a website, how to build a website, how to create a website, wordpress tutorial, make a wordpress website, create a wordpress website, build a wordpress website, how to make a wordpress website, how to create a wordpress website, easy wordpress tutorial, wordpress

Id: jl8F4WglM3I

Length: 85min 37sec (5137 seconds)

Published: Mon Jan 02 2023