How To Make an Appointment Booking Website

hello my name is tyler and today we're making an appointment scheduling website this is where all of the magic happens and just look at it look at it look at it wow this is beautiful now obviously you don't need to make the website look exactly like this you can choose from hundreds and hundreds of different designs and mix and match to literally trillions of different designs but i think this website is looking really good and i'm going to show you how to make this exact one step-by-step with no steps skipped this website is great for anyone who needs to book an appointment so maybe you're a consultant or a dog groomer or a lawyer an accountant a doctor a therapist a dentist a dermatologist a salon a trainer do you need to set up a regular meeting or a zoo meeting or anyone who needs to make an appointment and let's be honest that's pretty much everyone these days i'm going to show you how to do it step by step with no steps skip so let's begin let me show you how it works so obviously the design can be any design that you want but i'm going to show you how it works right here so the person on your website can choose a date so once they choose a date right here let's say they want it to be the 20th then they can choose a time right here so they can choose a time i want it to be at one o'clock p.m and then click next step it's super easy for them to schedule an appointment with you so all of these different options are optional so you can have your services here if you want so they can book what type of appointment that they want so we can check off some of these and we can scroll down and we can click next you can also attach a price if you want to but it's not necessary and then we can click on next once we do that it's super simple we fill out all of this information and then we click next all right it's going to confirm all of our booking information we can send a note right here and we can scroll down and hit finalize and that will finalize it and we'll get a confirmation email and this cool booking number right here and now we have all of that information right here and as the admin you also get an email telling you that someone booked an appointment and then you guys meet with your appointment and do your thing all right so what are we gonna learn we're obviously gonna learn how to put this booking scheduling appointment on our website but we're also gonna learn how to make this entire website now you can obviously make this look however you want and i'll show you how to choose from all these different designs but in this tutorial i'm going to show you how to make this logo all of this top bar up here this button up here how to get all of this design in here and how to control all these designs so you can obviously put in your own content i'm going to show you how to put in this section and this section it looks really awesome super color coordinated how to control these testimonials and put this in right here if we scroll down i'm going to show you how to put in this footer right here looks super cool and if we go back up i'm going to show you how to put in this about page we're going to put in this image and this picture a little message from the founder obviously you can change all of this these three sections right here a really cool picture maybe a link to a video we scroll down we're gonna make all of this then i'm gonna show you also how to make this services page all right so we're going to put in the services page and all of this a sliding little thing right here looks super awesome super cool we're going to do all step by step we're actually going to skip the projects page i don't even know why that's there but i guess you can add that if you want to but we're going to skip that we're just going to go straight to the contact page and i'm going to show you how to put all of this in this contact form so people can fill it out and they can contact you so this website is really about people connecting with you scheduling an appointment filling out this contact form it looks super awesome we'll show you how to put in this map right here and everything like that basically i'm going to show you how to do everything step by step with no steps skipped we're going to make this entire website everything from getting your website name all the way to making your logo making this form making everything on this website all right i think you guys are going to love it so let's begin all right the first thing that we're going to do is get your domain name your domain name is your website name so my domain name is tyler.com facebook's domain name is facebook.com your domain name will probably be yourwebsite.com yournonprofit.org that's your domain name also known as a url a domain name a website name they're all the same thing it's a domain name your domain name cost about fourteen dollars maybe thirteen dollars a year it fluctuates here and there but there's really no way of getting out of that cost you have to have a domain name you have to have a website name in order for people to type in something to go to your website all right and by the way there are only two things that cost money in this entire video and that's your domain name and hosting everything else is free the second thing that we're gonna be doing is getting hosting hosting is about ten dollars per month but i'm going to show you how to get a discount so these are actually much less expensive so if your domain name is basically your website name the thing that you type in what is your hosting your hosting is a computer that's on 24 hours a day that holds all of your content it holds all of your images it holds all of your text it holds everything so basically if you only had a domain name if you only had a website people can type it in but none of this would show up none of this right here none of these images would show up because there's no place online to store all of this information so hosting again is a computer that's on 24 7 and has super fast internet and holds all of your text your images and everything like that the next thing that we're doing is installing wordpress that is free wordpress is what's called a content management system it helps you manage your website content so instead of having to know html and css and all this nerdy stuff that takes up a whole bunch of time it does it all visually for you it saves so much time and it's the most popular way in the entire world to make a website places like shopify weebly wix squarespace don't even come close to the popularity of wordpress so here we can see some really awesome people who use wordpress like the new york times cnn forbes best buy sony ups and gm and if we scroll down we can see other cool people like jay-z and katy perry so that's wordpress the best in the entire world the next thing that we're going to be doing is making your actual website you're going to be doing all of the fun work and the labor so that is also free even though that would cost you thousands and thousands of dollars to have a web developer create this website for you and honestly i don't even know if it would be as good as you doing it yourself because we spent a lot of time figuring this out right here we made a spreadsheet that was pretty boring to do and we found all of the solutions for scheduling an appointment and this was by far the best most simple easiest most elegant most perfect best design one that we could come up with all right so the total cost of everything with the discount is about ten dollars per month or and i think this is a better option thirty dollars a year so thirty dollars to have this appointment setting website distributed across the entire world or about three dollars monthly i think is a fantastic deal so let's do steps one and two luckily we can do them at the same place we can do it at hostgator.com h o s t g a t o r dot c o m and press enter so i do get commission for recommending host gator so if you use hostgator thank you very much i really appreciate it but i've been using hostgator for 15 years way before i was making any youtube videos and i just really liked them mainly because of their live chat so if you ever have a problem you just live chat with them and they'll fix that problem super easily for you there's also 7 365 phone email and again live chat support and i just think that you guys are pretty awesome so let's get to it [Laughter] all right so we have all these options hosting pro hosting essentials domain support and we could use pro hosting but this is just way too much stuff and we can always upgrade later so we don't really need it so we're just gonna go with the hosting and we have these three plans right now shared hosting website builder and wordpress hosting now you think that you use wordpress hosting because it's wordpress hosting but actually it just costs more and it has all these extra bells and whistles that i don't think that you really need and you can always upgrade later so we're just gonna go with the shared hosting so just click on shared hosting and if we scroll down we can see that there's three different plans here the hatchling plan and the baby plan and the business plan but if we look at this price right here it's 275 a month i have a secret if you go up here and you go to forward slash unlock u-n-l-o-c-k-u-n-l-o-c-k and press enter it's the same page but that goes down to 2.57 a month so now you've just saved a whole bunch of money or at least a little bit of money so again we have our three plans here the hatchling plan the baby plan and the business plan the business plan is just way too much we don't even need to think about it it's just too much we don't need it 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 domains so you can have like yourwebsite.com yourmomswebsite.org yourbusinesswebsite.net yourfriendswebsite.com you can have as many domain names on a single hosting package that you want where the hatchling plan you can only have a single domain name but of course you can always upgrade later so if you're just starting out with a single domain name a single website name and i'll definitely go with the hatching plan all right so that's just what we're gonna go with we're gonna go with the hatchling plan so just click on buy now unless of course you have multiple domain names already then you do the baby plan but really you're probably only developing one website at a time so hatchling plan buy now now this is where the magic happens as they say we have two options we can say i already own this domain or i'm registering a new domain you choose i already owning this domain if you got a domain name from somewhere like godaddy.com so all you would do is click i already own this domain and type it in right here i already own it.com or if we're registering a new domain like i'm guessing most of us are you would click register a new domain and type that in right here once we do that we're going to get some options up here the com the online site store website tech space hostnet club info and basically this is the extension to your website like most websites are mywebsite.com but sometimes this dot com isn't available so you choose another extension some popular extensions are the net the org and maybe a cool extension is something like a dot space so if your domain name isn't available maybe you would be creative with the extension or maybe you can change the domain name a little bit so that you can get the dot com which is the most common and most popular so i'm just gonna go with the dot-com because that is available it's gonna make sure that it actually is available then we're gonna see all of this right here in addition to your website you can add on more obviously i think they just wanna make money and it's not like someone's gonna steal your idea or anything so i really don't think that it's necessary at all so we're just gonna skip all this and we're gonna scroll down and we can see right here this domain privacy protection now what this does is usually when you register a domain name or register your website name that information like your name your email address and your phone number gets registered and sometimes people they look up that information and they'll email you or they look up that information and they'll call you trying to sell you on some web services that are complete bs and it's basically just spam so you want to make sure that this is checked if you definitely don't want any spam calls but if you're like me and super cheap and you don't mind a few spam calls you can save 15 per year so i'm gonna uncheck this right here and i'm just gonna know that i might get a few spam calls and it might be a little bit annoying but i will save fifteen dollars a year all right next we're gonna scroll down and again it's going to ask us the package type we already chose hatchling unless we didn't and we want unlimited domain names or unlimited website names then we would choose the baby plan but the hatchling plan for a single website is great then we're going to go to the billing cycle now this is where the strategy gets involved because we can save the most amount of money by choosing correctly now if we want to save the most amount of money up front then that would just be the one month plan but because the discount only applies for that one month you wouldn't be saving the most amount in the long run so it really is about balancing how much you pay up front with how much you pay over the long run and i think the best balance between both of those is the 12 month plan because on the 36 month plan you'll be paying the most up front but the least in the long run but the one month plan you'll be paying the least up front but the most in the long run and i just think the 12-month plan with 76 off has the best balance out of both of them you're only paying 2.58 cents a month where the three-year plan you're paying you're paying 2.57 a month so i'm just going to go with the 12 month plan fill out all this information put in a password put in our security pin enter in our billing information so like your first name last name phone number address country state i am in california and zip code then we're going to go up here and it's going to ask you do you want to pay by credit card or paypal so just type in your credit card name your credit card number don't worry this isn't a real credit card number and your cvv code in your expiration date once that's all done we can scroll down and it's going to ask us about additional services and i can just make it really easy for you no no no no and no but really let me explain it do we want ssl our website already comes with ssl which is basically just security for our website so we don't need it so make sure that that is not checked do we want site lock essentials this is just protecting you from hackers but we can always download something to our website that does that so i'm going to save you 24 a year and we're going to uncheck that do we want professional email i personally think that if you were to get professional email it would be from google rather than microsoft and your website already comes with basic email so i really don't think that we need this and do we want to back up our hard work i'll show you how to back up your work and we can save 24 a year my god we can uncheck that and then it's asking us do we want to improve our search rankings with hostgator seo tools i don't even know what that is or what they would do so we definitely want that not checked then enter in our coupon code make sure it says unlock right here unlockk and click validate and now we can review our order so we have 24 7 365 live phone chat email support which is free instant account activation whatever that means money back guarantee for 45 days that's nice and registering a new domain so we're registering our new domain for a year it'll automatically renew and we have the hatchling for 12 months for a total of 31 now this might be 30 to five dollars it should be somewhere in there and i think that is a super great deal less than three dollars a month to have your website to the entire world so that's awesome you can click i have read to the hostgator terms of service and click checkout now so congratulations we've done the hardest part which is just deciding that you want a website after you check out you're going to see a page like this that allows us to install wordpress so that's exactly what we're going to do so anywhere it says install wordpress just say install now after we click on it it's gonna ask us the version just keep it as it is the protocol just keep it as it is and your domain name i have a lot of domain names but you probably only have one so i'm just going to choose the learn how to create a website now we want this directory right here to be blank nothing in it because if you do have something in it it's going to install it on yourwebsite.com forward slash something instead of just yourmainwebsite.com then we can give a site name and description so this site name would usually be your business name so i'm just going to say make a website and for the description this would be the thing that describes your business and we can always change it later it's not really a big deal right now but if you're a plumber maybe you'd put los angeles plumber i'm just gonna type in learn how to create a website and then we scroll down and we see the admin username and password i'm just gonna put in my name for the username you have to remember this so maybe write it down and for the password i'm gonna hide it right now and type in a password all right and for my beginning email address i'm just gonna say tyler learn how to create a website.com you can choose your language i would suggest not selecting any of these plugins right here and we don't need to select a theme yet right here i do suggest putting your email in here just in case you lose your login details but you should have written them down already and then i'm going to press install that's going to install wordpress it used to be a very hard thing to do but now it's super simple all right now it says congratulations the software was installed successfully so we're gonna see if our website works so all we do is click on this link right here and as we can see from this sad face the website doesn't work and that's because the website takes a little bit of time maybe 10 minutes maybe an hour maybe two hours sometimes up to 24 hours even though it's pretty rare for your website to spread across the entire internet and become available everywhere in the world so i'm just going to close this page for now and i'm going to take a little break right now and when i come back hopefully the website will work all right so we're back it's been about an hour which is probably too long but we can now check our website and we can see that our website works it's not a very good website it's not a very impressive website but some people would charge you a lot of money just to make this just to have your website online without really even doing anything but this isn't very fun we need to log into the back end of our website to make some changes but right now we can't explore we can click on some hello world blog post and we can see it and that looks great everything looks good but it's not really that great so how do we login to change things we can easily do that by going up here and going to forward slash wp dash admin wp-a-d-m-i-n and press enter now we don't really need this up here so we can close this and we're going to use the username and password that we just made so mine was tyler and my password then press login all right so we've logged into the dashboard this is called the dashboard it's where you log in and you can make all of your changes we can also visit our site again by clicking up here on our business name and that will take us to the front of our website again but we can tell that we're logged in because we have this big black bar up here and that's basically how you know that you're logged in you can always get back into the dashboard by clicking on your website name again and that'll take us back into the dashboard the first thing that i like to do is get rid of the pre-installed programs or apps in wordpress they're called plugins so if we scroll down here we see this is pre-installed this is pre-installed this is pre-installed but i like it when everyone starts off on a clean slate so to get rid of these unnecessary plugins all we have to do is click on plugins over here then scroll down check off everything go to the drop down press deactivate then apply that'll deactivate all the plugins but now we need to delete them so click on this again that will select all of them and go to delete and apply then press ok and now all of these plugins or programs that were pre-installed onto your website unnecessarily are deleted so the next thing that i like to do is go back to the dashboard and see if there are any updates so it says updates 2 right here and if wordpress had any updates it would say it right here and we can update wordpress if we scroll down we can see that these themes need to be updated but we're not going to be using these themes which i'll explain in a little while so we can either update them or not update them it doesn't really matter i'm just going to update them so i remove this annoying 2 right here all right so everything is updated i want to do a couple more things including showing you how to change your password if you want and updating the permalinks so to change your password we go to users and we can just click on our name and here we can either add users like up there or we can scroll down if we wanted to we would uh set our new password all right we don't need to do that because we already set our password but it's just super handy if you want to give a login to somebody else you can add a new user right here the next thing that i like to do is change the permalinks let me show you what that is so if we go up here on our website and visit our site and we click on hello world we can see the link structure so it says our website dot com forward slash 2021 forward slash zero one zero six slash hello world that's a little bit too complex for me i want to just say our website dot com forward slash about or forward slash contact or forward slash hello dash world and to me that's a lot easier so we're going to change the permalinks the structure of the links so we can go back into our dashboard and then we can go to settings and we can go to permalinks once we do that we can just click on post name instead of day in name and then we can save changes then we can go back to the front end of our website and we can go back to that hello world and now we can see it's much more simple it's website dot com forward slash hello dash world which is much easier all right so this website is looking fine but it definitely isn't looking great so how do we make it look great and basically this is the theme of our website so the theme has this green it has this title up here it has this headline up here and that's the theme of your website i want to show you how to install a new theme that is much better than all of this that allows you to control your website and make any design that you want it also comes with a whole bunch of starter websites so to install a new theme all we have to do is go back into our dashboard and then go to appearance and themes once we do that we're going to click on add new then we're going to search for astra that's a-s-t-r-a i think this is the best theme then we can see it we can go to details and preview to make sure it's actually good 5 stars almost 5 000 ratings i think it has over a million installs then we can click on install it doesn't look that great here but it will in a second and then we're going to click activate all right that will activate our theme if we go back into the front end of our website we can see that the website has changed we have our title now up here we have our sample page over here we have our hello world here and here and we have this sidebar obviously this doesn't look great this is just the blank theme so now what i want to do is i want to install demo content onto this blank theme and that's going to make your website look super awesome all right so let's go back into the dashboard and then go to plugins and add new so what plugins do is they extend the functionality of wordpress it's just like having an app on your phone or a program on your computer you can install thousands and thousands and thousands of plugins that people have made absolutely free on wordpress and that's the beauty of wordpress that's why it's so much better than everything else because anyone can build something for wordpress that you can use so for this plugin it is called starter templates t-e-m-p-l-a-t-e-s and this works specifically with the astra theme so we can see it right here 800 000 active installations five out of five we can go here to look at more details so if you're ever installing a plug-in you can look at the details you can see how to install it which is what we're doing now we can see the description we can see the screenshots which will show you what it'll look like we can see the ratings and so this just helps you choose the different programs choose the different plugins that you want on your website so all we have to do is click install now and then click activate once we've done that we're gonna see the starter templates in the sidebar right here and it's gonna ask us to select a page builder but how do we know which page builder to select is it elementor is it beaver builder is it gutenberg is it breezy one of these is the clear winner and is much better than all of the rest and that is elementor so we're going to click elementor and now if we go up here and we make them free all the free ones we can see all of the different designs that we can choose from and we can mix and match these into trillions of different designs and obviously we can design anything ourself also and add to any of these designs so which one do we want and this is the one i'm gonna choose right here this roofing service but obviously you can do whatever one that you like and i'm going to show you how to make it completely different so now all we have to do is import complete site click on import if we already imported something we can check delete previously imported site and it will delete it but we haven't so i'm just going to press import and now it's importing all of the different plugins that we need all the content all the different menus all the different logos of course you can change and we're going to change all of this but it's going to save us tons and tons and tons of time this might save you 10 hours of time all right now our import is complete and successful it took a few minutes so i'm gonna click on view site and we can exit out of here and now we have a complete very cool website right here and it is looking really awesome probably not the website that you personally want to make but so far for the time involved is looking really cool so we have all of our different pages here like the about us page and we can check that out and that is looking really good we have a services page also looking very good maybe our services can go on here we have a projects page maybe our different projects would be able to go on here we have the contact us page where people can contact us i'll show you how to put this in there we have a little map right here and this is looking pretty awesome we also have this get a free estimate it doesn't do anything but we'll make it go to another page if we want so we can go back to the home page and we have all these different pages and this entire design right here but you don't want it to look like this we actually want to edit our design and make it look much better and make it customized to your business obviously so that's super easy to do all we have to do is click up here edit with elementor so whatever page that we're on we're gonna see this edit with elementor button and all we have to do is click on it all right so now we have our entire website that is editable we don't see the very top the header of the website because that's not part of the page and i'll show you how to edit that later but right now we have all of this so anything that we click on right here will be editable over here we can also drag any of these things like we can drag this intersection here or this heading up here and drag it over here or this image over here and we can drag it over here and we can add to the website the other thing that we can do is we can control entire sections so we do that by this up here we can see this and we can click on it it's going to tell us we can also right click but if we click on it and then over here we can control this section so anything that you click on here is going to be controllable over here so we click on this and we can control it we click on this and we can control it and we click on this and we can control it so anything that we click on any of these buttons or anything any of these different sections we click on it and we can change it super easy if we scroll down we can also add other sections so we scroll down and we see this plus button and we can add sections with one column which would be something like way up here the column goes all the way across we can also see something like two columns which if we go up here we can see that this is one column that she's in and this is another column that the text is in so that's two columns if we go down we can also see three columns which is something like this one two and three so we can add our different sections right here but let's exit out of there let me show you some other things that we can do we can also click on this s right here and again if we go to free we can add any of these pages to this page so let's say we wanted some parts of this page into our main page all we have to do is click on it and import it and we'll have this entire page in our current page we can also go to blocks and add different sections to our page so let's say we like this quote right here all we have to do is click on it press import block and that will import this we have this now in here we can also take this entire section and click hold and drag it somewhere else maybe we want this right here and we have that quote right there this is a super cool way of making a website just searching for the different sections that we need and then importing them is super awesome but obviously we can change any of these individually if we want to we can also exit out of these so if we don't like this we decide we don't like it then just click x and it exits out of there so that's super cool let's see how to edit some things we can click on this right here this text and we can edit it right here or we can click on this right here and we can edit it here or maybe we can click on a button and we want to change the color so when we click on a button we're going to see these three tabs up here content style and advanced the content is like the text and the link so we can change this text to contact us so all you have to do is start typing in contact and that will come up and now when people press this contact button it will go to the contact page we can obviously also change any of this text here by just going in here and changing it we can also change any background so maybe we don't like this background right here we click on this and now it gives us those three tabs again layout style and advanced so we can go to style and we can change the image so maybe we don't like this image we want to choose a different image and we can either upload files get it from our media library so everything already on our website or we could get free images from pixabay this is a copyright free image source so maybe we want to search for something like a mountain and maybe we like this one right here so we can click on it and we can save and insert and now we can see that image right there but it's really hard to see because the text is so light so something that we can do is we can scroll down and go to a background overlay we're going to overlay a color on it so we can click on classic overlay and we can choose our color let's make it black and then we can make it darker and now we can see that that looks pretty cool maybe not that cool though but we can also go up here and we can change it to a different image so if we go to free from pixabay maybe we need something a little bit darker like night sky we can go ahead and click on it and save and insert and then we can go back down and change that background overlay to maybe something a little bit lighter or a little bit darker and that is looking pretty cool so there are tons and tons of ways that you can edit your website let me show you a few more examples maybe under here we want an image of some nature right here so we can go ahead and click on this right here and then we can click hold and drag anything from here anywhere that we want so maybe we want to under this why choose us and then we can again click on style and we can change the width of the image maybe we want it to be that wide we can go to content and we can choose the image and we can go to the free images again and maybe we like this image right here so we'll save and insert it and now we have a very cool image in right there so we can do that with almost anything we can go up here and we can drag in a heading or an image or a button put a button in right there and then for the content we can make it center for the style we can change the style of it so like the colors so maybe we want to change the background color to something else like this nice blue right here or maybe we want to add in something else we can put in a video so just click hold and drag in a video and you can add and edit tons and tons of things we can also click hold and drag different columns and rearrange them another thing that's super important is the spacing so we can click right here and we can go to advanced and we can see the spacing so this margin and padding is spacing so maybe we wanted more spacing right here or less spacing and we can also see for the bottom of this entire section we could do more or less spacing so maybe we wanted a little bit more and that will give us more spacing and the best way to learn is really just to dive in and start playing with it but it would take hours and hours and hours to recreate the design that we made in the intro so what i want to show you how to do is actually how to import an entire design and then edit it from there but before we do that we're just gonna update these changes so update all the changes that you made and we're gonna preview them then we can exit out of here and just go to the home page by removing all of this and we can see those changes on our website so that is looking pretty good pretty weird but basically that is how you edit your website but we didn't come here for just any website we came here for a booking scheduling appointment setting website so that's what we're going to build now so we can choose from a whole bunch of different designs and we can change the designs as you saw but i don't recommend changing your design right now and that's because we want to put all the raw material on your website first before you start playing with the design but i just wanted to show you how you could change the design right now if you wanted to but i actually made my own template that you can modify further for this website and you can download the link to those templates below in the description but basically if you open up a new tab we can go to that link and we can download a zip file so i'm just going to drag that to my desktop and close that once i do that i'm going to exit out of here and then i'm going to go back into elementor so edit with elementor and now i'm going to go down and scroll down the page all the way until i see this folder right here now i'm going to click this folder then i'm going to go to my templates and i'm going to upload that zip file so just upload it right here import template click hold and drag it right into this box right here now it's going to take a little while to load because it's loading all those images and the text and all the colors and everything like that and it's also not going to look perfect because we have to change some more settings and now we have all of the templates that we made right here and it took us hours and hours probably 20 hours to make these diff to make these different templates right here but obviously you don't need to use this design it could just be a starting point or you can use any design that you want all right so we have our appointment home right here and all we have to do is insert it again it's not going to look right and we could just press yes but it's going to be a good starting point all right so once we have our template in there there it goes it doesn't look exactly right the colors are off we're going to exit out of all of these other ones and now we have ours the color isn't right and it's not perfect but it's looking pretty good this footer here is also wrong but i'll show you how to do that too all right so what i'm going to do is i'm going to update that and now we're going to change the colors of the fonts and the buttons and everything so that this looks much better first thing that we can do is go over here and then go to site settings and then for global colors we're gonna set the primary to these specific hex codes so a hex code is just a color code we can just type it in right here pound 4 a 2 9 5 d that's the code for that purple now for secondary we can just type it in pound six one three f seventy five again that's another purple for text it's gonna be pound twenty eight one d two f and for our accent color that's gonna be pound f eight e eb ef all right so we have some of those colors and some of the things did change but not all of them so we have to change a few more things we can go back and we can scroll up here and we're going to change the button right here so we're going to go to buttons and right here for button box shadow that's the shadow under our button we're going to do 12 for horizontal that's going to move it over 16 for vertical we're going to blur it more at 23 and we're gonna spread it a little bit less at negative seven alright we'll keep it that color and we will press update because we're all done with that all right now we're gonna exit out of here and we're gonna make some more color changes but in a different spot and we're also going to make a few font changes as well all right so what we want to do is we want to exit out of here so we just want to go to our main website and this is looking better but it's not looking perfect so what we want to do is click on customize and then go to global and typography this is the font so click on base typography and we're going to change it so we can change the base typography to something crazy like rock salt and that will change all of our fonts to this crazy font which is maybe pretty cool for some businesses we're going to go with something a little bit more subtle it's called inter it's a google font there are over 600 google fonts here so that's really cool and for variants i'm just gonna delete these so we don't need any variants right here and for size i'm gonna make it a little bit bigger just so it pops a little bit more and for line height which is a space between the lines i'm gonna increase it a little bit to 1.7 and that is looking pretty good the text is looking a little bit better so now i'm just going to go back and i'm going to go to our headings this is our headings right here so we're going to change that a little bit so i'm going to go to headings and for the font family i want it to be a little bit more spa-like so i'm going to type in l and we're going to choose this one l missouri for the variance i'm going to get rid of it we don't really need those and for the weight i'm going to make it more bold so i'm going to go 700 bold all right and we're going to keep this capitalized so those are the main settings but now we can go to each of the settings heading 1 is the main heading so like the biggest font so let's change some of that we're going to make this one bold also so it's going to be really bold and look really good for heading 2 we're going to make that a little bit bigger so make it 50 and we're also going to bold that to 700 and we're also going to change that family to l missouri and we're going to make that bold 700. for our heading 3 we're also going to do the l missouri and 32 is great but we're going to bold it 700 again all right so now if we scroll down we can see that these have changed and they're actually looking a lot better not everything is perfect not everything is the right colors we still have more to go but it's looking pretty good so next we can just go back and go back again and then let's go to the buttons again so we click on buttons and for our main button color overall for our website we want it to be white but the background color to be a different color so we're gonna change this hex value again and it's gonna be pound six one three f seven five for the hover color this is gonna be white but the background is going to be pound 4a 29 5d another purple color and then for the border it can be 1 1 1 1 that means there is a border around it if you can see that right there there's a border that's red so we want to change that red again to pound 6 1 3 f 7 5. all right and the hover border we're going to change that also to pound 4a 29 5d all right and then we're going to make the radius more so the radius is the edge right here so if we go all the way up it'll be rounded but if we go all the way down it'll be really sharp i'm just going to put in 100 right here just so that whatever button size we have it's going to be rounded all right for button text again we're going to do enter size 16 medium 500 we're going to uppercase all of the letters in here and for letter spacing we're going to do two so that's going to give us more space in between the letters all right for the padding which is the distance in between here we're going to change that we're going to make it a little bit bigger we're going to do 22 press tab 34. whoops you have to unlock them first right here so 22 press tab 34 press tab 22 press tab and 34. all right finally we're gonna go back and we're gonna change the global colors so this is just one more color to change and click on base color and for our text we're just gonna put in 28 1d 2f for our theme color we're just going to put in 613f75 for our link color we're going to put in 613f75 for our link hover color we're going to put in 4a 29 5d for our heading color we're going to put in 6 1 3 f 7 5. all right and that should make it look really good so everything now should all be color coordinated and look really awesome obviously this footer is not doing too well down here because we need to change it so that's what we're going to change next so we're just going to click on publish and we're going to exit out of there so now this is looking really cool obviously you can change it however you want whatever colors you want it's looking great except for this bottom footer which we can change by hovering over edit with elementor and clicking on footer all right now we have this in here and we can just exit out of here and then we can click here and we have a template for the footer so we have this footer right here and we can just insert it all right now that's looking pretty good so we can just exit out of here we don't need this and this is our footer it's looking great we're gonna update that then we're gonna go back to our main website and now if we go down we can see we have this beautiful perfect footer and this page is looking really good so the next thing i want to do is do the same thing to our about us page but it's going to go much faster because all of those settings that we just did are going to be applied to this page so we're just going to edit with elementor and then we're going to exit out of all of these and then we're going to click on the folder and go to my templates and where it says about we're going to insert it and press yes and now our about page is done and it's looking really really great so we're going to update that and then we can just go back to our main website and the next page that we're going to do is our services page and obviously you can change any of these pages however you want and i'm going to show you how to do that later but we're just setting it up right now so i'm going to edit with elementor exit out of all of these again go to the folder go to my templates find the services page and click insert press yes that will get us a beautiful services page with our different services and everything like that of course you can change anything we're going to press update we can preview those changes exit out of there this is our services page that's looking great we're not going to have a projects page obviously you can make that yourself so we're gonna delete that in just a second but we're gonna have a contact us page and we can see this contact us page and we can edit with elementor we can exit out of all of these go to the folder go to my templates see the contact and insert it and press yes and we have our contact page that forms not working which i'm going to show you how to make it work and everything is looking really good press update we can preview those changes and just go to contact us right here and we have that contact right there all right we can exit out of here all right now we can see we have all of our pages but we have this extra projects page that we don't really need so how do we get rid of that it's super easy all we have to do is go back to our website and then go to pages and we can scroll down and we can see this projects page right here that we don't need so we're gonna trash it we can also see the sample page that we don't really need so we're going to trash that also then we're going to go to our trash which is right here and we're going to mark them both off by clicking on this and delete permanently and apply now when we go back to our website we're not going to see that projects page there and it's looking really good but right now it says roofing services on our website now because we imported a roofing service website but we don't want it to say that obviously so how do we change that and that is super easy all we have to do is click on customize right here and then after we click customize we can click on header right here and then we can go to site identity now we're going to be doing your logo a little bit later but i just want to show you how to change that site title so i'm going to change mine to make a website but you would put in your business name right here and then your tagline would be a description of what you do like if you're a roofing service maybe your best local roofing service if you're a plumber maybe plumber from los angeles i'm just to put in learn how to make a website and then i'm going to click on publish and now we can exit out of there so the next thing that we want to do is we can see this get a free estimate but maybe we want people to contact us have that as a contact button that really stands out instead of this button right here so how do we do that so that's pretty easy all we have to do is click on customize then go to header then go to primary menu all right now we want to uncheck hide last item menu on mobile because we're going to get rid of this contact us and put it here but we want to show on the mobile all right so for our button text i'm going to say contact us and for our button link it's going to be the link to our contact us page so if we open up a new tab and go to our website and then click on the contact us page we can see this link right here so we can just click it and copy it and exit out of there and so now our button link is going to be that so now when we click on this it'll go to that contact us page once we do that we're going to change the colors of it because we want to be that purple so for colors we can click on that and for our text color we're going to keep that as white but for our background color we're going to again change that to a purple so we can change any of the colors right here if we wanted to but we're going to change it right here 613 f75 and then for our hover color we're also going to change it we're going to make this white right here and for the background color we're going to change it again to 4a 29 5d so a little bit darker purple when you hover over it all right then we're going to go to typography and everything there is looking good so we're gonna go to border and we're actually gonna make it zero because we don't want any border right here and that's looking awesome now we have a problem where there are two contact us buttons so we're gonna go back and we're gonna go back again and we're gonna go to menus then we're gonna click primary menu we're gonna see this contact us button and we're just gonna remove it so now we have home about services and contact us and it's looking really good we're gonna click publish we're gonna exit out of there we're gonna check to see if our button works which it does and now people can contact us and that's a really cool call to action so let's go back to our home page so the website is coming along great but there's a couple more things that we need to do if we scroll down here we don't have that appointment scheduling plug-in right here because we haven't downloaded it yet so that's what we're gonna do we're gonna download and configure it all right so to do that let's just go into the back end of our website and all we have to do is click on plugins right here and then click add new i'm going to exit out of all of this stuff right here because we don't really need it all right and the plugin that i'm looking for is called salon booking s a l o n b o o k ing now obviously you don't need to be a salon to use this plug-in it could literally be used by anyone it's just called salon booking so we see this plug-in right here the salon booking it has 7000 active installs and it has four and a half out of five stars so it's looking really good so we're just gonna install that one and press install now before we activate it i wanna go to more details because i wanna look up something and that's basically how do we use this plugin so we can scroll down and try to find it and we can click on installation and we can go down and see how to install it which we already did we can go to faq go down and see all the faqs and we can go to screenshots and see all of the different screenshots of what it looks like so this is super helpful if you're downloading a different plugin and you just want to know how certain things work how certain plugins work but we can exit out of there and we can activate this plugin all right so we're going to press allow and continue so they've created a few different pages for us we don't really need all the stuff that it's offering but obviously you can take a deep dive into all these different things it's just a little bit too much for us we want to make it super simple all we're going to do is click on this link over here and they give us a calendar to see when all of our bookings or availabilities and everything like that but what we want to do is we want to go down to the settings and we want to change some of these settings so we're going to go down and say what's your salon name i'm just going to say relax spa salon contact email i'm just going to put in my email address and then salon phone number i'm just going to put in my phone number all right it's going to ask us for our address again you don't need to be a salon to do this we can go down and it's going to ask us the date format and the time format i'm going to change the time format to be like this instead of the other way for my date format i think i'm going to change it to this one right here then i'm going to keep on scrolling down we don't need to enable assistant that's if we want to select which assistant is going to be helping us on our checkout and do we want to do sms do we want to get notifications on our phone i'm not going to set that up right now so all of this is looking good we can change the messaging for the text message if we want and we can remind the appointment to the client an hour before through email and a whole bunch of other settings all right the next thing that we need to do is change the style of it so it goes with our style and our color so we're going to update these settings right here and we're going to click on style then we're going to go down and we're going to change it to small because that's just what's going to fit on our website so just click on small obviously you can choose whatever you want and we're going to go down and we're going to enable custom colors so background color that's fine we're going to change this main color and you can go like this and it'll change to any of the colors that you want this is a little bit different than the hex code but you can always type hex to rgb and you can get in this right here so ours is 97 the purple 63 117 for that purple and for our text color we're going to change that to we're going to change that to 40 comma 29 comma 47 so that dark purple all right then we're going to update our settings and then we're going to go to the checkout so here we can scroll down a little bit and we're going to enable guest checkout and enable force guest checkout what these two do is that it makes sure that the user doesn't need to make an account and that no account will be made for them all right and we can update settings the next thing that we're going to do is go to payments and we can scroll down and maybe we didn't want to attach a payment maybe we're just like a consultant and we just want to book our consulting or it's just an initial appointment that didn't have any payments associated with it then over here we can hide prices so we didn't need to attach any prices to it all right but i'm not going to do that i'm just going to keep it as it is because we are going to have some prices to our service but if you didn't want to have any prices or the meeting was free or just meeting with your friends or something then you would obviously hide prices so we can update those settings and now we need to add different services to it so if we go to salon services different services right here but we can mark them all off and move to trash and apply and then we can go to the trash if we want check them all off delete permanently and apply all right once that's all deleted we can add a service so this is basically just like an option if you only had one option like you did consulting you just put consulting and you'd make the price zero and again just like we did in the settings you would hide price but i'm gonna say hot stone massage and then i'm gonna say the price is fifty dollars then i'm gonna press publish and i'm going to add a couple more services just in the same way so just click on add service all right so now if we click on our services over here we can see that we have all of our services right here we have all four of them right here and now we need to get all of this on the home page so let's go ahead and visit our homepage and if we scroll down we're gonna actually see it right here now why is that how did the website know to put it in right here and i'm gonna show you that right now so if we click on edit with elementor and this is how also you'll get it on any page that you want we're going to see this left square bracket then salon with a capital s and then a forward slash in a right square bracket so any time you type in that and we just made this as a heading so literally drag in a heading or you can drag in text and all you do is you would remove this square bracket salon forward slash square bracket and that is the code to insert the form and we can make this heading text smaller by making it an h3 or an h4 or we could have just dragged in a text editor and done the same thing and put it in there and we can center it to make it look better and then if we update it there should be two in here right now so we're gonna preview the changes now whoops i actually made a mistake it's not a capital s the s is lowercase and that's why it didn't work so make that a lowercase s update it and now we can preview it and it should work all right so now we have both of those uh booking appointment calendars in there right now we have two of them it was a lowercase s so don't do an uppercase s and then it'll work perfectly all right so we can go back and i'm just going to remove this one because we don't really need it so i'm going to press delete this should be a lowercase it's just not a lowercase because the style right now if we go to style and we go to typography and we go to transform we can transform it to normal and that would make it lowercase which is the correct way it should be all right so you can put this code right here on any of the pages making sure that the s is lowercase and it'll work on any page anywhere you put that is where that form will be but we don't need to update that we can obviously update any of this text here we don't need to update that we're just going to exit out of there and leave without updating anything because it already works and we have the form here let's check to make sure see if it works we can choose anything that is available we can choose our time of course you can customize the times when it's available and everything like that then we can choose which treatment that we want and we can either attach prices or not attach prices to them and we can choose whatever we want let's say we want a hot stone massage and go to the next step we could enter in our first name last name email phone number and address but if we don't want all of these we don't need to have all of them on there so let me show you actually how to get rid of some of these things so we can go back into the dashboard and we can go back to salon and then settings and then we can go to checkout and scroll down and here is all the options of what we can include and what we can not include so i want the first name but i don't really care about the last name so i'm gonna hide on checkout and hide on booking email i do care about phone number maybe i care about address i don't care about so i'm going to hide that too and then you can add more fields right here and customize that but i'm just going to update settings then i'm going to go back to the front end of the website and i'm going to check out once again got our hot stone massage next step again we can hide those prices if we wanted to and then now it says first name email address and phone number all right once we do that we can do next step and here is my booking summary you can change any of this by clicking on this because you're the admin enter in a discount code or not you can leave a message see you soon and then you can finalize all right we get our booking number and you as the website owner will get something that emails you and tells you that they have made an appointment with you all right so we can check our email and we can see as the admin that they have made it we can see their phone number their email address and their message see you soon so that is super awesome every once in a while this email might go into spam but you just have to go to your spam folder mark it as not spam and you should be good to go all right so we can exit out of there but really the form isn't perfect if we scroll down a little bit we're gonna see that this isn't our font right here there's a little bit of extra space down all right here and it's not looking super perfect the problem is is that it requires a little bit of code a little bit of css to make it right so it's a little bit advanced but i want to make it perfect so i've written out the code for you to copy and paste it's in the description below so what i'm going to do is i'm going to go to customize and you can just copy and paste this code to really just make this look perfect all right so we're going to go to customize right here and then we're going to scroll down and where it says additional css we're going to paste in some code right here and obviously if you don't want to do it it's perfectly okay this is just some advanced extra homework if you are really just want to go above and beyond and make it look perfect so again it's in the description below so just copy and paste it so i'm going to paste it all in there and it's going to change some things on our form it's not going to look like this it's only looking like this because there's not enough room but we've changed the font over here and that's what this does it says that the h2 font should be l siri we changed some other font to enter like right here we've made the margin or the spacing zero on top so there's not as much spacing right here and you can again play with these to see what it does if we put in a hundred we can see that it's a lot more spacing if we put in 10 do that we can actually do negative numbers we could do negative 10 or 100 and maybe that looks better but i'll keep it at zero and we just change a lot of the different margins here so that it has less space it's not as big and we change the border radius for the button to 30 so it looks better if it was zero it would be like that 30. it looks like that so it looks like everything else and we remove some more spacing by putting margin zero margin is the spacing so we can click publish that and we can exit out of there and if we scroll down now we can see that it doesn't take up so much space the button's rounded everything is looking much better we have that font in there that is our font so everything is looking really great all right now that we have that form done we're actually gonna do the contact page so we're gonna put a form on the contact page so that people can contact us so let's go to the contact us page and we can see that we can't see anything right here there's supposed to be a form right here so we can edit with elementor and if we go over here and we click on this this is a wp forms widget so how you would get this in here or put it anywhere else you go up here and you type in form and we would see wp form so we see wp forms we can choose either of these but we can click hold and drag and put the form wherever we want and then we would select a form so we'd select the contact form the contact form is already made for us so it would put it in right there it would take all of our colors that we had and all of that looks really great so we're gonna delete this one actually and we're gonna do the same thing with this one take this go here make it the contact form all right so how do we make this contact form though right here let's update that and let's preview it on our website we can take off all this right here and exit out of there and now we can see this contact form in here it looks really good it's all lined up everything looks great we can put in our first name email phone number subject and message and then that will get sent to us so if a user puts that in it'll get sent to us right there it's looking pretty awesome but how do we build this right here how do we get it so that we can actually insert it what we do is we can go to our dashboard and there's a plugin called wp forms so there's already a contact form here but there's already a contact form right here if we want a new one we would just click add new so let's say we wanted a new one we'd click add new and then we would type in new form and maybe we would do it as a simple contact form so we can click on that and now it's going to say first name last name email comment or message we don't have a lot of space on our website so what we can do is we can click on this and we can go to format and we could just make it simple so name and then email address and then comment so maybe that's good or maybe we want more fields so we click on fields and add field and maybe we want their phone number so we click hold and drag and then we can change this by clicking on it and saying phone number and they can put in their phone number right there if we don't want that of course we can delete it and press ok we can click any of these and we can change the settings we can make it required we can go to advanced options we can make it small or medium or large and then once we've added all the fields that we want to add like drop downs or check boxes or emails or anything like that then we go to settings and notifications so this first one is asking who do we send the form to so we want this to be our email address and what do we want the subject to be so maybe new contact message will be the subject that it sends to us who do we want it to be from so it's going to be from your business so i'm going to say it's from tyler and then from email we want this to be our admin email so we're going to say we could just put in our email address or you can use it as the admin that was there and then who do we reply to so we have smart tags here so if we go show smart tags it's going to be the email that they put in so you can press email and i'll put in this code right here which will be their email and then what do we want the message to be that sends to us we want it to be all the fields so everything that they filled out we want to have in our message so as long as it's like this it should work perfect we can press save and now when we go back to our website and go to the contact us page we're not going to see it change here because we didn't edit this one we made a new one but of course you can edit this one if you wanted to we're going to edit with elementor it's going to have this in here we can click on it and then we can choose that new form that we made all right and that will show up just like that obviously we need to format it and do it a little bit better than this and it'll look better once it's published we can see it'll look much better look like that but we do have options to hide this back in the contact form settings just like we did this one so i'm going to keep it on this one because it does look much better all right then we're going to update that and people can now fill it out and it'll email you and you can begin a conversation with them all right so i'm just going to go back to the home page and it's all great to edit different pages but what if we want to add our own page what if we want a different page what if we want a gallery page for instance making a page is super simple all we have to do is go back into the back end and then go to pages and we can click add new we can exit out of here and we're going to add a new page called gallery g-a-l-l-e-r-y gallery or this could be faqs about service contact anything that you want but i'm just going to do a gallery page and i'm going to click on publish and i'm going to publish it once i do that i'm going to edit with elementor up here and now what we could do is we could build this page we can click on here and add different sections and drag anything i'm going to show you how to do all of that later but i think it's a much better idea to start off as a template so i'm going to click this s right here and from here we can add any page that we want so i'm going to go free and maybe we like this one as our gallery page or maybe we can search up here for gallery and we can see some galleries that we like maybe we like this one right here that one's pretty cool but maybe we want to be a different page it could be any page that we want so i'm just going to click on here maybe i like this page i'm going to go with this services page here maybe this could be our gallery click on here and then i'm going to import this template once it's done importing it's going to take on all the style of our website that we made so it's going to have the different colors the different buttons everything like that it's going to look pretty good and of course we can change this however we want we can add to any of this we could subtract from any of this real quick we could just put in this is a gallery right here but we do see a problem and that problem is that this header and this logo which we'll change later is supposed to be see-through this page is supposed to be pushed up all the way to the top so that you can see through it so i'm just going to update this page and we're going gonna fix that problem i'm gonna preview it exit out of here and what we can do is we can press edit page right here and we can go down and where it says transparent header we can enable the transparent header so once we do that we can press update and then we can preview that page in a new tab and now that is looking really good now we can see that transparent header but we do have another problem also and that's if we go to the home page there's no way to get to our gallery page it's not up here so we need a way for us to get back to the gallery page so how do we do that again it's super easy all we have to do is click on customize and then down here go to menus and then click primary menu and then this is our primary menu we see the home about services we don't see the contact because that's a special button that we did before but we can add an item and maybe we want to add that gallery right there so maybe we want to be gallery then services so we click hold and drag and now it will be home about gallery services we like that we click publish we exit out of there and now we have our new gallery page that we can go ahead and click on right here and now we can access it from the home page and it's looking super perfect really great if we decide actually we don't really like that gallery page i actually want to get rid of it that's super easy also we can go back into the dashboard and we can go to pages and we can find that gallery page and we just click trash if we really want to delete it we can go back to our trash and we can delete permanently all right now we can go back to our website and that gallery will not be there all right the next thing that i'm going to show you how to do is how to edit this entire website i showed you a preview before but i want to show you the 15 things that you need to know in order to make any website out there so here are those 15 things we're gonna learn how to change your image change your text change your buttons change spacing insert sections add a heading add text add button add spacing undo redo columns icon box duplicate duplicate sections and how to make it responsive so it works on your tablets phone computer it works on every single device that there is it might seem like a lot but it is super easy all right so editing our website we can go to any page that we want right here and then just press edit with elementor so if we're on the about page edit with elementor service page edit with elementor contact page edit with elementor we're on this home page so we can just edit with elementor all right so here's our list change image change text change button change spacing so this is about just changing what's already there and then this is about like adding things to it and this is some more like advanced tips and tricks so let's go and do it how do we change an image we have this background image here so how do we change this background image it's super easy all we have to do is click on this entire section here and go to style and then we see this background image there are some other images overlaid on this background image but we don't need to worry about that right now this is how you choose a background image so maybe we want to choose something else we click on it we can get free images from pixabay which is cool copyright free images we can choose images from our library or we can upload our own images i'm going to choose free images from pixabay maybe i will choose i don't know spa all right we want to find an image that maybe is a little bit darker that is spa like maybe this image right here and we can save and insert it'll download and i'll insert into our website and now that lady was removed and this image is here obviously the colors don't really go that well and it doesn't look that great a trick though is to use a background overlay so what we can do is we can scroll down here and go to background overlay and we can overlay it with the color we need this to be lighter so that our text pops or we need our text to stand out more one or the other but we're just going to make this lighter so we can click on it and then we can choose a color for it by clicking on this one maybe making it white and now our text is popping more we can change the opacity one would be completely white and then zero would be completely see-through so we can play with that and that pops out a little bit more it doesn't look fantastic but it looks a little bit better one of the coolest things that you can do on the website is you can undo and all you have to do is press command z if you're on a mac or control z if you're on a pc and that will take you back in time as if you never made the mistake all right i bet my mom wishes she had a command z [Laughter] that's just a joke my mom loves me all right so right there we learned how to change an image we also learned how to undo but we didn't really learn how to redo so how do we redo that's interesting let's see we can go over here to our history and we can see now that we have made some changes so now we can actually if we decide that we do like that we can go forward in time and back in time just like a time machine which my dad wished he had alright so we've learned how to undo redo maybe not in the order that i thought we would do it but nevertheless we got it done the next thing that we're gonna do is change text how do we change text it's super easy all we have to do is click on any text right here and we can actually change it here or we can change it up here so we can just click on something for example this and we can change it here change text all right we can scroll down and we can change this text here enjoy a relaxing night instead of afternoon we can go down here and change any of this text here just by clicking on it but sometimes we also don't just want to change the content we want to change the style of the text too or what the text looks like and that's easily done by clicking on this little style tab up there so all we have to do is click on any text we have click on this style tab so click on text click on any style and then we can change any of the colors so we can change this maybe we want this to be a white that looks pretty good or maybe we want to press ctrl or command z to undo that so bam we learn how to change the text how do we change our buttons so we want to change the buttons we easily just click on it and this is all the content in here so instead of saying view our services it can say contact us and we've changed that where does it link to well we can have it linked to the contact us page by starting to type in contact and then we can see the contact us page right there all right and then we can scroll down and scroll up and go to style and we can change the font size the typography we can make it really big or really small again we could press command or control z if we want to undo those things we could change the text color of the button the background color of the button the border radius which is you know how sharp it is the padding or all the space in between the buttons we can also go to advanced and change the spacing so the margin and the padding that has to do with spacing so if we put 32 on the right side it's going to give us 32 more pixels of space on the right if we put 100 on top it's going to give us 100 more pixels of space on the top and so on we're just gonna undo that though and that is how you change the button there's a ton of different options there you can discover them yourself so change buttons we're all done with that change spacing this is one of the most important things on the entire website so the spacing the spacing will make or break a website you see how much space there is here it's like breathing room for all of the fonts all of the content and everything like that how do we control the space so there's more or less space here it's super easy all we have to do is click on this entire thing right here this entire section and go to advanced and we can see that there's a bunch of padding or spacing on the top so we can change that maybe we want to be 100 and we see that that all gets shifted up and maybe to us that looks better maybe 200 looks better and then for the bottom we have the spacing here on the bottom maybe we want that to be 100 also and that will give us some more space here the difference between padding and margin is padding is on the inside where margin is on the outside so if we unlink these values and do 100 margin it won't do it here but it will push this away so we can say 100 here and it just pushes it away where if we do 200 here that will actually increase here again we can press ctrl z or command z to undo all of those terrible terrible changes so you can do spacing for anything we can click on this right here and go to advanced and change the spacing here we can click on this section here and go to advanced and change the spacing here we can click on this and go to advanced and change the spacing here we can do it on this contact button and we can change the spacing we can do it on different columns so we click on this and we can go to advanced and we can change the spacing right there so anything that you can click on practically will give you this advanced in order to change the spacing so change spacing we all know how to do that now so now we're getting to the part where we learned how to change all of the stuff on our website but how do we actually add new things to the website you don't want to just copy someone's design all the time or just change and rearrange things even though that is a good way to start off sometimes we want to create our own section so that's what we're going to do and sometimes the best way to create your own section is to copy apple just kidding but is to copy something that you get inspiration from obviously it's not going to be a direct copy but sometimes it's nice to go around different websites and see what's out there and say hey can i put that on my own website so how would we make this let's try to make this let's try to think about this what is this we have an image we have an image right here which is just a single column we have this text down here that might probably be a headline we have this extra text down here which is just regular text and if we scroll down we can see these three different boxes right here so we need probably three different columns that's what i'm seeing here and we need some icons some text some headings different things like that how can we recreate something like that if we wanted to so let's first add a new section that is one column so if we go here let's go all the way to the bottom and let's just add it right here let's add one column so we look at this one column okay look at ours one column all right that looks pretty good the next thing that we can do is really up to us this right here is this an image or is it a background and that's really up to you that's up for you to decide it doesn't really matter as my mom says there's more than one way to skin a cat so i'm gonna make it a background so i'm gonna go here and i'm just gonna click on this entire section i'm gonna go to style what does this guy look like he looks like a smart dude i'm going to go to classic and click on image and just type in after i click free images from pixabay i'm going to type in smart dude and we have no results so maybe smart guy smart guy all right let's find a smart guy we want the images to be wide how about just guy we're not finding anything we're going to do a horizontal orientation and this canoe looks good to me i'm feeling it so we'll save and insert so that's going to insert it right here but there's no space right here and again we can tackle this two ways what we can do is we can either click on this and then go to advanced over here and add some padding spacing or an easier way might be to drag in some spacing so click on this and then click and hold and drag spacer and just make some space with this guy so that looks pretty cool if we want to reposition this image we can click on it and we can go to style and then it says position what do we want we want to be maybe center center oh nope we definitely don't want to be center center top center maybe there we go or maybe we want to be left center top left there you go that's pretty good for the size i like to make it cover that's always the way to go in my opinion that cover will make sure it goes all the way across but it will sometimes crop the top and bottom or crop it where it sees fit but it'll show you as much of the picture as possible all right so we got that in there go back to the genius bar what do we need here we need another section underneath with these two right here so we can go back and we can add another section and it's just a single column and it is a heading so we click hold and drag that in there and we want to center that heading and we want to put some inspirational instagram garbage on there something like you do you and be inspired something like that then maybe we don't like this font right here so we can go to style and typography and what are they using i don't know but maybe we want to use montserrat montserrat there we go that's good maybe we want to change the color so we go up here and we change the color maybe we want to be black or nearly black all right but obviously this has a little bit more space up here so we need to get a little bit more space by clicking on this and then going to advanced and we can choose marginer padding so i'm going to choose margin top maybe 50. that looks pretty good that looks about right and maybe we want this to be a little bit thinner so let's go back to style and go to typography and for the weight we want to be a little bit lighter but not that light like that yeah there we go and of course we can change the size of it we want to be bigger or smaller maybe like that and we could go back here and we can see maybe we want to copy all this right here because i'm too lazy to type it right now so we go like that and then we click on this and we click hold and drag it underneath and then we just paste in that text let's paste it here though paste it in here we click on this because we don't want to copy all that formatting so we can just paste it there go back to visual highlight it all and then go to style and we can center it and we can see that this text doesn't go all the way across because it looks bad when text just goes all the way across your screen and it's super hard to read so we want to contain the text a little bit more so that's super easy to do all we have to do is go back here and ours goes all the way across looks terrible but what we can do is we can click on this section and then go to advanced if we want and we can give a little bit of margin to the left or right side so we can do it just like this so right side maybe we'll do 200 and then left side we can do 200 and that's a little bit too much so we'll do 150 and 150. and now that text is contained and it looks a little bit better their text is a little smaller so we go back here and we go to typography and we change the size a little bit maybe we want to be like that that looks pretty good so now we can see that and that looks perfect the next thing that we're going to do is get those three boxes in here just like apple did so we see this apple has chat call email and maybe this button down here that you can see if i get out of the way right there maybe we'll do that so how do we do all that super easy let's go back to our website and let's add a new section that new section is a three column section and once we do that we can go up here and we can search for like an icon box so this icon box we can click it and then we can see it has an icon the heading and then the text so this is the icon heading text that's perfect so you can easily change the icon by going to the icon library we can type in like phone or something and give it a phone there and we can insert we can also change the color of this icon by going to style and changing the color of it right here the primary colors and then of course you can go back to content and we can say you know phone support or something we can obviously change the text of it and if we like this one then we can duplicate it just by right clicking and duplicating it and then click holding and dragging to these other columns right here and now we have that it looks a little too close to me so i'll click the entire section and go to advanced and then unlink these values and put 50 maybe 100 pixels of space a little bit too much 80 pixels of space on there and that looks pretty good let's see they have a little bit more equal distance right here so maybe i was right with my 50. all right so they have a chat call and email so we have a phone and then maybe here we have a message and then here we have email so email all right then we would change all of these voice chat email change this and there you go you have your three sections right there and we can go back if we want to and we can definitely change this typography if we want we don't want to have that same typography again want to be montserrat or something and we want to change the color and there you go with a little bit of effort we have duplicated this maybe we want this button to be right there so that is a single column right there so it's just a button underneath single column put it in there click here drag in a button make that button center and then you can change all of the buttons style and everything here by changing the background color maybe we want to be that apple blueish maybe for the border radius we want to be solid but then put zero so that there's no border around it maybe for the box shadow we don't really want a box shadow very much there so we can make that zero and now that's looking a little bit closer to this it's not looking perfect there needs to be more space and we need to do a few things to it but basically that is it so there we go we can click on it we can change it to say get software help or whatever we want and there you go we've pretty much recreated the apple website right here or part of the apple website and we did it pretty fast it's not perfect we could definitely spend more time with it and make it a lot better and again we can also undo it so just command z or control z we can get rid of all of those changes just step back in time or we can go to our history right here go all the way down and go back to when we started to edit and that will bring us all the way back let's see how we're doing on our list so we learned how to insert an entire section how to add a heading add text add a button add spacing we learned about columns in that icon box we learned to duplicate things and now we're going to learn to duplicate a style and or to be responsive how do we make it perfect for those devices like your cell phone tablet and computer so we're going to exit out of this let's say we change this style right here we went here and we really did like a different font so we went here and we said you know what i don't like this font i want something crazy i want rock salt rock salt to me that's the way to be all right and then we said man that's just perfect i love that and we did all this stuff to it we also changed the color so we went to text color and we said you know what white is the right color for me and we wanted to duplicate all of this work that we did to somewhere else so all we have to do is right click and press copy and then go down here and right click and paste style that style is going to get pasted there and all of that work that we did we don't have to redo but again we can go back to our history and we can say you know what i like it the way it is i don't need to worry about making any mistakes because i can always undo and there we have it alright so we've learned how to duplicate the style to save you a whole bunch of time so we're all done with that the last thing i want to show you is how to make your website responsive so that it works on all of your devices your phones your tablets everything like that and it looks perfect for those small screens all right so the way we do that is we go over here and we click on mobile or tablet or whatever you want so i'm going to click on mobile and now we can see what the website would look like if it was on a mobile device obviously that form will be in there but do we like everything that it looks like and honestly it looks pretty good there's not too much because it's already has all the settings that it needs in there but let's say something was bad let's say we go here and we go to style and then typography we can see this little mobile icon that means it's only changing on mobile devices and not your desktop so we can make it bigger or smaller maybe we want to be a little bit bigger we can also click on the entire section and go to advanced and maybe there's too much padding up here so we can reduce that size a little bit i'm just going to keep it as it is because it actually looks good on the mobile phone so after we do that we can update it and now those changes will only show for the mobile website the website that people see on their phones and it won't affect the desktop version of your website if we go back to the desktop version it won't affect that at all all right so now we're done with the 15 things that we needed to make practically any website out there so we can mark that off and now we need to do the last two things for our website so we're just gonna preview this website and exit out of here and go back to the home page actually and we can see that something's not right and that is the logo so that's the last thing that we're going to change then i'm going to show you how to back up your hard work and then we are done there are many different ways to change your logo the first thing that we're going to do is we're going to create a logo and then we're going to insert it in here we're also going to do this little fave icon up here it's called so this is an icon that we can change and we can make it custom so that's super cool all right so what i want to do is i want to open up a new tab go to photo photop.com p h o t o p e a dot c o m and press enter this is really cool it is a photoshop duplicate but it's free and it's online so it's super awesome all we have to do is click on new project and the new project is fine we can put in logo here and we can press create all right but now we need an icon or we need something here so i don't want to make it myself even though i could i want to download that from somewhere else so i'm just going to go to flat icon.com and let's exit out of there and we can search for icons i'm going to search for a lotus flower and up here on filters we can make sure that they're all free so only the free ones and then we can scroll down and we can find any lotus flower that we want i think mine's on the second page somewhere and there it is that's the one that i want now i want to save this as an svg that's saving this icon using math so no matter how big you blow it up it won't lose its quality because all of these curves are based on math and coordinates instead of an actual image so we're just going to click save and we're going to do the free download and we're going to exit out of there it's downloaded we can drag it to our desktop or we can go to photo p and just drag it in right there and now that shows up then i'm going to change the color of this and i'm going to do that by double clicking right here and then changing each of these layers so i'm going to click on this one double click and then i'm going to type in that purple color which was 6 1 3 f seven five and press okay and then type it in here again six one three f seven five and press okay all right so that made it that purple color we can press command or control s to save i believe or go to file and save smart object once it's saved it's going to update this right here and we have this nice purple icon what we need to do is we need to crop it to a certain dimension 512 by 512 in order for it to accept it right here so what we can do is we can use the crop button and instead of free we're going to do fixed size and we're going to do 512 by 512 and we're going to press enter and then we're going to press enter and that's going to crop it right there so that's looking pretty perfect we can reposition this a little bit but that is looking pretty good i usually don't get that lucky if you need to transform it you can click on it and then go to transform controls and then hold shift because if you don't it's going to get all wonky hold shift while you're resizing it and now i'll resize it proportionately and we can resize it just like that and press enter and then we can move this around you can also use your arrow keys to move around and what we want to do is want to get rid of this background so get rid of this background so that it's transparent because you see how this is transparent and then we can go to file and export as a png and it's 512 and 512 we're going to save that that's going to download our logo actually this is the fav icon so we should have renamed it but just know that that is the fave icon that's going to go up here now we need to do our logo so i'm just going to click off of it by selecting this marquee tool click off of it and then go back to crop now instead of fixed i'm going to say free and that's going to make a bounding box around here i'm just going to click hold and drag this out and then press enter and that's going to give us more space right here then i'm going to use some text and now we have a new text layer i'm going to start typing i'm going to type in relax spa and then i'm going to double click it to highlight it and i'm going to increase that font size it only increases to 150 so i'm actually going to just type in 200 here or maybe even 400. and then click hold and drag it that's a little bit too big so maybe back to 300 250 perhaps and then click hold and drag it to that right spot i'm going to change this text color to not black but to that other purpley color so that is again six one three f seventy five and press okay all right once that's done we need to change the font so this also has all the google fonts so we'll type in el masiri i bet you i'm saying that wrong i'm going to get 9 000 comments on it okay and then do that and now it's a little bit smaller so maybe we can go 300 with that oh we got to highlight it first 300 that's looking pretty good maybe 350 even for lucky nope 320. all right give it a little bit of space maybe we'll make this a little bit smaller so we'll click on this oops click on the pointer click on this spa right here and then hold shift and grab the edge and let's make it a little bit smaller it's a little bit too big for me black spa that's looking good press enter now we're going to re-crop the whole thing by clicking on this marquee tool and clicking on the crop and then we're just going to crop it in as close as we can all right once we do that we can press enter that looks pretty good we're going to file and export it as a png we want to do png because png has transparency so that's looking pretty good and we're gonna save it that's gonna be our logo one so this is our fav icon this is our logo one we're gonna exit out of here we're gonna go back to our website we're gonna go to customize then header then site identity and we're gonna remove the logo then we're gonna select a logo we're gonna upload files and we're gonna select that logo one then we're gonna press select and we're going to skip cropping we don't need a crop that's going to put it in way too big 190 looks perfect and great and crisp and then we're going to upload our site icon so we're going to select our site icon upload files drag in that logo it's exactly 512 by 512 so it should select it perfectly and now we're gonna see that little cool icon up there that lets us know that that's our site and this photo p lets us know that that's the photo piece site so it's super cool once we do that we're going to publish and we're going to exit out of there all right now we have that really crisp clean logo and we have it on all of our pages and our pages are looking super good and everything is looking perfect we can click on that logo to go back to our home page we can exit out of there thank you very much photo p we can exit out of this and we are practically done the last thing that i like to do is back up all of my hard work by getting a plug-in that will back it up so let's do it so we can go into the dashboard and then go to plugins and then click add new then we can search for a plug-in called all-in-one migration all-in-one migration all right and this is the best backup plugin that there is three million activations four and a half out of five with 6 500 reviews we could just install that now and then click activate and that will activate the plug-in and then we should see it on the left side so we see it all in one wp migration and what we're going to do is we're going to export it out to a file and it's going to prepare our export it's going to download everything off of our website so that we actually have it ourselves all right and then you would click and you would download it right here so that will download to my computer we can close this now and what we can actually do is we can click on backups and we can see the backup also right here so we can create a label to it we can say first version done all right so that's our label for it we have our first version done all of our work is saved we can always go back to this all we have to do is click this restore button and it will restore it here so you can imagine you can have a few different backups here different points on your website and then you can just restore them as needed so i'm actually going to exit out of here i'm going to delete this backup because i don't want people from the internet downloading it so i'm just going to delete it but that is how you would back up your website we're just going to visit the home page one last time and we've learned how to do so many things we've learned how to make this logo this entire website how to import templates we've learned how to make this really cool booking appointment form we scroll down we learn how to create this entire footer and edit this footer we've learned how to edit all of these different pages how to put in pages how to delete pages we've learned how to set up the contact form we've learned so many things and we did it all step by step with no steps skipped the last thing that i want to do is just go up here and log out it's an optional step i like to do it and then we can go back to our website and we can view the website as the visitor would view it of course if you want to log back in you just go forward slash wp admin and you can log back in like that but we are all done please remember to comment rate and subscribe i'm tyler moore thank you so much

Channel: Tyler Moore

Views: 84,435

Rating: 4.9124885 out of 5

Keywords: booking website, appointment booking, appointment setting, appointment setting website, how to make a website, make a website, make a booking website, make an appointment booking website, appointment booking website wordpress, appointment setting website wordpress, booking website tyler moore, booking website wordpress, wordpress booking website, wordpress website, build a wordpress website, wordpress tutorial, tyler moore, wordpress website for beginners

Id: 70JwyYSosX0

Length: 101min 34sec (6094 seconds)

Published: Tue Jan 19 2021