Hey, welcome to the video. We’re going to go through a complete website creation and I’m going to show you the very best and easiest way of getting your new website online from start to finish. I’m going to be with you every step of the way so you’re never going to be stuck and this is going to be no hassle whatsoever. It’s the quickest and most effective way of doing this. This is what you’re going to be creating. Just have a look at this beautiful header, so if you’re a beginner or even if your more experienced, this is going to help you out so much because I’m also going to give you lots of tips and tricks to getting your website out there and the best way of creating a new website, and here’s your about page. Again, a beautiful animation comes up and a contact page.

Click here and grab the image pack!

This website that we’re going to be creating together is inspired by people like apple and Mashable because all of these people use a beautiful big header at the top. Just like this is inspiring and it draws people in. So hope you’re excited. Are you ready to get your new website online? Let’s get to it. Okay, I can’t wait to get going with this. I’m really excited to create your new website with you. The first step is to choose a domain name and we’re going to be doing that in a minute. In the second step, we’re going to be creating a website and then the third step is called a share, like and repeat. And this is all about me giving you some tips and tricks of my own that I use all the time to get your website out there and build your brand. So all really exciting stuff.

So let’s start on step number one. And for this step, all you need to do is click on the link in the description of this video. So if you’re watching this video on youtube, just go down to the description and find this link and click on that and it’s going to take you over to hostgator.com and you’re gonna be saving up to 60% by using hostgator because we’ve teamed up with hostgator and we’ve managed to get you up to 60% off your web hosting. This is a huge saving for you, so I do really encourage you to do this with us and by using hostgator. So you definitely want to click on get started now. So just click on get started now and it will take you over to this page. And in here is where you choose your new website’s name, which is also called a domain name.

And all you do is type that in here where it says search for a domain name. So you would type in whatever you want for your website name here, and then you can choose some.com.online.site. Anything that you’d like, care.co is down there. So do that right now. And then scroll down to choose a hosting plan. And you probably want to use the hatchling plan. That’s what I’m going to use. You’ve also got the baby plan and the business plan. The business plan is probably the best one to use if you want to set up a shop, but we’re not going to do that in this video. But of course if you’d like to do that, you want to choose business. Baby plan means you can have unlimited domains and the hatchling plan is just for one domain. So I’m just going to have the hatchling plan.

• Disclosure: When you sign up for Hostgator through my coupon code (wordpresshero) I will earn a commission for referring you, at no additional cost to you. This helps us continue to create this awesome content for you.

And in here, the billing cycle, you choose either a month to month subscription or three months, six months, 12 months, 24 and 36 months. And as you can see, you save more money the longer that you do at. So you can save up to 60 point 50% off, 60.5% off, um, and 60% of up to 24 months and so on. Then just fill in a username and a security pen and then go down to your billing info. And Hey, you want to fill in your address and your billing info of course, but also make sure you use a very good email address that you can access because hostgator will email you straight after you’ve done this with your login details. So you can then start creating your new website. So you definitely want to use a good email address here. Then scroll down again and find additional services.

Now they’ve added on some extras here because they’re crafty like that. So we don’t need these. So just untake those because we don’t need them. And that’s going to save you even more. And down here you can use a coupon code. So you want to make sure here that it’s filled in wordpress hero and then you want to validate this and that’s going to make sure that all of these savings have activated and that you’ve saved lots of money by doing this. And we actually give them most savings. So definitely, definitely use wordpress hero in here. And then make sure you’re happy with everything down here and all you do is tick to agree and click on the checkout now. And it’s that easy. Now, hostgator will have sent you some emails. So let’s go over to our emails now and you are to find the email that hostgator sent you and it will be your account info.

So click on that. And in here you’ve got your password and your username and things like that and your new domain name. So mine is begin my new website. All right, so here you want to find the control panel languages. This one here, so click on that and it’s going to take you over to your control panel. Just log in using the username and password. Now don’t worry about this, it probably looks a bit overwhelming. There’s loads that you can do in here from FTP connections to your database, your domains. But don’t worry about any of this. I don’t use any of this either. So just forget about all of that. And all you want to find is software just here software. And then you’ve got a couple of quick things to do in here. Find a PHP selector right here. Click on that and we’re going to update your PHP because this doesn’t happen by default for some weird reason, so you want to make sure by clicking on this dropdown here and selecting 7.0 and then click on update to update your PHP.

Simple as that. Don’t worry about it. You just need that something that you need to do. Then click back using the Arrow the and find software again. Scroll down and find software which is down here. There we go and find Quick-Install. Click on that and then click on wordpress in the middle right here. Then select your new domain from the dropdown. There we go. Click on next, super easy, and then fill in the few things here. Fill in the blog title or website title. In this case I’m an Admin username, your first and last name and then an email. So just fill those in and click on install right here and wordpress is then being installed. And now we go installation complete and your login details will be right here and you want to make sure you write these down, copy them, or take a screenshot, whatever you need to do to remember these.

You do not want to lose these. So write these down and then click on login right here. Then you should see this page to log into your wordpress dashboard. If you don’t, if you get an error, don’t worry about it. Just wait a few minutes and then log in again. Go to this page again and this should show up. Then just enter your username and password, click login. And now you’ll be on your wordpress dashboard. So congratulations. This is an amazing achievement. Not many people do this, so really well done for doing this. You’re going to have a few notifications come up most likely. So you can just click on the x, just like this. Click on the x here and here. You just want to keep this area tidy and organized because you’re going to spend a lot of time on this screen or you know, going in and out of this screen.

