How to Make a Website – WordPress Business Setup

Hey, everyone! It’s eMediaCoach here.
It’s very very easy to make a website using WordPress. I’m going to show
you how you can get this $3,000 website for virtually
nothing. The purpose of this tutorial is to help all of you out there who have
businesses want to attract more customers and need an awesome looking website to
do that but do not have the budget to pay thousands
of dollars to web designers. So we will show you how you can get all
of this. Creating this is not difficult at all. If you have ever used a word
editing software, you’ll be able to do this without any fuss. The web design here was done by the guys
at Site Origin. We’re going to help you implement
this, as well as other essential website settings and plugins and configuration items on
your behalf, so that you can get off the ground and
running as quickly as possible. I’ll take you through some of its
features. A lovely drop-down menu that you see here. A lovely image slider that automatically
changes every X number of seconds. You can customize
that. A nice home page here that you can customize
and make it look any way you want. Any items you see here are completely
customizable. You can add, edit, removed, move around.
Basically, close your eyes, picture what you want your homepage to look like, and you will be able to do that. A lovely dynamic Google Map where your customers can zoom
in, zoom out, and find your location of
business very easily. And also, we’ll show you how to integrate
social media icons onto your site as well. We will
pre-install a contact form, so that will already be
ready by the time you receive this website. All
you need to do is update your e-mail address, and then customers can come in here, fill
out the details, and you’ll receive those details in your e-mail inbox, and then reply directly to them. Check
out this awesome image gallery here. It opens up into a beautiful box feature that
you see. Users can scroll through all of your images, and this is also another item that is
pre-configured so you don’t really have to do much except add your images. As you can
see, this is a beautiful effect. It’s a lovely feature and you can expect
to pay thousands of dollars for something of this quality outside in the real world. The design is responsive, which means it
works flawlessly on a mobile. The image slider works perfectly. And as I
scroll down, every other element renders absolutely
flawlessly on the on the mobile device. Not to forget for
users that are on the go, the Google Map can still be used
effectively. I can zoom in, zoom out. Move it around, and therefore your customers will be
able to find your location of business very very
easily. Why don’t you grab your own phone, go to EMC vantage demo dot com, and you can see it how works on your
mobile phone. Everything you see there on your mobile is included with the website design,
therefore you can see that we’re going to be creating an awesome
website here. Everything you see here is managed through WordPress, the WordPress content
management system or CMS. Some of the most well-known names
around the world use WordPress for managing their web sites.
And you’re going to get this pre-installed as well. All the features you see are free
once you have your domain and hosting sorted. And as I’ve said, our goal is to show you
how you can get this $3,000 website where you can expect to
pay that much in the real world for virtually nothing. Word Press is one the world’s most popular and easy to use content management
systems. Now that’s a big term. But don’t worry,
it’s a very very simple thing to use. If you’ve ever used Microsoft Word or
any word-editing software, you will be able to use WordPress. Small
and large businesses around the world rely on Word Press to manage their entire sites. Here is
some clear examples – New York Times, CNN, Forbes, Reuters. Looking down this list, there are some big
names in here, and they all rely on WordPress. Best of all, it’s actually a free
platform. That doesn’t mean it’s no good. It is
incredible. Things you can do and the things that
you can customize using WordPress, and at the same time, very very easy to
use. That’s what most of this tutorial is dedicated for. Once we set up and configure your
website, the rest is dedicated to you customizing your site and adding
the content and pages that you want shown. Let’s begin. Let me give you an overview of what
we’re going to do. First, I’m going to show you how to get your dot com domain name and web hosting. This will cost you about $5 per month, and are the only two
essential that you need for running a website. As you probably already know, a dot-com
domain is where your website lives, and web hosting is where your website’s
files are stored. Without web hosting, when somebody goes
to your dot com domain, it would simply just load up a blank
page. So therefore, these are the only two things that are absolutely essential, and also you how you can get that for
literally a few dollars a month. It’s not difficult at all. Secondly,
we will set up and configure your website design, and other essential settings. We will do this for you for free. By doing this for you, it allows you to
get up and running as quickly as possible. And thirdly, we’ll teach you how to
customize your entire website. And this will also be free. This page of our website contains just
about everything you need to know about our web design and setup offer to you. If you go to emedia coach
dot com forward slash web dash setup, you’ll see it
summarizes everything you need to know. Step 1. We will show you how to get your dot com
domain name and hosting. Step 2. All you need to do is complete this form. Step 3. You sit back and relax while we do the
hard work. My team will take their time to set up
and configure all your essential settings, as well as
the web design we showed you at the beginning of this video. And
expect to hear back from us within two to four days, often much sooner. So
let’s get straight into it. The first thing you need to do is get a
dot-com domain name and web hosting. I’ll show you the
easiest way to do that. Go to Host Gator dot com. Host Gator are one of the world’s biggest and most
reliable providers of domain names, as well as web hosting.
We use them ourselves for our emedia coach website, and so I
wouldn’t recommend anything that I don’t actually use myself. As you can see, they’re currently hosting
over 9 million domains. They have great support. They’ve got a 45-day
money back guarantee no questions asked if for whatever
reason you do not want to continue with them. And they’ve got a great live chat system
here as well. If you’ve run into any issues, it’s a 24 by
7 live chat technical support. Or you can
give them a call, or send them an e-mail. So 24/7 support, and 45-day money back guarantee, and
everything for about $5 a month. Let’s have a look at their web hosting
plans. They’ve got three to choose from – Hatchling, Baby,
and Business. The Business is not something you’ll
need. The Hatchling and Baby, the main difference is
the Hatchling allows a single domain to be hosted with them,
so a single dot-com domain name. Whereas a
baby plan allows unlimited domains to be hosted
with the same account. Most people have just one business, and
therefore will just have one dot-com domain. And likely, you’ll fall under that category,
so it’s sufficient for you to acquire the hatchling plan. The good
news is that is also the cheapest plan available. Everything else is pretty much the same.
Go ahead and click the “Order Now” button. You want to make sure the “Register a new domain tab” is clicked. Then, take a second to think about what
you want your dot com domain to be. Enter it into this box here. It will do a
search to check if that dot com is available. If
it is, you will be the new owner of that domain.
So let’s try it jim’s physio dot com. Now I know this
domain isn’t available because we’ve used it for something else.
Therefore, it will come up with this notification, “Please enter another choice. Jim’s physio dot com is unavailable.” So
therefore, you might have to go back and forth a little bit until you find a domain name that you
would like to own and that is available. For the purposes of this demo we’re going to register a domain called EMC Vantage demo. Now, you would obviously have something that
relates to the name of your business dot com. You’ll see a notification,
“Congratulations! the domain is available and has
been added to your cart.” Then once you scroll down, ensure that the correct package type is
selected. We are going to be purchasing a Hatchling plan, which is the cheapest
plan. Select a billing cycle that you’re
comfortable with. I want you to skip all of this information
and just scroll down to the hosting add-on section. De-select any of the hosting add-ons
that are already selected. The reason is these are not essential. They’re great if you
want them, but they’re definitely not required. Now,
scroll down a little and have a look at your total due. Host
Gator will apply a standard 20% discount off your
order, and you can see that here. This total is made up of your hosting
cost, plus your domain registration cost. And
this domain registration here is for an entire year, not per month. Now
go to the coupon code box. Delete whatever is in that box. And if
you’ve read the page on our website, you’ll notice that we require you to use
one of two coupons for us to be able to set up and
configure your website and the web design for you on your
behalf. Use the coupon, “MYHOSTMOST,” M-Y-H-O-S-T-M-O-S-T. Then, click the “Validate” button. Immediately, you’ll see that the total due
has changed and is now less than what it was just a
second ago. That’s because this coupon actually gives
you a bigger discount than Host Gator’s default 20% off. It will always give you a bigger
discount to the default discount. As an alternative, there’s also another
coupon that you can use if you want to get the first month of
hosting for just one cent. So if you scroll up, select one month
from the billing cycle. Go back down. It’s currently about $20. Enter the coupon code 1CENTGENIUS, 1 C-E-N-T G-E-N-I-U-S, and click “Validate”. You’LL notice that the first month of
hosting is just $0.01. So therefore, there are
two coupon codes you can choose from, either MYHOSTMOST or 1CENTGENIUS. MYHOSTMOST gives you 25%
ofF your entire order, whereas 1CENTGENIUS gives you your first month of hosting
for $0.01. To have our team professionally set up
and configure your website, you need to use
one of those two coupon codes. The reason is from time to time we
receive a small referral commission from Host Gator, and essentially this helps us cover our
time and labor costs that goes into setting up your website.
Without that, we wouldn’t be able to do this for you, so that’s why it’s essential that you
use one of those two coupon codes, and in return you do get a bigger
discount. And we really appreciate your support. If you are more comfortable paying on a
month-to-month basis, then go ahead and use this coupon code
you see here. That’s absolutely fine with us. For this
order, I’m actually going to change it back to
one year. Go up, and select a username and security
pin for your account. Now, enter your billing information. It’s
essential that all of this information is correct because you will receive an order
confirmation from Host Gator notifying you of your new account
details, as well as confirmation that your order was successful, and that you now own your new dot-com
domain, as well as the hosting that you require to be able to set everything up. I’m
going to blur my screen here as I put in my details. Once you’ve done that, scroll down. Double check your details. Tick the “I have read and agree”
checkbox, and then create account. Immediately after creating your account, you will receive this email from Host Gator confirming your order details. You will
see that it contains your new account details, as well as the dot-com domain that you
have registered, which you now own 100%. Go
to your e-mail inbox, open this e-mail, and keep it open. You
will need that for the next step. You’ve just completed Step 1 of what we require to be able
to set up your website for you. Now moving on to Step 2, you just need to
complete this quick order form, so that we’ve got all your details. First,
choose your design, and in this instance it is known as
Vantage. Enter your name and e-mail, and the domain name that you used to
register that will also be contained in your
confirmation e-mail from Host Gator. These two fields are optional – business name and business address.
Reason being, we can always add them in later on. But if you have them on hand, definitely
put them in. Then in this box here, all you need to do is copy and paste the
contents of your order confirmation from Host Gator, so that’s this e-mail. Just
copy, and paste in there. Hit this tick box, and then click “Okay”, so we can start on your
website. If you’ve entered all the required fields,
you’ll get this notification. By the way, this small print, it’s very simply just saying that you understand that your
website will look and function exactly like the demo website that we
showed you. And of course, you will have a 100
percent ownership. We will hand over all the logins and passwords upon completion, so it’s all really
straightforward. Once you’ve done that, Step 3 is to
just sit back, grab a beer, and relax because my team
will take the time to professionally set up and configure all the essential settings as well as
the web design on your behalf. It will be live as soon
as we deliver it to you. You just need to update your content, and
then you’re off and running. So sit back and relax. In about two to
four days, we will contact you via e-mail, and you’ll
have a brand new website up and running. This is what you’ll received from us when
we’re done with setting up and configuring your website
for you. There are a number of things that we’ve
placed on this site as a placeholder. And as a scroll through, you’ll see that we’ve added a few items
in the menu here. We’ve added the image slider, and a couple the images just as an
example, as a placeholder. We’ve slotted in a few panels just here, and a few other elements that you’ll see including a map. Now, all of this is absolutely customizable by
you. You can choose to include or exclude anyone or two or any of these elements
that you see here. You can delete them, or you can add new
elements. Essentially, if you close your eyes and come up with what you want your homepage to
look like, you will be able to do that because everything you see here is
customizable. They’re all made up of different
elements on your home page, and I’m going to show you exactly how to
customize all of those elements. And guys, that’s what the rest of this tutorial is all about. It’s about me
teaching you how to customize all the various bits
and pieces of your website. First things first, when we deliver your
website, we will give you three important pieces
of information. I’ll just bring that across here. You’ll receive a URL and a username and password. This is for
logging into your WordPress admin dashboard. Now your WordPress admin
dashboard is where you’ll go to customize your entire website. It’s
the area that you’ll be using most, and so keep these details handy. First,
copy and paste this URL into your web browser. That’s the sign-in page here. Enter the credentials that we send you. And that’s how you log into your
WordPress admin dashboard. Your first course of business is to change the
password. Go to “Users”. “All Users”. Click on “Admin”. Scroll down. Enter a new password in
here. Then click “Update Profile”. While you’re at it, also update this contact e-mail you see here with your own e-mail address, your own personal
e-mail address. Then “Update”. This replaces the password that we gave you initially. So
it’s really essential that you keep this information on hand because anytime you
want to make changes to your website, you will need to log in from this page
here. Secondly, go to “Settings” and “General”. You’ll notice there is a
default “Site Title” and “Tagline”. In the “Site Title”, enter your
business name. Delete whatever’s in the “Tagline” section. Also,
update this e-mail address here with your e-mail address. And, scroll down and click “Save Changes”. Once you’ve done that, go here and enter “WWW dot”, the same in the
next field, then go down and “Save Changes”. This will actually
prompt you to log in again. Let’s go ahead and replace this sample logo you see here. Now
if you’ve already got a business logo ready, it’ll be a really quick process. If
you don’t, that’s okay. I’m going to show you how
you can get one made quickly and also cheaply. Otherwise, where
you can go and make one yourself. Back into your Dashboard, go to “Appearance, Theme Settings”. and under the “Logo” tab, click on “Choose Image”.
This will prompt you to choose an image from your media gallery. Go to the “Upload Files” section. Here you can select the file from your PC,
or you can just drag-and-drop if you’ve got
the window open on your computer like you see here. So say for example, that’s our new logo. You can just
drag-and-drop that in there. It will upload the image, and then you can “Set Logo” using that button
there. Then, “Save Settings”. Now, let’s refresh our website. There you go, as easy as that. If you haven’t already got a logo ready, I’m going to let you in on a
secret of mine where I get a lot of my design done. Go to a site called fiverr dot com, F-I-V-E double-R dot com. This is an online
marketplace where you can buy basically anything, all kinds of services. Search
for “Logo Design”. You’ll see there are no
shortage of people offering logo design services. You’ll be
able to look at their feedback. So let’s take a couple of them as an example.
You could look at their feedback, their past work. Scroll through and find a designer that you like. When you
have found somebody, you can join, become a member of this
site, then you’ll be able to purchase one of
these services for $5. Actually, now it’s about $5.50 including a $0.50 processing fee. Really, for $5, you really get
some amazing designers. So feel free to have a look around. It can be hit and miss sometimes, but you
will generally find somebody who’s pretty good at what they
do. Secondly, my other tip is if you don’t have the
time or money to spend, simply go to a website
called Online Logo Maker dot com. Scroll down. Start the online logo maker. I’ll just
get rid of this. Delete. We can add a symbol. Obviously, you can choose something that perhaps relates to your business. I’ll
stick with that, and you can add some text, and you can also resize. In this drop down here, you can change font, and also change colour. When you’re happy with what you’ve
produced, ensure the background color is set to white, then
go across and download logo. That’s it. Now, that file is saved onto your PC. If you go back into your dashboard and same
as before, go to “Choose Image” over here. “Upload
Files”, and “Select” the files, which we just saved,
and “Save Settings”. Let’s see how that’s turned out. There we are. You may not be completely happy with it
the first time. You can always go back in, change things
around, change colors, change sizing, fonts, etcetera, etcetera, until you get something that looks nice.
For about five minutes of work, it really is a good solution if you
don’t already have a logo ready. So I hope that’s been useful for you. Now we get to the fun part guys, this “Image Slider”. You can now
start putting in your own images into that slider. And once again, just
like with a lot of other things in this video, all
the settings and configuration has pretty much already been done. So
there’s really not too much for you to do except adding your own images. Going back into the WordPress dashboard, go to “Meta Slider”, and click on “Meta Slider”. You’ll see there are a number of settings here. To be
honest, you don’t really need to touch any of them because everything has been
configured for you. The only thing you may want to change is the “Slide Delay”. This number here is
the number of milliseconds between each slide, so that there
is seven seconds. You can change that, and then click “Save”. Another thing you may want to change is the height of each slide … sorry, the height of each
image. So currently, that is at 400 pixels. If I
change that to 600, and “Save”, I’ll show you what it
looks like. There you go. Similarly, if I change it to just 250, There you are there. So it’s all about finding the right
balance. I like to keep it around 400. Now, once you’ve got your images ready, all you
need to do is delete the ones you see here. Then, go to “Add Slide”. “Upload files”. Now, go to the area on your PC where your
images are stored. So say these are the ones we want to include
in our “Image Slider”, you can highlight all of them like that, and click
“Open”. That will actually start uploading all of your images to image gallery …
sorry, our image library, which we can later edit, or delete,
or do anything else. So everything you do
here is not locked in. Just so you know, it’s completely
customizable and manageable down the track as well. So let’s just
wait until all our images are uploaded. There we are. Once that’s done, ensure the images
you want are checked off like you see here, and
then click “Add to Slider”. Now that they’re there, you can actually rearrange them to
appear in any order you wish just by dragging and dropping. Then when you’re done, click “Save”. Now, let’s go back and see what our site looks like. There we are. If you’ve changed the length of time between each
slide, that will take effect. There we are. I think that’s absolutely perfect. And as
you saw, there really was nothing much for you to do except uploading your images and making a small
number of customizations as far as the
length of the slide and the image height goes because
everything else was pre-configured for you. So that’s all there is for adding slider
images to your website. If you want to remove any, just go back
into that section there and hit the “Delete” button. Simple as that.
I hope that’s been easy. Now, it’s come time for me to teach you how you can edit all
of these elements you see on the home page here.
Like I promised you earlier, you can change, remove, or add elements wherever you wish. Essentially,
you should be able to close your eyes think about how you want your home page
to look, and you will be able to achieve that. So
what I’m going to do now is teach you the groundwork required for
you to be able to do that. I think the best way for me to do this
is to literally delete everything you see here
and start fresh, so that you can see how I added all of these.
Therefore, giving you the tools and knowledge required to do the same in
any way you please. Back into my dashboard, go to “Appearance” and “Home Page”. This tool here is known as “Page Builder”. It is an absolutely awesome tool. It’s one of the
best tools I’ve actually come across. It allows you to customize any page to make it look exactly the way you want
it to look. These three elements here, “Circle
Icons” correspond to this Circle Icon panels
over here. The “Visual Editor” here, “We are the Experts” is just that bit in there. Now this “Visual Editor” is an image, and these are
a few customer testimonials right there. And these two are “Open Hours” and a “Google Map”. So
what I’m going to do now, I’m going to delete all of this. To
delete, just hover over a row and hit the “Delete” button. If you want it to delete any elements by themselves, you can
hit the “Delete” button you see there, and will delete that particular element. Okay. I’ll save that, and refresh. As you can see, I’m starting from a blank slate now. To
add a new row, click that there. Choose the number of
columns you want, and you can use this to adjust the width of each column. So you
can customize them, change the width, and be as precise as you
like. For the first one, I’m going to add three columns. Then, click the “Insert” button. What I’m going to do
is put the three circle panels in here. To do that, click on one of the boxes, and hit “Add Widget”. Go to the “Circle Icon” widget you see here, and you’ll see that
up here. Similarly, click on the second one. “Add Widget”. “Circle icon”, and the same for the last. I’ll go through this bit by bit, so you know exactly what
changes we’re making. There you are. So now let’s go and customize all that.
Click the “Edit” button you see here. Now, let’s give the
first panel a title. It could be “Our Products” or “Our Services”, whatever relates to your
business. In this drop-down here, you’ll be
able to select an icon. This icon will appear in that
dark circle that he saw earlier, so feel free to use a bit of trial and
error. Let’s choose a rocket icon. Now, set the icon size to large. And for “More Text”, we will come back and
update this a little bit later when we have all the pages on our
website ready. Essentially, this will be a link to another page on
your site together with the “More URL”, which will take you to that page. For now,
let’s click “Done”. There you go. As you can see, we added the rocket icon. we changed the
icon size to large from small. We added the title and description. Later on, we’ll come back
and add a link just over here, so that this particular
tile links through to another page on our website. Now, let’s do the same for the second and
third There you go. The next thing I’ll do is add a section
under these panels with some text in there. So back into the
page builder section, I want to add another row. This time I just want a single column insert. Let’s add a widget called “Visual Editor”, and you’ll
notice I use this “Visual Editor” quite a bit. It’s
really flexible, and it’s also pre-installed, which means you don’t need
to install anything. It’s all there ready for you to use. So
click that. Hit the “Edit” button. Now, let’s give that section a title. And now, I’m just going to copy across
some dummy text that I have on my other screen. This area here just
acts as a word editor. If you’ve ever use Microsoft
Word, this is exactly the same. Once you’ve
done that … Now, the cool thing is I can actually change the order in
which they appear just by hitting that … sorry, pressing down
on that button and dragging it across. By doing that, I can change the location of any of the
elements on the page as you see there. Now, say I wanted to add a background color to this element here. To do that, hover above this icon here, and click “Edit Row”. Now, we go to “Theme”, you’ll see an area for
background color. You can pick any background color from
the palette over here. I’ll give it a light gray background. There we are. Next, I’ll add back the image and the
testimonials just under that section here. So let’s
add a new row, this time with two columns. Once again,
I’ll add the visual editor in both. Now in here, I want to add an image. Click “Add Media”, and “Upload Files”. Of course, if an image is already uploaded, you can
select that image from your media library. Once selected, ensure the “Link To” is none, and the “Size” is “Full-Size”, or alternatively “Large” if your original image is
extremely large itself. And click “Done”. Okay. Now, I want to add the testimonials. Once again, this “Visual
Editor” is just like a word editing software. You
can do anything you like with it. So we’ll give it a title, and testimonials can be done using
this little “block quote” here. What I’m going to do is just copy
and paste some testimonials from the other screen
that I have here. And there we are. Last but not the least, let’s add a “Google Map” and some “Open Hours” just under here. Now this one, I want the map to be quite large. So let’s set it to say 30/70. If that’s not right, we can always come
back and rearrange. Now here, we want to add a dynamic “Google Map”. To do that, go to “Google Maps”. Put in your exact business address. Now, click on that icon here, and click “Share” or “Embed Map”. Embed. From the drop-down, select a custom size, and let’s try 800 by 400. Go here. Copy that entire code. Now in this “Visual Editor”, ensure you go to the “Text Tab”. The
“Text Tab” is used for any HTML or code that you would like to
enter. If you enter in the “Visual Tab”, that code will not work. So we want to enter that into our “Text
Tab”. So paste that code in there. Let’s give
that a title, and click “Done”. There we go. As you can see, the map is probably a bit too tall, so we can
easily go back in and change the dimensions. Spend so on and so forth until you get it right. Now, let’s
give this area a little background color as well. I’m going to give it the same color that I gave the other row. So let me
just check what that was. I think I’ll just make it a little bit lighter
as well. Okay. And there we are. So that’s really how easy it is. As you can see, we can add in any
elements we want in any position we want, and rearrange, and adjust the dimensions of
this box to precisely the size that you would
like it to be. So feel free to brainstorm and come up with how you
want your home page to look, and what information you would like to
present. And go ahead and add each one of those elements in
there. Now, I’ll show you how you can add, edit, and delete
pages from your website. I won’t be showing you
how to use the content editor just yet. Just adding and deleting pages, and then
I’ll show you how to set up this menue area here, so that you can
put the pages that you want up there in the order that you want. And also, how
to create a beautiful looking drop-down menu. So go back into your dashboard. Go down to
“Pages”, and click “All Pages”. To delete pages, it’s
very simple. Just hover over the page you want to
delete, and click the “Trash” button. So let’s get rid of the pages we do not want. I
would suggest you leave “Home” in there. Don’t mess with that, and also leave the
“Contact Us” in there as well. Whenever you delete pages, always remember to go back into this
“Trash” can here, and then “Select All” and “Delete
Permanently”. To edit a page, simply hover over and click the
“Edit” button. I will show you how to use this “Content Editor”
here a little later. And to add new pages, just click the “Add New” button and you
can add an unlimited number of pages on your website. So I’ll go ahead now, and add a few pages relating to our
demo site, which is a flooring company. When you’ve entered a title, just click
“Publish”. You’ll see that the page gets assigned its own URL, which is “yourwebsite dot com forward
slash the title of the page”. You can edit that if you need, and also
you can come back and change the title at any time. Here is an example of how to change the
title or the URL of the page. So let’s take this one for example. Click
“Edit”. Say I want to change “Image Gallery” to just “Gallery”. As you can see, the URL hasn’t actually changed because
WordPress knows that just because you changed the title of a page, doesn’t mean that you will change the
URL because they may be other things linking to this page. So to change the URL, just click this
“Edit” button, and change that manually. And as you can see, this page takes on the new URL. Carpet, Tiles, and Outdoor. Now, say under each one of those items, so for us
floorboards, carpet, tiles, and outdoor, we have another hierarchy of pages. So for floorboards we have solid pine
floorboards, and laminate flooring, for example. We’ll
also add a few types of carpet. And I’ll add in a couple of types of tiles as well. So that should do us for now. Here are all the pages I’ve just created. So obviously, you would need to plan out how you would like the
hierarchy of your website to be. So top-level items, and then second level
items. So for me, the top-level items are carpet, floorboards, tiles, and outdoor. The second level items for example, the second
level items under carpet are Plush Pile, Twist Pile, Cut Pile, and Textured Pile. So that’s just an
example to work your head around, and it’s as easy as that to add new
pages to your website. So once you’ve planned your website
hierarchy, go ahead and add as many pages as you wish. After adding all the pages, you’ll notice
that the menu area looks very empty. So I’m going to show you
something really cool. I’m going to show you how you can
customize this menu area, and also add a beautiful drop down menu. In your dashboard, go to “Appearance” and “Menus”. You’ll see that there is a
“Main Menu” assigned. All you need to do is tick
off the items you want to appear in the menu. And then, click “Add to Menu”. Now,
everything else has been configured beforehand, so you don’t need to worry.
I’ll show you what that looks like. You’ll see we’ve added everything, but currently it looks like a bit of a mess.
What you need to do is order the menu items in the order in which you want to appear
by dragging and dropping. The first thing I’m going to do is locate my first level pages, and they are Floorboards. So I’ll put that after home. Carpet, Tiles, and Outdoor. Okay. Now, I had pages that we’re going to fall under each one of these four. And these are
going to be our first level drop-down menu items. So under
Floorboards, I’ll put Solid Pine Floorboards, Laminate
Flooring. Under carpet, I’ll put Twist Pile, Textured Pile, Cut Pile, and Plush Pile. You’ll see what I’m doing here. For
second-level items, you need to drag and drop such that they’re
indented and that will appear below the item above it. So I can even go for a third level menu. Say for example
under Textured Pile, I want to add Polyester. By doing that, it would come under Carpet. By making it indent, it would actually
come under Textured Pile. And say for example, Wool Blend. Okay. Now, let’s do Kitchen Tiles under Tiles, and Bathroom
Tiles. We’ll have Contact Us last. And that’s about it for now. Let’s “Save Menu” and see what that looks
like. There we go. So if I just scroll my mouse
over each one of these, and there you see the third level. And these
items were single-level items. That is looking absolutely fantastic. And as you can see, all it requires is
dragging and dropping the pages that you want in the order and in the hierarchy that
you want them in. Another cool thing I’m going to show you is in
this “Links” area here, you can actually add a link to any URL and put it in the menu. So for example,
that will appear here. Now, I can drag and drop that and put it
anywhere I want. If I click on that, it will take me to
that URL. To remove any items, click the drop-down and hit “Remove”. To change the label, just
change that “Navigation Label”. So as you can see, that was really simple, and
it made our website look a thousand times better. From a user’s
perspective, it’s extremely clean, and easy to
navigate. Once you know the structure of your website, you can
implement that structure and your customers will find it very
easy to navigate through your entire site. Let me quickly show you how you can
change the color of these menu items when you
hover over them. Go into your dashboard, and go to “Appearance” and “Custom CSS”. Now, open up a new browser window, and go to “color picker dot com”. Okay. First before you do anything, I’d like
you to copy and paste that there onto a notepad file
on your computer in case you want to revert back to the original color. When you’re ready, go to color picker. Here, you can choose any colour you wish. You’ll notice that every colour has a particular number attached to it, a
particular number or letter combination. It’s known as a Hex Code. When you’ve got the color you are after, just copy and paste in there after the hashtag. Then click “Update Custom CSS”. Refresh your site, and there you go. You’ve changed the color of your hover menu.
Feel free to use trial and error. Experiment because you can change that
as much as you like, but just make sure you do not touch
anything else on this page except these numerals
right here. Now, here is a quick intro on the “Content Editor”. You’ll need to know this, so you can go
in and edit each one of your pages. Most of this
will be self-explanatory, but I’ll go through it
nonetheless. So let’s go ahead and click “Edit” on this
page here. The “Text Tab” is used for entering any code or HTML. The “Visual Tab” works much like a word editor like Microsoft Word. So I can
put in some text, I can set that as a Heading. I’ll just copy and paste some dummy text I have ready here. That’s all normal paragraph text. You can bullet point
things. You can number list. You can also bold, italic, and also change color of any text you like by using that icon
there. There you are. And you can also hyperlink. Select the words or phrases that you
want to hyperlink, and click that icon there. By clicking this arrow, you can actually
hyperlink to any page on your website very very easily. Not only can you hyperlink within your web site, but you
can also hyperlink externally. So if I highlight that, and that checkbox means that the link will open in a new window, which
means the user stays on your website. Okay. Let’s check it out. There we are. And as you can see, that one opened in new tab. To remove a
hyperlink, click that icon over here. Last but not least, you can add images. Click on the “Add
Media” link. You can either select an image that’s already in your image library,
otherwise you can upload a new image, and select
one from your PC. Ensure that the “Link To” is none, and the size is sufficiently large. Then, click “Insert
into Page”. You can actually link images to anywhere on your website
as well by clicking on the image and selecting the hyperlink icon. So as you can see, the content editor is
actually extremely easy to use. If you’ve ever used Microsoft Word or
anything like that, it will be a piece of cake. The next thing I need to share with you is a bit of information about “Page
Templates” and what they are. There are three types of “Page Templates”; a
“Default” template, which has a sidebar; a “Full Width” template,
which means the page and content runs across the
whole screen; and a “Custom” template built with “Page
Builder”. Templates can be selected from this drop-down menu here within each page. So as you can see, there’s a default
template, which includes a sidebar. Currently, this is the
template used for this page. And that’s what it looks like. The
content is over here, and then we have sidebar content. And
this sidebar content is of course completely configurable. I’ll
show you that in a second. The second template is “Full Width”. Now if I refresh that, you’ll see the content runs across
the whole screen. The third, “Full Width without a Title”. This carpet should disappear because
that’s a title. There we go. And the last one, we can actually build a “Custom” template
using “Page Builder”. You will recall that earlier
on in this tutorial, we set up our home page using page
builder. We can actually use that tool to set up
every single page on our site if we like. And I’ll give you an example
that as well. But first, let’s select default template,
and I’m going to show you how to edit the sidebar. Go into “Appearance”, “Widgets”. You’ll see in the sidebar section, there is already some content. That corresponds with what you see here. So essentially, you can delete this right here. When you refresh your site, that will disappear and it will turn into a “Full Width” because
there is no sidebar. But now what you can do is add new widgets into the sidebar and
put any content you want. So scroll down. I
like to use the “Visual Editor”. Once again, it is just like a text editor. Very easy to
use. You can add content, add text, add images, etcetera, etcetera. Let’s see what that looks like. You can always go back in and edit what you see there. You can also add more widgets. Simply drag-and-drop another visual editor. And you’ll actually be able to choose which order you want things to appear. So if you
drag this and drop it above that there, it’ll save. Then when you
refresh, you’ll notice the information of that widget appears in that order. So you can go
ahead and edit the sidebar with anything you
want. You can actually add a “Google Map” in there as well. That’s a really good idea, and I’ll show
you how you can do that a bit later on. Essentially, anything you can add in the
content area here, you can also add into the sidebar. Now lets choose another page, Floorboards. For this section, let’s try using the “Page Builder” tool. I’ll add a new row. I’ll leave two columns. What I’ll do is I’ll put two little circle icons. The
two types of Floorboards I had were Solid Pine, and I can put a link to our page on Solid Pine floorboards a little later.
For now, click “Done”. And I can add Laminate. You’ll see that the two Circle icons appear here, but we’ve got
this this sidebar, which we need to get rid of. Simply select the “Full Width” page template. There we are. What I can also do is position the icon on the left. And I’ll select an icon for this one as well. Perfect. To add some space between the title and the icons, you can actually add another row, and drag that above there. So that will look a little nicer. Let’s add links to our Solid Pine and Laminate pages. So if I go to these pages, all I need is the URL, and I can go back in here and enter the details. Same thing for the Laminate page. There you are, and now the user will be able to click
through. Once they come to your home page, Floorboards, click through to Laminates, and you’ll have something about that
particular section right there. So that’s a breakdown of how to use the
“Page Builder” on any page. If you need more help with
“Page Builder”, go back and have a look at how we
actually set up our home page, and it’s exactly the same concept. Just
remember, if you’re using “Page Builder”, set the template to be a “Full Width” page, and then you’re good to go. So if you
have any doubts, go back and watch this section about
setting up the home page elements. And after that, you’ll be able to set up
any page on your site and make it look exactly the way you
want it to look. Quick note, just letting you know, I’ve
take the time to update a couple of the pages. So for
example, Carpet. I’ve set this one up using “Page
Builder”, and Floorboards. I’ve just put some plain
text in this one here. So don’t be alarmed if you see that the
pages are a little bit different than what we showed you just a few minutes ago. I want to show you how we can update our homepage tiles
that you see here, and link them to specific pages of our
website. In your dashboard, you’ll remember it’s in “Appearance” and “Home Page”. It’s
these Circle icons we want to edit. Let’s make this one Carpets. We can make a link text. And in the “More URL”, just go back and find out what the URL is, so that
there. Click this little checkbox, and done. We’ll do the same for the next
Circle icon. Let’s link this one to Floorboards. Similarly, I can go in, get the URL of the Floorboards
page, put it in there, and change the link text. You will see that has taken effect. So basically, a user can come through to
your site, click on to one of the tiles, and
they’ll be taken through to the respective page. Therefore, you can tell that the hierarchy and the user flow of
your site is fairly important. So please do take a
bit of time in planning your hierarchy. As you already know, you can come back
and edit these links, all these panels in any way you
want any time in the future. Another cool thing you can do is change
the color of the background of this icon. If you go into the Circle
icon widget, it’s this field here that you need to enter a hex
color. Basically, go to color picker dot com. You’ll see that as you scroll around, every color has a different code, a number and letter code attached to it.
That is known as a hex code. So if you just look for a color that you you are happy with, copy that code. Place a hashtag, and then paste that code in there. Press “Done”, and “Save”. Let’s see what that has done to our
icon. As you can see, that changed the color. So you can change the color of this to any
color that you want really. Use trial and error. Maybe match it up with your menu, and
actually that’s what I’m going to do. I know my hex code for the menu items
is that right there. So I’ll save that. I’m pretty happy with that. If you want to remove it, just go back and delete, and it will return back to the original. Now, I’ll show you how you can add this Contact Form you see here anywhere on
your website. And also, let’s configure it, so that when a
customer enters their details, that form will be sent directly to your
e-mail, and you’ll be able to reply back to the customer directly. If you go
to dashboard, and go to “BWS Plugins”. Click on “Contact
Form”. The beauty of this is everything is already configured. We
did this when we took the time to set up your website for you. But, all you need to do now is update this
field here with your own e-mail address, your own
personal e-mail address because that is where the form will be
delivered to. Here, you can edit the text that the customer sees when they submit
the form, or you can leave it as default. Click “Save Changes”. There it is. That text there corresponds with the text over here. You can also edit the text that appears over here. If you go into “Pages”, “All Pages”, and find the “Contact Us” page, you’ll notice
this page is set up using “Page Builder”. So click “Edit” on this panel here, and you’ll see the text. So you can update that as you need. Also, to place that form anywhere on your
website, all you need to do is copy and paste this little tag you see over here. It’s known as a
short code. So I’ll show you how that works. Let’s go to
any other page on our website just as an example. Now, if I paste that tag in here and “Save”, you’ll see that the
form appears on that page as well. So essentially, you can make this form
appear anywhere on your website. You can also put it in the sidebar if you
like by going to “Appearance”, “Widgets”, and pasting the tag in there. There you go. When we deliver this website to you, you would have noticed that in
the “Contact Us” section, there is a map there. Now let’s get rid of this map and
add in a new map with your business address, so that
customers can find you easily. Open up a new tab, and go to “Google dot com forward slash maps”. Now enter in your exact business address in here. As an example,
I’m going to use this one. You’ll need to enter your exact business
address, of course with your street number as well. Once you’ve done that, go down and click on the “gear” icon, “Share” or
“Embed Map”. “Embed Map”, here you’ve got a number of preset sizes, or you can select a custom size, which is
what we’re going to do. Leave the width at 800 pixels. Change to height to say about 350. Now all you need to do is copy that code, go to the “Contact Us” page. Let’s get rid of this code you see here, and paste our new “Google Maps” code. Of
course, this is all done in the “Text Tab”. If it
was done in the “Visual Tab” and I enter code in there, it would simply
not render. So let me show you what I mean. If I
accidentally do that, click “Done”, “Update”. As you can see, that code didn’t render. But because we
did this one in the “Text Tab”, that one did. You can change the text. And that’s all there is to adding a Google Map
onto your website. If you want to change the size, you can easily do that. So let’s make
this one a little bit taller. So we’ll just go back here, change this
to 400 pixels tall. Once again, copy the code, go back in, and replace the code in there with a new
code. That’s a bit better. So as you can see, use trial and error until you get the
size of the map correct. And of course, you can always add
more text around it whenever you need to do that. So that’s
how easy it is to add a dynamic “Google Map” where
customers can zoom in, zoom out, and easily find your place of
business. And the beauty of it is this works on a mobile device as well. The contact form renders perfectly, and so does the map. So even a mobile device, a user can zoom in, out, and easily be
able to find you even when they’re on the go. Now I’m going to show you how you can add an awesome looking image
gallery on to your website. Most of the hard work is done. We’ve
configured and set up a few of the basic essentials. So all you
need to do now is add some images, and I’ll show you how to do
that. Go to “Pages”. Here you can add a new page where you’re image
gallery will sit on, or you can select an existing page. The first thing to do is ensure that the page you select is a “Full Width” page. Click “Update”. Now, go to the “Add Media” button. “Upload Files”. If your images have already been uploaded
and exist in the media library, you can select them. Otherwise, you’ll need to
upload your image gallery files. Now, I’ll select some images from my PC. I’ve got them ready here. You can click on
the first one, hold down “SHIFT”, and click on the last
one, and that will select all. Then hit “Open”. It will take a few
minutes to upload. Once they’re all uploaded, go to the “Create Gallery” link here. Ensure the images you want to create the gallery
with are ticked, and then go down and “Create a New Gallery”. Here you can define how many
images you want across in each column. I’m going to select five.
I’ve got 10 images in total, so five plus five will look good. Actually, I’ve got
11 here. I’ll get rid of one. Ensure in this drop-down, you select “Media File”, and then go down, and “Insert Gallery”. If you’re in the “Text
Tab”, that will show you some code. In the
“Visual Tab”, you’ll be able to see your images. Now, simply just click “Update” and that’s about it. Let’s view the page. That looks absolutely awesome. I’ve got five across. You can change that if you like, by the
way. That’s completely up to you. When I click
on an image, you’ll see that it opens up into a lightbox.
There you are. So a user can go through your entire
gallery, and scroll through your images. And this lightbox
here is already setup and configured on the website that we set up for you.
That’s why all you have to do was set up, and add your images to a
gallery. So it’s very, very simple we’ve made it
as easy as possible for you. To make changes, go back to the page, and click the “Pencil Button”. Here you’ll be able to change how many columns …
sorry, how many images you want in each column. So you can play around and depending on
how many images you have, you can select the best layout for you.
And there you have it, a beautiful looking image gallery that
took no effort. Now, I’ll show you how you can add some
social media icons onto your site very very easily. Obviously, first you
would need your social media pages set up. For example, your Facebook page, Google Plus page, maybe a
YouTube channel, etcetera, etcetera. But once you have that, you
can easily set up some icons, so that visitors can access your site, and then click onto your social media pages to see more
information. Social media is a great thing to build trust, and loyalty, and get your
customer base to speak and communicate with you. You’ll see there’s a “Social Media” widget
in the sidebar here. click on “Settings”. Here you can choose from
a number of different ways that your buttons will look. I quite like that one there. So, I’ll select that. Choose your size. You can adjust the order in which they
appear. Now, in these fields here, enter your social media URL’s. If there
are any of these you don’t have, that’s absolutely fine. Because any field here that you leave blank, the
icon will not appear. So you’ll see when I do that here. I’m
going to leave a couple of them blank. My Twitter username, eMediacoach. Facebook URL. So I’m only going to use these five here. Pinterest and the Feed URL, I’ll leave blank.
And you’ll see that those icons won’t show up. Hit “Save Changes”. Once that’s done, you can go to any sidebar or widget
area on your website, and add these social media
icons to that area. So we’ll add some on our
home page. I might just had the icons in this area
here. Click on the box, and “Add Widget”. Select the “Acurax Social Media” widget, and that’s
it. Save the homepage. Let’s see what that looks like. Cool. So we can actually get rid of this heading,
and we can change the size, and also align the icons left. To do that, go into the “Edit” button here. Remove the title. Change the “Icon Size”, and align left. It might make the icons a bit smaller, actually. There, that looks good. So as you can see, it’s a great way to
integrate social media onto your website. Very easy and straightforward. Congratulations on making it this far
because you just got yourself a $3,000
website for virtually nothing. And what’s more, you now know how to
control and manage your website all by yourself. We are in the process of
putting up more awesome videos to help your business. So don’t forget thumbs up, and subscribe to
our YouTube channel by clicking on the “Subscribe” button. If
you have any questions, comments, or suggestions, we would
appreciate it if you ask them in the comments below. The reason is I’m sure many have you have
the same questions, and it would be great to answer all of
you at one time. So don’t be afraid to ask any questions, and we will be more than happy to help.
Do you have any other suggestions on videos you want us to put out in the
future, let us know. And don’t forget, share this with your
friends if you think you know somebody that would find this helpful. Thanks very much for watching.

