Website Hero

Hey welcome in this video I’m going to show you how you can quickly make a website in just 10 minutes!  After watching this video you’ll be able to make any type of website, just like this one! 

It’s never been so quick and it’s easy to do this and I can’t wait to guide you step by step every step of the way with some great tips and tricks so make sure to watch until the end!

Let’s get going!

Download the resources here!


To start you’ll need a domain name which is your websites address, so head over to hostgator.com to quickly get one there.

HostGator allows you to get your domain and hosting, which is where your website will live.  We use hostgator for all our website as they’re reliable, cheap and they’re always there to help if you need it!

So now click on Get Started, and then click on the Hatchling plan.

Here you want to type in the website name you want to use.  And you can choose between .com .co.uk or whatever you want to use.

Then choose if you want to pay month to month or up to 36 months, which saves you more.  Plus we have a coupon code to reduce the cost even more in a moment!

Then enter a username and security pin.

And then enter your payment details here.  Make sure to use an email you can access as Hostgator will send you your login info.

Uncheck these additional services it’s added on as you don’t need these.

And then enter in the coupon code here, so enter WEBSITEHERO and activate it, and this will reduce the cost!  You’ll also save even more depending on the hosting package you choose.

Now when your happy with everything click on Checkout and you’ll be the proud owner of your own website name!

Hostgator will have sent you some emails so head over and find those.

Click to open this one, and find your C Panel link, which is here.  And click that.

Now scroll down, and find the Services area, and click on Quick Install.  Now click on WordPress.

Choose your domain from the dropdown and click Next.

And now enter in a few details here like your name, blog title, username, first and last name and email.  Then click on Install.

WordPress is now being installed to your website.  And you’ll receive your website login details here, so write these down, and then click here.

Then you should see this page where you can login to your website to start creating it!  Sometimes you’ll get a page saying it’s not available, just wait a few minutes and try again.  You can also quickly go to hostgator.com and login to your account.  You’ll find your login info in the emails you received.

Click customer login, and then Portal Login.

Click Domains and then your domain, and then click Change under Nameservers.

And then select automatically point my domain to my hosting account, and Save.  

Then login to your website and your done!! Congratulations you’ve now got a website up and running!

This is your websites Dashboard, it’s like the heart of your website where you can edit it and change different things.

Click on the cross for any messages that may have popped up to keep this area organized.

On the left is a toolbar with lots of different options and we’ll be getting into a few of these in a moment. 

Now you’ll see it says your site is displaying a coming soon page, click here once you’re ready to launch.  Let’s click here to launch now so when we view our site it’s not showing us a coming soon page but the actual website we’re creating.

Now let’s get your websites pages created, so go to Pages on your toolbar, and All Pages.

Delete any default pages you might have, and then click on Add New.

All you do here is add a page title, so for this one write Home.  And then click on Publish.  Great now click on Add New again, and write Contact.  Then publish that.  It’s that easy! 

Perfect you’ve now got all your websites pages created and your ready to start customizing them!

Now go to Appearance and Themes.  And then click on Add New here.

A Theme is the look and feel of your website, we’ve gone through and found the best one to use, which is called OceanWP. 

So search for that here.

Here it is.

Now all you do is click on Install, and then Activate.  And you’ll see your new website theme is OceanWP.

You should have a message saying to install these two plugins,

so click here, then select both of them and Install from the dropdown.

Then they’ll both be installed and activated.

A plugin is a little tool which enhances your website. Plugins can be amazing and they really can boost your website, everything from sharing buttons, to making it faster.

On your toolbar go to Plugins, and Add New.

The plugins you want to use are called Elementor, and Envato Elements.  So in the search type in Elementor, Install, and then Activate.

It’ll take you here, so just go back to Plugins and Add New.

Now search for Envato Elements.  Again Install and Activate.

Elementor is the main tool which makes creating your website easier than it has ever been, you just drag and drop and click to edit anything on the page, you’ll soon see how great this is.  And Envato Elements gives you ready made websites to work with, completely customizable so you can make something truly unique to you.

Ok your all set!  Let’s start by creating your Homepage, adding these elements and bringing your new website to life!

Go to Pages, and All Pages, and under Home, click on Edit.

Now scroll down and find the OceanWP Settings.

You want to make sure on Header that you’ve got Top Bar disabled, and the Style set to Transparent.

And on Title disable the Page Title.

In Footer disable both of these.

Then make sure your pages template is set to Elementor Full Width here.

And click on Update.

Then do exactly the same for your Contact page.  Then remember to update.

Now go to Appearance and Customize, and here are settings for your website.  Find Header, then General, and uncheck Header Border Bottom.

Then go back, and go to Menu, and you can change the colcolorsour of your menu here.  So change these to colors that you’d like, I’m going to use a white so it shows up against the background, and this nice green.  You can also use a great little animation when someone hovers over the menu.

Now publish and go back to the Dashboard, and your pages.

You want to open each one in a new tab like this.

Then click on Edit with Elementor under each one.

So you’ve got them them both open in Elementor just like this, as well as a tab for your dashboard.

Great! This is your Elementor Dashboard where you’ll see your website come to life with all the different beautiful elements!

On the left you’ve got a toolbar with lots of different elements you can use, such as contact forms, headers, images and lots more. 

Just before we jump in to Elementor, go to your Dashboard and find Elements.

This is where you pick the template you want to start out with, and there are lots to choose from, anything from Nutrition to Architecture.  It makes it super quick and easy to create anything and looks amazing.  I’m going to help you every step of the way so don’t feel at all overwhelmed, it’s very easy, especially with me guiding you!