So you want to make sure that everything looks organized so you know where everything is and so on. You can also minimize these if you want to to keep it ultra tidy. It’s entirely up to you. Okay, so on the left you’ve also got a toolbar with all kinds of things here and as we go through creating your website, you’re going to see new things appear on here right now you’ve got posts, media pages, comments, marketplace appearance, plugins, tools, settings, and so on, all kinds of things in there. The first thing is first, let’s click on hair. Click here to remove the coming soon page so we can see what our website looks like right now. Now let’s go to appearance and themes and we’re going to install your brand new theme and this is going to change the look and feel of your website.

This is absolutely incredible if you’ve never used wordpress before. A theme is like I said, the look and the feel of your website is how it functions. So as you can see how you’ve got a few themes already installed and these are WordPress’s default themes right now. The active theme is 2019 so the look and feel would be how it looks like right there. And then the 2017 to the right of that. So let’s click on add new theme right here. And this is going to take you to WordPress’s thousands and thousands of different themes available. And you know, feel free to look through these sometime but you don’t need to right now because we have found the best theme to use and it’s called ocean WP. So just search for ocean WP in the search right here and here it is. It will appear here. And then all you do is click on install and activate.

And ocean WP has everything you need for a website, for a blog, for a shop. It does everything. It’s a pretty incredible theme. It’s actually probably the best theme we’ve ever used. A website’s made easy, so we don’t really bother using anything else is one of the best themes we’ve ever come across. So as you can see now your new active themes, ocean WP, and you’ll have a little notification up here saying this theme recommends the following plugins, Elementor and ocean extra. So let’s begin installing these because we’re going to use those going forwards. So let’s click on begin and stalling. And then from the dropdown, nope, sorry, you need to click here to select both of these and then from the drop down, click on install and apply and that will start installing and activating those plugins. Perfect. There we go. And don’t worry about this error.

That’s no problem at all. It doesn’t affect anything. Okay, so now let’s quickly look at how your new website is looking right now. So scroll up here and right click and open this up in a new tab so you can easily get back to your dashboard. And now click here and there we go. That’s how your website is looking right now. So considering you’ve just installed it, it’s no surprise that it’s looking pretty simple. It’s a blank canvas. It’s ready for you to make into anything you can imagine. We’re going to do this together. And I’m going to show you how you can create any type of website that you can think of. There are no restrictions. You can do anything that you want is absolutely amazing and I can’t wait to show you the possibilities. So now let’s go back to your dashboard by just clicking on the other tab here, or go here and click on dashboard.

Okay, now let’s go to plugins and add new. And we’re going to install a very important plugin. And this plugin is going to enable us to use ready-made templates that are completely customizable. So what you’re effectively doing is giving yourself a super fast shortcut to creating your website so you’re not starting completely from scratch. Because if you did that would take you maybe a few days to a week to create a beautiful website. But, but doing it the way I’m just about to show you is going to enable you to make the all beautiful website in about an hour. So let’s type in Varto elements.

Okay?

And it’s the top one here in Bartow elements. So now click on install now and then activate and that plugin is now activated. Okay, perfect. And now on your toolbar, find elements and click on that. And this is going to take you to the [inaudible] elements plugin. Just agree and click on continue. And here we go. This is Invitae elements and this is a brand new plugin, which is one of the most incredible plugins I’ve ever seen personally enables you, like I said, to create any type of website you can imagine. So as you can see here, we’ve got different templates or different themes for the website. So we’ve got nail salon, we’ve got house cleaning company, conference venue, marriage celebrant, we’ve got city council, indoor rock climbing, we’ve got languages, clothing, alterations, handmade furniture. And just for an example, if I click on one, let’s click on handmade furniture.

And actually this is the one we are going to use. So as you can see now I click on this, it’s given me lots and lots of more to choose from. So we’ve got a po about page templates, we’ve got services, we’ve got collections, and we’ve got contact page templates. How amazing is this? It’s given us everything that we need to get going. It’s amazing. So now if I click on one of these templates, let’s go with this one because this is the one we’re going to use. I can now have a look at what this looks like. It’s just amazing. This was, this was nowhere near possible about five to 10 years ago. This would have taken you just to create, this homepage would have taken you months and months working with the company and it would have cost you thousands of dollars. It’s just amazing what’s possible now.

So let’s click on back to template kit right here to go back. And then back to element templates. And we are looking for the one I’ve just gone into. So just so you know, it’s called handmade furniture. So it’s this one. So if you just scroll down a little bit, you’ll find it right here. So click on handmade furniture and for the homepage that we’re going to use, it’s to be a home one. This one right here. So click on that. And like I said, you can have a look around. See what, how you like it is looking amazing. You’ve got all these different sections. Oh, and by the way, I’ll quickly explain that. We’re going to be using Elementor to customize these. You can make, make this however you like. You can remove each one of these sections and customize it. You can edit all the colors, the font, you can move things around and um, change images.

You can swap this image for a video if you wanted to. You’ve also got a project gallery here, which looks amazing, and these actually zoom in as you go over them. You’ll see that in a little bit. And remember each one of these as a section. So this project gallery is its own little sectional element, which you can move around, you can change, and you can remove completely if you want to. You don’t have to have any of these if you don’t want to. So it’s completely customizable. So now when you’re ready, we’re gonna create the homepage directly from here. So this template automatically gets placed into that page. So all you do is name your page here. So I’m gonna name it home.

Okay.

And then click on create page and it’s creating that page for you right now. It’s importing all those elements into that page is doing it all for you. It’s pretty amazing. And there we go. That page is created. As you can see it’s created a draft page so we’ll have to publish that in a moment. So now let’s click on back to template kit and now we want to find the about page. Here we go and I’m going to use the about to so click on that and again we can look around. This is a really, really great looking about page as well. It’s just all seamless and it looks fantastic. So I’m going to now create that page by typing in about here.

