Welcome to eMediaCoach, the channel
that helps you make an amazing
WordPress website today. This is the 
finished product. We're going to show you
how to create this awesome website with
WordPress in the next hour step-by-step,
and it's going to be super easy for you.
If you've got a keyboard and mouse
you've got the right skills you need to
make this amazing WordPress website
you're looking at right here. We're going
to use WordPress which is one of the
world's most popular website platforms
and also a plug-in called Elementor
which is an amazing website builder and
it's perfect for beginners these pages
that you're looking at right here were
actually imported in just a few minutes
with a few clicks of the mouse and then
they were edited to customize our pages
so it was super super easy to make this
website it's perfect for beginners and
there was nothing technical involved so
it's the best way to make a website for
your small business before you go to
sleep tonight and here's something else
that's really cool it's perfectly
responsive on the mobile phone as well
go to this URL on your own mobile phone
because we'll keep this live just so you
can see for yourself how it will be when
you finish yours in about an hour
we're going to go through this tutorial
in a few easy steps firstly we are going
to get online we're going to get our own
website domain name so that you can have
your own address on the internet then
we're going to install the very popular
WordPress platform to manage your
website then we're going to install the
design and with a few clicks of the
button we're going to import ready-made
professional-looking website builder
templates that you're going to be able
to edit you can edit the pictures the
text at the buttons everything you can
imagine and we're going to go through
all of that step-by-step if you have any
questions please do ask in the comments
below and we'll be more than happy to
help all of you out there we want all of
you to succeed today so like I said
we're going to be using the WordPress
platform it's used by about 70 to 80% of
websites worldwide and you can see some
very popular names as I scroll down the
page here companies such as eBay CNN New
York Times jay-z Katy Perry and
TechCrunch and a lot more used WordPress
in some way shape or form for their
website we're also going to be using a
plug-in called Elementor and if you can
use the keyboard in the whales you can
use this drag and drop website builder
and it's fast becoming one of the
world's leading WordPress page builders
so here is our agenda firstly we're
going to get online we're going to get
you your com domain name and your web
hosting because without that without
those essentials you wouldn't have a
website and because you're following
everything with this tutorial that's
only going to be about five dollars a
month installing WordPress is step two
that's going to be free because you're
going to be following this tutorial will
show you how to do all of that
installing the design and using
ready-made templates we're going to show
you all of that it's going to be free
drag and drop click a few buttons and
we're also going to customize your
WordPress website which will become the
fourth step and making a look exactly
how you want in terms of images text
contact forms and any other
customizations that you need for your
small business so let's start with step
one
getting online it's the absolute bare
essentials and then after that
everything just gets even easier so
let's start building our WordPress
website okay so let's get to step one in
our process to create this WordPress
website and that is to get online and
that is the only way that you can get
your website live and online in the real
world so that your website appears
anytime somebody types in your web
address so what you need to do is go to
hostgator.com forward slash discounted
that you are all over there and I'll
link it in the description below as well
you're either going to land on this page
here or you're going to land on the
Hostgator home page either way it
doesn't matter I'll show you what you
need to do so Hostgator is what is known
as a web hosting company web hosting is
where all of your files are stored on
the internet so that when anyone visits
your web address your website shows up
and is able to be accessed
so without web hosting your website
would not load it's not enough just to
have a name buying that is just a name
but the thing that makes your website
appear and all the contents of your
website is web hosting and it's only a
few dollars a month and that's the
beauty of this it's very cheap and very
easy and Hostgator are the company I've
been using for around 13 to 14 years
since 2004 so that's why I recommend
them they've generally got very very
good support 24/7 and you can read up on
their services but what you need to do
is go to web hosting the hatchling plan
and the baby plan are very similar the
only difference is that the baby plan
will allow you to add an unlimited
number of web sites to your hosting
account whereas the hatchling plan
allows a single domain to your hosting
account you can always upgrade in the
future so if this is your first web site
just go to a hatchling plan and click on
the button to go to the next step you
can look at all the tech details if you
want to if you already own your website
address which is for example your com
domain name click on
this tab here and enter your domain in
this field and if you don't own one
register a new domain by entering it in
here as an example if I type that in
that URL is unavailable that's because
I've previously purchased this so what
you need to do is think about what your
business name is or what you want your
website to be called and type in your
requested domain name here cool
selecting between commnets org or any
other extension just so you know it's
all the same the best practice is to
stick with com or a dotnet or if you're
a charity generally org but you can
choose from any extension you want so
once you've entered your domain name
just go down the page you can add domain
privacy protection if you want your
details to remain private or you can
deselect that this is an example of what
your domain address looks like if
someone searches for the domain owner if
it's private and this is what it looks
like if it's not private so it's
completely up to you I personally do not
keep all of my domains private so this
is not essential completely up to you I
won't be purchasing this on this
occasion then if you go all the way down
the page do you select all of the
add-ons that are selected by default
over here you don't need this I can show
you later how to keep your website
secure in another video you'll be able
to add your business email without
paying this additional $5 a month fee
when you purchase web hosting this comes
as default and I can show you how to do
that in another video you definitely
don't need this and similarly backing up
your website you don't need that either
so you don't need any of these add-ons
in fact I don't use any of them myself
so it's completely up to you if you want
to now go down to the coupon code if you
went through the URL I said earlier
hostgator.com forward slash discounted
you may already get a really good price
and a few discounts but I'm going to
show you how to make sure that you do is
so just type in the discount code
discounted and click validate
when you do you'll notice that the price
you're paying is much less and if you
scroll up you'll see that you've got a
number of options to choose from all
that a very highly discounted rate so
take advantage of that I generally
subscribe for approximately one to two
years at a time because the costs
involved are so small around five
dollars a month to get my website up and
live on the internet and think about it
if you're running a website your website
should be making you money it's a
revenue generator it's not an expense so
I'll select that then you left it enter
your user name enter a security pin and
then under billing info enter all of
your details and be careful to enter the
correct email address because that's
where you'll receive your new account
opening information with the next steps
in this tutorial so I'm going to take a
second and fill all of that out and then
to the credit card details or you can
use PayPal
once you've done all that scroll down
just check your order then go down click
on the agree to the Terms & Conditions
button and click on checkout now and
we're ready to then log into our account
and install WordPress in the next step
so checkout now after you do that one of
two things will happen either Hostgator
will redirect you to a checkout page
where you'll be able to see your account
details and you'll see a tab at the top
of your screen called hosting if you see
that click on that tab there another
thing that will happen is that you
should receive an email like this from
Hostgator which will contain your new
details your new account details such as
the plan that you've purchased and some
key login information with a username
and password and this is the information
that we'll need what your control panel
is is a control center for your website
that just allows you to install
WordPress after you install WordPress
you're not really going to need this
anymore
so what you need to do is click on this
link here and it should take you to a
screen that looks like this all you need
to do is copy and paste the username and
password just making sure that you don't
have a space at the end when you copy
like that otherwise it won't work and
then log in to your control panel so
I'll do that now
and then login
so here is our control panel what you
need to do now is scroll down and look
for either WordPress or look for
something called quick install so
there's quick install if you've got a
quick install you should be able to see
an area that allows you install
WordPress and there it is there if you
don't see that then you may see
something like this and that will work
as well so get to this page here
it's the installation for WordPress you
should automatically see your domain
populate over here but since I've got a
lot of domains I'll just have to go and
choose it from the drop-down menu
keep the directory field blank
all of this stuff here are upsells and
you don't need this we're showing you
how to install WordPress and set up your
website yourself you don't need any of
this stuff everything from here doesn't
cost you a cent so make sure you select
that keep your directory filled empty
then click Next enter a blog title which
is your website title and this can all
be changed later enter an admin user
such as your first name or any other
admin username that you want to use and
enter your first name and last name also
enter your email address and this is
very important because if you ever lose
your logging details to WordPress and
remember WordPress is the engine for
your entire website it's where
everything is going to be set up
configured and managed so it's the
vehicle behind your entire website so
just ensure you enter the correct email
address and leave this checked yes we
want to automatically create a new
database and we agree to the Terms of
Service and then click install what it
will do now is take a minute or two to
install the amazing WordPress platform
onto your new website once that's done
you'll see your installation details
appear over here what I highly suggest
is that you take all of this copy it and
put it in a notepad somewhere
write it down somewhere save it in a
document somewhere because if you lose
that it may be a little bit more
difficult to get into your WordPress
installation but if you'll also get an
email when you install that to that
email address but it's good to have that
handy then I'm going to click on the
login button and I'm going to open that
login page in a new tab just so I've got
these details handy if your website
doesn't load and you cannot see anything
then that means one of two things
firstly it means that the domain you've
registered has not been connected to
your hosting check out our frequently
asked questions on an a media coach
website and we'll show you exactly how
to fix that right there
the second reason could be that
Hostgator has not yet activated your
domain so what you could do is get on
the line to Hostgator contact them via
the live chat and you should have
someone help you out in the next 10 to
15 minutes so if you come across a page
that doesn't work when you click login
don't worry do one of two things check
that your domain is connected if you've
bought your domain elsewhere otherwise
contact Hostgator and if it still
doesn't work or you can't figure it out
let me know but it can take half an hour
to an hour to activate your domain once
all of that happens so what I suggest is
coming back to the login page
and another important piece of
information here is the login page URL
write this down it will be your website
URL forward slash WP dash admin this is
known as your WordPress dashboard login
whenever you go to that URL after your
domain is activated that will be where
you login to the engine of your website
so if it's not working now come back in
an hour and check again so I'm going to
wait about an hour and come back and
continue this tutorial okay so I've
waited an hour and I'm just
try and load the website again
absolutely perfect and this is the
screen you should see to log into
WordPress so all you need to do is now
copy the username and password and login
to WordPress oops that's a username and
not paste the password and here we are
this is your WordPress dashboard this is
the dashboard that you're going to be
using to create your entire business
website and we're going to be showing
you how to customize the look and feel
of your website add new pieces of
functionality using things called
plugins and it's going to be so simple
the hardest part of this tutorial is
already passed us the first thing to do
when you log in is just go to users and
then go to all users and go to your
username and what I'd like you to do is
change your password because it's going
to be very difficult to remember that so
if you go into that area there scroll
down and you'll be able to enter a new
password here you can enter your own
password so let me just hide what I'm
typing in here I've confirmed the use of
weak password I suggest you put in some
some stronger characters capital letters
dollar signs things like that to make it
a stronger password and then update your
profile now just as an example I'm
logging out of my wordpress dashboard
you won't need this stuff anymore you
can close this you can close your cpanel
the way to get to this screen once again
is your website forward slash WP dash
admin that will take you to this page
here and then you'll be able to enter
your plain password to log in to the
engine of your WordPress website if you
have any questions so far please do ask
in the comments below and if anytime
we're delivering value to you and you're
enjoying this tutorial and it's helping
please do give it a thumbs up
now let's continue on and I'll show you
how to install the amazing website
design so easily in just a couple of
minutes in the next step so let's move
on to step three let's install our
WordPress website design and then
install a ready build template that
looks amazing
and it'll just take a couple of minutes
here's where the fun part starts so back
into your WordPress dashboard go and
hover over appearance and then go to
themes click on themes you need to go to
the area that allows you to add a new
theme and that's just here the
wordpress.org themes then search for a
theme called ASTRA hit enter and
this is the one here this is a theme in
other words design that we're going to
use for our new website it's called the
Astra WordPress theme it's an incredibly flexible
theme that allows you to do a multitude
of things to your website and customize
your website in any way shape or form so
let's click on that click on the install
button and then once it's done
installing you can click on the activate
button when it comes up so there it is
click on activate perfect now let's have
a look at our web site address just so
you know your website is now live to the
real world you've now been able to get
online and that's exactly what you're
looking at you can access this from your
mobile phone or any computer your web
domain is live and running and this is
what you currently see not very good
right now but don't worry in the next
couple of steps you're going to be
really really amazed at what we're about
to do it's really the easiest way to
create a website with WordPress so now
once you've installed and activated the
Astra theme what you need to do is go to
plugins hover over plugins click on add
new
now what is a plug-in before I do this
let me just explain that to you a
plug-in is something that allows you to
add
extra functionality to your WordPress
website for example right now we have a
core WordPress installation but we can
add plugins for various things such as
contact forms we can add a contact form
plug-in we can add an SEO plugin we can
add a WooCommerce plugin for selling
ecommerce online and so plugins come in
various shapes and forms and allows you
to add extra functionality to your
website the plug-in that we're going to
install now is going to be one that
allows you to create instantly a
beautiful looking website template so
what you need to do is go to add plugins
and then search for a plug-in called
Astra starter sites and that's the one
they're Astra starter sites install now
and click activate that will allow you
to import an already built website in a
matter of seconds so if you scroll down
now you'll see that the Astra starter
sites has been installed to import the
ready-made website design what you need
to do now that you've installed all of
that is go to appearance hover over
appearance and you should see an area
for Astra Sites so click on that and then
scroll down it will ask you to select
your favorite page builder and the one
we're going to use is Elementor. Elementor is an extremely flexible WordPress
page builder so click on that you'll now
have an option to choose from a number
of beautifully designed templates and
you can preview on just by clicking on
it and looking through it like that and
you can see that they're absolutely
amazing
these are pre-built
you can deploy these in other words
install these to your website in the
matter of a click or two and then start
editing things on your website
here's this outdoor an adventure one
it's also one of the easiest ones to set
up so let's check this one out if you're
happy with this one what you can do is
then just click on once you preview just
go down here and click on install
plugins you can install the plugins
individually like that again a plug-in
is adding extra functionality to your
website so contact form 7 and Elementor
on are needed to use this particular
pre-built template once you've installed
the necessary plugins you'll then be
able to import this site to your own
website so now it's just letting me know
that this will now import this entire
site onto our WordPress installation and
are we sure that we want to do that yes
give it a few seconds up to a minute to
import all of that data and let's just
wait and I'll show you what the outcome
of that is
depending on the speed of your internet
connection it can take up to a minute or
two so this is what it looks like when
it's done and then we're able to view
our new website and check that out guys
that looks absolutely amazing don't you
think in just a handful of minutes we've
been able to go from getting online to
installing WordPress to installing an
amazing-looking pre-built website that
we can now start going in and
customizing to your taste and I'm going
to give you all the tools and knowledge
you need to do that in this tutorial
right here again if this tutorial is
helping you please do help us by giving
this video a thumbs up and subscribe to
our channel and do share it with your
friends but check it out here's your
homepage here's the about page it looks
pretty spectacular we've got a services
page that has been built by default as
well
and last but not least here's what a
contact page looks like with your very
own webform so customers can come and
fill out that form and you'll receive
that message in your own email address
and this is a good example of a plug-in
we just installed a plug-in called
contact form 7 if you remember a couple
of minutes ago and this form uses that
particular plug-in to have that contact
form functionality on your new WordPress
website all of this cool stuff and it's
ready to go so the rest of this tutorial
is to show you how to customize and
setup your website to make it look
absolutely amazing the next thing we're
going to do is do a little bit of
housekeeping just to set up the site as
we need it without all of the clutter
that exists on it right now so what I'm
going to do is just go back to the
wordpress dashboard and you'll see all
of this clutter that exists and we don't
need a lot of this just follow me and
you'll be fine so I'll take you through
the process of how I set up a standard
website so go to settings and go to
general this is the area where you'll be
able to change your website title and
also a tagline if that's applicable to
you you'll also be able to add a WWE in
front of your website URL what that is
is just a display on your browser it
doesn't really affect anything so it's
just a personal preference for me I like
to have a WWE in front of the URL when I
go to my website and same for your
visitors and so if if it doesn't and you
want to do that all you need to do is
click in between the forward slash and
the first letter and just type WWE and
make sure you're doing in the second
field as well over here now be very very
careful double-check and triple-check
this because if you stuff this up your
website won't load and you'll have to
start the whole process again and
reinstall WordPress so make sure you've
got the forward slash /ww your website
URL in that field and in this field here
when you're confident you've done that
right you can click Save Changes and
what it will do is log you out
automatically and
asked you to log back in when you've
done that next what we're going to do is
delete any of the plugins that we don't
need that have been installed by default
it's just a lot of clutter and a lot of
bloatware and we don't need most of it
so just hover over plugins and go to the
installed plugins area what you're going
to do is scroll down and I want you to
deactivate everything except the Astra
starter sites the contact form seven
Elementor I want you to deactivate
everything except those three plugins
because they're the three essential
plugins that we've just installed and
essential for building our website at
the moment everything else is just a bit
of bloat and it's messing up our side
it's just creating a lot of clutter we
simply don't need it and it also adds
the risk of your website being hacked so
what we're going to do is hover over all
these other ones and click deactivate a
quicker way is to just click on the
checkbox next to each one of the ones
you want to deactivate and go to bulk
actions and deactivate and then hit
apply
if you deactivate one of those these
three by accident don't worry you can
just reactivate it so once you've
deactivated those just check them off
again and then what we're going to do is
delete
perfect so now all we should have when
we go to install plugins is these three
plugins and we won't get any of that
clutter that we had before next what you
need to do is go to pages and click on
all pages when you install WordPress and
you install a theme
sometimes it installs some default pages
just
just to give you a sample and there it
is there the sample page so what we can
do now is delete that sample page so we
can click on trash all the other pages
that have Elementor next to it are
obviously created when we imported that
default template on our website as we
can see up here so you can delete any of
those if you want but I would suggest
leaving them activated because you can
definitely use them as a template then
go in and then start editing those two
pages to make it even faster to finish
your website in fact it could even be
just an hour update a couple of images
update a bit of text delete anything you
don't need and boom there you are you're
done you can launch your website you can
start promoting to all your clients so
once you've deleted a page just go into
trash and you'll just have to delete
that permanently and the same thing when
you go to posts just hover over post and
go to all posts there should be a hello
world post trash that go to trash and
delete permanently now the next thing
we're going to do if you go to any one
of your pages right now and look at the
URL it is not the best possible URL it
could be that is not a clean URL what
you want it to be is something like this
and then if you have a service you want
it to be reflecting the service or the
page that's under it so you want your
URL structure to be nice and clean so
there's a way to update that back in
your dashboard if you go to settings and
go to permalinks right now we've got a
custom structure activated and it takes
that structure over there and that is
not ideal what we want is to delete that
we want forward-slash category forward
slash post name so it'll be your website
calm /the category of a post forward
slash the name of the post now it's
important to note that this only applies
to posts however I think these things
here are pages but I'll get to that in a
second what we'll do is just make sure
you update that and then Save Changes
now go into any one of your pages so go
to pages and all pages let's take the
projects page for example click on that
and what you're going to be looking at
here is the content editing module for
WordPress I'm just going to go back to
the wordpress editor
the settings tab over here and as you
can see the URL for this particular page
has actually changed it's now projects
and if you've seen what I've just done
when I toggle back to the WordPress
editor the website format did not format
correctly when I loaded the website so
you need to use this in the Elementor
site editor module but anyway we've been
able to update the URLs of our pages now
and that's all we need to do as far as
basic housework goes now let's start
creating our home page the next thing
I'm going to do is take you through some
of the general customization features
that are available for you to choose
from to customize this in the way you
want so I'm just going to go back into
my dashboard now and I'm going to hover
over appearance and click on customize
if we start at layout and I click on
that and then go to header and site
identity here you'll be able to add a
logo of your choice if you've already
got a logo created or made on your
computer you can upload that right here
and it will appear over here that's
specified for the logo if you don't have
a logo made already go and check out one
of my other tutorials on getting one
made online for free or how to get one
made by a designer you can change the
site title over here we previously
changed it to make a website so you can
change it in the method I showed you
before you can change it by going over
here and your tagline can be something
about your business something that's
interesting that would make people click
you also have the option of not
displaying the title and not displaying
the tagline that's particularly useful
once you've updated or I should say
uploaded your logo whenever you've
updated something just click on publish
I'm just gonna go back to customers I
just lost my spot there back into layout
and header you can also choose the way
in which you want the header to be laid
out right now we've got a logo on the
left and menu on the right you can also
have logo in the center like that or
that way around or you can disable the
menu completely the last item in the
menu at the moment it's set to a button
and that's this thing here you've got
the option of not showing that or
choosing something else and also the
option of changing that text and that
will update dynamically as you saw and
also changing the link URL you can also
customize the style of the button and do
a few other things that you can have a
look at in your own time so I'll publish
that and this click the back arrow when
you want to go back to your
customization options you can also
choose a transparent header if you would
like to do that what else can I show you
in terms of general customization colors
and background you can choose your base
colors so that red over here is that
highlighted color over there so you can
actually choose based on what your color
scheme to be and if you're in doubt
about the color scheme just go and
Google something like famous brands
color palette and you'll be able to see
the colors that some famous brands
around the world use to get some ideas
of course you can also choose a
background color you can choose from any
color that you want here and that color
can also have a level of transparency to
it if that's what you're after but I'm
going to clear that once it's updated
I'm going to clear that then I'll go
back header transparent hello this is
actually the one I was looking for the
background color overlay will not change
that that changes the bar at the top as
you can see now you can choose from any
color that you want and you can also
change the intensity of that particular
color and also manage the transparency
if you want that Henner to be a
transparent header and that looks pretty
cool actually so this is a popular one
here if you go to black and then make
this sort of semi-transparent this is
actually a very popular style to have
for a header area over there so that's
completely up to you you can also change
the site title color and that's the site
title over here so you can change those
colors and I'm just going to clear that
to a default similarly the hover color
so if I hover over that that's the color
that changes to and also the menu
background color the menu link colors
and the menu hover colors in the same
way so that's all completely
customizable later on this tutorial I'm
going to show you how to create a
drop-down menu and when we do that
that's called a sub menu and you can
actually change the background color the
link color and the hover color for those
drop down menu items as well that's a
bit later on so if you're happy with
what you've done you can publish the
changes or you can clear anything you
want to get rid of so I'm going to
publish that I actually like the way
this looks
similarly you can do a few color
selections for the footer and the footer
is the thing down here for two feet down
at the bottom that's what that is there
you can also change the typography which
is the font style the font size line
height and other stuff like that to make
it more personal to whatever your theme
is for your website or the business that
you have and you can also Google some
popular themes for your industry to get
some ideas around that you can change
font style and sizes just like that and
also the content font size customize
buttons customized menus I'll get into
that later and other home page settings
but you won't need to change any of that
because right now we've got the home
page set to home which is done by
default so that's all fine but I hope
that gives you some sort of an idea of
the kinds of things that you're able to
customize I'm actually going to upload a
logo here but I'll do that in my own
time after I finished this part of the
recording I've got a logo pre-made so
I'm going to upload that but if you want
to learn how to make a logo check out
one of my other tutorials any questions
about any of that stuff just ask in the
comments below and I'll get back to you
as soon as I can
the next thing I think that'll be useful
for you guys is to explain the usage of
Elementor, the plug-in Elementor
itself and how that's used to manage and
customize your website so once you log
into your site and if you go to visit
your site and go to any page on your
website you'll notice this black bar
over here in that black bar you'll be
able to click on this button edit with
Elementor
now let me explain a little about this
area over here so you understand what
the various features are and how you go
about editing all of this stuff so if
you click on a module and then click on
these dots over here it allows you to
edit that particular section what happen
when you do that is this bar will come
up over here on the left hand side
you'll be able to adjust the layout and
the various options within the layout
you'll also be able to adapt the style
for example this is the image over there
you'll be able to select from a gradient
an image or a background of video you
can also select the position of text
stuff like that the Advanced tab is not
one you'll use too often unless you want
to increase or decrease the padding and
that is the space in between items so
you can also add new sections by
clicking the plus icon over here what
that will do is add a new section in
there you'll be able to click the plus
icon there when you want to add a new
section then select what kind of a
layout you want so let's say we want
this layout you've got some three bars
over here you'll be able to click these
dots over here and then drag and drop
elements such as that to start setting
up various modules or new areas on your
website so you can create as many
sections as you want so I'm just going
to delete this section for now and I'm
going to start by just showing you the
options for this particular section here
so you can change the structure as you
can see there right now we've got 3
columns 1 2 3 these two on the side are
providing a little bit of padding so
that this text doesn't get extended past
that area in case it's a very long
sentence and the way you add a text is
very very simple it's a very visual
method of editing a website so all you
need to do is click there and edit just
like you would it's a visual inline
editor
and you can change various bits and
pieces by clicking on them for example
of clicked on the button I can change
the type of button what that button says
and what I want to link to with that
button just like I can when I click on
that text there I can change various
elements and of course I forgot to
mention if I click on the button and go
to the next tab over here I can change
the actual style which includes the
background color and various other
visual elements of that there so that's
a brief introduction on editing things
with Elementor and as you can see I can
click on any section edit text edit
style or even remove that section or add
a new section in between here and there
and starting from scratch so that's just
a very brief general overview of how
this element or plugin works you can
also copy and paste things such as
right-click on a button or copy that
and say I want to paste that button over
here or I can copy that button copy the
button and paste not the button but
paste the style of that button that what
that will do is take whatever that is
there but it will paste the visual
elements of that thing
I can also press control Z or command Z
on my keyboard if you're using a Mac to
get rid of anything you've done just
like you would in Microsoft Word Peh
style there we go
so it's very very cool it's very user
friendly and you can use that to start
editing various modules or you can
create new modules on your own so that's
just a very basic overview of how to use
Elementor and that should give you a lot
of the tools you need already to start
messing around and using a little bit of
trial and error and don't worry because
you can always go back to the previous
state if you wanted to if you make a
mistake so please feel free to mess
around and use trial and error if you're
not confident on the
Paige go to any other page on your
website and you can do the same thing so
you can go to any other page on your
website that's currently existing or you
can create a new page so let's try
projects for example edit with Elementor
and you can use the exact same process a
little bit of trial and error to get a
feel for it and within about 10 to 15
minutes you'll start to become quite
comfortable but if you have any
questions about that so far
let me know in the comments but let's
get into now setting up the home page
module by module so like I said I'm
going to start with editing the home
page and let's start with editing the
top hero area that you see at the top of
the home page so what I'm going to do is
click on that module click on these
little dots over here what that will do
is open up the left hand side editor
menu what I'm going to do is go to style
and what we can do is actually insert a
new image if you wanted to so we can
delete that one and add a new image we
can select an image from the media
library that's already there or we can
upload a file from the computer if
you've got an image and here's a little
tip go to unsplash.com it's a collection
of free royalty-free photography and it
has some beautiful images there that you
can use so just type in a keyword and
you'll be able to find something pretty
cool download for free to your computer
so I'll save that
and now let me just go to upload files
select files and I'm just going to look
for that file that are downloaded when
you select a file it will upload just
wait for a couple of seconds and you'll
be able to insert that media to your
website and there we are so as we can
see now the image is also not just the
image itself it's overlaid with the
darker texture so that the writing is
highly contrasted against it so it's
easy to read
that's the original image there but this
has a dark overlay you can also change
that by going to background overlay and
increasing or decreasing the opacity and
you can also select the color of that
particular background overlay if you
would like to so that's how you can add
an image to the background and so if I
update that and then go to visit my
website let's see what that looks like
there we go that's already looking very
very cool now I'm going to take this a
step further instead of just an image
I'm going to create an additional module
and keep it there to show you what we're
able to do when we upload a video so
there we go I've duplicated that entire
section by right clicking and clicking
duplicate so now I've maintained all of
the style and all of that stuff but all
I want to do is give you another
demonstration of what's possible what
I'll do is click here I'll go to those
dots I'll go to style and now the
background type at the moment is classic
and it is this image I'm just going to
delete this image for now I'm going to
select a background type of video and
what this allows you to do is enter a
video link which will display a video a
dynamic moving video has the
had a banner for your website and it
will look absolutely fantastic if you
choose the right video so I've found a
video on YouTube here that's slightly
entertaining so what I'm going to do is
grab that URL and I'm going to paste
that URL in here and just let that do
its thing so as you can see the video
has started playing I can also select
the start time so let's say 55 seconds
in and an end time if you would like to
you can also add a fallback for the
video if the video doesn't load for
example sometimes on mobiles videos
don't load so you can also add an image
in place of that if you would like to
perfect
let me just check if I want to change
anything in the advanced slide should be
okay
layout okay I won't change anything
there all I'm going to do is click
update and let's refresh to check it out
one other thing to mention if you don't
enter an endtime you won't actually loop
so what we'll do also is enter an end
time let's say eighty seconds and that
video should loop over and over again
now if I go into the background overlay
section you'll see that there is an
overlay in front of the video that's why
the video is a little dark so you can
change the opacity of that to make that
even clearer if that suits your video
and your home page so we'll do that
let's update that and refresh one thing
to note though is that the video if it's
on top of your website it sometimes
interferes with this banner if it's a
YouTube video particularly so I
recommend that if you've got a video you
uploaded onto your website as a video
file and all of this stuff won't
interrupt you won't get this black bar
what you'll get is this is a
beautiful-looking light menu bar that
you would have seen before with the
video in the background but of course
this is just an example for now what I'm
going to do is just move the video down
the page a little and move this image up
the top the way to do that is if I right
click and go to navigator I can actually
just drag and drop the first section for
it to become the second section and
therefore the second becomes the first
and that's what's happened right here
and that is the way that you can start
arranging your website you can also make
the video appear in a certain portion of
your website for example if I want this
module to be bigger I can then go to
these tabs over here drag and drop the
video module click on that and then all
I need to do is paste my video link set
the start time set the end time
and now we've got this beautiful video
sitting in our screen we can also make
that water play we can also mute that if
you want to do not play the music it's
completely up to you
so it's up to you how you want to
arrange that obviously it's all about
personal preference all right guys let's
finish off the homepage if you scroll
down you'll be able to do a few things
you can actually copy or duplicate a
particular section if you like the
layout of that so then you can clone
that you can delete anything you don't
need you can add new modules and just
drag and drop them from all the modules
available in this area here you've got
quite a few to choose from depending on
what kind of a structure you want to
your site and what kind of information
you want to put on there you can choose
from a whole range of content elements
as you can see here very very cool what
I'm going to do is I'm going to scroll
down little I'm just going to add a new
section here let's say I want full width
section I'm going to click on the dots
over here so I can drag in the heading
perhaps and put in some text I can align
that I can also adjust the size of that
heading when I go to style I can also
assign the text color and any shadows
and font that I want to change what I
was gonna do let's see I might also put
in some text under that heading if I
click on that I can adjust this text
I can of course I can align that as well
if I click on that there I should see
the ability to align that and then let's
go to style so that's already Center
aligned I can change the color if I want
to and if I want to increase the spacing
between this and the thing above it I
can add some padding so there we go so
I'm going to unlink all the values so
that I can just add top padding and not
affect the rest then I can add perhaps I
can even add a Google map if I wanted to
to show my location of business if
that's something that'll interest you
let's try some social icons so click on
that I also want to add some padding
there so there's some space in between
the social icons and the text above it
style that's all good okay and then what
you can do with social icons either you
can put your actual social links there
and you can put your Twitter you can put
your Google+ or you can also add other
social links you can choose that from
the drop down over here so we've got a
youtube account so I'm obviously going
to put a YouTube icon and then link our
YouTube channel as a final example I can
add perhaps a perhaps a button under
that I'll just drag that in there click
on that module let's center-aligned that
one let's increase the size of the
button but to make it easy let's just
get one of the existing button styles
let's copy that and then let's paste
that style here
center-aligned I'll add some padding
perfect you can make any adjustments you
want to over there change the text color
at the moment it's white on a red
background so it stands out nicely and
you can obviously change what you want
to button to say and where you want it
to link to
perfect let's update that now I'm just
going to refresh the website so we can
see what we've created there
another thing we can add is a background
there because it's a bit of a fusion
between this and the thing above it so
it would be nice if this area stands out
a little bit so what I'm going to do is
click on the buttons over here then
let's go to style and background I want
to add a classic background and I want
to select an image and for this let's
just select an image from our gallery if
there's one that's appropriate let's
take this one and what I will do so that
it stands out nicely now this image
obviously is too small for this area
that we selected so we'll obviously need
an image that's appropriate and if you
can't find one like I said before go to
unsplash and choose one from there but
I'm just going to give it a shot now
okay so you get the point instead of an
image where you can also do is just
select a solid color
and we can even adjust the color of this
thing here
and we'll make that white as well and
we'll give that a little bit of padding
and we'll give this some padding at the
bottom there we go that's nicely spaced
out
so there we are just an example of how
we can add modules that's obviously a
very crude example but you can obviously
make a lot better by adding a nice
background image or just copying an
existing module such as this we can
duplicate that so it exists there we can
rearrange in the navigator so let's say
we want that there and then we can start
editing things so that it looks good we
can just have - all we need to do is
edit the image and edit the text and
this one is an overlay image so I hope
that makes sense if you have any
questions about any of that just let me
know in the comments below so I decided
to Center align all of these modules
over here and also give the background a
darker gradient so the background
overlay what I did was given a darker
gradient so that the text pops out a
little more and then updated that and
refresh the site and I think that looks
pretty cool now perfect example of using
the existing module and updating it to
make it look just the way you want it
actually minimizes the work you need to
put in to create various modules on your
page and this approach can be applied to
all of the pages on your website going
forward alright so we've created an
awesome home page for our WordPress
website but now I'm going to show you
how to add new pages onto your website
I'm going to show you two ways to add
new pages one way is going to be to use
a pre-built template and the second way
is going to be using or adding pre-built
modules so I'll show you both methods
and both methods are very very fast so
to add a new page just hover over pages
and click on add a new and just keep in
mind you can add an unlimited number of
pages to your WordPress website there's
no limit just make sure it's structured
correctly and I'll show you how to do
that a bit late
Terron so add a title to your new page
so say for our example we've got
services so we want to add a service
called consultancy let's then after we
add a title we're not going to use a
standard WordPress word editing module
we're going to click on edit with
Elementor as that's the easy way to
build our website give it a few seconds
to load all right so now the first
method and that is importing a pre-built
template so what you need to do is click
on the folder icon over here you'll be
able to choose from a number of
pre-built templates the ones that have
Pro written in the top right corner paid
templates the rest are free so let's
just focus on the and the free ones for
now let's take this one for example it
looks pretty slick so what we can do is
we can click on the insert button and
now this is where the magic happens give
it a few seconds to load
to import onto your website it's doing
all of this automatically for you it's
going to import that entire web page
just as we saw right there and now it
doesn't have to look like this you can
click on any one of these modules you
can click on this thing here you can
change this background image if you like
and you can change all the other bits
and pieces like we talked about for the
home page in this very same way
and everything you see here is
customizable from images to the
background to the text and also the
layout you can also click on a module so
let's take this module and you can
actually change its structure and layout
it's very very cool but what we're doing
is using a pre-built template that
already looks fantastic and just
tweaking it and customizing it to make
it look any way you want it's the
quickest way to create a WordPress
website that I know of currently so
that's one method let me take you
through another method by the way if I
press ctrl Z or command Z it allows me
to undo any changes that I've made and
get rid of that entire thing okay so now
here's the second way to add a new page
check this out it's fully customizable
using pre-built modules so now instead
of the pages area over here where you
can select from a number of pre-built
pages what we're going to do is click on
the blocks area so what this allows us
to do is choose from a number of
pre-built blocks to add to the page and
then we can go in and customize all of
those blocks the way we want so if I
click on the drop down here first we
need a hero block that is the thing that
sits at the top of any page the big
image with big writing something that
captures the users attention so let's
take this for example it's free 1 and I
can click insert what that has done is
entered or added this entire block on to
this page now let's go in add a few more
blocks if I scroll down here I can click
on the folder icon again go to blocks
now I'm going to repeat this process and
at around 4 to 5 blocks so you can see
what this thing looks like and seriously
it's the quickest way that I know so I
hope this is really helping you out in a
big way ok let's add a client section
our clients let's throw that on
nice one what else can we add perhaps
some services okay
and then perhaps call to action
something like that now don't worry
about the colors that's all customizable
and to top it off we will add perhaps
our team members that looks alright and
for good measure some testimonials
now feel free to have a look through all
the remaining modules that I haven't
already gone through because there's
some really cool pre-built modules that
Elementor gives you ready to go so you
don't have to spend time setting all of
it up so we've added all those modules
to the page but now what well all of
this stuff like I said is customizable
so say I don't want this dark background
on the top module over here let's click
on those buttons let's go to style let's
go to the background overlay actually
the background okay yep background
overlay you want a classic overlay we
want to add perhaps an image and I'm
going to drag one from my computer and
upload that insert and there we go we've
changed that image and we can also
change the opacity one of the suits your
website you can also change the text of
course change the images
nice one
change all the colors for example etc
etc I can even get rid of a whole entire
block by clicking on the X over there
but I think you get the point you can
even change all of the images here the
text of course and the social links
anything that you need to change just
click on that item and you'll see it
come up and you'll be able to customize
that or even right-click and delete that
particular thing at any time so that's
the quickest way to create a page now
let's click the publish button and then
we can preview our changes there we go
we've created this in as little as a few
minutes with a few tweaks and color
changes this will look fantastic if you
have any questions about any of that let
me know in the comments below but just
for the record I'm going to go back into
the WordPress dashboard and show you
what a pre-built template looks like so
let's exit to our dashboard and then
let's create that other page
and then ed up with Elementor and now
I'm going to select that pre-built
template and save that just to prove to
you that it's easy to set up an entire
page in as little as about a minutes
there we go and I'll click publish and
let's have a look at the changes there
we go a brand new page and it looks
absolutely amazing
the easiest way to create pages on your
new WordPress websites by the time
you've created all your pages and added
them to the menu I want to let you in on
our little nuances that will make a big
difference to your website if you hover
over any pages that you've added to a
drop down you'll see that the URL well
let's go to that in fact let's go to
these two pages they're both pages under
the services parent page so you may have
some parent pages and some child pages
the parent page URL so services for
example should be your website forward
slash whatever that parent pages now for
the child pages such as consultancy
because it's under that item there it
should be consultancy however you'll see
the URL is not that and it's forward
slash just consultancy without the
services so that's not ideal in terms of
a website hierarchy we do not want that
you want child pages of a particular
item above it to reflect that they are
one level deeper so how do we do that go
to any pages that you need to change the
URL of so let's take consultancy as an
example let's go to edit the page you'll
see there's a URL over here that's the
default URL but what we need to do is go
down to the page attributes section so
click on the error that opens up the
page attributes then parent page select
the parent page for this particular item
in this case it's services
and then click update' you'll notice
that this URL has now changed this page
here is now a child page of services so
now when you go to that page the actual
website URL now reflects that proper URL
structure so let's take this one as
another example it's a level deeper than
services in this example so let's edit
page let's go down page attributes
parent page services update now this
page also reflects the proper URL
structure so just keep in mind your
website hierarchy whenever you have
pages and subpages make sure you
carefully select the parent page
so that your WordPress websites URLs
correctly reflect that so it's great for
search engines and it's also very very
good for your human users as well
because they can see exactly where they
are within the hierarchy of your website
so there's a little tip a little nuance
that will add massive impact to your
website's performance and your user
experience so you've created all these
amazing pages but you can't see any of
them in your WordPress menu so now I'm
going to show you how to add those pages
into your WordPress website menu so
let's go back into the dashboard let's
click on that let's exit to the
dashboard so what you need to do is go
to appearance and then menus the menu
structure that comes up here just ensure
that the primary menu is checked if it's
not do that but one of these this is the
menu structure of your website at the
moment so home about services projects
contact home about services projects
contact so now we want to customize this
menu you may have added a whole lot of
new pages so how do we get them on there
and manage this menu so the first thing
is we can drag and drop things to any
order we want them to appear and when we
do that and click Save that will take
effect on the front end we can also
click a drop down and then remove any
particular page we don't want to appear
in the menu when you do this it doesn't
delete the page it just removes it from
the navigation menu thirdly you can go
and select pages that you've already
created so I just created one for
consultancy and for product management
so I can tick them and add to menu
currently if I click Save and then
refresh my website this is the order in
which the pages will appear but you
might not want that for the simple
reason
that product management and consultancy
you can't see it at the moment because
there's not enough space is part of our
services so we want them to appear under
the services drop-down so what we have
to do is just drag that up to the thing
that you want it to appear under and
indent that just like that so that that
becomes a sub-item
of the page above it the parent item
similarly you can do that with any other
pages and rearranging that order over
there allows you to manage the order in
which they appear in the drop-down so
let's save that menu and I'll show you
what that looks like perfect we have
this drop-down but not so perfect
because this is white and we cannot see
the actual words behind it and that's
just a little bit of color management
which I'll get to in a second but first
the other thing you can do in the menu
is also create custom links so say you
want to add a link to a URL which may
not be a page or a post or anything like
that just a random URL so I'll enter
that URL in there and we can call this
home we've already got one but this is
just an example add that to the menu
I'll get rid of that and that's just a
custom link to that particular page you
can add a link to any page you want
anywhere on the Internet
save that alright so we've customized
down menu
however the drop-down menu is coming up
as white that is because it's a white
background and it's white text so it's
all blending in so what you need to do
to fix that is go back into the
dashboard and go to customize appearance
and customize then go to colors and
background go to the header transparent
header it's at the moment it looks like
that but what you need to do is just
scroll down and under the submenu so
this is now a submenu we need to change
background-color to reduce transparency
and now you can see the words so I've
just reduced this from full transparency
to no transparency so you can see the
words or you can make that a solid color
just for the purposes of an example so
it's super clear that's what I mean
we're going to do what I did for the
header so it was so we wanted to be the
same as our main menu so it's black and
sort of semi-transparent so I'm going to
click on that submenu this one here
sorry black and sort of semi-transparent
now that should be similar entities if
that's still hard to read because of
things behind it all you need to do is
increase transparency and that will be
crystal clear like that so feel free to
play around with that so that it looks
exactly how you want it to look you can
also change the link text color which is
the color of your words over here and
also the hover color for purposes of an
example let's make that green and let's
make the hover reddish so it's green now
red but we're going to clear all that
because that doesn't look very good
so there we go we've added a beautiful
drop down menu and we've made it super
clear okay so now I'm going to show you
how to create or update one of the most
important pages on your WordPress
website and that is the contact page
this pre-built contact page looks pretty
good but we can do a lot lot better so
let's edit this page edit with Elementor 
I'm going to show you how to use some of
the pre-built contact modules or
pre-built contact page templates to make
yours look much
than it is right now all right so we're
gonna scroll down click on the folder as
we've previously done before scroll all
the way down and look for some contact
templates okay this is the one here it's
free and it looks pretty cool so I'm
going to insert that now what that will
do is it won't get rid of your existing
modules but it will add the new modules
down the bottom so what I'm going to do
now is pick and choose the ones that I
like now I much prefer this header over
here as opposed to this one here so what
I'm going to do is copy paste now that
that's there I can delete this one I
like this area here with the form and
the contact information I think that's
pretty cool I can also delete this as
I've copied that to the top now this
also looks pretty cool these three
columns here but for the purposes of
this demo what I'll do is delete that
because we don't need that and in terms
of a map this full width map using the
new template looks much better than this
one here so I'm going to delete the
smaller one so now what we've got is a
bit of a customized contact us area and
also with a social area over here that
can be edited or customized by linking
to your social channels at any time
we've got a map here and what I
recommend is you put in your exact place
of business over here your exact address
so that customers can find you very
easily and navigate to you especially if
they're using a mobile phone
perfect
of course I had to highly recommend that
you edit all of your contact information
over here your email and any other links
if you have them
such as social media links otherwise
just delete those individual modules so
that they don't appear on the page and
then update that click on the Update
button and we can now view the page
so here we are here's what our contact
page now looks like and last but not
least to polish off your brand new
WordPress website I want you to be able
to receive messages from all of your
customers that visit your website so how
do we customize this form over here what
we need to do is go back into the
dashboard and we need to go to contact
and contact forms this form that you're
seeing here is created using a plug-in
called contact form 7 so if you go to
plugins and install plugins you don't
have to do this I'm just showing you
contact form 7 that's the plug-in that
is creating the functionality for us to
have a form on our website for your
users to fill in and submit so if I go
to contact in contact forms this is the
actual setup of that form so let's click
on that these are the fields that your
form has currently and you can actually
edit the form template by editing these
fields over here or by adding new fields
such as telephone and then you can just
click insert tag and that will add that
to your form but I'm not going to do
that for now here's the important part
here in mail we wanted to send to your
email address so make sure you enter
your email address over here so that
when someone submits that form it comes
to you we want the from to be the email
address that the person who submits the
form is using or enters in that box so
that is the your email when it says your
email it means their email the customers
email so let's make it from your email
and subject will be the subject the
reply to will be the email address that
your customer enters and this is the
message body this is what you will
receive in your email
okay so let's save that for the time
being
now go to messages when the forum
submitted a notification will come up
just to validate that the message has
gone through so you can update that
message
similarly for message files and
validation errors etc etc so let's save
that for now okay so now I'm just going
to refresh our website I'm going to load
up my email as well just so I can show
you a live demonstration so test
customer customer that's whatever their
email is and they'll leave a message so
let's try that
there's the notification thanks for your
message and now I'm just checking the
email address to make sure that that has
been received there we go this is the
message that I received and the subject
is coming up as your subject so that's
not right we can configure that in a
second
if I click reply you'll see that the
reply to is the customers email address
which is absolutely perfect everything
else is fine the only thing I need to
update is this subject so let's try that
again let's go back into the
configuration mail subject and the
reason this has happened is our form on
our website doesn't actually have a
subject field so therefore it's he's not
populated and doesn't come up with
anything so what you can do is add your
own thing so for example whatever your
website's called so demo one of your
websites called customer contact
saving that I'll refresh this let's try
that again alright perfect there we go
there's the message we received now I've
received in my inbox which subject
whatever I put in there and that just
means that when I reply to the customer
they'll receive the reply with that
particular subject you know exactly
where the emails come from and you can
start off communications so there you go
you now have a fully functioning contact
page with a fully functioning webform
for all of your customers to fill out on
your new WordPress website and also a
map so they can find you easily it's a
very very effective contact page to get
the most conversions out of your website
as possible any questions about that
please do ask in the comments and I'll
be more than happy to help you out so
here we are guys that brings us to the
end of this tutorial
you now have all of the skills and
knowledge that you need to make an
amazing WordPress website by yourself
even if you're just a beginner and most
of it was drag-and-drop and using
pre-built templates please give this
video a big thumbs up and subscribe to
our Channel and click the notification
bill so that you can be notified
whenever we release another awesome
wordpress website tutorial of course as
always any questions ask in the comments
below and until next time thank you for
watching
