Hey it’s Theo here from websitesmadeeasy I’m excited to share this really useful tool with you, that’s making it easier and easier to build high quality websites that look absolutely fantastic! I’m talking about Envato Elements which is a brand new tool that has just launched and it’s taking the world of website building by storm!

I’ve had lots of people come to me asking, what if I just want to build my own website, that works and does what I want it to do, that’s easy and isn’t complicated to use, as fast as possible? So I really wanted to make this video to answer that!

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

This video is perfect for everyone, beginners as well as pro’s as I’m going to show you step by step every step of the way how to build and customize your website lightning fast… using WordPress, Elementor and Envato Elements. Don’t worry if you haven’t heard of these before, all you need to know is, right now, this is the only way you want to build a website as it’s super simple, SO powerful and after this video you’ll be able to do it yourself without even thinking about.

Also WordPress is the same thing a lot of celebrities and companies use such as Forbes, Katy Perry, Jay Z, Apple, CNN and Mashable, so you’re definitely in good hands.

Step 1 is choosing your websites address, also known as your domain name, just like ours is websitesmadeeasy.tv you’ll have your very own domain name too. And hosting so your website has somewhere to live and people can find it. Both of these are super cheap because I’m going to give you a special coupon code!

Step 2 is creating your websites pages and launching your brand new website.

And in Step 3 You’ll be getting to know Elementor and Envato Elements which are the secret tools to creating an awesome-looking website which not only is unique to you, but is so easy to use your going to love it! It’s something I wish I had when I first started doing this!

Let’s get going and start with Step 1

Step 1

Ok Step 1 is choosing your domain name.

Choosing Your Domain Name

So head over to hostgator.com and click on Get Started. Now click on the Hatchling Plan.

And here is where you get to choose your websites address. So decide what you’d like and then type that in here, and choose between .com or whatever you’d like here.

Then enter a username and security pin. And choose the billing cycle you’d like. I’m going to go with a whole year as it’s slightly cheaper this way.

Next enter in billing information here. And make sure to use an email address you can access as Hostgator will email you with your login details after.

Next you’ll see it’s added on extras here, so you want to uncheck these as you don’t need them.

And now you want to enter the coupon code here. So enter wordpresshero and validate it, and you’ll see the cost will go down!

When you sign up for Hostgator through my coupon code 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 🙂

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

Ok fantastic you’ll now receive a couple of emails from Hostgator with your login details and some links to different things. You want to find the C Panel link here and click on that.

Perfect, now scroll down and find Software and Services, and click on Quick Install.

Now click on WordPress.

Select your domain name from the dropdown here 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.

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

Step 2

Creating your websites pages and launching your brand new website.

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.

So what does your website look like right now? Let’s find out! Go up here and open this up in a new tab by right clicking.

Here is how your website looks right now, it’s like a diamond in the rough! It doesn’t look like much right now but that’s about to change just wait and see!

So head back to your dashboard by clicking on your other tab, or on Dashboard here.

Now you’ll see it says your site is displaying a coming soon page, click here once your 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 and that others will see too.

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 About. Then publish that. Add new again. And for this page write Contact. And publish that one.

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

Now let’s very quickly go to Settings here to make sure the foundations of your website are correctly set going forward, and click on General.

Now you want to remove your site title and tagline. Your email address is here, and just so you know, you never want to change these here, it’ll stop your website working properly.

Now Save at the bottom, and go to Reading.

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

Then Save that, and go to Permalinks. Here you want to select Post Name as this makes it much easier for search engines like Google to find your website so people searching for your business or service will find your website.

Make sure to save everything, and you’re done! You’ve now got strong foundations for your website and your ready to start customizing it and making it unique!

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

A Theme is the look and feel of your website, there are thousands of different themes, some are great and some are really not, that’s why we’ve gone through and found the best one to use, which is called OceanWP.
So search for that here.

And here it is.

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

So you’ve just changed your entire website, if we go and have another look you’ll see it looks completely different. It’s still a blank canvas for you to make as you like, and that’s what we’re going to do now! I’m going to guide you on how to create this exact website with all the images included, so you can get this done faster than ever before, easily and super fun too!

On your toolbar go to Plugins, and Add New.

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

The plugins you’re going to use are called Elementor, and Envato Elements. So in the search type in Elementor, here it is so now 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.