Okay

and create page and it’s creating my about page for me putting in that page, that template. It’s just amazing how easy this is. And now I’m going to click on back to template care again. And last one is the contact page and I’m going to scroll down here you have got really, really nice collection page here. This is incredible. Well, I might use this one myself cause my girlfriend and I have a shop on online shop. And this is perfect for if you’re thinking of creating a shop anytime. This looks really, really nice. Anyway, let’s go back and find the contact page and I’m going to use the contact to this. This one right here. Oh, and just to let you know, if we go back again, you have got these other templates of course, but as you can see it says pro you have to pay for those ones, but there really is no need to do that because I’m going to show you how to customize the free ones so you can have them any any way you like. So anyway, here’s the contact page we’re going to use and I’m gonna, I’m going to change all of these templates, you know, slightly, we’re not gonna have them exactly like this and I’m going to show you how to do that. So now let’s create the contact page. Okay.

Okay. And we’re done here. So now find pages and go to all pages and we just need to publish those pages that we’ve just created because right now as you can see, the about page contact page is a draft and we don’t want that. We want it to be published, we want it to be live. So the first thing we want to do just before that is highlight the privacy policy and sample page and the WP forms preview because we don’t really need any of these. And then click on move to trash and apply. And I’m going to remove those, those demo pages, those like default pages. Okay, so we’ve now got home contact and about perfect. So now let’s click on quick edit for each one. So Click on quick edit here, and then under status you want to change that to published and then click on update and do that for each of your pages. So each one is published and no longer a draft. So update each one, changes status to publish, just like that, and update it. Just like that. There we go. Perfect. And now we’re going to start on the home page. So let’s click on edit

and this is how it used to look when you created a website or the websites. Pages used to fit, used to create all your content in this page and a change these settings. And it wasn’t, it was okay. You know, it was a very, very slow way of doing it. Not very exciting at all. Um, so, but we’re not going to do that at all in this video. We’re going to make it way, way more fun than way better to do. So for now we’ll just click out of these tips. Let’s just remove those. So this is your pages title. If you ever want to change that, you just change it in here.

And then this page, we’re just going to change a few settings. So scroll down to the ocean WP settings down here and then go to header and disable the top bar and then change the head of style to let’s try minimal or we’re going to, I’m going to show you how a minimal insurance parent look. Cause each one looks a little bit different. I’m going to start on minimal. Then go to title and sable, the page title and check footer. Let’s leave that as it is right now and then go to page attributes here and you want to make sure it’s an element of full width and then click on update at the top and you want to do this for each of your pages. So go back to all pages again and then click on edit for contact had Darren go to header undisabled, the top bar, then title and disabled that and then make sure the template is element full width earned update, oh I forgot to change the or go back to header in a minute.

I forgot. Changed ahead a style to minimal. Make sure you do that and then update again. Then goes to all pages and do the same for the about page. Click on edit and go to a disable and then style, I nearly forgot. Again, minimal title and disable that and template element full width and update that and for some reason sometimes these templates change. It could be when you import other elements into your website, it might change the page template, it could change it to element to cannabis or one of these here. So you just want to make sure it’s always in element for width cause otherwise things won’t look quite right. So then update that and we’re all done. So let’s go to all pages again and we’re going to start on the homepage and create your beautiful looking home page. So now in home you want to click on edit with Elementor.

Okay, amazing. So now we’re in Elementor. If I click this button, it makes it full screen. And as you can see here, this is the template that we imported earlier at these really, really cool animations that come up as I scroll down. Really, really nice. This is the gallery I was talking about. See it kind of like as animation as zooming animation as you scroll over. Amazing. So each of these sections is completely customizable to how you want and it’s looking amazing. And then we go. So I’m going to click this button again to bring up the toolbar on the left and in. Hey, you’ve got all kinds of widgets or tools that you can click and drag into your website to use and all kinds of things. So you’ve got Google maps, you’ve got icons and buttons or videos and images, headings you can add in text.

You can add in things such as image boxes and icon boxes, image galleries, all kinds of things. Or you can even add in a soundcloud widget. If you want a place in music on your website, it really is completely customizable to how you want. So I’m going to go through creating this homepage. So follow along with me. I’m going to show you every step. I’m not going to skip anything, so you are never going to be stuck or not knowing you know what to do. First Element or section. I’m going to start on the in is this header up here. I’m going to change the background image or I’m going to change this text here. Then to change that color as it, as you hover over it has a really cool animation, but the color changes to a black, I don’t really like that. I’m gonna keep it to this orange, but maybe a slightly dark or something like that.

So let’s go to edit a section. All you do is scroll over it and you’ll find some buttons at the top. And to edit the background image, you would click on edit section, which is this middle button here. To remove it, you’d click on Lacrosse or to add in another section of brand new section, you would click the plus, which would bring up these icons and I’ll explain that in a moment. But for now, let’s click on the middle button, which brings up some more tools on the left. And right now it goes into layout by default. So this brings up things like the content content with a minimum height, all kinds of things you don’t really need to worry about this. For now, let’s go to style. And in here is where you can change the background image and you would just click on this image here or click on delete and let’s do that.

Let’s click on the image and then go to upload files. You might go to media library, it might take you to the media library by default and this is your, as it says, media library. This is where all your images will be or your videos will be as well. If you’ve got videos and you might have some images in here already and this is the, and these are the images that came with the templates that you’ve just imported and these are free for you to use. You can use any of these if you want to, but we’re going to input our own. We’re going to upload our own images and I’ve got some amazing images I’ve put together. I’ve gone image pack that you can download completely for free. All you have to do is go over to our our website and then go to our blog.

