Make a Website Step by Step

even a beginner can make a website in two hours and we're going to show you how step-by-step with no steps skipped this is immanuel and he's an expert in developing wordpress websites he makes tons and tons of websites he's probably the fastest website maker on earth if you need any help you can find them on icreateyoursite.com emmanuel also has a youtube channel the link is in the description below where he talks about wordpress and elementor welcome emmanuel thank you so much for joining i'm just going to ask you some questions so i think this website is beautiful but when i showed it to you you said that the font sucks so we're going to change the font make it much better how can we make this website better and what do you think about it so far i think the website's pretty good i think the font is a little bit dated but that's really easy to change and um even if you're somebody who's never made a website before and this might seem like a very complicated thing to do very fancy website we're gonna say it's actually really easy and that um you've been scammed by website companies who've gotten you to believe that this is really hard to do it's not really hard to do it's really easy to do you can do it yourself and by the end of this video you can have a really awesome website yeah so we're going to make this website step by step with no step skipped and we're going to learn everything from putting in the logo this is going to be bigger right here but how to put in this cool header and i think this is really beautiful and most people think that you know just because i'm showing you how to make this website that they can only make this website is that true is this the only website that people can make yes [Laughter] no you can make any website so if you check out the site you see that you know all websites are pretty much made of the exact same parts you have sections and you have columns and then you have pictures text paragraphs and buttons so you know this website was put together you know this way that looks really nice but you can rearrange it in any way that you want whatever style you want you can make some images bigger something smaller change the colors change the fonts change the buttons we're going to go over all those things you're already going to be able to make this website your own at the end of this yeah so basically after you learn how to make this website you're really going to learn how to make every website and that's all i have to say about that goodbye all right so the link for everything about a manual is in the description below so you can check out all these things there but we're going to go over why use wordpress and do you have any ideas on why people should use wordpress rather than wix or drupal or shopify or weebly or anything like that yeah definitely i customers ask me all the time you know can we make the website with wix can we make those shopify yeah probably but the reality is that you know if you really want your website to be around for a long time and to be compatible with a lot a lot of things for a while wordpress is the best way to go it's compatible with pretty much everything it has this great set of you know almost unlimited plugins for anything that you would need to do and that's really hard to find in any kind of other you know ecosystem you know with shopify or wix if down the road you want to add like a chat box to your website or a membership or you know some kind of like really interesting thing that you saw it's going to be really hard to add that to the website without programming and having programming knowledge and in wordpress a lot of times you can just find a plugin which is kind of like an app you can just add to the site and that's it your website has that feature so you know and of course it's also used by a ton of reputable companies so basically wordpress is the most flexible without having to show a lot of money for custom programming and everything like that and it is used by all these companies cnn forbes jay-z katy perry ebay ups and it's the most popular way in the entire world to make a website so we can see here the market share is almost 60 and all the other website builders combined is 40 we can see that breakdown right here yeah and a lot of these websites that are on joomla droop all these things these are usually like ancient websites like these are websites that were made you know 10 20 years ago and they're just sitting there it's not like some people are making modern brand new nice websites with these things you know all right so here's the overview of everything that we're gonna learn and our like guide to guide us on what we're gonna do so first we're gonna get the domain name then we're gonna get hosting then we're gonna install wordpress and finally we're gonna make our website the first two are the only ones that have any cost associated with it so what is a domain name yes a domain name is just the name of your website like youtube.com facebook.com you know it's gonna be your business or your idea dot com or dotnet or you know whatever you want to make it that's what the domain is so emmanuel's domain name is icreateyoursite.com my domain name is tyler.com facebook's domain name is facebook.com so that does cost about what would you say fifteen dollars a year something like that yeah it's a bar it's five to ten to fifteen dollars a year yeah so yeah five to fifteen dollars a year and then hosting what is hosting what do you tell people what do you tell your clients what what hosting is the way i explain hosting is it's kind of like the way you think about you know your website has images and text and all this information and that information has to be stored somewhere so it's kind of like imagine a google drive it's a storage for all your websites info so that's all that hosting is it's like a storage so that when you upload a picture to your website that picture has to be somewhere in a computer that's on all the time that people can can see that that on your website that's what hosting is basically a computer a server somewhere you know who knows where that is on all the time and when somebody goes to your website and says hey load up your text and your pictures that information is sent over it's always available cool so it's a computer that's on 24 7 that holds all of your information and if you didn't have hosting and only a domain name your site would come up blank right there would be nothing there because there'd be no way to hold all those images and text and everything right yeah and when you talk about hosting that sounds really complicated like this computer and these files it's going to be really easy to set up it's you know most of these hosts the hosting we're going to be working with it's like a one-click hosting everything is set up for you you get right into making your website you don't have to worry about programming a server or doing any of that crazy stuff right we're going to do it all step by step with no steps skipped hosting is about ten dollars per month so about ten dollars per month i'll show you how to get a big discount so you're not paying that much and then we're gonna install wordpress we went over what wordpress was before um but now it's super easy to install uh and it's free so that's really cool so wordpress is free it's what's called open source you really have all the content on your website and it's really yours rather than like somewhere like wix where they hold all of it and you can't you can't download your whole website you can't transfer it or anything so that's what makes wordpress really cool yeah and also to clarify we're going to show you how to set up hosting if you have hosting through wordpress.com that is something completely different than wordpress.org so what tyler's going to show you is going to cost about 10 bucks a month wordpress.com is its own thing you're looking at around 300 for a business website with them so you want to make sure that you follow the steps and you get hosting with hostgator to get this pricing all right and i'm going to show you how to bring that down to about 30 for the entire year so there's a huge discount involved and with wordpress.com you have to pay a lot more in order to get the features that we have yeah and a lot of the features that are free with wordpress you know plugins themes through wordpress.com for some reason you have to buy each thing separately in a package so you know just there's a lot of confusion between wordpress.org which is the free software in wordpress.com so just make sure you're following along yeah so we're going to be doing the wordpress.org free open source wordpress version which is the most popular one and then after that we're going to make your website and emmanuel is going to do it so it's going to cost five thousand no just kidding you know step four uh step four you hire me to do the rest of the website design so we're gonna uh make your website and making your website you're gonna do all of it so it's absolutely free so uh in total everything after all the discounts and everything it's going to be about 30 for the entire year so 30 for the entire year i think is a super good deal to have your website broadcasting to the entire internet yeah i mean if you have a if you have a business idea and you legitimately think that it's a good idea and 30 bucks for you for a year as a steal you should be able to make that back within the year i would hope if not it might not probably not a good idea at least you tried also yeah i've went through many ideas and they didn't work yes and you have a year so you know if your first idea doesn't work you have time to try different ideas it's really important sometimes people only get like one month and then you know you get busy and it's not really enough time to to try out your your whole idea yeah so we're gonna do that for the entire year and we can do both of these steps one and two at hostgator.com so let's do that let's make this site here let's improve upon it a little bit with the manual suggestions and let's do it so we're going to go to hostgator.com h-o-s-t-g-a-t-o-r if i can spell dot c-o-m and press enter all right so we're at hostgator.com and i like hostgator because of their 24 7 365 live chat in email support and i've been with them for now 16 years since i was 19 years old so i think that's pretty crazy they have all this hosting up here um pro hosting domains and we're just gonna focus on the hosting and we have these three options shared hosting website builder and wordpress hosting you would think you'd use wordpress hosting right right but it just cost more and it doesn't really give you that much more so really we're gonna use shared hosting right here it's the least expensive and you can always upgrade later what's the point of getting something that you don't need and paying more money when if you start getting traffic to your website then upgrade at that point but you probably won't need to in a while this could easily take on 100 people a day so we're just going to go with shared hosting and we have these plans here the hatchling plan the baby plan and the business plan but i have a trick if you see this two dollars and 75 cents a month we can actually go up here and type unlock un-lock then you get the biggest discount in the entire world and that turns into two dollars and 57 cents a month so i think that's much better i know hallelujah so we have these three different plans the hatchling plan the baby plan the business plan the business plan is just way too much we don't need all of this stuff and we can always upgrade later it really is between the hatchling plan and the baby plan do you know the difference between the hatchling plan and baby plan i'm sure you do the main difference is the how many websites you can have so on the bay plan you can have unlimited websites so like yourwebsite.com yourmomswebsite.org your wife's website.net you know you can have all of your businessclientswebsite.com if you plan to make multiple websites then you'd probably go with the baby plan right if you have like two websites right now all of a sudden then you go with the baby plan but if you only have one website which i'm guessing most people only have one website to start then you go with the hatching plan and again you can always upgrade later um but so we're just gonna go with the hatching plan and we're gonna click buy now all right now we're gonna register a new domain or say i already own this domain what's the difference between i already own this domain and registering a new domain yeah so maybe you already went to godaddy or somewhere else and you know domains.com or something and you bought a domain so if you already have a domain somewhere then you'd plug it in here um you know and this is gonna help you connect it to the hosting that you're getting right now right but if you're registering a new domain which probably most of you are then you'd register a new domain that is yeah if you bought it from godaddy previously you put in your domain name right there whatever your name is com.net.org or if you're registering a new domain you can put it in right here today we're registering a new domain so i'm just going to type it in now it is online.com and then this is the extension what's an extension yeah so the most popular one is dot com you know but you've probably heard of you know websites that end in.net or you know dot org these are all different extensions of you know the kind of domain you're using there's a lot of different ones if you're doing it i would probably go with dot com just because it's the one that everybody knows but if you really want a name and it's not available on dot com then you can choose a different one yeah or if you're really cool you could do like a dot space or dot tech but most people know the dot-com so yeah i would get the dot-com what should people do if their domain name is not available what do you what do you do if your domain name is not available yeah if it's not available you have pretty much three options one is getting a different ending for it like you know maybe it's available through dotnet or dot space or dot tech or a different one rewording your domain so maybe switching the words around seeing if it's a different variation or an abbreviation is available and the last option would be trying to find out who owns the domain and seeing if they maybe they're not using it and they want to so i'd say probably do you think that people should add on all of these just you know get all of these add them to your cart you know um get the dot club the dot site the net the dot online just add all them and buy them all i think hostgator would like that very much i agree with you but what do you think probably not i mean unless you have like your have an idea to like trademark your company or something and you're scared that somebody's gonna try to imitate you maybe you'd want to have like a net version of it but 99 of the time dot com is perfect yeah i usually say almost nobody tries to copy your idea you know nobody tries to copy your website and i don't think so getting like the net you know they just want to make more money i usually recommend against it domain privacy protection what is this should we get it should we not get it who should get it yeah so pretty much whenever you get a domain your information goes into a public registry just like if you bought a house or you bought a car it's like just a registry that everybody goes on to um and basically when your info is on there you can get like you know ad calls or add emails people trying to sell you services normal you know normal ads like anybody would get if you choose domain privacy basically hostgator hides your info behind their own contact info so you don't get all those ads but that's about it yeah so you may if you uncheck this get a couple of spam calls people saying that they'll rank you higher in the search engines or something but i don't think that it's necessary for most people but just know that you know if you uncheck it you may get a couple of calls you may get a couple of emails and they might be a little bit annoying so if you definitely want your privacy protected then keep this checked but if you don't really care and you want to save 16 or 15 a year then uncheck it so i'm cheap so i'm gonna uncheck it and just go from there then we have these uh different package types we have hatchling baby and business so um we already discussed what they are so we're just gonna go with hatchling unless you have multiple websites already then you'll go with the baby so we'll go with the hashtag and the baby you don't need to pay for hosting again but you do need to pay for your website name again with the baby so you need to pay 15 or 12 a year for each additional domain name but you won't need to pay extra for any hosting all right so we're just gonna go with the hash link because we only have a single domain name and then we have all of these different you know months and what is the best strategy and i think the best strategy is paying the least amount up front while saving the most amount in the long run so if you do one month then it's going to say okay it's going to be four dollars and 38 cents for the first month but after that it's going to be 10 a month but if you go with the entire year that whole discount is applied for the entire year and if you go in the entire three years the whole discount is for the entire three years so i think the best balance of saving the most in the long run while paying the least up front is the 12 month because it's 2.58 cents a month why would you go for the 24 month it's three dolla it's more expensive three dollars and 18 cents or the three year is a viable one also at 2.57 cents but i think the 12 month is where it's at what do you think yeah that's that's really good like uh 12 months for two dollars each yeah that's crazy then put in your password put in your security pin your email address everything i'm sure you guys know how to do that put in your first name last name phone number where you live i'm in california but emmanuel's in texas just kidding i don't know why i said texas i meant florida um it's in florida not texas it said texas here that's why i said that and then the credit card this is my real credit card so please use it it's an additional benefit of following along the video yeah you can do credit card paypal put in your information super easy and then additional services uh i could just make it easy on you and i can say no for all of them um but we can go through them do you want to go through them yeah these are just like extra plugins most of the stuff we can do ourselves by adding it to the website it's kind of like the wordpress hosting it's just you know you're paying extra for them to install wordpress for you and we're just gonna install it pretty quickly so we don't really need any of this right so the ssl our site already comes with ssl so we don't need that i don't know what this advanced ssl is so site lock you can get a plug-in called word fence right that will secure your website um and just keep up to date with the plugins and everything we'll explain that later um so i'm gonna uncheck that professional email i don't think that we need this your website already comes with email it's basic email but if you want to upgrade you can always do that later and then backing up your hard work we can download a plugin which we'll show you on how to backup your hard work so we're gonna save two dollars a month and then i don't even know what they would do for the seo what do you think that they would do like i don't even think that that is possible i'm imagining they're just going to install an seo plugin where you type in the keyword and it gives you like advice but we can do there's also a free version of that yeah so definitely at 35 dollars a year don't do that all right then we're going to enter in the coupon code and that's unlock unlockk and i do get credit and commission for providing this um hostgator wanted to give me the best discount to my users and so just thank you very much for putting this in it helps make these tutorials absolutely free then click validate and it should be about thirty one dollars it fluctuates here and there so it'll be from 30 to 40 dollars but you get all of this uh money back guarantee your domain name for one year and 12 months of hosting and i think that is a super great deal that yeah that's super awesome a whole year for 30 bucks it's like that's what you spend going to mcdonald's you know what do you eat at mcdonald's just kidding so go to i have read and agree to the terms of service and click checkout now all right so congratulations you've done the hardest part which is just decide that you know you want to have a website and actually do something about it so we see this right here sometimes every once in a while you'll get like this welcome screen and it will guide you through setting up a wordpress website because that's the most popular way to make a website so with the welcome screen all you have to do is press install wordpress it's a big button right here for me since i already have a website in wordpress on a bunch of websites this is what it's showing me so i just have to click install wordpress from right here um but we'll both be on this page once you click on that button to install wordpress so here it is it used to be super hard to install you used to have to mess with you know ftp files and transfer things and change you know database numbers and stuff like that but now it's super easy all we have to do is click on this button install now all right and then we choose our domain name so i have a whole bunch of domain names but i'm going to choose now it's online.com what do we want to do with this right here what is this you probably want to leave that blank if you wanted to have because you know your website works like a file system if you wanted to have a separate structure in your website you could add install wordpress on a different part of your website you could have like two different websites on one domain technically but it's probably gonna skip that part yeah so if you put something here it's going to install on yourwebsite.com forward slash something rather than just yourwebsite.com so you don't want to be like on now it's online.com forward slash your name because when someone goes to just your regular website now it's online.com then that will come up blank basically and wordpress won't be installed there so leave this blank you can leave this as it is and then your site name what should people do for their site name yeah there most of the time you probably want to put the name of your business or the name of your idea so the name of your business goes on your site name and then your site description what what is a site description yeah you probably want to have one sentence describing in the gist of what you do so learn how to put your website online something like that all right and then the username what do you recommend people put as their username you know whatever username is gonna be really easy for you to remember and whatever password is gonna be really hard for somebody to guess hey i like that that's good all right and then admin email do you would you put your regular email here right yeah so i'm just gonna put my regular email and then i'm not gonna install any of this stuff because we're gonna do it all from scratch and then email installation details we're gonna do it to our email just so that we have them and then we're gonna press install and now it's gonna install wordpress for us all right so now we're gonna check and see if our website works so we go ahead and check it and we're gonna see that this website actually doesn't work and that's because your website takes anywhere from 10 minutes to an hour to spread across the entire internet so it's gonna take a little bit of time so go ahead and take a break take a walk do something and come back then your website will work there's actually one more problem though and what is that problem yes sometimes if your domain is from a different uh company it might not connect just the right way and you have to go in there and tweak some settings it's really easy it only takes two or three minutes um and i have a video showing how to do that this is only like if your domain is coming from somewhere else it's super easy to do the video is only three minutes long you just go in edit settings copy paste you're good to go right yeah so sometimes yeah if you bought your website name from godaddy it doesn't connect yet to hostgator so he has a video right here just type in how to connect a domain name to hostgator he's the first one here and click on the video and it'll guide you through how to make it actually work but most people probably bought their domain name right from hostgator so um this should work perfectly so we're gonna take a little bit of break now and when we come back we'll see if this website works all right so we're back and we're gonna see if this website works and we go to it and the website does work so we have now it's online dot com actually online and what are we looking at right here this is the default version of wordpress so this is what uh 99 of the time sometimes they update it but it will just look like a blank version with some text on it and that's it this is just plain wordpress right and some developers charge 500 just to get you here and they say we got a website and now we're leaving and you know you saw how easy that was to to do so um now all we have to do is log in we can actually close both of these and how do we log into this website yeah all you have to do is add forward slash wp-admin and that's going to take us to the login portal forward slash wp-a-d-m-i-n and press enter where do you get your username and password from we just made it you're right so we put in our username and password that we just made and we press login and now it's gonna log into the dashboard what is all this crap here it's like jumps out at me and what do we do what do we do all this looks like garbage it looks like when i get a pc or something and then it has all these apps popping up where i get a new phone and it has you know these this podcast or this email app that i don't want you know like what do i do you know when you set this up for the first time it's a little bit overwhelming there's a million menus and then there's all this stuff coming up so the first thing you want to do is get rid of all the extra stuff that comes pre-installed it's going to make everything look a lot simpler and it's going to make it really clear you know for the following next step so let's just get rid of all of the extra plug-ins plug-ins are like apps basically pre-installed apps on your website so we have all these plugins that the hosting companies installed so that they can get paid or whatever i don't even know why and all we have to do is click on plugins go up here go to deactivate and apply and now deactivate all the plugins first see how many are installed that's crazy and then go here and then delete and apply and i'll delete all of them so we've deleted all the plugins and now if we go back to the dashboard it looks much simpler and cleaner and not everything is you know popping out at us i think let's explain permalinks because i think uh hostgator still doesn't do the permalinks right so yeah if you look at your website right now at the top it says now it's online dot com forward slash wp admin forward slash index.php and that works fine but you know we want our website to be a little bit nicer um we don't want all the pages to have you know index.php we want it to be you know really easy to remember really clean really modern you know when you go to a website like apple.com and you know it just has you know apple dot com forward slash apple watch it's not forward slash apple watch slash one two three percent you know dot php we want our website to be like that so we want to change the link structure and to do that we go into the settings and there's a settings uh just for the permalinks right so i just went back to the home page by clicking on this right here and i clicked on hello world and exactly what he's talking about it has 2021 slash zero four slash 29 slash hello world but that's like exactly what he said like that's not when you go to apple's website it's just like apple.com forward slash about not apple.com forward slash all these numbers and how do we change that we go back into the dashboard up here and by the way this is only this only shows when you're logged in so this this bar up here is only shows when you're logged in so we can go back to the dashboard by just clicking on it and then going to settings and permalinks and then we can just do post name is that the one that you do post name yeah that will just have the name of the page so if you make an about page it's dot just called slash about or forward slash contact or forward slash whatever the name is um this is also really good for seo and google that way on search your website just shows up with the title of whatever page it was and not a bunch of crazy things it's really hard for people to to see and understand what that page is about so we click on save changes and we go to here and now we go to hello world and it's just hello dash world and this what is this hello world thing doing on our website so by default it comes wordpress comes with a few demo pages and a few demo posts built in um but we can replace those with our own posts and pages all right so now we're just going to go back to the dashboard and let's start actually building our website what should we do first well i think the first thing we need to do is have some inspiration you know what are we gonna build how is it gonna look so let's go to the figma desert so this is a design that we've already come up with um so you know if you go to figma dot com forward slash proto forward slash p it's probably not going to load up anything for them i would imagine right but we're going to show you an example of a design we had made this would work the same with any other website like if we just pulled up a website we wanted to like create something similar to it same idea so this is just a design that we found and we liked and we want to make our website look like this right so you can pull up the apple website or the nike website or whatever website that you want and and follow the same steps to create whatever website that that you want so here is our inspiration so we're gonna keep that up and um we have the images already you know to download they're in the description below how do we make this what is the thought behind making this first i know that you are the fastest web developer on earth so show us the magic yeah so we're gonna need our tools first so we're gonna need a theme we're gonna need a couple of plugins uh to help us design the page and with those two things we can start showing you how to turn the you know the green blocky website we have now into a really pretty design like like what we're looking at there in the in the preview so what is a theme so is that the first thing to get a theme and then plugins plugins are like the apps the programs installed we know that but what is a theme back in the day when you hear theme you would think it was something that would design the website for you and some themes are like that um the theme we're going to use is going to be really plain and basic it's going to set up pretty much where our menu is supposed to go where our footer is supposed to go and like where our blogs are supposed to go but that's it because we want to do all the design results because we want you guys to be able to create a website however you want um not be stuck with a specific theme like you know if we installed a car mechanic theme and you're not a car mechanic that's obviously not going to work we're going to install a theme that is really easy and can be you know can be converted into anything you want so themes used to be really rigid right you still have like car mechanic theme right and you can't do anything with it except for that but now they're super flexible you can make anything with a single theme yeah so uh what theme do you want to use all right i think that we should use the astra theme i think that theme is uh one of the best themes that's very flexible do you have any other theme that you would maybe recommend or is that one good astra's really great they kind of cover all the bases for you and it's really uh really easy to work with so i agree with that all right so we'll go to appearance and themes and then we'll add a new theme by clicking on add new and then we'll search for astra astra and we see it here and we can go to details and preview and we can see it has 5 out of 5 stars 4 4921 ratings i think it has like a million installs or you know it's a lot so always look at the ratings always you know if you're gonna install a theme this is the preview of the theme but this is not what it looks like i mean you can make it look like anything that you want this is what it looks like at first but it gives you the flexibility to do anything so we'll just click install and once we do that we can click on activate and now if we go to the front end of our website we can see that the design is different the theme is different it looks really ugly but something has changed right so we we have a few more working parts you can kind of tell you know on the top left that's kind of where the logo should be and then on the right hand side at the top you kind of have like where the menu should be and now if you scroll down you have you know the bottom footer of the page so the page now has a little bit of structure where before it was just like a green blob with everything in the middle so this is basically the skeleton of the website what we have right now cool so we have the theme and now what's next do we need any tools what should we do so we're gonna install a few plugins and plugins are basically like apps the same way you would you know download an app to your phone and you get you know more extra features or functionalities from that app you know you can download plugins to your website to add extra features you know to your website so we're going to show you um elementor and i think we're going to need a few more right for different functions to the website yeah so let's go ahead and go to plugins and let's add new we're going to add in elementor like you said elementor e-l-e-m-e-n-t-o-r elementor is a visual designer plugin and we can see it has five million installations 5763 five-star reviews um so we're just going to install that now but it basically allows you to make your website visually so we're going to install it now and activate it all right and they want to give us a getting started introduction but we don't need that what is the next thing that we need to do i think we could get the plugins later maybe if we need any i think we might need a form plugin so that people can type in their name and email address but i think we should do that once we cross that issue or problem what do you think is next if we don't need any more plugins for right now the next step would be to make our first page our homepage make our pages so we go to pages and pages are like yeah your homepage posts are like blog posts so we definitely need pages first so we'll go to pages and we can get rid of these pages they're just sample pages so we can click on this and then go to move to trash and apply and then i like to delete it completely from my website for some reason and delete permanently imply all right then we're going to add new pages so we're going to add new and what do you think the first page should be first page has to be the home page of course has to be the home page so i'm just going to type in home all right and then just click publish set it usually what i do is i'll go to page attributes and then there where it says default template i will change that to full width um and what that means is by default um your page is kind of crunched to the middle and we want our website to look nice and modern we want the images and stuff to go all the way across so that's what full width means and the other thing i do where it says astra settings for the sidebar i put no sidebar and for the content layout i put full width stretched and that's just you know i do that to make sure that everything is always all the way throughout the page and nothing ever gets stuck in the middle so basically the elementor will have full control of the entire page instead of being like contained to a very small area all right then you click publish and publish again and now we have that first page published so would you create more pages at this point or do you jump into um actually creating this page what i like to do usually is i will make the home page first because with elementor once you have that first page done it's really easy to take elements of that first page like you made your header you you know you made your columns you can take that and recycle it and reuse it on your other pages and makes it really easy to build your other pages once you have your your first page done so i always start you know with the home page and get the home page all done and out of the way okay cool so you want to do the home page first right now edit with elementor yeah let's do it all right so click edit with elementor and we'll begin creating our first page so what is all of this stuff right here yeah so what you see right here in the middle is the actual website as it looks right now your home page which is it's empty on your left hand side you have all your different tools you can use you see you have headings images videos buttons dividers spacers google maps these are all things that we can add into uh into the website there are some extra stuff that's locked you know there's a pro version of elementor that you can add if you want extra stuff but you can do your whole website with the basic elements that it brings so you know we need to start creating sections creating columns and it's all going to be really simple we'll just follow along with the design and we'll copy it pretty much exactly anything that you see on this left side can be dragged into this right side and create things but most people don't understand you're telling me this before when we're talking most people don't understand how to look at a website and how to break it down in their mind so how would you break this website down in your mind give us some examples of uh maybe the different rows and columns and how to really think about it all websites you know any website that you go to is kind of made the same way so you have your rows which is from left to right imagine it as an entire section and then that row can be divided into different different columns so for example right there that is a row that has two columns in it has a text column and it has an image column so it's it's two stacks of things pretty much and then inside of each column you can put an image a heading a paragraph a button so here we have this section and you know you can kind of think of like imaginary lines going all the way across with text on one side and an image on the other so it's two columns if you go to the next section you see that it's you know just just one column with a picture in it if you go to the next section it's it it can either be one column with a gallery and it's probably what it is or you could also do this by making three columns with three images in it um to kind of make it look the same but i think that one has a slider so it's probably just a gallery plug-in because it has a little you know clicker over there to scroll through so we'll show you how to add that in and then the the main one the first one is just one long section with a background image and then it's just one column with text in the middle the button and then just a background image pretty much exactly and it'll make more sense when we get to it and just know that we're not going to recreate this website perfectly we're going to get 90 you know 80 90 percent there and it'll look great but we want to do it all within what elementor can do without any coding or without having to upgrade to elementor pro so that's what we're gonna do it's still gonna look good uh emanuel said that this was one column so we're gonna add one column and then we're gonna add in different things to it like some text maybe a button here an image in the background and we're gonna do all of that so we go over here and this is where the one column is this for example down here would be the two columns so this would be one this would be two if we wanted to make that section that would be here but we're making the first one so we make that and then what's the first thing that you do in order to uh build this how should we be thinking about this the way that i think about it is if i want to make it just like that okay so what needs to be inside of there we know we need a small text at the top and yellow we need a heading that's a little bit bigger under it and then we need a button under that so i start by just you know grabbing those three things and putting them in the column all right so text heading button so we go over here we can click this button here and then so we have just some text let's find some text editor right and then we can get a heading under that just click hold and drag and you see this blue line and then after that maybe a button so we go button there all right so we have our text heading a button but it looks whoops it looks nothing like this so what's our next step the next thing we have to do is we're going to add we're going to space it out so that it takes the correct amount of space like it does there it's not so so cramped and after that we're going to add a background image it's going to get us a little closer to how how it's you know looks in the picture all right so click on here right the whole section and then what and then we're going to go to height height um and then i i this is the way that i like to do it you can do it with padding as well but i like to go to minimum height and then there's an option that says vh vertical height that's that's what i think it means and that pretty much means you know what percent of the screen do you want this section to take up um and we can put something like 90 probably i think it's what it looks like over there it takes up a lot of the screen um and the reason i do it like this is because this way no matter how big the screen the person uh checking your website is on it's always going to take up the same amount of space on their screen wow that's a really pro tip because i usually put in padding but you're right it's so much easier just to put in the height the percent height which would be really good all right so we have our percent height and now do you want to add an image to the background what should we do so let's let's do the background image first because you know that's going to get us really close to feeling like we're getting you know to the design part let's plug in the background image all right so to do that you click on edit section then you go to style and background type we can go to classic i believe and then here's an image just to put in an image and so we can click on image and all the images are in the description below or are there places to get cool images that are copyright free for sure so you can go to unsplash.com that's a really good one so if you search desert just you probably find similar similar pictures um if you have a business or an idea you can search you know things that are related to your business whether you're a mechanic or a doctor or a florist you know these are all different uh pictures that you can use um there's tons of other ones like uh you know pixabay is a good one pixels.com is really good and all these websites kind of work the same they have the search bar uh you plug in pictures of what you're looking for and there's tons of free images that you can use on on your website and they're really good really high quality images and a note about images is that if you click on them you don't want to get the super huge original size because that will make your website slow you probably want to go with a large size which would be good what do you recommend um in terms of how large the image is yeah usually remember the the bigger the images the slower your website might load so usually um anything that is at least a thousand pixels will look pretty good so usually you know between medium and large works perfect so medium or large is good and all right let's upload this image so i have all the images already so i'm just gonna go to the desert the main page and then say the main one and then open it up here and we'll insert media all right why does it look like crap though what's happening the picture that you uploaded is a lot bigger than the screen you're looking on right because it was probably a really professional picture taken with like a this awesome camera so by default it's kind of like putting the real size of the image um we need to adjust it so that it you know it's a size that fits on monitors so there's a couple of options there where it says background so we have position so i like to put it in the center um we have to see if that looks the same as as the one that we're seeing there and we see we get a little bit closer under attachment if you wanted the picture to scroll you can do fix and that will make the picture move which is kind of cool um and then under size i put uh cover usually the cover works that kind of makes the picture fit in ah so that's looking much better looking close to this all right so what is next all right so we have the image looking pretty good pretty close uh all right the next part is let's actually change the content the writing to actually say what it says on on the other one so join this you know let's make join us so we click right there on the element and then you can edit it there on the left side join us and then it says explore the desert so just click here is that capital do you want a capital explore the desert explore the desert and then it'll say learn more by clicking on it and then going to text learn more learn more okay the next thing would be to now make it look like that so we want the join uh join us to be in the correct color we have oh yeah the colors are perfect and we have the fonts and everything awesome so ffb 88.2 that is the color what the hecks is a hex color that's the color code of that exact color so if you go to style all the styling options for the element are there so content is the actual writing and then style is what it looks like all right so we're going to style it what was it it was ffb882 and that should give us the exact color ffb88 ii will give us that orange color and what i like to do is if you go back to the color options right there and you click the little plus symbol it will save the color so we don't have to type it in every time that's pro tip right there there you go that's like a oprah aha moment so you know yeah so now you don't have to copy you know if you find a color that you like for your website that looks good with your background picture it can be obviously you're making your own website it doesn't have to be this background picture in this text but you know you can save the colors that you like so you don't have to keep going online and searching the what color it is nice all right so let's go back to what this looks like and uh did you like the join us font or no the joyous font i like the explore the font i think looks a little bit uh dated okay so the joyness font is pt sans regular let's see if we can find that so we go here right and then we go to typography that's a fancy word for font um and the family we can type pt sans right and there it is but why doesn't it look like it doesn't look exactly like that is there a way to get it a little bit closer probably to make it a little bit smaller and we need to move the letters further apart so under size we can mess with the size okay and make it look as close as you can and then under letter spacing which is the last one you can adjust the distance between them you can see it's like a little bit of distance cool and then a little bit more less yeah just so that it looks as close as as you you want it to be to the to the yeah and then uh for i don't know do you want to try to get that line in the front like it has there no i think we need to uh i think we could just forget that or we can add some dashes in front of yeah that's what i was gonna say like okay i think we need to make it a little bit bolder with the weight and then yeah we can make it so it has these lines in front of it what's the best way to get that line in front of it that's a little advanced try just adding the text and see if how that looks yeah so we could just go like this oh that looks really bad so you have to be flexible with it and some things that you can do some things you can't do we can obviously do this but it may just take a while uh one thing that we can do is we can add if you wanted to for some extra credit add an intersection right to this and then add a line on one and then the joyness on the other but we're lazy and we don't want to do that right now it'll take a while so and then a mobile is gonna look funky and then you have to adjust it for that exactly so sometimes you need to be a little bit flexible on what you can or can't do or what is worth it especially in a tutorial where people want to save the most amount of time all right so that join us looks good to me um it's not exactly the same but it's close i wanted it to be a little bit bigger because it's kind of hard to read here for me so i wanted to be a little bit bigger and then we're going to do explore the desert and you want to choose a different font what should we do for this exploit or are we done with this join us let's we're going to explore the desert and then we can revisit the joyness if we see that it looks wonky once everything is else is set up so yeah we're going to make the text white all right so style and then make the text color white i don't think we need to add that white as a global color right pretty easy to remember that one yeah then typography fancy word for font we're gonna make it bigger for sure perfect 70 looks good it's 69 but you didn't want to say that okay 70. do we like roboto i like roboto yeah roboto is good that's the font that google uses right i think so i think yeah i think that's the font cool we'll use i sometimes also like mont srirach there's there's a oh yeah so that one's kind of cool or roboto is kind of cool which one do we like better roboto maybe yeah yeah roboto so we have that that looks cool it's looking like this but different because he didn't like uh this uh serif and all right what's next next is the button so the button it has to be transparent and it has to have a white outline so we want to make the text white we want to add a little arrow icon we want to add a white border and we want to make it transparent those are all things we want to do to that button all right so how do we do that let's start with the arrow icon uh right there under button there's a little icon option and we can click a little circle to use the pre-made ones for us there's a ton of free ones and just search arrow and we just find one that looks similar that arrow over there maybe something like this one or this one oh yeah that one looks really similar yeah so go with this one we'll insert it and then we need it after how do we do that right the next option right there says icon position before change to after after got it all right looking close and then what's next do we you can space it out a little bit cool and i think for the icon part we're done so next we're going to make the we're going to add the text is already white so we're going to add the white outline so you go to style right and then border type solid border type is solid that'll add a solid around it radius of two and then two four border width oh radius uh for so the border width is you know how thick you want the board to be and then the radius is how curvy do you want your button to be so if you put if you put like a hundred it'll turn it into like a little pill see um we want ours to be just more square just a little bit curvy so that looks really good so two three somewhere in there then oh no my webcam's freaking out internal temp too high and my camera got overheated so um it's just gonna be i admitted well um doing this right here and he's laughing at me he's laughing at me uh all right so what's next with a button okay so we have the outline the color uh the arrow so right under where it says color a little bit higher up on the button options we're going to choose to make it transparent so to do that on the bottom there's a little under the color slider there's a little uh checker board slider and if we slide that all the way down it makes it transparent look at that looking very close to this what we're copying is a picture so obviously it doesn't move but probably on our website when somebody hovers over the button we might want it to change a little bit so they can kind of know that it's clickable so we can click on hover and we can make our button look different when a mouse is hovering over it so we can do that by you know making maybe the the background color a little bit darker just so that it kind of like fades into a little bit black and then that way people know that you know it's clickable oh so we'll go like background type or color right here yeah and just make a little bit probably like a little bit uh darker and then maybe yeah like halfway halfway halfway transparent oh there it goes and then uh black i think black will look i think black will look better since the text is white probably oh hold on i can't see where the black is ah let go okay so black and then transparent like halfway like that oh cool i like it maybe a little bit less boom all right cool just enough so that people can can know all right and at this point we're getting close we have all the text we see that the spacing is kind of funky you see that the the right oh one more thing should we should we sorry should we change the typography of this also this button oh let's check what it is yeah let's do that yeah i think it's the default maybe we can go to the pt what was it sans yeah yeah that look a little bit yeah that matches a little bit better with the um now yeah the spacing how do we do that spacing's sort of messed up so there's a lot of ways to do it the easiest way to do it would be to add a spacing element which is just literally you drag and drop it in and then you can add space or also there is this thing called padding which you can add to any part of any element in any website and that's just spacing on the actual element so whichever way you think will be easier cool i think that adding a spacing might be too big so let's do some padding you think yeah okay show them that all right so we'll click on this and uh this join us is not very far maybe a mouse a mouse distance away so i think it needs to be a little bit closer right so we can click on this and we can go to advanced and then for padding for the top we can make it would you ever make it a negative padding or would you change something else with it or i think sometimes for text boxes it adds spacing when you're in like in the design mode but if you preview it it's not there yeah so if we maybe preview changes that are pressing on this yeah just to make sure all right so we have some of it and uh let's see it looks yeah i mean it's looking pretty good the joiners could be a little bit closer i think so i think what we can do maybe is go to content or style and go to typography maybe and for the line height can you make it yeah so we can make it 0.1 so that'll change the line height a little bit and then maybe we can make the line height for this the same way so click on it go to style typography line height for this just so it kind of gets rid of all that extra space extra spacing and then we can control the spacing ourself maybe let's preview that okay yeah so it did uh get rid of some of that space so this doesn't look a line that's joining us uh to the explorer what else what do you think we need we probably want to add a little bit of space under explore the desert for the button right that we can do with padding probably yeah we go to advanced and then go to pad click on this go to advanced and padding and then we'll add some to the bottom right maybe like 50. unlink the oh unlike the values nice thank you 0 0 50 0. nice all right the join us maybe add like five pixels of padding on the left hand side to scooch it over a little bit right because it's a little bit weird over here it's yeah going over there so how do we do that we go to advanced padding and then on the left side we do like five pixels you think all right good and then um the button what does it look like here i guess there's a little bit more padding we'll make these all equal distance so we'll just click on this explore we'll do top 50 also like that perfect perfect we'll uh preview that and we'll see how this looks i think it looks pretty good actually and our button works and everything and um yeah what's the next thing we do all right so let's look at the next uh section of the website all right so we have this line here we have this headline this regular text and a button and an image so um what do we need all right so we want to make we want to add a section that is two columns but actually we need to no that's actually not right because these two columns are full width which means they're going to go all the way across and if you look at here this section is kind of like in the middle of the page so we probably want to have one column and then add columns inside of that and that will force it to be in the middle of age ah so we add one column because if the two columns were there it would go all the way across it would go all the way like around here and here instead of having this blank space right right exactly all right so add one column and then add an intersection into it so this is kind of like nested columns you know columns instead of columns so if you if you close the elementor toolbar uh there on the left that can you squish it out of the way with a little arrow that it has there oh yeah you'll see oh it takes away the guide well you would see that the big the main column stretches all the way to the end but the inner column stays in the middle which is what we've done ah gotcha yeah so then the next step would be just the same we're going to drag and drop each of the elements that we need a little divider line a title a paragraph and a button divider title paragraph button divider title paragraph button all right so we have a divider here and then a title did i put that in the right place yeah i think and then a paragraph which is a text editor and a button and then on the right hand side we're gonna have the image an image so an image okay and let's uh put in that image real quick just so it looks good so we'll choose an image um we'll upload files select files you can add any image that you want but this image do you remember what it was i forget desert beach i think oh yeah that was it we got it okay so there it is and yeah it's looking pretty good we need to change some things how do we change this this divider goes doesn't go all the way across it goes maybe i don't know 20 15 um how do we what do we do yeah so if you click on it you're going to get the options to edit the divider and then you have the width option right there and kind of make it look as close as possible what do you think 12 13 let's say 13. that looks good all right and then whoops we have let me change that um into the desert and all this text here so we'll say into the desert change it into the desert um and then some text so i'm just going to copy and paste this text perfect we have our two paragraphs that two paragraphs okay something like that and then we have that how do we make it look like this we can see the spacing spacing's super important we can see the spacing's a little bit different on the top text is a little bit different so how do we how do we make this good yeah so we want to add spacing to the to the main section not the inner column so we click on the options for that one and i think probably like 50 maybe so you go to advanced and what's the difference between margin and padding margin is a space outside of the element and then padding is inside of the element right okay yeah exactly so padding's on the inside margin is on the outside so we'll add 50 to the top and bottom maybe a little bit more 100 something like that right yeah it's yeah it's a good amount of space how do we get this this font right is it is that the same as this heading font or it's a little bit smaller i think it's already a robot all right we have to change the color and change the size um okay so we changed the color so that was uh some sort of dark gray so we'll go to style and change the color here to dark gray ish and we can save this as our dark gray all right and okay we didn't like that font though so um is that good do you like that into the desert yeah the font is fine and then for uh the paragraph what is also the same gray yeah let's see it's a little lighter so i think it looks good like that and for the button we can actually copy and paste the styling options from this button to the other button and then just change it from white to black so oh cool so we go edit button we right click and then we can copy right and then we go here and we can paste style and now we can't see it how do we see it so we go to style you gotta switch it from uh from everything white just switches to black so that we'll make the text color black instead uh we'll make the border the border color also black instead black border color um black which it does and then well uh it's the hover color is still great yeah that's what the right one is spacing do we have a spacing do we have uh this oh does it have an arrow yeah it does it does okay yeah so we need that after uh instead of click here it should say something learn more all right is that good perfect um i don't know if you want to change the hover color so that when they hover over it maybe it turns into like a light orange kind of like uh all right the orange we had for the join us maybe okay so we go hover and then color to to go to your global colors you just click the little globe icon right there click on the little glow yeah right there so we'll do an orange but we'll make it lighter yeah is that gonna change my global color or no no it's just gonna it's not gonna change your global color perfect oops yeah it's like a little transparent looks good all right and that looks cool i like that all right so if we preview it we should see if this new section looks similar to our all right so let's preview it and let's see what we have here all right so that looks pretty good it could use maybe a little bit more space between here you think i agree um and anything else what we need to do is maybe on these two columns add maybe 20 padding to each to kind of just squeeze them a little bit down and i think it'll look almost the same okay cool so we'll go here and then we will click on this right well we we want space in between them so instead of adding space uh you know the padding to the entire section we want i would add it just to the left-hand column and then again just to the right-hand column oh cause i was thinking we go here then we add the column gaps you ever do that you know what yes that's a that also works that's very good let's try let's try wider oh that works perfectly that's the good thing about elementor there's there's multiple ways to to solve an issue you know so you you're not forced to like hey you have to know how to do this one specific way there's a lot of different ways you know to get things to work exactly more on one way to skin a cat as my mom says all right this one it seems pretty easy right we're done with this one right so this one seems pretty easy what do we do here yeah so we're gonna add one section by itself and we're just gonna add one image in the middle and i think maybe we might need to add a little bit of spacing but we should that should get us about there image in the middle upload file select files um and then we have the surfers and we can insert media there is there some sort of width there it goes that okay so to get it to look exactly the same we probably need to do an intersection with just one column at a hundred percent so how do we do that get rid of this one yeah delete the picture delete we're going to add an intersection in there but only with one column we can delete the other column okay so we delete this column and now there's one column in here you add a picture in here and we're doing it this way because that inner column keeps us keeps the picture looking like it's in the middle got it yeah but if everybody watching if you want your picture to go all the way to the ends then you don't you can just put it right in the in the right in the middle without the extra column so we do this one and then we change this outer one to have padding or what no we just click yeah click that one right there and then do 100 on that picture like click on the picture itself yeah yeah 100 do 100 and then click update or preview yeah and then it should look it should look haha there it is so what happens is that that inner column doesn't have is not full width it's already by default set like the center width that we're using so we don't have to worry about adding padding and stuff it's that one's already set up got it let me try to turn my camera back on wow i didn't think these things overheated okay i'm back you should put a little fan next to it i know i need to do something it never happened before that's so weird they advertise that it can go forever there's too much going on it can't it's kind of it can't handle it like uh so much knowledge the knowledge exactly all right so how do we get this gallery in here it's not going to be exactly the same but can we get close to doing something like this how many images do you have for the gallery is it three or is it more than i just have three okay so in this example you have the little arrows there which you know if you had more pictures the ideas that you would click and they're like a scroll through um so in this case we're just gonna have three so we're gonna use the gallery we're gonna add in the title for to say gallery and then we're gonna add in the actual gallery element to it so really this is this looks like three columns but it's really just one because we're adding the gallery like widget right right if it was if it was three individual images then it would be three columns but because it's a gallery of a lot of images that you might want to have then it's it's actually just one gallery instead of you know individual pictures got it so let's add something new let's go up i just did three let's add something new let's add this and then we'll add a title to it called gallery right we're going to have the same issue again where if you want it to be nested in you have to add that extra column in there got it yeah that column that double column thing is what's giving us that effect that like it's staying in the middle of the page if the page was not full width then we wouldn't have to do that but then the first picture would also be squished down so this is a way to get both things in one in one spot so we delete that column so we have column nested in a column and then we can add the gallery right let's just search for gallery and basic or this gallery there's the elementor gallery which is that one and then there's a default wordpress one which is not that great and then there's a pro version which is really good but you have to pay for it so we're gonna go with the basic out i had to go with the basic gallery which is also really good i like how you broke that down um we will select them and wait first i need to know which ones they are they are hand van and cactus and band and cactus okay so we have hand you can hold command or control command if you're on a mac control if you're on a pc uh car all right then we'll press open and we'll create this new gallery and we'll insert this gallery and now it looks messed up what do we do right so we we want to change the settings so that it it kind of looks the same so um image size we probably want to do uh the full size and that should okay and then for columns for columns we want to do three instead of four all right that looks really good and then we're just missing the heading there where it says uh gallery so we'll go to heading we'll drag it in here and we'll type in gallery we'll go to style and we'll make it that um uh gray color right so go to text colors dark gray and what typography is it roboto is that fine we probably just need to either make the gallery go more to the left or make the title go more to the right okay so we'll make the title go to the right since we're here we'll unlink these and then we'll say six on the left i'm sorry to push it over each other oh yeah yeah sorry ten ten all right and then we can preview those changes and we can see if it looks good so we have that that gallery maybe it needs a little spacing on the top and bottom but other than that looks pretty good so let's add some spacing let's do this one doesn't really matter which one you do uh advanced we'll do margin or just do margin 50. maybe 75 75 yeah all right to the top and bottom that'll give a little bit of space and uh we can update that this will update your entire website and we can preview it so what does this look like and it's looking really good it looks pretty good all right so the next thing that we're gonna do uh we're gonna make it mobile responsive so it's gonna work on your phone your tablet your pc everything so we want it to work on small devices how do we do that yes so on the bottom left-hand side you have a little icon that says responsive mode and if you click that you're going to get options for tablet and desk and mobile devices i believe cool and you know what happened here and how do we fix that so everything looks pretty good except for right that top one so that's the only thing that we need to change right yeah and the thing is that when you change the settings for mobile it won't actually affect everything else that we've made so it only affects the mole version so you know you don't have to worry about changing a font or changing the size it's only going to affect you know whatever styling you change for that version of it right and we can see that we have this little mobile if you can see it right here we have this little mobile icon here and it's all squished like this because we made it uh the line height just you know not very tall so i think if we go to content nope if we go to style and go to typography the line height and we can see that right here it's mobile so if we change that then that looks pretty good there's anything else that we need to change here if you scroll down let's see how that looks fine that looks good i think everything else looks pretty good everything else looks pretty good so we're going to update that and that's only going to change on your phone that's only going to change on your mobile devices um we can see what it looks like for the tablet but i think it should look fine so tablet most of the time the tablet one will look pretty good especially with tablets now that are getting bigger yeah and i think the ipad by default it always pulls up the desktop mode if you're holding horizontally yeah so okay so that looks pretty good the next thing that we need to do now that's done is um we need to make other pages so we need to make our services page which looks like this but as we can see uh we have some things that kind of duplicate so what's the best strategy to go forward with this yeah so since we already did the hard part of creating all the sections on the home page we don't have to do that again we can actually reuse the sections so we can save them as a template pull them back up on the next page and reuse them on the other pages of our website right so we can reuse this section right and then this one is just this one but switched and then the gallery is the gallery again and we can just switch the images so we can save uh would you also save the top section or you know we can save it because it's pretty much the same as the first one we just have to remove the extra text on the button but everything else is basically the same got it so let's do that so how do we save sections here right so i would actually just save the entire page ah pro tip right there so just oprah aha moment uh click right next little arrow right next to update and then template and then we just save this as home right and we save it and now we have that entire home template saved now that that's updated let's go to the home page and see what the home page looks like real quick just to see if it looks like what we expect it to look like and it looks like this so what is the issue here what do we do here i know that we haven't done the top or the bottom and we'll get to that later but how do we make our website just look kind of cool like you go to the home page and looks cool yeah so you have to tell wordpress that yourdomain.com is the homepage because right now it thinks that your domain home is the home page so if you do slash home it's going to show that as the as the design that we did um we just tell it hey you know what this page is actually the home page so the page that we named home is the actual homepage how do we do that so we're going to go back to the dashboard and we're going to go to the settings and we're going to click on reading and there you see uh your latest post we're gonna click a static page instead and for the home page we're gonna select our homepage all right so we can save changes here and now hopefully when we go back to our home page it will be the page that we named home as the homepage and it is and that's looking super cool so now how do we make another page right so the easiest way is from the toolbar where it says new is click new page that's going to pull up for us to create a brand new page all right so we'll name this about and then for the template we'll make full width and then you said the the sidebar no side no sidebar and then there's one other thing the layout will be content layout stretched content layer full width stretched all right all right then we publish this and now we can edit with elementor all right now what now we're back to the blank page that we started with just like the home page um but it's a lot easier because we can actually just reuse the template so you click the little folder icon right there in the middle of the screen and if you go to my templates those are ours and we can click insert and click yeah all right so that took the whole thing and put it into this about page but it doesn't look like an about so what should we do to make it look like this about us first we're going to delete everything that we don't need so we can delete that join us part so just click or right click and delete and delete this one too all right and we'll put about here caps you think or well actually a little pro tip if you can leave it blank if you want and then if you click the little uh icon next where it says title it's a little little gray uh bar right next to where it says titles like a little disc yeah right there dynamic tags and then click oh that's only in the pro version oh whoops never mind yeah typing about see such a pro he uses the pro version on the pro version it automatically pulls the the page name oh that's cool so we'll have a link to the pro version in the description below and you can do all types of cool things all right so and then the next thing we want to do is make that section less tall so that it matches the demo so click on the whole section and do you think we should do a vertical height or do you think we should do a pixel height or some other way i think vertical is good probably like 20 or 30. so maybe 50 yeah there and then let's see and we have about us so we'll do about us all right let's change the background image so click the whole section style and choose image and upload files select files you're gonna have this um about page right here so the about header is the one and we open it up and we insert media ooh looking pretty good all right so now we're gonna look over here and we're gonna see this section right here so how do we add this section here well it's already added basically right so we could just say an unforgettable experience and um see services and then change the picture so let's do that so now now probably a good time to show them how the button link works so now we have somewhere to link to so for example uh where the link uh little symbol is there you can type in home page like if we type in home it'll automatically generate the link for the home page and once we have the services page we could link it there instead but uh that's how you set up links in there ah cool so once we have all of our pages they'll show up here if you start typing the page like i start typing about you know well yeah the about or the home then we can link it and then people can click on the button and they'll go to that page yeah if you want to link out just copy and paste any link into there uh all right let's upload our car insert media is that the one yes that is the one and then how do we get this this is like the same as this right but on the other side so how do we how do we do that oh we just need to duplicate do create another one of these inverted so you can actually just right click on the inner section right there that one yep and then click duplicate and it will make an exact copy of it and then you can drag and drop the column across and it will switch click hold and drag nice and then let's add maybe some spacing up here how's the spacing maybe a little bit more spacing to the top here by clicking on the whole section going to advanced going to margin top 50 maybe bottom 52 yeah uh maybe 70 75 anything bigger cool so we have that and that but we need to change the text which is into the desert and put the camel in there oh no yes into the desert and put the camel in there so we'll say into the desert and we'll put the camel in here instead all right what's next that looks pretty good that looks like this what do we have next oh the gallery gallery we already have done so it's just switching the images out for the new ones all right so we delete this right because we don't need this section and then we have this gallery which is a little bit too much space so we'll go here advanced there it goes and then switch out the thing by clicking on it right and the images are the camels atv balloon what do you think is the hardest part of the whole tutorial the hardest which one do you like the least uh probably the hardest part is gonna be just understanding all the styling settings that everything has because it's a lot but once you do it once you kind of don't have to think about it anymore because you just you know it gets saved but you know there's a lot of different colors and fonts and you know pictures and all different settings to make it look just right so that takes it's not difficult it's time consuming to get it right um but once you got that figured out you can pretty much do whatever you want with the website nice i think the hardest part is the header sometimes like getting the header and the footers right with all the fonts and everything is you know sort of annoying or just the customizer itself is a mess i feel like in a way okay so how do we get this section in the easiest way possible yeah so the easiest way is going to be we're going to just copy and paste the heading copy and paste one of the buttons we've already done add it into a new section and that's it oh like copy and paste this yes add a new section and then copy and paste this right here copy come down paste put that in the center and the same thing for the button then add some spacing to it by going to advanced margin top might as well do 75 because that's what we're doing and then book the best possible desert tours all right and um a button copy can you paste in a button here yep but you can you sure can center it right there okay adjust the spacing probably a little bit oh no that looks pretty good actually maybe make this thinner do you think or maybe it won't go is it the same on the other like is it different on the other on the on the demo or the message a little bit yeah maybe a little bit smaller a little bit smaller so to make it smaller go to typography go to size maybe there 27 fine and then go to advance and i'm going to add a little space to the bottom by going margin 50 40. and so we're done with that page so that was super fast now we need to make sure that it is uh mobile friendly yeah and we already have the mobile settings for the home page we actually got that moves over here as well so you can see that the the font on that first title is big but it's not squished so right and we can always make this smaller too if we wanted to um make it smaller by just clicking on going to style and then typography and that will only change its mobile size if we wanted to but we'll just keep it like that because i think that's cool and uh everything looks good yeah yeah it looks nice all right so we'll update that we're done with our second page and um we can preview that see what that looks like and now this is our about page and it looks super good maybe a little bit space on the bottom there which is easy we can just go here uh to the whole section and then add 75 to the bottom also boom that's looking great so what is the next thing to do uh the next page is server what services services so this is looking a lot like the other pages really um where it's just this on the left side and then the text and it just adds this right here uh which would be pretty easy so i think this is going to go fast too should we duplicate this uh entire about page for this yeah we you can let's just save that about us to the template as well right so we have one you know that one's actually a little bit closer to the services page so we use that one right so we'll save this as a template and it's all like building blocks so once we get our home page and about page we just start building building buildings section they keep on adding on top of each other um alright so we're done with this how do we let's uh go to the home page and uh how do we make a new page what's another way of making a new page you can go to the dashboard and you can go to pages and then go to add new there you are and this was called the services right services page all right and then we do the same thing right we do default template full width sidebar no sidebar full width stretch and then we will publish this publish and edit with elementor yeah now when we load in the about template it's going to be really close to the services page so do this my templates load in the about and import all right so now we just have to change it here okay so we put in services here so one cool thing is that if let's say this was being done with elementor pro and you had the dynamic tag it would have automatically updated the name for you on the template so it saves you that you know that that bit much more time is this the same header as the bout yeah about service oh what am i doing here oh there it goes sorry i'm like what am i looking at here got it i have too many tabs open get too similar yeah um all right so we have our services so all you have to do is change this uh image out that's super easy by uploading select files i have it all organized in this nice folders for you so all right so it looks good nice perfect and then we need everything on this side so on the left side so that's fine so we're just gonna i'm gonna delete all these other ones um and i don't think we need a gallery or anything no it goes all the way down for the left side so i'm just gonna delete everything that we don't need here what do we need how do we make this show look like this let's get rid of the little line if you don't need we only need one paragraph also to make it look more similar so just one paragraph on there uh we need to change the button to say book right with little arrow nice and if you look at the picture you can see that uh on that one the image section is it's like uh 70 30. it's not right down the middle if you hover your mouse right over the middle of the two columns you can drag it over uh and when you switch the image out it will it will look nice so it would look like that it split the right way so what do you think 35 65 something like that yeah let's try that when we plug in the picture we'll know for sure if it's if it looks right okay so we'll just say book we'll make it easy like that put in the picture now so we'll do the surfboard guy first and you always want to do you can explain to them why you want to just do one section and not try to do all of them at the same time yeah especially in in this one since they're all going to be the same instead of repeating it we can you just have to design one time and then we can use a duplicate function to just duplicate the design that we fixed one time and just switch out the picture in the content so you don't have to redo the design and add the column and add the picture in every single time right so always be thinking about you know in terms of being able to basically copy and paste each section into it all right does that look pretty close i think maybe this text might need to be a little bit less or smaller right yeah i think it's like five or six lines on the on the demo so maybe just get rid of a few sentences and you can also alternatively you know make this um text smaller or bigger or anything like that to fit properly she made it smaller here so i'm just gonna put surfing and then the tricky part is i mean that looks right but the tricky part is this section how do we get this next to this or how would you do that okay so i think we're gonna need two text boxes probably um two headings i think will be the easiest way to do it two headings two headings on top of each other so just one before you do that go to advanced under that heading go to advanced okay so to undo that's important how do you undo uh if you undo on the bottom left-hand corner there's a little clock with an arrow and you can go back as many steps as you need all the way back to the beginning if you make a lot of mistakes um but the the text can actually stay there just in second options are for that one if you go to positioning you scroll down a little bit positioning click there and with uh huh with custom and then you put percent ah this is interesting yes it will only take up 50 of the space is very good i would have done it a different way i would have done um added to an intersection into it but this is actually cleaner and better the the reason this is better is that in mobile view it will still keep it next to each other it will not stack the columns so now you duplicate that one huh yeah they're right next to each other and they will stay next to each other genius and one column that's i just wrote tip right there i wasn't sure if that was like only on the pro version so but no no thank you elementor for all this stuff again i'll write him a note all right and then we'll make it black yeah i'll make a black black too uh maybe a little gray okay so now how do we how do we get it looking a little bit better like uh probably make the three hours to be a little bit smaller right yeah three hours all right we'll go to style we'll go to size say that maybe make it a little for the weight maybe make it a little yeah that looks better and then for this one we can make it a little bit smaller right and how do we get it to align right so now uh the three hours you probably have to add a little bit of padding at the top just to push it down a little bit all right so padding top do 10 nope that looks pretty close five four four five five all right and now how do we get this three hours closer yeah so right now it's 50 50 we can try maybe uh 30 70 just kind of okay so we go to advanced again and then positioning we can say this is actually 25 yeah perfect 25 and then this will be the rest 75 right yeah it automatic it's automatically gonna slide it over and then yep there you go and then i feel like we need some more spacing here so is it good to go with one of these or should we go with book let's do the other button the button that way the button is always away from whatever is on top of it okay and then we'll unlink that we could do margin or padding right does it matter yeah it'll be the same so we'll do 25 perfect that looks good all right so now are we satisfied with the way that looks does it look like this is that good looks pretty cool before we duplicate this section we should probably check the mole version so that we don't have to edit everything so that's very smart i feel like you've ran into this problem before all right mobile version that looks pretty good and you see how it keeps it next to each other yeah genius it's the little things i agree all right so do you think we should add padding before we start duplicating things because yeah there's spacing between all of them um so what is it like 75 yeah so do you do do you duplicate this entire thing or this inner one let's do the inner one yeah the inner one so that it stays in the and we don't want to have a million columns so let's just keep it all in one column okay that will be cleaner we'll do the inner one and then we'll just duplicate it all right do you think we should add spacing or do you think that's good right yeah no we'll add the spacing to that one and then we'll duplicate it from from from that one for all the other ones okay just at the bottom though right spacing bottom so i can command z right and then go to advanced and then uh padding bottom is that what you meant oh yeah that works i was gonna do it on the top of that this works the same okay so we'll do 75 maybe all right and then we'll see if this works now when we duplicate it perfect pretty good all right so we'll do that how many times one two three four five times okay so one two three four five times all working mobile friendly let's see if we can remember the images this is a memory test right here all right surfboard atv balloons camels couple i never remember that surfboard all right atvs all right you got the next one b b for a balloon huh balloon oh oh he did it as letters you've been watching you've been watching those memory youtube channels beaver balloons c for uh i don't know i know it starts to see camel it's got to be a camera there you go and then uh caravan ooh i named it caravan because i know like a group of camels is called a caravan i thought i was so smart last one d for dancing two people dancing oh d for dancing not c for couple cause that's also c for camels man how did you get so smart watching a lot of youtube videos um like we'll finish the project but oh by the way where'd you study web design about youtube university and they think it's a real thing all right so let's see if we got it right this feels like like a website where i go and i book something it looks legit yeah oh now we need to change it okay so we'll just make up these things so we'll say uh atv ed then sure ballooning is that something is that something uh then taliban okay i don't know how many people would i know i like how this is what one's the ocean it's like where are you um book the ocean all of it for three hours oh we need different prices too all right how much is surfing that's what i want to know 250. okay how much is atv adventures 150 150 nice ballooning if that's a thing 350. 350 the balloon the camel caravan that one's at 99. 99 dude i would book that one that sounds like all those camels you know it's cheaper because it's a group pricing oh oh these are your individual friends oh okay okay and then the ocean 10 000 yeah i mean no it's the whole ocean oh we need to change the spacing here then 10 000. no i got it i got it 10 000. that's steep very steep i mean listen the if you want the ocean you got to pay for it you know i guess you're right let me do this one a little bit further there you go now we gotta change this it's like a it's like a math test do you know your uh no 40 i forgot what i even did 55 no i must have did 60. it's gonna be yeah uh no 60. 40 on this one i can't remember i must say tyler it's ten thousand dollars what can i say i mean i'd book it for three hours the whole ocean all right so we we did that we're done uh oh now the contact page we got one more um let's see does this look good mobile it does right yeah yeah it should nice oh that's a little bit big so we'll do services we'll go to style typography and for the mobile size we'll make it a little bit smaller 65. all right and then we have surfing book atv adventures ballooning what is that called balloon rides hot air balloon there you go ballooning that's fine with me all right update it looks great all right now we have one last page and that is the contact page this contact page right here is difficult to make in the regular elementor you know you can make an elementor pro you could make it if you know some css but we just want to make it easy so we're not going to copy this exact one but the functionality is going to be you know there and it's going to be the same so that's what we're going to do so to make it what do we do well we can add a contact form plug-in i'm not sure which one you want to use yeah i like wp forms personally all right so we'll get wp form so i'm just going to go back to the homepage after i've updated it and i'll go to the dashboard and we're going to add a new plugin again plugins like an app you know you're installing an app and most of them are free and their business model is usually to upsell you um on you know features so but usually the free version is pretty good right so like for wp forms for example you know all the form stuff is free but let's say you want to collect a payment with the form like you want to be able to pay a bill or something through your form then you know that would obviously come with the pro version but all that right which is really nice so it has uh four million installs nine thousand five star reviews we're gonna install that one and show you how it works so we've activated the form and i kind of did this backwards because we should have added a page before we installed the plugin but now we can um we have that form there but now i want to create this page but i guess we could create the form first since we're here so to create the form you go here and you add new and then we'll see what sort of fields this form has it has name phone and enter your message how do we do that we can start with a simple contact form or a blank contact form uh what do you suggest uh i think if we choose a simple and it's gonna already be almost made for us yeah path of least resistance okay so now we have just name phone enter a message how do we get it close to this we're not going to get exactly like this but how do we get it closed i think if you click on name you can probably uh let's see make it simple right and then phone well we really should have email here so instead of phone let's do email you could do phone if you wanted you could change this to phone but really we should do email um but i want this to go all the way across because it goes all the way across here there's just like a column right a row that just blocks it you know so we want to go all the way across so i think that's under advanced field size large and then now we have the name it's within here and i think we can do that by saying hide label and then placeholder name there we go so that's looking a little bit better and then we do the same thing let's do email instead of phone because that's more realistic online i think to gather their email instead of phone so we'll require it we'll do advanced options we'll do large and we'll hide label and then we'll say email and here and then comment or message we'll do the same thing we'll click this we'll go to advanced large uh hide label placeholder and we'll just put message all right and is there we can make a this field small if we want oh that's better yeah then it looks pretty much like that very close at least yeah i think we can just save this uh but first we need to go to settings i believe and go to notifications and then it's going to say where does this message send to you so it sends to the admin email so we want to just you can leave it there but or you can type in your email address here what is a subject when it sends to you contact form from website yeah the the if you leave the admin uh on the email it's gonna pretty much just use the email that you use to set up wordpress but maybe you want it to send to a different email address you just that's when you would type in whatever email address you want and then um from email so who is it from yeah so for the from email if you leave admin email and let's say you set up your website with you know your email gmail.com that's what it will show maybe you don't want people to see your email address um the from email you can literally write in there whatever you want it doesn't have to exist so you could write wordpress ah now it's online.com or service no reply at now it's online.com exactly the downside is that if they do try to reply the email doesn't exist but you can choose whatever it shows if you or you can put your email and then when they reply you know it will go to wherever has to go and then reply to it's going to take that field the email field and it's going to reply so when you're you're replying to them it's going to put in their email address so that works good and then what's the message it's going to send you it's going to send you all fields so it's gonna send you their message um their uh email and yeah that's about it and their name so that's good we're gonna save uh that i don't think there's anything else that we need to do um so we're gonna have right right top right save and we'll have saved it and we can exit out of there by clicking on this x and now we have this code right here but we don't really need to copy it because there's a wp forms widget that it adds so we're just not going to copy it now we're going to create our new page um and it's going to be the contact page and then we're going to embed this form inside the page using a shortcode that was a mouthful but i'll show you how to do it so we click on pages we go to add new and we try to type contact we do everything that we did before full width sidebar no sidebar custom full width stretched and we publish it and then we um edit with elementor you know that page looks a little bit bland right a little bit you guys have to contact us with an image behind it you don't think oh yeah let's do that so let's import what the about page template just so it's the same right we will um exit out all of this all right and we'll change this to contact do you think we should switch out this image or is the image good i like that even i mean if you have other images we could we could switch it out i don't not prepared but that one looks good you know what try put the balloon image back there maybe maybe it looks nice maybe it works let's see which one here yeah yeah that one looks like it should be wide enough oh hey that's why they pay you the big bucks once we have that that looks really cool now we can try to put in this form here i think so we'll add in a column and we'll go here and then we search for wp forms usually it's the one with the the yeah that one usually when you see the little wordpress logo it's like a default that's the bad one when you see the wordpress logo run away um all right and then we have the simple contact form okay so it's too wide but i have a trick we click on this and we go to content with and we just make it i don't know 600 yeah that looks about right 600 and then we need to add a little bit more spacing to the top so we'll go to advanced uh margin we'll unlink we'll say 75 maybe bottom we'll do a 75. what do you think does it need something else uh let's see contact us uh yeah you could write the the phone number on there like if you want to have your own contact info you know okay so we'll just add like a text edit to the top here yeah just like with you know some basic contact details yeah so we could just say you know these this will be a little message your some of your contact details uh you can imagine um that and we'll just center it and what do you think perfect submit okay so it's not you know perfect all right so we're gonna update that we're gonna check if it works on mobile um and that's a little bit too big for me for mobile so i'm gonna go to style typography this is just affecting the mobile put it a little bit like that we could even center that if we wanted to and then look at it and it looks pretty cool simple contact form now if your visitors fill this out it will email you all of that information so they're just gonna put in their name put in their email and put in their message and that's gonna send to your inbox that email you used was was pretty unrealistic i mean we use aol some people use aol it happens all right so we're done with all of our pages they're all mobile friendly what do we do next how do we actually you know it doesn't exactly look like the same thing you know this is a transparent here how do we get it to be transparent how do we how do we do that well there's two ways to do it we can either do it with the astra settings or for the theme or we can try to get a plug-in that will do it for us i'm not sure which way do you know how to do with astra yeah i think so i think you could do it per page on the astra by going to edit page and going to transparent menu or we can go to customize and i believe we can do it there or like you said we could get a plug-in but it's already here so i'm gonna try to do it hard to remember the customizer scares me a little bit uh to be honest with you there's so many sections and they're always changing it and uh yeah so i think maybe if we go to i don't know global header builder we're gonna need to figure this out ourselves the header builder is new so i would click there a header builder okay oh header types transparent nice enable on complete website are they going to make this easy on us i hope so let's see okay i'm gonna publish this and see what it actually looks like okay that's looking pretty good and that's happening on every page i believe yeah all right are you satisfied with that or not yeah yeah i think once we update the colors on the mat and the menu up here it will look good okay cool we have that but now we need to um take away this line right we don't want this line here unless do we have that on any of the pages together yeah it all flows together so we want to get rid of this line so maybe we click on i mean let's let's just go with what we see so if you click on that if you click on oh there it is you click on here and then you click on design okay so we make this transparent there's probably a better way of doing it bottom border is clear okay and then what else do we need now the logo the logo okay so we can oh we can whoops header builder we can make our own uh logo but i'm just gonna import ours right here so we can and it's not gonna look like this it's gonna look better than this so we're gonna select logo upload file select files if you don't have your logo i'll show you how to make one in one second so logo and i'm just gonna say this one and you can't see it because it's transparent but skip cropping and that is way too big so we're gonna make that a little bit smaller say 170. the site title we don't want to say now it's online anymore so we're going to say um off so we're going to turn that off okay and then now we have our logo in there oh actually it just moved it down you have to turn off the oh yeah it's right underneath now display site title there yeah that's okay and one thing is if you look at the preview here you should join us is is touching the logo that's just because sometimes this preview is not perfect so it's good to have you know like tyler open another tab to see what it actually looks like so when you're editing something it doesn't look perfect just open it in another tab to double check sometimes this is what it'll look like really not this this is just because there's not enough space everything's kind of crunched up together all right so that looks pretty good let's see if that paint that looks good on everything looks pretty good and services okay cool looks pretty good all right we can use different logos for different pages if we want but you'll have to figure that out yourself the next thing that we want to do is change this we can't see this menu and this menu is not in the right order so i think for that all we have to do is click on this primary menu and then go to design and hopefully the menu color here it is normal hover and active so normal i think we'll do white that looks great hover i think we'll do like white but like a little transparent so yeah that'd be transparent and then active will also do a white all right and that's when what page you're on actively will be white i think that is good in order to order these we need to do a menu so how do we create a menu from here i'm not sure if it's in here maybe it might be in a different section but there's definite click on the if you click on the little could actually hover over the menu on the there's menus and then we'll create a new one and then we'll just call this the main menu main and then we'll say it's a primary menu and we need to do this in order to order this in the proper order it'll make more sense in a second all right so i'm adding items so i'm going to add the items in the order so it goes about service contact would you also put the home page or no it depends how you want your site to look uh you know most websites the logo will take you to the home page so you can do it that way you want your watch to be a little bit more modern if you feel that your users might get confused then you can have the home page you know be a clickable link as well cool so we're just gonna add it we're gonna assume that your users are you know uh maybe older people or something they don't know to click maybe not older people maybe just dumber people i don't know how to phrase that less computer-timed people let's say um not dumber that's very mean all right so we'll publish that and everything is looking super good we'll exit out of here and we'll look at the website and we'll see how it's doing all right so i like that a lot thing that i want to show you real quick is how to make a logo is there a way that you like to make a logo do you make it in photoshop do you do it in a different way no a lot of the time well if they want a custom logo we'll you know we'll do it in photoshop if they just need something quick that like looks nice i think logo maker work for the world for just you know something really simple you're just getting your business started you want like a little symbol with you know nice font next to it logo makers should be good so logo maker l-o-g-o-m-a-k-r without the e dot com and i was previously making something so what we can do here is we can just search for something like desert so we search for desert and maybe we want something kind of close to that deserty look right there and so you know there's tons of stuff here so let's say this one and if you want to change the color you can change any of the colors here um let's say you want to be that orange or something and then we can click hold and drag and we can just say you know desert something like that make it a little bit bigger put it in line with this and you know make it an orange or something and then now you have your desert logo you know oh no my camera again okay styler stay with me we lost tyler imagine tyler moving his mouse to click the save icon on the top wait no it's just my signal it's not me all right so i don't know i'm having camera issues i need like a send me a link if you guys know how to cool a camera down to a fan or something how do you do this right so you click save the logo and it's going to give you a little prompt and there's two versions the higher resolution version that you can buy or you can download a regular resolution version which works pretty good most of the time for free and it's going to go right there to your downloads and then that file you can upload it to your website and use it anywhere on your website you can be in you know on the pages or or in the customizer where we used it for the low we can use it anywhere on your site right so that is how you make a logo and and we learned how to insert it in there right there so the last thing that we need to do is the footer there's a couple of different ways to do this maybe if we just go into the customizer and we do the footer we'll just create a simple footer we'll put in this logo here and we'll put in uh a menu and i think that's where we'll be able to do that so if we can see that it should be pretty easy um let's see footer builder customizer footer builder and right now we just have this copyright right here but we can exit out of here actually and we want something on the left side and something on the right side we're not going to add in this social media stuff even though we can we're just going to add it here and here so the first row looks like it already has two columns i think if you click the plus on the left hand side it's the uh footer menu copyright uh let's see is there any logo option what the hell click widget one like widget one and then select there click there and then add a widget and is there a logo widget maybe try logo well there's an image uh let's see i'm gonna search for logo our image is the next best thing image is good so your logo is just an image and then we'll add image choose your logo file or upload the logo we just made yeah so we could do this one maybe there's a dark version of the logo though on logo maker you can actually recolor your logo so maybe you have a page with a dark background you make a white version of logo or a white version of the logo for a darker background so you can have more than one version of your logo right so we'll just do the regular logo and then we'll change the background to match yeah so match it fine all right and then go here and then we'll add in a menu footer menu and we'll click on it configure menus from here i think uh it's gonna ask you to is there a footer one okay so select main menu and then we'll use the same menu there and then um yeah we have that there so it's looking um pretty good this does need to be a little bit smaller i think i think we can edit it from here and maybe we can make this a little bit smaller or maybe not you can you can try i can just publish it and check let's just see how it looks maybe it just looks big there so we'll publish this all right so this needs to come down a little bit this needs to be a little bit smaller so we're going to see if this is possible i think uh probably easiest way would be align it to the middle that's what i think what i would do a line to middle yeah it's not so close to the edge and then where it says margin maybe we can use some margin just to squeeze it down force it to be smaller maybe i don't know try 25 25 margin everywhere uh maybe not at the maybe not the bottom maybe just left and right okay we'll publish that and we'll see what that looks like and a lot of times this is just you know trial and error all right so maybe we should do top and bottom yeah i think so so i think we should do 25 25 let's see what that looks like publish but you need a bigger okay that didn't work all right so the other thing that we can do maybe is we can click on uh this and we can maybe make the height smaller if the height is smaller maybe everything will become smaller so we'll publish this no we can vertical align everything in the middle though so that's good so if we publish that um i think this will sit in the middle which is perfect that's a lot better this is pretty it's not that bad the logo is a little big but this is other than that yeah it's not that bad let's try one more time oh here look we can make it smaller that way by clicking on this and publishing this and hopefully if you get stuck guys don't be scared to just click the settings and see what they do you know yeah all right so that's pretty good i think uh another thing that maybe there was um an option to edit the image uh i don't know how how much it would let us make it smaller i think that might be it let's try padding here i think it could work 10 publish yeah i think it i think it made it a little bit smaller yeah should we try 20 250 just to see if it's working because it might not be noticeable enough to click on widget one again and then click edit image yeah i think that's the best thing to do [Music] all right edit image oh yeah and then try maybe custom size and then height uh maybe 50 pixels uh 45 pixels tall and then it automatically adjusts link to the home page probably right oh yeah there you go link to home page so you just put in your homepage here dot com and then we update all right and now let's publish that all right there we go looks much better do you think we should change this gray i think it's pretty easy to a different maybe a darker color or yeah maybe this blue up here that'd be nice whatever that blue is so let's try that let's do this design background here it is so we'll try to get close to this blue um there it's pretty close all right and then we'll publish this and we'll see if that looks better all right the blue's not perfect and now this is uh messed up but i need white and then i think it'll be good yeah let's make it a little more blue all right and then once we do that now the footer menu needs to be designed in that link color needs to be white and then this will be white also but just a little bit more transparent active will be white also okay so publish that let's see see how close we got perfect all right so to me that's looking pretty good maybe not perfect but super super good i'm going to try to turn on my camera in the future your editor goes to cgi your face yeah it's just a fake tyler all right so that is uh how you make a website step by step with no step skipped and we are completely done this website should work on mobile which we haven't really tried yet so maybe that is the last step um this is what it would look like mobily and it looks great i think so yeah we could change this to white if we were really crazy um which we are so that's what we're gonna do or change it to white and uh to do that all we have to do is um go to this mobile menu and then click on this mobile right here i believe it has some sort of please twitter menu probably twitter oh why am i in the footer menu thank you oh gosh okay header builder thank you very much you know you see where it says toggle button toggle no on the bottom right hand corner of your screen ah toggle thank you oh my gosh all right now we should be able to design this toggle button yeah so you have the three dots or the little lines are thicker there's different versions of it and then they're the colors ah there it is icon okay that's all i wanted to do publish this now if we go here and we refresh it this toggle thing should be white everything should look good on mobile that's good enough for me we are done all right so the last thing that we can do is we can log out so hover over your name you don't have to do this obviously and you can log out and that's how you make a website step by step with no step skip thank you so much emmanuel and i really appreciate it thank you for guiding me through this and is there anything else that you would like to say yeah i hope you guys like the video making a website is not hard it's not scary i know the video feels like it's really long but it's just a lot of different little little steps but they're all easy steps so you know if you have any questions leave them down in the comments and we'll help you guys out yeah and i have all the links to emmanuel's stuff icreateyourwebsite.com and his youtube channel you could go and check them out and just yeah thank you so much it was a lot of fun it was much funner doing it together than doing it by by myself so i appreciate it all right everybody have a good day all right see ya bye

Channel: Tyler Moore

Views: 31,739

Rating: 4.9250002 out of 5

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

Id: oOi2KIQlm6o

Length: 125min 58sec (7558 seconds)

Published: Mon May 24 2021