Hello
everyone. It's the of April and by popular request my goal today is to show all
of you how to make a WordPress website yourself from start to finish step by
step without skipping any steps. This is the amazing website I am going to show
you how to create.
Web
developers will easily charge you upwards of $ even $ for something like this
but just follow along with me and you will be able to do everything yourself
for next to nothing in the time it takes you to follow along with my tutorial.
So this is the full tutorial. So start getting excited. Let me show you exactly
what your new website will look like by the time you finish watching this
video.
Here are
some of its amazing features. Why don't you go to our demo site -
emcvantagedemo.com - to see for yourself? A beautiful drop down menu a nice
image slider that automatically rotates through your images a professional home
page that you can customize yourself to have any layout you wish. I will show
you how to create any layout and add any items that you want all by yourself.
If you can use a keyboard and mouse and can
drag and drop things that's how easy it will be. I'll also show you how to add
a dynamic Google Map if you have a physical place of business which is great
because it helps customers find you very
very easily.
I'll also
show you how to add social media to the site if you have your social media
pages set up. And one of my favorites I'll be showing you how to install a
beautiful image gallery. when a visitor clicks on your images it will display
in this lovely pop out effect and they will be able to click through to all
your images in your gallery.
This is actually one of my favorite features
and I'll show you how easy it is to install. It’s really no effort at
all. And also I'll show you how to add a contact form so that customers can
easily get in touch with you. The design I'm going to show you how to install
works perfectly on a mobile phone as
well. The design is responsive. As you can see everything renders absolutely
perfectly. And also the Google Map is dynamic and works perfectly on a mobile
as well which is important because customers that are on the go can easily find
you when they're on the way to your shop or whatever it is. You can zoom in
zoom out and it's really really user friendly.
WordPress is used by a number of big known notable
names around the world. So he's a quick list. Names include New York Times UPS
eBay and a number of other massive massive names around the world. And they all
rely on the WordPress platform that we are going to be using. We're going to be
using exactly the same platform all these guys are using. And you might think
are that might be complicated but it's not. It's really really simple.
WordPress is very user-friendly and it's really easy to manage. And that's why
a lot of big companies choose WordPress. And the best thing about it is that it
won't cost anything if you follow this tutorial. I’ll show you how to
do everything. And on that note I’ll just open up this slide here.
Here's an overview of what we're going to cover in this tutorial. Firstly I
will show you how to get online. So firstly we need to purchase our WWW dot
… dot-com domain name. So it can be anything you choose -
yourbusinessname.com or any other name.
I'll show
you how to get that for about $ per year and I'll show you where to get that as
well. The second thing is web hosting at $
per month hosting is just a fancy way of saying a computer where all of
your files are stored your website’s files are stored. So that anyone
who lands on your domain can access your web site /. Essentially without having
web hosting your domain would just be a blank page because all the files
that go behind your website all the text
images the design all have to be a stored on a web hosting server. And that's
why web hosting is essential. It's the only other essential thing other than a
domain that actually costs money. Now after that setting up your website number
three installing the website and web design.
If you go out and get quotes from web
developers I guarantee you that they will charge you $ $ even more than $ to
get a website developed. And even then the quality might not be that great. So
I urge you to do that if you really want to. This way This method that
I’ll show you will not cost you anything. It’ll be absolutely
nothing. Just follow along with what I do and you'll get what I demonstrated to
you at the beginning of the video. And number four set up and management
of your entire site. I’ll show
you how to set everything up all the different pieces of functionality all the
cool features therefore the rest to this tutorial is dedicated to showing you
how to set everything up and also manage everything. So just follow along with
what I do and you'll have this or awesome WordPress website that's used by major
major companies all around the world for next to nothing.
In a
nutshell first we need to get our domain and hosting. Secondly install the
website and the design. And thirdly set up and configure everything. So we'll
tick these off as we go along. Also you may notice that there is a link in the
description below and that link takes you through to our emediacoach.com
website. And what I’ve done is set up a page here where I'm going to
be putting down all the resources that you need during this tutorial. So
everything's easy for you to find. Everything is all in one place. Go ahead and
visit that link and refer back to that page anytime I told you to refer to this
website. And of course if I have any updates down the track I will add them. So
the first thing we need to do is get domain and hosting. I’ll show
you the quickest easiest and also most cost-effective way to get that. So if
you just go to the Hostbora link … Alternatively just go to your
address bar and just type in Hostbora.com. It’ll take you straight
there. I've been using Hostbora for my hosting for approximately nine years
myself for everything from my web sites to my blogs to my e-commerce stores.
I’ve been using these guys for a long long time and they’re
one of the most well-known and popular web hosting companies in the world.
They've got a hour seven days a week
live chat if you need any help with anything. They've got a -day money back
guarantee no questions asked. They’ve won a number of awards. Now you
can choose any other host if you choose to. That's absolutely fine but just
keep in mind that you may find it a little bit difficult to follow along with
the steps in this tutorial if you use a different host because some of them are
slightly different from Hostbora in the way that you install themes etcetera
etcetera. So essentially I'll be demonstrating these from my Hostbora account.
So ideally you'll be signing up to Hostbora. You can purchase your domain from
them as well. So click the Get Started button then lets choose a plan. You'll
see there are three plans on offer. The Business Plan we can rule out. They've
got features that are not necessary.
The
Hatchling and Baby are very similar with one key difference. The Hatchling Plan
allows you to host a single domain whereas a Baby Plan allows you to host an
unlimited number of domains. Now if this is your first website you'll only be
hosting a single domain. However if you have got or you plan on adding a number
of domains then the baby plan would be
good for you. Having said that you can always start with the Hatchling Plan and
upgrade down the track.
There is a
difference in price. Hatchling is a little bit cheaper so just decide what's
best for you. For me for this tutorial for this demonstration I'm going to
choose a Hatchling Plan. It is also the cheapest plan and has everything we
need so let's just click the Sign Up Now button. If you already own your domain
click this tab here and enter your domain in this field here. Alternatively I
assume most of you need to register a new domain. And therefore enter the
domain that you want to own in this field here. So it can be anything from your
business name to anything else. What this process will do is actually search to
see if the domain is available.
If it's not available it will notify you and
you’ll simply have to select another domain. Now just FYI a dot com
is my personal preference. You can also choose a dot net or info biz. It
doesn't matter. Everything works in exactly the same way as a dot com but it's
just my personal preference to use a dot com. Okay. So for this tutorial I will
register a domain called … … emcvantagedemo.com. And as you
can see the system searched through to see if that domain was available and it
was. And it has added it to the cart. Next go down and select a billing cycle
that you're comfortable with and it says here a % discount. But in just a
second I'm going to show you how to get an even bigger discount than the
default %. So stay with me. If you choose a one-month cycle there's a coupon
that you can use to get the first month hosting for just $.. As you can see the
longer you subscribe for upfront the cheaper it gets. So lets choose one month
cycle for now. If you just skip through that section and go to the additional
services area deselect anything that's selected in that section. The reason is
that these additional options are not essential. They are completely optional
and definitely not essential for you to
set up your website. Now in this Coupon Code area it will have a standard
default coupon code giving you the % off. So just keep in mind what you're
amount due so far is.
If you’ve selected a one-month term
enter this coupon instead DIRTYCENT -D-I-R-T-Y-C-E-N-T and then don't forget to
click the Validate button. And your amount will be updated which will give you
one month hosting your first month for $.. And of course your domain is
registration for one year. And when you purchase this you will be the owner the
sole owner of that domain and that $. is for one full year. Alternatively if
you want to subscribe for more than one month at a time so let's say months
which is what I normally do then go down. Amount due at the moment is $. Use
this coupon instead MYHOSTMOST M-Y-H-O-S-T-M-O-S-T Don't forget to validate and
your amount is $. So take advantage of these coupons that Hostbora provides
that will always give you a bigger discount than the standard % off. So go
ahead and take advantage of that. Now go back up and finish up entering
everything else. So select your username. Select a security pin and enter your
billing info. It's very important that you enter a correct e-mail address your
e-mail address. You will receive a confirmation e-mail welcoming you to the Hostbora
family and also providing you your new account details which you will need to
set up the WordPress platform. And I'll show you that in the next step. So
enter your personal e-mail address and you’ve got an option of
processing your payment with credit card or PayPal. Now I'm going to stop this
video and blur my screen while I enter in
all my personal payment details. So I suggest you pause this video and
resume when you've entered in all of your details here. Okay. That's done. I
have entered in all of my personal details my personal e-mail address and my
payment details. When you've done that go down. Just ensure any of these add-on
services are deselected unless you really want them but they're not essential.
Go down and confirm the amount due. You'll see an “I have read and
agree to the terms conditions”. Just check that and hit the Checkout
Now button. And as soon as you do that you'll be the sole owner of your domain.
You'll have hosting and that is all you will need to pay for. There is nothing
else after this point that will cost you any money whatsoever. These are the
only two essentials that are unavoidable. From time to time I receive small
referral credits from Hostbora. This helps me cover the costs of producing
these tutorials and allows me to bring them to you for free. So I thank
you
for your support in advance. Now
click the Checkout button and I'll show you the next step. The next thing you
will receive is a confirmation e-mail from Hostbora. You should receive this
within about five minutes of completing your purchase. It will contain
information such as your Control Panel link and I'll show you what to do with
that in the second. Your username password and the domain which you now own. So
the next step of this process is to log into what is known as your Control
Panel and install the WordPress platform that we've been talking all about. So
I’ll just open that link in a new tab and then enter the username and
password over here in the next screen. So I'll just copy and paste and then
login. Perfect. This is known as your Hostbora Control Panel and you
won’t really need to come to this too often. At the moment all we
need to do is go down find a section called Quick Install and click on that.
Then in the left hand column click on WordPress and continue. Your domain
should automatically appear in the dropdown box. If it doesn't just go down and
select it. Leave this field blank. Let's disable auto upgrades. Now in the
admin e-mail area enter your own personal e-mail address that you check
regularly. And in Admin User just put in admin then click the Install Now
button. This will install the WordPress platform onto your website. There we
go. WordPress is now successfully installed and it's the same platform that all
the other big names around the world use. You'll see here
that it gives you a URL for your admin area
and a username and password. This URL is very important. It will be
yourdomain/WP-admin. Now I'd like you to
write that down somewhere. Just keep note of it and keep note of your username.
I'm going to show you how to change a password because that he's not very
memorable. So the first thing I'll show you when you log in is how to change
your password. So anyway let's go to this link here. Now keep in mind after
installing Wordpress often it takes to minutes for it to activate and that only
happens the first time when you install. So if that link doesn't work for you
just come back in to minutes and try again. Eventually you should see a screen
that looks like that. This is known as your WordPress Administration Login.
You’ll need to come to this page and login anytime you want to make
additions or manage anything on your website. So now copy and paste your
username and password and click Login. Lovely. This is the WordPress Admin
Dashboard and you'll be using all the features here to manage your entire
website. And that's what the rest of this tutorial is dedicated to showing you
how to do. I'll be teaching everything you need to know about using this
WordPress Dashboard and tuning your site so it looks absolutely amazing. For
now let's change our password. So in the left hand side you'll see a section
for users. If you hover over that just click on All Users. Click on your
username. Now if you scroll down you'll see a section to enter your new
password. After you enter your password click on the Update Profile link and
that will have updated. So in a nutshell I want you to right down three things
on a piece of paper. I want you to write down your link there
yourdomain/wp-admin your username and your
new password. And it may be worth mentioning your website is already live and
functional. So if you go to your domain your website dot com you'll see that it
is a live and functional website. Obviously it doesn't look anything like we
want it to look but that doesn't matter. We've only just begun and now we've
installed the basics to get ourself started. So we're going really well. Let's
just come back to this Overview Page and let's tick off this. We've done that.
We've installed our WordPress Admin area. And the next thing we’ll do
is install the design. So we're making good progress. If you have any questions
please do not hesitate to contact me via the comments section. I'm more than
happy to help you out. Now back into our WordPress Admin dashboard. I'm going
to show you how to install the website design. It's going to be really easy. In
the comments below you'll see a link that takes you to an our emediacoach.com
website. So I'll just bring that along here. It's that page here. It's just a
snapshot of different resources that you’ll
need throughout this video to just keep
everything in one place. Click on that link and then go to the Vantage Theme
link here. Save that file somewhere you can easily access preferably your
desktop. Now back into your admin area. If you just go and hover over
Appearance click on Themes. In WordPress a design is known as a theme. So what
we want to do is add a new theme and we want to upload that file which we just
downloaded. So click Browse and go to that file wherever you saved that on your
computer and click Install Now. Great. So our theme has been installed. Now we
need to click the Activate link. Okay. That's done. We've installed the website
design. And currently that's what it looks like. We are one step closer to
where we want to be. Now that you've installed the theme you’ll just
need to make a couple of quick configuration changes. So I want you to go down
to Theme Settings and go to the Layout tab. In the Masthead Layout drop down
select Logo in Menu then click Save Changes. Okay. Now in the Navigation tab
you've got a few different options.
You
can go through them in your own time. Currently I have Search in Menu enabled.
I’ll show you what that is. It's this little search icon. I will
disable that just as a personal preference and that's all. I'll show you what
to do with a few of these other items a bit later in this tutorial. But for now
that's all we need to do. Okay. We're making really good progress. Next there
are some initial configuration changes that we need to make to your overall
website. You only need to do this once. Once it's set up you don't need to do
this again. So the first thing I'll ask you to do is go to Settings and click
on General. Here you can enter a Site Title probably your business name and a
tagline which I normally leave blank. Go down and click Save Changes. Next
you'll notice that when you go to your domain it does not have a WWW in front
of it. As a personal preference I just like showing the WWW. So to do that just
click here enter WWW dot and the same thing in this field then click Save
Changes. This will actually prompt you to log in again. But you'll notice now
if you go to your website it stays there. Okay. Next go to Posts. When you
installed the WordPress platform it automatically installs a default post
called Hello World. So let's trash that then go into the trash can and delete
permanently. And do the same thing in Pages. There is a default page that is
loaded when you installed WordPress. Cool. Now go into Plugins and click on
Install Plugins. A plugin is essentially an add-on to your WordPress website.
So think of WordPress as a base. You can add a number of different features
onto WordPress and you can actually achieve a lot of cool things. An example of
that is a photo gallery or an image gallery. There is a plugin to add a
beautiful image gallery. Another example is a Contact Form. There's a plugin
available to add a contact form to your website. So a plugin is essentially an
add-on and there's thousands of them out there. At the moment WordPress
installs a couple of them by default which we don't really need. So if these
are installed when you install WordPress just follow what I’ll do
here. So Jetpack just check that. MOJO check that and Super Cache. Go down to
this drop down menu and click Deactivate and Apply. After thats deactivated
check them again and let’s delete. Yes delete these files. Good
stuff. And now one of the last things we need to do as far as configuration
under Settings you'll see an area called Permalinks. So click on that. At the
moment when you make a post it takes on this really long non-user friendly URL.
So let's change that. Choose Post name as your Permalink setting and then click
Save Changes. And that's all as far as initial configuration goes. So this is
what your site looks like so far. Next let's add a logo into the top left over
here. So if you’ve already got a logo ready just go to Appearance Theme
Settings. In the Logo tab you can choose your image and upload them from your
computer. And then they’ll get uploaded into what's known as your
Media Library and you'll be able to click this Set Logo button and
you’ll have your own logo and it will appear in this section here.
However if you do not have a logo ready to go I'll show you a really cool place
I use to create a logo quickly and easily myself. Go to onlinelogomaker.com. Go
to the Start Online Logo Maker link. Just delete whatever's on that screen
initially. And here you can add a symbol from a number of different categories
and you can also add some text. Let's all go ahead and add a symbol. You can
resize by clicking on the corner and dragging. You can change the color through
this drop down here. You can add text. You can also change the font and color
of the text. My background is dark. So that's why I'm choosing a light color so
that it contrasts. Cool. That looks pretty good. When you're happy with your
logo just go to the Download Logo link here and click OK. And you can save that
on your computer. Now that that's done back in this Appearance Logo tab let's
go to our Media Library and select the logo we just created. You can see the
logo gets uploaded to the Media Library and then click on the Set Logo link and
then Save Settings. So now if I refresh the site there you go. It's as easy as
that to create or add a logo to your website. 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. Go to a site called fiverr.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 $. But really for $ 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. Now
it's time to take advantage of another awesome feature of this website and that
is configuring this slider area that you see here this image slider. So the
first thing you need to do is click on the link in the description below. It
will take you to this page on our emediacoach.com website and the thing you
need to download now is the Meta Slider Plugin. So click on that. Download it
to your PC then go back into your Dashboard. Go to Plugins and Add New. We want
to upload a plugin. So let's browse and find that Meta Slider Plugin that file
that we just downloaded. It's that when there ML slider. Open and install now
and that's it. You now have to activate to plug in and there you go. So the
next up is you'll see the Meta
Slider
tab appear in the left-hand side column. So click on that. Let's create our
first slideshow. Okay. So let's add our slides. Once again you can upload files
from your computer. So I've got my images stored somewhere here. What you can
do is actually just Select All or hold down SHIFT select the first hold down
SHIFT select the last and then open. What that will do is upload all of the
images you selected into your Media Library. Depending on how big the images
are
this can take some time. Great. Now
click the Add to Slider button and you'll see them all appear. So now it will
appear in the order they are listed in here. But if you want to change the
order they appear in simply just drag and drop like I'm doing here. So you can
see how easy it is to configure the slider. Actually a lot of features in
WordPress are drag-and-drop and it's one of the reasons WordPress is very very
easy to use. You'll you’ll see more of that a bit later. So when you
done rearranging you can also delete by clicking on the Delete icon there. Now
in the right-hand side column I recommend a width of . Height it's completely
up to you. I usually use something between and . So I'll go with for now and
the other thing you’ll need to do is in the Theme drop down select
Vantage (Flex). Okay. Let's save for now. And of course you can change the
height to whatever you think is best. Another setting that you will find useful
is this thing called Slide Delay. Essentially that is the length of time each
slide appears for before the next. So this number here is in milliseconds. So
that there is three seconds. You can change that to whatever you want. So say I
want eight seconds between each slide. And everything else you can go through
in your own time. But when you're done doing that click Save. Now if you
refresh your site it won't take effect. It shouldn't take effect because
there's one more thing we need to do and that is go to Appearance and Theme
Settings. Now go to the yep the Home tab. And in the Homepage slider area
select the new slider and then save settings. So now it should take effect.
That is great. That looks absolutely terrific. And after each eight seconds the
new slide will appear. Of course if you want to change any of the settings
just
go back into the Meta Slider and go
ahead and make the changes. And that will immediately take effect. Perfect. So
that's how to install and configure your image slider on your website. If you
have any questions about that please do ask me in the comments below. The next
thing we will be doing is starting to set up our Homepage. Now let's go ahead
and setup our homepage area. I'm going to be giving you all of the information
and tools and knowledge you need to be able to set up this homepage in any way
you want. What I show you will be a demonstration but I'll give you the tools
and knowledge for you to set it up in any kind of layout that you wish and
that’s suitable for your business website. So if I go back into the
Admin area go under Appearance and Homepage you will see it tells me to install
something called Page Builder but don't click on that button. Instead of doing
that I want you to install the version that is on our eMedia Coach website. The
reason is you may not be able to follow along properly if the version has been
changed. So therefore if you install this version that I show you here
everything
will be exactly the same. So
all you need to do is go to that link. It should be in the comments below.
Download the Page Builder plugin. This plugin was made by the guys at
siteorigin.com. Okay. So install … Download that initially then go to
Plugins and Add New. Upload plugin. Browse and it's this one here -
siteorigin-panels. Then install now and activate the plugin. Okay. Once thats
activated go to Appearance and Homepage again. And you'll see that notification
to install the plugin is not there because
we've already done that. Now the next important step is to switch this
switch to On. So yes we want to turn on our custom homepage. And this here is
our custom homepage. So if I save that as it is and I refresh the site you'll
see there is stuff there. There are three circle panels plus a headline widget
and this corresponds to these particular sections here. So what I'm going to do
I'm going to delete everything and start from a blank slate. There you go. As
you can see I'm now going to start with a blank slate. 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 you 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’s 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
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 I have
on my other screen. This area here just acts as a word editor. If you've ever
used 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 across. By doing that I 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 when you 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 Grey 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 you're 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 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 . 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 by . 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. And 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 adjusted the dimensions of each 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 homepage to look and what information you would like to present and go
ahead and add each one of those elements in there. The next thing I will show
you how to do is Add Edit and Delete pages so you can start adding content to
your website. So if you go to Pages you'll see that there's a button here for
Add New. And through that you can add an unlimited number of pages to your
business website. I won’t show you how to use this Content Editor
section just yet. I’ll show you that a little bit later. For now I'll
just set up new pages and go from there. So you can see I've added a page
called Contact Us. If you want to edit a page just click Edit on a pre-existing
page and you'll be able to make updates. To delete a page just click on the Trash
button. So I’m just going to go in now and add all the pages for my
website. When you've entered a title. just click Publish. You'll see that the
page gets assigned its own URL which is yourwebsite.com/thetitleofthepage. You
can edit that if you need and also you can come back and change the title at
any time. Here's an example of how to change the title or the URL of a 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 it 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 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 a 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 on the 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
of your pages if you refresh your website you'll notice that all the items
appear in the top navigation and it looks like a bit of a mess. So the next
thing that I will be showing you is how to arrange this area and also create a
beautiful looking drop down menu. So that people who land on your website will
be able to find the information they want very quickly and very easily and it
will look awesome and it will be very very organized. So going back into your
WordPress Dashboard go to Appearance and click on the Menus link. Now give the
menu a title. So let's say Main Menu. Click Create Menu and go down. Select
Primary Menu. Select that checkbox and then click Save. If the items that you
want in the menu do not appear in this list simply go to this area here check
them off and click Add to Menu. And then they will appear in this area here
where you'll be able to arrange the menu in any way you want. Order the menu
items in the order in which you want them to appear by dragging and dropping.
The first thing I'm going is locate my first level pages and they are
floorboards. So I put that after home. Carpet tiles and outdoor. Okay. Now I
have pages that we're going to fall under each one of these four and these are
going to be an 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 they 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.
Okau. Now let's do kitchen tiles under tiles and bathroom tiles.
We’ll have Contact Us last and that's about it for now. Hit 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 any where
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 that
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. Now I’ll show you how you can change the
hover color of the menu items here. Go back into your Dashboard. Go to Plugins
and Add New. For this we need to add a new plugin. Search for one called Simple
Custom CSS and that's the one there. Install now and activate the plugin. Cool.
Now go to … go to Appearance and you'll see the custom CSS link
appear in there. Okay. For the next step you will need to go back to our
emediacoach.com page. You'll see the link in the description below. In the
additional resources section I have some code here. All I need you to do is
copy that entire piece of code then paste in this area here. Now open up a new
browser window and go to colorpicker.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 color you wish. You’ll notice
that every color has a particular number attached to it a particular number or
a letter combination. It's known as a hex code. When you’ve got the
color you’re after just copy and paste in there after the hash tag.
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's 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 website but you can also hyperlink externally. So far
I like 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 a 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 use
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
information about page templates and what they are. There are three types a
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'll 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 will turn into a full-width because there is no
sidebar.
But now what you can do is had
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
anything 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 right there
it’ll save then when you refresh you'll notice the information in
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 a content area here you can also add into
the sidebar. Now lets choose another page floor boards. 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 floor boards 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 sidebar
which we need to get rid of. Simply select
the full-width page. 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 a
URL and I can go back in here and into 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 homepage floor boards 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 homepage 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 the section about setting up the homepage 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 taken the time to
update a couple of the pages. So for example carpet I've set this one up using
Page Builder. And floor boards 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
Homepage. It's these Circle Icons we want to edit. Let's make this one carpets.
We can make a linked 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 linked text. You'll see that has taken effect. So basically the user
can come through to your site click onto one of the tiles and they'll be taken
through to their 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 colorpicker.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're happy with
copy the code
place a hash tag 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’s changed the
color. So you can change the color of this to any color 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 wanted to remove it just go back
and delete and it’ll return back to the original. Now what
I’ll do is add a Contact Form. We've already got a page on the site
called Contact Us. So what I’ll do is I’ll add a contact
form perhaps on one side and I'll put a Google Map demonstrating the business
location on the right-hand side. So first thing I need to do let's go to Pages
and let’s locate the Contact Us page. Okay. First thing to do select
the full-width page. Now I want to build that page using Page Builder. So let's
add a row. Let's make the first row or column %. Actually lets add three rows.
Let's make the first one %. Let's make the next one % which I’ll
leave empty. Just a bit of a gap between the form and the map and the third one
can be . So let's insert. Okay. Now in this area here I want to add a widget
and I’ll add a Visual Editor. So now we need to set up the form in
this Visual Editor. So to do that let me just update this for now. I will open
the Plugins page in a new tab and we're going to install a new plugin called
… just search for Contact Form and you'll see that there by
BestWebSoft. That one is very very easy to install so let's install that and
activate the plugin. Cool. Okay. Now you should see BWS Plugins in the side
area so just click on that. Now all you need to do is enter your e-mail address
in this field here. So you can see here enter the e-mail address you want the messages
forwarded to. So this is the e-mail address where you will receive all your
inquiries through the contact form. Okay. And that's all you need to do. Click
Save Changes. Now what they will give you are these new things called
shortcodes. So a shortcode basically allows you to deploy or install this form
anywhere on your website by pasting this shortcode in the location that you
want to form to appear. So all I’ve done is copied everything here
including the brackets. Now back in this section here I’ll edit the
Visual Editor and I'll go to the Text tab and just paste that in there and
click Done and Update. I’ll show you what happens when you do that.
There you go. The contact form now appears. So essentially anywhere you add this
little snippet of code is where your contact form will appear. Okay. Back in
the Visual tab now I might just enter some more information. Okay. Great. So
that's perfect. A user can come along to the Contact page and complete this
form and they'll be … and we will receive notification in our e-mail
inbox. And that's all there is to adding a contact form to your website. The
next thing that I will show you how to do is add a dynamic Google Map over here
in this area so that your customers can locate your area of business very very
easily. So you’ll remember we have set up our Contact Us form already
and we've got the other section here which is dedicated for our map. So if we
just click on that add a new widget and add a Visual editor. Now we need to go
to Google Maps and copy and paste the code for our particular map into the Text
editor. That's very important because the Visual editor is all for any visual
text for bolding italics bullet pointing etcetera. But if you paste any code in
here it will not render properly. So for any code you need to paste it in the
Text tab. So to get that code go to Google … just search for Google
Maps. Enter your exact business address and I'll just use one as an example
over here. Cool. Then when you've got your exact business address click on the
cog item over here. Click on Share or Embed map. We want to embed our map and
we also want to select a custom size. Let's try by say . Then just go to this
code copy all of it go back into your Content Editor. In the Text tab paste
that code that’s provided by Google. Click Done and Save. Now let's
refresh. There you go. There is a dynamic Google Map. And if you want to make
the map larger you can of course do that. Just go back in and select a
different size. Then copy that code and replace your existing code with the new
code and you've got a dynamic Google Map. Your customers can find you very
easily. If you have a physical place of business I highly recommend doing this
because it just makes things very easy for your customers. Plus if you have
multiple locations feel free to enter your address for each location and also a
map for each location as well. You can enter as many as you like one by one.
What I can also do is add my actual address above the map. So to do that I will
just go into this area here. I’ll go back into the Visual tab.
I’ll just enter. Give myself some space and I’ve just
pasted the address in there. Okay. Let's try that. That is great. That's
absolutely perfect. Feel free to ask any questions if any of that confuses you
or if you have any questions about
setting this up for yourself. Now I'm going to show you how to set up
one of my favorite features. It is an image gallery where when the user clicks
on your image it will pop up
into a
beautiful lightbox dark lightbox effect and they will be able to scroll through
your entire image gallery. So the first thing we need to do is go to Plugins
Add New. Search for a plugin called Simple Lightbox and that's the one there.
So install and activate. Now go to Pages. Here you can add a new page where
your 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 only 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 images in total so five plus five will look good.
Actually I’ve got 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 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 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 to get your
customer base to speak and communicate with you. To do this we will need to
install a new plugin. So go to your Plugins. Search for one called Acurax Social
Media and it's that one there -
Social
Media Widget by Acurax. so let's install that one and then don't forget to
activate the plugin. 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 URLs. 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 homepage. I might just
add 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. Now the last thing that I'm going to show you is how to add a
blog to your existing WordPress website. So the way you can do this is firstly
I'd like you to go into Settings and go to Permalinks. I want you to select
Custom Structure and delete whatever is in that field there and enter this
instead. Now I know earlier I told you to select Post Name but that was
actually a mistake on my behalf. The correct thing to do is Custom Structure
and just enter what I have put in that field there. And to make it easy for you
I will actually put this little permalink structure on my eMedia Coach website
so you can just copy and paste. Essentially what that will do is it will change
the structure of the URLs so it will be yourwebsite.com/thecategory and we're
going to set up a new category called Blog. So it will be
/blog/thenameofyourblogpost. So essentially that's what
this actually does. So when you do that just
go down and save changes. Now we’re going to set up the category
called Blog. So if you hover over Posts and then click on the Categories link
all you need to do is put blog as the name and click Add New Category. And
that's it. So now we've added a category called Blog and we've set up the URL
structure. Now I'll add a couple of new blog posts to show you how everything
works. So if you go to Posts and Add New. Now it's really important that when
you’re adding posts to your blog you do do them as a post not as a
page. Because when you set up things as a page
you cannot select a category for a page. You can only designated posts
to your blog category. So whenever adding a blog post use that Posts Add New
and you'll see here it’ll have the option to designate this
particular post you make to your blog category. And that's something you do not
see when you're setting up a page. So let's enter a new blog post. I'll just
enter some text from another screen I have just as an example. And when
you’re done with your blog post click Publish. And if you have
selected the blog category you'll notice that the URL of this particular post
will be yourwebsite/blog/thepostname which is the URL structure we just set up.
So that's perfect. That's exactly what we need. I will and another couple of
posts just to show you as an example so you know how the layout will look like.
So I’ve added three blog posts. All you need to do now is go to
yourwebsite.com/blog and you will see your blog listings over here. They will
always be one after another. Now if you want to control how many appear on one
page you can do that. So if you go into … it will be Settings and
Reading. This sitting here Blog pages to show at most you can control how many
blog posts to show on one page before it cuts off and you've got little numbers
at the bottom to go to the next X number of posts. And now the next thing we
want to do is add blog to our menu area. To do that go to Appearance and Menus.
We want to add the yourwebsite/blog that URL as a custom menu link. So if you
go to the drop down here Links just paste in that URL and give it a title. Now
I might just delete one of these because I know it won't fit one the menu I
have now. Okay. Cool. Let's refresh the site. There you go. You can see now
that we've got an item called blog in our menu. And so when ever a user comes
along to your website and they click on the blog link they will be taken to
this page where it will display all of your blog posts one after another. And
it's the perfect way to add a blog to your existing WordPress website. In the
time
it's taking you to watch this
tutorial I’ve shown you how to create this amazing WordPress website.
I hope you found it useful and pleased Do thumbs up and subscribe to my channel
for more awesome stuff in the future. And if you have any questions don't
hesitate to contact me because I'm always happy to help people out. So do reach
out if you need a hand. I would really appreciate it if you could give this
video a thumbs up and also shared via Facebook because I know there are many
people out there who would love to get a hold of this and follow this for their
own businesses. Until next time see you then.
Wordpress Web Hosting