So it’s websites made easy. Dot TV, the forward slash blog forward slash begin my new website. And then all you do is click on download, right? Hey, you can download the image pack for free right here and you can use these anywhere that you want to on your website. So now go to upload files and Click on select files and find the image pack that you just downloaded and these are the images that you can use. These are absolutely amazing looking images. I love these. I’ve chosen these specifically for you guys watching this video, putting your brand new website together. I absolutely love these, have really, really beautiful inspiring images. I really, really love them. So there we go. There’s your images and for the background header image, I’m going to use this image right here. I think it’s absolutely beautiful of the water, the river going through that with the rapids.

It’s amazing. So I’m going to now click on open and that will upload it to my media library. So we’ll just wait for that to do its thing. Okay, that’s uploaded. So now all you do is click on insert media at the bottom here and that is placed straight into your website out. Absolutely amazing. That looks so much better. Let’s make it full screen again by clicking that button. That is looking so good. I love that. I’m just going to make the background overlay so it’s got a background overlay, which is this the shape here and you can remove this if you want to. You don’t have to have it. I quite like it and you can find it here. Background overlay and as you can see this as the shape and if you didn’t want it, you just click on delete. What I want to do though is change the opacity which is down here and right now it’s on point 87 I’m going to reduce this slightly to show a bit more of the image. I think that looks a lot better. I really like that. But sub to you, you can remove it if you want to by just clicking on delete. So let’s go back to background and you’ve got some options here for the image. You’ve got position, attachment, repeat and size. So p for the position you can change whereabouts the image is placed or its position.

So by selecting the different ones of these, you can see the image it moves around. So it’s up to you how you want it. This can be really useful depending on what your image looks like. If you want to show anything specific attachment you want to, you want to put it on fixed because if I put on fixed and now if I scroll around, that image stays in place. I think that looks really, really nice. I love how that looks in repeat. I’m not gonna select anything for that and cover that should be selected for size. You want cover, selected and that’s the background image complete. That looks amazing. So now I’m going to change the text here and the button and again, all you do is click on it or click on this, this icon right here. And another tip for you. If you right click this icon, you get some more options so you can edit it, you can duplicate it, copy you can.

Then you can also delete it down here as well. So if you don’t want something, you can easily remove it by clicking on delete. I’m going to edit it so I’m gonna Click on edit heading, which brings up the options on the left so now have to do is type whatever I want in here and I can have a link as well to that to another page or something. For example, and in style I can change the type Paul graphy so we’ll be doing that in a minute. Let’s go back to content and I’m going to type what’s your story because I’m going to make a website that is basically a company which sells video footage or puts together stories for you. It’s just as an example for this video, so now I’m going to go to style and I’m going to change the typographic. I’m going to change the font to later.

I really like later Elif really minimalistic and clean. I’m going to change the weight to 400 yeah, that looks pretty good. And you’ve got other things here such as transform or style. You’ve got line height, which changes how much space there is in between each of the elements here and the letter spacing, which changes the spacing in between the individual letters. I’m just going to keep it about how it was. And you can change the text color by going into here. I’m just going to leave it as as it is though, because that looks pretty good. And in advanced, this is really, really a useful to know. In advanced, if you go to marginal padding, you can increase or decrease these. So if I increase the top padding like this, it lowers all of those elements. It makes them, uh, pushes them lower down so that that can be really useful.

If you want to move elements around your website and make it exactly how you want for the text underneath, it’s exactly the same. You just click on it and type in whatever you want that. And I’m just gonna leave it as it is, but you know, you know how to do that. It’s exactly the same as that text. And now I’m going to edit the button. So all I’m going to do is click on it again. And in text I’m going to write in explore. And you would add in your link here. So if you wanted to take people to another page on your website, you would add in that link here. So it would be whatever your domain name is forward slash about or forward slash contact. And you can obviously easily copy the link from up here. So you would open up your website in a new window and go to whatever page you wanted and then copy the link and then paste it in here.

Really, really simple. You can align this button as well by using the alignment here. Can I keep it like it is changes size super easy. And you can even add in an icon if you really want to. I’m not going to though, I’m just going to remove this, but that’s there if you want to. And then in style is where we can change the colors. So right now it’s on normal and the background colors. This like orangy yellow kind of mustardy color, which I quite like and I’m so normal is how it appears when, when no one is ah, is scrolling over it. So it’s like this, but when someone hovers over it, it changes. So right now it’s on black. If we go on hover, the background color is like a black. So I’m going to change this. I’m going to go back to normal and background color and click on that.

And I’m gonna copy this code, which is the colors, which is the colors code here. So now I’m going to go to Hava background color paste that in there and I’m going to make it slightly darker or I’m going to, I’m going to change it slightly like that. And now when I scroll over it, you’ll see it changes to that darker color that looks so much better than the black. You can change the animation, the hover animation here you have all kinds of things that you can change it to. Can, there’s a sink one right there. There’s one called skew. So it changes like that. These are really, really cool actually. Like really, really nice buzz. It’s pretty fun. So yeah, have a look around and see what you like. I’m just going to keep it to the grow one because I think that looks really good. And that’s it. And again, obviously in advanced you can move around to exactly where you’d like like it. So the top margin is on 25 if I wanted it lowered down I would just increase that or closer, I would decrease it. Really simple. And that’s the, that’s your head had done actually that’s, that’s it. All done. There we go. That is looking so good. Absolutely love that.

