Hi my name is Marty from LetsBuildWordPress.com,
and today I'm going to show you how to build a $1000 website step by step without skipping
anything. It's going to be built on the same platform
as used by Jay-Z, Katy Perry and Forbes, so you know this is going to be a professional
website. Rather than just talking about it I'm going
to show you. This is the exact website we're going to be
building today step by step. I'm going to show you how to add in your own
logo and tagline, I'm going to show you how to change the images and text, I'm going to
show you how to add in your own menu and these little icons that link to your various social
channels. I'm going to show you how to add these buttons
which are known as call to action buttons, which whenever a visitor clicks them it brings
them to your various pages. I'm going to show you how to add in standard
pages with text and images, I'm going to show you how to add a page with a video on it with
a video embedded from YouTube, where someone is able to come and watch the video then leave
a reply underneath. I'm also going to show you how to add a contact
us page with a contact form on it, so someone is able to fill out their name, email address,
subject and message, when they click send it's going to be sent straight to your email
inbox. I'm also going to show you how to populate
the sidebar with different things such as calendars, images and text. These images I'm going to show you how to
link them to different website which open up in a new window. Another cool thing about this website is that
it's going to resize itself depending on what it's viewed on, this is known as a fully responsive
website. It basically means if someone comes on and
they're viewing your website on their mobile phone or tablet, it's going to resize everything
to look as good as it can. I'm going to show you how to do all of this
step by step now. Okay so I've put together a checklist of things
we're going to do today, to get your website up and running and looking as good as that
website we just saw. I'm also going to cover the cost of anything
that isn't free. So the first thing we'll need to do to get
your website up and running is set up hosting. Hosting is basically a computer that's left
on 24 hours a day 7 days a week with your website loaded on to it. This is so people can gain access to your
website, even when your computer is switched off. Hosting is something you do require if you're
going to run a website, and will usually cost you around $8 a month. Only I am going to show you a way that will
get you your first month of hosting for only one penny. The next thing we'll need to do is get a domain
name for our website. A domain name is basically the title of our
website with www. before it and .com after it. So for example Google's domain name is www.google.com. Once again a domain name is something you
do require if you're going to run a website, and will usually cost you around $13, only
you don't pay this once a month like your hosting you pay for this once a year. So your hosting you'll pay once a month and
your domain name you'll pay for once a year. The next thing we'll be doing is installing
WordPress, lucky for us WordPress is free, so that won't cost anything to install. Then we're going to be installing a theme
for our website, the theme we'll be using today is also free. Then we're going to add some pages to our
website and change some of the websites settings, this is to get everything looking and acting
just the way it's supposed to. So all together to get this website up and
running when you remember that I'm going to get you your first month hosting for only
one penny, is just over $13. Which I think personally is pretty amazing,
especially when we asked around and the lowest quote we got for a website to be built for
us was $500. To be able to get this website up and running
yourself for just over $13 is pretty amazing. So the first things we need to do to get our
website up and running is setup hosting for the website, and get a domain name for the
website. Lucky for us we can get both of these at the
same place, which is a website called HostGator.com. If you just want to open up your internet
browser and go to www.hostgator.com, or alternatively you can just click the link below this video. From the home page you either just want to
click in the middle where it says view web hosting plans, or else up on the top left
where it says web hosting. Either way it's going to bring you to this
page where it shows you the different hosting plans they have available. To be totally honest with you the business
plan comes with a whole load of added extras you probably won't require at this moment
in time, so that just really leaves you between the hatchling plan or the baby plan. The only difference between these two plans
is that one allows you to have a single domain, and the other allows you to have unlimited
domains. What this means is that the hatchling plan
will allow you to have one single website loaded on to the hosting, or the baby plan
will allow you to have as many websites as you'd like. If you're only going to have one website I'd
recommend going with the hatchling plan, but if you're going to have more than one website
I'd go with the baby plan. It's easy enough to upgrade from one to the
other, so if you just go with the hatchling plan for now and have one website, and then
you do decide to have more websites in the future you can just upgrade to the baby plan. For this tutorial I'm just going to go with
the hatchling plan and once you've decided on the plan you're going with, you'll just
want to choose how often you'd like to pay for it using this drop down. You can pay for it every month, every six
months, every year or you can even pay for it every three years. You do save a bit more money the longer you
buy at one time, so it does make more sense to do it that way. Because I'm just purchasing this for the tutorial
I'm just going to go with monthly. Once you've decided on the plan you're going
to go with and how often you'd like to pay for it, just click order now. Once you do it will bring you here and this
is where we're going to register the new domain name for our website. So just click here and type in the name you'd
like to register as your new domain, and make sure that it comes up and says that it's available. It it comes up and says it's not available
unfortunately you're going to need to choose something else. Then on the right hand side you can choose
if you'd like it to be something other than .com, so you can have it be yourwebsite.net
or .org, but for this example I'm leaving it as .com. You can check here if you bought a domain
name from somewhere else that you'd like to register with this website, but because I'm
registering a new one with HostGator I'll leave this one checked. Underneath that it gives you the option to
buy other domain extensions as well as the one you've chosen here, so you can buy yourwebsite.com
as well as .net or .org, but because I just want the .com I'm going to leave these boxes
unchecked. Underneath that you just want to make sure
that your package type and billing cycle are correct, I chose the hatchling plan and one
month billing cycles so these are correct. Underneath that it's going to ask you to choose
a username and security pin, and then fill out your general billing information. Then here you can choose if you'd like to
pay for it by credit card or PayPal. Under that it will give you the option to
purchase further hosting add-ons such as domain privacy or site backup, personally I don't
think any of these are necessary so I'm just going to uncheck the boxes. Although you can have a read through them
and if you do think you want any of them, just check these boxes and add them to the
cart. Underneath that you may see a coupon code
already entered here worth 20% off your first month, although as promised I'm going to show
you how to get your first month for only one penny. So if there is a coupon code entered in here
you just want to delete it, and you want to type in WORDPRESS1HOST. Now if you click validate you'll see that
you're getting your first month hosting for only one penny. Then you just want to review your order to
make sure everything is correct, at this time I'd like to point out you do get access to
HostGator's 24/7 phone, live chat and email support for free. You also get a 45 day money back guarantee,
this means if you do change your mind for whatever reason and you don't want the website,
you can contact HostGator through their 24/7 live chat and ask for a refund. I'd also just like to point out that here
you can see we're getting our website up and running for $12.96 which is pretty amazing. Once you're happy with everything just click
here where it says I have read and agree to the terms and conditions of use, and then
click create account. I'm going to pause the video just while I
fill out my information above, and then I'll restart the video when I click create account. Once you create your account you'll be brought
to a page thanking you for your order, and then you'll be redirected to the home page. At this point you can just close HostGator
and you want to go to your email inbox and look for your email from HostGator. This is a really important email so you want
to write down the information in it or print it out if you can. For now you just want to click the link beside
where it says your control panel, and then you'll want to copy and paste in the username
and password that's also in the email. So just copy and paste the username and password
from this email in to the cPanel login screen that you just opened. Once you do that you can just click login
and this will be you logging in to HostGator for the first time. Once you're logged in you just want to scroll
down to near the bottom to where it says software/services. Then you want to click where it says quick
install, if you bought your domain name from somewhere else other than HostGator you might
want to click Fantastico Deluxe, but because we bought ours from HostGator I'm going to
click quick install. Then you just want to click on the left where
it says WordPress and then click on continue. Just make sure that your new domain name that
you've purchased is selected in this drop down, and that this box is left blank. Here beside where it says enable auto upgrade
make sure the box is checked. For admin email just literally enter in the
email address you'd like to have registered with your new website, and for blog title
this is your website name. Don't worry the blog title or website name
can be changed later if needs be. For admin user this is the username you'd
like to use when logging in to your WordPress website, just be warned what you put in here
cannot be changed. It also appears in a few places on the website,
so I'm just going to put Admin, then just enter your first name and your last name and
click install now. It will normally only take a minute or two
to install if even. Once it's done it should come up and say congratulations
your installation is ready, you can access it now by going here. It will also have your username and your password
so be sure to write these down. It says that you can access it by going here
but this isn't always the case right away, especially when you're just setup a new hosting
account. It can actually take anywhere up to four hours
for your website to be fully configured. So if you want to leave it a while and wait
until you can click here and your website appears, and then restart this video. I'm going to pause it now while I'm waiting
on mine and then we'll restart the video together. So that's me now back and hopefully I've left
it long enough, so when I click here it's going to bring me to my new website, and I
have. So this is what it looks like when you first
install WordPress, this is the pre-installed theme that comes with it. It's just a sort of example so you can click
in here and see what an example post would look like and things like that if you were
deciding to use this theme. We're not going to, we're going to be changing
this theme and making it look a lot better than this. The first thing we'll need to do is login
to the back end of WordPress also known as the dashboard. This is we're going to be able to add pages
and make any changes to our new website. So to get logged in to the dashboard or the
back end of our new website, we just need to go to our website name .com or .co.uk or
whatever you've used, then put /wp-admin. That's going to bring us to the WordPress
login screen, and you just want to copy your username and password from the quick install
page and paste it in there. If for whatever reason you've lost access
to this page, the quick install page, you will be able to get your username and password
from an email that will have been sent to you. Once you've copied and pasted your username
and password in here, just click log in. This is now you logged in to the WordPress
dashboard for the first time, and as I say this is where you'll be able to add any pages
or make any changes to your new website. The first thing I like to do when I get logged
in to the dashboard is change my password, because it's unlikely that I'm ever going
to remember this one. So to change your password from the dashboard
on the left hand side, you just want to click where it says users and then if you hover
over the username that you've just setup you'll see that it now says edit. Just click edit and then if you scroll down
to the bottom you'll see here it asks you to enter your new password. So just enter your new password in here and
then repeat it again here and click update profile. Now it says profile updated and your password
is now changed. To get back to where we were before this just
click on the top left where it says dashboard. Now that we've updated our password, the next
thing we're going to do is install a theme. To install a theme on WordPress you just want
to click on the left where it says appearance, and then up at the top where it says add new. The theme we're going to be searching for
today is called customizr, so if you just want to type that in to this search bar it's
spelt customizr. Once you type that in just click search and
it should be the only theme that comes up. Underneath it you just want to click install
now. WordPress is going to install it automatically
and as you can see it's already successfully installed. Once it's installed you just want to click
underneath where it says activate. Now if we visit the site you'll see the change
in the theme has now changed the look of the entire website, and it's now already looking
a whole lot better. Obviously we're going to make it look even
better still but it's a good start. To get back to the dashboard from your website
you just want to hover over your website name at the top and click dashboard. Now that we've installed and activated our
new theme, you might have noticed this new button at the top up here that says customize
it. If you just want to click there we're now
going to upload our logo and change a few of the theme settings. If you just want to click at the top where
it says skin first, this will expand this box and allow you to change the main theme
colour. At the minute it's set to blue but using this
drop down you can change it to any of these colours. The example site you saw at the start of this
video was set to black, so I'm going to choose black. Once you change the colour you'll see that
the website name and tag line, and a few other bits and pieces on the site have also change
colour. Once you've chosen the colour you'd like if
you just click where it says skin, this will close the box again. Now we're going to upload our logo and to
do this, you just want to click underneath where it says logo and favicon. Then if you click upload you can search for
the image you'd like to use as your logo. To make sure it looks as good as possible,
you just want to make sure that the maximum width is 250 pixels, and the maximum height
is 100 pixels. Obviously you don't need to have a logo if
you're just happy enough to leave it as your website name here, or maybe you don't have
a logo yet you can just skip this step. But if you do want to upload your logo just
click here where it says upload. Then search for the image you'd like to use
and click open. Now if you leave it a couple of seconds you
should see that it now has your logo instead of your website title. Now if you just click where it says logo and
favicon again, this will close that box down. Now if you click underneath and expand this
box, this will let you change your website title if you haven't uploaded a logo, and
change your tag line which is this sentence over here. Because I've uploaded a logo I'm just going
to leave this box alone, but I'm going to change the tag line. I'm just going to type in learning how to
build WordPress websites, step by step together. Once you've typed in your tag line and changed
your site title if you need to, just click here again to close the box. Then just click underneath where it says front
page and you want to change this bottom drop down, from demo slider to no slider. Then just click front page again to close
the box. Then click comments to expand the box, and
you'll want to check this box besides where it says enable comments on pages, now you
can just close this one down. If you click here where it says social links
this is where you can enter in the URLs of all your different social channels, and the
icons will show up here. I'm now just going to pause the video for
a minute while I fill out a few of my social channel URLs, and then I'll restart the video. This is just to save some time in the tutorial. So that's me now back and as you can see now
that I've put in my social channel URLs, these little icons have appeared. If any of our visitors click on one of these
it will bring them to the social channel. So this one will bring you to YouTube, this
one will be LinkedIn, Google Plus, Facebook, and there's also things like Instagram and
Pinterest and a few other things I don't have myself, I just filled out the ones that I
use. Once you've filled out your social channel
URLs, if you just want to scroll back up and click here where it says social links, this
will close that box down again. Now there's nothing else we need to change
here at the minute, so if you just want to click up at the top where it says save and
publish, this will save all the changes. Now just click here where it says close and
this will bring us back to the dashboard. Then if you click up on the top left where
it says dashboard, this will bring you right back to the home screen. Now if you just hover over your website name
at the top and click visit site, we'll be able to have a look at what our website looks
like so far. As you can see it's already looking a good
bit better, and a bit closer to the end result we're going for. We have our social media icons in here, and
they also appear down here. We have our logo put in and our tag line looking
good. At this moment in time I'd just like to open
up our checklist and see what we've done and see what we still need to do. So we've setup our hosting, we've got our
domain name, we've now installed WordPress and installed our theme. We've changed some of the theme settings but
we will need to come back to this and change a few more, but for now we're going to add
some pages. To add pages to our website we need to do
this from the dashboard, to get back to our dashboard from our site we just hover over
our website name at the top and click dashboard. Now to add pages to your website you just
need to click on the left hand side where it says pages, then up at the top where it
says add new. That's going to bring us to the main page
editor of WordPress, as you can see with these options and things here it's quite similar
to something like Microsoft Word. You just want to type the title of your page
in here, and then your main content in here and click publish. I'm going to call this page why use HostGator,
you can obviously call your page something different, and then here in the main content
area I'm just going to paste some text that I've already written up. Once you've typed in your text, say for example
you want to insert an image in here, just click up at the top here where it says add
media and then upload files. Click here where it says select files and
then look for the image you're going to use on your computer, then click open and on the
right hand side you can choose the alignment of your image, I'm going to set mine to left. Then you can also choose if you'd like to
link it to something, I'm not going to I'm just going to set this to none, and then the
size of my image I'm going to leave as full size. Once you're happy with everything just click
insert in to page and this will add the picture in to your new page. Once you're happy with all your text and your
image, just click on the right hand side here where it says publish. Now if we view the page by clicking here up
at the top, we can see that our new page is now live with our picture and there's this
option at the bottom where people can leave a comment. I'd just like to point out that this edit
button here and the black bar along the time cannot be seen by any visitors on your website,
just yourself when you're logged in. We're now going to add another page to our
website and this page is going to have a video on it, which we'll embed from YouTube. To add another page to our website we need
to go back to the dashboard, by hovering over our website name at the top and clicking dashboard. Then same as last time on the left hand side
you just want to click pages and then up at the top click add new. Then just type whatever you're going to call
your video page in to the top bar, I'm going to call mine build a website. Once you've added a title to your page just
click in the main content area, and this is where you can type anything you want to appear
before your video. So I'm just going to type in learn how to
build a website, step by step without missing anything. Once you've typed in any writing you want
to appear before your video, just hit return on your keypad and then you want to open up
YouTube in a new window. We're using YouTube for this example, but
most video sharing sites do have the ability to embed their videos on to your website. Once you've found the video you're going to
embed, you just want to scroll down and underneath click where it says share. Then just copy this coding and go back to
your page. Now if you click here at the top right where
it says text, this will change your page now to HTML which is the same coding that makes
up this. So if you just copy that coding and paste
it in after this here, this represents hitting return on your keyboard, just paste it in
after that coding and then click up at the top right here where it says visual. This will change you back to the original
view. Now you can see this pinky orange box has
appeared, and this represents the video on your page. Once you're happy with the text and the video,
just click here to the right where it says publish. Now if we click here where it says view page
at the top we can see that our new page is now live, so here's our text and our video,
and if we click play on the video it will start to play. Then underneath there's the ability to leave
a comment. Now that our video page is looking good, the
next thing we're going to do is add a page which has a contact form on it. Which is where the visitor will be able to
fill out their name and email address and their message, then when they click send it
will send straight to your email inbox. As WordPress doesn't come with the ability
to add a contact form built in, we're going to have to install what's known as a plugin. Plugins are basically just extra functionality
that you can download from WordPress that adds extra things to your website. Things like contact forms, or picture sliders
or things like that, but for now we're just going to be installing a contact form. To install a plugin we just need to go to
our dashboard by hovering over our website name at the top and then clicking dashboard. Then on the left hand side you just want to
click where it says plugins, and then up at the top click add new. Now the plugin we're going to be searching
for today is called contact form 7, so if you just want to type that in to the box and
click search. So contact form 7 and then click search plugins. It should be the top one, contact form 7. Once you find it just click here where it
says install now, and then it's going to ask you are you sure, you just want to click okay. WordPress is going to install it automatically
and almost instantly, as you can see here it's already successfully installed. Once the plugin is successfully installed
you just want to click here where it says activate plugin. Once the plugin has been activated you'll
see here on the left hand side, we know have the word contact appear. You just want to click here. One cool thing I love about the contact form
7 plugin is that it comes with the premade contact form that you can use. So all you need to do to add this contact
form to a page, is copy this text which is known as the shortcode and then paste it in
to a page. Then WordPress is going to turn this shortcode
in to a contact form. The premade contact form that comes with this
plugin will ask your visitor for their name, their email address, the subject of the message
and then their message. It's also going to have a send button. So all you need to do to add this to a page,
is copy the shortcode and then add your page. So on the left hand side just click pages
and then up at the top click add new. You can obviously call your page whatever
you want to, but I'm going to call mine contact us. Then in the main content area you can just
type any text you want to appear before your contact form. So for this I'm just going to write, if you
have any questions about websites or even if you just want to say hello - you can fill
out the form below and we will get back to you. So once you've added any text you want to
appear before your contact form, you can just hit return on your keyboard and then you want
to paste in the shortcode. You don't need to change it to text on the
right hand side this time like a video, you can just leave it on visual. So once you've gave your page a name, added
any text you want to appear before your form, and then you've pasted in your shortcode,
you just want to click publish here on the right hand side and this will publish your
page. Now if we click here where it says view page,
we'll see that our new page is live and here's our contact form. So your visitor just fills out their name,
their email address, the subject of their message and their message and then click send. Then you'll be sent this message as an email
in your email inbox. But if we scroll down we'll see that WordPress
once again has added in this leave a comment section underneath, normally this is a good
thing with our pages because we want people to leave comments and tell us how good a job
we're doing. But when it comes to pages like contact us
page and things like that, sometimes it just doesn't make sense to have this section underneath. So now I'm going to show you how you can remove
this from a single page. So we do this from our dashboard, we hover
over our website name at the top and click dashboard. Then you just click pages on the left hand
side, and then hover over the page name of the page you'd like to remove the comments
from. So for us it's the contact us page, you just
hover over it here and then click where it says edit. Now in the top right hand side of the screen
if you just click here where it says screen options, then you want to check this box beside
where it says discussion. Now if you scroll down to underneath the main
content area, underneath where it now says discussion you'll see there there's these
two boxes checked, where it says allow comments and allow trackbacks and pingbacks on this
page. Just uncheck both of these boxes and then
click update. Now when we view the page
we'll see that the leave a comment section is now gone, so that's how you remove comments
from an individual page. Now I'm going to show you how to add a menu
because as you know, we've now added three pages and there doesn't seem to be anywhere
for our visitors to find them. Say they were on this page for example, how
would they get to our video page? So I'm now going to show you how to add a
menu to your website. So to add a menu to your website we just need
to go to our dashboard, by hovering over our website name at the top and clicking dashboard. Then on the left hand side you just want to
click where it says appearance, then still on the left you want to click menus. You want to just click up at the top where
it says create a new menu, and then it's going to ask you to give your new menu a name. For this I'm just going to call it main menu,
and then you want to click create menu. Now on the left hand side you can just check
the box beside any of the pages you want to add in to your new menu. I'm going to be adding all of them apart from
the sample page, and once I've checked the boxes I'm just going to click add to menu. Now you can click and drag these boxes in
to a different position, and from top to bottom is left to right on your website. So I want my build a website page to appear
at the start, and then I want it to be why use HostGator and contact us. Just make sure when you're dragging these
in to position none of them end up sitting out to the side like this, where it says sub
item here you don't want that, you want them all to be in to the left so they appear in
the menu. Once you've got all the pages you want added
to your menu in the right order, you just want to click here to check the box beside
where it says main menu and then click save menu. Now when we visit our website
we'll see that our new menu is along here, and it's in the right order. So now for example if we click here where
it says contact us, we'll be brought to the contact us page. The same for why use HostGator page and the
build a website page. As you can see there's no home button, there's
nowhere for us to be able to get back to the home page, that's because we didn't actually
add the home page as a new page. It's already built in to the theme we're using. So I'm now going to show you how to add a
home button to your menu. To do this we need to go to our dashboard,
by hovering over our website name at the top and clicking dashboard. Then on the left we need to click where it
says appearance, and then under that menus. Now to add your home page to this menu we
just need to click here where it says links to expand this box, and then type our website
name after this. So I'm just going to type in www. and then
my website name .co.uk or .com, or whatever you're using you just want to put your website
name in here after the http://. Then here where it says link text I'm just
going to write home and then click add to menu. Now I'm going to drag it to the top because
I want it to appear at the start of the menu, and then click save menu. Now when we visit our site we'll see that
the home button is now in the menu, and say we were on this page for example we can now
click here where it says home, and that's going to bring us back to our home page. Now the next thing we're going to be doing
for our website is populating the sidebar, which doesn't actually appear on the home
page, but if we click in to one of our other pages we'll see what I'm talking about. So here this blank white bit to the left,
this is the sidebar. I'm now going to show you how to add a few
different bits and pieces to this, to do this we'll be using what are known as widgets. So to add widgets on our side bar we just
need to go back to our dashboard, so hover over your website name at the top and click
dashboard. Then on the left hand side you just want to
click where it says appearance, and then just below that still on the left click widgets. Now there's a few different widget areas on
this theme we're using today, but we're just interested in the one here that says left
sidebar. So you can actually click here where it says
right sidebar and that will close this down, and then just click left sidebar to open this
one. So the way widgets work are you just click
anything from over here and drag them in to the widget area that you're using. If you want to remove one you can just click
and drag it back out. So now for example if I drag in this calendar
widget to the left sidebar, it's going to ask you to give it a title so I'll just call
it calendar and then click save. Now if we visit our website and go to a page
that has the sidebar, we'll see that it now has this calendar in the left sidebar. Now to add more widgets I'm just going to
go back to my dashboard, by hovering over my website name at the top and clicking dashboard. Now to get back to the widget areas you just
need to click appearance, and then underneath click widgets. Now you can click where it says right sidebar
again to close it down and re-expand the left sidebar. Now the next thing I'm going to add to my
sidebar is our menu, so I'm going to click and drag the custom menu widget in to the
left sidebar. You can just click and drag these to position
them in the same way as your menu, only though I do want the custom menu to be below the
calendar. You can just give it a title, I'm going to
call this our pages and then if you had more than one menu you can select it here, but
because we've only added one it's the only one available. Once you're happy with that you can just click
save, and that will add the menu to your sidebar. You can just click this box and this will
close it down. The next thing I'm going to be adding to the
sidebar is some text about our website, so I'm just going to click and drag this text
widget in to the left sidebar. Then I'm going to give a title which is just
going to be some interesting stuff, and I've got some text that I'm just going to copy
and paste in here. Once you've added your title and your text
you can just click save, and you can click here to close it down. So as you can see here it's calendar, custom
menu and then some text about us. Now if we go to our website and go to a page
with the sidebar, we'll see the calendar, our menu called our pages and then some interesting
stuff and our text. So that's how you populate the sidebar of
your website using widgets, but say for example you didn't want this menu here and instead
you wanted an image to be in your sidebar, I'm now going to show you how to do that. So to add an image to our sidebar we're going
to need to install a plugin because WordPress doesn't come with that ability built in. So to add a plugin, the same as last time
when we installed the one for the contact form, we just need to hover over our website
name at the top and go to dashboard. Then on the left hand side just click plugins,
then up at the top click add new. The plugin we're searching for this time is
called TinyMCE Widget. Once you've typed that in to the search bar
just click search plugins, and it should be the top one. Black Studio TinyMCE Widget. Once you've found this one you just want to
click here where it says install now, and then click okay. Once again WordPress will install this automatically
and all you need to do is click activate plugin. Now if we go back to our widget area by clicking
appearance on the left and then widgets underneath, you'll see that we now have this Black Studio
TinyMCE widget. So I'm just going to click here to close down
the right sidebar and then open up the left sidebar. To swap this menu with a picture, all we need
to do is click and drag the menu out and that will remove it from the sidebar, and then
you want to click and drag in the Black Studio TinyMCE widget. Then you can just click and drag it to the
position you want, and then click to expand it again. I'm not going to give it a title because I'm
adding in an image, but if you want to you can. So as you can see this is pretty similar to
the main content area when you're adding a page, and it has all the exact same functionality. So to add an image to your sidebar all you
need to do is click at the top where it says add media. Then click here where it says upload files
and then select files, then just select the image you want from your computer and click
open. Then on the right hand side you can just set
alignment to centre, link to none and size full size. Don't worry if it's a pretty big picture,
the widget areas will actually shrink your image to be the right size. Once you're happy with everything you can
just click here where it says insert in to post, and then you just want to click here
where it says save. Now when we visit our website and go to a
page with a sidebar, we'll see that instead of our menu we now have this image. So that's how you add an image to your sidebar
or any widget area on your website. I'm now going to show you how to turn this
image in to a clickable link. This means if a visitor comes on your website
and they see the picture and click on it, it's going to open up a different website
in a new window in their internet browser. This means your website will still be open
in the background but it's just going to open up this new website as well. So to turn the image in to a clickable link
we'll need to go back to the widget area, so you just hover over your website name at
the top and click dashboard. Then on the left just click appearance, and
then underneath that just click widgets. So you can just click here to close down the
right sidebar, and then you want to open up the left sidebar. Then you just find the Black Studio TinyMCE
widget and click to expand it. Then to turn the image in to a clickable link
all you need to do is click on the image with your mouse, and then click up here where it
looks like a chain link. Then you just type the web address you'd like
the visitor to be brought to after the two forward slashes, so I'm going to be linking
my image to HostGator's website. I'm just going to type in www.hostgator.com,
then here if you want to give it a title this is if someone hovers their mouse over the
image, the text will appear. So I'm just going to write HostGator, then
you want to just check this box beside where it says open link in a new window or tab,
this means your website will still stay open in the background. So once you've entered in the website URL,
the title and checked this box you can just click add link and then click here where it
says save. Now if you go back to your website and we
click on a page that has the sidebar, we'll click on a different one this time. We'll see that we have this HostGator image
here and now if we click on it, it will open up HostGator's website in a new window and
we still have our website here. So that's how you add an image to your sidebar
or any widget area, and then turn it in to a clickable link. As you can see if we hover over the text comes
up and says the title we entered in, here it says HostGator. So now that we've turned our image in to a
clickable link, I'd just like to open up our check list and see what we still need to do. So we've set up our hosting, we've got a domain
name, we’ve installed WordPress, we've installed our theme, we've changed most of the theme
settings and we've added our pages. So the last things we need to do are edit
the home page, and change the last of the theme settings. So the first thing we're going to do is add
some text and an image at the bottom of our home page, and it's going to appear in between
these buttons, our social icons and this text. So it's going to appear in here, and to do
this we just need to add it to a page as normal. So we just need to add a page by hovering
over our website name at the top, and going to dashboard. Then on the left hand side just click pages,
and then up at the top click add new. Now the text I'm going to be adding to my
home page, is going to be about the website so I'm just going to call this page about
us. Now you don't need to worry, the title of
the page won't actually appear on the home page, so it's just really for your reference. Once you've gave your page a name you can
just click in the main content area, and type any text that you want to appear below the
buttons on your home page. I've type some text up that I'm just going
to copy and paste in to save time in the tutorial. Once you've pasted in or type up your text,
you can insert an image just the same way as normal. So you can just click after the text and hit
return on your keyboard, and then up at the top click add media. Then you just want to click upload files and
select files, and then look for the image you want to use on your computer. So I'm going to use this one and then click
open. Then over on the right you can just choose
the alignment, I'm going to leave mine at centre, I'm going to change link to none and
leave it as full size. Once you're happy with everything you can
click insert in to page, then once you're happy with everything, your text and your
image, just on the right you can click publish. Now this page won't appear on your home page
just yet, we will need to add it to the home page. So to do that we just need to click on the
left where it says appearance, and then underneath just click customize. Here we're going to add our about us page
to the bottom of our home page, and we're also going to change the last of the themes
settings we still need to change. To add our newly added text and image to the
bottom of our home page, we just need to click and expand the box that says front page. Then you want to change the first drop down
where it says front page displays, you want to change that to a static page. Then where it says front page you just want
to choose the page you just added, so for me it's the about us page. Once you do that you'll see that now below
your buttons is your page, so here's our text and our image and once you're happy with everything
you can just click up at the top where it says save and publish. Now what we're going to do is, link these
buttons to some of our pages and change this text. So to do that you just need to scroll down,
still in the front page section, you want to scroll down to where it says button text,
and you can change this to be whatever you want. For example we can change instead of read
more, we can have it say see more, or you know whatever you want. I'm actually just going to change it back
to read more, but that's how you change the text of the buttons. Now here using these drop downs, this is how
you can assign each of these buttons to one of your pages. So the first button I'm going to have link
to my build a website page. I just choose the build a website page in
this drop down. The second button I'm going to have linked
to why use HostGator, so I'm just going to choose that page in the drop down. Don't worry if any images appear here, that's
just because you've had it inserted in the post. I'm going to show you how to change these
pictures to be custom. You'll also notice sometimes that the text
here appears, and it's actually just brought from your page as well. But don't worry we can change this to be custom. Then the last one I want to link to my contact
us page, so I'm just going to select that in the third drop down. Then to change the text that appears between
your page title and the button, all you need to do is type it in to these three boxes. So the first one is here, the second one is
the middle one, and the third one is here. You just want to type in something that's
going to convince the person to click the button, so for the build a website one it's
actually pretty good already. It just says learn how to build a website,
step by step without missing anything. So if I actually just copy and paste this
in here, and then I can add to it and just write
by clicking the button below. Then for your second page I would just type
in something like have you ever wondered why people use HostGator to host their websites,
click the button below to find out. Then for the third one which is my contact
us page, I'm just going to type if you have any questions about building a website, don't
hesitate to contact us by clicking the button below. Then once you're happy with your text and
your buttons, you can just click at the top where it says save and publish. Now you can click here where it says close
and when we visit our site we can see that our home page is looking a lot better, and
our text is here and our image. Now when we click these buttons they'll bring
us to the right page, so we click on the why use HostGator one and it brings us to the
why use HostGator page. Now the only thing we have left to do is change
the featured images on the home page, to make sure these images look as good as possible
just make sure the picture you use is 270 pixels wide and 250 pixels tall. This will make sure that they fit well inside
these circles, and they look as good as possible. So to change these images we just need to
go to each of the individual pages, and assign the image we want to use as a featured image,
To do this we need to go to our dashboard, by hovering over our website name at the top
and clicking dashboard. Then on the left hand side you just click
pages. The first one I'm going to be changing is
the build a website page, so I'm just going to hover over the page title and click edit. Then on the right hand side if you just scroll
down, you'll see here at the bottom it says featured image. If you just click below that where it says
set featured image, you can then click upload files and search for the image on your computer. I'm going to use this one and then click open,
now on the right hand side there won't be as many options as usual, and none of these
will actually show up on your website so you don't need to worry about any of the options. So once you've chosen the image just click
set featured image, and then you can click up here where it says update. Now when we visit our website
we'll see that the featured image has now changed to the one we wanted. Now we're just going to do the same thing
for the other two featured images and then we're totally done. So just go back to the dashboard and back
to pages, and the second one I'm going to be doing is the why use HostGator page. So I'm just going to hover over the page title
and click edit, then just scroll down to the bottom and on the right hand side click set
featured image. Then upload files, select files and then I'm
going to use this one. So once you find the picture just click open
and then set featured image, then update and then if we go back to pages we can change
the third one which is the contact us page. So just hover over it, click edit, then down
at the bottom set featured image, select files, choose your image and click open. Then set featured image and update, and now
when we visit our site we should find that all three of the featured images on the home
page have now been changed. Now the only thing left to do is congratulate
yourself, because you've just finished building your very own website and it's only cost you
around $12. Once again my name is Marty from LetsBuildWordPress.com,
and be sure to like this video and subscribe to our channel for more tutorial videos like
this one. Thanks again for watching.