It’ll then take you to your plugins page

Now deactivate and uninstall the plugins that you aren’t going to use, by selecting each one like this, and then deactivate from the dropdown and apply.

Then do the same to delete them.

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.

The last plugin you need is Contact Form 7, which you’re going to use for your Contact page.

So in plugins search for that, and install, and then activate it.

Elementor is the main tool which makes creating your website easier than it has ever been, drag and drop and just click to edit anything on the page, you’ll soon see how great this is. And Envato Elements gives you ready made website to work with, so you’re not starting from scratch, you basically take a shortcut to success, plus these are still all completely customizable so you can make something truly unique to you.

Let’s start by creating your Homepage, adding these elements and bringing your new website to life, it’s is so easy! I can’t wait to show you, let’s get going in Step 3!

Step 3

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 on Title disable the Page Title.

And click on Update.

Then go to Pages and All Pages again and click on Edit under About and Contact, and do the same thing. Then remember to update. Then right click on All Pages and open in a new tab.

Now open Home and click on Edit with Elementor.

Do this for all your pages, so you’ve got them all open in Elementor just like this, as well as a tab for your dashboard, so you can switch between them.
Great! So now all your pages are in Elementor, and this is your Elementor Dashboard where you’ll see your website come to life with all the different beautiful elements! And just so you know Elementor and Envato Elements are some of the highest quality plugins you can get for WordPress, so you’ve already got a huge head start here in your websites success!

On the left again you’ve got a toolbar with lots of different elements you can use, such as contact forms, headers, images and lots more, and on the right is a sidebar. Just before we jump in with Elementor, go to your Dashboard tab, and find Envato Elements.

Here is where you’re going to pick the look of your website starting out, again all of these are customizable so anything you choose isn’t set in stone, you’ve got all the freedom you want, it just makes it super quick and easy, and looks amazing. You’ve got so many different looks here too, from consulting, nutrition, childcare, artist, school and so on. Remember I’m helping you through every step of the way so don’t feel at all overwhelmed, it’s very easy, especially with me guiding you!

Corporate Business on page 5
Recipes page 1

For the Homepage I’m going to use one which is on Page 5, so down here at the bottom click page 5, and you’ll find it here under Corporate. It’s this one. Clicking it you get a preview of what it looks like, you can scroll up and down and get a feel for it, how cool is this I love it, it lets you have a go at the website before you import it.

So we’ll use this one for the Homepage. When you’re ready just click on Import and it’ll be imported straight into your Elementor, which we’ll be using in a moment.

Now go back by clicking the cross, and now import this template here as well, as this is going to be your About page. And then scroll along and we’ll use this one for your Contact page. These social media icons are pretty useful if you use Facebook or any of those platforms with your business.

The last template is on Page 1, and in Nutritionist, scroll along and you’ll find it here. We’ll use just one element in this template which you’ll see later, so import this.

Fantastic well done, we’re all done here so now click on Dashboard. And then open up your Homepage tab which should be in Elementor.

Now click here to import a template, click on My Templates, and find the Corporate Business Home template, and Insert that.

Boom that goes straight into your website, you’ve now got a Homepage working! It’s amazing how quick it is, look at all this. It’s ready to go, how amazing is that?

Now let’s go through and customize this to make it unique and personal to you, with a beautiful image like this and the rest of the elements like you can see. And you can change anything here by clicking, dragging, and changing settings on the left. You can also remove anything you don’t want by right clicking here and selecting remove. It’s so flexible!

Ok let’s go!

So this bit is your header, and we’ll start by clicking here to edit the header and add a great looking image!

Which you can do using your toolbar on the left.

Now you would click Style, and then this icon here. Then by clicking the image, this brings up a window allowing you to use your own images, or upload a new one. In Media Library you’ll see you’ve already got lots of images that came with the templates you imported.

Click on upload files and then select files. And you would select the file and image you’d like to use.

Now you might not have any images to use yet, but don’t worry at all because each of these new templates as you’ve probably seen already come with their own images that you can use. I’ve also got some really good ones that you can use as well. All you do is go to our blog and download them, so if you want to do that go to

Find out what the link is websitesmadeeasy.tv/

Voice over to here

Then just click here to download the file!