So the next section that we’ve got here is this like services section. And if I scroll over these, this is really, really cool. I really like how this luxe, it’s really, really, really engaging and you can make each of these whatever you want. You can, it depends on what you are. If you’re a photographer for example, you could have what we, whatever your services here. If you’re a wedding photographer or travel photographer, you could put that in here. And underneath that you’ve got a wide choose us section. So you know you could write whatever you do in here, your strengths tell people about what you do and everything else. So let’s do the next section for now. If we have a look at the finished website, if I scroll down, I’ve got the services section like this. So I’ve just got storytelling experts as a title and I’ve changed these icons here so they’re centered.

I think this looks much better. So we’re going to do that in a minute. And the next section that I’ve got here is a call to action. Just a little call to action. So a, you can, you know, if you had a shop, you could have a button that takes people to the shop or um, to any page on your website, whatever you want. And then I’ve got the gallery section here and this is perfect if your photographer or anything really whatever your business or company is about you, maybe you’ve got a new app that you’re launching or, uh, any kind of services that you offer. You can have images of those in here. And each of these you can link to its own page if you want it to. And then a fitter with your social media platforms. And this is really, really important to, uh, to your business and your company.

You know if your not on Facebook or or Twitter or Instagram, I definitely recommend that you start a Facebook page or an Instagram account. You want to start building your brand up and getting people aware of what you’re doing. So we’re going to start on the next section, which is the services section. So the first thing I’m going to do is I’m going to remove this smaller tax tests. I’m going to right click here and click on delete. And I’m also going to remove this line underneath this on by clicking on delete that. I’m going to edit this text right in what I want here. And then I’m going to go to style and change the topography. Again, change the weight. There we go. Looking much better. And then for the element underneath, each of these is its own element. So if you click here, it tells you at the top that it’s an icon box.

So you’ve got different options here. You can change the icon, you can change how it, how it looks. So the view. So right now it’s on framed, you can change it to stacked. That looks pretty nice as well. I’m just going to keep it on framed. Can change the shape I’m going to keep on square and then you write in or your service or whatever that you want. Hey, you can change that. Then you can also link it to its own page right there and in style. If you go to style, you can change all kinds of things like the spacing, the size and the padding and everything right there. This is, this is for the icon, so the spacing and size for the icon right there. If you go to content, you can change how that looks right there. So I’m gonna change the alignment to center, which changes how that looks.

So centers, I think that looks much better. You can change the color of the writing and everything right there by just clicking on color and the topography as well. I’m just going to leave these as they are, but this is how you edit it. And of course in advanced you can change exactly where appears on, on the, uh, on the element. So you can, you know, you make these sections wider. You can also, if you school, Hey, you can also make these, these wider by clicking this line and dragging it to the left and right. So if I do that, you see these change, I’m just going to leave that about how it was just like that. So do this for each of the different icon boxes. So Click here to edit editor and again course you can change the icon and the view. I’m going to go to style and then go to content at the bottom and align it to the center just like this. Perfect. And do it for the other icon box. The last one I’m going to go to style again and then content and align it to the middle.

There we go. Okay.

I think, I think that looks really great. Okay, so now that’s the element done. And you also want to always remember to update when you’ve done any changes to make sure that you’ve saved what you’re doing. Make sure you update here. Just click on the and it will save if you, if you accidentally come out of this page without updating, it won’t save anything that you’ve done. So you definitely want to make sure to remember to update. Okay. On the finished website, the next section that we’ve got is this call to action or really it’s just a little inspiring section to get people to click and make an action, you know, choose to do something. So this could be anything that you want. It could be go to, go into your shop if you had one or your about page or just to contact you.

Or it could be to go to your Facebook page. It can really be anything. So if we go back to that into Elementor Phi, scroll down, I’ve got this element, I’m going to remove this cause I’m not gonna use it in this website. So I just click on the cross to remove it. And then there’s the gallery section. So I’m going to keep that. And then I’ve got these little icons and this is this. This is really cool. If you want to add in people that you’ve worked with, you just edit this and then you add in their icons, their logos right here. But I’m milking you. Use that in this video. So I’m going to remove it. And then you’ve got this, you’ve got another gallery like section how I think this looks cool as well, but I liked the other one more. So I’m gonna remove that one.

And then here’s your call to action. So what you want to do is move if you want to, you don’t have to, but I’m going to move this section above the gallery section and all you do is click and drag it above. And any blue line is where you can place it. And so there we go. Easy. So that’s now been placed above the gallery section. So now let’s set it at that one. So I’m going to out a, an image to the background. Right now it’s just a gray. So I’m going to click here and then go to style and click on list, add in an image. I’m going to upload files and a select files and I’m going to upload all of these images cause we’re gonna use them anyways. So May as well upload all of them. We’re going to de-select to that one because I’ve already used that one.

We’ve already uploaded it. And now click on open. And as you can see, we’ll upload all of those images for you one by one. So just wait a minute or two while that happens. And I’ll see in a minute, I hate perfect. And that’s those images uploaded. So the image I’m going to use is this water one. Again for that call to action sections, I’m going to insert media and it’s straight enough. So I need to use the position options and attachment and so on to change how this looks because obviously it doesn’t look quite right right now. So I’m gonna change the attachment to fixed and then the size to cover and instantly that looks way better. And now I can use the position if I want to to change it slightly. So if I put bottom center, that looks pretty good. I quite like that actually.

And I might change it to center center. There we go. Put more water in the perfect. There we go. All done. So now I’m going to change the writing. So I’m going to click on that and change what I want in here and then go to style and type or graphy changed the font to later. Want to change the weight to 400 and I’m going to change the text color to a white. There we go. That looks much better. I’m gonna Change this as well. It’s going to change the text color to a white and that’s basically how you change that section. The button here looks fine as it is. You can obviously click this and change the text if you’d like to. What I am going to do actually is click here again and go to the image and I’m going to add in a slight background overlay to make this slightly darker.

