I’m really excited to announce that I’ve published a new video that will show you how to make a website with WordPress.
In the video, I combine the Elementor drag-and-drop page builder along with the Envato Element plugin to simplify the process of building a website, yet ending up with a professional result when you are finished.
I will walk you through these 5 simple steps in the video…
- Get a Domain Name and Hosting
- Install WordPress With One Click
- Install a Theme and Plugins
- Add Content To Your Site
- Customize Your Website
You can find the complete transcript below the video, and I’ll be creating an ebook that follows this same process. Look for a separate post once I finish the ebook.
In this video I’m going to show you the fast and easy way to make a website.
Don’t worry, I’m not going to make you follow along for hours as I build some random website. But I am going to show you how to build the exact website that you want to build.
You’ll get to pick your template from over 80 hand-crafted themes, that are completely free. Then I’ll show you how to customize your site with this fun, drag-and-drop editor.
And best of all, we’re going to finish building your website in less than 30 minutes.
So if that sounds good to you, then stay tuned…
Hey there. I’m Todd Pettee and I want to welcome you to Websites Made Simple. Where I believe that behind every website is a dream.
And I want to help you build your own website, so you can start living your dream.
I’m really excited to make this video, because I’m going to show you a brand new way to build a website that’ll save you A LOT of time and A TON of frustration.
There are only five, simple steps we need to take to build your website.
So let’s go ahead and get started…
Step 1: Get a Domain and Hosting
So, the first step for building your website is to get a domain name and hosting.
And over the last 10 years, I’ve tested more than 20 different website hosting companies, and have found only one that is extremely reliable AND has amazing support…
And that’s Siteground.
So I went ahead and placed a link, in the description box below that’s labeled #1. And that will take you directly to Siteground and make sure that you get 70% off all of their hosting plans.
After you click on that link, it will bring you to this page where you can choose your plan. And, as you can see, Siteground gives us three different choices here…
So, the “StartUp Plan” is a basic plan that has everything you need and is best if you only have one website.
Then the “GrowBig Plan” adds a few more features and also allows you to build several websites under the same account.
Next, we have the “GoGeek Plan”, and that has a lot more technical features with basically everything that you’ll ever need.
And if you want to compare all of the features of each plan, just click this “Compare Hosting Plans” link here and it’ll give you all that information in a table.
So just go ahead and pick the plan that best suits your needs.
I’m going to pick the “StartUp Plan” for this tutorial, but normally I have the “GrowBig” plan for my own websites.
And this next page you land on is where you’ll get to pick your domain name.
So here you can select either…
“Register a new domain” and enter the domain name that you want.
“I already have a domain” and enter your domain name if you already have it registered somewhere else.
And don’t worry if you already have a domain name, it’s really easy to connect it to Siteground and I’ll show you how to do that in a few minutes.
Okay, so, I’m going to enter a new domain name that I want to register… and let’s try… buildasimplewebsite.com
And as you can see, that one is already taken. So I could try a different Top Level Domain like .net or .org.
Or I could just try coming up with a different domain name, which is what I think I’ll do in this case.
So, let’s see…
How about… easywebsitebuild.com
Alright… good, that one’s available.
So as you can see, if your domain is available, it’ll take you right through to the billing page and display your domain name right here at the top.
So the first thing we need to do here is fill in our Account information…
Then we’ll move on and fill out the Client Information section…
And finally we’ll add our Payment information down here…
Then when we get down to the “Purchase Information” section, you’ll see this first section here where you can change your Plan…
So if for some reason you decided that you wanted to change your plan, you can easily do that by clicking on this little icon here to the right.
You can also change the data center here….
And again, just click this little icon to the right and choose the data center that’s located closest to your target audience, which isn’t necessarily the same as the area where you live.
So, for example, if you live in Europe, but the majority of your audience is in America, then you’d select a server in America.
Next let’s take a look at the Period…
So as you can see, you can choose from between 1 and 3 years.
And I would highly recommend choosing the longest period that you feel comfortable with, because you’ll receive that big 70% discount on the whole period that you select.
Then let’s check the Extra Services section…
You may want the “Domain Privacy” protection which will hide all of your personal information like your name, address, email and phone number.
The “Site Scanner” option is like an early detection and warning system that will let you know if there are any security concerns with your website. I’m just going to leave that unchecked.
And then finally, take a close look at your total, just to make sure it looks right and you have everything that you want.
And finally, click the “Pay Now” button.
And if there are no errors with the form, then you’ll see this page that says, “Your Order Was Successfully Submitted”.
And it will eventually change to this page which says, “Your account was successfully created!” And that means we’re ready to start building your website.
And that’s the really nice thing I’ve found with SiteGround is that your website will be live instantly. With other web hosting companies I’ve used, it would sometimes take up to 48 hours just for my site to go live.
Alright, so to finish up this step, just click on the “Proceed to Customer Area” button, and that will take you to your website setup page.
And that’s it, we have our domain name and hosting and we’re finished with Step #1.
Step 2: Install WordPress With 1 Click
Moving right along to Step 2, we’re now going to install WordPress.
And, lucky for us, SiteGround makes it possible to install WordPress with just one click.
So continuing right where we left off from the last step, we’re on the Website Setup page.
And, if for some reason you’re not on this page, you can find it by clicking the “Setup Wizard” link in the welcome email that SiteGround sent to you.
So to install WordPress, all we have to do is select the, “Start A New Website” option and then select the WordPress button below.
So after clicking that button, a new section will appear where you’ll need to enter the email address, username and password you want to use for logging into your new WordPress website.
And once you have those fields filled in, just click the “Confirm” button.
Next, check any enhancements if you want to add them, and then click the “Confirm” button for that section.
And finally, click the “Complete Setup” button.
And that’s it! WordPress is installed, and your website is now live.
So, next, you can just click on “Proceed To Customer Area” for the next step where we’re going to start building your website.
But real quick, before we move on, I want to tell you how to connect your domain to your new website if you purchased it somewhere else.
“So from the user area in your SiteGround account, just click on “My Accounts”, and then click the “Information and Settings” tab.
Then look at the “Account DNS” section and copy the two lines there which represent your DNS servers. They should look something like this…
And they’ll start with “ns1” and “ns2”, just like these do.
And all you have to do is take those two lines and send them to the technical support department for the place where you bought your domain, or you registered your domain, and ask them if they can switch your DNS servers to those two.
The only caveat is that you may have to wait 24-48 hours for your domain to start working properly.
Okay, so before we move on to the next step, let’s take a quick peek at your website to just to make sure it’s live and see what it looks like.
So just type your domain name into your browser’s address bar. And hopefully you’ll see something like this show up.
And as you can see, it’s not very pretty yet, but don’t worry, we’re going to fix that in the next three steps.
So, that’s it for Step #2!
We did a fast and easy install of WordPress and now it’s time to move on to Step #3.
Step 3: Install a Theme and Plugins
Alright, we have arrived at Step 3, where we’re going to install a theme and some plugins.
So in order to install the plugins you need, you’ll have to log in to your WordPress admin panel.
And the easiest way to access your admin panel is by simply adding “/login” to the end of your domain name in the address bar… just like this.
So after you add “/login”, just hit enter and you’ll then be presented with the login screen.
Now, just enter the Username and Password that you created when you installed wordPress, and click the “Login” button.
Alright, and once you’re logged in, you’ll be presented with this “WordPress Starter” screen.
And SiteGround uses this to help you customize your website, but we’re not going to use that, so you can just scroll down to the bottom of the page and then click this “Exit” link.
And the next thing you’ll see is your WordPress dashboard. But before we do anything, let’s close out these two notifications so that they don’t keep bothering us.
The first one is this blue box at the top that allows you to relaunch the “WordPress Starter” tutorial, and we can just dismiss that by clicking this “Don’t Show This Again” link.
And you may or may not see this warning that I have about some updates that need to be applied. If you do see this, just close it by clicking on this “X”.
Alright, now, let’s take a look at the layout of your WordPress dashboard.
You’ll have a main navigation menu on the left-hand side, and when you mouse over one of the menu items, you’ll notice that a sub-menu will appear for some of them.
Also, if you select one of the menu items, lots of different options for that selected menu item will show up on the right-hand side.
So now that you know how to navigate your dashboard, let’s first download both plugins, and then I’ll show you how to install them.
The first plugin we’re going to download is a free, drag-and-drop page builder that makes it extremely easy to customize the layout and content of your site.
And I’ll show you exactly how to use it in Step 5, but for now, just go to the description box below and click link #2 that says, “Elementor”.
That will bring you to the Elementor download page and all you have to do is click the “Download”. And then click this link right here to bypass the opt-in form and to start the download.
Then, just make sure to save that file to your desktop so it’s easy to find in the next step.
And next we’re going to download and install the “Elements” plugin, which at the time of this video, has 90 free template kits and over 1500 template pages that you can use with the Elementor plugin that we just downloaded.
So, one more time, just go to the description box below and click Link #3 that’s labeled, “Elements”.
Then, once you are on the Envato Elements website, click the “Download” button to start the download.
And just make sure to save the file to your desktop as well.
Now that we have both plugins downloaded to your desktop, we’re going to install both of them on your website.
So to do that, first click on “Plugins” in the main, left-hand column.
And then, if you see any plugins that are out of date, go ahead and click, “Update Now” next to that plugin and make sure it’s updated.
Next click the, “Add New” button up here, and then “Upload Plugin”.
Then click the “Choose File” button and navigate to your desktop and select the “Elementor” file that you just downloaded.
And then select, “Open”.
And finally, all we have to do is click “Install Now”, and then “Activate Plugin”.
Then we’ll see this welcome screen explaining how to use the Elementor plugin, which, like I said, we’ll cover in Step 5. So you can just skip this for now.
And then let’s just repeat the same process one more time for the “Elements” plugin.
So let’s go to, “Plugins” on the left. Then “Add New” and then “Upload Plugin” and next, “Choose File”.
Then find the “Elements” plugin and click, “Open”.
Next click, “Install Now” and then finally, “Activate Plugin”.
And that’s it for plugins. We have them both installed and can now install our theme.
Our theme will allow us to customize the look and feel of our website, so it’s very important that we find the right one.
So first, we need to go to, “Appearance” in the left-hand menu.
From there, we’re going to click on “Add New”, and then over in the “Search Themes” box, we’ll search for the name of the theme we’re going install, and that’s “Astra”.
And Astra is a very fast and lightweight theme that is highly customizable and works perfectly with Elementor, our drag-and-drop page builder that we just installed.
So here it is, the only one that shows up…
And all we have to do is click “Install” and then “Activate” after it finishes installing.
And that brings us to the end of this step!
Now, real quick, let’s take another look at your website. And you can access it by clicking on your site name in the upper left-hand corner.
And as you can see, it looks a little different from the last step, but we still have to add some content and start customizing it.
And that’s exactly what we’re going to do in the coming steps.
Step 4: Add Content To Your Site
Okay, in Step 4, we’re going to add several pages of content to your website.
And this is where you get to start making decisions about how your site will look, and by the end of this step we’ll see some real progress.
So first, let’s go back to our WordPress dashboard and you can do that by hovering over your admin name in the admin panel, and then click, “Dashboard”.
First, we’re going to get rid of the default content that WordPress has put on your site, because we don’t really need it.
So, go ahead and click on “Pages” over here in the left-hand menu. Then mouse over the “Sample Page”. And then click the “Trash” link.
And now that we’ve cleaned everything up, we can start publishing some of our own content.
So let’s go over here to “Elements” in the left-hand menu.
And the first time you use the Elements plugin, you’ll have to enter your email and then check this box saying that you agree to their Terms. And then click “Continue”.
And as you can see right here, at the time of this video, the Envato Elements plugins has 100 Free Template Kits and 12 Premium Template Kits that can be used with the Elementor page builder.
With all those templates to choose from, I’m sure you can find one that suits your needs. If you need a minute, just pause the video and scroll through the pages until you find one you like.
And just to be clear, you don’t have to use the same template that I do. Make sure to choose the one that you want, and then I’ll show you how to customize it in the next step.
For this tutorial, I’m going to use a Free Template Kit, so I’ll just close this window here, and then I’ll filter out the Premium Template Kits.
And I’m going to use a fun Template Kit that I found called… “Dog Grooming”
So I’ll just search for it by entering the name in the search field here…
And these are all of the pages associated with that Template Kit.
So after you find your template, just click on it so you can see all of the pages.
And as you look through all of the page templates for the theme, you’ll notice that there are two types of templates to choose from.
Some of them will have this little “Pro” label in the upper right-hand corner, and others won’t.
So that little “Pro” label means that there are some parts of that page that can only be made with the Pro version of Elementor for $49.
So if you find a Pro template that you just can’t live without and you want to upgrade, I’d like to beg you to use Link #2 in the description box below to make your purchase.
Since that’s my affiliate link, I’ll receive a small commission from Elementor which really helps support me as I create these free tutorials.
And it could actually help you save money, as I always update the link to any special promos that Elementor is offering.
But don’t worry, you don’t necessarily need to purchase the Pro version, and I’ll show you why.
So first, we’re going to pick our, “Home” page.
And you can click the thumbnails to see a full preview of what each page will look like.
And I think I like this one here…
So all I have to do now is enter the page name as “Home” and then click the “Create Page” button. And as simple as that, it will create that page for me under my “Pages” section.
And then after it’s finished, you’ll see this message telling you that it created the page for you.
So now I’ll click “Back To Template Kit” and next, we need to find an “About” page that we want to use… um let’s see… how about this one right here.
And then we’ll take the same steps to create the page by first entering “About” and then clicking the “Create Page” button.
And now it’s done.
Then let’s go through the same sequence again to create a “Contact” page.
So first, click the “Back To Template Kit” button.
Then find the “Contact” page template that you want to use.
I’m going to use this one right here, even though it has this “Pro” tag on it, and I’ll show you why.
When we get to the next page, we’ll see that we have two choices, “Buy Elementor Pro” or “Ignore warning and import anyway“.
And I’m going to just choose to import the template, and the reason why is because the only thing that will happen is the parts of the page that require the Pro version simply won’t show up.
And on this page, that’s the contact form, which I can use another plugin for, or I can substitute some other kind of useful content, which I’ll show you how to do in the next step.
So let’s just click the “Ignore warning and import anyway” option.
Then we’ll enter “Contact” for the page name. And then click the “Create Page” button.
So now we should have three pages: the Home page, the About page, and the Contact page.
And the final thing we need to do is publish all of those pages because WordPress only saved as drafts when we imported them.
So to do that, we’ll just go to “Pages” in the left-hand menu and then select all of the pages by checking this box here. Then choose, “Edit”, and “Apply”.
Then select “Published” from the dropdown menu next to “Status” and finally, click the “Update” button.
Now all of your pages are published, but we need to make sure that your Home page is the first page we see when we visit your site.
And we can change that real quick by going to our main menu and clicking “Appearance” and then click “Customize”.
Then select, “Homepage Settings” right here.
Now select “A Static Page” and once the dropdown menu appears, select “Home”.
And right away, you should see the content in the right-hand window change to the contents of the home page template you selected.
And as you can see, we have some margins on the side of our content that we’ll want to get rid of by making it extend to the full width of the page.
So to do that, just click this back arrow up here, then select, “Layout”, and then “Container”.
Then under “Default Container” select “Full Width / Stretched”. And you should see those margins disappear and your content fully extended to the right and left sides of the page.
And since this is a default setting for your theme, all of your pages will look the same way.
So the next thing we need to do is ensure that we can access all of your pages from a menu at the top of each and every page.
So let’s create that menu by clicking the back arrow twice and then let’s select “Menus”, and then click the “Create New Menu” button.
Now select “Primary Menu”, which means it will be at the top of the page on every page.
And also put “Primary Menu” in the Menu Name field up here.
Then, just click “Next”.
Then click the “Add Items” button and all of your pages will appear over here on the right.
And now you can just click the pages that you want to add to your menu and you’ll see a check appear on that item and it will show up under the menu on the left here.
After you add all of the pages you want, just click the “Reorder” link and then use the up and down arrows to move them to the position that you want.
And finally click “Done” and “Publish” to publish all of the changes we’ve made.
Then, while we’re here, let’s change the name of your website from the generic, “My Blog”, to the website name you want to use.
So just click this back arrow twice and then select “Layout”, then “Header” and then “Site Identity”.
Then enter your site name in the “Site Title” field.
And then after you’ve finished that, click “Publish” once again.
And now your website should be looking pretty good, so let’s go and take a look at it and see what you think.
To do that, just click this “X” in the upper left corner to close out this menu, and then click the link for you site name right up here.
And, wow! What a difference from the last step. That looks really nice!
And just so you know, when someone else is looking at your website, they won’t see this Admin Bar at the top.
Alright, let’s move on to the final step where I’m going to show you how to customize your site with the Elementor drag and drop builder.
Step 5: Customize Your Website
Alright, so this is Step 5, the last step.
And in this step, I’m going to show you how to customize the pages of your website by changing the content and design.
So first, let’s go back to the WordPress Dashboard. And you can do that by hovering over your website name on the admin panel and then click “Dashboard”.
Then just click on “Pages” in the left-hand menu and then select the “Edit With Elementor” link next to your “Home” page.
Now, depending on the theme that you installed, your theme will have some different content than mine, but every Elementor page will have 3 different types of elements on them.
The first type of element is called, a Section.
And Sections have 3 different characteristics that you should be aware of…
- First, they are containers that are like horizontal boxes.
- Second, they hold columns inside of them.
- And third, they stretch across the full width of the page.
So let’s look at an example…
This is a section. You can see it shows a blue border when I mouse over it. Also, notice that it spans the width of the page and that there are columns inside of it.
If we click on the Plus icon for a Section, it will allow us to add a new section.
If we right-click on the grid icon, we can Edit or Duplicate the section.
And if we click on the X icon on the right, you can delete it
We can also edit the properties of a column under the “Layout”, “Style” and “Advanced” tabs over here on the left.
For example, we can change the width of the Content Section under the Layout tab.
Or we could even change the Background Image for the section under the Style tab.
So after you’ve finished making all your changes, just make sure to click the “Update” button down here to save everything.
So, the second type of element every page has is called a Column.
And Columns also have 3 different characteristics that you should be aware of.
- First, they are containers that are like vertical boxes.
- Second, there can be one or many of them across the width of the page
- Third, they can hold widgets, which we’ll talk about next.
So to demonstrate how columns work, let’s go to the Contact page.
So just click your browser’s back arrow like this, and then find your Contact page and click on the “Edit With Elementor” link again.
And you can see here that the Contact page is also made up of sections that turn blue when I mouse over them.
And inside this Section, we have two Columns. And when I mouse over them, they turn dark gray.
So if I want to edit the Column, I can do it in the interface by dragging the lines to make the columns wider or narrower.
Or, I can also right-click on this box and adjust the width under the “Layout” section.
And that’s about it for columns, as you can see, they’re mainly used for holding and organizing content on your page.
And finally, we have the third type of element, which is called a Widget.
And, as you might have guessed, Widgets also have 3 different characteristics that you need to be aware of.
- First, Widgets are like little programs that allow you to place features on a page. Things like: text, images, buttons, forms, icons, and things like that.
- Second, widgets have a wide variety of functionality that can be adjusted.
- And third, they are only placed in columns, not in sections or inside of other widgets.
So, first, let’s check out all of the different types of widgets available by clicking on this little grid icon up here.
And just as a side note, if you have the Pro version of Elementor, you’ll have a lot more widgets to work with under this section.
So you can mouse over any Widget on the page, and it will turn blue like this, and you can see that all of these Widgets are contained in this Column, which is contained by this Section.
And you can edit the content of any Widget by clicking on it. Then, if it’s a text Widget, you can edit the text directly like this.
You can also edit any kind of Widget, with the Options Panel over here on the left. You’ll notice that each Widget has Content, Style and Advanced tabs.
So remember in the last step, when I imported the Contact page? There was a contact form here that didn’t show up because I don’t have the Pro version of Elementor?
Well now I’m going to add a widget in there to fill that in and make it look more useful.
So I’ll just go over here to the Widget icon and then search for the Google Maps widget. Then all I have to do is drag and drop that in this column and it will show a map there.
Then I can change the address and a bunch of other settings over here on the left if I need to.
Okay, before we finish up, I want to demonstrate how powerful Elementor really is.
Let’s say you don’t like this “Hero” section, here at the top of your Home page. Well, Elementor makes it really simple to add a whole new one.
Just click on the plus icon. Then click the Envato Elements leaf.
Now we’ll just click in the search box and go to the travel category to find our template kit, or really, you could use any template kit for that matter.
After we click on our template kit, we can decide on the page that we want to add, and then just click, “Import Template”.
Now close this window, and click the plus icon again, and this time, click the folder icon and finally click on “My Templates”.
And then all you have to do is find the template you just imported click the “Import” button.
Then make sure to select “No” when it asks you if you want to keep all the settings.
And as you can see, that will insert the whole template into your page. So if we scroll down, you can see that it just put it directly above all of your other content.
So now, you can use any of the elements on this page by dragging and dropping them wherever you need them. And then delete everything else that you don’t need.
So I’m going to just keep this top “Hero” section and get rid of everything else, including my old one.
So I’ll just delete each section with the X icon, and now here’s what I’m left with.
Can you see how powerful that is? You can use any section, from any template, on any page.
Really cool stuff!
And that’s it!
You should now have a beautifully designed, fully functioning website that you can use for whatever your heart desires.
So let’s go take a final look at it…
And this time let’s log out so we don’t see that ugly admin bar at the top anymore.
Mine looks great, and I hope yours does too, thanks to all of the beautiful templates that Envato Elements provides.
Well, that brings us to the end of this tutorial.
I hope you were able to find the exact template that you needed and that you were able to start customizing it just like you wanted to.
If you’d like to learn more about building, designing and managing your website, then make sure to subscribe and hit the notification bell for more videos like this every week.
And if you liked this video, please give it a thumbs up and I’d love to hear from you in the comments below.
That’s all for this time… thanks for watching, and I’ll see you in the next video.