, , , , , , , ,

Post navigation

31 thoughts on “How to Make a Website – WordPress Business Setup

  1. I got my website built through eMediaCoach and it has been an awesome experience. Everything was delivered as per commitment. The best thing is this video is so detailed that you can customize your website yourself later whenever you want. I would definitely recommend to utilize eMediaCoach for building up your websites as you have nothing to loose here, will surely be keeping an eye on your upcoming videos.
    This is some honest feedback here that I am giving because I really appreciate the positive service that I have received.
    It would be great if you could do some video on the necessary WP plugins that could increase traffic on your website or some plugins for best SEO.

  2. Hello! I got a question for you, how can I do my website if my theme doesn't have a home page option? Can I do my homepage if I make a new post entrance? 聽Can I edit it so it looks like your home page? It'd be great if you can answer! Thanks!聽

  3. Hello how did you get your logo to go inside of 聽your menu and your menu at the top of the page, instead of white space at the top. @eMediaCoach聽

  4. Hello eMediaCoach team, can you pls help me with this query – how do I move the Vantage Headline widget to be placed above the Meta slider? I want the order to be (top – bottom order): Menu >> Vantage Headline widget >> Meta Slider >> Circle icons

  5. I absolutely love your videos. I've been following your tutorials and learnt so much to make an amazing and professionally looking website. The best part of it, is that I have no programming skills at all, and was able to do it on my own following your videos. Thank you so much for doing such a great job!!
    I got some questions while configuring my page, and I think they can be useful for more people doing the same thing:
    路 Is it possible to change font in page text and titles?
    路 Can I add an image to the page without having borders? When I upload an transparent background image, I can see a light grey border around it.
    路 Is it possible to add an URL to a circle icon without adding More Text? I want to have just a clickable circle icon with title.
    路 What widget do you use to have a slideshow within gallery?
    路 Acurax Social Media widget does not have instagram. Could you recommend any other with instagram?
    Thank you!

  6. It's my first time to build a website.I thought it's a hard mission, but with your help and your amazing tutorials it looks super professional website now.
    Thank you for everything , you made my life easier.

  7. Hello @eMediaCoach聽and thanks for this video! Why are the default pictures in the slider showing and not mine?

  8. Hi emedia,i want to ask, if i want develop website first without domain n hosting can or not..thats mean i develop website first using wordpress , domain n hosting i do it later can or not ?

  9. I had great service from these guys! What an awesome service they offer. Thanks so much E-Media Host!

  10. When I change my theme, it seems to lose all my data in my already made widgets. Is there a way to retain the info?

  11. Hey excuse me i just wanna say thanks and, ask you how can i change the color of the background of all the pages. thanks.

  12. How do you get to highlight the drop down bars ( it is becoming blue in colour). Is this available only for vantage theme?

  13. Great video, just wondering if it is still as useful in October 2017 or should I move to a different theme with drag and drop like Themify? Can I do that without losing my blogs etc. Thx

Leave a Reply

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