And to do this, you would click here and then go to opacity and you would change this actually this color here, change it to black or whatever. And then you would just change your pasty to how you want. I’m going to add in a slight opacity so I’ll put it on 0.2 never. Yeah, I think that was great. Much better. So now as I scroll up and down, that’s looking fantastic. So I make it full screen. There we go. Can’t believe how easy this is. All right. Okay. So the next section is the gallery section. This is just as easy as before. I’m gonna remove this small tax to remove the line. You can keep these if you want to. Of course you can do anything that you want. I’m just going through showing you how I did things and when you know how you do the basics or you know how, how I did it. When you follow along with me like this, you can do anything that you want going forwards. It’s all the same, same techniques and the same ways of doing things. So will you do is change this text here, go to style and topography again.

Perfect. And then for the gallery, click here to edit each image. So then here’s the image and you would just replace it with an image of whatever that you want. So you would, you could just insert any image that you want to and it gets inserted just like this. So you click on each one, click here and choose the image that you want and then insert media. So as easy as that, really quick to do. So I’m going to upload each of these images really quickly. Okay, there we go. And for each image, again, if you click on it, you can change the link which is down here. If you go to link right now is on none. But if you can change it to your immediate file or custom URL. So if you choose the URL, you can then add in your link here.

So this could take the viewer to another page specifically about this image. So if you are selling your photos of as a photographer, it could take them to that page where they can then purchase that image or whatever you want. This could be anything that you want, but that’s how you add in a link. So that’s that section done. That’s looking great. Okay, so the next one that we want to add in is your footer. So right now there’s no, no actual element down here for a footer. So we’re going to add one in. If we go to this, this icon right here in Varto elements and click on that and then go to blocks of the top here. And then we want to search for footer.

Okay,

and there we go. It brings up loads of different elements of footers that you can use. And I want to use this one because I think this looks really, really good. It’s got some social media icons here so people can go to your platforms. So then just click on add block to page. Perfect. There we go. Okay. Now I’m going to remove this text. I’m going to just edit this foot a little bit. I’m going to remove this line. We look at the finished website. This is what it looks like. So I’m going to change these icons slightly cause right now they’re just a grade. It’s like this. So I’m gonna change this font, go to style and type of in a change the the weight to about 300 if I changed the font, there we go. That’s much better. And now if I click on, if I click on one of these or these icons right here or bring up the options on the left.

So here all you do is click on a social media platform and you can add in the link here or you can change it entirely by clicking the Arrow here and you can change what you want your platform to be. And you can add more in by clicking on add item and then searching for for one here. So I’m going to add in a youtube one. There we go. And you can remove them by clicking the cross just like that. And you can move them about really easily by clicking and dragging just like this. There we go. And I’m also going to change the colors. So if you go to style and then color, so custom at the moment I’m going to use official color. I think that looks really, really good and I’m going to change the size slightly. Make them slightly smaller, just like that. And again, in advanced you can change whereabouts they are, you can move them up and down. You can move the elements around completely flexible. I love that. So add in your links to your different social media platforms so people can visit you there and carry on the conversation. And that’s your photo. Complete well done. Now I’m going to save this template, this footer template. I’m going to save it so we can use it on other pages. So right click and save as template.

Okay.

And I’m just going to type in footer to name this template and then save and I guess added into your custom templates. These are your templates. So there’s the footer one right there. Okay, now come out of this and I’m happy to say that your homepage is complete. This is looking absolutely amazing. I really hope you’re happy with that. So you can probably, you’ve probably noticed there’s a few things that we need to clean up. So at the bottom you’ve got copyright down. Hey, we need to just remove that course. You can keep it if you want to. I’ll show you how to edit it or remove it in a moment. And at the top you’ve still got a top bar or, or a page like name or whatever. We’re gonna remove this. So if we open this up and click on update to save everything that we’ve done, and then scroll up here, click that, and then click on exit to dashboard.

Okay, great. Now let’s make sure that their header in these settings is the right. Yup. So we’ve got style is minimal and that’s disabled. It’s going to title and US disabled as well. So I think what we need to do is go to appearance and then customize, which we’ll be doing in a moment. First though, let’s go to settings and we’re gonna go through few of these settings to make sure that your website’s foundations are set up properly. Now, a lot of people don’t do this and it’s really stupid not to because you really need to set up these settings a right way. So your website can be found in Google search results and all your security is set up properly. So let’s go to general and here’s your site title and Tagline. And I’m just going to remove these cause you don’t really need them.

So I’m just going to remove them just like that. And just to let you know you never want to change these cause if you do your website won’t work anymore. So you don’t want to change those. Now at the bottom, click on save changes and then go to reading. And here where it says are having page displays, you want to click on a static page and change the homepage to home. You can leave the posts page because we’re not going to be using our blog in this website. But if you do want to blog, you would select that here. Then click on save changes and then go to permalinks and change this to post name because this is much simpler for search engines to read. And get to know what your website’s about. So it’s much simpler than either than these other ones. It’s just your domain name.

Dot Com. Forward slash about or contact way simpler. So make sure it’s on post name and click on save changes again, and you’re all done with those settings. Okay, let’s now go to appearance and we’re going to go to customize in a moment. First, let’s go to menus and we’re going to create the menu that appears at the top of your website so people can look around your website really easily, go to other pages and so on. So here is where you create your menu. You can type in your menu name here. So let’s do that. I’m just gonna put in menu and then click create menu. Then what you want to do is select the pages that you want in your menu by just selecting them on the left here, and then clicking add to many and they get placed straight into your new menu.

