How To Make a WordPress Website - 2021

hello by the end of this video you're going to know how to make all of these different websites and i'm going to show you how to make all of these different websites step-by-step with no steps skipped you're not only going to know how to make all these different websites but we can also mix and match these different websites maybe we like this lucy anderson with this christy dao son and we want to mix them together totally possible totally doable or maybe we want this a clean car is a happy car with the garden of your dreams and we want to take them on our website mix them together change the content we can totally do that or maybe random we want to do the breathe easy with this red thing over here we want to mix them together we can totally do that we can not only mix them together but we can also obviously provide our own designs on there also but i always tell people it's super important i think to start off with a starting design so you're not looking at a blank website in fear like what do i do so it's much easier to start off with a blank website we're going to be doing this website in three easy steps and they are set up options and design setup options and design the setup is going to be where we get our domain name and hosting so your domain name is your website name so your domain name is probably yourbusiness.com yourname.com a non-profit you're working on dot org so that's your website name without your website name nobody has any idea of what to type in to visit your website the second thing in the setup though is your hosting so your hosting is a computer that's on 24 hours a day that holds all of your information so for example this is an image on a website right here and this is an image on a website right here this needs to be held somewhere on the internet so in these there needs to be a computer that's on 24 hours a day that's holding this content so that when someone types in that domain name it pops up and this information shows up if you didn't have hosting someone would type in your domain name and there would be nothing to show the website would come up blank because there's no place to store all of your website information images and everything like that so in the setup we need your domain name and hosting the second step is the options the different options that we can do and we can use the options are literally endless so we can do so many things on our website maybe we want a website to have e-commerce ability on it so we want to be able to take a shopping cart and we want people to be able to purchase things on it so that is super easy to do or maybe we want to blog or maybe we don't want any of that we just want a really simple website and so this tutorial is going to be super simple for you because a lot of the options you won't even do because it's so easy just to set up a super simple website other options that we can do is we can have over here if we want we can have some live chat so when someone goes to our website it'll pop up and we can chat with them live and tell them about our services or about our products or anything like that some other options we can do which i think are super important is like a google analytics so a google analytics allows you to see how many people are going to your website a day and where they're coming from very important things to know if your social media postings are working or if you're getting traffic from the search engines super important so that's all in the options so we've done setup uh we're gonna do options we're gonna get all the raw material on your website and finally the third phase is the design we're gonna get the design going on your website in the options we put all the raw materials all the you know different pages and the different things that we want on our website in the design we're actually going to tweak the design so we're going to put in your content type in your content put in your images put in different way it shows up on your website so again the three steps are set up options design setup options design it's super easy and i've come up with this method after eight years of doing this and i think it's the the best method because obviously you need to set up but you don't want to jump into design right away before you know all of your options so i think it's super important to do it this way rather than jumping into design and then not knowing all the possibilities you want to put all that raw material on your website before you begin shaping and molding it that's what we're going to do we're going to do it step by step if anything i said here didn't make sense don't worry because i'm going to show you how to do it all step by step with no step skipped so let's begin so we have our main steps setup options and design setup options design pretty easy but those steps need to be broken down into sub steps we're going to be tackling setup first and setup has three sub steps which are get your domain name get hosting and install wordpress now setup is pretty interesting because it's the only step that has any cost associated with it all the other steps are free so i'm going to be explaining what each of these steps are and how much they cost so your domain name your domain name is your website name so my domain name is tyler.com google's domain name is google.com your domain name will probably be something like yourbusiness.com or yourname.com or your yournonprofit.org so that's your domain name your domain name is also called your website name or your url your domain name cost about 13 dollars per year and there's no way of getting out of that because you need to be able to tell someone what your website name is in order for them to go to your website now hosting is something a little bit different it's a computer that's on 24 7 that holds all of your website information so like your logo your text all your content and all your files that's what hosting is it holds all the information it's a computer that's on 24 7. when someone types in your domain name it goes to the hosting and the hosting serves up that information without hosting if someone went to your website the website would come up blank there would be nothing there so you absolutely need hosting so hosting cost and i'll show you how to get a discount but it cost about 10 per month so i'm gonna show you how to get a discount but that's what hosting is next is installing wordpress what is wordpress wordpress is a content management system which is just a fancy way of saying it helps you manage your website content so instead of having to do all this nerdy stuff like coding and mess with ftp files and css files and everything like that it does it all visually for you and honestly it does it much better and much faster and much more efficiently wordpress is the most popular way in the entire world to make a website it blows places like shopify wix squarespace and weebly out of the water they don't even come close to the popularity of wordpress wordpress is used by companies like cnn forbes and people like jay-z and katy perry and it's by far the best way of making a website and i think that's because it's what's called open source so anyone can add things to wordpress and you can also transfer your files anywhere and download them to your computer where these other companies don't allow you to do that because it's their own proprietary software so wordpress i'm happy to tell you is absolutely free so that's it for domain name uh hosting and installing wordpress that's it for the setup it cost in total about ten dollars to start and ten dollars a month or if you use the discount that i'm going to provide it's thirty dollars for the entire year so about three dollars monthly which i think is an incredible deal to have your website broadcasting to the entire world so thirty dollars for the entire year about three dollars a month we can get your domain name and hosting at the same place which is hostgator.com so all we have to do is open up our browser and go to hostgator.com so that's h o s t g a t o r dot c o m and press enter so i do get a commission for recommending hostgator but nine years ago i made a video teaching people how to make a website with hostgator and i didn't get anything for it it's just who i use but since then hostgator has contacted me giving my audience the biggest discount that there is so i really appreciate that and it helps me make these tutorials absolutely free i really like hostgator because of their 24 7 live email chat and phone support and they just make it super simple to set up a wordpress website so we have all these options right here and i don't think that we should use the pro hosting because it's just too much stuff we don't need all of that stuff and we can always upgrade later so i really think you should just go with the hosting now we have three options here the shared hosting the website builder or wordpress hosting you would think that you would use wordpress hosting but i think again it just costs more and it's way too much for what we need right now and you can always upgrade to that later we can get just as much with the shared hosting and you can install wordpress on it saving you the most amount possible so we're gonna click on shared hosting and if we scroll down we're going to see these different plans here the hatchling plan the baby plan and the business plan but before we do that we can actually go up here and we can go to forward slash unlock u n c and it'll take us to the same page but it will be a much lower discount so if we scroll down we can see those three different plans the hatchling plan the baby plan and the business plan the business plan is just way too much we don't really need it so it really is between the hatchling plan and the baby plan the difference between the hatchling plan and the baby plan is the baby plan offers unlimited domain names so you can have like yourwebsite.com yourmomswebsite.org your otherwebsite.netaclienswebsite.com you can have as many domain names as you want where with the hatchling plan you can only have a single domain name so like yourwebsite.com so it really is up to you do you already have two domain names two websites that you want to start then you go with the baby plan most people i think are just starting with a single domain name so just go with the hatchling plan so that's what we're going to do we're going to start off with a single domain name and we're just going to click on the buy now on the hatchling plan all right so now it's asking us do we already own a domain or do we want to register a new domain we would click i already own this domain for example if we got our domain already from somewhere like godaddy.com so you type in right here dot com that you already own it and put it in right there today i'm registering a new domain so i'm going to click on register a new domain and i'm just going to type it in right here so as we can see our website name is available right there but sometimes your website name won't be available so you have to get a little creative with your website name or you can use a different extension so that's like the dot com the net the dot org the dot space the dot tech the dot store or just be a little bit more creative with your website name hopefully it is available but it's not that big of a deal if it's not you can always change your website name later it does cost about you know somewhere between 12 and 15 a year for a new website name but it's not that big of a deal so as you can see they also want us to add in the dot club the dot site the dotnet the online space tech website org but i don't think that we need all of these they just obviously want to make more money but i don't think it's like someone's going to copy you or something with the.net i don't really find any value in getting any of these other extensions personally so we can scroll down and skip all of that so i'm a little bit conflicted on this domain privacy protection because on one hand i want to save you the most amount possible but on the other hand some people get annoyed if they get an email or a call from somewhere from a different country saying do you want some google rankings or do you want me to develop your website so that's what domain privacy protection ensures that when you register a domain name when you register your website name yourwebsite.com people can look that up and people can see your email address and your phone number what the domain privacy protection does is that it makes it so that you can't see any of that so for 15 a year sometimes it's worth it to people so that they don't get any of those spam or annoying phone calls but sometimes to people it just really doesn't matter so for me it just really doesn't matter so i'm just going to uncheck add domain privacy so that i will probably get a couple of calls and it might be a little bit annoying but i'll save 15 a year and we'll save the most amount possible so now we can go down and we can see that our package type was hatchling because we didn't use the baby plan use the baby plan again if you have unlimited domains so if you want multiple domains on your website just starting out use the hatchling if you only have a single domain name right now for the billing cycle if we click on it we can see all of the options right here and the options are interesting because the discount only applies one time so if you got the monthly plan it would only apply for that first month then you would pay about ten dollars a month so it would be like ten dollars up front and ten dollars a month where the yearly applies for the entire year and the three year applies for the entire three years so what's the best strategy what's the best balance of paying as little up front but still saving the most in the long run and i really think that that is the 12-month plan because you save the most it's dollars and 58 cents a month the three-year plan is 2.57 cents a month but you're paying a little bit more up front the one month you'll be paying the least amount up front but you'll be paying more in the long run so i think the best balance is the 12 month plan the one year plan it gives a super great discount so once you do that we can create your own hostgator account so just enter in your email address confirm your email address enter in your password right here put in your security pin scroll down we can enter in our first name last name phone number address country state i'm in california and zip code next we can go up and we can either pay through credit card or paypal so you can enter that in right here don't worry this is not a real credit card number enter in your code your expiration date then we can scroll down and it's going to ask you about additional services so do we need the ssl our website already comes with ssl so i don't know this is some advanced ssl we definitely don't need it leave it unchecked do we need site lock essentials to secure our website there are plugins that allow you to secure your website so i don't think that we need this either so we're going to uncheck it do we need professional email i think you should get your email from gmail but your website already comes with email it's a basic email but there is email so i wouldn't get it from microsoft i would get it from gmail if i was going to do it so let's not do that either and do we want to back up our hard work for two dollars a month and i think we don't need that either i'm gonna show you how to download a plugin that allows you to back up all your work and do you want to improve your search rankings and increase web visitors with the hostgator seo tools i don't think that you need this i'm not sure what they would even do i don't think that's something that they can really help you with so i'm gonna say no to that then we want to enter in our coupon code it should already be in there but if it's not just type in unlock u-n-l-o-c-k and press validate all right now we can review our order we get 24 7 365 phone live chat and email support instant account activation 45 day money back guarantee our registered domain name for one year we have the hatchling plan for 12 months so this is all for 12 months and it comes out to 33.5 cents now that may go up and down a few dollars here and there but it should be about between 30 and 35 dollars maybe give or take a dollar or two so now we can go down and we can click you have read and agree to the terms of service and click checkout now so we've actually completed the hardest part which was deciding to build our website now everything is pretty much downhill from here we're gonna do the last part of the setup which is installing wordpress it's super easy all we have to do is go over here after we've checked out we'll see a page like this and then click install now then it's going to ask us what current version we have that's fine then it's going to ask us to choose where we want to install it so i have a whole bunch of domain names because i have the baby plan but i'm going to install it on learn how to create a website dot com all right and make sure that this is blank don't put anything here because if you have it then it will install it on learn how to create a website dot com or your website dot com forward slash something instead of just yourwebsite.com next it's gonna ask us the site settings so for your site name you can just put whatever your site name is you can always change this later so don't worry about it too much but i'm just gonna put create a website as my site name your site name will probably be your business name so whatever your business name or whatever your name is will be your site name your site description is how you describe your website so if you do plumbing maybe you would say los angeles plumber since 1972 but i'm just going to type in learn how to create a website all right now we can scroll down it's going to ask us for our username and password so i'm going to put in my name as the username you'll put in your name and the password i'm going to hide this so i don't get hacked by the internet and i'm going to put that in right here and then your email address so maybe i'll just put in my name and learn how to create a website dot com for my email you can always add some later if you want to not a big deal pretty easy to add then we're going to select our language english and we're going to skip all these things we don't need it then we're going to skip this too and we're going to go right to install now instead of just clicking on that we can actually put in our email if you already clicked on it no big deal but we can put in our email so we get all of our installation details like our username and password that we just made we're just going to click on install and now it's going to install all right so now that it's done installing we're going to get a congratulations the software was installed successfully but if we click on it we're going to actually see this sad face because your website isn't ready yet your website might take up to an hour maybe two hours sometimes up to 24 hours but it's very rare but probably from 10 minutes to one hour for your website to go across the entire world so your website is spreading out to all the servers all of the hosts into the entire world and it's letting them know that your website exists so right now you might see this but if you check back in 10 20 30 minutes it will start working so right now i'm just gonna close this right here i'm gonna take a little break and when i get it back we're gonna try it again all right so i'm back it's been about 20 minutes so i'm going to see if my website works so i'm gonna click on it and there we go we have our website i'm just gonna close this right here all right so now we have our website online if someone went to your site they would see something like this this hello world right here we can check out the different pages obviously there's nothing really on it and obviously this looks pretty bad but if we click on the sample page we can see it it's a sample page it looks okay not the best we're going to make it look much better if you click up here we can go back to the home page and we have this blog post right here and it doesn't look that great but it is our website and we saved a lot of money just by getting here so how do we actually log into our website well it's super easy all you have to do is go to yourwebsite.com and then forward slash wp-admin wp-a-d-m-i-n and press enter now it's going to ask us for our username and password so we're just going to enter that in right here so what was our username we just created it so you should remember it but my username was tyler and my password was whatever my password was then just press login all right so we're officially done with the setup phase of the website we've signed up for hosting we've got our domain name we installed wordpress and we're logged in to the dashboard now it's time for all of the options and i'm going to show you all the options that you can have on your website and i think that you're really going to like it and it's going to be really cool so let's explore all the different options of your website this is phase 2 so we have setup options and design this is the options part of the website so as we can see from this and some different things we have all of this extra stuff on our website and it's not really necessary so it's basically like when you get a new phone and you have all these apps that you don't really want on your phone or you get a new computer and you have all these programs on your computer that you don't really want the manufacturer got paid by someone to install those programs on your phone and on your computer in order to drive down the cost of that phone or computer but we don't want all that stuff on there it's the same thing with all this stuff right here they basically got paid to install it but we don't really want all of that stuff on there so how do we get rid of all of that stuff that's the first thing that we're going to be doing and basically they are plugins that are installed so we're just going to clean all of the plugins out so we can just go to plugins right here and if we scroll down we can see all of these different plugins that aren't really needed in my opinion so we just click on this right here this plugin and i'll select all of them then we go to deactivate and press apply and then click on it again and go to delete and apply and that will delete all of them say goodbye and now if we go back to our dashboard we can see that we have a nice clean website none of those extra plugins are installed everyone can start off clean and fresh so this is what they call the dashboard it's basically the back end of your website your dashboard is where you control all the options it's where you go when you log in and go on to your website and it's the place that you need to go in order to edit your website you need to log in once you log in you hit the dashboard so once we hit the dashboard we can go back to our website by clicking on this up here and now we're logged into our website and you can tell that you're logged in by this bar up here so this bar lets us know that we are logged in no one else sees this except for us so this is how we know that we're logged in to get back into the dashboard all you have to do is hover over your website name and click on it and you're back into the dashboard all right next i just want to show you something that i just like to show people if you ever want to change your username or password or add a different user you can just click on users and you can click on your name or you can add new if you click on your name you can scroll down and you can generate a new password and change your password like that then just click update profile so that's how you change a password or add a new user the next thing that i like to do is two additional checks and that's making sure that wordpress is updated and also making sure your permalinks are correct i'll show you how to do that right now all right so the first thing that we want to do is see if wordpress is updated so we click on this dashboard right here and if we had an update it would have like a one next to it but there are no updates so we don't need to even click on it but if you did you would just click on right here and there would be a big update button right here that you just press on super simple the next thing i want to check is permalinks if we click on our website name right here and we go to the sample page and click on that we can see that it's our website dot com forward slash sample dash page sometimes hosting companies have forward slash id equals one or forward slash question mark and some numbers we want to make sure that everyone is on the same page so their url shows up like this which is much better than a number or a letter or something like that so we can go back into our dashboard then we can go into settings and go to permalinks so right now our permalinks are on day and name so if we had a blog post it would actually put the date in it but i don't really like that i like the clean version of it which is right here so that's what we're gonna do we're just gonna put in that post name so go ahead and just click on post name it really is up to you but i like it to be as simple as possible so click on post name and click save changes now everyone's permalinks will be the same and really simple and in my opinion post name is the best so the next thing that we want to do is make sure your website is discoverable by the search engines and i think you can enable this right now even if your website isn't done so the way to do that is you can go over reading right here and click on it and make sure discourage search engines from indexing the site is not checked so we want it to be not checked just like this and save changes this will make sure that our website is now discoverable by places like google and bing and yahoo all of the popular search engines all right the next thing that we're going to do is install our theme if we go ahead and click back on front end of our website we can see that this is the theme the theme is basically the design of the website so this theme has this tan color and this big hello world and this navigation up here on the top and the sample page here with this search icon right here that's the theme we want to install a much better theme in my opinion that allows you to control the entire website allows you to control all of the header and all of the footer at the bottom and everything in between so it's much better at controlling all parts of your website so installing a new theme is obviously super simple all we do is go to the back end of our website once again by just clicking on our website name and then going to appearance and themes once we do that we can click on add new because we're adding a new theme and we can go over here and search for a theme this one is called astra it's by far my favorite theme astra and it actually is one of the most popular themes out there so we can go over it and we can click on details and preview and we can see over here that it's been rated close to 5 000 times and i think it's installed almost or if not a million times so it's the most popular theme out there and it's the best because you can do the most with it so we're just going to click on this install right here once it's installed then we click on activate now we're going to go to the front end of our website and even though this doesn't look great we can see that the theme or the design has changed and it looks different we see this header up here which looks a little bit different this sidebar over here and the blog posts are showing up different right here so the theme has changed to the best theme on the internet and it looks a little bit different it doesn't look great but we're gonna make it look great in just one second so to make it great let's go back into our website and let's go to plugins and let's click add new so what we're doing now is we're installing a new plugin that's going to allow us to import an entire website into our website as a starting point remember plugins help you extend the functionality of wordpress so basically if your website doesn't have something like a contact form you can install a plugin that will be a contact form or if your website doesn't have an image gallery that's really good you can download an image gallery plugin and put it right in there if your website doesn't have shopping cart functionality you can easily download a plugin and now your website will also have a shopping cart on it so plugins are hugely important it's basically just like installing an app on your phone or a program on your computer it's really beneficial and this is really where the power of wordpress is where places like wix squarespace weebly and shopify they can't match how many people make plugins for wordpress and how many options there are so there are thousands and thousands of plugins to choose from this plugin is called starter templates s-t-a-r-t-e-r t-m-p-l-a-t-e-s press enter and we can see the first one has 5 stars 563 reviews and 800 000 active installation it's always important to look at all these numbers and also click the more details and get more information up here like when it was last updated who the author is and how to use it so with the installation faq the different screenshots that you can see before you install it so definitely investigate every plug-in before you install it and once you think it can do what you would need it to do then just click install now so we're going to click install now it's going to install for us and then we're going to click on activate so one of the reasons why it was important to install the astra theme first is because this plugin only works with the astra theme so now we have all these different options of selecting a page builder like elementor beaver builder gutenberg and breezy but which one do we choose there is one that is much better than all the rest and that's the first one elementor so we're just going to go ahead and click on elementor all right now we have all of these options and this is really getting up to you do you want an ecommerce store do you want a regular website which design do you really like any of these websites can also be mixed and matched to create any combination of any of these websites we can also go up here and instead of searching for all we can search for free so just the free ones and we can scroll down and find something that you really like i like to keep it super simple and easy so i think i'm just gonna go with this nice nature elephant one click on it and then we can import the complete site then just click on import if we have already previously imported something you can delete your previously imported site but we haven't yet so i'm just going to click on import and now it's importing and this is saving you so much time this is saving you at least 10 hours of work and it's designed super nicely and it's importing all the images and all of the plugins that you need and everything just so you have a nice starting point and i think this is just a huge and amazing feature so we're just gonna wait for it to import it's importing the pictures right now and now our import is complete so we can click on view site and now we can see we have this beautiful website it's really nice looks awesome and we have all these different pages up here so we can click on the about page and we can see the about us page and this is what it looks like and i think this is such a cool starting point such a cool feature that they've added to this we can click on services and we can see the services page so if you have different services you can put them up here and we have our projects page so it has this really cool picture in the background and there's projects and these will be like our different projects here we have this contact page that allows people to contact you so you can fill out this form it's already all set up for you and you can send the message and put some more contact information right up here and it has this really cool map right here that's interactive so that's really cool it's a google map and we have this extra button up here that we can use for anything that we like it doesn't do anything right now so if we click on it it's not going to do anything but of course i'm going to show you how to either remove that or make it do something cool so that's it we can get back to our home page by clicking on either home or clicking on this logo up here and now we have a really cool website and look right now we could edit this website we could click on edit with elementor right here and we can click on anything and we can edit it so basically the philosophy is anything that you click on over here you can edit over here so if we click on this welcome to right here we can edit it right here if we click on this learn more button right here we can edit it over here we can scroll down and we can edit more things so anything again that we click on here we can edit here scroll down same thing anything we click on here or here you can edit here if you want to edit an entire section and change the images for example we can click up here and you can press got it you can also right click they're telling you and we can go to style over here and we can edit anything there so although we can edit right now i don't think it's the best idea remember we're doing setup options and design setup options design and that's because that's the best order to do things in right now if we just jump into editing we're going to get all confused and lost and not know all of the options that we have in order to make our website the best that it can be so first we need to get all the options all the raw materials on our website first before we start shaping and designing them so right now even though i know it's tempting to start editing your website don't it'll serve you much better in the long run so let's figure out all the options and better ways to do things before we begin editing all right if we wanted to update our website even though i don't think you should right now you press update and that would be it so we can go back to our main website by removing all this and pressing enter and pressing leave because we're not saving any of those changes and that's how you would edit your site if you wanted to i'm going to get way more in depth into editing your website but right now we need to get all the options first and then i'll show you all the cool tips and tricks on how to edit your website so now let's go back into our dashboard and let's do some more options one of the options we have is backing up our website so we need a plug-in in order to back up all of our hard work right now so we've done all this stuff and we want to save our progress basically so that we can feel free to experiment more so right now we're just going to click on plugins and we're going to get a new plugin that allows you to back up your website so let's go to plugins this is super cool because you basically save all your progress and you can always revert back to anything if you feel scared that you're going to mess something up which you're probably not going to so then we click on add new up here and then after that we search for plugins i'm just going to type in all in one because it's called all in one wp migrator i'm just going to type in all in one and it's actually called all-in-one wp migration so 3 million active installations 6 500 4 out of 5 stars looks super good press install now now it's going to install that onto our website so we basically have an extra program on our website now and now we're going to activate it and once we've activated we can see over here it's added something to the sidebar right here so we're gonna click on it and now we're just gonna export to and choose file so we're downloading a file on our computer and it's gonna export for us right here and now we can download that to our computer by clicking on it and now we just have to wait for that to download to our computer but now we have a backup of the entire website and nothing was lost so that's pretty cool all right so it's all downloaded i'm going to exit out of there and i'm going to close this if we didn't want to upload an entire backup of the website there's also an easy way to check all the backups we can just go to backups right here and we can see our backup right here and all we have to do is click on this restore button and it'll restore it so i'm going to create a label for the backup i'm just going to call this the clean installation press enter that'll change the name so now that i know if i ever mess up or do something wrong or crazy then i can just restore this installation and i also have it downloaded on my computer all right now we can go back to our dashboard the next thing that we're going to do is put your name into your website so at the top of your website right now it has this weird sierra thing so we're going to go to your website we can see the sierra nature right here so right there so how do we change that and put in your website name later we're going to put in a logo but for now we're just going to put in your website name and to do that all you have to do is click on customize and then we can click on header because it's like the head or the top of our website and then we can click on transparent header because this header is transparent it's under the transparent header once we do that we can remove this logo by clicking on remove and then we can go back and we can actually go to site identity and once we do that we can also remove this logo so we're going to remove it that's going to remove it from the regular website the non-transparent header so we're not going to see anything differently but if we scroll down a little bit it's going to say display site title so we want to click on that and we can change that if we want we can put make here and that should update right here but i'll just keep create there and we can see that change right up here now if we scroll down it's going to say site tagline we went over this before but basically this just describes what you do and if we hover over right here we can see it if we hover over this we can see that it has our site tagline in right there so that's what the site tagline is and that's where it shows up and i'll also show up in the search engines describing your website okay once we're done with that and we have it how we want it we can click on publish and we can exit out of there and now our site title is on our website later of course i'm going to show you how to design this much better change the colors change the font change the height and also insert your logo right there but right now we're not doing any of the design right now we're saving that for later and the next thing that we're going to do is we're going to insert a page right here maybe you want a different page than one of these right here you probably do so how do we make another page it's super simple all we have to do is click on our website name and then click on pages and then click add new we can exit out of here and we can add a new page whatever page you want services gallery contact faq anything that you want right here i'm just going to put in gallery and then i'm going to click on publish so i'm going to publish that then click on publish it'll update and after we're done with that we can click on edit with elementor we're using the elementor editor and not the regular gutenberg wordpress editor because i think elementor is much better all right so now we can edit our site we can drag anything over on this left side to this right side or add any sections by clicking on this but i want to show you a much easier way of creating a page that is much faster and to do that we want to click on this s button right here click on it and now we have all of those pages from the astra starter sites the starter templates we have them right here that we can insert into our website so this is just a much faster way of creating a site and we can go right here and we can make sure that it's free or we can go over here and we can search for something maybe we want to search for gallery and we can scroll down and search for some gallery maybe we like this one right here so we click on it and then we import this template now this saves us so much time and effort by just mixing and matching all of the different websites we can make millions of different combinations and really find what we want out of them all right once we're done with that we can go over here and compress update and that will update our website and then we can click on this little preview icon so click on preview and we can see that we have a new gallery page and it's looking absolutely beautiful we can actually go to our website dot com forward slash gallery and we can see that we have this nice gallery page right here so we can exit out of this and now we can see that although we create this page and it's absolutely beautiful we have two issues and one of the issues is that the page isn't up here so if someone visited our home page then they would never be able to get to it because it's it's not up here there's no way of getting to it the second issue is that this isn't transparent so all of our other pages were transparent but this isn't transparent right here so how do we make it transparent so let's tackle these issues one at a time first let's tackle the transparency and then we'll get this page into our navigation so all we need to do to make the website transparent is go to edit page right here and then on the right side over here we can scroll down and then under transparent header we can enable so once we do that we can update and then we can preview our website so we can preview we can preview it in a new tab and we can see this header is now transparent and this page is looking great but we can also see that we don't have it right up here so if we go to the home page we can exit out of this we can see that that gallery page doesn't exist so our user is not going to be able to click on the gallery page from here so what we can do is we can go to our dashboard by clicking on our website name and then clicking on appearance and then clicking on menus and then we can click on the gallery page and click add to menu that will add it to the menu and now we can click hold and drag and rearrange the order that we want to show up in so if we want it right after home we could put it there if we want it right after services we can put it there so i'll put it right after projects let it go and press save menu now that it's saved we can go and check our website by clicking on it and we can see we have that gallery page right there and we can click on it and now our users can actually access that page all right but what if we don't like some of these pages here or we just don't like the gallery page and we want to get rid of it well that's super easy all we have to do is go back into the back end by clicking on our website name and then going to pages and here we can delete any page so we want to get rid of that gallery page we actually don't like it after all so just click on trash and then go to the trash and we can actually delete it permanently by clicking on delete permanently and now when we go to our website we can see that our gallery page is deleted from our website the next thing that we do is we're going to make a blog a blog can be right up here with a little link that says blog or it could be on your home page we want to blog because whatever industry you're in you want to make really useful content for so that people are attracted from the search engines people are attracted from social media onto your website and then they can be sold on the product and services that you're offering now to me this is much better than paying for ads from like google or facebook and attracting them to your website it's much less expensive obviously if you're just making the content yourself and i think providing helpful and useful information is just a much better strategy going forward than constantly paying for ads so the way we make our blog post and we're not designing the post yet so we're not designing any of this yet we're just creating it right now but the way you do that is you go back into the dashboard all right once we're in the dashboard you can go to posts and you can click add new because we're adding a new blog post all right and because we're just adding dummy content we're just practicing right now i'm gonna go to zen habits which is a uncopyrighted blog so he lets you use them freely and i'm just gonna copy in some content so i'm just gonna copy this in right here and paste it in over here for the title and then go back and copy in all of the blog post and paste that in right here all right obviously you don't want to just copy in random stuff you want to do things that are relevant to your business because we want to attract the right type of person not just anyone but someone that's interested in what you have to offer we are also using the wordpress default gutenberg editor instead of the elementor visual designer because i think the editor that comes default with wordpress is much more consistent it's much more structured with elementor you can do whatever you want but i want all the blog posts to look super consistent that's why i chose the regular wordpress editor all right so that's looking pretty good we can save draft if we're not done with our blog yet but if we're done we can go ahead and click on publish then we can publish it again and now our blog is published to the internet if we click on view post we can view this post we can see the title right there when it was created and of course we can edit this to make it look different which i'll show you later and we can scroll down see the post and then people can comment on it tell you how amazing your content was all right if we scroll up a quick way to make another post is to go new up here and click on post and we can find another post by zen habits let's find this one right here and we can copy this in and copy this in right here and then we can publish it so we can click on publish then we can view the post and there we have it we have another post in there and that looks pretty awesome all right thank you zen habits that's all we need you for all right if we go back to the main website we can see that we don't see any way for our users to access the blog it's not on the home page it's not on a page called blog up here there's no way for our users to actually see our blog page so we've created a blog post but no blog page to display all the blogs on so we can create the blog in two ways the first way is we can have it on the home page right here the second way we can make a page called blog and put all the blog posts on that page i'm going to show you both ways but if you have a product or service that you're selling then you probably want to have it on a page up here called blog instead of your home page because your home page is going to be used for selling your product or service and your blog page will be used somewhere up here to attract all of the users alright so let's set it to the home page to do that we can go back into the dashboard then we can go to settings and reading once we do that it says your home page displays and just click your latest post and then click save changes all right there are some other options here like how many posts per page and different options like that but we can go back to the home page and click on visit site and we see that our home page has changed and we can see all of our blog posts right here this is the default blog post which i'll show you how to delete in just a second but we have all of our blog posts right here and if we click on one then we can see that entire blog post all right and if we go back to the home page we're gonna see that again this is where our blog post lives but i think it's probably a much better way to create a page called blog up here and then put all the posts on that page all right so that's what we're gonna do so let's go back into the dashboard and let's go to pages and let's click add new we're adding a new page called blog so we're just going to put in blog b-l-o-g and we're going to press publish and click publish again and then we're going to view our page now we can see that this page is completely blank it doesn't have any of our post on it so we need to go back into the back end and set our blog post to this page so again we can go up here and go into the dashboard and then go to settings and reading again and instead of your latest post we want it to be a static page so we want the home page again to be home and the post page to be that blog page so that's where all of your blog posts are gonna go then we can click on save changes then we can go back and visit our website and we can see that our home page is here it's back to normal we did set the blog post to the blog page but it's not in our menu up here so we need to put it in our menu alright so we go right here and go back into the dashboard and then go to appearance and menus and then for pages we want to view all and we see this blog page and then we can add it to the menu once it's added to the menu we can click hold and drag and rearrange it wherever we want then click save menu and then we can go back to our website and visit site and now finally our users can click on our blog and they can see our blog posts but we do have a problem now and that's because this hello world is here but we want to delete it so how do we do that we can easily go back into the dashboard we can click on posts and then we can hover over hello world and click on trash and then we can click on the trash and hover over it and click delete permanently that will delete it off of our website and if we now visit our site and go back to blog we can see that our blog is just the way we want it the next thing that we're gonna do is something that i think is super cool we're gonna put a live chat in the bottom of your website so that when a user comes onto your website you can actually chat with them and sell them on your product and services i think this is super cool so all we have to do is go up to your website name and click on dashboard we're gonna be installing a plug-in again a plug-in is something that extends the functionality of wordpress it's basically like an app for your phone or a program on your computer and you're going to be able to connect and sell your users much better with chat and i think it's super cool so all we have to do is click on plugins right here and then click on add new because we're adding a new plugin basically a new program on your website and then we're going to search for plugins this one is called s-m-a-r-t-s u-p-p smarts up all right this one has 10 000 active installs four and a half out of five we're gonna install it now it also is free which is super awesome then we're gonna activate it and once we're done activating it we're gonna look over here on the sidebar and we're gonna see the smarts up icon and we can click on it here all right next it's gonna ask us to create a free account so i'm just gonna enter in my email right here and put in a password and then i'm gonna create a free account just click on it all right then what i could do now is chat with our users so i can chat with your visitors right here click on that button then i'll have to do is log in with that login that i just created click login and then just click a basic color and press continue then i'm going to put in my name i'm just going to say tyler and press continue and then you can put in a new auto message that one looks fine to me so i'm just going to press continue all right then i'm going to enter in my url so i'm just going to type it in right here and press continue and then i don't need to do any of this i'm just going to go down and go to install cms plugin and since we already did that i'm just going to press go to dashboard all right then i'm going to exit out of here i don't want notifications but if you did you can press continue and then i'll notify you when someone messages you so i'm just going to exit out of there and i'm going to exit out of here because we already did this and now i'm going to open up chrome in a new incognito window so it thinks that i'm a new user and i'm going to go to my website and now i can see this chat icon so maybe i needed help with something i could click on chat and i can say hey tell me more about your services and click send and that's as if a customer just sent that and so now we can see in our dashboard right here hey tell me more about your services we can click on that chat and we can reply back to them i'm going to say sure i do xyz and hit reply and then if we go back to this it will show our users that so that's super awesome and a super great way of having a chat on your website all right so that's how you do it and it has some more user information and a whole bunch more options but that's basically how you install chat onto your website and i think that's super cool i'm gonna exit out of here now and now we can go back to our website all right so we're chatting with our users on our website we're getting valuable feedback we're using that feedback to change the design so that we can actually sell more products or more services or help the customer more that's all super interesting and nice but we're not done with our information collecting yet i don't think i think we need to install google analytics google analytics is a way to see how many people go to your website what sort of links they click on and where they come from do they come from the search engines do they come from social media this is super valuable information to know and once you do know it you can check out which blog posts are popular and you can make more kinds of those blog posts which will attract more people to your website and get more people on which will gather more data and you can make better and better decisions based on all of that information that you have so how do we install google analytics in order to know all of this information that's what we're gonna do right now all right so to install google analytics it's super simple all we have to do is go to the dashboard right here and then again go to plugins and add new we're adding a new google analytics plugin we went through all the plugins made a spreadsheet and ranked them and the best one is from google itself and it's called google site kit alright so we have site kik by google installed 900 000 times four out of five i think it's super good so we're just gonna install it now and then we're gonna activate it all right once we do that we're gonna start setup right here and we're gonna sign in with google all right i'm just gonna use my tylermore gmail.com it's gonna give me a two-step verification so i'm gonna send that verification enter it in right here and click next all right then i'm going to click allow and allow okay and then i'm going to click allow again and i'm going to proceed to verify ownership then i'm going to click allow again and add site then i'm going to go back to the dashboard and then after that i'm going to connect google analytics so i'm going to connect this service i'm going to click on my name again and allow all right go down here and allow then i'm going to configure analytics and now we have our google analytics connected so right now it's gathering all of our data and soon it's going to display all right here so i'm just going to press ok got it and we're going to wait for all of this data to gather and once it's gathered enough information it's all going to show right here but i've already installed google analytics on my own website so i just want to show you what that looks like so if we go to analytics.google.com we can see on my website there's two people on currently one is from west haven and this is real time right now so we can also see different things like this one's from redondo beach and we can also see our acquisition how do we acquire them so we can go on to the overview and we can see that most of the people came directly so most people typed in tyler.com or yourwebsite.com and then 21 came from searches like from google.com or bing.com some of them were referred by social media so like facebook.com or instagram.com and some of them are referred just from other websites and we can see how many users we get each and every day up here and we can go down and drill down and click on any of these to learn more information about that we can also look at their behavior so what do they do on the site if we click on overview most of the people went just on the home page so that's just slash and then a lot of people six percent went to slash templates some of them went to the introduction and some of them downloaded other templates so this is again from my personal website if we click on audience and we can go overview we can look at what the audience did so how many users for which time period how many are new versus returning users so this is someone who's never been to the website this is someone who keeps on returning day after day or at least one time this is how many pages on average people visited so about five and a half pages and this is the average time that they spent on the website so 4 minutes and 11 seconds this is the bounce rate or how many people just went on the website then just jumped right off so you want this to be low the lower the better and we can also click on demographics and go to an overview and we can see that we can see people's ages we can see that it is mostly male and about 40 female and you can just learn all types of really great and useful information so again once that information has all gathered it'll be right here so that's how you install google analytics i think it's super important to know where your users came from what they did on your website and how you're attracting users to your website and what they're doing on your website so super super important and that information can really make your website even better so the next part is probably the one that you've been waiting for and that's designing your website so if we go to the home page we can see this design right here but maybe we don't like this design maybe we want to design something else so how do we do that it's super easy all we have to do is click on this edit with elementor and we can literally make it look like any website out there so that's what we're going to do just click edit with elementor for the home page and now this is where we edit our website so anything that you click on over here you can edit over here and also anything over here you can drag and you can take this and you can put it here so if you want this heading right here you can click hold and drag and you can put it here if you want an image you can click hold and drag this image and put it somewhere if you want a text editor click hold and drag put it there a button click hold and drag and put it there so everything from this side can be dragged to here and anything that you click on here will be editable over here let me show you what i mean so maybe the first thing that we want to edit is this background image right here to do that we need to click on this whole section right here so we click on it and then it's editable over here so we can click on style to get to the style and we can choose our image so we'll click choose image maybe we want a different image right here we can get free images from pixabay so we can click on it and we can search for any image that we want these are copyright free and you can use them for your website all right and maybe we want to search for something like ocean mountain and maybe we can look and we can scroll and find something that we like and we can obviously choose any of these and press save and insert and that will download it right into your website which is super cool if you want to upload your own image you can also do that by clicking here and then going to upload files and select files and then go on your desktop and we can see right here and we'll go to hero home and we'll open that wait for it to load and insert media and now we have that image in there but we can actually see that this image is too dark it doesn't look like this image and that's because there's a background overlay over it so how do we change that background overlay how do we make it a little bit lighter so what we can do is we can go over here and we can go to background overlay and we can choose the color so this is the background overlay we can see it changing color here so we can add a pink or red or a yellow color overlay and that's super cool because then it can match the colors of your logos or just match the feel or the style of your website but we want it to be all the way black and we want the opacity or how see-through it is not to be one because then you wouldn't be able to see anything but to be really small like 0.18 and that looks pretty good that makes the text pop a little bit more and to me that looks super cool the next thing that we want to do is reduce all of the space this is just too much space and it pushes this text down way too far and i just don't think it looks good and then we want to increase the size of this font and maybe change what this says right here all right so to do that all we have to do is click on this section right here and then go to advanced this is how you change the spacing go to advanced and then we see this padding right here this padding adds space so we want it to be 200 and now it looks right in the middle and that looks much better to me the next thing is let's change this text let's click on this text and let's change it to let's explore and let's change the size of this text so let's go to style and go to typography and for size let's make it 30. that looks pretty good and then for this text let's change it to wordpress so i'm going to caps lock wordpress and to me that looks much much better the next thing that we're going to do is change this button right here we're going to change where it links to and we're going to change its name all right so to do that all we have to do is click on the button once we click on it we're going to get the options over here so let's change the text to contact us and then to change the link all we have to do is start typing in a page name like contact and then that page will pop up and we can select it then i'll put the link in automatically for us now when anyone clicks on this contact us it will link them to the contact page we could also mess with things like alignment so left right or center the size of it or we can mess with a style we can make it have different text color or different background color i think it looks pretty good as it is but i'll show you how to change the background color here if you ever want to save a background color you can either just copy this hex code or press this plus button right here and it'll save the colors for you so i'm going to copy that code and then now we can change the color to any color that we want maybe we like this green here or red or purple or blue or anything that we want we could do it right there i'm just going to go back to the color that i copied so i'm just going to paste it in right there and press enter and and accidentally copied in the wrong color so to revert changes just press this button here and it'll turn back to that red so that's how you change the buttons there's tons of more options here like typography you can change the size of the text or how things are rounded by going to border radius or the padding or spacing in between these buttons by going to padding next if we scroll down on this page we can see that there's actually too much space right here so we're going to remove all of this space to do that all we have to do is click on this icon right here go to advanced and instead of 340 we'll change it to 200 and that will make this entire section look much more balanced and much better the next thing that i want to show you how to do is not just how to edit these sections but how do you create an entirely new section yourself so if we scroll down right here under the about us maybe let's create three boxes maybe they say fast service easy payments and global shipping something that will help sell your customers so that they understand the value of your products or services all right so right here we can use this plus sign to add a new section and then we can click on this plus sign and then we have all these options do we want it to be one column like this up here do we want to be two columns so it'll be split in half like there's one on this side and one on this side do we want to be three so one two three well we want it to be three because we wanted those three boxes right there so let's click on three and what we wanna do is we wanna go over here to all these elements right here and we wanna search for icon because we're looking for an icon box so we can click hold and drag this into any of these different columns but let's just do the first one and then we can change the icon if we want so we can click on it and maybe let's search for a clock and we can select our clock and insert it and now we have a clock right there and now we want to change the heading so we'll click on this and we're gonna say right here we're gonna say fast service and if we scroll down we have these different options how we want to position so maybe we want to position to the left or the center or the right i just want it at the center top and then of course we can link it to any page that we want just by typing in whatever page we want to link to right here just like we did before and if we scroll back up we can go to style and we can change the color of this so let's go ahead and change that color maybe let's make it a nice blue right in there looks pretty cool and we can also change the size of this right here so maybe we want this to be 36 something like that or we can make it much bigger or much smaller but let's just keep it at 36 and then maybe for this box right here we want a little shadow a little drop shadow around it just so it stands out and pops out from the page a little bit more so to do that all we have to do is go to advanced and then let's go down here and let's go to border a border radius of 0 would have really sharp edges a border radius of 50 would have very rounded edges i just want to make it a little more rounded so i'm going to do a border radius of 6. and then if we go to box shadow we can click on this and we can change the shadow of it you see how the shadow right now is really dark we don't want it to look that dark so we're going to click on this right here and maybe we'll take the slider and we'll dial it down all the way to maybe 12. so it's very very light and subtle but i think it looks pretty cool and then for blur maybe we'll put it at something like 15. if we had it very blurry you'd barely be able to see it it would spread out really far if we didn't have any blur at all it'd be very sharp so maybe about 15 is perfect so now it's a very light shadow and to me we can see that there's no space between this box shadow and this icon so let's add a little bit of spacing and that's pretty easy all we have to do is go up here to advanced and under padding we can put 20 that will add 20 pixels of spacing around it alright so that's looking pretty good but we don't want to do all of that work again for each of these boxes so how do we duplicate this and only modify the things that we need to modify so the way to do that is super easy all we have to do is right click and press duplicate and we'll duplicate it again and then we can click hold and drag this entire thing to each of these boxes so just click hold and drag and now we can modify it how we want to modify it so maybe we want to click here and click on this icon and let's search for a credit card and we can click on it and we can insert it then we can add here instead of fast service we can say easy payments and we can do the same thing in this box over here by clicking on it and we can click this and search for globe maybe and this one looks pretty good and we can insert that and here maybe we can put global shipping and next if we don't like the spacing of these we can click on the entire section and go to layout and under content with we can just adjust it right here so maybe we want to be more narrow or longer or maybe we have a specific number in mind like 960. and then this is too close to this right here so we can change the spacing by clicking on this again and going to advanced and unlinking all the values for padding and just putting 160 pixels of space at the bottom and now that's looking pretty even right there the next thing that i want to do is something a little bit more fun if we go down and we see this section right here i think i want to replace this section with a big video background and maybe a customer testimonial all right so how do we do that the first thing is to make this whole background a video background so we can click on this entire section and then go to style and then click on this video right here and then we can open up youtube and we can look up drone footage africa or of course whatever you want all right and we're gonna click on the first video that's fine and we can pause that and then we can just copy this url right here we can exit out of there and we can paste it in right here and then maybe we want the video to start at 21 seconds and maybe we want to end at i don't know 40 seconds so start at 21 seconds play all the way to 40 and then loop back around all right but this background overlay is a little too dark so we want to reduce that so we can go down here and go to background overlay and we can reduce it let's say maybe all the way or maybe 2.2 that looks pretty good and then we can delete all of these intersections just by pressing x and deleting them all right and what we're going to do is add in a custom heading right here so we can click on this elements button and take the heading and drag it in we can center it and we can put in some text maybe we'll put in customer review and after we do that we want to go to style and maybe we want to make the text color white so just drag it all the way to the left corner that looks pretty cool what we'd want to do now is drag in an inner section because we want to control a section independently of this other section so what we're going to do is we're just going to type up here intersection enter and we're going to drag that in and we're going to drop it right under customer review and now it gives us two intersections we only need one so we can right click on this and press delete and within this intersection we're gonna drag in a testimonial so we can just click up here and search for testimonial and just click hold and drag it in right there all right we can go to style and change the typography basically the font size and we can make the font size 15 or 20 maybe we'll make it uh 20. and if we go to advance we can change the padding to 40 so there's space all around it and then for the background we can make this background white so we can make it classic and make it white just so that we can see it for the radius if we look right here it has a very sharp edge but if we go to border and under border radius if we type in six it'll have a rounded border right there let me just put in 60 so you can really see it so that's very round six is just a little bit round and finally we can go to the content tab and we can put in our testimonial right here we could put in i don't know wow that is amazing and put the rest of your testimonial right there then we can choose an image so we can choose image and again you can either upload a file or find one from pixabay i'm going to upload a file here and i'm going to select files and i'm going to find this guy right here and press open then we can insert media and he shows up right there and then i can say the name is jim morrison all right we can also control this intersection right here so we can click on it and we can go to layout and we can make it as wide or not wide as we want maybe we want it to be about i don't know 900 see if that looks good that looks perfect all right that looks pretty cool that looks actually pretty amazing i really like that the next thing that we're going to do is modify this call to action button down here so we're going to change the color maybe change the link change the text alright so let's do it the first thing that i want to do is change this background color just so it pops a little bit more maybe create a gradient all the way across so click on the entire section then go to style then instead of classic background click on gradient and for the first color we can choose any color that we want or we can put in a pre-defined color code this is called a hex code some people ask me what the heck does that mean okay so you can put in your own code you can do four five six e b zero and that will give you a nice blue press enter for the second code we can do a turquoise so we can type our turquoise code in right here 2 3 b 8 b6 and that looks pretty good but it doesn't look great and that's because the angle of the gradient isn't that great so we can change the angle right here and i think about 230 looks pretty good so now that looks much better but i think it'll look a lot better if we change this to some other text so we can change this to how can we help you and then we can go to style and change the text color maybe we want to be white and then for typography we can click on that and we can change that to about i don't know 31 32 alright that's looking much better now let's finally change the button so we can click on the button and we can say we want people to contact us and that's gonna link to our contact page there we go all right so we're all done with that let's click on the update button to update all of those changes and save them so now that they're all updated we can click on this little i to preview our changes and we can see that our website is changed and it has those three different selling points that we do right here it has this really cool video background if we go down here we can see this really awesome call to action right down here and everything is looking really good well almost everything looks good right now the desktop version is perfect but the mobile version of the website isn't perfect but luckily for us in elementor we can change the mobile version independently of the desktop version so let's do that all right so let's just exit out of here and let's click on mobile so this is what it looks like if you're using a mobile phone so right now we can see that maybe this is too big this let's explore we can see that there's a big gap right here and not all the time does video play in the background for mobile devices so we want a fallback image we want an image that will show just in case the video doesn't load and maybe this can be centered right here this looks pretty good maybe it could be just on one line so let's change all of those things it's super simple so starting with this let's explore i want this to be a little bit smaller so we click on it and then we go to typography and we see this little icon right here it's just the mobile icon so we can go ahead and resize this and this will only resize for the mobile version next we can click on wordpress and do the same thing click on style and then go to typography and then increase the size a little bit and that's just for the mobile version next we go down and everything looks pretty good maybe this about us could be a little bit bigger so again we do the same thing we can increase the size a little bit and we can go down and we can see all of this right here that looks pretty good i like these sections there's a huge gap right here and we can do that by clicking on all of this right here going to advance we see that little icon right here so we can unlink these values and just do 60 something like that that should be enough and now there's just a little bit of space and maybe let's put in 60 up here so let's do 60 on the top also and now that looks really good too so right here we need a fallback image because it doesn't always work so let's go ahead and click on this entire section and then over here we can scroll down and it says background fallback again you can choose any image that you want i'm just going to upload a file that i already have pre-selected right here and i'm just going to press open and then insert media and now if this video doesn't load this image will show up so that's perfect let's keep on going down and this needs to be centered i think it would look much better if it was centered and maybe this was a little bit bigger so click on that go to style go to typography let's make that a little bit bigger and let's click on this and we can see that this is mobile only so let's do alignment here and let's click on this and go to style and we see the mobile right there and we can center it and we can center all of these so let's just go ahead and do this all right so now all of that is looking good and it's all centered so that's perfect the how can we help you maybe that should be on one line maybe two i don't know let's see what it looks like so let's go like this and yeah let's make it one line so 23 that's perfect we can update that and now if we look at it on our phone it should look perfect all right so we've learned how to edit the desktop version we learn how to edit the mobile version and make it responsive let's pick up the pace a little bit and edit all the rest of your pages alright so to do that we want to make sure we update it to save all of our changes then we can simply go to the front end of our website by removing all of this and now we can visit any page that we want to edit so i want to edit this about page so i'm just going to click on this about so what do we want to do on this about page i want to reduce the space i think it's a little bit too much so i want to reduce that space you probably already know how to do that and then coming down here i want to make this section a lot simpler maybe make it one column put our story at the top because maybe this about section is about our team and then down here i don't think we need these different sections right here they're pretty cool but i don't think that we need them so let's get rid of that and let's put our team members maybe one team member here one here and one here kind of like that feature box we did on the home page all right so let's get to it let's scroll up that's edit with elementor up here since we're on this page all right and let's first reduce this right here let's reduce the top and bottom i'm sure you already know how to do this you click on the entire section you go to advanced and let's put 160 at the top and 160 at the bottom that looks much more compact and to me it looks much better all right now let's delete this nature's lovers right here that will delete it we'll change this to our story so you can just type it in here for text right here our story and let's click hold and drag that over to this column and let's delete this column right here by right clicking it and deleting let's click on all of this and let's reduce the space up here so let's go to advanced and for padding top let's make it 80 for the top and 40 for the bottom let's check our work real quick that looks pretty good and let's click on this entire section again and go to layout and we don't want it to go all the way across because it's hard to read when it goes all the way across what we want to do is kind of contain the text a little bit more so it has spacing on the left side and the right side and that looks much better so let's make it 800 width we can get it if not just type it in right here and that to me looks a lot better more pleasing on the eye and the next thing that we're going to do is just delete these two sections right here we don't need them so delete and delete goodbye then we're going to add in a new section and we're going to add in three different columns here we're actually going to add a new section right here that's going to say our team so i'm just going to add a plus right here and it's going to be a single column that goes all the way across and then i'm just going to paste in that our team then we're just going to paste in that and we're going to change this to our team then we're going to go ahead and center that and then we're going to click on the entire section and go to advanced and unlink the values and for padding top we're going to do 40 and for padding bottom we're gonna do 20. all right and we're actually going to change this one a little bit in the advanced and we're going to make this 120 and this one actually 60. while we're at it we're going to make the layout with 800 for this one and then we're going to go to the elements right here and search for image and we're going to see this image box and we're going to drag it into the first column all right now we're going to click on choose images and we're going to upload some files so i'm going to upload files and select files and then i'm going to choose these different people right here you can press control if you're on a pc or command if you're on a mac to select multiple files and then press open they're all going to upload here but we're only going to select one file so that one's fine so we'll insert media and she'll be in there right there then we can go to style and we can make the width of this 100 percent so that she's bigger then after that we can duplicate this three times by right-clicking and pressing duplicate right-clicking and duplicate again and then click hold and drag to each of these different boxes and now we have our team but they're all the same person so we need to go ahead and change that and put her name in here put in those names and then change the profile image to some different people insert and click and insert this guy all right these people are wrongly named so uh let's do that again and answer this guy for that and this one for her all right that is much better all right so now we have the r story in our team and that is looking pretty good we can go ahead and update that and then we can preview what it looks like then we can exit out of there and if we just go to the about page we can see our changes and it's looking pretty awesome so the next thing that we're going to do is we're going to edit our services page well right there and we are going to add some images to it so let's go ahead and click on our services page and what we want to do on this page is we want to reduce this space here and here then when we scroll down we want to add images under here to each of these services so this could be like our service 1 service 2 service 3 service 4 and we want some images underneath here so we're just going to click on edit with elementor all right and to reduce the amount of space between here and here you probably know how to do it click on the entire section and click advance we're going to make this 160 on the top and 160 at the bottom next we're going to scroll down and we're going to add pictures right here so all we have to do is click on this elements button and then click hold and drag an image in and now we can choose our image from the image library again you can find these images in the description below or from my website alright so i'm just going to upload files and select files and i'm going to select the files that i want from the gallery images and i'm going to select desert and command and click or control and click if you're on a pc hike safari and stampede there you go and i'm going to open them and i'll just choose the safari for the first one and insert media once i do that we can do some cool effects to this by clicking on it and then going to style and then under hover if we click on it we can see hover animation so when we hover over it it doesn't do anything right now but if we put shrink we hover over it and now it shrinks so we can pulse and grow or we can pop and sometimes it's just a fun way of adding some cool effects we're going to add the float effect just because it's not that noticeable and not too distracting all right once we do that i'm going to again just click here and duplicate this a few times and then i'm going to click hold and drag them to these areas over here and sometimes you have to wiggle it around a little bit to get it to register and so that's just what we'll do all right once we do that then we have to change all of these images so just click on them go to content and choose another image maybe we'll do a stampede for this one and we'll click on this one and choose image maybe we'll do the hike for this one and for this one we can do the desert all right now all we have to do is change the names so i'm just going to change them real quick and we're all done with that and we're all done with that page we can update it and we can view our page by clicking on preview exit out of here take off all this preview stuff right here here's our page we have it now and then when we hover over it it has that cool little effect to it and i think this is looking super awesome all right the next page that we're going to do is we're going to edit the projects page right over there and what we want to do on the projects page if we click on it we want to add a gallery so some images all the way over here so a bunch of different images maybe you have different projects that you worked on and you want to showcase all of your work so that's what we're going to do we're going to click edit with elementor and we're gonna go ahead and click on the entire section because we're gonna reduce the size again up here because i think it's too big to 160 and 160. and then we're gonna get rid of both of these all of these sections right here so one and two we can keep the call to action section that's fine we're gonna click and we're gonna add in a new one column section right here so once we have our one column section in right here we want to add a gallery to it so we can click on these elements right here and just type in gallery and the basic gallery is great so we click hold and drag that in there next we want to add images to that gallery so we just click on this plus then we're going to upload the images and select files and then we have all of our gallery images right here i'm just going to click the first one and hold shift and click the last one to select all of them and press open and they'll all be selected and they're all going to upload all right now that they're all uploaded we can make sure they're all selected and press create new gallery once it inserts we can change the image size to medium and that looks pretty great then we can click on the entire section and we're going to give it a little more space by going to advanced unlinking the padding and going 80 on top and 80 on bottom that will give it some space up here space up here the gallery is looking super awesome so let's click on update once it's updated we can preview the changes and exit out of here and just go to the regular projects page and we can take a look at the new projects page it's looking fantastic we can obviously click on any of these and we can scroll through and it looks really cool so now we are done with the projects page so the next page that we're going to work on is the contact page so let's go ahead and go to the contact page all right and what we want to do on this page is maybe remove all of the space right here compress that down a little bit like before i'm sure you know how to do that by now and then over here we're going to change this uh contact us to we're going to duplicate it put it right here add some social media icons right here show you how to change all this information and then finally on this map right here show you how to change this map and change the settings so to do that all we have to do is click on edit with elementor and first thing first let's change this right here so click on the entire section go to advanced instead of 250 let's do 160 and you can click tab twice and then do 160 again that looks pretty good then we're going to duplicate this contact us so just right click or command click or control click i believe and press duplicate and then click hold and drag and then right here instead of this let's do follow us because we're going to put social media under here all right so we can search for our social media icons right here so let's go up here and search social and then click hold and drag under follow us and then we're going to align this left and you can always add a new one so let's say we have an instagram we can click on it and we can put in a link instagram.com and we can change the icon and we'll search for instagram so there it is and we can insert it so we can also change the shape or the colors or anything like that we can do it rounded or square or circle and that will change up there we'll keep it rounded that looks pretty cool and then we can scroll up and go to style and we can change it to official color to custom if we want and we can change any of the colors so we can make it a nice blue or black that looks pretty good and we can change the secondary color which will change the color inside there and we can also change the size so maybe we want this size to be 20 pixels but maybe we want to keep it the official color so we could just go like that we can also change the spacing a little bit so make it a little bit wider maybe 10 and you have a whole bunch of other options to choose from to make it exactly like you like and there you go that's how you put in your social media icons if you want to change this which i'm sure you do you can also edit this so you just click on it and then for the items for the first one let's click on it we can change the icon if we want but i think that's a pretty good icon so change the text maybe i'll put malibu california for the email i'll put in my email just by clicking on it and putting in email and then the phone number same thing click on it pretty easy stuff all right so it has all of our information that looks pretty good down here is the map if we click on it it'll allow us to edit it well maybe not if you click on it but if you click up here it'll allow us to edit it and then we can put in any address and it'll actually go to that address so there we are and then we can make it zoom in a different way so we can maybe zoom out a little bit and that looks pretty good so we will update and save that of course you can also change the height but we're not going to do that right now but it can be bigger or smaller we'll just keep it at 480. then we can press update because we're all done with that page now we can preview our page exit out of here just go to the main contact by deleting all of that and we can see our new contact page it's working awesome people can click hold and drag around the map they can zoom in or zoom out and that is looking really cool but we're not done quite yet because we have this form down here that we didn't go over and we didn't go over it because it's not part of elementor it's a plugin called wp forms and there's a different way of editing this and controlling this so let's go over that right now so what we can do is we can scroll up and go to the dashboard and then just click on wp forms right here and then click on edit form or just click on the form all right what we're going to do here is we're going to add a contact phone number and maybe a drop down and maybe we'll delete this subject line right here so to delete this subject we can just click on delete right there press ok and then to add a phone number so that we can get our user's phone number we can just add a single line text just click hold and drag and we'll drag it right under email and then we can click on it and we can change it so i'll say phone number and we can make it a required field so that people have to put in their phone number in order to submit the form and then we can go to advanced options and we see it doesn't go all the way across but we can make that large and it'll go all the way across and now we have a nice phone number in there the other thing that we want to do is make a drop down so this will be the department that this message should go to so what we can do is we can go to add fields scroll up and we see a drop down so we just click hold and drag that and now we can click on the drop down and we can go over here and scroll down go to advanced options and make the size large so it goes all the way across we can make it required by clicking on that button and we can change the options for the drop down so maybe first choice is general second choice is tech support and third choice is sales and maybe this will say how can we help you all right so they can choose the category of the help they need send their message and we'll get it in our inbox but how do we embed this form into our page right now it's already embedded into our contact page but if it wasn't all we'd have to do is click on this embed right here and then use a short code and then just copy it by pressing on this button so we copied it we're just copying this code right here exit out of there we can save the form but before we embed that into our website we want to go to settings and then click on notifications and then it's going to ask us what email do we want to send this to so we want to send it to your email address whatever your email address is type in right here and then what's the email subject line i'm just gonna say new website message and then who's it from so this is called a smart tag so it's from the your name field so if we show smart tags it's gonna have the your name field so that's your customer's name so if we click on it it'll add that tag in there it's already in there so we don't need to do that and then it's from it's from their email so if we show smart tags we can add in their email right there and that would add in this all right and who are we replying to we're replying to the person so that's that field right there then in the message that it sends us i want to send all fields so send everything that the user has filled out to your email then we can click on confirmations and this is the message that the user sees after they submit the form so instead of saying we'll be in touch with you shortly we can say we'll be in touch with you in 24 hours all right now we can save it now we can again embed it and click use a short code and copy that and now we can exit out of here and view the new edited contact form by visiting our site going to contact and now if we scroll down we can see this new contact form right here but how would we get it on this page if it wasn't already on the page it's super easy all we'd have to do is click edit with elementor and then what we would do is we would click on the elements tab we would search for short code because that's what it's called this little code that we copied it's called a short code we click hold and drag where we wanted it let's say we wanted it here and then we would paste in that code that we just copied from the wp forms paste it in and then it would show up right here so now we have two of them so we don't need two of them obviously so we can delete that bottom one and now we just have the top one that we just made all right so we can apply changes we can update it then we can go back to our contact page and now we can fill out this information so i'll say my name is tyler my email is tyler tyler.com this is my phone number how can we help you i need sales do you ship to me all right and then we can send message so we send message and we should get that notification message that says thanks for contacting us we'll be in touch with you in 24 hours so that's the message that we changed and now if we go into our email we should see that message and we can see our message now and it has all the fields in there and we can contact them or reply back the message is new website message if we click reply it should go to that email that we put in there and then we can reply back and start a conversation with your user every once in a while this does go into spam so you want to check your spam folder and just mark it as not spam so now we can exit out of there scroll up and that's how you control your entire contact page the next thing that we're gonna do is we're gonna make this a contact button right now this take action button doesn't do anything and this button should be our most important button on our website because it stands out the most so we're going to remove this contact and we're going to move it right here of course i'm also going to show you how to change the color of it and how to remove it completely if you don't want it on your website the first thing that we're going to do is copy this contact page url so just copy it and then we're going to click on customize and then we're going to go to header and we're going to click primary menu and we can see for button if we don't want it there we can choose none we also have a few other choices like a search icon or just text or html which is code but we're just going to leave it button and it only looks like this because there's not enough room so it won't look like that on your real website so now for the button text we want it to say contact and for the button link we want to paste in that page url address that we copied before so i'm just going to paste it in there and then now we can also change the colors for that so we can scroll down and click on customize button style so just click on that and we can change the color of it but know that when you change this color other colors are going to change too so this color would change too so we can go up here and we can click on the color and click on it again and i'm just going to copy this color code so that i don't lose it but basically we can change any of the colors right here so maybe that looks pretty cool and we can scroll down and we can see that it actually changed this color also and we can also change the hover color and everything like that but we're just gonna revert back to the way that it was or we can click on it and we can paste in that color alright so that is how you control the navigation button but we're not done yet because we have to remove this contact navigation menu item so the way that we can do that is we can go back and back again and before we change the navigation through the dashboard on the back end but we can also do it here so we can go to menus and we can go to this menu right here and if we see contact this one this one actually refers to this so we can go here and we can press remove and that will remove it so now it's looking really nice so finally we can press publish and we can exit out of there and now if we go to the home page or any other page and we want to contact you we can click on that and it'll go straight to the contact page the next thing that we're going to do is we're going to create your logo and we're going to insert it right here so we're going to create it on another website it's going to be super cool we're also going to create two versions of your logo and something called a fav icon the fav icon is this little icon right up here that basically is the icon for your website so it's super cool just to have something personal and custom up there so let's see how to make this the two different versions of your logo is for the transparent version that would be right up here on these transparent pages and for something like the blog page we need a black version for this page because it has a white background all right so let's go back to the home page and let's open up a new tab and let's go to logomaker.com that's l-o-g-o-m-a-k-r without the e dot c-o-m and press enter because i've already started a design i'm just going to say create new design but you probably won't see this so just create a new design if that's here then we're going to exit out of here and now we can search for over 1 million graphics so i'm just going to type in mountain because that's what i want and the first one seems fine so let's just click on that one all right so once we have our mountain in here we can easily change the color right here to anything we want i'm going to keep it black and i'm going to move it over here then i'm going to resize it by click holding and dragging the edge to resize it a little bit smaller and then i want my text over here so i'm going to click on the text and i'm just going to type in mountain we can click hold and drag to position it and we can do it right there and then we can make it bigger and we can drag it again and we can also change the font so maybe i want this font to actually be proxima nova right here so that looks pretty good and then i'll make it maybe a little bit bigger and position it again so that's looking pretty awesome i want both of these to be black so i can just make a selection on both of them and then make them both black and i want to save that version so i'm just going to save that right here i'm going to say no thanks download file so we have the black version right there and then what we can do is we can exit out of here and now we need the white version of this logo so we can highlight everything and make it white we don't see anything right now but it's there so we're just going to press save and now we have the saved white version all right and now there's one more that we need to save so i'm just gonna make this black again so that we can see it and i'm gonna click on this and i'm gonna delete it by pressing delete or we can click this little trash button right here then i'm gonna click hold and drag this to the center make it a little bit bigger or smaller and what i'm going to do is i'm going to crop this i'm going to exit out of here and here and i'm going to go to this crop button so we're doing this for the fav icon it needs to be in a certain dimensions so we can click hold and drag and let's say we want it to be about 128 by 128 so we're going to get this to 128 by 128 and that looks perfect then we're gonna click on this and we're gonna check it say okay apply crop but then we're gonna resize this to be perfectly in the center so we're gonna resize this as big as possible and that looks pretty good so we're gonna save this also so we're gonna save this and we're gonna say no thanks download so now we have the black version the white version and the fav icon now let's upload these to our website so let's exit out of logo maker and let's go to customize and the first thing that we want to do is we want to get rid of this old text so i'm going to click on header then i'm going to click site identity and then i'm going to scroll down here and where it says display site title i'm going to uncheck that that's going to make it go away and then i'm going to click back and go to transparent header because this is a transparent header right here so transparent header and then i'm going to select the logo so i'm going to select image then i'm going to select my white logo which i believe is this one so i'm going to upload files and go here and put it there and i'm going to choose image and it'll show up right there if it's not the right width we can adjust this width but 250 is great for me and now that i'm done with that we actually do need to change it for the pages that don't have a transparent header so like the blog page so we need to go back and go to site identity again and now we're going to upload our black logo so select and upload files and drag in the black version and then we're going to select it and skip cropping and now it's on there but we don't see it because we're not on the page right now and now if we scroll down it's asking us do we have the site icon and we do so that's the icon that goes up here so we're gonna select it and we're going to upload files and we're going to select the last one then we're going to press select we're going to skip cropping because we don't need to crop it and now that little logo is up there and that is super super cool all right once we're all done with that we can exit out of there and we can click publish and exit out of there and now we have our logo up here and if we go on the blog page we have our other logo and that is looking super super good alright so that is how you create and insert your logo the next thing that we're gonna do is we're gonna design your blog so we've already entered in your blog post right here and if we click on your blog posts we can see that your blog posts are here but they're not designed so we copied and pasted all this bolding all these links and everything like that so maybe we want to be a little bit different maybe we want an image down here maybe a list down here maybe we want to add a button down here somewhere and maybe this blog post on the top can have a featured image up here and maybe we can also learn how to put in different subheadings so let's learn how to do all of that all right so all we have to do is click edit blog post or from the dashboard we can click on posts and if you wanted to add a new post you'd click add new but we're just editing our post so we're just going to click on our post and now we can edit our blog post the first thing that i want to do is maybe add an image so let's add a little bit of space and we hover over with our mouse and we see this plus button so we can click on the plus button and we can choose image and that'll put our image right in there and then from the media library we can either upload files or get it from pixabay or select from our library and maybe we want to enter in this desert right here and press select and that will put it in right there the next thing that we can do is we can make a sub headline so we can just highlight this right here and we can click on this and we can go to heading and it'll create a heading so we can make it h2 or h1 h1 is usually the main heading h2 is the second heading that usually you would use on your pages for subheadings and then h6 is the smallest heading so largest smallest this is the one you probably want though right here alright and then we can also bold things by clicking and highlighting and press bold we can also make them a link by clicking and then adding a link maybe this is a link to about page just type about and we can select that page and this is all super easy just like microsoft word or google docs we could also make a list if we want so maybe we want to list down here somewhere so we just add some space see the plus button and we can make a list alright so there's our list and maybe we also want a button so maybe we'll make a space for button over here and we can add the plus and we can browse all if we want to see more and we can search for a button and click on it so then we can add in whatever we want like contact us to learn more and we can also make that button a link so that can go to the contact us page all right so there we have it there's a ton of more stuff that we can do but that's the basics it's pretty simple next let's add a featured image up here and now also show up on our blog page so let's click on this right here the settings and go to post right here and then under featured image we can set the featured image so maybe we want this mountain down here to be the featured image and just click set featured image then we can update that and we can preview that blog post we'll preview it on the desktop and we have that featured image there the new image the new sub headline that bolded this link right here and this link all the way down here and this list so it's looking pretty good if we go back to the blog page and exit out of here we can see that that featured image is displayed on this page so that's pretty cool let's add another featured image to this blog post right here by clicking on it and then just clicking edit post and then going down to set featured image and let's search maybe for that elephant and set featured image all right then we can update that and then we can preview it exit out of there and we can see that featured image right there and if we go back to blog we can see both of our blog posts with that featured image but what if we don't want these featured images here and we want to change the content that's on this page how do we edit this blog page right here and it's super easy all we have to do is go to customize right here and then just click on blog and then click on the blog archive so here we can turn on and off the featured image if we want i'm going to keep it on though we can also turn on and off if the comments are here so this would say like three comments if we had any comments we can also click on and off the category and the author so i'm just going to remove the category and we can also change the width of it so if we want it to be a custom width we can change that too we can make it very thin if we wanted to but i'm just going to revert back to the normal size all right so that's how you edit this page there's also some more options down here like what kind of font you use and things like that but that looks good to me so i'm going to click on publish then i'm going to exit out of there and now we're done designing not only the blog posts but also the blog page all right the last thing that we're going to do is go back to the home page and what we're going to do is we're going to edit your footer your footer is at the bottom of your website right here so i think what we're gonna do is we're gonna make this font bigger maybe change this text right here maybe we'll add in some links because if someone gets to the bottom of your website maybe you want them to have some links so that they can navigate around your website rather than just leaving and then we'll edit the contacts section down here and finally we'll remove powered by create a website we'll take this and we'll put it in the center right here so all we have to do is go into the dashboard and then under appearance we're gonna see header footer blocks and click on that and where it says site footer hover over it and click edit with elementor all right so now i'm gonna change this about i'm gonna make it instead of an h5 which is smaller i'm going to make it an h3 which is bigger and i'm going to do that to all of these right here so just make them a little bit bigger with this contact too and then for this one i'm going to type in site navigation site and for our about i'm going to enter in something else i'm going to type in learn how to create a website with wordpress step by step all right then what i want to do is add links right here so i'm just going to click on this and press delete and then up here i'm going to search for navigation choose the second one and i'm going to click hold and drag underneath here then for the layout i'm going to choose vertical so it goes up and down then i'm going to go to style and change the color to white so text color make it white for the hover when you hover over the links i'm going to make them red so i'll choose maybe this red and now when you hover over it it'll turn that red and then we're gonna view this on mobile to make sure that it's okay so we'll view it on mobile and it collapses here so we don't want that to happen so we'll go up here and go back to content then layout and when we see breakpoint we're gonna choose none all right so that's looking pretty good let's go back to our desktop view and let's go back to the contact section and let's edit some of these so i'm just gonna put in all this information then the phone number and the email that's all looking really good except for this powered by create a website we don't need that there so let's delete this column by clicking on it and pressing delete and then let's center this by clicking on it and making it go into the center all right so now our footer is looking great let's update that let's preview it and exit out of here and now this is just previewing our footer so what we want to do is just go back to our main website so we can just remove all of this right here and go back to our main website and if we scroll down all the way to the bottom we're gonna see the new footer and it is looking super super great all right there's one more optional step if you want and that's logging out of your website you obviously don't have to do this but i like to do it so what you can do is you can go over right here and you can press log out and you'll be logged out of your website of course if you want to log back in you just go forward slash wp dash admin but i want to log out completely and now i'm viewing the website like a visitor would view it and it is looking awesome so now we are done with the entire website congratulations you guys should be super proud we did it all step by step with no steps skipped so please remember to comment rate and subscribe and if you know someone who wants to create a website please send this video to them i'm tyler moore thank you so much [Applause]

Channel: Tyler Moore

Views: 1,035,296

Rating: 4.9413538 out of 5

Keywords: make a website, build a website, create a website make a wordpress website, build a wordpress website, create a wordpress website, wordpress, website, wordpress website, elementor, astra, astra theme, theme, design, how to make a website, wordpress tutorial, tyler moore, wordpress website for beginners, wordpress tutorial for beginners, wordpress tutorial tyler moore, web design, how to make a wordpress website, word press

Id: VnjeR-bsRM4

Length: 118min 13sec (7093 seconds)

Published: Mon Jan 04 2021