How to Make a Website with Astra | 2020 (Astra Theme Tutorial + Elementor)

in this video i'm going to show you how to make a wordpress website like this with the astra theme this website has a very clean design with an about section a services section a video section and a gallery and i'll show you how to change these to be anything that you want it also has separate pages such as a contact page with a working contact form a services page where you can go more in depth about the services that you offer and a more in-depth about page and this whole website was built with the astra theme and an awesome drag and drop page builder plugin that allows you to easily build your website visually so it's perfect for beginners and you don't need to know any coding astra is by far the most popular wordpress theme and it's my number one recommendation for anyone that's brand new to building websites and no this video is not sponsored by astra i just genuinely love this theme more than any others that i've tried over the years so i'm dale from create a pro website and during this tutorial we're going to be getting a few things such as your very own custom domain name which is going to be about five dollars we're also going to be getting a web hosting plan which is absolutely necessary if you want to own your own website and i have a special discount code for you to use that will get you a massive discount so it will only be about three to seven dollars depending on the plan that you choose now yes there are such things as free websites but they come with a lot of limitations which i will touch on shortly and lastly we're going to be getting wordpress which is the software that we'll need in order to get our astra theme and wordpress is 100 free i'm going to be walking you through this tutorial step by step so that you have a beautiful and fully functioning website by the end in the description i provided a link to download the images that i'm using during this tutorial in case you'd like to follow along with me and i've also included timestamps for this video in case you need to revisit a step at any time you can also use the right and left arrow keys on your keyboard to go forward or backward by five seconds and if you feel like i'm going too fast or too slow you can also change the playback speed of this video using the gear icon in the bottom right corner so with all that said let's get started step number one is to get a domain name and web hosting a domain name is just the address to your website it's what people will type in to get to your site so something like yourwebsite.com and web hosting is basically just renting space on a server somewhere that's connected to the internet so that you can store that server with all the media on your website such as your text pictures videos themes plugins etc and there are web hosting companies that have buildings full of these servers and they also offer you 24 7 support in case anything were to happen to your website if you want to own your own website and have a custom domain name for it then you have to purchase web hosting yes you can get a free website but it comes with a lot of limitations like you won't own your own domain name it will be something like yourwebsite.wix.com or dot squarespace.com or whoever's hosting this website for you or it might even be a random string of numbers and letters that you really won't even get to choose you also can't upload new themes in order to customize your website exactly how you want there's usually a very limited amount of options you can't upload plugins to increase the functionality of your website you can't monetize your website with ads in order to make money with it and your website could be deleted at any time because you don't technically own it so this is why i recommend getting web hosting so in order to get it just click on the very first link in the description or go to createaprowebsite.com hosting and this will take you to a special co-branded landing page that i have with hostgator.com and hostgator is who i host all of my websites with i have dozens and dozens of websites with them because they're fast reliable and affordable and you can see that we've got a few different plans here we've got the hatchling plan which gives you a single domain and a free ssl you've also got the baby which gives you unlimited domains in case you want to have more than one domain name and then you've got the business plan and i really only recommend the baby in the business plan especially the business plan once your website starts making a lot of money if that's what you're trying to do with it and you can always upgrade to that later so for now let's just go ahead and start with the cheapest plan which is the hatchling plan so let's just go ahead and click buy now and here is where you can register your own custom domain name so this is where you're going to want to search it and then if you already have a domain you can just go ahead and click on this tab right here but in this case i'm going to get a brand new domain so i'm going to do something like create an astra website dot com and here you can see in green that it is available and then they've got all these other options like dot space.online.net things like that i really recommend trying to stick with a.com if you can because it's definitely the most professional looking and the most common for people to type in so once that's selected we can just go ahead and go down and you're going to want to make sure that you leave the domain privacy protection on so you want to make sure this is checked what this does is protect your information like your email and your phone number and that way you're not going to be able to get called by a bunch of solicitors saying hey we're going to build your website for you and try to offer you all these things it's really frustrating and annoying so hostgator offers this domain privacy protection in order to protect your information and i highly recommend doing it because i made the mistake of not doing it on my very first website and i really wish i had so let's just go ahead and leave that checked and scroll down and here you're going to choose your package type which it should automatically be on hatchling and then you've got a billing cycle and this is automatically set to 36 months which is going to give you the biggest discount whenever you use createaprowebsite.com hosting and whenever you use creatorprowebsite.com hosting this is my affiliate link so i do receive a commission whenever you use it but it also saves you a lot of money so it's a win-win for both now what you'll be doing is paying for the 36 months all up front but really it comes down to about 271 a month which is a 61 discount now if you want you can switch to 12 months and really give this website a full year's try which is my recommendation but let's just say that you're just starting out you're not really sure yet if you want to keep going with this website thing maybe you just want to try it out you can also do the one month which is still going to give you 30 off and again this is going to be the biggest discount that you're going to be able to find anywhere on the internet i worked this one out special with hostgator myself so i'm just going to go ahead and leave the one month checked and then come down here and create a new account and then just put in a security pin and then just go ahead and scroll down to the billing info section and here is where you can fill in your credit card info or you can use paypal if you want to so i'm just going to go ahead and fill this out real quick and then just go ahead and scroll down to the add additional services section and here what we're going to do is actually uncheck the site lock essentials as well as uncheck back up your hard work because i have videos on my channel that show you how to do all this stuff for free i have a video on how to get a professional email which would be your name at yourdomainname.com i have that on my channel which i will link in the description as well as how to back up your site and all the rest of it so you can just go ahead and leave these unchecked and then the ssl certificate it already comes with a free one and this is just an upgraded one so again leave this unchecked and then just go ahead and scroll down and then you'll see the coupon code which says create a pro website so make sure it says that and then that will get you the massive discount that i'm talking about and again this is my affiliate link so i do receive a commission whenever you use it but it also saves you money and it really helps fund these free youtube tutorials that i'm able to put out so it's a win-win for both of us so just go ahead and review your information so you've got your domain name which went from eighteen dollars down to just five dollars and then you've got your one month of hosting or if you chose 12 or 36 months you'll see that discount here and again if you did the 12 or 36 months then you're going to be paying for it up front but this is just one month so now with all that said let's just go ahead and scroll down and just agree to the terms and then click checkout now cool so now hostgator is setting up your account so just give that a minute cool and now from here we can just go ahead and click on view your dashboard okay so now we can move on to step number two which is to install wordpress wordpress is the free software that we're going to need in order to launch our website so let me show you how to install it quick and easy so in order to install wordpress all we have to do is just click on the button that says install wordpress right here and then just go ahead and click on install now and then just make sure that you're on the latest version of wordpress which we are and then also that this is going to your new domain name right here and then we'll just go ahead and scroll down and you can change your site name so i'm just going to change this to something like create an astra website like that and then you can change the site description as well oops let's make sure this is spelled right and we'll change the site description and you can always change these later in wordpress but for now you can just put it as whatever you want and then we'll just go ahead and scroll down and for the admin username i'm just going to go ahead and change this to my name just like that and then you can create a password so i'm just going to go ahead and create a new one and this is going to be the password that you use to sign into your wordpress website all the time and then for the admin email you can just go ahead and delete this and put in the same email that you use to sign up for hostgator with and then just go ahead and scroll down and you can select your language here if you want and we're just going to go ahead and skip the rest of this we're not going to select a theme just yet and we can just go ahead and click on install and then from here we can go ahead and log in to our new site so you can see that we've got our administrative url here which is just your new domain name dot com forward slash wp dash admin this is always the url that you should use to sign in to your wordpress website so you can go ahead and click it here or you can just go ahead up to a new browser and type that in forward slash wp-admin and again this is always how you should sign in to your wordpress website and if you get taken to a page that looks like this it's because your site has to propagate and what that means is that hostgator now has to send out your new domain name that you just registered across the entire world to let every server in the world know that hey this new domain name now exists and it's live and this process can take anywhere from about 30 minutes to an hour usually only takes just a few minutes so every five minutes or so just refresh the page and check on it and whenever you're taken to a page that looks like this you know that you can now log in okay so now we can move on to step number three which is to install and activate astra it's super easy so let me show you how to do it okay so here we are at the login page and again i just typed in my new domain name dot com forward slash wp dash admin and then i found this page now so that means that everything is propagated and ready to go so i'm just going to go ahead and sign in using the info that we put in earlier when we installed wordpress and here we are inside of our wordpress dashboard so let's just go ahead and close all of these boxes and make sure that we have a nice clean environment because this looks a little daunting at first and from here in order to view your website you just go up to your website name and then you can just go to visit site and i'm just going to open this up in a new tab and you can see that we've got our default wordpress theme here which you know isn't the best looking so now we can go ahead and get astra so to get astra we can just go on over to appearance and then just go over to themes and then we're just going to click on add new theme and then from here just go up to the search bar at the top right and type in astra and then you'll see astra right here just go ahead and click on install and then just click activate and then now if we just go up and look at our website and just open that up in a new tab you can see that it looks a bit different now but still not the way that we want it to look and now step number four is to select a starter template one of the reasons why i love the astra theme is because it comes with a bunch of amazing and free templates for nearly any type of website that you want to make you can simply import one and then just replace the content to be your own or even add or delete sections as you please so let's go ahead and check out those templates so let's just go ahead and close this window and just go back to our wordpress dashboard and up here you'll see thank you for installing astra would you want to get started with starter templates so we're going to say get started and then from here just go ahead and select your page builder and we're going to go ahead and go with elementor and here you can see all sorts of awesome starter templates for nearly any type of website you want and if you want to view one you can just go ahead and click on it and then you can see a preview of the site if you just scroll down through here and then you've also got the different pages that come with that site so i'm going to go ahead and go back and then if you see anyone that says agency on it that means it's a paid one but you can also go up here to the little all tab and search for free then you'll get all the free starter templates so i'm going to go ahead and click on this one and you can see it comes with an about page services contact as well as the home page which looks really good nice and clean so i'm going to go ahead and click on import complete site and then just go ahead and click on import cool so our website was imported successfully so now we can just go ahead and click on view site and then here you can see that we've got our entire site now imported and ready to be customized and now step number five is to customize your website here i'll be showing you how to use elementor to completely customize your site however you like so let's go ahead and do it so in order to start customizing your website you can just go up here to edit with elementor and here we are inside the elementor page builder so from here it's really important to understand the structure so you've got sections which is this blue line that goes all the way around this whole section and then you've got columns which is the gray dotted line that goes inside of a section then you've got widgets which are these text ones right here and these buttons that all go within columns so you've got sections columns and then widgets and widgets are these things over here in this menu so you can scroll through all these widgets and just drag them in wherever you want you can go ahead and close the pro section because that's going to come with these locked ones which you can get by paying for elementor pro which is really awesome and then you've got general ones down here as well and if you want you can just go ahead and drag anything in that you want so let's just say i wanted to add a button somewhere i would just drag it in and you can see this blue line is going to tell me where i can place it so if i wanted to place it here i'll just hover over wait for the blue line and that's going to give me this button but obviously i don't want to paste the button right there so i'm just going to right click and delete that and anything that you click on you can edit over here in the left hand menu so let's say that i wanted to edit this text i could just click on this little pencil icon for the text and i can edit it here same with the buttons or even the background image i can just go ahead and click on the little six dots up here for the whole section and then that will allow me to edit this whole section so let's just go ahead and change the background image so if you just click on little six dots that'll open up the edit section over here and then we can just go ahead and click on style then you can see we've got our image right here so you've got different backgrounds classic is where you can put in a color or an image you've got gradient which you can use multiple colors you can put in a video if you want so if you click on that you can just grab any youtube url and put that in right here and then you've also got a slideshow function but for this we're just going to go ahead and put in a classic background which is just going to be an image so i'm just going to click on choose image and then underneath upload files i'm just going to click on select files and then i'm just going to go to where my images are and again i put these images in the description for an instant download so that you can use these to follow along with me if you like so i'm going to go ahead and click on the hero image right here and click on open and all of these images here are the ones that came with our initial starter template so you can just go ahead and ignore these and if you don't want to use any of them you can also delete them but the hero image that i imported you can see over here it is 1500 by a thousand pixels which is a pretty good size for a hero image if you go too high like 3000 pixels then your site is going to load a lot slower and then that's not going to be very good google even if you want to come up and google search results google's going to read that and go hey this website's too slow so make sure that you have images that are not too big okay so i'm going to go ahead and click on insert media and that's going to put in my new image in the back and then for the position i'm just going to change this to center center and then i'm also going to go over to the size make sure that that says cover and what that's going to do is make sure that the image goes all the way from the left side of the screen to the right side and it's going to cover this whole area and then you can also change the attachment so right now if i were to scroll the image goes with it but if i change this to fixed we're now going to have this cool parallax effect where the image stays in place which i think looks really good so i'm going to go ahead and leave that and you can see my image here kind of has more of an orange hue to it but this one kind of has this like bluish hue and that's because there's a background overlay on here so what we can do is just go ahead and close background and then go to background overlay and then you can see that we've got this gradient background overlay here so you can do a solid color by doing classic and that's going to be just one color or you can do a gradient like this and you can choose different colors so i'm going to change this blue color to maybe something like an orange kind of a dark orange maybe something like this and then i'll change this top color to be something like a black maybe like that and it's also set to radial which is going to be the whole edges are going to be orange and then the middle is going to be darker so what you can do is also change this to linear and then that's going to make sure the top is now black and the bottom is more orange and then you can change the angle here by switching that around it's a little bit too subtle to see but if i just drag these location sliders in like this then you can see where that line is and we can just change the angle like that but i'm just going to go ahead and leave it as 180 and drag these back to where they were because i kind of like a nice soft gradient then you can also change the opacity which is just going to be how transparent or not that background overlay is so if you go all the way down that's now just the raw image but i'm just going to add a little bit of opacity to this to make sure that we can read our text so maybe something like a 0.5 and another cool feature with this whole section while we're here is you can go over to shape divider and then you can go over to bottom which is just going to be the bottom down here you've also got the top up here we can change the bottom type to something like mountains and that's going to add this cool divider so that when we go into our next section you know it's kind of got this fancy look to it we can also go to something like tilt opacity there's all sorts of different ones so i recommend just kind of playing around in here and seeing which ones that you like so i'm just going to go back to none and leave it just the way that it is so now what we're going to do is go ahead and change this text right here so to do that you can just triple click and you can even type right on the screen if you want or you can type over here in this little title box so i'm just going to change this to how to make a and you can see that even though i typed in with capital letters it is still uncapitalized right here so let me show you how to fix that which we have to leave elementor in order to do that so first i'm just going to click on update to save my work and then we're just going to go ahead and click on the little hamburger looking symbol up here and go to exit to dashboard and then just go ahead and close out of this box and we're just going to go back over to the wordpress symbol right here and then from here just go back up to your site and click on visit site and then just click on customize so with this menu here is how to actually customize the astra theme settings so the astra theme is basically going to be your header and your footer and everything in between is all built with elementor but in order to actually fix this text we need to use the astra theme settings so what we're going to do is just click on global and then we're just going to go over to typography and then just go to headings and you can see that we can change our font family for our headings here and it's also set to lowercase so i'm just going to go ahead and do none and there we go now you can see that now we've got capital letters there so now we can just go ahead and click on publish and then just go ahead and click on the x and then just go back to edit with elementor all right so now let's go back to customizing the rest of our text so for this heading text here i'm just going to triple click and i'm just going to put in new text and if you want you can change the whole style of this text as if you want as well so to do that you would just go on over to style and then you've got the text color here which you can change to anything that you want obviously anything other than black or white is going to look a little funky so i'm going to go ahead and stick with white then you've got the typography which you can also change here in elementor so you've got the family here and if you open that up you can see all the different font families to choose from and if you give it a second whenever you scroll down they'll all just load and you can kind of get a preview of what they look like and these are all google fonts but i'm going to go ahead and leave it as default and you can also change the size of the text so i can just scroll up or down make it huge make it really small and if you want to undo anything at all you can just go ahead and click on command z on a mac or you can do control z on a pc and then you've got a few other sections here like weight and style line height the letter spacing which you can space out a lot but again i'm just going to go ahead and leave it just the way it is and if you want you can also create an animation for this so let's just say that you wanted the text to kind of animate in like fade in what you would want to do is just go over to click on this text and then just go over to advanced and then just go down to motion effects and you'll see entrance animation is just set to default you can change that to fade in and you can see our text is going to fade in so whenever somebody loads the site that's what's going to happen and you can do that for any widget that you want or if you wanted this whole section to fade in you could do it on just the column so what i'm going to do is actually just click on the x and get rid of that animation and i'm going to click on the entire column here using the little gray box and then i'll just go over to advanced and then i'm just going to go down to motion effects and change this to fade in and now that whole section is going to fade in there or sorry that whole column is going to fade in and now we can go ahead and change our buttons so first what i'm going to do is just click on this button here and i'm going to just change the text over here the button so i'll just change this to something like get astra and then underneath link you could just delete the hashtag and then i could put in a link that maybe goes to the astra theme on their website here you could just put in any url that you want this button to go to but for now i'm just going to go ahead and leave that blank you can also add an icon to this button so you can just go over to icon library and you can choose any icon that you want and then just insert it but i'm going to leave the button blank because i think it looks very clean just the way that it is and then i'm also going to change this button text as well so i'm going to click on that button and then i'm going to change it to something like start now make sure that i spell it right just like that and then again you would just delete the hashtag and put in any url that you want that button to go to so you could link to a different page on your website you could go to a different website really anything that you want to do and if you want to change the color and style of the button you can just go over to style and then you can hear you can see here that we've got normal and hover so normal is what it's going to look like normally whenever it's just sitting there and hover is what's going to happen whenever you hover your mouse over so for text color you could do something like let's just change that to black and then the background color you can change that here so if i just wanted some sort of crazy color i could do that but i'm not going to do that i'm actually going to leave it as white and then for hover i'm going to go to the hover tab and i'm going to change the background color to maybe do something like like a light blue something like that looks pretty good or maybe even like an orange color i think that looks pretty good so i'll just go ahead and leave that and then you can also get rid of the border if you want so you can see whenever i hover over it there's a bit of a border there so what we're going to do is actually just change the border type from solid to none and then that's going to get rid of our border completely and i'm also going to do that on normal so i'm going to go to normal and make sure that the border radius is set to zero which it is and you can also change the border on this as well so you can see that my border it's kind of hard to see but it's kind of got this blue color you can change that to anything that you want i could change it to white or black and then that way whenever i hover over it's got this white outline and then you can also just go over to solid and change that to none and you can get rid of the border if you want as well and then if we just go over to normal you can just go to the border type and change that from solid actually you can leave it as solid and what you can do is actually just get rid of the border completely by clicking down to zero like that and then you can go over to border radius and if you bring that all the way up it's going to change your button into more of like a pill button which is pretty cool but i'm going to just go ahead and leave it as a square and i'm going to give it another border so i'm going to just do two again and let's say that you wanted to edit the whole spacing of this section so what you can do is actually go up to the little six dots and click on those and just go over to advanced and then you can add padding here so what you'd want to do is unlink these values and you can add padding to the top like this and the more value that you give to the top it's going to push all this content down or you can just go back to zero and if you wanted to make it shorter at least for this theme what you can do is just check those again and delete them and then just go on over to layout and then you can see minimum height here you can just drag that down and you can make it a much smaller section if you want but i think 100 was pretty good so i'm going to go ahead and leave it so that's two different ways that you can change the spacing okay so now let's go down and change this section so i can change all my services here by simply clicking on the text and i can change that to whatever i want so i could say something like logo design you know whatever service it is that i offer i can just go ahead and change that and if i want i can also add an icon to this so i can just go over to the little rubik's cube looking symbol here and then i can just go down to icon and then just drag that in and just place it right there and then i can just go over to icon library and then i can just search for anything that i want so let's say that i want to do something like a paint brush i can just grab the little paint brush here and then just click on insert and it's going to put our paintbrush in there and then just go over to style and you can also add a link to this by the way so if somebody were to hover over it it could take them to a link on your website but i'm going to go ahead and leave it blank and just go over to style and then for the primary color i'm just going to change that to white like that and you can change the size here as well you can make it small or big really whatever you want to do i'm going to go ahead and do something like that and you can also rotate it if you want as well and you can also change the hover color so if i were to hover over it nothing happens right now so if i click on hover i could change the hover color to be something like maybe a light gray and then i can also do a hover animation so i'm going to change this to something like grow and then that way whenever i hover over it it kind of grows and it turns gray which is pretty cool so now what i'm going to do is actually just go over to this little widget for the icon i'm going to right click it and duplicate and then i'm just going to drag that right over to the service number 2 and i will change this to a different one let's say i want to do something like photography i'll just go over to icon library and i'll search for camera just grab the camera click on insert and then i'll just change the text um or i can do it up here either one you can click or you can do it up here and i'll just do photography like that and then again i'm just going to duplicate this and i'm just going to drag it over to service number three i'll change that icon maybe something like video so i will do maybe film grab the little film strip and then i'll click on insert and then i'll just change this text to something like video editing like that and we can also change our background here so what i'm going to do is just click on the little column and that's going to take me to the edit column section and i'll just go over to style and i'm just going to choose a new image i'm going to go to upload files and then select files and i'm just gonna grab service one through three and click on open and i'm just gonna grab the first one which says service one and you can see the pixel size right here in case you wanna make your own and i'm going to click on insert media and i'm going to do the same for the second one so i'll click on this column style and then choose image service number two click on insert media and then same for this one column style choose image and then the service number three click on insert media and what i did was create this image that's kind of boxed up so that it all kind of flows you can see the mountain goes all the way from the left over to the right which looks really cool and we can even add a box shadow to this so what i'll do is just click on this first column here and then we're just going to go down to border and then you'll see box shadow right here i'm just going to go ahead and click a little pencil icon that's going to add kind of this little shadow behind our box and you can make it darker here by just dragging the slider up or down or lighter if you want so i'm going to go ahead and leave it like that and then you can also change the vertical positioning so you can kind of drag it down and that shadow is going to come a lot lower which i think looks pretty good maybe something like that so then i'll just go ahead and do the same for these two as well and i'll just do these real quick so that this isn't really too repetitive and there we go now all of my boxes have this really cool shadow effect to them kind of look like they're floating off the page and you can also change the background overlay whenever you hover over you can see that they kind of turn blue so what we can do is just click on the column and then just go to background overlay and then you can just choose a new color here so i could do something like an orange color maybe a dark orange like that and that's on the normal so if you want you can add an overlay to the normal or what you can do is actually just turn this all the way to opaque so it's going to show just the image in the back or what i like to do is add a little bit of black to it something like that and you can change the opacity here if you want and then we can just go over to hover and then change the color so whenever it turns to blue we can change that to maybe an orange something like that i think that looks pretty good and then you'd want to do the same for these as well so i'm just going to do that real quick and now what we want to do is create an about section that's going to go in between this section and this one so let's go ahead and just click on the little plus icon right here and then we're just going to click on the plus icon again and we're just going to select this column structure here and now what we're going to do first is just go over to our widgets and we're just going to drag in an image into the left column just like that and then we're going to go back over to the widgets and grab a heading and drag that in here and then we're also going to go over the widgets again drag in some text with the text editor underneath our heading and then also back over the widgets one more time we can also grab this cool little divider here and drag that in here oops let's try that again drag that in right there and what we're going to do is bring the width down on that divider to be something like that and we're also going to change it to white so we'll go over to style change the color to white and then you're not going to see it anymore but we're going to change this background image and let's also go over to this section so we're just going to click on the little six dots and we're going to go over to advanced and give this some space so for the padding we're just going to uncheck this little link values button and give it maybe let's say 100 at the top and then maybe 100 at the bottom something like that i think that looks pretty good and then we'll just go over to style and we'll just put in a background so we'll just click on classic and then just drag in a background image so i'm just going to go over to upload files select files and then i'm just going to grab let's say like this call to action button we can use it kind of anywhere so click open and then just click on insert media that's going to put it in there and you can see it's kind of broken here so what we're going to do is go over to position change that to center center and then go to size and change that to cover just like that cool then we're also going to add a background overlay so i'm going to go to background overlay and then go to the little paint brush and i'm just going to add in a color which i'll just do like a black color like that which i think looks pretty good maybe even drag it up just a bit more so it's pretty dark and then we're going to change our text color so i'm just going to click on the text and we're actually going to type in some new text so we'll say about like that and then i'm just going to go to style change that text color to be white like that and then this text i'm going to click on that and you can type in anything that you want here what i'm going to do is just copy it and i'm just going to repaste it again so it's just a little bit longer like that but you'd obviously want to write some stuff about yourself or your business whatever it might be then i'll go over to style and change that text color to be kind of like a light gray maybe something like that and then let's go ahead and replace this image so i'm just going to click on the image widget and go over to choose image and i'm going to go to upload files select files and then just grab the about image click on open and then just click on insert media there we go and now if you wanted to center this out a little bit to be in the middle you could also come over here to the widget section and grab a spacer widget and then you could just drag that in here up above the text and that's going to kind of push it down a little bit and you can determine the amount of space you want with this little slider here but in this case i'm just going to leave it just as it and then just go ahead and click on update to save your work and then let's go ahead and scroll down and you can edit this text and this button all however you like i'm not going to go too far into this because we've already done this so at least now you know how and then we'll come down to this section and what we're going to do here is actually delete this text so i'm going to go over the little pencil icon right click and delete same with this text right click and delete just like that and actually you know what we're just going to delete this whole column here we're going to delete everything in it and then what we're going to do is come over to the little rubik's cube looking symbol and we're going to add an inner section so what this is going to do is put two columns within one so that we can put things in this column and then underneath it as well so let me show you what i'm talking about so first what we're going to do is go over to the whole section we're just going to click on the little six dots and then go over to advanced and then what we're going to do actually sorry go over to layout and we're just going to change the column width to be a bit bigger or you can change it oops if you open it up you can change it from box to full width as well so we'll just do that and we're going to do something like that so that these boxes are a bit bigger and then we're going to go over the widget section and just drag in a video and you can change this video to anything that you like and we'll also go back over the widgets and drag in another video into this section here just like that so we've got two videos here and then what we're going to do is put another button underneath so what i'm going to do is just come up here to our history and i'm just going to duplicate that just so we have the same button in here and just drag that in right underneath just like that and then i'm just going to change the alignment to be center and then i'm also going to go over and change the text so i'll say something like see more and then i could link to let's say my youtube channel so i could do something like youtube.com slash create a pro website and then that way they can watch some videos of mine and then they'll click this button and then it will take them to my youtube channel so also go to style and we're just going to go over to normal and change the background color to be something like white or maybe like a black might even look pretty good or what we can do is actually just leave it transparent and we'll just change the text color to be black and then also the border color so we'll go over to hover make sure there's no border on that so for border type we'll just change that to solid and then the color we're just going to change that to be black just like that so our button looks a bit better now and then we'll just go over to advanced and we're just going to give it some padding so what we're going to do is just increase this value here give it a little bit of space like that so now everything's looking pretty good so now i'm also going to replace these videos so i'm just going to click on the little video widget here and then just go over to youtube over to create a pro website and i'll just grab one of my videos and then i'm just going to grab one of these so i'll just go up and grab this little url up here and i'll just put that in here there we go and then i'll grab one more video and then i'll just put that into this section here and then you can also replace this background as well if you want to for now i'm just going to replace the overlay color on it so i'm just going to click on the little six dots for this whole section and then just go over to style and then go to background overlay and i'm just going to change it to more of an orange color and then a black color here i'm going to change it from radial to linear there we go i think that looks pretty good cool so now just click on update to save your work and then let's just keep scrolling down and you've got a gallery here which is pretty easy so what you can do is just click on the little widget for it and then you can see that we've got our images here so if you just click on this you can edit this gallery so you can get rid of images you can reorganize them however you want then you can also add to the gallery so you can just click on add to gallery then you can select your images here or you can upload some new ones but i'm not going to replace all these images right now it's pretty straightforward i want to keep this as tight as possible so i'm just going to click on x but then people could just click on these and view your images here in this awesome gallery okay so now step number six is to add and edit new pages knowing how to add or edit a page on your website is a must in case you want to create a contact page which i'll show you how to do or a services page an about page or anything that you want so let me show you how to do that so in order to add or edit a new page what you want to do is make sure that you update and save your work and then we'll just go up to the little hamburger looking symbol here and click exit to dashboard and then you can just go up to the little wordpress symbol up here and click view pages and here you can see that we're automatically in our pages section which you can find over here on the left hand menu by clicking on pages or going to all pages and here you can see a list of all of our pages and we've got the sample page which we don't even really need so you can just go ahead and trash that so now let's go ahead and add a new page so let's say that i wanted to add a whole new page about my photography skills that would kind of go underneath my services so what i'm going to do is just click on add new and i'm just going to give this a title so i'm just going to call it photography or whatever it is that you want to create and then just go over here to page attributes and change that from default template to elementor full width just like that and then you can just go over here to edit with elementor and here we can just build a whole new page from scratch using elementor and don't worry i'll show you how to change your footer down here and your header a little bit later but for now just focus on this middle section and you can build a whole new page from scratch by simply clicking on the add new section selecting your structure and then again just dragging in widgets replacing the background and everything that i showed you for the home page so that's how to do it from scratch now you can also do a template page or use blocks so you can just simply go to add template and then there's all these pre-made pages for you and some of them look like home pages some of them are just regular pages and anything with a pro is one that's paid but anything that doesn't have that symbol you can use so what you would do is just click on it and you can see what it looks like and then you could just insert this whole page and replace everything exactly how you did with the home page so that's one way to do it or you can go back to the library and you can go over to blocks and then you could simply just select a block that you want to use and then replace it the same way you would any other page so let's say that i wanted to start building a page block by block so you can also search by category like about pages clients contact pages all the rest of it so let's say i wanted to add this one i can just click on it see what it looks like and then i could just click on insert and then it's just going to ask you to connect to your template library it's super easy and quick just go ahead and click on get started and then you can just create an account and then just click connect or you can even uncheck this if you don't want to share your data with elementor and then you can just click on connect and there we go now it's going to put in that whole block and then you can just go down here and add a whole new one by simply clicking on here then you can just add a whole another block if you want and again you can go over to categories and search so if i wanted to do about i could just click on that and you've got all these different about ones so i could just click on like this one and then i could just insert that and then that's going to put that in underneath so here's how you can just build out pages like this and then you just replace all the text you can replace the background a lot of these come as black and white so that all you have to do is just replace the backgrounds so it's pretty quick and easy to do it this way and then whenever you're done you can just go over to publish and that's going to save and publish this page so that's how to create a whole new page now i'll show you how to edit the existing pages that came with your starter template so to do that we'll just go over to exit to dashboard by going to the little hamburger symbol and clicking on exit to dashboard and then just go back over to the wordpress symbol and let's say that we wanted to edit the about page that came with this template all you got to do is just click on edit with elementor and then here you've got this whole page that is already matching the website that you imported so really all you have to do is just replace the images and the text and really just make it your own which is really cool so now let's just go ahead and click on the little hamburger symbol and then just exit to dashboard and then just go back up to the wordpress symbol again and then let's just go ahead and take a look at our site so far so we'll just click on visit site so now you can see that we've got a menu up here with our pages and i will show you how to edit this menu a little bit later i'll show you how to create a logo things like that coming up in the next step but right now we can just go over to the contact page and here we've got a whole contact page already set up for us but we do need to make some changes so now step number seven is to edit your contact form making sure the contact form on your website is hooked up to your email and displaying the fields that you want someone to fill out is very important so let me show you so i'm going to show you how to edit this contact form to put different fields in here as well as hook up your email to it so that anybody that uses it it will be sent to your email but first we want to just change this background to match the rest of our website and i'll show you how to change this info here so to do that just click on edit with elementor and first we're just going to change this background so i'm just going to click on the little six dots to edit this whole section go over to style and then just choose image and i'm just going to grab one of my images click on insert there we go and then i'll just change the position to center center or you could even do bottom or top really however you want to position the picture there and then this is also set to fix so it's going to scroll or it's going to stay in the same spot while we scroll and then i'll just go over to background overlay and just change that to match so i'll just go to my colors here for my gradient and just change that to my orange color this is kind of the whole theme that i'm using for my whole website which is pretty cool then i'll go to this one change it to kind of a darker color like that there we go and then you can also edit this info here by simply clicking on it and then you've got these little items here so you can just go ahead and click on that and you can edit what the text says here so you could put in like a phone number an email whatever it is that you want to do you can get rid of these by simply right clicking and deleting but it's pretty simple to just go into any one of these and you can even change the icons here so if you wanted you could go to icon library and then search something like an envelope and then you could just grab an envelope and then insert that and it's going to change the little symbol to an envelope and then obviously you'd want to change the info to match so you wouldn't want a phone number here so you'd obviously want to do this for the email section but just to kind of show you and then if we just come down here we can edit our map so if you just click on the map you can just click on the widget up here at the top right actually because if you click on the map it's not quite going to work let's see here click again there we go now we can just edit the google maps here so i could just put in let's say something like los angeles and then that's going to change to la so you can put in any location that you want you can change the zoom and height and customize it however you want so now we'll just go ahead and click on update and now let's actually edit our contact form so to do that we're just going to go over to the little hamburger symbol here and then go to exit the dashboard and then just go back to the wordpress symbol up here and then we're just going to go down to wp forms and go to all forms and then you should already have a contact form made with your starter template if not you can just go over to add new and create a new one but for this one i'm just going to go ahead and click on edit and here is where you can select different fields that you want to put in here so you've got different things like a drop down if you wanted you could just click on that and then that's going to add it in down here and you can just click and drag and reorder these however you want so you could create choices here so if i click on the drop down it's going to bring you to the edit section and then you could just create whatever choices it is so whatever they're inquiring about it might be something like you know photography you know one of my services i could do video editing or i could do logo design and then that way they can just select the drop down and pick whatever option that they're inquiring about and then send the message like that and you can see that all of these go from the left side of the form all the way to the right side so what we'd want to do is actually go over to advanced options and then we would just want to come down to field size right here and change that to large so that that whole drop down goes all the way to the right side i think it looks a lot better on the site when all of the fields go from the far left to the far right side of the form but i don't really want to have this drop down in here so i'm just going to go ahead and delete it but that is how you can add different fields to your contact form so i'm just going to click on ok to delete it and then i'm just going to go over to settings and here you can change the name of your contact form if you want but nobody's really going to see that so it's really just for you you can change the submit button text so you could change it to something like send and then this is what it says whenever it's actually sending and then we'll go over to notifications and here is where you're going to want to put in the email that you want all of these forms to go to so this is where you'd want to put in your own email so i'm just going to replace this and put in my email just like that and you can add multiple ones if you want to as well by just doing a comma and then putting in another one and here's what it's going to say whenever it comes into your inbox so it's going to say new entry from contact form so you might want to put like the name of your site on here if you want to and then you can leave the rest just as it is and then we'll just go over to confirmations and here this is what it's going to say whenever somebody sends a message so you can change it from message or you can go to show a whole page after they're done sending an email or to a completely different url but i like the message and it says thanks for contacting us we'll be in touch with you shortly so you can change this to be whatever you want i could say thank you for contacting me i'll be in touch with you shortly and whenever you're done just click on save and then we're just going to click on the x and then just go back over to our website click on visit site and then i'm just going to go over to contact and then what you'd want to do is put in a sample email here so i could say my name and then a phone number put in the email so what you'd want to do is use a different email than what you're using for this contact form so you'd want to put in you know example gmail.com any other email that you own and then send a test message and then you'd want to just go check your inbox that you use to send all these forms to whether that be on gmail or any other email service that you use and make sure that that went into your inbox and if it didn't you just want to check your spam folder and if it did go to your spam folder you can just mark it as not spam and then everything else that comes through this contact form should go straight to your inbox but always send yourself a test email okay so now step number eight is to create a navigation menu having an organized menu at the top of your website is a must because it gives your visitors an easy map to jump around your website to whatever they need to find so let me show you how to edit this okay so let's go ahead and edit this navigation menu up here so to do that just go ahead and click on customize and i'm just going to go ahead and click on the logo to go back to the home page but it really doesn't matter what page you're on and to edit this menu what we're going to do is just go on over to menus and then we're just going to click on navigation right up here and here you can see all the items that are in our navigation menu up at the top and i can reorder these however i want so if i wanted to put home down at the bottom that's going to put it at the end over here so you can reorganize these however you want and if you want to add anything to this you can just click on add items and then it's automatically going to be open to the pages category so you can just close that and you can select anything you want if you want to put a blog post up there different categories if you have a store that's usually what you use these for or you can do a custom link which would just be some text that you put in then you can put in any url that you want so if i wanted to do something like let's say my youtube i could just put that in there and then i could just put in my youtube account up here so i'll do youtube.com slash create a pro website like that and then i can just add that to the menu and then you can see it just put it in up here and we're also going to go over to pages and i'll show you how to create a drop down menu so what i'm going to do i'm going to grab photography because that was one of the services that i offer and likely you'd want to have multiple services so for me i might want to have photography video and logo design and i'd want to create pages for those that kind of explains each one so once you've created the page like we did earlier just going to go ahead and click on it to add it to the menu it's going to automatically add it at the end here but what we want to do is create a drop down so what we're going to do is just drag this up underneath services and then just drag it to the right a little bit so it creates the stair stepper effect here and then i'll show you so if we just hide the controls down here we've got this little arrow underneath services now and if i hover over it this is where it would say photography now we do need to edit the header in order to actually show this because right now it's white text on a white background so let's go ahead and fix that so i'm just going to go over to open up these controls again and then just hit the back button and then back button again and then we'll just go down to header and then just go over to transparent header because that's the one that we're using we're using the transparent header and then underneath sub menu you'll see this here we've got submenu and then the little pencil icon let's just go ahead and click on that and then we'll just scroll down and we'll just edit the background color so we'll just click on that and then we'll just do like a black color and then you can change the transparency however you want so i'll do something like that that way whenever we hover over you can see now you can see photography which is really cool you can edit this however you want i kind of like that right there so i'm going to go ahead and leave that and click on publish and then now let's go ahead and fix a few other things up here in this menu like with this button and the logo okay step number nine is to edit the header and the footer here is where i'll show you how to customize your header and footer and even show you how to create a custom logo for free in just a couple minutes so let's go do it okay so first thing that we're going to be doing is making sure that our header is consistent across our entire site so let me show you what i mean if i were to click on the photography page you can see that it's all white and we can't see our logo and it's now a white header but the one on the home page is transparent so in order to do this we'll just go over to enable on complete site which is underneath transparent header so to get to that i just went over to header transparent header and then just enable on complete site and then that way it's going to make it transparent here and now obviously we'd want to add some space to this page to kind of bring this text down a little bit but i already kind of showed you how to edit the spacing so i'm not going to worry too much about that and the next thing we can do is actually edit this button so we just come over to the button and click on this little pencil icon and then here is where you can change that button text you can put in a link wherever you want the button to go to here or if you want to get rid of it completely you can just come up here to the little drop down that says button and then you can just change that to none and then that's going to get rid of the button completely so i kind of like the cleanness of this i'm going to go ahead and leave that and then if you didn't want to use a transparent header you can change the color of it so what we can do is just hit the back arrow and then just go down to transparent header and then you can come all the way down here to background and then you can just do background overlay color and let's just say that you wanted this to be black you could change it to a black header if you want or if you want it to be slightly transparent you could do something in the middle kind of like that which looks pretty cool as well but i'm going to go ahead and leave it the way that it was and now we're also going to be making a new logo here which i'll show you how to do in just two minutes so what we can do is just go up to a new tab and we'll just type in logo maker without the e.com and this is just a free software that you can use in order to create a logo so what i'm going to do is just create a new design and then we'll just close out of this little tutorial because it's pretty easy i'll show you how to do it you can search for any graphics that you want up here so let's just say i wanted to search for something that has to do with photography so i could just type in a camera and then just hit the search bar and you can see we've got all of these icons here that are all pertaining to cameras and you can just scroll forever there are tons of icons in here and you can combine some to make unique logos if you want but really what you would do is just select one and then that will add it in now what i'm actually going to do is go over to shapes because you've got different categories up here that you can do like nature shapes abstract and so on so i'm just going to scroll down here and just grab any sort of shape that i want to use for my website so i'm just going to grab this one right here and just click on it and you can just click and drag wherever you want you can resize it by just dragging up on the corner so i'm just going to drag it to the left and then i'm going to add some text so i'm just going to click on the little text box and then i'll just say my logo like that and you can change the color by going over here and you can change it to any color you want using the outside wheel or you can just do black or white by changing it in here so i'm just going to do black and then i'll just drag this up so it's a bit bigger and then you can change the font over here so if we go to font category we've got simple and modern these are all the different categories of fonts so we've got handwriting scary all sorts of different ones you've got fun and funky which you can see is automatically going to change it to something crazy then you can go over here to the font family and select a new one so what i'm going to do is go over to simple and modern and then i'm just going to come down here and just select a new font so i'll do something like this and then i'm just going to drag that up a little bit to be a bit bigger just like that and put it next to my symbol just like that which i think looks pretty good maybe i'll make this a little bit smaller and then what i'd want to do is just come down here to the little crop symbol at the bottom right and then i'm just going to crop this to be just the logo no extra space around it just like that and just click on the little check box to apply it and then you can adjust it however you need and you can use the up arrow or down arrow or left arrow or right to nudge it in certain directions and then once that's done you just come up here to the little save logo button up at the top right and it's going to say hey do you want to buy the hi-res one for 19 bucks you can actually do no thanks download the low resolution file and it just says to give logomaker some credit somewhere on your site but you can download this completely for free and this file is plenty high res enough to use on a website so i would just click on no thanks download the low resolution file and you can see that just hit my downloads there and then now what we're also going to be needing is a site icon so you can see up here it's this little symbol that's in the tabs in the browser window so you've got little shapes here you've got a gator for hostgator so we're going to create our own custom one of those so what i'm going to do and actually what you'd want to do before this is actually change this to white and change this to white and then download a white version as well so i'll go to save logo just just in case it's really helpful to have a black and white so i'll download both and then let's create that favicon so let's just delete our text and then i'm just going to grab that icon and make it black again and then i'm just going to drag it up and then we're just going to move it towards the middle and we're going to fix our crop so we're just going to go over to the little crop symbol down at the bottom right and i'm just going to drag this up and we want this to be a perfect square or at least dang near perfect so you can see that we've got our little values over here in yellow so i'm just going to make sure that these are about the same something like that and then i'm just going to apply this by clicking on a little check and then i will just resize this to be like that and put it right about near the center and then once that's done you'd want to save that as well and we're going to use that as our site icon so i'll just say no thanks download the low resolution file and that's going to hit my downloads as well and i've already got the sample logos made in the instant download images in the description in case you're following along with me so let's just go back over to wordpress and we're just going to click on the little pencil icon next to our logo here and then we're just going to uncheck different logo for retina devices we're just going to use one logo and then we're just going to click on change logo and i'm going to go to upload files select files and then just grab the logo so i'm going to grab the white logo for this one but i'm also going to upload the site icon logo we can upload both at the same time click on open and just make sure that you have your white logo checked and then just click on select and then we're just going to say skip cropping and now you can see that we've got our logo in here which looks great and you can change the size of it by just going over to logo with you can bring that down or way up i think a smaller logo looks a lot better so i'm going to do something like this like a 150 and then we can also put in a site icon so let's just go ahead and select a site icon and then grab that one and click on select and then you can see a little preview of it right here so i like that so i'm just going to go ahead and say crop image and then there we go now you can see that we've got our new site icon up here which looks awesome and if you ever want to change your site title and tagline of your website you can also do that down here in this menu as well so we've got the site title here and the tagline which we put in when we first installed wordpress but if you ever want to change it it is right here so now i'll just go up to publish and you can also just click on the logo and that will take you back to the home page cool so our logo is looking great our header is looking nice and clean now we've got our drop down menu so now what we want to do is edit the footer down at the bottom here and replace the logo in there and i'll show you how to replace this info down here so to do that we'll just go up to the little x and then we're going to go to edit with elementor and we're going to go to site footer and click on that and here's where you can edit your footer using elementor so first i'm just going to replace this icon or sorry this logo so i'm just going to click on it and i'm going to go to choose image and i'm just going to upload files select files and i'm going to grab my black logo because it's on a white background and click on open and then just click on insert media and then we're also going to do that for this one as well so choose image we'll go to the black logo click on insert media and there we go now it's going to replace that logo here which looks great and you can edit this text if you want by just simply clicking on it and you can edit the address these buttons here if you want to just click on that you can edit each one of these to be your social icons so if you wanted you could change it to facebook instagram whatever it might be so i'll change yelp and i'll just go to icon library and i'll just type in instagram grab the instagram symbol and click on insert and there we go then you just want to put a link to your instagram so i would just do my instagram which is instagram.com dale mcmanus that's my personal instagram and then that way was if somebody were to click on that it would go to my personal instagram and then again with these as well you can just change the text here if you want to change these buttons you can just click on this and then you just go over to whatever item it is and then you would just change the text and then put in the link to wherever it goes so you could put different pages on your website again so this could be like a whole other navigation menu you can customize this however you want so once that's done just go ahead and click on update and then just go over to the little hamburger symbol and click exit to dashboard and then we'll just go back up to our website and click on visit site so that we can take a look at our footer and we'll just scroll all the way down and there you can see our new footer is in there and it's looking good and now step number 10 is to edit for mobile and tablet nowadays 52 percent of web browsing is done on a mobile phone rather than just a desktop but it's still almost even so you want to make sure that your website looks great on mobile tablet and desktop so let me show you how to do that okay so in order to edit for mobile what we're going to do is just click on edit with elementor and then you just come down here to this little responsive mode symbol that looks like a desktop computer and then we can just change that to tablet or mobile so we'll just start with mobile and it's going to give us this little phone simulation where we can scroll down our website and make sure that everything is looking good which so far it is so you really just want to check the whole site make sure everything looks responsive and nice which it does and if anything didn't for whatever reason let's say the spacing was off on something let's say it was this button you can click on any widget you want and then as long as it has this little mobile phone symbol next to it you can change it on mobile and it's not going to affect desktop so let's say if we went over to advanced and it was a spacing issue as long as it says mobile next to it you can edit this however you want so we could just change this to be anything that we want and then if we were to go back over to desktop it's going to remain the way that it was on desktop so let's just go on over to the little symbol again down here and change it to tablet and make sure that everything looks good on tablet see so we've got this little spacing issue here with these little service buttons so we want to fix that make sure everything else looks okay which it does so let's go ahead and fix this on tablet so in order to fix this what we're going to do is just click on the middle column here and then we're just going to go over to the advanced tab and we're just going to add a margin to this so we'll just do maybe something like a 10 and we're going to unlink those values and we're going to get rid of the left margin so it's a zero just like that and then same with this one we'll just click on that you can add a margin to it to match and then same with this one just add a margin to it there we go and then obviously the text is being separated into two lines so we'll just go ahead and click on that and then we're going to go over to style and then go over to typography and we'll just change the size to be on one line maybe something like that and then same with this text we'll make that the same size which was 22. there we go and then same with this one style typography and then change the size to 22. there we go and then any of that that you change is not going to be affected on desktop so again we'll just go back to desktop it's also not going to be affected on mobile so everything's still looking great cool so now we'll just go ahead and click on update and then now we'll just go over to preview changes and take a look at our site and now you can see we've got an awesome website made everything is looking good we've got our about section our different services which you can hover over we've got our videos here with our button underneath our gallery and our footer as well as our different pages we've got an about page which is looking good we've got our services and our contact page awesome so everything on our site is looking fantastic and that is it guys all right guys so that was how to make a website with the astra theme if you enjoyed this video please smash that like button and feel free to subscribe if you want to see more videos about how to create professional websites from home or even how to make money with your websites and feel free to check out create a pro website on instagram and tick tock for more quick tips web design inspiration and behind the scenes fun alright guys thank you so much for watching and i will see you on the next video you

Channel: Create a Pro Website

Views: 171,457

Keywords: astra theme tutorial, make a website with astra, astra theme wordpress, astra theme wordpress tutorial, how to make a wordpress website with astra, astra theme, astra theme customization, how to make a website with astra, astra tutorial 2020, astra theme tutorial 2020, astra tutorial wordpress

Id: HSIb_VCS1Dc

Length: 76min 35sec (4595 seconds)

Published: Fri Oct 23 2020