You can move them around to how you want your menu to appear. I’m going to have home than about on contacts. And then you want to make sure main is selected here and that’s all you need to do. Then click on save menu here and you’re all done with that. And now let’s go to customize. So go to appearance and then customize. And this is the customizer and this is like the inside of your website. This is where you can change all kinds, all kinds of things such as homepage settings, general options in general styling. So there’s colors, there’s a Typo graphy one here as well. So heading one, and it’s all kinds of settings in here. I really recommend that you just look around because I can’t really go through each one of these. It would take hours and hours to explain each one. So look around and see what everything does.

You’re not going to break anything. Just look around and play, play with it, you know, and you’ll get to know what everything does and what you want to use or what you don’t want to use. So what I want to do is change how the menu looks up here. So right now as I hover over, it’s a blue and the font is black. Now this is not gonna pay. I’m gonna Change how this looks. I want the background image of the header to be full wet. So it’s at the top here and the menu will be essentially, it will be on the image here. So I want the font to be white so it pops a, it won’t blend in. You can’t have it like this if you want to. I’m going to give you both. I’m going to show you how to do both both ways cause this looks good as well.

It’s entirely up to you. But what I’m going to do right now is go to menu colors and I’m going to find the, find it in a minute, but it should be an header and then many. And here are the menu colors. So if I go to link color and change that to white, it actually disappears because it’s on a white background. But that’s okay. And then link color. Hava I’m going to change too. I’m going to change it to that orange that we had earlier about that color. I’m just gonna leave that as it is and then I think that is going to look way better. Now scroll up and go back by clicking on this Arrow and then go to footer bottom. And this is where you can edit the copyright information. So if you want to, you can write in your copyright details here if you really want to, I’m just going to remove it for this video.

I don’t want to use that. I think it looks a lot nicer without that at the bottom and go back and go to footer widgets and I’m also going to uncheck that to remove that as well. And we are all done in the customizer. So I’m going to publish and like I said I’m going to remove this white bar at the top because the menu, as you can see it’s here, it’s just blended in because it’s got white font. So lets come out of customize it by clicking on the cross. And then let’s go to pages and all pages and you want to go to home and click on edit and we might need to do this for each of the pages. We’re gonna gonna have a look. So let’s go to header and I think this has got to do with the head of style.

Right now it’s on minimal. That’s what the white bar is. If I change this to transparent and uptodate and then go up here and have a look at our website, I’m going to open this in a new window. There we go. That’s looking much, much better. So the white bars despaired. We have got a line here, which I’m going to remove in a moment, but that’s what I wanted to happen in the first place. So there’s no white bar. So it’s up to you if you want to have that white bar at the top. So your menu appears on the White Barn and not on the image style. Both ways look really good. So you’d go back into your pages and you’d go to header and change the head of style and you’d just change it for minimal to transparent. You can use either of these. I’m going to use transparent, so you want to change this for each of your pages.

And when that’s done, you want to then go to your parents and customize and I’ll show you how to remove that white line goes across the top because that obviously doesn’t look that great. And then go to header and general and you want to uncheck header border bottom. As you can see, that will remove that line. So then go back and then remember to publish, to save everything and come out of customize that by clicking the cross. Okay, and the last pages that we’ve got to do are the about page and contact pages. I’m going to start on the about page, so I’m going to go to all pages and then on about, I’m going to click on edit with element and the template that we imported should already be in Elementor. Let’s take a look. There we go. Here it is for make it Fullscreen. I think this looks really, really cool. I’m going to change it slightly. You’ve got a few different elements that you can use. You can keep whichever one that you want to.

You should already know how to edit all of these already. It’s really simple. I’m gonna show you how right now. So again, for the header, you just click here to change the image and click the text to edit it. I’m going to keep it this element here for the about page, so I’m going to remove all the other ones you can. You can use whichever one that you want. You can use this on if you want to, but I’m going to use the one above. So I’m going to remove these other ones, but there’s clicking across just like this.

Perfect. Just like that. And then I’m going to add in the footer by clicking the file icon right here and then my templates and the footer is at the top. And I’m going to insert that and I’m going to click on, no, you don’t want to import documents settings because that will change how that page looks. And there we go. There’s your fitter already done. Perfect. Right? So let’s start at the top. Let’s start on the heading. So I’m going to click here to edit the background image and then go to style and click hit add to the image. So we’ve already got all our images here, so I’m just going to choose one. Let’s go for, I’m going to go for this really nice image right here. I’m going to insert media and there you go. That looks absolutely amazing. I love it. I’m going to change the attachment to fixed well that looks so good. I love that. Let’s see if this does anything. Bottom Center. Wow, that looks so good. Love that. So I’m gonna, I’m just gonna keep this on center center. I think. I love how that looks for make it full width. And looks really, really good. Let’s try bottom center.

Okay.

Oh that’s cool as well. I’m just gonna keep this on center center I think. And then so yeah. So as I scroll around, uh, stays in place. I think that looks so good. Okay, let’s do the section underneath. So again, all you do is collect, edit anything that you want. So you’ve got an image on the right here. I’m gonna collect, edit that and using, as you can see this image has a board out. I don’t really like that. So I’m going to go to style and then boarder border, a tight pair. You can change that and just select a nun that looks a lot better. You can change things like the width of the image and the opacity here and in content of course you can change the image itself and the image size, you can align it, you can even add a link to the image if you want to.

So I’m going to change the image by clicking that and I’m just going to choose a choose a really nice image. I might just choose the one that I had before cause I love that. I know those were really good. So I make this full screen. You can see it’s quite a big image. So to change that you would obviously click to select the image and then go to style. And you can change the width by choosing width. Here, I’m just gonna make this accustomed with let’s say just 85 there we go. That looks much better. Can even make it a little smaller. Let’s say 80 or something.

