How To Make a Website (STUNNING) 😀 WordPress (Step by Step) 😍


Hi, everyone. It’s Chet here from WebsiteWizard.tv.
In this video, I’m going to show you how to make a stunning website that’s mobile
friendly and SEO friendly. And adding content is going to be super simple and easy. And
I’m going to show you everything step-by-step, from start to finish. So it doesn’t matter
if you’ve never built a website before, or you’ve got no experience, because I’m
going to show you how to do everything in this video step-by-step. And you don’t need
to write a single line of code. And we’re going to be building the website using the
same technology as large organizations and celebrities — like CNN, Yahoo, Beyoncé and
Kim Kardashian. And you’re going to love this course, as
the pre-release got five star reviews from thousands of people just like you, that started
out as complete beginners, and they’ve now all got fully functioning websites. So go
ahead and favorite the video, so you’ve got it saved for later.
Let’s get started. So this is the website we’re going to be building in this tutorial.
And this website’s completely mobile friendly. So this website will display perfectly on
any screen size, whether it’s a mobile, tablet, or desktop.
So as you can see on this website, we’ve got our heading right here. We’ve got our
background image. We’ve got our services here. So if this is a business website, you
can talk about your services here. Or if this is a personal website, you can talk about
your skills here, or whatever. You can completely customize the content. We’ve also got this
Our Team section here. And we’ve got some testimonials here, and some extra little juicy
facts there in the footer. You can put the pages, your email, contact telephone number,
Google Maps. And then in the footer we’ve got some social links right here. So you can
customize all of this. So whether it’s a personal website, a business
website, portfolio website, whatever, you can completely customize all of this content
to suit your needs. And we’ve also got our website logo right here. And this is one of
the free customizable website logos you can grab on our website, at WebsiteWizard.tv.
And if you’ve got a question at any point, then just leave me a comment below the video,
as I’ve been building websites for a long time now, so I’m likely to know the answer
to your questions. So to get a website online you need a couple
of things. You need a domain name and web hosting. So the domain name is just your website
name. So for example, twitter.com is a domain name. And web hosting is just where we store
our website files, so that our website can be seen online.
So we’re over at HostGator here. And this is where we can grab our domain name and our
web hosting. And I’ve been with HostGator for around seven years now, and they’re
perfect for beginners. So if you look at the top here, you get free 24-hour support here.
So any time you’ve got a problem, all you need to do is you can call them on their toll-free
telephone number, or you can click on their live chat here. And then you can talk to someone
directly online. And these are both free, and 24 hours.
So to get started, click on Get Started Now, and then click on Choose A Plan. Now as you
can see right here, we can choose between three hosting plans here. They’ve got a
Hatchling Plan, a Baby Plan, and a Business Plan. Now, you don’t need this Business
Plan, so you can just choose between the Hatchling Plan and the Baby Plan right here.
Now the only difference between the Baby Plan and the Hatchling Plan is, with the Hatchling
Plan you can only host a single domain. So that means you can only have one website under
this package, whereas with the Baby Plan you can host unlimited domains. So that means
you can have as many websites as you like under this one package. And you only pay the
one price here. So if you’re only going to have one website online, then you can grab
the Hatchling Package. But if you’re going to have more than one website, then go for
the Baby Plan, because you can have as many websites as you like.
So in this tutorial, we’re going to use the Hatchling Package here. So click on Sign
Up Now. And what I’ll do is I’ll leave a link to this correct hosting package in
the video description. So as you can see, in step one we need to choose a domain here.
So this is our website name. Now you can see two tabs here. You can see
a Register a New Domain tab, and there’s this I Already Own This Domain tab. So if
you already purchased your domain name elsewhere, then you would simply click on I Already Own
This Domain, and then simply type in your domain name here. But in this tutorial we’re
grabbing our domain name and our web hosting, so we need to click on Register a New Domain
here. So let’s choose our website name then. So
I’m going to type in “mywebsite,” and then the .com is selected here on the right.
So I’ll select the .com here. And as you can see, mywebsite.com is unavailable. So
someone’s already purchased that website name. But what it does is it gives us suggestions
below of alternative domain extensions for the same website name we typed. And as you
can see, if we scroll down these are all taken here. So mywebsite.net, mywebsite.org, they’re
all unavailable. So let’s try another website name. So let’s
try mysuperwebsite.com. And as you can see, mysuperwebsite.com is taken already. But as
you can see below, there’s a number of different domain extensions for that same website name
that are available here. So as an alternative, you might want to go for mysuperwebsite.net.
And if you want that, then you just select that right here. Or if you really do want
the .com, then all you need to do is just keep trying different website names here,
until you find a .com that is available. I’m just going to click on mysuperwebsite.net
to select that, so we can move on. So I’ve selected mysuperwebsite.net for my website
name. So now I’ll scroll down here. So as you can see right here, they’ve added on
this extra here, this domain privacy protection. And that’s adding on an extra ten dollars
a year. So what this essentially does is, it will associate your domain name with your
details. So that’s an extra add-on here. And they’ve added that on by default. So
if you want that, you can select that for the ten dollars extra a year, or you can unselect
that. I’m going to unselect that in this tutorial, and then move on to the next step.
So as you can see, in the next step we need to choose a hosting plan. Now we already selected
the Hatchling Plan in the previous step. So what you want to do, is under Billing Cycle
here, you can see currently by default it’s set to pay for 36 months in advance.
Now if you hit the dropdown here, you can choose to pay monthly, you can choose to pay
for three months in advance, 6 months, 12 months, 24 months, or 36 months. Now if you’re
a complete beginner I definitely recommend that you go for the monthly payment option
here. So click on 1 month here. So that way you’re not tied into anything long term.
So select 1 month here. And then on the next step you need to choose
a username and a security PIN. So you want to enter those here, and obviously you want
to make sure you remember those, because you will need those at some stage. So enter your
username and security PIN, and then scroll down to the next step.
So as you can see right here, we need to enter our billing information here. So on the right
here you can select whether you want to pay by credit card or by PayPal. And then on the
left you want to fill in all of your details right here.
Now one thing to note is, you want to make sure you’re entering a valid email here,
because when you sign up with HostGator, they’re going to send you a welcome email. And then
that welcome email is going to contain all of your important login information. So you
want to make sure you’re entering your email correctly here.
So select your payment type on the right here, and then enter all your details here. And
then scroll down to the next step. So as you can see here, they’ve got some additional
services here. And you can see they’ve selected some of those by default. And these are actually
adding extra costs right here. As you can see, this is $2a month. This one is $16 a
year, $5 a month and $10 a month. Now we don’t need any of these extra add-ons. So just go
ahead and unselect all of these extra add-ons they’ve selected here. So unselect all of
these here, and then scroll down to the next step.
So you can see right here, they’ve got this coupon code applied here by default. But what
I’m going to do is I’m going to give you a couple of other coupons which will get you
a big discount. And I’ll leave the details for these coupons in the video description.
So you want to remove this coupon right here, and instead type FlowerPower. And that’s
with no spaces. So once you’ve type FlowerPower here, click on Validate. And as you can see
right here, our amount due has dropped all the way down to $12.96.
So the FlowerPower coupon is the best coupon to use when paying monthly. But if you’re
going to pay for a yearly, or for six months in advance, then you can also use the EasyPeasy
coupon here. So type EasyPeasy here, and that’s with no spaces. And then click Validate. But
in this case we’re paying monthly, so the FlowerPower coupon will give us the bigger
discount here. So type FlowerPower, click on validate, and then your amount due will
drop down to $12.96. So once you’ve done that, scroll down to
the bottom here, and click here to agree to the terms, and then click Checkout Now. So
once you’ve clicked Checkout Now, and the payment’s gone through, what HostGator will
do is, they will send you a welcome email. And in that welcome email it will contain
all of your login details for your hosting account, so that we can log in and start setting
up our website. Let’s go ahead and click Checkout Now.
So when you receive your welcome email from HostGator, it’s going to contain these details
right here. So all you need to do is click on this control panel link right here to open
that in the web browser. And then use your username and your password here to log in.
And make sure you don’t delete this email, because it contains all of your important
details right here. So click on this control panel link here to open that in the web browser,
and then use your username here and password to log in.
So after clicking the control panel link in your welcome email, you’ll be on this page
right here. So all you need to do is use the username and password in your welcome email
to log in right here. So go ahead and do that now, and I’ll pause the video while I log
in. So after logging in, you’ll be on this page right here. And so we’re inside our
control panel, or C. panel as it’s often called. So all you need to do here is scroll
down until you reach Software and Services, as you can see right here. And then just click
on Quick Install. And then you want to scroll down here and
click on WordPress, under Popular Installs. So click on WordPress here, and then click
on Install WordPress. So what you want to do now is just hit this dropdown here, and
select your website name here. Leave this part here empty. And then you want to type
in an admin email here. And this is the email that’s going to receive the login details
for your website. So enter your email here. Then in the next part we need to enter our
blog title, or in this case our website title. So enter your website title here. So if you
don’t know what to use for your website title, then you can just have this as your
domain name. So if your domain name was mypinkjackets.com, then you can just enter mypinkjackets here
for your website title. But we can change this later on anyway. So it doesn’t matter
what you put here. I’m just going to put WebsiteWizard, as this is an example site.
Then scroll down here, and you want to enter an admin user here. And this is the user name
that you’re going to use to log into your website. So enter your username here, and
then you can enter your names here. So once you’ve entered your details here,
click on Install WordPress. And as you can see at the top here, it tells us that our
install is complete. So you need to hit the dropdown here, next to View Credentials. So
as you can see here, we’ve been given this Admin Area URL, our username, and a password.
So this username is the username we just selected in the previous step, and then we’ve been
given a password here for this username. So this is the username and password that we
would use to log into our website. And this link right here is the URL you visit when
you want to log into your website. So it’s your website name followed by /wp-admin. So
any time you want to log into your website, you would visit this URL right here, and then
log in with this username and password. So note these down somewhere on your computer.
And then what you want to do is you want to click on this link to open that in your web
browser, and then use these details to log in. So I’m going to copy the password here.
So copy the password, and then I’m going to copy this link right here to open that
in the web browser. So go ahead and do that. So we’re now on the login page for our website.
Now if you’re not seeing this login page right here, and instead you’re seeing some
kind of an error message, all that means is the new domain name that you just registered
is still propagating. And that just basically means it’s still being set up. So if you
are seeing an error message here, you just want to wait a few hours. And then when you
visit that link again, you should be seeing the login page right here. So if you do get
an error message on this page, just wait a few hours to make sure that your domain name
that you just registered is set up properly. And once it’s set up, when you visit the
link you’ll be on this login page right here.
So what you want to do now is just use your username and password from the previous step
to log in. So I’m going to do that now. So we’re now logged into our WordPress dashboard.
And this is the area where we’re going to make all of the changes and customizations
to our website. So the first thing we want to do is just remove some of the sample content
that WordPress created when we installed it. So what you want to do is hover over Posts
here, and click on All Posts. And then hit the checkbox here to select this Hello world!
post, and then click Trash here. And then what you want to do on the left here
is hover over Pages, and click on All Pages. And then select this checkbox right here to
select the sample page here. So select that, and then hover over this and click on Trash.
And then you want to hover over Plugins on the left here, and click on Installed Plugins.
And you want to select all of these plugins right here. So you can select those individually
like this. Or if you select the checkbox at the top here next to Plugin, that will automatically
select all of those. So select all the plugins here, click the dropdown here, select Deactivate,
and then click Apply. So now that we’ve deactivated all of those
plugins, we can now go ahead and delete those. So select all of these plugins again. I’m
going to click the checkbox at the top here to select all of those. Then hit the dropdown,
click on Delete this time, and then click Apply. And then click Yes delete these files
and data. And there we go. We’ve now deleted all of the unnecessary sample content.
So let me begin by explaining some of the options in the left panel here. So Posts here,
is what you would use to create blog posts. And then Pages here is what you would use
to create your website pages–so your About Us, Contact Us, services page etc. So you
would create pages for those. And then you would create posts for blog posts. Media here,
is where you upload all of your media to your website. So all of your images and other media
files, etc. will be uploaded through the media here. Comments are where you can enable or
disable comments on your blog posts. And then we’ve got Appearance here, and then Plugins.
So the Appearance here is where we will install our WordPress themes. And WordPress themes
give our website its overall appearance. So the great thing about WordPress is, when you
want to change the complete look of your website, all you need to do is install a new WordPress
theme. And then we’ve got WordPress plugins. And
these are very similar to iPhone apps. So they add extra functions to your website.
So as an example, if you wanted a contact form on your website, then all you would need
to do is add a contact form plugin right here. And that allows you to have a contact form
on your website. So if you think of an iPhone, the Appearance here, the themes, are like
the iPhone skins that you can apply to your phone to make it look different. And then
iPhone apps are like plugins here, where they add extra functions to your website.
So let’s begin by setting the permalinks for our website. So hover over Settings here,
and click on Permalinks. And then you want to select Post name here, scroll down to the
bottom, and click Save Changes. So this option right here that we’ve selected is the most
SEO-friendly way to have our URLs on our website. So what that essentially does, is it will
make the page or post title also become the URL for the page. And that’s the most SEO-friendly
way to do it. So as an example, if we created a Contact Us page with the title of Contact
Us, then the URL for that page would be our website name, followed by /contact-us.
So let’s take a look at our website right now. So to look at our website, you just hover
over your website name right at the top here, and then click on Visit Site. So as you can
see, this is how our website currently looks with the default WordPress theme installed.
But what we’re going to do, is we’re going to install a different WordPress theme. And
that’s going to give our website a completely different look.
So to head back to our WordPress dashboard, you would hover over your website name at
the top here, and then click on Dashboard. So we’re now back inside the WordPress dashboard,
where we can make the changes to our website. So let’s install a new theme. So to do that,
hover over Appearance here, and then click on Themes. And then you can see there’s
three themes here, and these are the themes that are already installed on our website.
So we want to install a new theme. So click on Add New here.
And you can see, we’re inside the Featured tab here. So if you scroll down, you can see
a number of featured themes available here. And these are all free. And then you can click
on the Popular tab here. And that will list some of the popular themes that are being
used. So you can scroll down and take a look at those as well.
But what we’re going to do is we’re going to be using the Quest theme on this website.
So what you need to do is click in the search box right here, and then type quest, and then
hit enter on your keyboard. So what you want to do, you can see the Quest theme right here.
So hover over that and click on Install. And then click on Activate.
And you can see right here at the top, it tells us that the theme is recommending the
Meta Slider plugin. So click on Begin installing plugin for Meta Slider here, and then click
on Install here. And as you can see, it tells us here that it successfully installed the
plugin. So click to return here, and then click on Activate to activate that plugin.
Now, if for some reason you wasn’t seeing that option in the top to install the plugin,
then you can install it manually by hovering over Plugins here, clicking on Add New, and
then in the search box you would type meta slider, hit enter on the keyboard, and then
you would see the Meta Slider here and then you can just click Install Now. As you can
see here, it’s already installed. So it’s telling us it’s installed. And that’s
because we just installed it. So let’s hover over Appearance then, and
click on Themes again. So we just installed the Quest theme and activated that. And you
can see that right here. So this is the theme we’re going to be working with on this website.
So now that we’ve installed this Quest theme, let’s take a look at our website now. So
hover over your website name at the top here, and click on Visit Site. So as you can see,
with the Quest theme installed, our website looks slightly different here. And as you
can see here, we need to do a lot of customization to this site to get it looking how we want
it. So let’s head back to the WordPress dashboard. So hover over the website name
at the top here, and click on Dashboard. So what we want to do now is start creating
some website pages. So hover over pages here, and click on Add New. So at the top here,
this is where you would enter your page title. And at the bottom here, this is where you
would enter your page content. And if you click this icon at the end here, that will
open up some more formatting options. So let’s type in our page title here as Home. And then
we don’t want to add any content right now. We’ll do that later on. So just type in
home as your title, and then click on Publish. So let’s create our second page here. So
at the top here you can click Add New here. Or another way you can do it is hover over
Pages here and click Add New. They both do the same thing. So I’m going to click Add
New at the top here to add our second page. And I’m going to give this a title of About
Us. And then I’ll leave the content blank for now. We can add that later on. So put
your title here, About Us, and then click Publish.
And then I’m going to add our third page. So click on Add New at the top here. And then
I’m going to give this a title of Contact Us. And then click Publish. And then let’s
create our fourth page. So click on Add New here, and type in Blog for the title here,
and then click Publish. So we’ve created four website pages, a Homepage, About Us page,
a Contact Us page, and a Blog page. And we haven’t added any content to those pages
yet. So we’ll do that later on. So now that we’ve created those four pages,
let’s take a look at our website. So if you hover over the website name at the top
here, you can click Visit Site to visit our website, or what I like to do sometimes is
I like to right click on Visit Site and then open that in a new tab. So that way I’ve
got my dashboard here in the first tab. And then I’ve got my website in the second tab
right here. So as you can see, here in the top menu we’ve got our About Us page, our
Blog page, our Contact Us page and our Home page.
So let’s head back to the WordPress dashboard. I’ve got that open in the first tab. If
you had it open in the same tab, then you would just hover over your website name and
then click Dashboard. So we’re now inside the WordPress dashboard. So let’s go ahead
and create and customize our menu for our website. So to do that, hover over Appearance
and click on Menus here. And then what we want to do here is, for the menu name here,
you want to enter Top Menu here, and then click on Create Menu.
And then let’s just go ahead and delete, these are all the items that are currently
inside our menu. So I’m going to just remove all of those just to show you how to add those.
So to remove those, hit the dropdown, click on Remove. That removes the first one. Do
the same thing for the remaining four. Hit the dropdown, click Remove, hit the dropdown,
click Remove, hit the dropdown click Remove, and then do that for the remaining one.
So now our website menu is completely empty. So what we want to do now is add our pages
to our menu. So on the left here you can see that the Pages dropdown is open. So you want
to make sure that’s open. And then you can select our pages. As you can see, our most
recent pages are all listed right here. So we can select all of those and then just click
Add to Menu. So we’ve got all of these four items in our menu right now. And you can actually
change the order of them. So this one would be the first item in the menu, this would
be the second, this would be the third, and this would be the fourth. So let’s just
drag these three, order those. So I’m going to put the Home one first, About Us, Contact
Us, and then Blog. And then what I want to do now is scroll down,
select Primary Menu here, and then click Save Menu. So what we want to do now is go down
to settings here and click on Reading. And as you can see here, front page displays,
you want to select a static page here. And then for the front page here we want to hit
the dropdown and select the Home page we just created a few moments ago. Then for the Post
page, we want to hit the dropdown, and select the Blog page we also created, and then click
Save Changes here. So let’s take a look at some of the theme
settings now. So hover over Appearance and click on Customize. And then you want to click
on General, and at the top you want to click on Site Identity. So as you can see, for the
site title, I’ve got this WebsiteWizard here. So if you want to customize the site
title, you can customize that right here. So for this example site, I’m going to be
building a beauty salon. So for the site title, I’m just going to call this BeautySalon
here. So enter whatever you want for your website title here. And then in the Tagline
here you want to remove this default text here, and then you can even leave that blank,
or you can just type in a short description summarizing what your website’s about. I’m
going to leave that blank here. So as you can see right here we can choose
our website icon. So to do that, click on Select Image. So you can see right now, we
have the option to upload our media to this website. So we want to upload our site icon.
And you can upload media to your website in two different ways. You can click on Select
Files here to select the image or file from your computer. Or you can drag files to this
screen right here, and that will automatically upload those. And if you look at the top right
here, there’s an Upload Files tab and then a Media Library tab. So the Media Library
tab will list all of the images and media that you’ve already uploaded to your website.
So that if you ever want to reuse any of those, then you can click the Media Library tab and
select those there. And the Upload Files tab is just where we
upload new files and media to our website. So I’m going to upload the site icon, and
I’m going to drag the image to this screen to do that. So let me reduce the browser screen
size. And then I’m going to open up the folder on my computer containing the site
icon, as you can see right here. So I’m going to just select that and drag that over
here, and drop the image right here. Now as you can see, the image is displaying
here with a checkmark. So that means it’s uploaded to the website. So now in the bottom
right I can click on Select here. And then if you like you can drag this around to crop
the image. In this case the image looks fine. So I’m just going to click Crop Image here
at the bottom right. And as you can see, our site icon is displaying right here. So what
you want to do is click Save & Publish at the top here to save those changes.
And you can see our image is displaying right here, right at the top here. So whenever you
make changes in the left panel here, you want to make sure you click to save the changes,
because on the right here, this on the right here is just showing a preview of how our
website looks with the changes we make on the left here. However, this is just a preview
of our website. So when you make the change here on the left, and the changes display
here in the website preview, it’s just a preview. You need to click save here for those
changes to actually go live on your site. So now that you’ve saved the changes, click
on the back icon here, and then click on Logo right here. So we can select our logo for
our website. So click on Select Image here. And as you can see, we’re inside the Media
Library tab. So this is displaying all of the media already uploaded to our website.
So you can see our site icon is displaying here. So what we need to do is we need to
click on the Upload Files tab here. And then you can click this button to select that from
your computer. Or you can drag the file to the screen, which is the method I like to
use. So I’m going to reduce the screen size here. Then I’m going to grab the logo here
from my computer, and drag that into the screen here.
And you can see right here, the image is displaying right here. And it’s got the check mark.
So that means it’s already uploaded to the website. So now that it’s selected here,
you can select the file you want by just clicking on it. I’m going to click this one here,
as it’s the website logo. Then I’m going to click Choose Image here in the bottom right.
And as you can see, our website logo is displaying right here in the website preview. And this
is one of the free customizable logos you can grab on our website at WebsiteWizard.tv.
And you can customize those logos with your own text. And I’ll leave a link to that
in the video description. So now that we’ve uploaded our website logo here, we need to
click on Save & Publish to save those changes. So let’s click on the back icon here and
click on Site Identity. So because we’ve uploaded our website logo here, we can now
remove our website title from our website. So to do that, select Hide Title here, and
that will hide that right there. So we’ve just got our website logo. So click on Save
& Publish, and then hit back. So what you want to do now is click on Social
Profiles here. This is where you can enter all of your social accounts here. So you just
simply enter the URL for your social page right here. So let me just enter a couple
as examples. So click in Facebook here. I’ll type in http://www.facebook.com/yourpagename.
And then I’ll do the same thing for Twitter, http://www.twitter.com/yourpagename. So you
can enter your social accounts here, and then click Save & Publish.
So now that you’ve saved the changes, you want to click on this cross here, to head
back to the WordPress dashboard. So make sure you click save before doing this. So we’ll
click save, click on the cross here. We’ve returned to the WordPress dashboard, so let’s
take a look at our website now.So hover over your website name, and click on Visit Site.
And if you look at the top menu here, you can see our social links right here. And then
you can also see our website logo right here, and then our pages in the menu.
So let’s head back to the WordPress dashboard, and continue with our customizations. So hover
over the website name at the top, and click on Dashboard. So let’s go back to Appearance,
and click on Customize. And then click on Layout here. And then click on Header. So,
as you can see here, it’s got this Show Search Icon. So if you look at our website
preview in the right here, that’s this search box right here. So when you hover over this,
you’ve got a search box. So if you don’t want a search box there, then you can uncheck
this right here, and that will get rid of that from our menu. If you do want that, then
keep this checked. And then so we’ve got the search box right here.
And then you’ve got this Show Secondary Header here. And this is this green part right
at the top here, which contains our social links, and some extra info that we can put
right here if you like. So you can uncheck that if you want to get rid of that. Or you
can keep that checked. And then you can customize this text here. So to do that, you would simply
customize this text right here. So if you want, you could have your email here. So I’ll
just put [email protected] And then that will display right here at the top. I’m
going to remove this green part in this tutorial. So I’m going to keep Show Secondary Header
unchecked, and then I’m going to click Save & Publish.
So let’s hit the back icon here, and then click on Footer. And then you want to select
Show Social Icons right here. And then click Save & Publish, and if I scroll down in the
website preview, you can see that will allow us to have our social links in the footer
right here. So select Show Social Icons right here, click save, and then click the back
icon right here. So what you want to do now is click on Blog
(Posts Page) here. And as you can see, we can choose the position of our sidebar. It’s
currently set to right, so if you look in the website preview here, you can see the
sidebar is on the right. Or you could hit the dropdown and choose left, to have our
sidebar on the left. Or you could choose none, to get rid of the sidebar here completely.
So let’s hit the back icon here, and then click the back icon again, and then click
on Typography here. And then click on Site Title and Tagline. And you can see right here,
we can choose the font family for this website. So if you hit the dropdown, you can customize
this and choose whatever font family you want on this website right here. I’m going to
hit the dropdown and choose this one right here, and then click Save & Publish. And then
I’m going to click the cross icon to return to the WordPress dashboard.
So what we can do now, is we can start adding some content to our website pages. So to return
to our website pages, hover over Pages, and click on All Pages. And we can see all of
the pages that we’ve currently created for our website right here. So hover over Home
here, and click on Edit. And on the right here under Template, you want to hit the dropdown
and select Page Builder. And then click on Add New Section here.
So click on Columns here, and then select this one right here. So if you click on this
gear icon here, on Section with blue background, click on the gear icon. And then you can select
your Background Image right here. So on Background Image here click on Upload. And then we’re
inside the Media Library tab, so we need to click Upload Files tab here. And you can click
to select that from your computer, or drag the file to this screen. I’m going to use
the drag the file method. So I’m going to reduce the screen size. Then I’m going to
drag the background image to the screen right here. And as you can see, it’s currently
uploading right here, so you need to wait for that. Once it’s uploaded, the image
will display right here, as you can see. So that’s finished uploading, and it’s selected.
So I can click Select Image here, and then click on Save.
So now let’s click on Add Module here, and then click Text. So then you can type in or
paste in some text right here. And this is going to be a heading on the website. So I’ve
pasted in the text right here. I’m going to highlight the text here, click the dropdown
here, and make that a Heading 3. Then I’m going to select text, and click this icon
right here to center align the text. So this is very similar to how you would format text
in Microsoft Word. So you simply type in or paste in your text right here, and then you
can format it with using your options right here.
So let’s type “This is an example paragraph.” And then what I can do is I can highlight
Paragraph here, click on the bold icon, and that makes that bold. To remove that, I can
highlight the text again. And you can see that the icon right here is indented. So that
means it’s already bold. So if I click that, it will now remove bold from that text right
there. If I want to make this a bullet point, I can click here, on the bullet point icon,
and click here again and unselect this icon to remove that. I can highlight this text
center align it with this icon, right align or left align. I can highlight this text and
make that a quotation, or I can highlight that again and remove that. And I can underline
this whole paragraph using the underline icon here, highlight that, unselect that to remove
that. So it’s very similar to how you would format text in Microsoft Word.
And if I wanted to make this paragraph here, this text a link, highlight that, click on
this link icon. I can type or paste in a link right here. Just type in anything .com and
then you can click Add Link. And then that makes that a link. Or to remove the link,
you simply highlight that again and then click this Remove Link icon right here. So anyway
I’m just going to remove all that. And I’ve put my heading right here which is going to
display on my website homepage. And I’ll make that Heading 3 and I’ll center align
that. So click on save once you’ve put your heading for your homepage, and click save.
And now in top here I’m going to click Update to update those changes.
So let’s take a look at our website right now. So to do that, hover over your website
name at the top. And what I’m going to do is I’m going to right click on Visit Site
and open that in a new tab. So that way we don’t lose this page right here. So I’ll
return to the second tab, which contains our website. So this is how our website currently
looks. We’ve got our custom logo here. We’ve got our social links here in the footer. And
then we’ve got the background image right here, which we uploaded a second ago. And
then we’ve got our heading right here, which we just created.
So let’s continue on with customizations. So head back to the WordPress dashboard, which
is in the first tab right here. Now let’s continue on customizing our homepage right
here. So what you want to do is you want to scroll down here to the bottom, and select
Transparent here for the Header Type. And at the top click Update to update the changes.
And if we quickly head back to our website, so hover over the website name. Let’s right
click on Visit Site and open that in a new tab, so we’ve got this page right here.
So visit our website. What I want to do is I want this image to
spread down a little further down the page, so you can see more of the background image.
So we want to head back to the first tab, with our WordPress dashboard. And then what
I’m going to do is I’m going to scroll down here. And in this text section here,
so inside this section here you’ve got text which contains our title that we just created.
So you can click on that to open that up. Or another way to do it is you can click on
this pencil icon here, so that will edit this text module which contains our heading. So
click on the pencil icon. Then what I can do is I can put the cursor
here, and just hit return on the keyboard a couple of times. And the cursor’s down
here now. So that’s created a bit of a space here. So I can click save here. Scroll up
to the top and click Update to save those changes. And now if we take a look at our
website, so hover over the website name and let’s open that in the new tab. So right
click and open in the new tab. And then you can see right here on our homepage, the image
our background image is spread down a little further now, so this looks a little nicer.
So I’m going to head back to the first tab contained in the WordPress dashboard, and
I’ll just close the website there. So let’s continue on customizing the homepage. So let’s
quickly head back to the website. Just want to show you something briefly. If you have
it over the website name, right click on Visit Site and open that in a new tab, and then
head to the second tab. What you can see right here is when we added our background image
here, you can actually no longer see the menu here. I don’t know if you can see that.
Let me just try to highlight that right here. So our menu item is now no longer visible
because of this background image. So what we want to do is we want to change the text
color on these menu items, so that we can see those.
So let’s head back to the first tab in the WordPress dashboard. And what I want to do
now is scroll down to the bottom of this page, and then click this menu text color. So we
can customize the text color of our menu. So click on here. And I think if we make our
menu item a light greyish color, that should be a little better. Whoops, let me just scroll
down to the bottom again. There we go. So you can click here to choose some colors
here. So I’ve chosen, clicked here to choose a light greyish color here. Or you can choose
the colors down here. So I click here to select a grey color. And then I can scroll up to
the top and click Update. And then that’s saved the changes. So let’s head back to
the website. So hover over the website name. Let’s right click on Visit Site and open
that in a new tab, so we don’t lose this page.
So there we go. If you look at our website now, we can now see our website menu items
more clearly now against this background image. Now this one right here is not visible. It’s
green. The text is green so we can’t really see that very well. So this is the page that’s
clicked. So when you click on the page, the color of that turns green. So let’s change
that to a similar color to this, so we can see that. And also the hover color is green,
which makes it difficult to see against the background image. So let’s change that.
So I’m going to return to the first tab which has our WordPress dashboard. Then I’m
going to scroll down to the bottom. And we did the first one here, Menu Text Color. So
let’s do the Menu Text Hover Color, and then Menu Active Border Color. So these are
currently green. So let’s just make this the same color as this. So what we can do
is we can click on this first grey color here. We can actually copy this code right here.
This is the hexadecimal code, which is basically just the code that generates this color. So
if you right click on that color and copy, and scroll down to the next one, Menu Text
Hover Color, click on this green here, and then you can paste in the code here, so that
we’ve got exactly the same grey as the first one. Or if you want a different color just
click on it, and you can select the colors down here.And then you can sort of drag around
here and choose different colors. I’m going to paste in the same grey code color here,
and then click here. And you can see it’s now grey like the first one.
So let’s scroll down and do the third one, the Menu Active Item Border Color. Click on
this here. I’m going to paste in that code for the grey color, click off the screen here.
And now you can see, all three of these now the Menu Text Color, the Menu Text Hover Color,
and the Menu Active Item Color is grey. So now I’ve done that. I can scroll to the
top and click Update to save the changes. Then I can hover over the website name at
the top here, right click on Visit Site and open that in a new tab, head on over to the
second tab, and you can see here we can see the menu items fine here.
And actually I think I’ll make the active one white. So we’ll head back to the dashboard
again, scroll down to the bottom in our homepage here. And for this Menu Text Hover Color and
Menu Active Color, I’m going to make those white. So I can select white right here. And
then I’ll do the same thing for the last one, Menu Active Item Border Color, click
on that and I’ll select white here. And then scroll up to the top and click Update
to save the changes. And once that’s updated, I’ll hover over the website name at the
top, right click on Visit Site and open that in a new tab. Head on over to the second tab,
and you can see that looks a lot better now. So we’ve got white for the active one, and
also the hover color is white as well. So really, the colors you choose for your
site depends on the background image you upload. So if you’ve got a really light background
image, if it’s like this for example, white, then obviously you want your menu item colors
to be dark, so you can see it against the white background. But on my background image
here is quite dark, so I needed to use a light color for the menu items.
So let’s head back to the first tab in the WordPress dashboard. So now we’re back on
our homepage here. We can continue on with the customizations.
So on this page let’s just hit the dropdown here for this section here, with the blue
background. You want to hit the dropdown here, just to close that out so it’s a lot cleaner.
And then you want to click on Add New Section. And just to make it clear, we’ve now got
two sections here. And let’s close this one we just opened. So hit the dropdown, close
that section, and then this first section here, hit the dropdown. You can see that’s
the section containing our website title and background image. So what you want to do is
click on Columns, and then click on 1/1 here. And then click on Add Module, and then click
on Text. So I’m going to paste in Our Services here.
So if you want to list your services on your homepage, then you can do what I’m doing
here. So call this Our Services, or you might want to call this our skills if it’s about
your personal skills. So I’m going to type Our Services here, and then highlight that,
hit the dropdown, and then make this a Heading 3. Then I’m going to center align that by
clicking the center align icon. And then click on save. So we’ve got this little heading
here, Our Services. So now I’ve created the heading Our Services.
I want to create three areas where I can talk about our services. So I’m going to click
on Columns here, and click on this one right here, 1/3 1/3 1/3. And you can see now we’ve
got three areas here where we can talk about our services. So on the first one here, click
Add Module here, then click on Feature Box. And you can see Icon here. We can select the
icon we want for that. So click on Select Icon, and then we can select an icon here.
So this website’s.for an example, a beauty salon site. So when we’re talking about
services, I think I’m going to have a heart icon. So you can choose any icon you like
here, whatever’s relevant to your website. So just scroll through here and choose whatever
icon you like. I’m going to choose a heart icon here, if I can actually find it. There
we go, here’s the heart icon here. So I’m just going to click on that. And then I’m
going to click on save. So there we go. My first service is going
to have this icon at the top. So I’ll do the same for the second and third service
here. So I’m just basically adding an icon for each one. So you choose whatever icon
you want to have above each of your services here. So let me do the same thing for the
other two. I’m just going to choose the same image for each one. So I can click Add
Module for the second one, click on the Feature Box here, click on Select Icon, and then I’ll
choose that heart icon again. And then click on save.
So I’ve done that for this first and the second one. I’ll do the last one here. Click
on Add Module, click on Feature Box. Click Select Icon here. And then I’ll choose the
heart icon again. And then I’ll click on save. So I’ve created the three icons for
the three services I’m going to talk about now. And just one thing I forgot to mention,
is we can actually change the size of these icons as well.
So I’m going to hover over the first one here and click on the pencil icon to edit
that. And then under Icon Size here I’m going to hit the dropdown and choose 5, and
then click save. As you can see, that’s made the icon slightly bigger. So I do the
same thing for the other two. So for the second one I’ll click on the pencil icon here.
And under Icon Size I’ll hit the dropdown and choose 5, and then click on save. And
do the same thing for the third one. Click on the pencil icon, under Icon Size hit the
dropdown and select 5, and then click save. So what I want to do now is create some text
for each of these services here. So for this first one I’m going to click Add Module
right here. Then I’m going to click on Text right here. And then we can just write about
this first service here. So I’m going to paste that here. So I’m going to highlight
this text here, hit the dropdown and select Heading 3 to make this part a heading. And
this part below is the content. So you want to type in a heading and some content right
here, then just make this part a H3. So you want to do the same thing for your
service or skill, whatever you’re talking about here. Give it a heading and some content,
then click on save. So let’s now add a title and description for the second service. So
in the second one here click on Add Module. Then click on Text. Then I’m going to right
click and paste in some text for this service. So I’ve got this right here. So I’m going
to hit the return on the keyboard, and I’m going to highlight this and hit the dropdown
and make that a Heading 3. Then I’m going to leave this as it is. So for yours, you
want to put a title for your service, or skill, or whatever it is you’re talking about.
And then add some content below that, just talking about that in more detail. And then
you want to highlight this and hit the dropdown, and select Heading 3. So once you’ve done
that, you want to then click save. So let’s go ahead and do the third and final
one. So click on Add Module, click on Text, and then as you can see it looks a little
bit different. So, sometimes it does this, it’s a little bit buggy. So I’m going
to paste my text here. And as you can see, you can’t actually see it. I’m going to
click Close, and I’m just going to delete that text block. So for this text I’m going
to click the cross here. Let’s delete that, and let’s try adding it again. So click
Add Module, click Text, and there we go. It’s looking how it should now. So I’m going
to paste in my text here. And then this is going to be the heading for this service.
So I’m going to highlight that, click the dropdown and select Heading 3. And then the
text below this is just talking about this service in more detail. So if you’re talking
about your skills, then give your skill a heading here, and then talk about that in
detail. Once you’ve done that, click on save. Now
let’s click on Update at the top here, just to save those changes. So let’s take a look
at our website and see what that looks like. So hover over the website name at the top,
and let’s right click on Visit Site and open a new tab so we don’t lose this page
here. Let’s head on over to the second tab. And there you go. Look at our website now.
We’ve got our services here, and then we’ve got our three services here with our custom
icons here, and our heading and our text right here. So let’s head back to our website
and continue customizing the homepage. So I want to head to the first tab with the WordPress
dashboard. So let’s continue on then. So if we scroll
down here, you can see it’s looking quite confusing here right now. So what you want
to do is, you’ve got this blue one, look at these blue headings, Section here, and
then this blue one here, Section. So if you hit this little dropdown here that’ll close
that out. Scroll up to the top. Do the same thing for the other one. And there we go.
As you can see, it’s a little less confusing now. So if you want to edit those later on
you just hit the dropdown, and then you can edit the heading here, etc. I’m going to
close to just make it a little less confusing to look at.
So now we’ve done that. Close the two sections by hitting the dropdown. Then click Add a
New Section. And there we go. So we’ve got another section here.
So now I’ve done that, I want to click on Columns here. Then click on this one right
here. And then click on Add Module, and then click on Text. And I want to type in or paste
a heading for this section. So I’m going to paste in Meet Our Team here. So this is
the next part on the homepage, where I’m going to talk about our team. So if you want
to do that, you can paste in your heading here. I want to highlight that, hit the dropdown,
select Heading 3, then click this center align button here to center align the text, and
then click save. And so if I just scroll up to the top and
click Update, and then I’ll just head on over to our website to quickly show you what
that has done. So hover over our website name, right click on Visit Site, open that in a
new tab, head on over to the second tab, and there we go. If you scroll down on our website,
you can see just as before, we created Our Services, and then later on we spoke about
our services. Right now we’ve just created our heading here, Meet Our Team. And then
just like here, I’m going to talk about the team members of this website.
So let’s head back to the WordPress dashboard in the first tab here. And let’s do that
now. So I’m going to close all of these I’ve opened up again. So I’m going to
close the first two to make it less confusing to look at. Actually, I’ve closed all three
of those here. So let’s open up the third one, which is what we were just working in.
So hit the dropdown on the third section here. Scroll down.
So we just added this heading here Meet Our Team. So click on Gallery here, and then click
on New Image. So this is the image for the first team member. So on this site I’m going
to have four team members. So I’m going to click New Image again here. This is the
one for the second team member. I’m going to click new image again. This is the one
for the third team member. And I’ll click New Image again. And this is the one for the
fourth team member. So let me do the first team member now. So
on this image block you can see this pencil icon. So click on the pencil icon to edit
that. Then for this Select Image here you want to click on Upload, and then click on
the Upload Files tab. So you can click here to select the image from your computer, or
you can drag it to this screen. I’m going to use that method. So I’m going to reduce
the browser screen size. I’m going to open the folder on my computer containing the image
for the first team member. So I’m going to go into here. And there it is right here.
So I’m going to drag this right here, and drop it right here. So that image is now uploaded.
As you can see right here, it’s selected. So all I need to do now is click Select Image.
And there we go. There’s the image. And if I scroll down here, you can choose the
Image Title and Image Description. So the Image Title is going to be this team member’s
name. And Image Description is just going to be what they do.
So for the Image Title here I’m going to type her name Lucy Jane. And then for the
Image Description I’m just going to paste in this right here, Beauty Expert. Then I’m
going to click save. So now I’ve done my first one. I can do
the remaining three. So on the second one here, click on the pencil icon. Then for Select
Image click on Upload Here, click on the Upload Files tab. And you can select the image from
your computer, or drag that to this screen. I’m going to drag it here. So I’m going
to reduce the browser screen size and drag the second one here, drop that right there.
And it’s uploading now. Once it’s uploaded you’ll see the image right here. There we
go, it’s uploaded. It’s selected here. So let’s click Select Image in the bottom
right. There we go. Let’s scroll down, and for Image Title we can put her name here.
Then for Image Description we can talk about what she does. So I’m going to enter her
name here for Image Title. So I’m going to put Tina West. And then for the Image Description
I’m going to paste in Nail Artist here, and then click on save.
So there we go. We’ve done the first two. Let’s do the third one. So in image here,
click on the pencil icon. Then under Select Image here you want to click on Upload. Then
you want to click on the Upload Files tab. And you can select that from your computer
by clicking this button. Or you can drag the image to the screen here. I want to drag the
image. So I’ll reduce the browser screen size, then I’ll grab the third image here,
drag and drop that here. And that’s now uploaded and selected. So in the bottom right
I’m going to click Select Image. Then I’m going to scroll down here. And then for Image
Title, I’m going to put her name here. And then for Image Description, I’m going to
paste in what she does. So she’s the Eyelash Specialist. And then I’m going to click
save. And then finally the fourth one. So under
Image here click on the pencil icon. For Select Image you want to click on Upload. Then you
want to click that Upload Files tab. Then you want to click here to select the image
from your computer, or drag and drop the image to the screen. I’m going to drag and drop
the image. So I’m going to reduce the screen size, drag the fourth image here. Now it’s
uploading, as you can see right here. And it’s finished uploading and it’s selected.
So I can click on Select Image in the bottom right. There you go. There’s the image,
if I scroll down now. So for Image Title I can put her name here. Just going to put Sarah
Lee. Then for the Image Description I can type in or paste in that right there. She’s
the Beauty Manager. And then I’m going to click save. And there we go. We’ve done
that now. So what I want to do now is scroll to the top, and click Update to update those
changes. Now let’s take a look at our website. So
we’ll hover over the website name at the top here, right click on Visit Site, and click
open link in new tab, so we keep this page open here. Head on over to the second tab.
And we’re on our website. So you can scroll down now to the bottom. You can see this part
here, Meet Our Team. And then we’ve got our team members right here.
So let’s now head back to our WordPress dashboard in the first tab here. And then
we can continue customizing our home page right here. So if I scroll down, let’s just
minimize all of these sections, so the one with the blue background. So hit the dropdown
to close that one. And do the same thing for the second one, section here with the blue
background. Hit the dropdown. Do the same thing for the third one. Hit the dropdown.
So that makes it a little less confusing to look at.
So the one we just did was this third one right here. So we hit the dropdown to open
that one up. So we just did Meet Our Team. And then we created this. So if we quickly
head back to the website, hover over the website name, right click on Visit Site, and then
open link in new tab. Go to the website in the second tab.
And if we scroll down, we can actually make the background of this Meet Our Team section
light grey, so that way it just stands out against this Our Services here. So let’s
do that. So head back to the WordPress dashboard in the first tab. And then on this section
here, this third section, we’ve got three here. You’ve got this one, this one and
this one, which is currently open. You want to click on the gear icon on the section with
the blue background. So click on the gear icon here. And you can see this Background
Color right here. So let’s just make that light grey. So click on this here. And you
can choose the color by clicking around here. So it’s got the color right here. So that
looks about right. It’s a quite light grey color. So I want to click save here. Then
I’m going to click Update. So scroll up to the top of this page, click Update, save
those changes, and then let’s head back to our website.
So if you hover over the website name at the top here, right click on Visit Site, and open
that in a new tab. And then let’s head on over to the second tab in the website. So
if we scroll down you can see now the background color is now grey for our Meet Our Team section.
So that just helps to differentiate the Our Services and Meet Our Team.
So let’s head back to the WordPress dashboard in the first tab. So I’m just going to hit
the dropdown for all of these sections to close all of those to make it less confusing.
Because they’re all open by default like this, and it looks really confusing, especially
if you’re a beginner. So go to the section here with the blue background and click the
dropdown to close that out. Do the same thing for the second section with the blue background.
Hit the dropdown to close that. Do the same thing for the third one here. So that’s
it. They’re all closed now. So what we want to do is we want to add another
section to the homepage where we can talk about customer testimonials. So click on Add
New Section here. Then you want to click on Columns here, click on 1/1. Then click on
Add Module here, click on Text. And then you want to give this section a heading. So in
this case we’re talking about customer testimonials. So I’m going to give this a heading of Our
Happy Customers. So type in your heading here or paste that, highlight the text, hit the
dropdown. I’m going to make this Heading 3. I’m going to highlight the text and click
center align to center align the text, and then click save.
So now I’ve created our heading here. I then want to create three areas below this
with three customer testimonials. So to do that, click on Columns here. Then click on
this one right here, 1/3 1/3 1/3. So if I scroll up, you can see we created Our Happy
Customers as a heading. And then down below here I’ve just created three sections here
where I can talk about three customer testimonials. So for the first one here, you want to click
on Add Module. Then click on Feature Box. And then just like before, we can choose an
icon for this. So click on Select Icon. And if you scroll down you can choose an icon.
Now in this area I’m talking about a customer testimonial, so I’m going to choose a speech
bubble icon I found in the icons here, which is right here. So I’m going to click this
one right here. Then for the title, I’m going to put the person’s name here. So
write the person’s name here for the title. And then for the text here, you can type in
or paste in a testimonial. So I want to paste in the testimonial here. Then I’m going
to highlight this text. And I’m going to click this quotation icon here. Then I’m
going to click save. So that’s the first one.
So let’s do the same thing for the second one. So you want to click on Add Module in
the second column here, click on Feature Box. Then for the icon you want to select an icon
here. Now again this is a second testimonial. So I’m just going to use the same speech
bubble icon here. Then I’m going to put their name for the title here. So I want to
type their name here. And then for text here, I’m going to paste or type in the testimonial.
So I’m going to paste that in there. And as you can see, it’s being a little buggy
again. You can’t see the text. It’s acting a little strange again. So I’m just going
to click save here, and then go back to the second one which we just created. I’m going
to hover over the pencil icon and click on that so we can edit that.
So if we scroll down now, it’s still not showing up properly for some reason. I don’t
know why it does this. It’s a little bit of a bug with this I guess. So I’m just
going to close this out, click on the cross at the top here. And let’s try it again.
Hopefully it’ll work this time. So actually, what I’m going to do instead of clicking
the pencil icon to edit, I’m actually just going to delete this. So click on the cross
here to delete that. And let’s try to add that again. Click Add Module. Click Feature
Box. For the icon, I’m going to click Select Icon. I’m going to select the speech bubble
icon here. Then, there we go. So Title, I can put the name here. And then here we go,
on Text we can type in or paste in a testimonial. And it’s looking fine here. So everything’s
working again. So paste in or type in the testimonial here, highlight the testimonial
and then click the quotation icon here, and then click save.
So there we go. We’ve done the second one. Let’s do the third one now. Click on Add
Module, click on Feature Box. For the icon here, click Select Icon. I’m going to click
on this speech bubble icon to add that. Scroll down here. And we can put the title. We put
their name but as I can see right here under text, it’s looking a little strange again.
So it’s being a little buggy again. So I’m just going to delete this. Click the cross
at the top here to close that. Then for this Feature Box we just want to
click the cross to delete that. And then hopefully when we edit again, it will work properly.
So click Add Module, click on Feature Box. And let’s scroll down. There we go. We can
see it’s looking how it should be. So this is going to work this time. So let’s select
our icon here. So click Select Icon. Let’s choose the speech bubble icon. Scroll down.
Under Title here we want to put the person’s name. So let’s type in their name here.
Then in the text here we want to type in or paste in their testimonial here. There we
go. So highlight that and then click quotation button, then click save.So we’ve now got
our three testimonials here, and we’ve got our heading here, Our Happy Customers. So
let’s scroll up to the top of this page and click Update to save those changes.
And let’s take a look at our website. So hover over the website name, right click on
Visit Site and open that in a new tab. Head over to the second tab. And if we scroll down
here on our Home page, you can now see this: Our Happy Customers. We’ve got our three
testimonials here. We’ve got their name, and their testimonial below.
Now if you want to make this text a little bigger here, then we can do that as well.
So let’s head back to our WordPress dashboard in the first tab. And all of these sections
are all opened up here. So let’s just minimize all of those to make it look less confusing.
So under Section here with the blue background, hit the dropdown. Do the same thing for the
other three. So there we go. I’ve closed all of those out. So the fourth section here
is the one we were just working in. So let’s hit the dropdown to open that up. Scroll down,
we’ve got Our Happy Customers, and then we’ve got our three testimonials.
So we wanted to make the testimonial a little bigger, the text. So you can click on the
pencil icon here to edit that, for the first one. And if you scroll down, let’s highlight
the testimonial here, hit the dropdown, and let’s make that a H4. So click Heading 4,
then click save. So there you go. You can see the text here is slightly bigger.
So let’s do the same thing for the second testimonial here. So hover over the pencil
icon and click on that. Scroll down, and as you can see it’s looking a little bit strange
again. It’s not showing up again. So let’s just close this by clicking the cross here.
And let’s try that again. Click the pencil icon to edit the second feature box. And there
we go. Now you can see it’s displaying as it should be, with the formatting options
here. So highlight the text, testimonial, hit the dropdown, and choose Heading 4. Then
click save. Let’s do the same thing for the third and
final one. So next to Feature Box here click the pencil icon. Scroll down, and as you can
see it’s looking strange again. It’s not showing up properly, a little bug. So click
the cross here at the top. Let’s try that again. So next to Feature Box, click the pencil
icon. And there we go, it’s displaying fine now. Now I don’t know why it does that.
But, as you can see, if that happens you just close it out and go back to it, and it shows
up. So highlight our testimonial here, hit the dropdown, choose Heading 4, and click
save. There we go.So we’ve done all three of those now. So scroll up to the top on this
page, and Update. So now what we want to do is preview our website.
So hover over our website name, right click on Visit Site, and open that in a new tab.
Head over to the second tab, scroll down to the bottom of our homepage. And you can see
now the text for these testimonials is a lot bigger than it was before. So that looks a
little better. So let’s head back to the WordPress dashboard
in the first tab, and continue customizing our homepage. So let’s minimize all of these
sections here. So that’s this section here with the blue background. Hit the icon at
the end to close that out. Do the same thing for the second one. Hit the dropdown, close
that. Hit the dropdown, close this one, this one. So it’s all of those sections have
the blue background so it’s easy to find that. It’s just the end button right here.
So let’s create another section on our homepage. And this is going to just give some facts
about our website. So click on Add New Section here, then click on Column, then click on
1/1. Then click on Add Module. Click Text here. And then we can give this section a
heading. So I’m going to call it Juicy Facts. Or you can call this Facts About Us, or Key
Facts, whatever you want. I’m going to call it Juicy Facts. I’m going to highlight that,
click the dropdown here, and make that a Heading 3. So hit Heading 3. Then highlight the text
and click the center align button here to center align that. Then click save.
So now I’ve created the heading for that. I can now hit Columns here, and then choose
1/3 1/3 1/3. So you can see we’ve got our heading here, Juicy Facts. And then below
that we’ve got these three columns here, where we can talk about some key facts for
our website. So for example you can talk about how many social subscribers you’ve got on
Facebook. Or you can talk about performance indicators. Or we have 20,000 happy customers,
etc. etc. You can talk about whatever you want here.
So click on Add Module in the first column here. Then click on Feature Box. Then select
an icon. So click on Select Icon. I’m going to choose a check mark for this. So I’m
going to click the check mark icon. Then scroll down. And for Title here, I’m just going
to put some information about some key facts for our website. So I’m going to paste in
10,000 Happy Customers. Then I’m going to click save.
So now I’m going to do the same thing for the second column here. So click on Add Module,
click on Feature Box. Let’s select an icon here. I’m going to choose the same check
mark here. Then for the title here, I’m going to paste in another bit of information.
So I’m going to say 20,000 Nails Installed Weekly. Then I’m going to click save. So
that’s the first two. Let me do the third and final one. So click on Add Module, click
on Feature Box, click Select Icon. And I’m going to choose the check mark icon again.
Then for Title, I’m going to put my facts here, 50,000 Eyelashes Applied Weekly. Then
I will click save. So there we go. We’ve got our Juicy Facts
heading here. Then below that we’ve got three sections talking about some information
about our website, some key information. So now we’ve done that, I’m going to scroll
to the top and click Update to update those changes. Then we can take a look at what our
website looks like now. So hover over the website name at the top, right click on Visit
Site, and open that in a new tab. So head on over to the second tab. Let’s scroll
down on our website homepage to the bottom. And you can see this right here, Juicy Facts.
And then we’ve got the key information I was entering a second ago.
So we can give this section a light grey background color just to differentiate it, like we did
earlier right here. So it’s this services with the white background, Meet Our Team has
a grey background. Our Happy Customers has a white background. So let’s give this Juicy
Facts a grey background color, just the same as this one right here. So let’s head back
to our website, WordPress dashboard in the first tab. I’m going to close all of these
sections with the blue background. I’m going to hit the dropdown to minimize all of those
to make it a little less confusing to look at. So there we go. These are our five sections.
This last one here is the one we just created, talking about our juicy facts, in this case.
So I want to make the background color light grey. So I’m just going to scroll down on
this page to the bottom, and I’m going to copy the light grey I used before. So Menu
Text Color, I’m going to click on that grey. I’m going to copy the hexadecimal code here.
Then I’m going to scroll up, and in this section right here, which is the one about
our facts, I’m going to click the gear icon here. Then for background color, I’m going
to click here, and I’m just going to paste in that hexadecimal code right there. So we’ll
choose the same light grey color. Now you don’t need to use the code. You can actually
just click around here and select whatever background color you want. But I want this
color to be the same grey as before, so I’m just pasting in the code right here. Then
I’m going to click save. And then scroll up to the top and click Update to update those
changes. So let’s now take a look at our website.
So hover over our website name here, right click on Visit Site and open that in a new
tab. Let’s head on over to the second tab. So if you scroll down here, you can now see
that this Juicy Facts section has got a light grey background, just the same as this Meet
Our Team right here. So it just makes it look a little bit nicer. So let’s head back to
the WordPress dashboard. So let’s now customize the footer of our
website.So if you hover over appearance and click on Widgets, so you can see this Footer
Widget here. So what we can do is we can drag a Pages widget. So on the left here, if you
left click and drag that all the way here into the Footer Widget. Then we can just give
this a title here of say, menu for example. And then click save.
So what that did is that added a list of our website pages in the footer. So if you head
back to the website, you can see that. So hover over the website name, right click on
Visit Site, and then click open in new tab. In the second tab on our website homepage,
scroll down to the bottom. And you can now see in the footer we’ve added this menu
here. And it’s listing our website pages right here. And this title here, Menu, is
what we put as the title here, right here. So you can put whatever you want here.
So let’s head back to the WordPress dashboard, and continue on with our customization. So
hover over Appearance here and click on menus. And then you want to click on this create
a new menu. And then you want to give it a menu name of Social, and then click Create
Menu. So on the left here, you can click on Custom Links here. And then for Link Text
here, you can put one of your social accounts. So you can type Facebook here for example.
So type in Facebook, and then type in or paste in your Facebook page URL here. So as an example,
I’m going to put http://www.facebook.com/yourpagename. And then once you’ve done that, so we type
in Facebook, and then paste your Facebook URL here, and then click Add to Menu.
So as you can see, in our menu here, this is a footer menu, we’re going to have this
in the footer of our site. So we’ve got Facebook. You can do the same thing for whatever
you want here. So Link Text, you can put Twitter. Type Twitter here, put your Twitter link here.
So let’s put www.twitter.com/yoururl. So you want to paste in or type in your Twitter
page URL. And then once you’ve given it a title, and a URL, you want to click Add
to Menu. And there you go. So we’ve now got Facebook, we’ve got Twitter.
You can put whatever you want here. So you can do Instagram. So you want to repeat this
process, and then click Add to Menu to add all of your social accounts in this menu.
So I’m just going to have Facebook and Twitter here. And what you want to do now is just
click on Save Menu, once you’ve put all your social accounts here. So now hover over
Appearance and click Widgets. And if we click the dropdown to open up the Footer Widget
here, we already put our pages here, as we saw earlier, in the footer. So what you can
do here is you can left click on Custom Menu here, and then drag that into this Footer
Widget area and drop that right there. So on this select menu here hit the dropdown,
and choose Social. So this is the menu we just created with our social accounts. And
then for the title you can just put something like Connect With Us. And then click save.
So now let’s head back to our website. So hover over the website name, right click on
Visit Site, and then open that in a new tab. So if we scroll down into our website footer,
you can now see we’ve got our pages listed here, and now we’ve got this Connect With
Us, which lists our social accounts. So that’s the menu we just created. So we can put some
other stuff in the footer here as well. So you might want to,for example, have your telephone
number, your email address, etc. in the footer. So we can add some more footer information.
So let’s do that now. So head back to the WordPress dashboard in the first tab. And
then what you want to do, I’m just going to click this here to minimize that. So this
is our footer widget. So we want to add some more things in this area right here. So on
the left here scroll down and you can see this Text widget right here. So left click
on this Text widget, drag it up to the top, and dump it in this Footer Widget area right
here. And for the title you can just say Get In Touch, or you can put whatever you want
here. I’m just going to say Get In Touch. Then in the content I can say Email, and then
I’ll put [email protected] And then I’ll hit enter on the keyboard. And then I’ll
type Telephone, and then put telephone number 123-456-789. And if you scroll down and click
save here, then head back to the website name, right click on Visit Site, open that in a
new tab. And then if we scroll down to the bottom, the footer of our website, you can
see that here, Get In Touch. And we’ve got our email here, and our telephone.
And we want to create a space here. So this is on a new line. So head back to the WordPress
dashboard. So what you want to do is underneath email here, you want to put this
, and
then you can do that twice. And that’s just some HTML codes to create a space. So I’ve
done that twice. So I’m going to click save here. Let’s head back to the website again.
So hover over the website name, right click on Visit Site, and click open in new tab.
So let’s scroll down to the footer of our website. And you can see that right here.
We’ve got Get In Touch, we’ve got our email, and contact telephone number.
So another thing we can add in the footer, is we can add Google Maps. So if you’re
a local store, for example, you might want to have a Google map displaying your location.
So we can do that as well. Let’s head back to the WordPress dashboard in the first tab
here. Let me hit this dropdown to minimize that. So in our Footer Widget area we’ve
got our pages. We’ve got our social links. We’ve got some information here, email and
contact telephone number, and now we want to add a Google Map.
So to do that, we want to drag another text widget in this footer area here. So scroll
down here, left click on text here and drag it all the way to the top, and dump it right
here inside the footer widget. So dump that there, and right here in content we want to
paste the code we’re going to get from Google Maps.
So let’s go over to Google Maps. So I’m going to open a new tab in a web browser and
go to Google Maps right here. Now if you don’t know how to find this, let me close that tab
out. Let’s open a new tab and just go to google.com. And then you just type in maps
here, hit enter, and there you go, there’s Google Maps, the first result. So click on
Google Maps. And what you can do is you can type in your address here and click search.
This is an example site so I don’t really have an address. So I’m just going to type
Las Vegas, and hit enter. And there we go. So you want to type in your address here,
of your location, and hit enter. Then what you want to do, on the bottom here you want
to click on Share. And then you want to click on Embed map. And you can choose the size
of the map here. So on the dropdown, it’s currently set to medium. We can choose small.
Or you can hit the dropdown, choose large or custom size right here, and enter the dimensions.
I’m going to choose custom size, and I’m going to put 300 x 200. So you can go ahead
and do the same. Sochoose custom size here, type 300 x 200. And then you want to left
click on the code. Just select all of that, right click and copy that.
Then let’s head back to our WordPress dashboard in the first tab. And you want to paste that
code in this text widget that we just dragged here. And then click save. So I’ll just
minimize that right there. As you can see, this is the text widget we dragged in earlier.
If you’ve forgotten how to do that, let me just delete this one. So I’ll hit the
dropdown and scroll down, hit Delete. So you just come down to the left here, left click
on text, drag it up and dump it right here in the footer area. And then you want to paste
in the Google Maps code here in Content. And then click save. And if you want you can give
that a title, let’s say Find Us Here. Or you don’t have to put a title. I’m just
going to put a title like that and click save. So now let’s head over to our website to
have a look at our footer, to see the Google Maps there. So hover over your website name,
right click on Visit Site, and click open link in new tab. Scroll down to the footer
of our website, and you can see our map right here.
Now, you can see that we’ve got too much stuff here so it’s actually sitting above
this right here. So we want to remove something from the footer. We’ve got our social links
here already, so we don’t really need this Connect With Us. We can just get rid of that.
So go back to our WordPress dashboard here. Now let’s hit the dropdown to minimize that.
So we’ve got this Connect With Us, Get In Touch. So you want to have just three items
here in the footer right here. So what you want to do is get rid of these. I’m going
to get rid of this Connect With Us, because we’ve already got social links on our footer.
So I’m going to click delete here. And there we go. So we’ve got our pages, Get In Touch
with some random text, which in this case we put our telephone number, and email. Then
we’ve got this Find Us Here which is our Google Maps.
So let’s head back to our website, hover over the website name, right click on Visit
Site, open that in a new tab, scroll down to the footer of our website and there we
go. You can see we’ve got our maps here, we’ve got an email, and we’ve got a menu.
And I think these titles, it would look better without these actually. So I’m going to
remove those. So head back to our WordPress dashboard. And then here in Footer Widget,
this first one is the pages, so hit the dropdown. And I’m going to remove that title and just
click save. I’ll hit the dropdown to close that one, and I’ll open up the second one
here. So hit the dropdown. I’m going to remove the title here, and scroll down and
click save. And I’ll minimize that. So hit dropdown here. Then let’s open up the third
one, hit the dropdown. Let’s remove this title, and then click save.
And now let’s head back to our website. So hover over the website name, right click
on Visit Site, and open it in a new tab. Scroll down to the footer of our website, and there
we go. We’ve got our Google Maps, we’ve got email and contact telephone number, and
we’ve got our pages right here. Now actually I think I should have a heading for this one
right here. So I’m just going to go back to the WordPress dashboard, hit the dropdown
to close that one. So that’s the second one here. Hit the dropdown,
you can see that here, email, telephone. So I’m just going to say Get In Touch. Then
click save. So if I hit the dropdown, I can go back to the website, hover over the website
name, right click on Visit Site and open that in a new tab. Scroll down to the footer, and
you can see that right there. So that looks great. So let’s head back to the WordPress
dashboard. So another thing we can do on this site is
customize the colors of our website. So to do that, hover over Appearance and click on
Customize. Then click on colors, and then click on Global. So you can see right here,
we can customize the color of links and buttons, and a few other elements as well, if you scroll
down. So if you want to really customize this website, you can even customize the colors.
But what I’m going to do is I’m going to leave all of the default colors. But I
just thought I’ll quickly show you that right here. So if you do make any changes
here, just remember you need to click Save & Publish before those changes will go live
on your site. So let me click the cross here to return to the WordPress dashboard.
So let’s take a look at our website now. So hover over the website name, and let’s
just click on Visit Site here. So as you can see, we’ve customized our homepage completely
now. We’ve got this area right here with a heading. We’ve got our background image
as well. We’ve got Our Services. We’ve got Meet Our Team. We’ve got Our Happy Customers,
Juicy Facts. We’ve added some more stuff in the footer. We’ve got some social icons
here as well. And we’ve got our menu right here.
So the last thing we need to do now is we need to add some content to these pages. If
you remember, when we first created these four pages here, we actually just gave them
the headings. We didn’t actually put any content for these pages. So we can now go
ahead and create some content for these pages. So let’s head back to the WordPress dashboard.
So hover over the website name and click dashboard. So to return to our pages, you simply hover
over Pages and click on All Pages. And then these are website pages we created. So let’s
do the first one. Let’s do the About Us. So hover over About Us and click on Edit.
And as you can see, we just gave this page a title. We didn’t actually put any content
for this page. So we can go ahead and do that right now. So what you can do is you can just
type in or paste in your content here, and format it with these options here, and then
click Update to update the changes. But what we’re going to do is we’re going to create
our content for this page using the Page Builder. And that’s what we were using earlier. So
to do that, under Template here you want to hit the dropdown, and click on Page Builder.
And then you want to click on Add New Section here, and then click on Image Slider here.
So what we’re going to do is we’re going to have a slider on our About Us page. So
click on New Slide here. Then click this image right here and that will allow us to upload
our image. So click on that. And you can see this right here, Select Image. So click on
Upload here, and then click on Upload Files here. So you can click here to select the
image from your computer, or you can drag the file to this window right here. I’m
going to use that method. So I’m going to reduce the browser size, and from my computer
I’ve got a folder here. And I’m going to go in there, and I’ve got my slider images
in here. So I’m going to drag the first slider image here to upload that to my website.
And you can see it’s uploading right here. So now it’s finished uploading and it’s
selected as you can see here. I can click the Select Image button here, and then I can
click save. So that’s the first slider. So I want to
add a second slider. So click on New Slide. Click on this icon right here. Then for Select
Image, we want to click on Upload. And then click the Upload Files tab. And then you can
select that image from your computer, or you can drag and drop it to this screen. I’m
going to drag the image here. So I’ll reduce the browser screen size, and drag the second
slider image here. And that’s uploading here. So it’s finished uploading. And I’m
going to click Select Image. Then I’m going to click save.
And then I’m going to do the third and final slider here. So click on New Slide, click
on this icon right here, and under Select Image you want to click Upload here. Click
on the Upload Files tab. And you can click here to select the image from your computer,
or you can drag it to the screen. I’m going to drag it here. So I’ll reduce the browser
screen size. I’ll drag the image from my computer to the screen here. And that’s
finished uploading here, so now I’m going to click Select Image, and then click save.
So now we’ve uploaded those here. Let’s scroll up to the top and click Update.
So now let’s take a look at this About Us page. So what you can do is on the top here,
just click on View page right here. So this is our About Us page, and you can see we’ve
got our slider right here. And you can toggle along right here with the slider. So, if you
scroll down, we’ve just got this image slider on our About Us page. We need to add some
content below this. So let’s head back to the WordPress dashboard. So hover over the
website name, and click on dashboard. And then let’s go back to our pages. So we want
to hover over Pages and click All Pages. Then we want to continue adding content to
our About Us page. So hover over our About Us page here and click Edit. So if we scroll
down here, we’ve got our free sliders here. So now we want to add some text below here.
So click on Columns here, click on 1/1. Then click Add Module here, and click Text. So
this is where you want to add some content for your About Us page. So I’m going to
paste in my text right here. Or you can type your text in. And I want this text to be a
little bit bigger than usual, so I’m going to highlight this and hit the dropdown, and
just make this a Heading 4. So now I’ve done that, I’m going to click save, and
scroll all the way up to the top and click Update to update the changes to this page.
So now you can click View page at the top here to view our About Us page.
So here’s our slider right here. So what we can do now is if we scroll down, you can
see our text is below that right here. So we created a slider on our About Us page,
and we just added this text right here. Now if you want this text to be a bit smaller,
I chose this as Heading 4. You could choose this as Heading 5 if you want the text to
be a little bit smaller. So that’s up to you. So let me head back to the WordPress
dashboard. So I’ll hover over the website name and click dashboard. And then hover over
pages and click All Pages. So we finished adding our content to our About
Us page. Let’s add some content to our Contact Us page. So hover over Contact Us and click
on Edit. So this is our Contact Us page, and as you can see we’ve just got a heading
for this page. We don’t actually have any content. So we can add some content right
now. So what we need to do is we need to install a contact form plugin. And we’re going to
grab some code from that plugin and we’re going to paste it on the page right here.
Now that’s going to generate a contact form on this page. So let’s grab the plugin,
and install that. So let’s install the plugin. So hover over Plugins, and click Add New.
And then in the search box at the top here, you want to type contact form 7. And then
hit enter on your keyboard. So this right here is the Contact Form 7 plugin.
So you need to click on Install Now, and then click on Activate Plugin. So what you want
to do is, you can see the Contact Form 7 here, so you want to click on Settings here. And
you can see this short code right here. So if you left click on that, and then right
click and copy that code, this is the code we’re going to paste on our Contact Us page,
which will generate the contact form for us. Now you can customize the email that messages
are sent to through your contact form. So to do that, you want to just hover over this
contact form and click on Edit. And then if you click on the Mail tab here, you can see
our email right here. So when someone completes the contact form or presses send, this is
the email that’s going to receive those messages. So you can customize that if you
want to use a different email here to receive those messages. Then you can put a different
email here and just make sure you click save here. And then this email right here will
receive all of the messages sent through your contact form.
So now that we’ve got our short code, we copy the short code in the previous step.
But I’ll just show you that again. So on the left here, you’ve got Contact, and click
on Contact Forms, and then the short code’s right here, so you can just left click and
then right click and then copy. So let’s head on over to our Contact Us page and then
paste this code in there. So hover over Pages, and click All Pages. Then hover over our Contact
Us page, and click Edit. So what we want to do on this page is, we
could paste the code right here to generate the contact form, but what we’re going to
do is we’re going to add our content using the page builder that we’ve been working
with. So to do that, on the right here, underneath Template you want to click on the dropdown
here, and select Page Builder. Then click on Add New Section. And then click on Columns,
and then this one, select ½ ½ right here. So what you want to do in this second column
here, so it’s the one on the right. You want to click on Add Module, and click on
Text. And then you just want to right click and paste in that short code we’ve copied,
and then click on save. So this is basically the contact form. So
this code right here is going to generate the contact form. So on our Contact Us page
right now we’ve got two columns. We’ve got this right column, which has got our contact
form, and then in the left column we can just add some more details. You might want to add
an email address, a contact telephone number. So let’s do that now.
So on the left hand column, this one right here, click on Add Module, and then click
on Text. So we can type in here now. It’s gone a little bit buggy again. So let’s
click the cross here to come out of here. And that’s just this text. This is just
what we’ve added. So just click cross here to delete that. And we’ll try at that again.
So click Add Module, click the text here, and there we go. Everything’s looking how
it should be. So you might want to write Phone here, and
put your telephone number here. And if you hit enter, you can put email, and put your
email here as well. And then click save. So on our Contact Us page, on the left we’re
going to have our telephone number and email, and then on the right we’re going to have
our contact form. So at the top here if you scroll up to the top and click Update to save
those changes, then you can click on View Page here to view our Contact Us page.
There you go! Here’s our Contact Us page. It’s got our contact form on the right here,
and then on the left it’s got a telephone number and email. And these are really small.
So we need to make this a little bit bigger. And what we can also do is we can add a Google
map here as well. So let’s do that now. So hover over your website name and click
on dashboard. And let’s go back to our Contact Us page. So hover over Pages, click All Pages.
Hover over our Contact Us page, and click on Edit. So on the left here, in the left
column, you can see in this text block here, we’ve got our telephone and email. So click
the pencil icon there. And I can just type in or paste in our physical address here.
So we’ve got our telephone number, our email and our physical address. So let’s highlight
all of this, click the center align button here to center align that. Then hit the dropdown
and make this a Heading 5. So select Heading 5 and then click save. And then let’s click
Update to update the changes. So we can also add a Google Maps underneath
this as well. So to do that we need to head back to Google Maps. So I’m going to open
up Google in a new tab. Then I’m going to type maps, and then the first result here
is Google Maps. So click on that. Then in the search box here, type in your physical
address. So in this example, I don’t really have a physical address, so I’m just going
to type Vegas here. Then I’m going to click Share. Once you type in your physical address
and search, you want to click Share. Then click on Embed map. Then you want to select
the Medium size here. So select Medium here. Left click on this to select that, and then
right click and copy that code. So let’s head back to our WordPress dashboard
in the first tab here. And you want to paste that code in this area right here, so the
text area where we put our telephone number, email and physical address. So hover over
that and click pencil icon to edit that. Then you want to put the cursor here, hit enter
on the keyboard, and then paste that code right here. Now actually I just made a mistake.
We need to actually be in the Text tab here when you’re pasting in code. So let me remove
that. So we always type in the Visual tab right here. And if you click on the Text tab,
you can see all of the coding that’s going on, the HTML coding. So if you click the Visual
tab, this is where we would work typically. And then that automatically turns into HTML
code in the Text tab. Now in this case, because we’re pasting
in Google Maps code, we need to actually paste that in the Text tab. So let’s click the
Text tab here, and just hit enter on your, click down the lowest part here, hit enter
on your keyboard, then just paste in the code below here. Then you can hit the Visual tab
to go back there. And if you scroll down there, you can see there’s this big grey box where
our map’s going to display. So then click save here. And then you can actually see a
preview of that right here. So scroll up to the top now and click Update to update the
changes to this page. Then at the top here click View page to view our Contact Us page.
So there we go. Here’s our Contact Us page. We’ve got our contact form on the right
here. So if anyone wants to contact you, they can fill in their details here, click send,
and that will get sent directly to your email. And we also listed our telephone number here,
email, and physical address. And this is optional. You don’t actually have to put this there.
And we also put this map here, which is awesome. So we’ve now finished our Contact Us page
here. So if we look in the menu here, click on About Us. We’ve done our About Us page.
We’ve done our Contact Us page here. We’ve done our homepage here.
So the last thing we need to do is this Blog page here. So let’s click on that. There’s
nothing here right now. And that’s because we don’t actually have any blog posts on
this website. So we need to now start creating some blog posts, and they’re going to appear
on this blog page right here. So hover over the website name and click on
Dashboard. So to create your blog posts, what you would do is hover over Posts here, and
click on Add New. So just like before we need to put a title for this post. And then we
can put the content down here. So my title for this page is going to be this one right
here. So type in or paste in your title here. And then we can paste or type in the content
down here, and then use these formatting options to edit those.
So I’m going to right click and paste in my content for this blog post. So I’ve pasted
in my content here. This part is going to be a heading. So I’m going to highlight
that, and hit the dropdown here, and choose Heading 3. And then this part right here is
a heading, so we can highlight that, hit dropdown and choose Heading 3. And then this is a heading.
So highlight that,hit the dropdown, and choose Heading 3. These are bullet points, so if
I delete this part here, and hit the bullet point icon, then I’ll click here to put
the cursor here, hit the backspace, and then hit enter, click to put the cursor here, backspace,
enter. And then I’ll do the same thing for these.
So I’ll delete this part. And then once the cursor’s here I’ll click the bullet
icon. And as you can see, that’s gone wrong, so I’m going to click the bullet icon again
to get rid of that. I’m going to hit enter here to create a space. Then I’m going to
hit the bullet icon right now like that. So let me do that again. There we go. So this
is the blog post. And what you can see on the right here, if you scroll down you can
click Set featured image. So we need to set a featured image as well. Click on set featured
image. Click on Upload Files, and you can click here to select the image from your computer
or you can drag the image the image into this window. Let’s do the drag and drop method.
So I’ll reduce the screen size. I’m going to select that image from my computer and
drag that right here. And that’s uploading here. And it’s finished uploading. So I
can click Set Featured Image, and you can see that right here.
So scroll up to the top. Once you’ve finished your blog post, you’ve entered your content.
You’ve edited it using these right here. And actually I’ll also show you how to how
to add an image here as well. So let’s say for example you wanted an image right here.
So you can put the cursor here. Now, as you can see I’ve just lost the heading here.
So I could highlight that and choose it again from here, but there’s actually an Undo
button right here. So if I just click Undo, that’s brought my heading back. So this
is a Redo button, and this is an Undo button. So I’ve clicked here to put the cursor here.
So I want to put an image right here. So to do that, click Add Media. And you can choose
an existing image from the Media Library tab, or you can click Upload Files to upload a
new image. I’m just going to click Media Library and just select any image here, because
this is just an example. So I’ll click this image to insert this image, and then click
Insert into post. So there you go. I’ve inserted this image on this blog post. I can
left click it, and then choose these right here to align it. I can center align it with
this, or I can left align here with the text on the right. Or I can right align with the
text on the left. And then if you want to increase or reduce the size of this image,
you can just drag it right here. So hover over the edge here. You drag it out or down
to reduce or increase the size of this image. So I’m just going to leave it like that.
And now I’ve added my featured image as well. I’m going to click Publish, to publish
that blog post. So now we can have a look at that blog post.
So click on View post right here at the top. And there you go. Here’s our blog post.
We’ve got our featured image at the top here. We’ve got our heading and our content
right here. And then this image. This looks a bit random here, but I just added that just
to show you how to add an image on the blog post. So I wouldn’t actually have this image
here. I’d just have the featured image here, and then my content right here.
Now as you can see, on the bottom of this page, we’ve got comments here. So if anyone
wants to comment on this blog post, they can actually do that right here. So you might
not want comments open on this blog post. So I’m going to show you how to do that.
So head back to the WordPress dashboard. So hover over the website name and click on Dashboard.
And then if you hover over Posts and click All Posts, this will show us all of our blog
posts. Right now we’ve just got the one. So hover over that and click on Quick Edit.
And then right here you can see Allow Comments. So you just want to uncheck that, and then
click Update. So that will remove the comment box from that blog post.
Now let’s take a look at that blog post again. So hover over this and click on View
here. And if you scroll down to the bottom, you can see we’ve got rid of that comment
box. So the other thing we can do is customize this sidebar right here. So, you can actually
remove the sidebar if you don’t want anything here. I think it would look better on this
site to just completely remove this sidebar here. Or you can customize it. You can just
have your recent blog posts displayed here, recent comments, or whatever you want. I’m
going to show you how to customize this right now.
So let’s head back to the WordPress dashboard. So hover over your website name and click
on Dashboard. Hover over Appearance, and click on Widgets. So as you saw earlier, if I just
hit this dropdown to open that up, we were adding content here to customize the footer
on our website. And this is the Footer Widget. Now you can see this area right here is the
sidebar. So all of these items that you’re seeing listed right here, is what we’re
seeing in sidebar, on our blog post. So you can actually delete all of these, if you don’t
want anything on the sidebar. So to delete these, you just hit the dropdown, click Delete.
So you do that for each one here, hit the dropdown and click Delete. Or another quick
way of doing it is you can actually just left click on this, drag it to the left, and drop,
left click, drag to the left and drop, left click, drag to the left and drop.
So now our sidebar here is completely empty. So if I head back to our website to show you
that. I’ll hover over the website name and I’ll right click on Visit Site, and open
that in a new tab. So here’s our website. So let’s go down to our blog post. So click
on our Blog page here. And here’s our blog post right here. So this is just a preview
of the blog post. So you just click that to go to the full size version, the full blog
post. And if I scroll down on this blog post, you can see right here that the sidebar is
no longer visible here. So if we just head back to the first tab in
the WordPress dashboard, you can actually, if you want to add items in the sidebar, then
you simply drag them from the left here. So let’s say for example you wanted recent
comments listed in your sidebar. Then you would just simply come down here to this Recent
Comments, left click and drag that all the way to the sidebar, and just drop that right
here. So that will display your recent comments in your sidebar. And then you can choose right
here the number of comments you want showing up. So if you want five comments then leave
it at default. If you want less you click here, and you can reduce and increase that
as you like. I want to keep our sidebar completely clean. So I don’t want anything on our sidebar.
So I’m just going to drag this to the left and drop. And that’s made our sidebar completely
empty. So now, every time you want to add a new blog
post to your website, all you do is you hover over Posts and click Add New. And then you
add your title here, your content here, then you edit that using the formatting options.
And you can add media here, to add some images on this page. And then you scroll down here,
click Set Featured Image and choose your featured image. And then when you’re ready, click
Publish. So if you want to add more blog posts to your website, that’s how you do it.
Now let’s head on over to our website. So hover over the website name and click Visit
Site. And then if we go on over to our blog page here, so click on this, this blog page
will display a list of all of our blog posts. So right now we’ve just got one blog post,
and that’s displaying right here. Now this looks a bit big to me. You may like it like
this. I don’t. So what we can do is we can actually set our blog post to display in a
grid format, a little bit like Pinterest. So to do that, hover over the website name
and click on Dashboard. Then hover over Appearance, and click on Customize. Then you want to click
on Layout here, and then you want to click on Blog (Posts Page). And you can see right
here the Style, if you hit the dropdown, you can choose Grid here, or you can choose Medium.
You can choose Medium, and if we click on the blog page here in the preview, so we can
take a look at that. This is how it will display if you choose medium. If you hit the dropdown
and choose Grid, then this is how your blog posts display on your blog page. And I like
it like this. I think this looks pretty cool. So I’m going to choose Grid here, under
Style, and then click Save & Publish. So now let’s click the cross here to head
back to our WordPress dashboard. And I’ll just quickly create a second blog post, just
so you can see how they look side by side. So to create our second blog post, hover over
Posts and click Add New. And then I’m just going to call this blog post Blog Post 2,
and then this is some sample content. So I’ve given my blog post a heading, a
description of its content. Scroll down now and click Set featured image. You can click
this Upload Files tab to upload a new image, but I’m just going to click the Media Library
tab to just select any image from here. I’m just going to click this one. And then click
Set Featured Image. So now I’ve done that. I’ve set a featured image. I’ve given
this blog post a title, and its content right here. And then I’m just going to click Publish
to publish that blog post. So this is our second blog post.
So if you click View post here, this is our blog post, but there’s nothing on this page
because I just created a short heading, description, and this is the featured image. So what you
can do is click on Blog here to go to our blog page. And there you go. You can see now,
this was our first blog post we created, and this is the second example blog post I’ve
just created, just so you can see how they look side by side on this blog page.
So we’ve now reached the end of this tutorial showing you how to create a website. I hope
you enjoyed the training. If you found the video helpful, then let me know by liking
the video. And if there’s something I didn’t cover in the video that you really wanted
to learn, then let me know in the comments below the video. And be sure to subscribe
so you don’t miss out on any of our future training. You can also check out some of the
free stuff on our website at WebsiteWizard.tv. And you can grab our free customizable logos.
You can take our free courses, and we’ve got a bunch of other free resources. Thanks
for watching, and I’ll catch you next time!

Leave a Reply

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