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

In this video , I'm gonna 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 plug in 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 Creative 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 a best $5 .

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 3 to $7 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 gonna be walking you through this 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 time stamps 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 your website dot 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 , et cetera .

And there are web hosting companies that have buildings full of these servers and they also offer you 24% seven 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 your website dot wix dot com or dot squarespace dot com or whoever is 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 create a pro website dot com slash hosting .

And this will take you to a special cob branded landing page that I have with host gator dot com .

And host Gator 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 gonna 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 dot online dot net , things like that .

I really recommend trying to stick with a dot 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 gonna want to make sure that you leave the domain privacy protection on .

So you want to make sure that this is checked what this does is protect your information , like your email and your phone number .

And that way you're not gonna be able to get called by a bunch of solicitors saying , hey , we're gonna build your website for you and try to offer you all these things .

It's really frustrating and annoying .

So host gator 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 .

We're just going to give you the biggest discount whenever you use , create a pro website dot com slash hosting and whenever you use , create a pro website dot com slash 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 upfront , but really , it comes down to about 2 71 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 gonna be able to find anywhere on the internet .

I worked this one out special with host gator myself .

So I'm just gonna 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 gonna 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 your domain name dot 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 $18 down to just $5 .

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 gonna 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 , check out now .

Cool .

So now host gator 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 , ok ?

So now we can move on to step number two , which is to install wordpress .

Wordpress is the free software that we're gonna 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 uh 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 user name , I'm just gonna go ahead and change this to my name just like that and then you can create a password .

So I'm just gonna go ahead and create a new one and this is going to be the password that you use to sign into your reward press 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 used to sign up for host gator 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 admin .

And 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 dash 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 host gator 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 taking to a page that looks like this , you know that you can now log in .

OK ?

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 .

OK ?

So here we are at the log in 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 gonna 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 gonna 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 gonna 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 Astro 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 gonna go ahead and go with mentor 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 gonna 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 and then we 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 mentor 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 mentor and here we are inside the element or 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 .

And 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 .

And you can go ahead and close the pro section because that's going to come with these locked ones , uh which you can get by paying for Element or 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 just drag it in and you can see this blue line .

It's going to tell me where I can place it .

So if I wanted to place it here , I would 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 on 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 gonna go ahead and put in a classic background , which is just going to be an image .

So I'm just gonna 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 1000 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 is going to read that and go , hey , this website's too slow .

So make sure that you have images that are not too big .

OK ?

So I'm gonna 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 gonna 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 gonna be just one color or you can do a gradient like this and you can choose different colors .

So I'm gonna 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 gonna make sure that 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 gonna go ahead and leave it as 1 80 drag these back to where they were because I kind of like a nice soft gradient .

And 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 and we can change the bottom type to something like mountains and that's gonna 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 element or in order to do that .

So first I'm just gonna click on update to save my work and then we're just gonna 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 what 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 mentor .

But in order to actually fix this text , we need to use the astra theme settings .

So what we're gonna 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 lower case .

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 mentor .

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 gonna 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 were just going 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 element or .

So you've got the family here and if you open that up , you can see all the different 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 gonna 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 gonna 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 gonna do is just click on this button here and I'm going to just change the text over here to the button .

So I'll just change this to something like get astra and then underneath a 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 and 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 gonna click on that button and then I'm gonna 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 gonna 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 am not gonna do that .

I'm actually gonna leave it as white .

And then for hover , I'm gonna go to the hover tab and I'm gonna 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 gonna do is actually just change the border type from solid to none and then that's gonna get rid of our border completely and I'm also gonna do that on normal .

So I'm gonna 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 gonna change your button into more of like a pill button , which is pretty cool , but I'm gonna just go ahead and leave it as a square and I'm gonna give it another border .

So I'm gonna 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 get 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 going 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 gonna go ahead and leave it .

So that's two different ways that you can change the spacing .

OK ?

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 could just go over to the little Rubik's cubic and 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 paintbrush .

I can just grab a little paintbrush 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 gonna go ahead and leave it blank and just go over to style .

And then for the primary color , I'm just gonna change that to white like that .

And then you can change the size here as well .

You can make it small or big , really whatever you wanna do .

I'm gonna 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 can change the hover color to be something like maybe a light gray .

And then I can also do a hover animation .

So I'm gonna 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 gonna 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 gonna drag that right over to the service number two .

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 describe 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 am just going to duplicate this and I'm just gonna drag it over to service number three , I'll change that icon , maybe something like video .

So I will do maybe film , got 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 gonna take me to the edit column section and I'll just go over to style and I'm just gonna choose a new image .

I'm gonna go to upload files and then select files and I'm just going to 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 want to make your own .

And I'm gonna 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 gonna 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 and that's going to add kind of this little shadow behind our box .

And you can make it darker here by just dragging this 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 it 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 the 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 gonna click on the plus icon again and we're just gonna 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 gonna drag in an image into the left column just like that .

And then we're gonna go back over to the widgets and grab a heading and drag that in here .

And then we are also going to go over the widgets again , drag in some text with the text editor underneath our heading and then also back over to 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 gonna 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 gonna see it anymore , but we're gonna change this background image .

And let's also go over to this section .

So we're just gonna click on the little six dots and we're gonna 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 you'd 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 gonna grab , let's say like this called action button , we can use it kind of anywhere .