Great now you should have those, so back in Elementor remember we clicked Upload, and Select Files, so now find the file you just downloaded and choose the image you’d like to use! I’m going with this one.

Great! Now click on Background Overlay, and click here, then click the color here, and click on Clear to remove any overlay on the image.

Much better this looks great!

I’m going to remove this from the header, I want it straight not slanted like this. So go to Shape Divider, and click on Bottom, then click on Tilt and select None.

By clicking on this little arrow you can see your website full screen. I want this header to fill the entire screen and it isn’t right now.

In Layout change Minimum Height to 100, and this will make your header full size

Now we’ll edit this text, hover over it and click here to bring up the options.

I’m going to change the heading text, there we go, and in style you can change the typography, I’m going to use Lato for the font.

And change the weight here to 300, and the size to 51.

You can use all these other options to align the heading exactly where you want it.

Next is the text underneath, and it’s basically the same. Click to edit it, and here you can write what you want to, so I’ll put. And again in style and typography, change the font to Lato, and the size to 18.

Next is the button, again click to edit it, and change the size here to Medium or whatever you’d like. And you can add a link here, which could be to your website, Facebook page or anything, another page on your website maybe.

I’m going to change the text here.

And in Style again change the typography to Lato, the size to 14, and the weight to 500.

In Background color change that to something you like, I’m going to use a nice green, if you’d like to use the same you can use this code, just write it in here.

I’ll change the border type to None.

With the Padding you can change the shape of the button by changing the Padding values here, so if you want you can play around with that. In fact going forwards it’s a good idea to change values to how you want as it may look slightly different for you.

In Advanced you can change how close all these elements are to one another. I’ll change the buttons top padding to 15 so it’s not as close.

Great and thats your header done and looking great!

So below you’ve got lots of other templates you can use but for this video I’m not going to use these. So to remove them just click the cross here, until you’ve removed these other elements.

Fantastic! Now let’s add the ones we want to use.

Click on this Icon again, and then My Templates, and Insert the Corporate Business Home Corporate template next.

And I want to keep this section of it here. So I’ll remove everything else.

There we go!

Now let’s add all the sections we want and then we’ll customize them. So again click on this icon to add a new template.

Then select the Nutritionist Recipes template.

This is a great looking template actually it’s really engaging! For this one I’ll remove everything, but this section here, I want to keep that.

Great, and the next section you want is in the Pages area. So click that. And these are Elementors own Templates, again you’ve got lots here to play around with if you want to. For now find this template, and Insert that.

And I’ll remove everything but this section, this is going to be your footer.

Fantastic well done! Your Homepage is looking amazing, it’s nearly done!

So lets get going customizing your first section, which is this one!

Start by simply right clicking here, and removing this text, by clicking Delete.

Then edit this heading by clicking it.

I’ll put WTC System just as an example for this video. And just so you know what the WTC System is it’s our own system we use at websitesmadeeasy.tv. We teach it over on our website if you’d like to learn even more after this video.

I’m going to align this in the middle, and change the typography in Style, to Lato. And make it a dark grey. I’ll do the same for this line here as well, align it to the middle, and change the color to this nice green again.

The writing I’ll align to the middle, change the font to Lato again, and I’ll write, It’s never been easier to create your website. In Advanced I’ll use the Top Margin here to bring it further up towards the line.

And you can change these images easily, just click them, and you then click here, and Edit Gallery to remove images, and Add to Gallery to add any images you want to add in. Simple! And these come up in a really cool Lightbox when clicked too.

Ok great the next section is this one which I really like, it’s really eye catching, engaging and is perfect if you want to get someone to another page, or to buy something or get in contact with you, whatever you’d like!

Let’s start by changing the image, so as before click here to edit the sections image. Then Style and click the image to change it.

I’m going to use this one.

And I’ll change these options here to get the image to fit the section better, so the Size I’ll change to Cover, and you can change the position to, and also attachment is really nice, if I make this Fixed, the image stays in place, which looks amazing when scrolling around. Remember you may need to use slightly different settings to me if you’re using different images or if your on a smaller or bigger screen.

I’m also going to add a slight overlay to this, to darken the image so the white text shows more on top.

So click Background Overlay, and change the color to something dark, I’m just going to use a grey. Then change the Blend Mode to Normal. And then change the opacity to make it darker, until you’re happy. Thats perfect.