There we go.

Much better Lise. Really as a beautiful image. Okay, so now you can change the text on, I’m going to change the line here. I don’t like how thick this is. So I’m gonna reduce that to about two. And so yeah, I’m just going to edit this text just like I did before in style. You can change the topography again and I’m going to change the weight to 400 that looks much better. So again, you know, change and add in anything that you want here is all the same as we’ve done before and your foot has done. So I’m happy to say that that’s your about page complete. How quick was that? The only, the thing that you might want to do is change this text. I forgot to change the weight, so I might change that to 400 or whatever. Maybe 300 there we go.

I think. Not so good. I’m really happy with that. So that’s your about page done. So remember to up update date to save everything. And lastly is your contact page. So click here to go back to your dashboard and then go two pages and all pages and then find contacts and click on edit with element. So if we look at the finished website, this is your contact us page. I think this looks really, really nice and you’ve got an amazing header image up here. Got another image on the left here and you’ve got your social media icons here. And this is what we’re using for people to get in contact for you instead of a contact form. Because we’re the contact form. It’s a little bit more in depth than is it a little bit more setting up to do. But if you do want to contact form and we show you exactly how to do that over on our youtube channel or on our blog, you’ve also got a map here for you, for people to play around with and see exactly where you’re based.

And again, your foot is at the bottom. So let’s go and do that right now. So in the contact page, this is your header and I’m going to start by removing this text, this little text right here. So I’m going to just delete this and there’s a button there as well. I’m going to remove that. So I’m going to change the background image by clicking here and then in style going here, and I’m going to upload one of these images. So I’m going to choose this image that it came with. I’m going to insert media just like that and I think not. It’s pretty good as it is. I’m just going to leave that on. I’m going to change the font, go to style and change that to a white and I’m going to go here again and change the weight to about 400 perfect.

I’m going to add a slight overlay to the background image so the text pops a bit more. So I’m going to add an overlay. I’m going to add a block and you’re going to change your pasty slightly. It’s going to change it just like that. That was fine. That’s good. And there we go. So now below here you’ve got another image. So I’m going to edit that and I’m got, and there’s another border. So I’m going to remove the border. Don’t really lie. Those borders on the images I don’t think needed up. Very good. I’m going to change this line. I’m gonna change up to a two. I think now looks much better

and

you can change the font hair. Of course. I’m just gonna leave this as it is for this video. And again, these are these social media icons and it’s just like before you clicked at it each you can add in a link and you can add in more items here if you want to. Just like those, you can remove any that you don’t want. So it’s up to you what you want to use. Really flexible. You can change the colors here of course, and you can change them to are the official colors or a custom color entirely up to you. Y’all change it to be official color just just for now. Then you’ve got this info down here, so if you click on that, you can change this by going into here and then adding in your lane or whatever that you want. Really, really easy in style.

You can change things such as the weight and the width and the icons that are used, the color size and so on. It’s really, really easy, really flexible and of course remember in advanced you can change the space in between those elements as well. So perfect underneath we’ve got an element that I don’t want to use. I’m going to remove that one and I’m going to keep the map I think not really great. I’m just going to remove the other element that beneath that and then I’m going to add in the footer by clicking this icon and then my templates and finding footer again and inserting that. Remember to click, no, you don’t want to import those settings and there we go. Beautiful. Love that. So that’s great. I, one thing I did forget to mention as you can obviously you can change the background image of the footer again just in just like I did an in style, just like you have done throughout this whole video, you can just change that, that photo by by choosing one and then inserting media and that changes just like that. And of course there’s a background overlay so you just go on background over Lyon, reduce this a bit. I forgot to mention that before, but that’s how you do that and I think now looks really cool. So you can do that if you want to. I’m going to make it a little bit darker just like that. I don’t know. It was great. There we go.

So for the map, I mean this, this works as it is, you don’t really need to do anything right here, but you’ve got a few different options such ours. This is for the section itself, but you’ve got height and content width. But for the map that you can collect, you edit that or you would click here to edit them up, click this pencil icon and you can zoom in, zoom it in right there and the height, and you can have the location that you want. Obviously right there you can type in your address. I’m all yours, zip code or whatever that you want to right there and it’ll go into your location. So that’s just just as easy as everything else. And I think that is about it. I think you’ve just completed your website. This is looking absolutely amazing. I really hope you’re happy.

So let’s open this up in a brand new window and make sure that everything is working just as it is. Nice. Click on update to save everything and then click here and exit to dashboard. Now go up here and visit site. I’m going to open this in a new window and it’s a good idea to do this now and again, just to make sure everything’s working as it should. So we’ve got your beautiful header right here with your menu at the top and this takes people to all the other pages. You got your beautiful, the sections that we’ve done earlier, lovers animations are so good and then your footer at the bottom. So that’s your homepage looking absolutely amazing. Let’s go to about and there’s your about page again looking so, so good. I love it. Again, there’s your footer. I hope you’re happy or really, really hope you happy with this and then your contact page and there we go.

It’s all working as it should and looking up solutely. Amazing. Really hope you’re happy and I hope you’ve enjoyed watching this video. Just a quick video to show how quick it is to create a website and I just wanted to show you everything I know and really the quickest way to get up and running with your own super amazing looking website. I really hope you’re happy and you’ve enjoyed watching this video. If you have, please remember to give this video like, and if you want to be extra amazing, share it with your friends or someone else that you think would benefit from knowing how to create a website. It could be anyone and also remember to subscribe so you see our future videos. We’ve got so much coming up, some really exciting things, such as how to create an online shop and things like that. So really, really can’t wait to show you those things as well. Thank you for watching and I’ll see you in the next video.