So we'll click open and then just click on insert media that's gonna put it in there and you can see it's kind of broken here .

So what we're gonna 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 .

And then we're also gonna add a background overlay .

So I'm gonna go to background overlay and then go to the little paintbrush and I'm just gonna 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 gonna 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 gonna go to style , change that text color to be white just 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 gonna rep paste 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 .

And 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 .

Then I'm gonna 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 gonna 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 is 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 gonna do here is actually delete this text .

So I'm going to go over to 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 gonna delete this whole column here .

We're gonna delete everything in it .

And then what we're gonna do is come over to the little Rubik's cube looking symbol and we're gonna add an inner section .

So what this is gonna 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 gonna do is go over to uh the whole section .

We're just gonna click on the little six dots and then go over to advanced and then what we're gonna do actually , sorry , go over to layout and we're just gonna 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 gonna do something like that so that these boxes are a bit bigger and then we're gonna go over to 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 gonna do is put another button underneath .

So what I'm gonna 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 gonna 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 dot 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 .

It's also good to style and we're just gonna 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 gonna 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 gonna 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 gonna 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 gonna 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 gonna replace the overlay color on it .

So I'm just gonna 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 .

And I'm gonna 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 .

And 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 am 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 .

OK ?

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 and 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 this 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 gonna do is just click on add new and I'm just gonna give this a title .

So I'm just gonna 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 element or full width just like that .

And then you can just go over here to edit with mentor and here we can just build a whole new page from scratch using mentor .

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 of these premade 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 can 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 could just click on it , see what it looks like .

And then I could just click on insert and then it's just gonna 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 mentor 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 and 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 can 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 gonna 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 mentor .

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 the 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 .

Uh 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 then I'll show you how to change this info here .

So to do that , just click on edit with mentor .

And first we're just gonna change this background .

So I'm just gonna click on the little six dots to edit this whole section , go over to style and then just choose image and I'm just gonna 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 uh picture there and then this is also set to fix .

So it's gonna scroll or it's gonna 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 then it's gonna 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 gonna 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 gonna change to L A .

So you can put in any location that you want , you can change the zoom and the height and customize it however you want .

So now I'll just go ahead and click on update and now let's actually edit our contact form .

So to do that , we're just gonna 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 gonna 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 gonna 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 .

Then that way they can just select the drop down and pick whatever option that they're inquiring about and then send a 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 dropdown 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 can 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 gonna 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 gonna say whenever it comes into your inbox .

So it's gonna 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 gonna 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 and click on visit site .

And then I'm just gonna 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 at gmail dot 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 used 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 to 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 , ok ?

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 .

Ok .

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 gonna 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 gonna do is just going over to menus and then we're just gonna 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 gonna 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 and then you can put in any l that you want .

So if I wanted to do something like uh 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 dot com slash create a pro website like that .

And then I could 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 dropdown menu .

So what I'm gonna do , I'm gonna 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 gonna 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 gonna do is just drag this up underneath services and then just drag it to the right a little bit .

So it creates this 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 gonna 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 sub menu 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 and you can edit this however you want .

I kind of like that right there .

So I'm gonna 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 .

OK ?

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 of minutes .

So let's go do it .

Ok ?

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 uncomplete 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 if 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 gonna get rid of the button completely .

So I kind of like the cleanness of this .

So I'm gonna 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 a 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 gonna 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 dot com .

And this is just a free software that you can use in order to create a logo .

So what I'm gonna 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 gonna 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 gonna drag it to the left and then I'm gonna add some text .

So I'm just gonna 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 gonna 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 .

And then you can go over here to the font family and select a new one .

So what I'm gonna do is go over to simple and modern and then I'm just gonna come down here and just select a new font .

So I'll do something like this and then I'm just gonna 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 gonna to crop this to be just the logo and no extra space around it .

Mhm .

Just like that and then 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 gonna say , hey , do you want to buy the high res one for 19 bucks ?

You can actually do .

No , thanks .

Download the low resolution file and it just says to give logo makers 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 , then now 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 host gator .

So we're going to create our own custom one of those .

So what I'm gonna 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 a white .

So I'll download both and then let's create that facon .

So let's just delete our text and then I'm just gonna grab that icon and make it black again and then I'm just going to drag it up and then we're just gonna move it towards the middle and we're gonna fix our crop .

So we're just gonna 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 gonna 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 gonna 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 these 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 gonna use one logo and then we're just going to click on change logo and then I'm gonna go to upload files , select files and then just grab the logo .

So I'm gonna 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 and 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 gonna 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 the logo with , you can bring that down or way up .

I think a smaller logo looks a lot better .

So I'm gonna do something like this like a 1 50 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 gonna 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 mentor and we're going to go to site footer and click on that and here is where you can edit your footer using mentor .

So first I'm just going to replace this icon or sorry , this logo .

So I'm just gonna click on it and I'm gonna go to choose image and I'm just going to upload files , select files and I'm gonna 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 and 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 dot com slash Dale mcmanus .

That's my personal Instagram .

And then that way 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 another 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% 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 .

Ok .

So in order to edit for mobile , what we're gonna do is just click on edit with element or , 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 um little service buttons .

So we'd want to fix that , make sure everything else looks OK , 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 , then 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 bout 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 tiktok .

For more quick tips , web design inspiration and behind the scenes .

Fun .

All right guys .

Thank you so much for watching and I will see you on the next video .