For the homepage you want to go to this section and then the one you want is here.  It gives you a great preview of the website, then click and you can have a look around.  Once your happy click Import and it’ll be placed inside Elementor, where you can then customize it, which we’ll be doing shortly.

You also want to import a Contact page, so scroll right and you’ll find this one.  So now import that.

We’re now finished here so now click on Dashboard. 

Then bring up your Homepage which should be in Elementor.  Any page you want to edit you just  click on Edit with Elementor.

Now click here to bring up your templates, then My Templates, and find the Homepage template you just imported.  And Import that.

It’s instantly placed inside your page!  Go to your Contact page and do the same, place the Contact template into this page.

Perfect both of your pages are ready!  Let’s jump back into the Homepage.

Everything here is customizable, you can change anything you like and move things around, it’s all really easy once you know the basics, so I’ll show you how to do a few things now!

This is your header.  Each of these elements is editable, see as I scroll around it highlights them.  By just clicking here, this brings up options on the left to change things like images, fonts, colors, size, spacing so you can arrange and have your website exactly how you want to.

I’m not going to use this header, I’m going to use another one I’ve found which you’ll love.  So hover up here and click the plus icon, and then click here again.  Now click Envato.  And then Blocks.  Use this header.  And click Insert.

Amazing here it is!  It’s placed it at the bottom, so all you do now is click and drag, and move it to the top.  Now to remove something, so let’s remove this other header.  You can either click the cross, or right click here, and click on Delete. 

To change this image on your header, you would click here, go to Style, and you can then go ahead and change the image by clicking here, Select image,  and uploading one.  So I’ll choose this one from this image folder.  Much better!  All the images I’m using are available for free so you can use them on your website.  Just go to websitesmadeeasy.tv/blog/websitehero and you can download them!

These options here allow you to change how the image looks.  Position changes where the image is.  In attachment you can change this to fixed, and now when you scroll the image doesn’t move, this looks great!

And in Size make sure it’s set to Cover.

And that’s how you set up your background image!

Click on Publish to Save everything you’ve done.

To edit this heading just click it, and you can write what you want here.  And the same for this little text here, just click it and write whatever you’d like.   and in Style change the font you want to use, and the color how you’d like, as well as the font weight and size.  So I’ve just done that for both.

Also in advanced you can change the spacing by using these values, so you could move this anywhere you want to, it’s so flexible!

And by the way this isn’t how your website looks.  Click here and you’ll see how it’s looking full screen.

Ok I’ve just edited these elements exactly the way I just told you.  The button is exactly the same it’s just text, and a background color. 

So if you want to do that now please do, pause and then press play when you’re ready.

I’m now going to move the elements around in the order I want them, so again all you do is click and drag them.  So this Who We Are element I’m moving below the header here.  And then I’ll remove these other ones, and keep these.  I’ll also move this video element inside this one like this.

And I’m going to add a few more elements, from the Blocks section again.  I’m going to add a footer, so search for footer, this one here.  Then click the plus icon to add another section.  And I’ll add a call to action.  I’ll go with this one.

Then move them to where you like, I’ll have the Footer at the bottom of course and then the call to action here.

And again you edit these exactly the same, everything is done the same way, click to edit and everything is on the left.  And remember with advanced you can move elements to where you want them, so for this section you’ll see you’ve got a big gap down here, so in Advanced you can use the Padding here, and reduce the Bottom padding, so as you can see that gap gets smaller.  There we go much better!  And I want to move this element down a bit as it’s a bit close together, so you would click here to edit it, go to Advanced, and increase the Top padding to about 40.  Great!  Now if we look at that, there we go you see how easy this is, and how much control you have over how your website looks?

You’ve got some social media icons here which you can add your links to by editing the section, and then on the left you just add your links into each one, and add whichever platforms you use here.

Now remember to Update, and go to you Contact page.

This is really easy and I’m keeping this super simple.  Just right click here and delete to remove this right section.  And your contact page is done!  All you need to do now is edit these elements just like you’ve done on your homepage.  What I will do is add some better social media icons, which you can do by clicking here to bring up your different tools again, search for social media, and use this one.  Just click and drag it where you want, and you can edit this the same way you did on your homepage.  I’ll remove these other icons, and then add in a text editor to write in an email address in case someone wants to email.  And that’s your contact page done!  Remember to Update to save everything.

Now you’ve nearly finished!  You’ve just got two things to do in settings, so go to your settings, and then General.

Here you want to remove your site title and tagline.

Now Save at the bottom, and go to Reading.

Here you want to change this to a Static Page, and for Homepage select Home.

Make sure to save everything here, and go to Permalinks.  And here you want to make sure the is selected, then save.

Now let’s quickly set up your menu at the top so people can look around your website.

Go to Appearance and Menus, give your menu a name, then create your menu.  And then choose the pages you want and then Add to Menu.  Then make sure Main is selected and Save Menu.

Now create a new menu and give it any name you want, add in your pages but don’t do anything else, just save it.  We’re doing this because sometimes you need two menus for your main menu to appear at the top. 

And also make sure each of your pages templates are set to elementor full width.

And you’re done!  You’ve got a website ready to go which is looking fantastic, and of course theres more you can do with it, if you’d like to learn more we have so many free videos guiding you through things like setting up a shop, selling your products or services and lots more!

My name’s Theo from websitesmadeeasy.tv, thanks for watching!


Leave a Reply

Your email address will not be published. Required fields are marked *