Now let’s do the Heading, I’m going to use this one, so I’ll delete the text above.

And for the heading I’ll write.

Great, and it’s a little big but we’ll change that. In Style, and Text Color I’ll change it to a white.

And in typography, I’m going to change the font to Lato, and then make it slightly smaller. I’ll also change the weight to 500.

For the text underneath you want to basically do the same, change the font, and the color, and it’s size if you’d like to. Just play around and see what works for you, I’m using a white again and Lato for the font.

Here’s a quick tip. If you want to create a link, all you do is highlight the word or writing to make into a link, and click this button here, then put your link in here! It will then be clickable.

But you don’t need to here because you’ve got as button with this section!

You’ve also got some nice images too, and all you do is click these to edit them and add your own image, make them bigger or smaller, it’s all straight forward. I’m not going to use these so I’ll remove them.

For the button you can add your link in here, and change the buttons text here.

It’s size as well as an icon here, and you’ve got lots to choose from if you want to do that. I’m going to remove it for now.

In Style of course you can change the buttons color, as well as the color it changes to when you hover over it. I’m going to change the buttons color to that nice green again, and change the hover color to the same thing but a bit lighter.

It’s got a cool animation on it which I’m going to leave as I like that, and you can choose from lot’s of different ones here, there are some really fun ones to take a look.

You can change the spacing between the button and text here, by going to Advanced and changing these values in Margin and Padding.

Ok this is looking amazing and your doing so well! Your nearly finished with your homepage and your whole website actually, so let’s keep going!

The last element is your footer. I’ve noticed some black bars here which don’t look good I don’t want those. So to remove those we need to go to our Dashboard, so if you have that open in another tab, open that. Remember to click on Update to Save everything first. If you don’t just click here, the. Return to the dashboard here.

Then go to Appearance and Customize.

And in customize you’ve got lots of different options to further customize your website, from font colors, options for your header, homepage settings and so on. But for now go to Footer Bottom here, and uncheck Enable Footer Bottom. Then Update. And back in the Edit, if I refresh the page, that footer is now gone, much better!

In the footer I’m now going to remove the heading, and instead replace it with some social media icons. So click here to bring up your different tools. And search for social media. And you want to use this one, so click and drag that into the element, I’ll put mine here.

Now align those to the left. And here it allows you to add in any platform you may be using, so your visiting can easily visit your Facebook page, or Twitter or YouTube. Add in your links here, and change anything else you may want to. In Style you can make the icons smaller by reducing the size here. And in Icon Hover you can add an animation when someone hovers over them.

For the text underneath just as before you can change the size, color, font, I’ll leave the color, and change the font to Lato.

Then remove this button, and you’re done! It’s just the image left to change, which you can easily do by clicking here and then changing that here. I’m going to change it to this one. Perfect that looks much better.

And you’ve just finished your Homepage congratulations! This is looking really good you should be proud of yourself! Well done for doing this, you’ve just done what used to take months, and cost thousands of dollars, in just a few minutes!

Lets quickly save this individual footer section, as it’s going to be your footer on other pages of your website as well, so you won’t have to find that whole template again and re do it, you can just add this finished footer in!

All you do is right click this, and click on Save as Template. Then enter a name, such as Footer, and save it.

Great now let’s do your About Page and Contact Page, these are super quick and then your done!

So go to your Dashboard and then Pages and All Pages, and right click to open your About and Contact pages. Then click on Edit with Elementor for each one.

In your About page you want to add in the template that we imported earlier. Do you remember how to do that? Click this icon, then My Templates, and find the Corporate Business About Us and insert that.

You want to keep this header, and keep this section here, so remove everything else.

There we go.
And at the bottom add your footer, just like before in My Templates. Insert that.

Perfect!

Edit the header and we’ll change the image. In Style, and then click the image to change it.

I’ll use this one.

That looks much better, again I’ll use these settings to move the image around, and give it a background overlay to make it darker. And in Advanced I’m going to reduce the Bottom padding to make this header smaller.

Next I’ll align the heading text to the middle and change the font to Lato and make it’s weight smaller. Then in Advanced I’ll make the top margin -120 to bring it up. Great!

Ok next is this section, let’s edit the image by clicking here again, and then Style.

Click the image.

And for this one I’ll use this image.

