How to Make a Website Using WordPress – Tutorial for Beginners

Hey there! We are going to teach you
how to make a website step by step for your business. If you
haven’t created a wordpress website before, don’t worry this step by step
walkthrough is designed for people with zero experience. You do not need to know any coding
whatsoever. You will learn the easy way to set up and manage this awesome website you see here
within this one complete tutorial. This is the WordPress website we will be
teaching you how to create. It has an appealing drop-down menu,
a rotating image section, home page panels that link to their corresponding pages, a dynamic Google Map so customers can
easily find you. Now all of this including the images, text, links,
everything, is easily configurable through the
WordPress dashboard with zero technical knowledge, and we’ll
guide you through it. The design is responsive. That means
the layout changes based on screen size, which means
it is mobile and tablet friendly. Here, let me show you
something quickly that’s going to blow your mind. I want you to grab your phone, and go to Have a browse around. I’m sure
you’re going to be impressed. You’ll see that due to the responsive
nature of the design, the layout has changed. The
three home page boxes have dropped under each other. Size of the map, and the map’s still dynamic
by the way. So that’s excellent for users who are on
the go, and looking for your place of business. The menu; first tap, shows you the drop down. Second
tap, takes you to the page. So it’s extremely
user-friendly. By the way, this is the same for a tablet device. So if you’ve got a tablet, grab that and have a look around. The slider images still work. By the way, we’re thinking of offering a service in the future where
we setup the design and configure your entire website.
So all you need to do is add content. If you’re interested in that, keep an eye
out for a link or you can follow along with this video, and you’ll have to set up within the next
hour or two. You can also choose to make your website
the full width of the page like so. This is possible through just a simple
setting change. As you can see, its professional, modern, and appealing. Plus, its mobile and tablet
friendly. How much would you expect to pay for
this? Three, four thousand dollars, sometimes more. Guys
with the web agency you probably will. With this step by step tutorial, I’ll
show you how to set this up yourself including the design for nothing more than
a few dollars for absolute bare essentials, and the hour it
takes you to follow along with this video. You just need to know how to use a
computer and an Internet browser. In the future, we might start offering a
service to set up and configure the site. So all you need to do is add content. Keep an eye out for that if interested.
Let’s get started. Here are a few notable businesses that use
WordPress. The exact same platform also you have to
use. The reason they do that is because it’s extremely user friendly, and everything can be configured without
any technical knowledge. Let’s list what we need to cover in this
video. So we can tick them off as we go along.
First, you need to get a .com address. This is going to be your unique address
on the Internet. People will visit your website .com. Two – we need to get reliable web hosting. A web host is where your website’s files
will be stored. Without web hosting, when somebody goes
to your .com, nothing will show up on the page. Third, we show you how to install WordPress. Number four, we’ll install the awesome design we just showed you. Number five, we’ll take you through
setting up your home page, and all other content step by step, and
we’ll walk you through it every bit of the way. This will also teach you how to come
back and edit your content at a future date. WordPress makes
everything very easy to add, edit, or manage. It’s worth noting that the only two things you will have
to pay for are the two absolute bare essentials; the .com address on the Internet, and web hosting. Your dot-com domain will cost about eleven
dollars for a year. Web hosting costs about five dollars a month. These
are the two absolute bare essentials. You cannot run a website without dot-com
domain, which is your address on the Internet, or
a web host. Installing WordPress, that won’t cost you anything. Installing
that awesome design we showed you, won’t cost you a thing. And
setting up your home page, and all other content, won’t cost you
anything either. Just wanted to make that clear. Let’s
start with the first thing on the list, getting a .com. Let’s get our .com domain name. To do that, go to www dot name cheap .com. Now who are name cheap? Basically, they’re a domain registration
company, and they allow you to register your own .com domain name. So you’re
business name .com, and when you sign up for an account with
them, it will allow you to manage that domain within your own account. So
you’ll own your domain 100 percent, and you’ll be able to manage it every year
when it comes time for renewal. The reason I recommend Name Cheap is
because I’ve been using them for years for about seven or eight years, and they’re
one of the most reliable, and most easy to manage domain
registration companies that I have used. The first thing you need to do when you
get here is sign up for an account. Like I said,
when you sign up for an account, you’ll be able to manage your domain
within that account. Enter your credentials here. Select
a user name, password. Enter your first and last name, and email address. I’ll just pause this
video and come back when I enter all those
details. There we go. I’ve entered all my details. You can select whether to sign up for the
newsletter, or not. I’ll uncheck that, and hit create
account. Now that we’ve signed up for an account, we are automatically log in as you can
see here. On the home page, go into this box here and select the domain you desire for
your business. Now for the purposes of this tutorial, let’s try Tom’s Business .com. The service will actually look to see if that
domain is already registered, or if it’s available. As we can see here,
Tom’s Business .com is not available. Let’s try something
else. Your business name .com. That’s also unavailable. Let’s try Now if you’ve got a unique business name,
there’s a low chance that it will already be taken. And is available.
So we’ll go ahead and use that as our sample domain for the purposes of
this tutorial. So now we can View Cart. Here we can just configure a couple of options. Auto
renew basically means that at the end of your one-year, it will automatically renew your domain for the next year. So you don’t
lose it. Now you can choose turn that on or off. If you leave it off, that’s okay. You’ll get
notified by e-mail by Name Cheap a couple times before the domain expires.
So you will get a chance to renew that domain. If you want to be safe just in case,
just leave that on. I’ll leave it off for now. Whois guard is basically just domain privacy. That
means nobody can look up your domain and find out your personal
details or address. It’s offered free for the first year as you can see here. So you can also
choose to turn that on or off for auto renew. And by default, because it’s free, let’s leave Whois guard on when you purchase this
domain. Next, we’ll confirm order. Here you can
view your payment options. There are three options available.
There’s secure credit card payment. There is Pay
Pal payment, and account funds. Now you won’t have any funds in your
account because it’s a new account. so I’m just going to pause this video while I enter my credit card details to purchase
this domain here. I’ll pause this video, enter my details, and then come back to it. There we go. I’ve
entered my credit card details and also my address. Now we can scroll
down, and enter the receipt details. Just for details on your receipt that
you’ll receive in your e-mail. Likewise, I’ll just pause this video quickly, while I do that. Cool, well
that’s all done. I’ve entered my address, phone number, email address, and we can save this information for future use just in
case. Scrolling down, we can now just double confirm if you
want to automatically renew your services, your domain registration,
and Whois guard. That’s up to you. For now, I
will leave it unchecked, and then just hit the Continue button. Now I’ve got this this confirmation page. I’m not sure why
you may get it, or you may not. Maybe because mine is an existing account.
I’ll just pay now. And the order is processing, and that’s it. That’s all there is to it. You’re now the proud
owner of your own .com address on the Internet. I’ll show you
exactly what you need to do next. We can cross that off the list. The next
thing we need to do is get a reliable web host. In a new tab, go to www dot host Gator .com. Now I just wanted to give
you a brief overview of Host Gator. Now that you’ve bought
your .com domain name, which is your address on the
Internet. Web hosting is its where your website files are
actually stored. So it’s where your website will actually
exist; all the files and data. Without hosting
your website would not be functional. There would be nothing that loads up on
the screen. Now the main reason I choose host Gator for hosting is because it’s really easy to set up
this website we’re working on. When we going through all the steps, you’ll soon see why. Also, the
remainder of the steps in this tutorial will be based on our house Gator account. So if you decide to use another hosting
provider for whatever reason, that’s fine. Just keep in mind that you
might not be able to follow the rest for this tutorial step by step. The second reason I choose host Gator is because they’re one
of the biggest and most reliable in the world. As you can
see here, they are hosting more than nine million
domains at the moment. Another thing to keep in
mind, they have a 45-day money back guarantee. That’s no questions asked. Plus, if you
decide to sign up for a two or three year plan, but only use them for a shorter amount
of time. Say, a year or 6 months? They’ll actually refund
the unused portion. So customer service
is a very big deal with these guys. They
really take care of their customers. They’ve also got a 24-hour live chat
here in case you ever need it. So they’re the
main reasons why I choose host Gator, and I’ve been using
them for about seven or eight years myself, and have about three different accounts with them.
Now to get your web hosting account, let’s just have a
look at all the plans available. There’s the hatchling, baby, and business plan. The hatchling is the cheapest. Now the only real
difference between these three, in fact, between the first and the second
is that the hatchling plan only allows you to host a single domain. Whereas, the baby plan allows you to host
unlimited number of domains. Now for somebody that’s starting their
first business website, which is you, you only need an account for
a single domain. Unless you’ve got model businesses
and need to host multiple domain names, you do not need a baby plan. So you can choose the cheapest plan, which is the hatchling plan. As you can
see, the prices differ according to the length that you decide
to subscribe for. Like I said earlier, the unused portion
does get refunded. So it’s completely your choice if you
want to try them out monthly. So pay seven dollars, and try them out
for one month, and see how you go. Then that’s fine, or if you’re confident and feel like
subscribing for a year, or two years, go for that. I’m actually going to subscribe for three
years. So I’ll click on that. Order now. On this page, select the I already own this domain tab, and enter the domain we
just purchased from Name Cheap. In our case, it was HostGator will recommend that you purchase the other extensions; .net, .org, etc. You don’t
need to do that. So just continue down. For billing cycle, I’m going to give you a quick tip here.
Host Gator automatically gives you a twenty-percent discount off your order. Now I’m going to show you how to get an
even bigger discount than their default 20 percent. If you’ve
chosen one month, scroll down. Deselect these add ons because you don’t need them.
Take a look at your total, which is the seven dollars. But instead
of this coupon, enter 1DIRTYCENT 1DIRTYCENT then click Validate. You’ll see that
you’ll get your first month for just one cent. On the other hand, if you’re selecting any of the other
plans, now I’m selecting 36 months. Scroll down. Just check the total. It’s a 178 at the moment. Now go in here and use this coupon code; MYHOSTMOST MYHOSTMOST Hit validate. Now look at that price difference.
That’s a massive difference, and this will work every single time. Now
scroll up, and enter your billing details. I’m going
to pause this video, while I enter my billing details, as well as username and
security pin. There we go. That’s all done. I’ve selected my username and pin for this hosting account, and entered my
billing information as well as credit card information. And that’s it. Scroll down to the bottom
of the page. Select I agree to these terms and
conditions, and create account. Just out of disclosure, from time to time, we may get a referral
commission from the company. Now I’ll show you what to do next. The next thing you need to do is open
the email account you used to sign up for
your host Gator hosting account. You’ll receive this
confirmation email here, which has a few details. I’ll show you
how you need to use this information. It’s got your billing system login, your control panel, username, password, & name servers. For now, all you need to do is go back to
your Name Cheap account. The one you use to sign up for your dot-com domain
name. Go to manage domains. Click on the domain which you just registered. Transfer DNS to web host. All I need you to do is copy and paste each one of these name servers to your
Name Cheap account DNS, and save changes. That’s it. You can actually go ahead and close all
the tabs except your email account. Leave that email open. I now need you to sign into your control
panel. Click that link there. Copy and paste the user name and password, and log in. Now this here is known as your host Gator control panel. We can
cross that off the list, and move on to number three. Your next step is to install the
WordPress platform. Scroll down, and find quick install. Click on WordPress. Continue. Now your domain should
automatically show up in this list. If it doesn’t, just select the domain. Leave this field blank. We want to install WordPress in the
root directory of your domain, not in an extension of your domain. So leave
that blank. Disable auto upgrades. Now let’s fill in the rest these details.
My email address. The title of our website. Admin user, you can leave as admin. And just enter your first and last name.
Install now. That’s all WordPress has been installed. To log into the admin area, click on this link here,
and log in. The screen you see here is the admin section of your WordPress
website. It’s basically everything you need behind the scenes to set up and control your website. First thing to
do is just close off a few of these. Let’s change our password to something more memorable. Go
to users, all users. Click on the admin account
we just created. Enter your new password. And update. That basically replaces this password
here. Now it would be a good idea to bookmark the URL here, yourdomain .com forward
slash WP dash admin, because you will need to
go there and log in to access this back end system every time
you want to make changes to your website. Now let’s see how far we’ve got. If you
actually go to another browser, and type in your domain, you’ll see that your website actually loads up. The next
step is to do some housekeeping. So just follow along with what I do and
then we’ll install that awesome thing that we promised at the
beginning of this video. So it’s starting to take shape. I would like you to go into plugins. Now if
these two plugins are activated; the Merger Marketplace and Super
Cage, I want you to deactivate them. Next, go into Settings and General. Place a www in front of your domain. The site title, just check that it’s your
business name, and tagline you can keep or remove, Save
changes. This will prompt you to log in again. Next, go back into Settings, Permalinks. I want you to just
confirm that your Permalink structure is set to Post Name. Save
changes. Next, I’d like you to go into Plugins, Add New. Search for a plugin called Black Studio. This is the one we went
here. Install now. Activate plugin. Now of course, I’ll show you how we’re going to use these
plugins when we set up our site in a second. Add another plugin. Search for Contact
Form 7. Install. Activate. The next plugin is one called Disable Comments. Install and activate. Now just go down to the Settings for the disable comments plugin. And here you can disable comments on posts, pages. Don’t worry too much about that.
Just hit Everywhere. You want to disable comments across your
whole site, and save changes. There is one more plugin that I’d like
you to install. If you look in the description below this video, you’ll see a link to our
website, to a page on our website just go to that page. I’ll bring it across here, and look for the link to the Meta Slider plugin. Click on that, and save it somewhere on your
computer. Somewhere you can access. Now go back here. Add new. Upload. Now we’re just going to upload the plugin, and activate that one as well. Great, so the next thing we need to do is let’s install the
design that we showed you at the beginning of
this video. Go to Appearance, Themes. Now this one here is installed by default. Now depending
on when you follow this tutorial, there maybe a
different theme installed by default. That’s fine. What you need to do is go
back to that page on our website. Locate the link to Vantage theme. Click that, and save
that somewhere on your computer. Now go back to Themes, Add New, Upload Theme. Now let’s browse and find the Vantage theme, and install. Activate. Now if we go to our website, that is what it currently looks like. So you can see we are getting a step closer
to what we promised initially at the beginning of this video. And now I’ll show you how to configure the details on your home page. You can
now close all the other tabs. Just leaving the
WordPress dashboard open. Next I’ll show you how to change the slider images
on your website. These images here. A good suggestion to get your own images for your business is to take photos of
your shop, or products related to your business, and
then save them onto your computer. Ready to use. So back in your dashboard, if you correctly activated the Meta
Slider plugin a minute ago, it will appear here. Click
on that. Create your first slideshow. Here, we’ll add the photos that we have of our business. On this
screen, you can drag and drop images you have stored on your computer.
So I’ll just do that from the other screen I have here, the one that you can see. Alternatively, you can click Upload Files, then browse, and manually select the
files on your computer. Once they’re uploaded, click Add to slider. Now on this screen,
you can drag and drop to arrange the sequence in which you want these images
to appear. So say I would like this one to appear first. Just simply drag and drop, and this one second. Here you can change the
width and height of your slider image. I’d
leave this one as 1080. Height, I would leave as say 310. You can change that based on the images you have. Just muck around
with it. Feel free. Now it’s important to set the theme to Vantage. There are a lot of other
options here, which I’m not going to take you through. But the one that you will probably use is
the slight delay. So this is the number of seconds that the
slide will appear for before the next one, and this is in
microseconds. So three thousand means three seconds. So you can change that to
say four seconds, and click Save. Now go into Appearance, Theme Settings. In the tab called Home, scroll down and select the new slider, which we just created.
Save. Now we can have a look at our website to
see what it looks like. And there you go. There are your slider images. You can play
around with the settings. Add new images. Change the order in which
you would like them to appear. Change the height, and change the
transition time. So there we go. We’re one step closer. Now I’m going to show you how to edit these
icons, or select the icons that you want, and
edit these panels on your home page. So go back into your
dashboard. Go to home page. Install page builder. Activate. Now go back into Appearance, and home page. Flip the switch to On. Now what you see he is an
absolutely awesome tool for you to be able to adjust
the layout of your home page, and you’ll soon see the power this one
tool here. Each one of these boxes correlates to these three here. This headline Widget box correlates to this section here, and this area here correlates to this. First one I’m going to
do is delete what I don’t need. So just follow along
with what I do. Okay. So now we want to be able to — hang on. I’ll just refresh the page. Okay. We want to be able
to edit these boxes here. So if I click on Edit, the title correlates to the title here. The text correlates to this text over here. The icon, you can select from all these different
icons, and you can just muck around with that through a
bit of trial and error that appears here. You can adjust the
size of the icon. You can also adjust the position of the icon. The more text correlates to the text over here, and the link the user’s taken to will be placed here. Okay. So let’s set that up. If I was to refresh to show you the icon location, there you go. So if I go back in the first box, say I wanted to be Our Products. Let’s put in a brief
description. For your icon, there are heaps of icons to choose from. So just muck around with it. Trial and error. There are directional icons, branded icons, medical icons, and a bunch of other web icons. For now, I’ll choose the thumbs up icon. I’ll leave the
position at the top, and read more. Done. We’ll come back to this More URL. I’ll show you how to update that in the second. We’ll actually
need to create a page first. So then we can enter the link of the page.
So the user can be taken to that. So for now, click Done. Cool. For the second box, Okay. Let’s try that, and hit Done. Now obviously, with these icons you
can just trial and error. Just muck around with it, and you’ll find one
that fits your needs. And also, if you’re unsure about what you
should put in these boxes, perhaps look at some of your competitors, or just do a bit of research on the Internet.
I’m just using this as an example. For the third box, let’s put in a Contact Us, and let’s try the phone icon. Perfect. Now these links here don’t go anywhere. I’ll
show you how to set them up back in your Dashboard. We need to create a page for each one of
our sections. So go down to Pages, Add New. We’ll create one for our products. Now what you see
here is a text editor. When you’re in the visual tab, you can basically use it like
word document. You can bold things, italic, put in some bullet points, numbered lists, and also if you click on that little icon there,
you can highlight, and underline, change text color. So it’s basically an easy to use text editor. Now one more thing you can do is link to another page. So when you set up pages
on your website, you can inter-link between pages of your
website. How about when you’re in the text tab, that’s all
HTML code. So most of the time, there’s no need to use
that. But there will be a couple of things that I’ll
show you a bit later in this tutorial, such as when you’re copying and pasting
code for your Google map to show up. You’ll have to do that in the Text tab
because that’s the HTML code area, but for most part you’ll
stick to the Visual. So let’s add some information he for
your customers. Now I’ll also add some dummy text just for some filler text, and when
you’re happy with your page, hit Publish. Just for your information, do you remember early in this
tutorial we confirmed up Permalink structure? Basically, that indicates what our URL
will be when we add pages. So the title of this is
Our Products. The URL will be your domain .com
forward slash the page name. You can customize this if
you need to. In most parts, I usually keep this the same as the post title, but you can
customize it. So let’s see what our page looks like. There we go. That’s what a page on our website will
look. You’ll notice there is a side bar here with random information. Don’t worry about
that. We’ll get to that a bit later in this tutorial. For now,
let’s add our other two pages. And once again, I’ll just some dummy text. Hit publish. There you go. Now let’s add our third page. On this Contact Us page, I’m going to show you how to add a
Contact Form and Map. But for the time being, let’s just hit
Publish. We can come back later and edit that. So now we have the three pages setup, which correspond to the three panels on
our home page. So now all we need to do is copy the URL. Go into Appearance, home page. Go to the corresponding panel, and edit the More URL, and paste that in there. Now it’s usually
a good idea to link the title, and the little icon to this URL as
well. So it’s easier for the user. Click Done. Do the same for the next two. So edit, and save. Let’s see what our site looks like. So now if a user clicks on the link, as you can see they’re taken to the
corresponding page. And the beauty about this WordPress CMS that we’re using is you can
go back in and edit anything you need to at a future date.
Nothing’s set in stone. So you can feel free to experiment. The
next thing I would like to show you how to add is the Map, and the Contact Area just under this section here. So going
back into the Dashboard. You can close all the other tabs. To add a new section on your home page, go to this tab here, Add Row, and I want at two columns. What I’ll do is I’ll put up a Map, a dynamic Google Map in this left area
here, and some contact details in the right
area here. Now remember how I said this is a really
powerful tool for your website. What you can do is actually adjust the
width of each area just by dragging, just by dragging like
that. Now this is really powerful because you
can make your homepage look however you like. You can do the same for these tabs here
if you wanted to. By the way, please remember to like this
video if you think the information I’m sharing with you is useful. So I’ll leave this at about there. Next we want to add a widget. Let’s add a text widget. Just drag and drop that into the left
column there, and add another widget. Add the Visual Editor, and throw that in there. Let’s edit this one first. Let’s see what that looks like. Cool. I think I want this area to be
slightly narrower. So I’ll adjust that. Perfect, and that really is one of the advantages
of this site builder tool for the Vantage theme. Next I’ll
show you how to put in that dynamic Google Map into the left hand side area.
Opening up a new browser, just search for Google Maps. Enter your
exact business address in here. For now, as an
example I’ll say, Ocean Avenue Santa Monica. You should put in your exact address, then hit this little icon here. Share and embed map. Embed. Lets choose a custom size. Say 500 by 250, then copy, edit, and paste the code in here. You can give that section a title such as Find Us. Hit
Done, and Save. Okay. So that’s way too small. So let’s go back into the Google Maps. Let’s try 800 or 900. Perfect. That is absolutely perfect.
That’s exactly what I want. You can muck around with the map size, the
height. Also, say you wanted to change the
location of particular parts on your home page. All you need to do is hold down this little icon here, and just drag and drop. Now if you save that. There you go. Easy as that. I hope you’re now beginning to see
how powerful this little tool right here. I’m just
going to move it back to where it was. Awesome. It’s starting to really take shape now. The beauty
of this map is that its dynamic. So a user can basically
come to it, zoom in, zoom out, and figure out how they’re
going to get to your business. It’s not a static photo. It’s a dynamic
map, and it’s really really user friendly.
It’s a great user experience. Next, I would like to show you how to add
some content in the footer area, just here if
you want to, and also some content in the header area
here. So going back to your Dashboard. Go into Appearance, Widgets. Let’s start with the header. Drag and drop the Visual Editor tab into that box
there, and let’s say let’s put in a phone number. Hit Save. So that will appear right here. If you wanted to, you could Bold that. So it just stands out a little more. Another thing you could do is place a social media
widget in that area. So if you scroll down, and put his Vantage social media in there, what you would need to do is put the… put your Facebook, Twitter, Google+, page URL’s into the sections here, and the icons will
appear automatically on home page. So I’ll give you an example, and
if you don’t want one to appear just leave it blank. And that’s it there. You could even just delete the Visual Editor widget by hitting that delete button here and that will get rid of this. So you can
choose what you want, what you don’t want, etcetera, etcetera. Next let’s configure the footer area. So let’s drag the Visual Editor into
there. Let’s have a section called About Us. Now I’ll play some dummy data into this, and
there you go. Now the good thing about this is if you want more sections to your footer here,
all you need to do is go in, add another tab, and that will show up there. If you add another tab, it will divide it
into three. And similarly, if you had four tabs,
it will divide it into four sections. Also, you can also choose to add the Social Media widget into there as
well. If you want to rearrange the order in
which these appear, simply just drag and drop. Now when you refresh your page, that’ll show up. So I’m just going to delete this one for
now. Okay. The next thing I would like to show you how to do is
create that custom menu, which I showed you at
the beginning of this video. It will be a drop down menu, and I’ll show you how easy it is to do
that. So go back into your Dashboard. Before we add a custom drop down menu, let’s add a few more
pages to our website to fill out a bit more. So let’s Add New. Now let’s just at for some sample products that we might
have. If you want, you can add an image anytime you want by clicking Add Media,
and you can upload files from your computer, or you can use images already in
your media library. I can align that to center, and for now I’ll add some dummy text. Publish. Let’s say product two, and a third. Now if you remember from a
few minutes ago, we had a page called Our Products. Let me just open that up. What I can show you how to do is link each one is of the products to their corresponding pages. Now you can interlink your site how
you see fit. I’m just using this purely as an example.
If you want the link to open in a new tab or window, just tick that, and update the page. You’ll see that that now links to each one the pages
we just created. Okay. Now I’ll show you how to add the custom menu. Click on Menus under Appearance. Name your menu. Create. What you see here is an interface for
you to be able to control the top menu on your website. Okay. So if you have any
links or pages which do not appear in this
structure, just open up this tab here, enter a link, and enter a title for that link. That will be added to this menu structure. Now to edit the menu structure, all you need
to do is drag and drop. So say I want our
products to appear next to home. Contact us to appear near the end. We can remove this duplicate home, and say I want each one of these products;
one, two, and three, each one of those pages to appear as a
drop down under our products. All you need to do is drag and drop such that it is indented to the right. Do the same for the other two. Now if you wanted a third level menu for
any reason, all you need to do is drag and drop, and
intend to the right. One more thing we need to do is select Primary menu, then Save. Okay. Now if we load our site. There we go. That’s the new structure we
have over here. If we hover over our products, you’ll see the products underneath that in
the menu structure appear like so. I’m going to go ahead and change that a bit, and there we go. It’s a lovely professional looking drop
down menu that’s easily configurable within this
section right here just by dragging and dropping.
That’s how easy it really is. Each one of the items will link off to their corresponding page. So it’s
extremely easy for a user to navigate your website. A bit later in this tutorial, I’ll show
you how to change the color of the panels when you hover over
each one. I’ll show that to you a bit later. For now, I’ll show you how to get rid of these
bits here, and add a Facebook widget and possibly a map or a menu. Something different, something more meaningful. Go back
to your dashboard. Go down to Appearance and Widgets. Now these sidebar
widgets correspond to these right here. So all you need to do is delete each one, and now lets add things that we want to appear there. We
can add a custom menu. Perhaps, a calendar. We can choose the same menu that appears in the header, or we can create another
menu using the same process I showed you
before, or we can place another version of the dynamic
Google map for all the inner pages. To do that, we’d
go into text. Drag and drop where you would like that to
appear using the same process I showed you
before. So let’s see what that looks like. There you go. Starting to look good. I’d like to show you how to add a Facebook widget to
the sidebar. Add a new Text tab. Open up a new page in your
browser and search for Facebook like box. What you’ll need to do is enter the URL of your Facebook page. We’ll use our e-media coach .com
Facebook page as an example. Perfect. Hit get code. Now copy this first section here. Past it in here, and also copy the second section. Press Save. Now if you’d refresh that page. There we go. We’ve got our Facebook like box. Anyone
can come to your site, hit the like button. Also, if you wanted
to change the order in which these appear, once again
all you need to do is drag and drop. And once you refresh the page, that will take effect. For now, I’ll get rid of this custom menu. Perfect.
Looks good. One thing I realize I really don’t like here is the appearance of this
image, and also the fact that if you click on it, it links off to to the large image. Ok. So what I need to do there is edit page. Click on that image. Hit the edit button. Here you can choose
whether to align left, center, right, and also the size of
the image. I’m going to choose its full-size, and also, I did not want to link off to the actual image that’s held in the
database. So I’ll select none. Your other options are to
link an image to a custom URL, but for the
time being I’ll leave it unlinked. And click Update. Update. Now when we view the page. That looks a lot better, and the image does not link
off. So that’s looking great. You know what we’re just about done now.
What I’ll show you now are a few optional customizations, which
you might want to make to your website. Next I’d like to show you how to add a contact form on the Contact Us section
of your website. Currently. there’s really nothing on it, but I want to show you an easy way for
your customers to be able to contact you via an easy to use contact form. So go
back to the Dashboard. To add a contact form to your website, you remember
earlier we installed a plugin called Contact Form 7. So if I just go to that. Click Settings. Don’t worry too much about this. It just shows you the layout
on the form; name, email, subject, message. In this Mail
tab, ensure this is the email address, which you want the form delivered to. So
it would be your business email address. The email you receive will
be in this format here. You can leave all that as default. If you want the form sent to another email address, fill out the
fields here. I’ll leave that unticked, and here you can edit the messages the user
receives upon successful submission. I’ll leave
that default as well. Go back up. Save. Now what I need you to do is copy and paste this entire tag. Go to your contact page. Now it’s important that you go to the text tab, and
then paste that tab that we just copied. Update. Here we go. Here’s our contact form. You can test that to
ensure it works correctly. And this is from a customer’s
point of view. There’s a notification hear the message was successfully sent. Now you can go to your email inbox and
check that you received the message. And there it is there. Check your junk email
folder just in case. When you click on that, you’ll see the message, and also you’ll be able to reply
directly to the customer. So there you go. That’s an easy way for
you to set up a contact form on your website. Next I want to take you through how to update the logo. So this area right here. You can update
it with your own business logo. So back to your dashboard. You can first
close all these other tabs we don’t need. To change a logo on your site, go to Appearance, Theme Settings, the Logo tab. Here you can upload a business logo if you already have one. Just drag and
drop the file from your PC. Just keep in mind that your logo should
be a transparent PNG, which means a transparent background. If it’s a white background, it won’t
really work because there’s a slight difference between
white and the actual background color of the header area on your website. So that’s why it’s got to be a
transparent background. So simply drag and drop your logo and you can Set logo. For those of you that don’t already have
a business logo, I’m going to help me out here. What I’ll
do on my webpage is I’ll put up a file with some sample
logos. Feel free to use one of those. Go to a
site called pixlr .com. Use the editor. Open image from computer. In my other screen here, which you can’t see, I’m
just going to go in and select a logo from one of the sample
logos. You’ll be able to download this file from our
website. So just check the web page in the description below. Okay. I’ll select today’s sample logo. Let’s add in a business name. You can change the font if you want to, and also font size, and color. Click okay. We can crop this to the desired size, and press Enter. Now let’s save this logo. File, Save. Ensure the format is a PNG transparent. The white and gray boxes in the
background indicate that this is a transparent background, not a white background, and that’s
exactly what we need. Save on to your computer. Now go back to your Theme Settings, and drag and drop or select that logo from your computer. After it uploads, Set Logo and Save Settings. Let’s see what our site looks like, and that’s it. We’ve got our logo. Of course, if you’ve got your own custom
business logo, I suggest you put that in. If you are getting
it made by somebody, ensure that they know it should be a
transparent PNG. So it blends in nicely. Next I’ll be
taking you through a few options that are available with
this design. Back into your Dashboard and the Appearance and Theme Settings, go to the Layout tab. Responsive Layout. What is Responsive Layout? It basically means that layout of your
website will change depending on screen sizes. So that means if this is ticked, the layout will be
scaled for mobile and iPad devices. Making it
easier for customers on mobile devices to view your site.
Often, web agencies charge thousands of dollars
extra just to make a site responsive, but you get this
as part of the Vantage theme. So I’d suggest keeping that enabled.
Layout Bound, currently, it’s at full width. If we change
that to boxed, and refresh, that’s what your site will look like. So it’s up to you whether you want it full width or boxed. For now, I’ll leave it as full width. In the home tab, it’s a good idea to keep this checked. It just means
that the images on your homepage slider will stretch if they’re smaller than necessary. In
Navigation, a Sticky Menu. If I disable all that, it basically means the
menu disappears as you scroll down the page. Whereas if
it’s a sticky menu, it will stick with the top of the screen. Search in Menu. Currently, this search is enabled, but if there’s no need for search on
your site, simply disable that. Display scroll to top. That’s this little icon here. If you click that, it would go straight
to the top a web page. I suggest keeping that in, and that’s it
for the Theme Settings. Feel free to play around
with that, and choose what you think is best. The next thing I’d like to show you is
how to change the color of these many items when you hover over
them because perhaps this color here doesn’t
suit your general business theme. So I’d like to
show you how to change that color there. Go back into your Dashboard. Click on
Plugins. Add New. Search Custom CSS. Choose the first one on the list here,
Simple Custom CSS. Install now and Activate. Now go up into Appearance, Custom CSS. In this text block
here, copy and paste this CSS text that I showed you. Now I’ll make this
available on our website on the web page. So you can
just copy and paste. Look in the description below for that
webpage. It’ll be on the same page as all the other resources I’ve mentioned throughout this
video. So just copy and paste. What you want to change is this here. This is known as a hex color code. This number corresponds to a
particular color. So if you open a new browser window, and search for hex color codes. Look for a couple of code picker tools
that are available. So as you can see all these colors translate into a
particular hex value. This one’s pretty good. Color picker .com. Let’s try a dark green. When you’re happy with your
color, copy and paste just that bit there. Once that’s updated you
can go back into your site and refresh. There you go. That looks great, and if you’re not happy with
that, obviously, you could just go and muck around with any color you like. Trial and error
until you get the color you like. I suggest you do not touch any of these
here. Just that there, and that’s it. Just before we finish off with this
video, I want to make a couple of small changes. I want to get rid of this social area. I want to show you how to add a custom
background color to a boxed layout on this website, plus, on the Contact Us page. I want to make
this full width without this side bar, not for all
the other pages, only for this Contact Page. and perhaps
even add a large dynamic map. So to get rid of this social area. Back into the Dashboard,
Appearance, Widgets. I’ll delete that. Next in Theme Settings. Layout, I’ll change full width to boxed. Just to
remind you, that means the website will look like
this. Now I’ll show you how to add a custom background color, or a custom design.
Go to background. You can select the color. Save. There you go. Another option is to upload a background image. So if I go Browse here, Select Image. I’m selecting a background image from my computer. There we go, and Upload. I’ll leave the position left. Leave this as tile, and Save Changes. As you can see the
background that I’ve uploaded is a nice light gray texture. If you want
this, I might actually make this available on
our website. So if I refreshed that, there you go. Looks really nice professional and clean. Now to make a page full width. Go into
Pages. Select the page you want to edit. In the template drop down, Full Width Page. Update. Now refreshing that that’s the full width. It’s gotten rid of
the side bar. Let’s add a big dynamic map there. I’ll make this one quite large. Make sure you’re in the Text tab, then paste. This will not work in the Visual tab
because remember the Visual tab is a text editor. The Text tab is where you paste any code.
Update. And there you go. You can also enter some contact
information here back in the Visual tab. There you go. Of course, if you don’t want this contact form, you
can remove that. You can just send to your email address.
It’s completely up to you. That’s all there is to it. In the time
its taken you to watch this video, we’ve shown
you step by step how to produce this professional business website.
Something that if you went to a web agency, it would probably cost you a
couple of thousand dollars at least to have something like this
implemented. It’s got everything we promised. I urge you to please like this video
on YouTube, and also subscribe to our
channel because we have other videos that will help you with your business
site. If you have any questions on anything
you’ve seen, please leave a comment below. The reason
is there are probably other people with the same question, and it would be great to help everyone at
one time. So please don’t be afraid to ask any questions in the comments below, and of course, please thumbs up this video
on YouTube. Thanks very much for watching.

, , , , , , , ,

Post navigation

60 thoughts on “How to Make a Website Using WordPress – Tutorial for Beginners

  1. Thank you!! I have no experience outside of other youtube videos I've seen but you laid it out so easy and this was exactly what I was looking for. Thanks again… Just wondering how I can write on the pictures on the slider or install call to action buttons. Once again Thanks

  2. One more questions is there a widget that you'd suggest to help me place customer testimonials on the side bar or should I just make a new page?

  3. Greetings, Hi there, Thank You! Greatly appreciated your tutorial.
    Is it possible to use / import other sliders instead of ml-slider, and import other templates as well beside the Vantage template?

    Thank You!

  4. Absolutely best tutorial I have seen on WordPress. Straight forward and the end result is a working webpage using a template that is easy to use. Thank you

  5. This is literally the best tutorial I've ever seen.  No stone left unturned, no step skipped, nothing left to your imagination.  Baby step by baby step – this is the best and most complete – bar none.

  6. Hi Guys, a great tutorial. But I must also say a big thank you for all of your help when I emailed you. As a newbie, it was a delight to get the help I needed, and you asked nothing in return. Cheers.

  7. Great tutorial man, keep up the good work. I have been struggling trying to learn on how to work with wordpress and this video completely helpped me out!!!!!

    God bless you all!

  8. This tutorial is GREAT! Like another poster said, it goes baby step by baby step. I like how thorough it is, and when I emailed, I got an answer within 24 hours which solved my problem. Highly recommend!

  9. Hello All, Great video and great information 
    I have one question how to remove the top Box where is written Jim Business and Call US xxxxxx
    I would like that home button to be the first entry on the page Many thanks Lucsi  

  10. I like the valuable video you provide in Youtube.
     I will bookmark your  and check again here regularly.
     I am quite certain I will learn many new stuff right here!
    Best of luck for the next!

  11. I'm having a small problem with the widgets in the header. My "Call Us" text appears next to the social media icons rather than above them, do you know how I can fix this? And good tutorial by the way.

  12. I had no option but to subscribe to your channel…..
    Great tutorial…am happy to find someone who can hold my hand and walk with me.
    1 question. The menu is not fully responsive or did i miss something

  13. Hi,thanks for that tutorial.

    Here's my question,I noticed that some features are absent from my

    WP dashboard.For example when you go to setting-reading I saw "Front

    page display".I don't have it.Can you help me on this?

  14. I'm a freelancer, how to design admin page on website to let website owner to manage his products and categories

  15. Thank you guys for an amazing tutorial! I've learnt so much following your video.
    I have a question about changing the WordPress Address (URL). After I add www, I'm not able to open the page, I get a message about too much redirecting. After I delete www, the problem remains, so I just had to start over.

  16. I knew nothing about create a website, then after watching this video and now thanks to eMediaCoach I can now create one using WordPress.. Thanks 🙂

  17. Superb and very detailed tutorial……was struggling with wordpress but this made my life easier…..thanks a ton for your efforts!!!

  18. Somehow the theme refuses to save any changes with the slider. It always resets to the default one without stretching, so it's even worse than the default. What happened and how to fix this?

    Also there is no error message, only a "Settings saved" message. But no actual saving happens.

  19. Thanks for making my life easy… Really nice video. God bless you for sharing your knowledge. – but I have just 1 question: how to change the color of Menu again? Where did u get that embedded text u paste?

  20. When looking at using mobile I want that option to come like 'view the site through mobile desktop'. Where it would look like you are using a laptop. Cause sometimes doesn't come good in mobile. So hope there is an option where u can view it like using a desktop.

  21. It was worth watching this video as i am beginner to wordpress, it helped me though, I am having problem while updating a logo after selecting an logo and when i click save setting it doen't make any changes and default vantage theme logo got disappear too. And in layout section too any changes in options are not taking place

  22. Nice video. Just wondering if do you have also tutorial on how to make an android/apple apps? I would prefer your tutorial since you have an easy and interesting way of delivering the video tutorial.

  23. Thank you very much for your tutorial.I have done my first website. My Qs is this can I integred an eccommers in my website,is there any widget I can download for this?

  24. @eMediaCoach Same here, slider does not want to save, it goes back to the "demo slider" – I did update the meta slider plugin (even downloaded it from their site) still would not work :/ ?

  25. Can I get some help plese? When I'm putting those 3 icons in the middle like thumb and phone (for contact) but they are not visible, it's just a circle and in side is square, and for facebook as well it's not ''f'' but simple square.
    Other than that and Meta slider plugin you did an excellent job, theme is great and your tutorial excellent 🙂

  26. This was really good, thank you! However, with the Vantage theme, I was unable to save the theme settings, it kept keeping the demo slider, logo and header text. Why is that?

  27. Sorry,
    I am having the same issue with the new slider, it won`t show up, it just keeps going back to the demo slider. I can see there are many comments to view the updated video, but I cant find it, please can someone link it into this reply, or any assistance.
    Thanks. Great video.

  28. Your tutorial is wonderful, but my slider won't update, I don't see any update button for the Theme as suggested, please help

  29. For those who cant get past the slider step, please install newer version of Vantage theme, you can google it up. After those steps, I was able to sail smoothly throughout the rest of the tutorial. Thanks eMediaCoach!

  30. Hi, I have ML Slider version 2.6.3 and Vantage version 1.5.4. When I alter the slider and click 'Review & Save' the new images appear. When I save as instructed the old mages are still on my Home Page. Can anyone help please?

  31. Thanks! I love your tutorial I followed all your steps I just can't figure out how to add affiliate links to my website.

  32. i downloaded the slider and uploaded the photos and they are saved as well but when i go to the theme settings and change the demo to new slider after saving it always shows demo slider again and again. please help

  33. Very injustice . Only 314 likes . We have watched this video ,gained knowledge and in last we left this page without hitting like subscirbes buttion . Its very very selfish attitude . If I had option to hit 50,000 likes at once ,i would have done that . Stilling hitting a like from my side and subscribed already

Leave a Reply

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