Beautiful, and I’ve got it as Fixed, and Cover. So the image stays in place when scrolling about, like this.

Ok next let’s do this box here. I’m going to edit the actual box itself, and go to Style. Then Color and I’m going to make sure it’s got a slight opacity, so the image behind shows through a bit, this looks good.

Next is the heading, which I’m going to change the Lato, and make smaller.

I’ll remove the line underneath. As well as the button.

For this text I’ve got some ready to go so I’ll paste that in, and change the font, and re size it sightly.

And that’s all done! You’ve already got your Footer in place, so you’re About page is complete.

Lastly is your Contact page so lets go to that and get started.

First add in your Contact template which is the Corporate Business Contact 2.

This has some nice social media icons as well and we’ll be looking at those shortly.

So let’s start at the top with your header. Edit it to change the image, Style, and click here to choose which image you’d like to use. I’m going with this one. Change it Centre Centre.

And in Advanced I’ll make the bottom padding 0. Click the heading text, Advanced, and make the Top Margin about -120.

Then in Style I’ll change the font to Lato of course, and the weight to about 400.

Perfect! Now with these elements I’m not going to use the map, but if you’d like to keep it you can leave it there and edit it using the options on the left. You can set it to where you are based by just filling in the address here, and using the other options to fully customize it to how you want.

I’m going to remove it however because we’re going to use a contact form here instead.

I’m going to tidy this up a bit by removing this line and text, the address icon and text, and some of the text down here too.

At the top I’ll edit the heading like usual, you should know what to do now.

And I’ll move these icons up here, and make them smaller, by going into style and adjusting the size like that. I’ll also make the top padding 20 so bring them down a bit.

Again in content you can change or add your social media platforms really easily by clicking to expand these, adding in your links, and adding new platforms here.

I’m going to make these icons slightly smaller, by editing them and adjusting the size, like that, and I’m going to change their color, to that green again. Thats much better!

Ok now, I’m going to move this whole section to the right, and I’m going to have the contact form on the left, so I’ll click here and drag it over like this.

Now bring up your tools again, and search for contact, and use this one, premium contact form 7, drag it over here and place it in the left section.

You might not have a form come up yet but we’ll create one in a moment.

Now I’m going to remove these other sections down here, of course feel free to keep any if you’d like to, but for this video I’m going to keep things quick and simple.

I’m not going to have the footer on this page as all the contact info is here already.

So now Update to save everything, and we’ll quickly create a contact form for this page!

On your Dashboard go to Contact and Contact Forms.

You’ll probably have a default contact form, so delete this, and then click on Add New.

Give your contact form a name. And believe it or not your done! This writing down here is your form, and unless you know what you’re doing you shouldn’t touch this as it may stop it from working. If you don’t want a specific field, just highlight everything between and and then delete that, and it wont appear on your form.

Now go to your Contact page, and Elementor.

Find the contact form, edit it and select your new form from the dropdown here.

And it’ll pop into your page! Now anyone who wants to get in touch will be able to, and you’ll receive emails to your email address.

You can change the colors by going to Style and the appropriate area, like in Button you can change the background color, just like this. And in Labels you can do the same.

Congratulations! You’ve got a website set up and ready to go, how amazing does it look?

You’ve got just one more step, and thats to add a menu to the top, so your visitors to easily look around and find your other pages.

Update to save everything.

On your Dashboard go to Appearance and Menus.

Give your Menu a name. And then simply select the page you want to appear in your menu, and click on Add to Menu. You can reorder them like this, so I’ll have Home, About, and Contact.

Now select Main. And save your menu.

And now if we have a look at your new website, wow! How beautiful is this. Be proud of what you’ve just accomplished! You’ve just achieved something amazing, you’ve got your very own website up and running, well done!

The next steps are up to you, whether your website is for your business or service or just a way to get your content out there. We can help you take it much further with more free videos, tips and tricks and advice, over on our website. I’m Theo with websitesmadeeasy.tv.

Thank you for watching.

Author: James Stafford

James Stafford is the founder of WebsitesMadeEasy.Tv, an experienced online entrepreneur who has spent over a decade helping people build an online presence. Through his educational YouTube channel, James has provided simplified digital marketing training to millions worldwide. He is known for breaking down complex topics into understandable, actionable steps for his 75,000+ subscribers.