How to Make A Business Website Using WordPress & Elementor

Updated: January 4, 2018
Filed Under:

Learn how to make a website for your business using WordPress, Elementor, & Astra. These are all 100% free tools that I personally use.

In this how to make a website 2018 tutorial, I will show you more than just how to create a website, I will also teach you how to SEO optimize your website, and how to generate leads from it.

This tutorial is comprehensive, my longest how to build a website tutorial. I hope you enjoy it.

Astra Theme


Elementor


InMotion Hosting


In this video we are to create the website
that you see right now it is ideal for any

type of business and the best news for you
is that all of the tools that we are using

to create this website do not cost anything
the only cost to complete this website is

just basic web hosting that you will need
let’s take a quick look at this website on

the homepage here we have this beautiful full
image here in we have this contact form in

the be lots of spots for you to put information
about your business and the exact services

that you provide and at the bottom we come
back with another contact form and contact

information for the business including a map
and then we have this services page right

here which you can highlight the various services
in this beautiful format that you offer for

people that we have a frequently asked questions
page here were were using this very flexible

accordion style design and we have this contact
form here on the bottom you have an about

us page that will show some of the information
on your business and then we also have this

tab section here that you can communicate
more about your business to your website visitors

each page organ and have this contact form
on the bottom and then we have the actual

contact form page here that is already preformatted
for multiple office locations and then we

also have this contact form in the header
you can see right there we have this large

area that people’s eyes are drawn to to to
show your phone number so whenever someone

comes your website there is no question where
is your phone number for them to be able to

contact you directly hi my name is Adam from
WPCrafter.com where I make WordPress tutorial

videos for non-techies and I’m excited about
this video now this is a longer video than

most of the videos I create have already put
on YouTube over 250 tutorial videos all about

building websites and this probably will end
up being the longest video and it’s not that

building this website takes as much time it’s
that I go over every single detail and I try

to leave no stone unturned in this tutorial
video I try to just lay it all better for

you and give you all of the information on
how to create a beautiful but practical website

that you can actually use today now throughout
this video I’m going to reference the video

description box if you’re watching this on
YouTube and just you know verse eight video

of mind and when you scroll down this area
right here is the video description box and

when you click on show more it will show you
all of the information in that video description

box so throughout the video when I’m referencing
this video description box that is where the

information is hey if you find the information
in this video is valuable to consider clicking

on the subscribe button and if you want video
notifications of future videos that I make

there’s a little bell off to the right of
that subscribe button you can click on that

and you too will let you know when I’ve uploaded
new videos so let’s not waste any more time

let’s get to making this a beautiful website
right now so now let’s review everything that

you are going to learn in this video first
thing you learn is how to choose a domain

name and set up a web hosting accountant that
is where your websites going to be in the

cloud the annexing order to learn is how to
install an SSL certificate now if you’re not

familiar with that is it’s called a security
certificate and it’s you know when you go

to the website and you look where the web
address is they’ll be a green padlock off

to the side you get that green padlock with
an SSL certificate and you have to have an

SSL certificate I don’t know why more tutorials
don’t cover adding an SSL certificate to your

website in fact if you do not have an SSL
certificate not only will you do it not say

that green padlock and say secure it’s going
to say and not secure this is how the work

of some comes to your website starts entering
anything in it will say not secured now I

don’t know about you but for me I to not want
someone coming to my website and have it a

message that says not secure that’s why it’s
absolutely crucial that you install an SSL

certificate in your to learn how to do that
in this video Mexican learn how to create

a logo and also tell you where you can go
and order logo if you wanted to do that but

I’ll give you some tips on how to create one
for yourself and will also learn how to select

a color scheme or a color palette for your
website and also choose some fonts that you

want to use on your website these are the
three things that when you add to your website

it’s going to make it unique it’s gonna make
it stand out and it’s going to represent you

and your brand next you are going to learn
how to use WordPress that is when everything’s

going to be built on and you’re also going
to learn how to use Elementor now Elementor

is what’s called a page builder and that’s
our to make all these beautiful pages on your

website and lastly you are going to learn
how to do on page SCO all of your website

you’re gonna learn how to fully set up your
site from an SCO perspective so when Google

comes to your website the information is going
to be there to communicate to Google what

your website is about and they Google could
take that information and show your website

to people that are searching for various things
and working to go through SCO in this video

and were also going to go through creating
automated backups of your website so you’ll

never be having to worry if something happens
if you’re going to have a backup you can have

off-site backups and working to cover security
how to secure your website so now let’s talk

hosting and more importantly web hosting and
I want you to know that this is gonna be the

most important part of any website is the
Web hosting company that you choose to go

with it and it’s going to determine how fast
your website loads and that’s actually very

important crucial ingredient to ranking well
with Google from an SCO perspective and just

from a user experience perspective speed really
is everything in support for you is really

everything as well some and give you some
tips right now on how to choose a good Webhost

so injured and to want avoid EE IG and Go
Daddy companies EIG stands for endurance International

group and essentially it’s a big conglomerate
that buys up web hosting companies fires all

their support staff consolidates everything
and what ends up happening is the quality

of the web hosting service tanks the quality
of the support tanks everything just tanks

and see what avoid these E IG based companies
and I’ll give you some of them all I’ll try

to put a extensive list on my website but
some of them are Bluehost Hostgator there’s

our Vic see there’s probably about 50 different
DIG owned web hosting companies and you really

just want to avoid all of them and you can
read some reviews on people of had really

bad experiences with TIG-based companies and
also with Go Daddy now Go Daddy a lot of people

get Go Daddy hosting because they think I’m
just can go to Go Daddy and get a domain name

there and then they get the hosting as well
I will tell you their quality of service is

extremely extremely poor with Go Daddy websites
load very slow before something on your website

called caching which will cause all kinds
of problems with your website and they don’t

really give you an option to use something
different so I’m struggling and urge you to

avoid DIG and Go Daddy companies for web hosting
and you also want to avoid the other extreme

which is these small mom and pop web hosts
and the reason is is because of your tiny

Webhost you don’t really have the money to
invest in the best hardware but more importantly

something called DD OS mitigation and so DDO
is mitigation costs equipment costs tens of

thousands of dollars and mom-and-pop hosts
they simply don’t have that they don’t have

the depth of support to really be able to
provide the best web hosting experience next

you want to choose a web hosting company that
gives a free SSL certificates and will allow

you to upgrade to something called PHP seven
I know this is a little technical let me just

make it simple for you a free SSL certificate
is very important I just explained prior that

you have to have an SSL certificate on every
single website will if your web hosting company

doesn’t provide one for free they could cost
between 50 and $100 per year per website if

you’re not getting it for free from your Webhost
so you can get very expensive very quick and

that’s why I will always go with the web hosting
company that offers free SSL certificates

and the single PHP seven on the Nate show
you what it is it really takes two seconds

to upgrade it but when you upgrade to this
version 7 of it it’s going to make your website

so much more faster and you really need to
go to the Webhost that gives you the option

to change it so I know those two are technical
things when actually show you how to do them

in their very simple with the hosts that I
recommend so right now I want you to visit

a website I’ve set up its order new hosting.com
you could just visit order new hosting.com

it’s gonna take you right over to this page
right here and it’s going to have three Webhost

that I recommend that meet all of these criteria
there to give you free SSL you can be able

to upgrade your PHP they are reliable companies
are not small mom-and-pop companies but there

also not owned by these big conglomerates
and these three web hosting companies are

pretty much universally regarded as three
of the very best web hosting companies that

you can choose to go with so there’s InMotion
hosting A2Hosting and Siteground hosting now

if you go through the link here it says click
here to order service from any of these three

web hosting companies I also throw in a bonus
of some of my paid training courses and the

reason I do this is to make your WordPress-based
experience as awesome as possible and as smooth

as possible so instead of having to purchase
these courses to get this training I will

give this to you for free so for InMotion
hosting though it’s going to be the best value

your and get the biggest discount when you
sign up and it’s going to give you the most

courses with it but you can come here and
see the different packages that I have now

also keep in mind I will probably add hosts
to this list as time goes on so when you visit

this link order new hosting there might be
one or two extra web hosting companies here

listed now let me share with you some of the
pricing of these three web hosting companies

and kind of what differentiates them all let’s
first start with Siteground hosting here is

their website Siteground is going to be the
most expensive of the three web hosting companies

let me go ahead and click on the web hosting
plans here so the least expensive plan is

$3.95 per month but you have to pay for one
year or think they might also offer a two-year

term now here’s the biggest negative is its
metered hosting which means it’s gonna limit

you to the about 10,000 visits per month to
your website and then they have these other

plans here that will L allocate for more website
visitors to your web sight but look at these

pricing here so this is the first term discounted
price so if you go with the most expensive

plan it’s 1195 but the regular price is $30
a month which I find a bit on the high side

however they are going to give you a phenomenal
experience in terms of support and speed of

your website the next one is A2Hosting they
are pretty good as well they are kind of in

the middle of the cost of InMotion and the
cost of Siteground and they also have a really

good performance for your website if you choose
them for your hosting and they provide the

free SSL certificates like some of things
A2Hosting is doing their putting together

some really neat solutions for people that
have their website on their service and lastly

is InMotion hosting right here and I have
a special deal lined up with them were your

to get 57% off your web hosting and they have
these three plans right here I’ll explain

the main differences between these three plans
the launch plan is can allow you to host two

websites the power plants can allow you to
host six different websites and April plans

can give you additional resources for your
website and it’s can allow you to host an

unlimited amount of websites so you can choose
which of these three that you want now what

happens is you take your mouse and you hover
over the order now button and then you get

this little panel that reveals and you can
choose the term that means you want to order

it for three years two years or one year you
get your greatest discount the longer the

term that you purchase it so inexpensive to
get three years of hosting here so out of

the three different hosting companies they
provide the best SSL certificate it’s the

easiest to implement and they have just a
fantastic service you can call up for support

when you need help and they also have live
chat and all of that and they also have the

best pricing out of these three so let’s go
ahead and go ahead and order the launch plan

I’ll order it for a year it’s gonna take me
on over to the shopping cart and then what

you’re going to need to do is you need to
choose a domain name that’s gonna be your

website address however if you already have
a website Avenue address that you may have

registered someplace else you can use that
as well so I’m going to go ahead this is just

things you want to get the other plan that
might have additional resources on the just

choose no things right here the first thing
is we choose a data center Washington or Los

Angeles now here’s the thing before the Internet
was as mature as it is you probably want your

web hosting company to be near you but it’s
not like that anymore there’s gonna be essentially

next to no speed difference going across seas
between UK the United States Canada Australia

Asia Europe it’s going to all be really fast
so if you were in the UK or Europe I would

choose the Washington DC East Coast location
so I personally have mine at the Los Angeles

location right here the next option is right
here and we can have it automatically install

WordPress for us this is going to skip a step
for us and allow this whole process to go

faster so what you go ahead and click on install
WordPress and then go ahead and click on continue

now here’s were working to choose a domain
name and we can purchase a new domain name

or we can use one we already own security
own a domain name you would go ahead and choose

this box right here enter the Dumont domain
name in if you don’t own a domain name on

this first option right here you would enter
the domain name choose whether you wanted

to be.com that or biz info or US and then
do a search for an available domain name you

do that we already have a domain name right
here someone to go ahead and enter that in

and then I would go ahead and click on continue
then it’s gonna take you right here and it’s

can it ask if you’re returning customer or
a new customer so working to do new customer

go ahead and click right here and enter a
email for you make sure this is entered correctly

because all of your receipts in your initial
set up organ to be sent to this email address

or go ahead and pop and email address in right
there okay and then go ahead and click on

continue and it will take us to the next step
okay so right here you’re going to essentially

put in all your billing information first
name last name your address and right here

I want you to do something for me words is
referred by if you would enter WP just like

this that way they know that you came to their
website through my website and that’s going

to make it so I’m able to give you access
to those courses all three of these web hosting

companies when you click on the link and you
go there new order service they give me a

small referral fee and that’s how I’m able
to make these videos were I don’t show you

advertisements in the front of them and I
don’t charge people to watch these videos

and I’m able to give them for free it adds
nothing to the cost and in exchange what I

like to do to make it nice for you is to give
you access to those premium training courses

that I put together so just go ahead and words
is referred by put in WP just like that and

you can scroll down here enter in your credit
card information now on their check out they

don’t take PayPal however if you want to pay
via PayPal you can contact there live chat

or even call them up if you wanted and they
you could just let them know you want to pay

via PayPal and they’ll set you up to be able
to pay via PayPal just make sure to let them

know that you were referred by WP and that
will be fine and adult Dell such up with the

PayPal right there then go ahead and click
on review your order and you can process your

order and then right after it’s all processed
you’re going to receive a few emails let me

pull up those emails right here so you can
see with her and you look like this will be

the first email you get right here it’s essentially
going to be your receipt and it has your order

number now if you wanted those core access
to those paid training courses for free this

is the email you just need to forward off
to me my email is adam@wpcrafter.com I also

have instructions on my contact page of my
website I just need to see a copy of this

receipt in order to verify everything and
so you can just file this offer your records

but this right here is really the email that
you need it’s going to be your welcome email

and there is a going to be a button right
here that’s is to get started set your password

here now when you click on that it’s going
to take you over to InMotion hosting’s website

and that’s where you’re going to create a
password for your account this new account

that you just ordered you will be able to
create your own password so go ahead and click

on this right here go to InMotion’s website
and set up a password okay now after you set

up a password for your account just go ahead
and click on AMP login and it’s can it take

you to the login form here for InMotion hosting
so now you can pop in that email address and

you can put in the password you created and
then click on this I am not a robot now if

for some reason you didn’t receive those emails
I would recommend giving InMotion hosting

a call sometimes people have maybe entered
their email address wrong and a simple phone

call to them will resolve that somebody go
ahead and log into my account right now and

that’s pretty much all there is to ordering
a domain name and a web hosting account so

now that the web hosting account is set up
I want to go ahead and show you how to enable

this thing called an SSL certificate and do
a few other housekeeping items that are very

important for your website now if you want
with one of the other web hosting companies

no fear the control panel for most of this
is going to it’s a standard thing called cPanel

now each hosting company might make their
cPanel visually look a little different but

the same items that we need to go to there
going to be the same for pretty much all of

these different web hosting companies and
so here it says cPanel so I want to scroll

down in the first thing I want to do is click
right here it says manage free basic SSL some

going click on this and what this is for is
with InMotion enabling the free SSL certificate

for the domain name that we just ordered show
the demo.com so the first thing is right here

we need to see which domains are eligible
and so obviously just showing the one that

I connected to my account might go ahead and
click on the checkbox and click on check eligibility

and what this is just making sure is that
if you didn’t register a new domain name through

that order process and maybe your domain names
with the different web registration website

domain name registration company that is properly
pointing to InMotion hosting Summit go ahead

and click on check eligibility Artie know
it’s going if it’s going to be eligible and

it’s can further confirmed with this checkmark
right here so I’m in a switch it from off

to on like this and here is some additional
information is basically saying that it might

take 10 to 20 minutes for this new SSL certificate
to go into effect I’m sure it’s gonna be a

lot less, go ahead and click on run a check
now so this is just gonna verify if the SSL

certificate is working so when I go ahead
and click on this it’s gonna do the check

and it says right here that the scan has been
initiated and this can take 20 minutes to

complete so okay so it’s checking to see if
it’s working and that’s okay because we have

some other things we could do while this security
certificate is being issued so what I meant

to do is go ahead and click on AMP again right
here in the top right and it’s good to just

take us back to that control panel now what
I want to do is click on where it says cPanel

and this is that industry-standard control
panel where you essentially manage everything

before your web hosting account create email
addresses and all of that someone go ahead

and click on a cPanel right here and it’s
can open up in a new tab now this is the way

that InMotion a hosting made their cPanel
look and it’s gonna essentially look a little

different with every host but like I said
these options like email account for all these

types of things that they’re going to be the
same for all of these web hosting companies

so a lot of them right here you can actually
just enter what you want so if I wanted to

create an email address I would just type
email like this and it’s going to show me

everything that matches that that’s the easy
way to jump around and find things so first

what I want to do is upgrade the PHP version
and that was that little technical thing that

I was talking about in the prior segment of
this video so I’m going to just manually scroll

down to where I have that option and so I
actually already past it so for me it’s underneath

software and it’s right here where it says
PHP configuration now I’m sorry I know this

is kind a little technical but it’s only time
you need to do something like this and the

benefits are huge so I’m in a click on PHP
configuration and it shows right here that

I’m already on a PHP version 7 this actually
must be a new thing with InMotion hosting

where they’re automatically putting people
on PHP version 7 because the benefits are

there and there’s all these prior versions
like if you go to Go Daddy you might end up

on this really old version that’s four years
old and I saw a lot of the web hosting companies

are in a by default put you on an older version
because there’s more compatibility and things

like that less problems for them however your
to get the best and fastest experience with

WordPress if you’re using PHP version 7 and
all of those web hosting companies that I

recommend on order new hosting.com dear good
have this option to go in here and choose

the PHP version that you want and connect
so I wanted to cover that some to go ahead

and click on go back because there’s one more
thing I want to do right now and that is create

an email account that will really use a later
so when your website needs to send an email

out it’s going to use this email account so
medical here and click on email accounts and

this is where you can create any number of
email addresses for your domain name so if

your business add some better to have an email
address that uses your domain name versus

Gmail.com or yahoo.com it’s better to use
a proper email address from your domain name

so all you have to do is enter the front part
of the email address here enter a password

right here put it in again here you can choose
how much storage you want the mailbox to have

and then you would click on create an account
to so I’m in a go ahead and fill this out

now right now I’m in a click on create an
account and it shows that the email address

adam@showedthedemo.com was created now what
you’re going to want to do now is get the

actual email settings that you can use in
say your email program or your cell phone

your iPhone or your android phone if you want
to load up this email address in there and

what you want to do is click right here with
this set up mail client so when I click on

set up mail client it’s going to give you
the instructions for each of these different

programs that you might have I don’t do that
I usually just scroll down here and I get

these manual settings and right here the settings
that you’re going to want so it’s going to

be the username the password you set that
up here is going to be the server and you

would most likely be choosing IMAP working
to use all of this stuff right here later

in this video and we set up the email sending
for your website so the contact forms when

people submit a contact form and all of that
they all make sure that they get to where

they need to go so if you wanted right now
you can just maybe highlight copy and paste

this into a notepad or something else on your
computer so later it’ll be easy to highlight

copy and paste these settings into the email
sending program phenomena go ahead and click

on go back and you can keep adding as many
email addresses as you would like right here

and so if you’re accompanying you have 10
different employees you can easily go in here

and set up new email accounts now also you
can set up email forwarders and that’s where

you say want to have an email address called
info@yourdomain.com and but you don’t want

to separate mailbox that you have to check
you want those any email sent to that email

address you want them sent to a different
email that’s easy to do by setting up a forwarder

so let me go back and click on home and it’s
gonna take us back to the home of the cPanel

and you can set those up by clicking on the
forwarders so a lot of these different options

you have here in your cPanel there are pretty
basic and they make sense you will really

only use like four or five of these different
things email accounts may be forwarders and

you know use one or two modules are ready
that you see here in your accounts so now

the last thing that we need to do is to make
a couple modifications to WordPress and we

in the ordering process when you set up your
order for a motion hosting you chose for WordPress

to be automatically installed but we need
to make a couple tweaks to that so scroll

down here to where it says a word press to
go ahead and click on that it’s gonna take

us into this application installer called
soft calculus only scroll down a little bit

right here it’s gonna show us that installation
right here now I didn’t mention this but right

here in that welcome email that you received
from InMotion hosting where you clicked on

the link and then it took you over to create
an account password if you scroll down a little

bit more in the email right here is that WordPress
login information so I created this username

and he created this password so you we are
going to basically make a couple tweaks to

this right now so let me go ahead and minimize
that so here is the installation that it did

so let’s go ahead and click on right here
where it says edit details someone go ahead

and click on that and we need to change a
couple things so right here where it says

the URL well we added that SSL certificate
so now when people come to our website they’re

not going to type she TTP 30 and instead type
HTTPS because it’s a secure site now so I

need to modify the URL to save HTTP’s so this
will be the address when someone comes to

my website next I want you to scroll down
just a little bit here to where it says admin

account so first thing we need to do is change
the password and in order to actually have

these changes going to affect we have to use
the admin account that was created and sent

in that email so if I put that email again
and I go right here and I highlight the username

that was created and I copy it into my clipboard
you can do control see your command see on

your computer keyboard or right click and
put it in the clipboard and then paste it

right there then right here we can choose
a password that would be easy to remember

some go ahead and enter a password and now
okay once you’ve entered in the password you

wanted changed to scroll all the way down
and click on save installation details and

it’s going to go ahead and make these changes
change the password and add DS so that security

certificate will work by default with WordPress
right now which says to me that the installation

it details were edited successfully so this
is good now I can go ahead and click on cPanel

right here to get out of cPanel now I’ll tell
you we pretty much done everything that you

needed to do to install an SSL certificate
and optimize your web hosting account for

speed now what you should do is visit the
website go to the URL but type in a HTTP as

and then your domain name and this is what
you should see this is the default installation

of WordPress don’t worry working to change
this all completely and make it look beautiful

but what you want to see right now is that
if you’re checking this in Google Chrome then

you should have this green a padlock and it
should say secure actually here let me move

my web browser down just a little bits you
can see that it says secures this is kind

of what you see sorry it’s kinda scrunched
on the top left there so essentially if it’s

a secure that means your SSL certificate is
installed it’s active when people visit your

website via HTTPS it’s going to be encrypted
and secure which like I said over and over

you gotta do this for Google it’s easier if
you do it in the very beginning and if you’re

in a have any kinda e-commerce on your website
or have anyone fill out a form and encrypts

a connection and allows you to use your website
for those things so we’ve actually got a ton

done so far getting the domain name the web
hosting account getting everything optimized

but this big hurdle of getting this SSL certificate
installed and activated now let’s log into

WordPress for the first time so to do that
I want to click back into the cPanel and let’s

take a look at the URL to log in to your WordPress
website to scroll back down to where it says

WordPress and we were just in here a moment
ago and here is that current installation

we have so if I go ahead and click on edit
details again and scroll to the bottom of

that page this is the URL the link to your
website and you can see now it’s HCT and right

here is the link to the admin URL this means
essentially the backend that you’re going

to log into to make all the magic happen in
WordPress and you could see its HTTP’s the

domain name and then right here it says WP-admin
someone go ahead and open that in a new tab

right now and when I click over to it you’ll
see the WordPress login now right here we

can use the username but it’s that real weird
username or we can use the email address and

then that password that we changed it to just
a moment ago so let me show you my email so

here is that email again and when I scroll
down here is the login information here’s

the link but this isn’t the right link is
it doesn’t have that S right there but here

is the email username and Artie change the
password so what is nice is you could leave

that username or what it is if you want and
just always use the email address to log in

so I’m in a go ahead and copy this email address
right here and I’m at a pace that right there

and then right here I’m going to enter that
password that I changed the password to then

what I like to do is click on this checkmark
here that says remember me this is so you

don’t always have to login every time you
want to get to the back end of your WordPress

website it’ll leave you logged in for quite
some time so go ahead and click login and

now you are logged into the backend of your
WordPress website now initially when you first

log into WordPress and if you’re not familiar
with WordPress it’s like oh my gosh look at

all this stuff you have got all these menu
things here on the left and I’ve got all this

information showing up here on the right and
I will be frank with you yes WordPress takes

a little bit of getting used to I don’t feel
like it’s a steep learning curve because if

it was you wouldn’t have nearly 30% of the
websites on the Internet being powered by

WordPress it’s it’s going to take a little
bit of getting used to but you will and I’m

a try to explain some of this and give you
just a basic overview of WordPress right now

and go over some of the things I like to do
to WordPress right after I do a fresh installation

of it so let me show you my website to kinda
give you an idea of what the structure of

a WordPress-based website is so were back
to this page and this is how any webpage is

structured you have something called the header
and that’s the area from the very top of the

screen just below the logo this is called
your header and it’s the same pretty much

on every page of your website and typically
in your head or Juergen have a logo and you’re

going to have a menu now the most common way
to have this laid out is your logo on the

left in your menu on the right but usually
you’ll have other options as well may be the

logo in the center and then the navigation
just beneath it so that is your header it’s

typically the same on every page number to
scroll all the way down and right here is

your footer and this is also pretty much the
same on every page and in this footer I have

these three columns that have various links
I’ve got this column this column in this column

now every page you click on on my website
it’s typically going to have this same footer

now what’s left is everything in between K
from top to bottom in between that is usually

just unique to every single page of your website
that you’re on it’s going to be different

so for each page you are essentially going
to be putting the content in that is underneath

the header and above the footer and what we
do to create these dynamic layouts is we use

something called a page builder and that’s
the tool that were going to use to help us

lay out all the content below the header and
above the footer sets your basic structure

of every page of every website now let me
just try to show you how that translates when

you’re logged into the backend of WordPress
so the main thing powering a WordPress website

the visual look of it is called a theme and
if we go to appearance there’s this option

here that says themes now these are the default
themes that are installed when you first install

WordPress but there’s an option here that
says add new and this shows you thousands

of WordPress themes that would pretty much
dictate the style of your websites you can

see how this one right here looks totally
different this one looks totally different

from a color scheme from a structure perspective
so you have all these themes that kind of

allow you to take care of a lot of that structure
in any of these themes you can click on and

click on install and switch that theme and
of course were going to install a theme in

this video now underneath appearance we also
have widgets and menus so I explained what

the menu was right that was that navigation
menu on the top right and we would create

those when we click on menus are right here
we would create a menu and we put menu items

and we can have that look how we wanted to
look and I’ll do that later in this video

the footer is something called the widgets
so those three columns that I showed you on

my website right here these are different
widgets I know it’s of some odd terminology

but it’s widgets and there are these widget
areas so the default theme I have installed

on this site right here has two footer area
is in you just drag and drop these things

called widgets in there and that’s how you
get the various comp bits of content into

the footer number to demonstrate all this
right now I’m just trying to give you an overview

of all of that so that is where we do our
header in our footer now if we want to create

a new page all we do is we go right here to
pages and then we click on add new now since

this is a fresh installation I only have this
sample page right here but if we wanted to

create a new page of content we would just
click on add new and we would give it a title

and we would put our content in here and then
we would click on publish and then that page

is now part of your website then at that point
you can decide if you wanted to create a specific

link to this page in your menu or have some
other way of making that page available to

the people that are on your website so your
WordPress site is going to be basically a

bunch of different pages of content and there’s
also something called the posts and posts

are similar to pages however there kind of
date specific and what that means is you typically

if you would put your content that isn’t your
cornerstone content into posts and these are

referred to as blog posts let me show you
what I mean by that so far back on my website

right here so say for instance I click right
here and I have my contact page okay and this

is a page it’s not a post so my contact page
will be that my help page will be that my

homepage will be that my recommended page
these are pages okay but when I click on my

homepage right here these are all pointing
to posts and so here’s a blog post about this

particular thing in about this particular
thing and I organize those in posts so there

separate in their organized separately from
my pages that I have in WordPress so your

typical business you would have your homepage
or about pager services page your contact

page those you put as pages but if you wanted
to post current information may be business

updates or something along those lines you
would add those two posts where you can categorize

them and organize them and just keep them
separate so that is this difference between

pages and posts now whenever you upload an
image to WordPress it’s can end up here in

the media library it’s completely empty right
now and so were going to be adding some content

there let me show you some of the administrative
stuff with WordPress so when we first go to

settings we have these various settings right
here your general settings this is where you

would enter in a site title for your site
you would set the administrative email address

so any kind of notification that you would
get from WordPress you would enter that email

address right here you would set your time
zone here so say someone left a comment on

your website and it gets emailed to you the
the timestamp there are the date and times

that would make sense to you because it’s
sent using your time zone and then we have

these various other settings right here and
I’m in actually go through setting them here

in a moment we have our users area right here
now we only have that one user that was set

up when the WordPress installation happened
and here’s the username and there’s the email

so you can actually click on this knowing
you click into it you can’t change the username

there’s a plug-in but I can show you how to
change that username later in the video right

here you would want to enter your name if
you wanted to and a nickname this is what

would show on the front and talk about this
kind of stuff when I get to the point of talking

about SCO for your website and is so this
is also where you go to change your password

and put any kind of biographical information
you can depending on the theme you use this

information can be pulled and when you’re
writing a blog post about the author so let

me go back to all users and you can also have
multiple users for your WordPress website

so this would be useful if you’re going to
have different people adding content to your

WordPress site and then here is the main thing
that I think it makes WordPress what it is

today and that is a plug-ins a plug-in what
it does is it adds features to your WordPress

website so for example say you wanted to have
event listings on your website we would add

that with a plug in a moment ago we talked
about work and use this thing called a page

builder to create our pages that is a plug-in
so plug-ins are ways of adding features and

functionality to your website and it’s the
same as the themes were you just go to plug-ins

you can click on add new and there are I think
about 50,000 different plug-ins available

to enable you to do some really neat stuff
with your WordPress website so no one may

go through some of the things that I actually
you know it let me back that up you see this

right here on the top left and it has a circle
and the one that lets you know that there

is an update available for something on your
WordPress website so what happens is WordPress

itself gets updates themes get updates and
plug-ins get updates so it’s an automated

thing where your WordPress site looks for
updates each day and if there is an update

available you’re gonna see it right here and
it’s pretty good practice to keep everything

updated for security purposes and also later
in the video show you how to make backups

you don’t have to worry if you update something
and it causes a problem you can easily revert

back to a backup but when you click on this
is going to tell you what there is an update

for and it says right here so if there is
a WordPress update it’s good to be here if

there is a plug and update it’s good to be
oops it’s going to be right here and if there

is a theme update you will see it here and
to update a plug-in or theme or anything you

just check on it click on update and then
it would go ahead and download and apply the

updates and you can see right here it says
successful so that is how updates work in

WordPress so now let me show you some of the
things that I like to do when I first install

WordPress and this is going to get the site
ready for us to start building so I go to

posts and there is a default post I like to
go ahead and put that in the trashcan by clicking

trash and then I’m in a click on trash right
here in the number click on empty trash so

whenever you delete a post or page it just
puts it in a trash bin but I like to empty

it out of the trash bin to do the same thing
for pages on the click on pages and then here

it is a sample page on the click on trash
and then right here I’m going to click on

trash again and I’m in a click on empty trash
so now we’ve cleared out any posts or pages

that we had in their next I like to go to
settings and then permanent links and we need

to click right here were it says posted name
and I’ll explain this a little bit more in

the SCO portion of this video go ahead and
click on save changes then I like to go to

general settings and I like to go down here
and set my time zone so if you click on the

drop-down if you know it the GMT is you can
do it like that or if you scroll up you’re

gonna see a bunch of city names so you can
go here and find your country and then choose

the city name this way if you have any kind
of a daylight savings type of situation it

will always change so for me I will choose
a Los Angeles like that and I want to go ahead

and click on save changes the next thing I
like to do is click on users click on my user

account I like to go right here and I like
to put my name in so I’ll do that now and

then there’s this area right here that says
nickname and you can have this be whatever

you wanted to be and if you say write a blog
post and it says who the author is working

to set it to show the nickname so I’m not
feeling super creative soldiers enter show

the demo just like that and then right here
it’s his display name publicly as I’m going

to go ahead and choose the nickname it is
right there and then I want to scroll down

and I’m in a click on update profile so these
are pretty much the things that I like to

do when I first install WordPress whoops I
forgot one thing I like to clear out all of

the plug-ins it comes with these two by default
I don’t use those some of the click right

here to select all of them versus bulk actions
on when you choose the delete enema to click

on apply and I just need to confirm it like
that and I’ve gone ahead and done that and

just for good measure I like to do the same
thing with themes so I clicked on appearance

and then themes I’m gonna delete these two
out and what you do is you just click where

it says theme details on the bottom right
it says delete I’ll go ahead and choose that

and then confirm it and I’ll do the same thing
for this theme when it deleted to confirm

it and now we just have this one theme installed
now lastly working to do one last thing before

that SSL certificate there is a plug in that
organ install so many click on plug-ins and

new in this plug and what it’s gonna do is
it’s going to force any traffic to your website

to be via a HTTP as so what I want to do is
where it says search plug-ins I want you to

enter really simple SSL now when you enter
it you’re gonna see the first plug in right

here you can see this is one thing I like
the transparency of WordPress to let you know

exactly how many websites this is being used
on and the overview of the ratings there’s

a review system so if there’s a plug-in that’s
junk you could go and leave it a review and

say it’s junk in a broker site and all that
and the opposite is true you can go in a put

in effort worked for you and this is a very
good plug-in so we need to install this this

is going to make sure that everything we do
on this website when someone visits the site

and types in HTTP it automatically redirects
them to HTTPS so every time someone visit

your site the be using a secure connection
so to install a theme you would just click

on install now and what this does is it downloads
it and then you can click on activate and

then that’s going to go ahead and activate
that particular plug-in now this plug-in popped

this up right here and added this alert where
it says what we need to do is click on go

ahead activate SSL like this and I think that
should have done it it says SSL activated

and so what this means is whenever you now
try to visit your website and you go HTTP

it’s gonna automatically put them where you
want him which is the secure encrypted connection

so now that that is done it’s going to be
time to oops I forgot when you enable really

simple SSL it’s going to the next time you
click on something if you’re logged in you’re

just gonna have to re-login this one time
someone to go ahead and re-log in to go ahead

and click on this remember me click on the
login button and then we are in SSL is an

able to so we have done a lot so far now it’s
time to get our team for this website installed

and get everything going right so now it’s
gonna be time to install the theme were going

to use and a few plug-ins that were going
to need for the website so first ring go to

appearance work and click on the themes were
to click on add new and then right here it

says search themes work and enter the word
Astra AST RA don’t hit enter just type the

letters and and it’s gonna pop right up and
here it is so good to go ahead and click on

install is just gonna take a moment and then
were going to go ahead and click on activate

right there so now we have our Astro website
and we can go ahead and leave this or delete

it I’m going to go ahead and delete it so
I clicked on theme details in a minute click

on delete and do my confirmation just like
that and then there it is I’ve got Astra installed

this is the theme that were going to use and
not what we need to do is install a few plug-ins

some of go to plug-ins and I’m in a click
on add new and the first one I’m going to

enter is called Astra Sites so just enter
Astro like this Mary go Astra and here it

is Astra Sites click on install now in the
morning to go ahead and click on activate

and now we have Astra Sites and their assorted
and repeat this process on the click add new

and right here I’m in a do a search for SM
TPC can just enter SMT the scroll down just

a little bit right here to where it says a
WP email SMTP by WP forms let’s go ahead and

install that this is a plug and that is going
to allow us to take that email account that

we had created maybe 10 minutes ago and put
that information in here so every email that

goes out of WordPress will be using that email
address it’s for deliverability so going to

click on activate and renew the same thing
Obreg’f3n add new and right here were him

enter the word updrafts and when you enter
updrafts we get this right here a minute click

on install now now on this when I’m not can
activate it just yet I just want to install

it and that’s because working to configure
it later in this video okay now that that

is installed like I said let’s don’t activate
it next working to enter in iThemes Security

when you could just enter iThemes like that
and here it is I themes security now this

is another one were working to click on install
and were not going to activate it and this

is the plug and were going to use to keep
your website secure now the next plug-in enter

it’s a funny word it’s a Yoast bio ASC think
they actually change the name there it is

Yoast SCO when this is the tool were going
to use for the the SCO portion of this tutorial

and I actually use all of these plug-ins by
the way so go ahead and click on install now

but this is another one that we are not going
to activate so now let’s go ahead and click

on installed plug-ins and we can see everything
we installed and activated so you can see

this is activated this is not activated and
you can tell the ones that are activated just

have a little bit of a different color and
typically when you activate a plug-in or theme

it might add new menu items over here and
if you don’t see it it might have tucked it

underneath settings so you see when I hover
over settings we have this email option and

that’s added by that plug-in and we have SSL
and that was added by the really simple SSL

plug-in we installed when we activate Yoast
it’s going to put a menu option here in iThemes

will as well and when we activate updrafts
it’ll be a new menu item here underneath the

settings and this is going to get us where
we need to go to have a rock solid website

that is backed up and is secure and SCO optimized
okay so now let’s go ahead and go to appearance

and because we activated the Astra Theme there’s
this new menu option right here this is Astra

so go ahead and click on Astra and what we
want to do is click right here where it says

Astra Sites now what this is going to do is
it’s going to take the website it’s going

to simplify the process of everything that
we been talking about in this video so it’s

going to create the pages for you if it’s
going to create the menu for you it’s going

to set up all the various settings for you
and it’s a timesaver and essentially all you

are going to have to do is change out bits
of text may be a few images and some colors

it makes the process so much faster now when
you’re doing this you might see some different

options here some different complete websites
and that’s because they’re adding more and

more websites to this thing called Astra Sites
so they want working to use for this video

is this one right here for an electrician
so I’m to go ahead and click on details and

preview and it’s going to pull up the preview
of the site right here and all of this and

what we need to do over here on the left it
gives us the instructions and it’s essentially

saying to have this website we need these
two plug-ins we need the contact form seven

plug-in and this is going to add the ability
to create contact forms and you can see right

here on the right here’s a contact form and
then here is going to be that thing that I

was talking about called the page builder
and it’s called Elementor so let’s go ahead

and let CM and install one by one, click on
install now but I think if I would’ve click

this big install plug-ins button it would’ve
done it for me and for Elementor, click on

install now and it’s going to go ahead and
download and in stall Elementor and now Astra

Sites knows that these two required plug-ins
are there now all I need to do is click right

here it’s is import this site so go ahead
and click that now and working to get this

menu this this confirmation right here it’s
basically letting us know that this website

is going to be downloaded imported and set
up on your website and it’s recommended that

you have a fresh installation of WordPress
and this is partially why you saw me clean

out WordPress you know the default post in
the default page and said some things that’s

why we did that so all you have to do is click
on okay this is not recommended if you have

an existing WordPress-based website because
it might mess some things up but were using

a fresh clean slate so right now it’s importing
everything and setting it all up and it’s

actually done already so you saw the button
change to save done view site so now when

I click on this it’s going to open up my new
websites on the front end in here it is so

this is the homepage and look it created the
menu for me it put the pages together for

me and everything already works so pretty
much all we have to do at this point to start

customizing it for how we wanted so you can
click on these various pages and it’s all

set up for you I can click on services it’s
all set up for me so you can see that this

is really the easiest way to get a practical
website that you can use in a practical situation

that works it’s the easiest way to do it in
now really what the remainder of this video

is his organ to learn how to use this page
builder tool work and learn how to change

fonts and colors to learn how to change text
and images and that’s pretty much what is

left in this video of course were also to
cover SCO and all that kind of great stuff

that you’re definitely going to want to know
but at this point we’ve already accomplished

so much with us setting up our hosting getting
our domain name getting WordPress getting

this entire website all built and getting
our SSL certificate all loaded in so now what

I wanted to is go into choosing some of the
things that we need to customize this and

what we need to do is we need to choose a
color palette then we need to choose a font

that we want to use her a pair of fonts that
we want to use on this website and we need

to go and get a logo that we can replace this
default logo here with to really start customizing

this website alright so first were going to
figure out what colors that you want for your

website now typically you’re gonna want to
or three colors so your first color you’re

going to want identify is going to be your
primary color and this is the color that’s

going to be predominantly used on your website
and this would probably be used maybe 60%

of the time or 70% of the time on your website
and the second color is going to be your accent

color so sometimes you might want the the
color of a headline to be a different color

and so this could be your accent color and
there’s various times you might want to use

an accent color and it would be just different
than your primary color and then as an option

you could also choose 1/3 color which I like
to call your pop color and this would be the

color that is going to be different than your
primary and your accent and it’s good to be

a color that would would attract someone’s
eyes to when you would probably use this on

to where you want their eyes to go so typically
like a button right so you would make your

button this color because you want people’s
eyes to gravitate over to that button so they

know where they need to go next so here is
a website called colors and that spelled COO

L ORS.co and you can go here and they’ve got
a lot of great color pallets so if I click

on explore it will show you a variety of color
pallets now the way colors are interpreted

in WordPress or pretty much anything that
is design oriented is with the hex code so

every single color has a unique hex code and
this is the code you would copy in your to

paste it in certain locations in WordPress
and that’s how it’s gonna know the exact color

that you want to use is it with these of various
hex codes while look at this like every color

seems I have that that yellow on it that’s
interesting look at that I wonder what’s going

on there so for example I can go ahead and
click on save this color palette right here

and I would go ahead I would click on view
and you would see the colors right now, go

ahead and click on okay this is new let me
get rid of that okay here we go so here is

the colors in that color palette you see how
you have this #and then in these six characters

that is going to be your hex code and it’s
can be numbers and letters and so if I use

this code right here in WordPress in certain
locations it’s going to show this exact color

and so what we need to do is get these various
hex codes actually like this color combination

this right here with this but if you use this
color as your primary color this as maybe

your accent color and then this is your pop
color and be really interesting color palette

so what you would do then is you just copy
these hex codes into your clipboard and will

be using those momentarily now there are more
websites than just the colors in order to

find color pallets you can go to Google and
do a search for color pallets and you can

definitely see the many different websites
for that another tool that I use I’m using

Google Chrome and I recommend using Google
Chrome if you’re doing any kind of website

stuff because there’s a couple needed tools
in it in the first one I want to introduce

you to is a right here it is called color
Zillah now if you go to Google and do a search

for color Zillah the first result will be
this right here and what chrome does is it

allows you to add these things called extensions
that allows your browser to do more stuff

so you would go ahead and click the button
right here and it will add this to your web

browser and this is what you’ll see it’s right
here it’s kinda hard to to maybe see if I

hover over to Cisco or zealous when I click
on it and it allows me to identify any color

on a particular page so for example let me
go back to that color palette right here so

I would say I know what the color pallets
are but say you’re on a website you really

like a particular color or shade of a color
and you thought maybe I want to use a very

similar color though you would take color
Zillah you would click right there choose

pick color from page and now you have this
black box that showed up and you can the hover

over different colors on that page and you’ll
see in that black box it will identify what

the hex code is and so all you would have
to do so say like this little blue right here

I can hover over it there I have the blue
if I click on my mouse now it copies the hex

code in to the clipboard of your computer
and you can paste that into a notepad so this

is how you can go to a website that you like
and you might like the color scheme that they’ve

chosen and you can use a similar color scheme
or test out a similar color scheme so I want

you to go ahead and pick out a primary color
and an accent color and gives in consideration

of the pop color that you may want to use
now since you’re new to web building you might

want to just stick with the default colors
that we restored you might want to just use

black or something like that and then later
on is your thinking about doing more with

your website then you can start playing around
with these of various colors but it’s the

process of choosing different colors is what
will really make your website unique to you

and your brand next we need to look for fonts
and so here’s a great website I like it’s

called font peridot CO I love this site so
essentially with your WordPress-based website

you’re going to be able to customize the fonts
now the way this works is you’ll typically

have a two or three it’s kinda similar to
the colors right you’re typically in 1/2 two

or three different fonts so you can have one
font that will usually be for your headline

and you might also want use that same font
for your menu and then you’re in a happy body

font so that’s the body of the website you
can have a different font for that you have

the same font to the same font family that’s
fine but you typically have the the opportunity

to have two different fonts there and then
sometimes you might want I actually don’t

have it I’m going to quote a phrase for it
yet but that said third Fontan lead times

when you’re on a website and you see a certain
section of it where it might be cursive or

something that would be a starkly different
font and I can be your third font I guess

I I coined the term pop color maybe that’s
your pop font has well so what I like about

this website is it shows you all these different
font combinations that work well together

that are immediately to be available in your
WordPress site and it’s just a matter of choosing

it from a drop down so when I scroll down
this is what each one will typically say don’t

say the name of one font and the name of another
font so the headline here is cabin and the

body text right here is old standard TT so
you’ll just want to find a font combo that

you like and then remember the name or maybe
write it down in a notepad because will be

configuring WordPress with that so here’s
another fun combo and you can just scroll

down this is a really classic one Joseph and
Sands that’s the headline you don’t have to

go with how they are pairing it you can feel
like one headline in one body font that aren’t

necessarily paired here that’s fine this just
gives you an opportunity to see what they

look like Montserrat this used to be very
popular but it’s lost its popularity right

now it’s really popular it will Meriwether
is a very popular and that’s for the text

right here that actually looks good I might
change my font my website to that another

very popular one is this Playfair display
let me show you if I can find that here as

a headline let’s see I’m just scrolling down
so you get the point you can come here and

see what you like and the different things
with the different fonts how they look together

I’m not seeing Playfair maybe if I just did
a search on the page but you get the point

want to come to a site like this and go ahead
and pick out a pair of fonts that you really

like now let me show you another way of identifying
fonts that you like and that is that it’s

similar with the colors there is another Google
Chrome extension called what font ice to say

what the font I don’t know why I was say that
but it’s just called what font and you can

go to Google and search for what font and
it will take you here and you can add this

to chrome and it adds this little font option
right here so if I go back to this page I

can click on that and what it does is now
when I move my mouse cursor over any font

it tells me what it is so it says right here
this is Montserrat and when you click on it

it shows you the name of the font if it’s
bolder normal and then it’s going to tell

you the size I don’t know why it’s not showing
me the size right there so let’s scroll down

this one showing the size so I can click right
here and I can see it’s the average font that’s

the name of the font and I can see the size
and this is helpful when you’re on the various

websites and you think man I really like that
font or that font combination or you can use

this web browser extension what font and Cohen
NC with the names of these fonts are so that

you can test them out on your website so you
definitely gonna want to choose a font I think

choosing a color combination and a fun combination
that’s unique to you and your brand are the

two biggest things you can do to really make
your website your own and really make it stand

out so your assignment right now so go pick
out some colors and to go pick out some fun

pears now the best thing is none of these
are set in stone so when you’re setting them

up on your website if you change your mind
later it’s going to be super easy to change

later as well I know for me I’m in the process
of changing some of the fonts on my websites

but it’s pretty fun and it’s very powerful
to be able to very easily change these fonts

and I’ll be showing you that here in a moment
okay now it’s time to talk about getting a

logo for your website now a logo is not a
requirement but it’s certainly something that

is going to make your website and your brand
more memorable now I went to Google and I

did a search for free logo and I spent some
time going through some of these websites

and actually a lot of them are really bad
they’re either not really free or their very

low quality now I did find one that is interesting
and I do want to talk about it and it’s canvas.com

you probably already heard of camber some
go ahead and open this in a new tab in but

before I go into cans I’m going to go ahead
and show you some paid options for getting

a logo now one of the places that a lot of
people go to I actually don’t like the service

personally but I do know a lot of people that
have have gone there for logo designs is 99

designs in the way this works is you’re not
hiring a designer to design your logo directly

you’re actually starting something called
a logo design competition where you say here’s

the requirements of my logo arms clicking
on pricing right now here’s their requirements

of my logo and if you are interested in making
this logo go ahead and make a design submit

your design and out of everyone that comes
up with the design I’m to choose a winner

and I’m gonna pay that winter 299 for this
plan for 99 for this plan so essentially the

higher you guarantee you’re going to pay the
more people that are going to be interested

in taking a risk of their time in coming up
with the design and submitting it and you

work back and forth with them to get it perfect
for you so they essentially have these three

packages here you have the 299 and they’re
saying you can expect to get 30 designs and

each planet goes back like that they do have
this money back guarantee I would read up

on it before if you’re interested in this
I don’t really think it’s quite so simple

to get your money back from one of the services
I haven’t personally used 99 designs and I’ve

seen people get seen plenty people had come
up some really does this lousy web designs

using 99 designs but it’s so worth a shot
that interests you another marketplace for

design work is a fiver now fiber is also very
risky there seems you could do to minimize

your risk essentially if you’re not familiar
with fiber it started out as a website where

people could say I will do this for five dollars
now it’s grown way past that since then for

sure and it’s a marketplace for now people
can charge what they want to charge even though

it still called the fiber so when you go to
fiber and that’s with two ours F IV ERM and

a link to it in the video description box
into a search here for logo design think I

scroll down the it should give me an option
up here it is a logo design so or you could

just search for logo design actually like
this they recently added this where you can

thinking try to find the right designers that
you might be interested in so it’s kind of

reduced logo design into three different choices
so first you would choose one of these so

if you wanted a cut of a flat design you’d
click on here then you choose what you want

to pay or what your budget is the 5 to 25
to 3200 or greater and so this is going to

this is going to filter out the designers
that don’t offer design work in that price

range and you can start seeing some of the
designers here so let’s choose the $3200 and

then the last one is the speed at which you
wanted so if you need it fast in up to three

days go ahead and click on here and so it’s
going to show you all these logo designers

that are in meeting these requirements that
you just set up so you can click on any one

of these I’ll just go ahead and click on this
one I’m not endorsing this person I’ve never

seen it before I’m given the pop up to join
I don’t want to join let me get away okay

there you go so typically right here the logo
designers can show you some of their work

now you have to be careful when you’re looking
at someone’s work because there’s no proof

that it’s someone’s work right they could
be putting any logos here and you wouldn’t

even know now once you start getting here
you see how this pop-up came it’s like someone’s

review and how off how long ago it was reviewed
six days ago this is when you actually get

to see their real work so if I scrolled across
and I saw what they’re actually creating for

people then you can decide if this is a designer
that you want so far I’m not really impressed

with this designer now let’s scroll down so
typically all of these fiber sellers are going

to have multiple packages and they tell you
what you get in each package and each package

is going to have a different price and all
have a break down a lot of times it involves

the source file you’re gonna want this thing
called the source file and so with most designers

the first and cheapest package will not get
you that source file but the middle or the

most expensive package will typically the
difference between the middle and the most

expensive package people are typically going
to have this social media kit which I don’t

think is really that necessary these days
and especially a stationary design that’s

not really that necessary here’s another big
differentiator in people’s different packages

is how many design concepts will give you
12 and four and here is the delivery time

you want to pay attention to that and what
you want to do is you want to go with a designer

that is going to say something like this hundred
percent satisfaction guarantee so essentially

what there that means is one of two things
either one they’re going to stick with you

in with all the back-and-forth communication
in order to make sure they make the design

for you that you want or it could mean that
if you’re just not happy though go ahead and

kick you out a refund so I do like it when
people have some kind of a satisfaction guarantee

that they’ll offer you a refund if they are
not who they say they are now here is the

biggest problem that I have experienced with
five or yeah you can get some some designs

kicked out but what these people are not is
there not like branding people so they’re

not sitting there because they’re just grinding
through these designs right there not sitting

there thinking okay let me get an understanding
of the brand let me get an understanding of

the business let me get an understanding of
who they are and what they are doing this

is something that that you don’t usually get
in one of these fiber gigs are just taking

a word in the name or word and what you say
the description of the business is in there

just trying to crank out a design as fast
as possible that’s not to say you can get

some really nice design work done on fiber
I’m just saying that that has been my personal

experience and lastly for designer you can
see right here how many orders they have in

their cubes so this designer right here has
17 orders ahead of you so this just gives

you an idea of their workload and how long
you can expect to wait for your work to be

done but for me I’ll tell you you can probably
get some good results just make sure you know

the package you’re getting and go with people
that have good ratings a lot of ratings have

recent work that you kind of like their design
style people that will stand by their work

and offer you a refund if you’re not happy
and also communication is pretty important

as well you want someone that will understand
you and understand your business so that is

fiver let me go back to canvas now Kent is
a web based service for making different graphics

and designs and I was actually surprised when
I went to canvas and I saw that they also

have logos there and I thought well it’s been
a great way to get an inexpensive logo now

there’s pros and cons with it so for free
you can use any of these logo designs let

me see if I can scroll down if this is the
page that actually had him so look at some

of these logo designs and use these as a starting
point and I’m like man this audit is nicer

than what is just saw on fiber right I mean
these are great news would be kind of like

starting points and they’ve got a lot of them
these are just a few of them they’ve got tons

and tons of these logos that are starting
points the only thing is it when you want

to export that logo if you’re not on a paid
can for plan you don’t get the high-resolution

logo that you may want and you also more importantly
don’t get a transparent version they want

you to get this thing called Canon of a pro
which actually is kind of worth it it’s I

think like 10 bucks per month let me see if
there’s a link down here for X I’m not seeing

it I think it’s $10 per month and they will
let you have the first month of for free so

technically you can go in and start designing
the logo if you like it and then maybe sign

up for the Pro and then you can cancel it
before you have to pay for it that’s a thought

so let me just log in here with my account
it’s free to create an account let me log

in with my account and go ahead and show you
this logo thing okay so I logged into my account

you can see I was already playing around with
some of these logos here so when I first login

I see this year it’s as created design and
these are the different things that you can

design and I’m a go ahead and click on the
logo right here and it’s can open me up in

a new tab just doing this to show you some
of the designs so you can see right off the

bat that some of these designs here there
are actually very nice I mean you can get

something that works just perfectly for what
you’re trying to do and it’s very inexpensive

it’s free or if you wanted that transparent
version you can go ahead and pay your sign-up

will soothe the cost is here in a moment so
I’m in a scroll down and let’s just choose

is something real quick you can also do a
search so I’m just going to do a scroll like

this and see what I can see to see something
that fits the space now it’s also important

to note with logos if it’s going to be a wide
logo you you typically don’t want really tall

logos you want a more wide logo something
like this right here it’s can usually fit

better in a website header then something
really tall like this let’s add another thing

you definitely want to keep an eye out for
alright so so far I haven’t seen something

I like Texas right here is pretty cool we
probably would want to change that image right

there this is actually really cool right here
as well I like the topography this is nice

it’s the go ahead and choose one here and
get started with it so okay, choose a basic

one and it’s this one right here I go ahead
and click on it and then what it does is it

places it right in here and then you can literally
change this to whatever you wanted so I can

click right here on the letter let me highlight
it and change it to his see their ego and

then right here I can highlight this and type
crafter just like that so if I want him to

do that I could and then for this I can go
click on it and then off to the right I can

kinda tighten that in a little bit or let’s
see maybe I need to just move it over there

you go it’s moved and then I can change this
text to whatever tagline I may want and then

for the color I think I can just go ahead
and click this box and you can see here’s

the color and if I click on that I can choose
a different color and then that’s kind of

like my green and you can see I almost already
have a really nice looking the logo here so

probably one of things I should do is come
out with some kind of a longer tutorial video

on using canvas up now we have this design
you can see how quick it was to make them

get rid of this Realty group I’m in a highlighted
and let’s see how minute click on it and then

here’s a little trashcan on the top right
and there ago I got a nice looking logo I’m

happy with it so now what you would do is
you go ahead and click on download and when

you change this is the option you want this
transparent background and you you can get

it and this is what I was saying that you
need the paid version in order to get that

some to go ahead and click on this and learn
more and see okay so here it is it says right

here you would need to sign up for the Pro
version of Campo but look at this you get

a 30 day free trial so you could literally
come in here make a beautiful logo and then

you know decide to keep it or not keep it
you don’t end up paying anything summit click

on that okay so here you go this is the pricing
that I wanted to see so I guess you need a

credit card but you’ll have to remember to
cancel it but I bet you don’t have to call

you can cancel it in the web-based interface
she could literally go here sign up for the

monthly 1295 and then you know cancel it if
you don’t see yourself continuing using it

you can still have your logo with the transparent
background and it even says right here that

they will remind you three days before your
trial ends so this is something to think about

if you want logo and you definitely need a
transparent background for it would be to

go here some skin to go ahead and download
it right now it pops this up but there are

so many beautiful logo templates in here I
think the logos templates and here are better

than the actual logos that we saw moment ago
on fiber and what it does is all your designs

it saves them all and you can at any time
go and change them or reuse them or do whatever

you want okay it downloaded I’m closing this
but you can do this just be fun and I like

looking in your just for logo inspiration
I mean you can get excellent logo for a restaurant

for any kind of a local business for religious
organization and you can come in here and

they probably got a template that’s almost
a perfect starting point for just about anything

I mean these are really nice designs and they’ve
really nailed it and so that’s why when I

went here and I searched for free logo and
I came across can file which I’ve used before

I was really impressed that they do logos
now on probably most people are unaware of

that so anyways take some time and figure
out what you can do with the logo whether

you have a designer you already have a logo
where they’re going to go the inexpensive

route and use canvas or just hire someone
on five or you definitely gonna want to go

ahead and have a logo created and a lot of
times the color scheme that you your designer

comes up within the logo would be the colors
you use on your website or vice versa if you’re

using canvas on your own and you have already
choosing some colors for your color palette

you might want to use those in your logo so
this is all I have for you on creating a logo

okay so now it’s time to start customizing
this website so I just move back in that tab

were we restored the entire site I left this
open you can go ahead and click on the little

X in the top left to make that go away and
now were back into the back end of WordPress

now there’s one little thing I didn’t show
you in the introduction to WordPress and that’s

his thing we see here that says customize
now WordPress has more than one way to do

the same thing so this is typically referred
to as the backend of WordPress but there’s

also this thing called the customizer where
we can also set up menus and create pages

and do different things so bullying when you’re
in the customizer you’re in a set your colors

in your fonts of on these global settings
that I was talking about the structure the

header the footer and all that kind of stuff
so let’s take a quick look at the customizer

right now so it’s under appearance and then
customizer you can go ahead and click on that

and it’s going to take us into the customizer
here it is and we have this panel here on

the left in these organa load our logo organ
to be able to put colors and topography everything

we did in the last 20 or so minutes of choosing
colors getting the logo prepared and fonts

were to be able to set all that stuff here
in this customizer alright so now the first

thing curates is get more with Astra Pro I’m
in a show you what that is in a moment essentially

it’s an add-on package for the theme or using
Astra that will allow you to have a lot more

options here in the customizer to really pinpoint
more items that you want to customize and

assess also adds a bunch of really neat features
so first let’s take a look at the site identity

in this right here is working to choose a
logo now obviously it has this logo in here

right now if I click on remove it’s going
to go ahead and remove the logo right there

now if you didn’t have a logo we can still
put something in there so right here it says

site title fight check this box it’s essentially
going to show what the site title is and there

it is so you can just put the name of your
business in right there if you didn’t get

a logo but I do have a logo I went ahead and
created this logo and how do you like it Adams

electric service only reason French both electric
service is because is like an electrician

going on right here so I may named it Adams
electric service and you can see right here

is the logo I did it and can file and then
I downloaded it and let me get back to where

I was in the customizer and let me get back
to the logo so I went ahead and up opened

it up in the default program on my Mac for
opening up images and you could do this as

well on a PC I need to get rid of all this
whitespace so usually what I’ll do on this

app is a click and the like maybe the top
right corner and then kind of highlight everything

like that and I just want to get it as close
as possible to but not cut anything out so

I’ve highlighted it like that and then when
I want to do is I want to crop this now on

my Mac there is an option if I go on the toolbar
and I choose tools there’s an option that

says crop and when I click on it it basically
gets rid of all of that other stuff insists

what I’m talking about with the whole transparent
thing if you pay for canvas you can get a

transparent version it wouldn’t have this
white here it would just be the lettering

and everything but working to work with this
for right now which is good to be fine working

or go ahead and put that in right there so
you need to be able to crop this is somehow

you on your PC I’m sure the different photo
app there will allow you to crop it if not

there is a website called pick monkey perhaps
I’ll make a video on how to use pick monkey

but essentially you can upload in crop an
image there as well so let me go ahead and

close that so many go ahead and choose my
logo on the click on select logo and then

I’m going to drag and drop the file right
here and it uploaded my logo there it is in

a minute click on select and I’m going to
click this skip cropping I hate this is a

WordPress thing were it’s offering you to
crop it but we don’t want it it’s already

cropped perfect lamina click on skip exit
I could’ve been a great way of cropping whatever

logo was uploaded alright let me get rid of
that my blog thing thereby check unchecking

this right here and then we will have my new
logo there it is Adams electric service and

it’s right there actually I should’ve shown
you how to crop it in the WordPress okay so

there you go we’ve got that there and I’m
not using the site title and the tagline really

customize those in the SCO portion of this
video now on the layout there’s a variety

of settings remember I said the header area
there’s this is your typical way of doing

it with the logo on the left in your menu
on the right if I click on header here there’s

these other options so if I wanted to choose
the middle option it’s going to rearrange

the whole thing and now I’ve got my logo on
the top and I have my menu on the bottom and

I guess for some situations you might want
your menu on the left and your logo on the

right to go ahead and stick with this way
right here with the logo on the left in the

menu on the right now there are also various
other settings here to tweak things a bit

but I can like how this looks so meant to
go back and were still looking at the layout

so there’s a various options here for the
layout I want to go back and now want to look

at colors and background so for the base color
my click on that it’s this a blue and that

is the blue that came out of the old logo
and you can see it’s being used in lots of

different places, go ahead and change it to
this orange now I use the color picker that

I talked about earlier I want to go ahead
and I want to take that hex code and this

is where you choose the color code that you
chose to click on select color and him and

to replace it with that orange and then it
should match and there it is so now you can

see it starting to come together so I took
this orange and now when I highlight on any

of these menu items it’ll change to that orange
and then when I click on one of these it’ll

then make it orange for that and so various
places will change the orange and all this

blue working to change that when were using
the page builder so there you go and I think

for my text color I’m going to make it match
the words as atoms that color and that is

a different color Mona go ahead and put that
in my clipboard and paste it in here and I’m

in it do it’s actually very similar Mona pasted
in there and so now it’ll perfectly match

so this dark color perfectly matches with
that our branding is really starting to take

shape or someone go ahead and then go back
and then here are some options to change the

color of the footer area so here’s the footer
if I wanted to change the color of this or

the background color I’ve got these options
there as well so these are our colors and

backgrounds I’m not going to go with different
topography but if I click on topography you

can see here you can change it so I clicked
on base topography this is where you would

choose the font family and you can see right
here it is set at Montserrat and then for

your various headings you can choose a different
font if you wanted to and thus let’s go back

and also for the content you can set your
various sizes for the various headings to

go back and let’s see single post are page
you can choose the page title size okay someone

to go back a little bit there and for buttons
here is where we can change the default button

color I am going to because I don’t want that
blue woman to go ahead and change it to that

orange just like I did prior and want to change
the color code and now that’s going to be

orange as well okay so when we go back menus
so we can rearrange the menu items here if

we wanted to so if I went ahead and click
the right here it says top now I can rearrange

them through this drag-and-drop interface
so I wanted the about us to come out right

before contact I can do that and I can see
it move from here to right there and I can

also add items so I wanted to add a new page
I can go ahead here in this customizer and

added to the menu there alright let me go
back let me go back same thing goes for the

widgets if I go here now this is one of the
things I really love about this theme is right

here is the menu and then you have this area
right here and it’s essentially a widget we

can put a button in there and in this situation
you see there’s actually a phone number in

there which is actually really nice so what
that is is a widget so if I click on widgets

and it says header because it’s a header widget
and here it is it’s just some text if Ike’s

expand that here is the phone numbers you
can literally go here and change this to your

phone number if you wanted to have that be
your phone number or you can remove it entirely

and then this whole menu would push off to
the right so there you have it that’s hiring

a change that phone number so it actually
gone through customizing this whole topic

area here doing the logo changing around the
menu the menu items and the various colors

let me go back now there are obviously a lot
of settings here I didn’t necessarily go through

in this video but I do have an in depth tutorial
on this theme that I’ll put a link to down

below so you can find out what each of the
little settings does but I just wanted to

show you how to change the things that were
seen in this website that we’ve already built

so when you make any changes here in this
customizer you just want to go ahead click

on save and publish and then those changes
go into effect so if I’m here on the front

end of the website and then I click on the
refresh button to see a change announces Adams

electric service and now we have these orange
options here as well and you can see various

other little options there is been a change
as well to the colors so now let’s go ahead

and click right here and see what comes with
the Astro Pro package now I have a link in

the video description that’s gonna take you
straight to the features page so if you want

to see what features come with Astra Pro go
ahead click into the video description box

and then click on the link to go to the Astra
Pro website so here is the page of for Astra

Pro and what it is a WordPress plug-in that
you would install in it will extend what you’re

able to do with the theme called Astro that
were using in this tutorial now it’s going

to add these features right here so it can
give you first the transparent header option

now if you’re not familiar with what a transparent
header is this is a perfect example here of

a transparent header where we have the menu
and all of that behind this color or can be

an image or a video that is what a transparent
header is and it’s super easy to add these

transparent headers using Astra Pro next you
have the option of having a sticky header

that’s when you’re scrolling down the page
in the header kinda shrinks a little and sticks

to the top next is various page headers you
can see this on my website when you look at

the various courses that I offer here are
the big features that you would most likely

want will mostly want that transparent header
so right here it’s is more color controls

and what this is going to do is when you’re
in the customizer it’s pretty much can give

you an option to change the color of anything
in the theme this is a very good thing to

have enabled on your site and we also have
better topography what this means is it’s

better in the sense that you have the options
to change the fonts pretty much on any element

of your website and so this is going to be
pretty huge right here dynamic cooks this

is a little on the technical side it is very
slick I’m not generally covered in this video

but if you watch the review video I made on
Astra Pro I go over this dynamic hooks advanced

a footer this will give you more options with
the footer layout of your site the scroll

to top link you could see it right here on
the website were on and it’s also on my website

this scroll to top so essentially when someone
clicks on this it basically scrolls them to

the top of the site it’s very good for longer
pages and also on mobile devices to have that

there were some can tap it and scroll all
the way back up to the top of your website

now they are also adding additional add-ons
to this package to extend the functionality

even further so chances are when you click
on the link in the video description to come

to this page that there may be more extensions
here there’s only a few that I know of that

are coming out that are on this list let’s
take a look at the pricing and this is just

the pricing for right now and so you can purchase
the add-on package it’s $49 and you can use

it on unlimited websites and it’s very much
only $49 some frequently asked questions that

you might be thinking about their refund policy
and is it a plug-in or theme some of these

really common questions that people might
have you can find them right here now I am

not using the add on on the website that we’ve
been working on however I will say that the

add-on package is being used on my websites
and I use pretty much all of these extensions

here and they’re fantastic and I know that
more and more features are coming to this

add-on package and it’s just been incredibly
generous of them to have the theme being free

and just if you want to add little features
here or there you can go here and purchase

this add-on package I know if you were to
hire a web developer to say add the ability

to have a transparent header you’re probably
looking at $50-$75 just to do that you get

all of this all of these amazing features
in this one an expensive package now also

put in the video description box a link to
a full video review and tutorial for all of

these add-ons if you’re curious about getting
it but it’s just nice to know that if you

wanted to do more with your website you definitely
have the option here with Astra Pro which

is a very affordable and easy way to extend
your website and what you can do with it and

all the extra polish that you can put in it
so now what I want to do is give a tutorial

and an overview of this page builder called
Elementor so so far we’ve accomplished so

much we talked about this theme the customizer
we got color spots we got all of this stuff

now it’s time to learn how to use this tool
called Elementor which is also what’s known

as a page builder and that is what were getting
used to create all the content in between

that header and that footer of your website
so actually jumped off into a test site just

for this portion of the tutorial and I just
want to show you some quick fundamentals of

Elementor before we actually start editing
the website that we just restored so first

let me show you the traction of Elementor
if I go to plug-ins and then go to add new

and then I do a quick search for Elementor
here it pulls up and at the time that I’m

actually making this recording you can see
that Elementor is currently active on 200,000

websites and it has tons of amazing reviews
it is really a powerful tool that also happens

to be free to allow you to do some amazing
things with your website and pretty much have

full control over the placement of everything
there is also a pro version of Elementor that

wasn’t used in the website were working on
but I’m also going to in a little bit show

you what comes with that Elementor Pro package
right now just talking about Elementor so

you have got the back and menu settings right
here for Elementor and when you click on it

there’s just some various settings it back
here and here some style defaults in here

some advanced settings that it gives you if
you chose to go with the different Webhost

and you’re actually having a difficult time
getting into Elementor you’re gonna want to

click on settings advanced in word says switch
editor loader method go ahead and enable that

now if you’re using any of the three web hosting
companies I recommended you won’t have this

problem there is a my library option essentially
we can save things and reuse them in Elementor

I have a ton of videos on that actually there’s
also free page templates a ministry that as

well when you click on tools here’s where
if you ran into some issues you can go ahead

and click on this option here and a version
can control is really neat what this means

is if there’s an update to Elementor and say
something starts acting weird on your website

you can come right back here and you can go
back a version so you just go ahead and click

this button and it would take you back a version
I really love this feature maintenance mode

I actually have a video on this where you
can put your your website in a coming soon

or a maintenance mode using Elementor it’s
pretty amazing I’ll put a link to this video

in the video description box this is a very
powerful tool system info is actually quite

important if you are going to need support
at some point you come here click on system

info and then right here if you scroll all
the way down it basically has it all in a

nice copy and paste format you go ahead copy
and paste this if you’re trying to get support

that way the support person would know everything
you’re running on your website all the versions

are hosting all of it and be able to best
help you resolve any problem that you may

have so now let’s actually get into Elementor
and see what it’s all about him and to go

ahead and click on pages and here are all
the pages I have on this demo website right

here and so here’s the homepage I’m to click
on that and to start creating this homepage

using Elementor, to go ahead and click on
this big blue button that says edit with Elementor

when you click on that it’s going to pop up
into this interface and now we are in Elementor

here is the canvas of the website and here
are the things that were to be able to drag

and drop into their now before I start doing
that let me show you around the user interface

here so we have this hamburger icon and when
you click on that it takes you into the settings

while you’re in the editor was all the backend
settings these are the settings while you’re

in the editor and when you click on this dial
pad looking icon that will always take you

back into the various elements you can drag
and drop and use okay so these are the two

things there and at the bottom of this interface
we have this little X when you click on this

you can go back into the backend of WordPress
or you can view the page this right here to

view this what you’re creating in the different
how it would look on these different devices

so if I wanted to see how it would look on
a mobile device I would click on mobile tablet

I would click on tablet next is a really cool
feature essentially whatever you do in the

page builder if you want to go back you can
do and undo so on a Mac it is the apple key

and then is he on a PC it’s the control Z
to go back so you can actually undo any kind

of changes you make and you can go ahead and
click on this history I don’t have any yet

but if you clicked on this history would show
you a list of every single minute change that

you made so you can easily go backwards and
forwards this is a very powerful tool and

I am so grateful that they include this ability
in this page builder the next is where you

have this folder right here and there’s a
template library where there are templates

that are included for free with Elementor
so when I click on this it pulls up the template

library now you have templates that Elementor
provides for you and there are some free ones

and there are some paid ones a paid one will
say Pro in the top right corner just like

that and the ones that are free to not have
that little Pro badge now I do have a link

to take you over to check out the Pro version
but I’ll talk about it here in a moment but

as you scroll down there’s just this wide
variety of templates that you can choose from

there very nice learning tools and starting
points now you also have this option here

for my templates and this is things that you
save and some to be showing you how to do

that here in a moment so let me get out of
that so here are our settings the specific

settings and let me just talk on them briefly
so for some to click on global colors and

let me demonstrate this so if I go back into
my elements and I drag-and-drop a headline

right here you see by default it goes in it’s
pulling this blue color and it’s pulling it

from somewhere right so we have this blue
color will let me show you where it pulls

from so if I go back here with the hamburger
icon click on gold global colors you can see

it’s pulling this primary color now I might
not want to use a primary color I might want

to use maybe this orange instead so I can
go ahead and click on that I can change the

color code and now it’s that orange and I
can go like that you saw it changed immediately

now I can override this color directly but
it’s better if I’m using the colors right

out of the color palette so it allows you
these four colors primary secondary text and

your accent color so let me go ahead and click
apply I’ll go ahead and keep that orange color

and I’m in a backup I had in the the hamburger
icon here knows take a look at our global

fonts and we’ve talked about colors and fonts
so far in this video so I click on primary

headline right now it’s using rubato but if
I wanted to use something different like Montserrat

I can scroll down to the ends or I can just
start entering get MON scroll up a little

bit here it is months a rod I can click on
that you notice look it immediately changed

if I wanted my headlines to maybe be a little
thicker or thinner so if I went down to 300

it makes it then if I increase this up to
900 it’s super super thick so that is the

fonts that we can choose in side the Elementor
editor and we also can choose a font for the

secondary headline the body text as well as
the accent text so let me go ahead and click

on apply and minimal to go ahead and click
on the hamburger icon now we also have a color

picker and so what this is as we can replace
these colors let me show you this this is

one of my favorite features so let me go ahead
and click it back in here whenever you click

on something it’s gonna take you into the
specific settings for that so I just clicked

on this I can change the text right here if
I want let me going to where you would actually

change the color I would click on style and
then this is text color and I can click right

here and here are these predefined colors
right here when you can set these predefined

colors to be whatever you want so say I’m
not going to use this balloon what I want

to maybe change it to that orange well that’s
pretty simple so let me go back into the color

picker so I gotta click on this hamburger
icon click on color picker and this blue is

what I didn’t want someone to click on the
blue and let me go ahead and just change that

with the orange there it is so if I click
on apply now when I go into the element and

I click on it and then I click on style to
change the color and I click on the color

that blue now has orange so what this does
is it makes it better and easier for you to

have a more consistent design on your website
because you can load your colors that you’re

going to use the most right here in the color
picker I really love that so you want to go

into the color picker and load up the colors
that you are going to use the most on your

website this is such a time saver and you
should already have those hex codes now to

take a look at these specific pages settings
so a lot of these there are also in the backend

of WordPress like the page title and the template
in the status but what’s needed is if you

go to template right here and you go to the
drop-down there’s this feature called Elementor

canvas what this allows you to do is turn
the page sort of into a landing page when

I enable it it’s going to remove this header
and it’s gonna remove this footer and all

working to see is what we are going to create
an Elementor’s when I click on it check this

out it’s all gone this perfect for landing
pages where you don’t want someone to come

to the page and then click off into one of
the different menu items you just want them

to focus on the content that they are looking
at right there so I’m a switch that to default

and there we have our header and our footer
right back okay soma going to click on style

there some more settings here you can set
the default background color if you wanted

right here okay back to the hamburger icon
we also have some global settings right here

having to do with fonts but a lot of this
was in the back and settings that we already

looked at for Elementor and then we also have
this a lightbox option this is doing is giving

you the option of’s if you put an image into
your page of someone making it so someone

can click on that and the image can pops up
is like a light box in its larger and they

can look at the picture and that your settings
are right here okay and last we’ve got the

lead on content it’s going to clear things
out so let me just show you if I click delete

all content like this it gives me this confirmation
I click on delete and what everything I Don

is now gone click Elementor settings it just
keeps you back into the Elementor settings

panel so let me just give you some quick instructions
on how a page is structured any webpage any

webpages that essentially just a series of
section in a section can have a background

color it can have a background image of background
video and then you have this section and then

incited that you’ll have columns and it can
be one column I can be five columns it could

be to column so there’s gonna be a series
of columns no columns can also have a background

picture in a background color then what you
do is you take these elements you see here

on the left and you drag and drop those into
those columns and you style them how you want

them so the first step is always to add a
new section so what you should do is click

right here which is add new section when you
do that it reveals these various section layouts

so this would be a one column a two column
three column you get the idea now what I was

like to do is start with one column like this
and then if I want to add columns to the section

just drag and drop right here where it says
columns I could just go ahead and drag and

drop it in there and then it would give me
more columns let me just demonstrate that

I have more columns just like that and what
I can do is I can go here and I can move my

mouse cursor there and I can click on this
little plus and it’s going to add additional

columns so right now I have to click on that
now I have these three columns and I am good

to go so let me show you the settings for
a section so I need to go right here and click

right there and now on the left it’s his edit
section and then these are my settings for

this section so mainly you’re going to find
yourself in this style spot right here and

in your section you’re going up put some background
colors in her a background image or background

video so if I wanted to do something with
my background here is my background option

so I can choose classic and this would be
just a picture or it can be a color I can

choose a gradient or I can even choose a video
so I’m a choose classic like this and then

it reveals some options so let me go ahead
and throw a color and I can click right there

and I can choose that very bright orange color
just like that and that’s how I set a color

for the background and you notice that everything
in this section is going to now inherit that

background color while that’s going to just
blind me right there so let me get rid of

that now let me choose an image so I can go
ahead and click on the plus right from the

click on the media library this can show me
all the images I have on this website so far

here’s one that looks pretty wide let me click
on that and there we go I’ve got an image

now in the background now as I add content
to these columns it would stretch out some

keep in mind if you can use a background image
it needs to be large enough I usually like

my background image to be 1600 pixels wide
but you also have this position option here

so this is the default how it looks but if
I wanted to have the position of the image

B center center I do this kind of changes
it so whatever you’re looking at is the center

of the center of the image and that’s what
that does now most of the time you don’t want

to just have an image because if you laid
text on top of it it would be very hard to

read let me give you an example of that going
to my elements drag this title right there,

let go and you can see while it’s good to
be very hard to read this on top of that it

is going to be very hard and that’s when you
use an overlay color for your image so me

go back into the settings for my section by
clicking here when I go back into the style

when I scroll down we have the background
overlay option now when I click on that it’s

going to show me the classic or gradient so
I can put a gradient in the background or

I can put just a solid color summary click
on classic let me choose a color like this

and And let me say go with black and you can
see how it is sealed automatically darkened

it up there now what is happening is you can
choose your color when you collapse that you

also have this opacity setting so when you
choose a color you can use the slider to set

the opacity to see how see-through it is going
to be on that color so this is up to the far

right you can see through it all if it’s on
the far left you just see the image of straight

up so we can set that to a different number
to make the text a lot more visible and readable

okay and you can set a gradient color if you
want as well it’s a little bit more advanced

I do have a specific video on that another
only thing with Elementor is this a shape

divider and this is a really really cool so
let me expand on that and so essentially you

can put a shape to the top or the bottom of
a section so when I’m in a do is show you

the bottom sheet divider some may choose bottom
and then words this type we have all these

different options so let me just show you
what it looks like so if I choose the mountain

option you can see we get this way EV effect
right there and you have full control over

the strength of the effect right here and
there’s various options here here’s drip drops

clouds there is all of these different options
here it’s a pretty amazing tool this is shaped

divider some go back to none because it doesn’t
really fit with what were doing and their

ego sets are style settings and we also have
some advanced settings and were talking about

something called margin and padding margin
is the space outside of something padding

is the space inside so if I was to increase
the padding it’s going to stretch this image

in the inside container out if I said some
margin it’s going to push this away from the

top and push it away from the bottom let me
show you so I can just start increasing it

like this and you’ll see how it’s getting
further pushed away from the top and bottom

that is margin now if I did the singing thing
with padding here let me unlock these four

and for the top and to put that same 100 like
that you see how it’s the spacing inside just

like this so margin is your space outside
and padding is your space inside and you will

be using margin and padding for sure because
there’s no reason to have everything so scrunched

up together so those are our section settings
like we did right there now these are individual

columns and so when I’m in a column like this
there is this little settings option here

in the left of that particular column so this
column has it this column has it in this column

has it and so each of these columns will have
its own settings we demonstrate that so if

I go right here and I click on it now it says
edit: but this is just to be for this one

column so I can go here to style so let me
demonstrate this for you now if I tried to

change the style setting it’s not going to
show anything so I was to choose say this

blue it doesn’t show anything because there’s
no not nothing really in side the column but

the minute I put something in that column
it will show the color so here is that headline

now what is really cool in the top right of
any elements there’s this little editing icon

but in the middle there is a duplicate icon
so I click on duplicate I just duplicated

it and I can keep duplicating it if I wanted
now I can drag and drop these into these three

columns so I can drag and drop it like that
and there you see the style now comes out

of that column and I can drag-and-drop a headline
in the middle, I can drag and drop a element

in the final column in each of these columns
have their own settings so in this column

in the middle if I clicked on this I can choose
an entirely different background color if

I wanted so I can choose the green and then
even on this when I can choose an entirely

different background color go ahead and choose
this color right here have at this darker

green now I know this looks pretty ugly I’m
just using it to demonstrate how you do things

in Elementor so far we talked about sections
sections can have one or more columns and

in these sections can have background images
and they could have background colors overlays

and all of that and when you look at websites
now just look at it through this same framework

of, every bit of a webpage is broken down
into sections and columns just like how were

doing right now in this video so now let’s
go ahead and take a look at some of these

elements because now I think you understand
sections and we understand columns now we

have all of these elements right here so we
have the columns one which we demonstrated

right here we have the heading we have an
image element right here you just drag and

drop that there and then right here you can
choose any image that you would want and then

you could go and insert and there is your
image in you have different styles settings

most of these elements are going to have a
style setting that has settings specific to

that element so we have a text editor this
would be more like paragraphs of text if you

wanted to put a video in drag and drop this
in and then just use a URL to your YouTube

video video the button module is very very
powerful it’s one of my favorite modules you

can essentially style this button anyway you
could possibly want to write here by clicking

on style the color everything you can do some
really amazing stuff with the styling this

button and we have a divider we have a spacer
or Google maps is really cool I’m see if I

can Dragon start using this without having
any kind of map information up there it is

so right here you’d essentially just pop in
and address and it will show that’s pretty

pretty cool feature so we’ve got the Google
map we’ve got icons so an icon is pretty simple

you just drag and drop that in there and then
right here where it’s his icon and click on

this and you can change it to any number of
icons now this there is a search option here

which makes it easy so I wanted a magic wand
there is my magic wand if I wanted to change

the alignment or if I wanted to change the
color right now it’s pulling that primary

color but I can change it to any color that
I want and it will change for me so that is

the icon we have some general elements here
in image box so this is essentially what an

image box looks like right here it’s an image
headline and a bit of information you’ll find

that you’re using stuff like this the image
box often so we have our image box icon boxes

the same thing except you will be using an
icon instead of an image you have an image

gallery and this is really nice you have an
image carousel we have an icon list a counter

I think you’ve seen counters before if we
just drag and drop it so you can set this

to whatever you want there’s various different
style options here okay so that was the counter

we have progress bars we have a formatted
testimonial so let me just add a new section

and drag and drop a testimonial in there and
you can change the text of the testimonial

you can put a picture right here of may be
the person for the testimonial just like that

and you can see it’s already looking pretty
amazing name and job you have full control

over this I love the testimonial element that
is available we have tabs and accordion we

have toggle switches social icons alert SoundCloud
short code HTML menu anchor and all of that

so this is a pretty extensive list of elements
that you can use for your webpages that you

are building with Elementor now let me go
ahead and wipe everything out so Michael click

on the hamburger click on delete all content
click on delete now I’m a dues I’m going to

restore one of those templates so if I click
on add template right here it’s gonna pull

them all up to go ahead and choose one of
these templates are use this homepage agencies

sauna click on insert and it’s gonna download
this template from the cloud and here it is

so this is a section and it only has one column
and I have a headline and right here I have

a paragraph of text right here and if I wanted
to go into the settings for the section I

can click right here click on style and you
can see there’s the image for the background

and then there is a background overlay color
right here and that’s a section in the when

I click right here this is a section as well
in the element in it is the image carousel

where you can choose your images and it will
rotate them or scroll them across as a carousel

this right here is another section but it
is a using the testimonial which I showed

you a moment ago here is a section with two
different columns one column has an image

in one column has some text some more text
and a link and that’s pretty much the same

for here the same for here in the same for
here so this is a huge larger section and

it has a one column headline but then also
and it is these two columns right here word

has essentially three features and three features
let me guess this is probably using the image

box when I click on it it says edit image
box where there’s an image a headline in a

little bit of text so when I scroll down here
is another section and this time we’ve got

a button and you can see how this is it’s
all just sections with columns and those sections

will share something like a background color
or image Melanie show you how to save and

reuse elements so say I I’ve put this section
together for testimonials and I am love it

it is it is formatted exactly how I wanted
to be formatted so when I’m hovering over

the section there’s this icon right here that
looks like a floppy disk if you even remember

what that is in it says save sections when
I click on it I can actually save this entire

section and reuse it is much as I want so
I can just go ahead and give it a name on

name and testimonial section click on save
and there it is so now here are those templates

that are included but when I click on my templates
here is that saved section that I just saved

and I can insert and use it anywhere on my
website I hope you start to see the power

of Elementor here so now all I would have
to do is click on the save key and then a

minute click on this little acts in a minute
go to view page and you can see it’s perfectly

formatted so it’s sandwiched right underneath
this header and when I scroll down it is right

above the footer just like that and that’s
as simple as it is to creating webpages now

let’s take a look at Elementor Pro now here
is the page for Elementor Pro I have a link

in the video description box below Mount Elementor
Pro is an add-on for Elementor that’s can

add some new templates and a lot of new features
and a lot of new modules and it is a very

powerful and what it does so let me just show
you from the page right here first pulse can

allow you to create grids for your content
so if you have blog posts it will allow you

to create a beautiful grid to show off your
various blog posts that some but are probably

really need to show you global widgets are
cool now what this is is see you put a widget

on one page and allow you to use the same
widgets on other parts of the same page or

other pages and they will all become the link
to together so if you changed say it had your

phone number in it in you change the phone
number in one location it will automatically

change all across your website it’s pretty
neat and then we have live CSS this is more

of a developer feature in bed everywhere is
really neat okay so let’s get into the features

that are going to matter to you most likely
number one is a slides if you want to create

sort of a slideshow and you see these a lot
when you go to someone’s website and they

have their called sliders well with Elementor
Pro you get this feature for your website

the ability to create these sliders and you
can overlay your text in a button and then

it can slide often they can show another image
with some more text and a button and that

is a slider and if you’re going to do any
cutting e-commerce with your website there’s

lots of WooCommerce which is the main shopping
cart that people use for WordPress’s can add

a bunch of features for that you get these
pro templates now let me scroll down here

here’s a list of the widgets okay so there
was the post I just mentioned that it also

adds the ability to have a portfolio on your
website the slider the slideshow that I just

showed you second ago now here are the main
features that I think a really huge forms

it allows you to create beautiful stylish
contact forms and EI tell you this is the

most powerful form builder I’ve ever seen
it is very amazing and that is included in

the price the your in to get an element to create
pricing tables it’s pretty much the most powerful

pricing table options I have ever seen you
get a countdown timer that’s great a price

list is very good if you offer any kind of
services over if it’s a menu or anything like

that a pricelist is going to be able to present
that in a very beautiful attractive way a

flip box that’s when you have an element and
someone hovers over and it kind of flips or

some kind of animation happens you get the
flip box option that is a very nice here’s

the various WooCommerce options that we talked
about advanced to share buttons the ability

to have different template options you get
advanced Pro templates you can create very

nice login forms this one is really cool I’ll
have to install it on the site were building

to demonstrate it because I think it’s pretty
darn amazing that’s this animated headline

so essentially you can have it be work so
I say out of nowhere and underline happens

on a particular word or sets of words of the
whole thing or maybe a circle an animated

circle goes around it it’s a very very nice
especially if you use it well it can really

draw your visitors attention to where you
wanted to go and they keep adding features

to this Pro package such as see how much it
costs real quick for one site it’s only $49.03

sites $99 unlimited sites 199 I actually owned
the unlimited sites and I also on the personal

I just bought it twice but that’s okay for
me I just wanted to support Elementor because

they make being free page builder in their
so generous with that they provide support

but I both of these packages and II think
Elementor pros and incredible value because

essentially each of these things that it does
normally would be a separate plug-in that

might be $50 each so you really get hundreds
of dollars of functionality packed into this

one package and the beauty of it is is once
you get used to using the Elementor interface

so when Pro came out I bought now it’s good
to be you not to have to learn multiple interfaces

multiple ways of doing things is this will
just extend what you already know and allow

you to do more with it so what when you’ve
already mastered and feel super comfortable

in Elementor now you to be able to make forms
but if you had a separate form a solution

then you have to learn how to do that and
have to learn how to do this where with with

it being built into Elementor it just reduces
that learning curve so anyways I don’t want

to go on and on about it I’ll actually install
this at the end because I really want to show

you this really cool advance headline and
maybe even show you the advanced forms of

the pricing table on the actual site that
we are building but I did want to just show

you that Elementor pros out there is a great
way to support the developers of Elementor

who have made an amazing page builder that
they are giving us to use for free so okay

I know I just thought you about the basics
of Elementor I just the just showed you Elementor

Pro let’s take all of this knowledge and start
unleashing it on this website that were building

alright so now I am back on the site we are
developing a been developing this on showed

the demo.com I’m back into the WordPress dashboard
so let’s take a look at what we have I think

I showed you the front end of where were at
I went ahead and put a different logo in and

I change that color in the customizer but
we haven’t touched the Elementor stuff yet

so let’s go ahead and do it so all of the
bits of content on this website are in pages

so when I click on pages we have a homepage
frequently asked questions contact about us

and services you can see them here they’re
all linked here in the menus if I click on

services it’s going to take me here frequently
asked questions and about us and contact soma

to show you how to modify all of these to
make it how you want but using Elementor so

go ahead right here click on home and that
is where were going to start, click on edit

with Elementor and it’s gonna just jump me
straight on into the Elementor interface right

now and what I want to do is I was showing
you how if you click on the hamburger icon

you can change the colors of the color picker
and you can change some your global colors

some to change some of these global colors
so for the primary color them in a put that

orange now I don’t know how this is gonna
look hopefully it’s not obnoxious so let’s

go like that and see if anything changes I
think I need to apply it to see that looks

like a changed see if there’s other things
that have changed let’s go ahead and put it

in for the secondary color and see what happens
and since I have it on the accent let’s just

see what happens among go ahead and click
apply and let’s scroll on down so looks like

a lot of these colors aren’t really pulling
from that and that’s okay let me go back to

the hamburger icon click on color picker only
just change out one of these with that orange

because I’m in a have to do some color picking
go ahead and click on apply alright so first

is this a blue background overlay on this
image summit going to the section settings

right here in the click right there I’m in
the section settings in the click on style

here is our image in I think when I scroll
down to background overlay organ to see that

blue now you can choose to put this whatever
you want here’s what happens if I did make

it that orange it’s actually kind of people
right so let’s see if I reduce the opacity

some there he goes so it’s not looking too
bad let’s go ahead and collapse this just

by clicking there that’s okay like that we
can go ahead and keep that warns like that

if we wanted to maybe reduce the opacity just
a little like that alright so we’ve changed

that color next we have this button when I’m
not hovered over it it’s white and blue and

then when I hover over it it’s black and blue
some to go ahead and click on that and I’m

a click on style and I’m in a change out the
colors some so the text color is this blue

to go ahead and make it this softer black
like that in one week however it’s blue there

to make the hover, to make it white some of
the way we do that is we click right here

it says cover and the text color is blue but
working to switch it to white just like that

so now when I hover there ago it has a really
nice transition like that that’s perfect so

we got that taken care of this we will deal
with later the contact form get it make sure

it goes to the right email address when someone
submits their info so next we have this blue

headlines let me click on it like you said
you can go right here and change the text

to whatever you want but I’m going to click
on style and I’m in a go ahead and clear out

that setting of the blue and now we have our
orange and I should probably do the same thing

here on this blue headline click on it click
on style click on the text in clear the blue

that it was set at so now when I collapse
this we can see our orange coming through

okay soma to go ahead and change the color
on this button here going click on that hoops

let me click on the button click on style
and let’s see there is the background color

I will go ahead and maybe just choose that
lighter gray or something like that that’s

fine like that you can make your hover color
and your text color whatever you want so here

is some colors we want to change so first
we have the button right there so let’s see

I guess I could make that my orange summit
go to style and change it from the blue to

the orange that that’s kind of bright but
let’s go ahead and stick with that and then

we have the whites for this I’ll just change
the font color someone to click on that style

change my font color to the orange just like
that and then the hover version I will make

that whites just like that so now when I hover
it goes like that and that’s fine and so for

here I’ll get rid of the blue as well I’ll
click on it and then right here I will remove

the blue go with the orange now let me show
you whenever you click on a button you can

change the text of the button right here and
this is where you can change where you get

you send someone actually click on the button
and so right here it set to when you click

on it to take you over to the contact form
and here’s this little icon which is the arrow

you can change that right here or just get
rid of the icon altogether it’s certainly

up to you how you want that to be next is
this a blue color right here now this is an

overlay color and it applies just of the column
so if I move off to the top left and click

on that it’s going to show me just the settings
for this column some to go to style and I

want to scroll down click on background overlay
and you could see there it is so I wanted

to make it the orange I could do that that
were just going to kill me actually need to

reduce the brightness out that then is little
hard to see so you can play around with that

I probably wouldn’t go with the orange I’d
probably just maybe go like that and that’s

fine for me scroll down if you these right
here are actually images so if I click on

that it’s an image you can either get some
new icons and change these images or you can

even change it to an icon so let me show you
how to do that if I go into the elements of

Elementor here’s the icon option and if I
drag and drop it there we have an icon now

let me get rid of this little lightbulb and
there’s our icon when I click on it I can

go ahead and choose any icon that I want so
I can try to find something that looks like

lightning or whatever that would reinforce
what I’m saying there I just typed lights

and there’s actually a lightbulb option there
it is that’s cool and I can actually increase

the size if I want by clicking on style and
then it right here is the size so I can make

it larger so you’d obviously want to make
them all the same size so maybe I will reduce

this down some to like say 70 and you can
even cut or rotate a little bit so if you

want to make it just a little more unique
you can cut or rotated some just like that

you have that as an option as well and you
can also go here and change the color if you

wanted it to be black to kind of match what
were doing with the other ones there you could

do that and you can even have it change colors
when you hover over it I just click on icon

hover and I can make it orange so now when
I hover over it panel lights up like that

and you can even add an M animation so right
here if I wanted to maybe have a pulse I go

like this in a pulses a little bit that’s
a kinda cool so anyways with all of these

right here you can see it’s just the section
and it has three columns just like this and

we have this bit of information okay and the
same thing goes here with this image you can

click on it and change it to whatever image
you might want that’s fine like that okay

so here we have some text and we have essentially
four columns but you can see the first column

has a different spacing than the other three
columns you can click in it and change the

titles in the text whatever you want now this
right here this separator is actually in image

so if you are going away from this blue color
there really is no way to change the color

of it unfortunately so what you have to do
is what I would do is probably just get rid

of it highlighted and click on X and maybe
I wouldn’t put a separator in there that we

actually get our divider that comes with Elementor
we have this divider option drag and drop

it there and now we have this let’s see I
can make it a little thicker like this and

let’s see I can make it less wide maybe like
that and then if I go into the color right

here I can make it that orange so that’s kinda
what I would do in that situation and so these

three icons here are their images as well
so you might want to replace it with an icon

that might make sense okay and right here
we have a section with a contact form and

we have some contact information and the background
is this blue I would go ahead click on the

section settings I would go to style and I
would definitely change that color this is

a tricky one because I just went to the section
and right here and I want to change the color

and I looked and I see that there is no color
set and that is because if you look closely

the color is set you could tell by this little
bit of spacing the color is actually set in

the column and it is one giant column here
so I go right here and click on column settings

and then style there is that blue so I can
go ahead and make this whatever I want this

orange already knows going to just be very
difficult so I would probably go with a softer

color like that and that looks pretty good
actually for the section they can change these

titles you can change the address information
right there so right here is a another section

that we have and this is just containing the
logo some social icons and some text now we

can swap out the logo by just clicking on
the leads and then putting your logo in now

this is a problem I was talking to about earlier
with using the free logo from can fund that’s

it’s not transparent it has this white background
so if I click on insert media you can see

the logo just, looks a little cheese ball
that’s why you might want to if you’re going

to use Camtasia to make a logo you might want
to just get the service for a month and download

the transparent version of it and so that
is the logo right there is really cool the

social icon so if you click on one of him
here is the social icons module so it is showing

all the various social icons you can add as
many as you want you can even duplicate them

and if you want to change the specific a link
for each one all you do is you click on it

and right here you put the link to your Facebook
page see that and then you click on Twitter

and you would change the link to go to your
twitter page and the same for all of these

if you don’t use Google plus I don’t think
anyone uses Google plus specially not anymore

just click on the sex and watch it’s going
to go away that’s going to go away X and it’s

gone you can have it be how you wanted to
get even center it’s that looks better left

aligned like that you can even rearrange these
so you get this little bit on the left so

say I am more active on LinkedIn I can put
LinkedIn first and you see it immediately

changed right there then we also have this
hover color issue where it’s going to that

blue I just go to style and it is all right
down here icon hover and it’s changing to

that blue’s a be good spot to use the orange
there we go just to put that orange branding

in like that so here’s a column we just have
some links when you click on it it’s that

same list right here where it’s actually an
icon less than when you click on it the icon

is this angled double right where it’s essentially
looking like a link and then here’s the text

and then here is a link to whatever page you
wants you can want to update the links for

each of these if you wanted to keep it so
home needs to be updated the about page needs

to be updated to whatever pages you want or
you can remove it and enlarge the size of

this map pack should actually do that okay
so here’s the map you click on it just pop

your address in a and you are good to go and
you have these various other settings so go

ahead and get rid of this and enlarge the
map some might mess up the spacing a little

bit but that’s okay so I wanted to just get
rid of this middle column I would go hover

night click on the X and it just removed that
column right there and then I can even resize

the column some dynamically by just clicking
right here and dragging it to where I wanted

so we can go like that and it kinda fills
the space up a little better let’s see maybe

move it in I think there’s a setting that
we have on this map that is setting the height

to the 180 so maybe we might want to increase
that a little bit to maybe 220 maybe tightness

in Oracle there we go that’s actually perfect
so we’ve got the logo we’ve got the social

icons and then we have our map all right there
so I’m going to collapse the Elementor settings

scroll to the top and you can see we’ve already
pretty much customize this whole page here

we change the color of the background color
of the image here we changed a lot of our

colors on the buttons and the headlines and
it is looking pretty customized here we change

this color and we got rid of that column in
the middle and we made this map a little larger

I start to see how easy it is to work with
Elementor I just love this tool okay some

opening this up, go ahead and save my page
now when I go to the front end of the site

and I click on refresh you can see it’s already
starting to look fully customized okay now

let’s move on to just one of these content
pages and then I’ll probably end up leaving

the rest to you, click the XMI go right here
to back to the dashboard and number click

on all pages and now I’m going to go to let’s
just go to this services page that you can

click on edit with Elementor but there’s also
another way in if I was to click on the services

page right here I’ve got a button here that
says edit with Elementor I can click on that

and it’s gonna take me straight into Elementor
let’s do it that way okay here is Elementor

there’s not so much to do on these content
pages I have to get rid of that icon there

we just remove that and so that’s fine I’ll
just leave it like that I’ll click on this

blue and I’m going to go to style and I will
just change that to exit when I was in a clear

its window like that or make it our oranges
up to you and there’s really not as much going

on on these content pages here we have the
alternating services and you can see our icons

are still that blue’s if I click on this pulls
up that icon Listify click on settings and

I click on icon that’s probably where the
blue is cleared out and we’ve gone to our

orange and so you could just customize these
various bits of information that you want

to add in and here is that features a grid
again and if you wanted to use this I would

fully this is a perfect scenario for you to
want to save and reuse something so on the

homepage you would perfect to swap out the
images make the text how you want it and then

you would go here click on save and just save
that whole section so you can easily reuse

it wherever you want on your website and that
is one of the power features of Elementor

that are included for free and here is that
contact form in the footer again where we

change the color in the column by clicking
here and changing the color to this or this

so that is this a page in all of our limited
just to get quick look at all the various

pages just to make sure we’ve covered all
our bases alright so we got our homepage we’ve

got our services page you know I would actually
probably on this homepage probably wouldn’t

go with this orange is looking a little too
much for me so let me just quickly headed

that I know it’s going to bother me if I don’t
just quickly edit it so that’s my section

here click on it go to style and that was
the background overlay let’s go ahead and

choose something like that that looks fine
and something I didn’t show you what you see

how you have this kind of a glow on the edge
here of this contact form that’s actually

a drop shadow so need to show you the drop
shadow real quick and looks like it’s coming

out from the edges of the column so it’s probably
good to be in the column settings so if I

cover right here I go into my column settings
let’s see I think I’m going to see that in

the style right here and it’s going to be
around borders let me click on border and

here it is it’s his box shadow now if I wanted
to get rid of that I can just toggle this

off and then it just kind of flat I do like
a box shadow let’s turn it on and see if we

can tweak that a little bit now the color
of the box shadow is this blue we can change

that and see if that’s all we really need
to really see what white looks like there

goes White’s a little nice there we get these
various colors go ahead and choose this color

maybe and darken it up a little bit and that’s
actually fine for me some he turned back on

that’s actually fine for me you can tweak
some of these settings of how the box shadow

will work let me collapse it gets it’s already
looking a little better there now what I would

recommend is on you so that when the page
loaded there is an animation where this this

form just kind of slides up your fine animations
pretty much for any of the elements I’m not

big on animations you can find them in under
the advanced tab and when I scroll down it’s

his entrance animation it’s doing the fade
up here’s what fade in looks like that’s okay

I guess you can also play around with the
duration here is what a slow fade and would

look at like so when someone visits your site
you’d get that slow fade and I can like that

actually more than the sliding up did okay
soma to go ahead and click on save and let’s

see let me get out of here when I go ahead
and view the page and you can see it’s already

looking better I think it’s Artie looking
a lot slicker and a lot smoother and here

we are let me go ahead and click on the service
pages so now me to go ahead and click through

the various pages and see if there’s anything
specific that I want to talk about you know

how to get rid of this this is essentially
just an accordion you know how to change the

blue so that is the FAQ the about us it’s
the same thing this is just a tab module I

can actually show you if you want in here
are three different images and get rid of

the whole thing I showed you how to change
the color buttons and these are just four

images you can remove that as well a signal
to the contact form okay so we have this you

know how to change the color we know how to
change images and I think you are fine with

that as well just recap on how to change this
a phone number if I go ahead and click on

the 60 going to the back end of WordPress
I showed you earlier in the customizer but

it’s also under appearance and then it widgets
and we see our widgets for our header when

I expand that we have a text widget in there
and that is our phone number she can go ahead

and change that phone number right there and
that’s pretty much all that you need to do

in order to fully change the look and feel
of this website and I think you’d agree this

is a very professional looking website that
would really impress your website visitors

I can’t tell you how many times I’ve went
and hired some kind of a local service whether

be a plumber error anyone that would come
to my house and these sites are a complete

and utter disaster and you can immediately
see the difference with this website here

it looks beautiful it looks absolutely beautiful
and it’s perfect for any kind of a local service

were right when someone comes your website
there is a contact form and all the information

about the services that you provide so now
we need to talk about some of the technical

aspects of your website I want to show you
how to secure it with the security plug-in

we downloaded how to set up and configure
backups how to SCO optimize your website for

what’s known as on page SCO let’s get into
that part of the video right now okay so first

thing I want to do now is to properly configure
the sending of emails and also the contact

form to get that configured as well so let’s
first let me actually show you I left it up

and that is where I created the email address
right here and I clicked on the settings so

if you go into your cPanel click on email
addresses and then click on email settings

I cover that earlier in the video and I said
let’s copy and paste these into a clipboard

will now were actually going to use these
settings and copy and paste them into WordPress

and just to make sure we can send emails out
and receive emails properly sorted and go

to settings and then click on email now right
here you want to choose the from email and

so this would be the from email that is on
every email that gets sent out of your WordPress

website and then put in name here and then
when I scroll down we need to configure the

actual email account so we need to put the
host for sending emails the importance on

that other page and then we need to choose
a for using encryption and authentication

and all this good stuff someone to go ahead
and put all the information in here right

now okay so I filled this out the from email
I put that email address that I created the

from name I put Adam at WP craft for Miller
we will leave it right here were to send all

WordPress email via SMTP now done here for
the options let’s take a look at this so for

the host it’s in mail.your domain name and
I just got that from right here which is outgoing

server and then the port number 465 that I
put in right here it was just from that and

for encryption you would want to choose use
SSL Morgan attested I’m pretty sure it’s use

SSL and then for authentication you have to
say yes you have to put the username and the

password the username is always going to be
your email address and the password will be

that password that you set up so, go ahead
and put my password in now when you enter

your password it’s can it visually show it
but it says right here it’s just showing it

but then it’s going to be stored encrypted
so what you save it it will be stored properly

some to go ahead and fill that out right now
and then click on save changes okay I’ve saved

the changes and it still showing me the password
and a plain text oh I really don’t like that

but that’s okay so I would go ahead and just
put your password in any way and then right

and blurring line out and right here to send
a test email go ahead and put in the email

address in there I put my normal WP craft
email in and then go ahead and click on a

send test and it is going to send the email
and it’s going to give me some info back here

whether or not it was successfully sending
our rights and it says right here are the

result was true and it was sent successfully
so here’s a bunch information you actually

don’t need to really pay attention to just
go ahead and check your email and I’m looking

at my email right now and here it is I just
pulled it up and so this is what your test

email will look like in this just confirms
that it’s sending email properly now here’s

the from email and it pulled that name I configured
and here is the email address that I configured

as well so this is a working email set up
now so I am sending the emails this is good

news now let’s take a look at that contact
form and is so you can have multiple contact

forms just click on contact and contact forms
in the right here now they’re all set up for

you and for each one working the need to change
some things so for right here it’s his hero

section let’s go ahead and click on that and
here is just kind of the code to make the

form work but what working to do his work
and click on mail right here and we just need

to change this information right here so further
to this is where contact form emails are going

to go see Republican want to put your email
address in there and then here’s where you

put where there being sent from so right here
you can just change that and put your name

if you wanted to say from you and then put
the email address you want as the from email

address just like that here you can change
the subject so you could say website contact

form and then this would just be the subject
that the person entered in and then right

here the message body it’s an essay from and
this is the info from the person and this

is the message from the person and then right
here is a little bit of text that goes at

the bottom of the emails that are sent and
so you can change this as well or you can

delete it it’s all completely up to you something
to go ahead and fill this out right now okay

so I’ve gone ahead and fill this out I change
the to to send it to my BP crafter email from

the from you really want to use the email
address for that email account you created

this is going to pull the name of the person
that sent you the contact form I change the

subject to this now what happens is when you
click reply it’s gonna swap out this email

for the persons email that actually submitted
the contact form there some deliverability

issues why you wanted set up this way and
I got rid of that little footer at the bottom

of the message body so now that I’ve done
that I want to go ahead and click on save

like that and then I’m the click right here
it says validate contact form a seven configuration

in a minute click on validate to contact forms
now and so the one that we just configured

it is passing the one that we didn’t configure
yet it didn’t pass so this is now a working

contact form you can go to the front end of
the website and test putting a submission

through and I am sure it will work so this
is all that there is really to configuring

the email now everything’s in a send properly
out of your website because it’s such a pretty

huge this is a step that most people overlook
and they wonder why people are submitting

contact form submissions and they’re not actually
receiving it is because they overlooked this

step which is very important whenever you’re
going to have a contact form or be in a situation

where you need to receive emails and this
is how to set it up properly okay so now I’m

back in the installed plug-ins because we’re
going to activate and configure our security

plug-in and our off-site backup plug and now
I have specific tutorials on actually both

of these plug-ins I highly recommend him they
are so fantastic so go ahead and first activate

iThemes Security and this can add this new
option right here that’s a security now when

I click on it right here it’s going to first
it take me to this easy set up wizard where

I can literally just click on secure site
and it’s going to enable all of these features

and it’s gonna put you in a pretty good spot
for securing your website so go ahead and

click on secure site and right here it’s going
to ask you to enter your email address because

this plug-in has this feature called network
brute force protection what that means is

if someone tries to hack into my website and
you’re using the same security plug-in iThemes

Security your website will automatically be
protected from that person trying to break

into your site and that’s why I strongly recommend
iThemes Security it’s the only free security

plug-in that has this network of users that
are all keeping each other’s sites protected

together so go ahead and click on activate
network brute force protection and there we

go all of the settings are already enabled
and so someone’s trying to hack into your

website via the login form it’s going to automatically
block them out after so many failed attempts

it’s much in a good spot right now going to
click on close now here are all the various

settings that are available for this plug-in
if you want to get deeper into all of these

various settings and I recommend you do at
some point a go ahead and watch my video specifically

on configuring this plug-in now they also
have a paid version honestly this is one of

those plug-ins where the things you get for
the paid version aren’t really super crucial

so it’s up to you if you ever wanted to go
and do that the free version is perfectly

fine but that’s wiry to see this little bit
here about get iThemes Security Pro but this

free version is very fantastic now there is
one setting that I want you to change and

that’s under global settings so if I click
on configure settings there is this option

here for your notification email I want to
strongly urge you to just go ahead and clear

that out and not have a notification email
because you really don’t want notifications

from this plug-in there are going to be emails
that it sends you that it just might get a

little irritating after a short bit if someone
has a failed login attempts and you get a

notification email every time you just can
all get a little annoying so I wipe that out

then I click on save settings so I can receive
any of those email notifications so next let’s

go and back into plug-ins and working to activate
updrafts and this can be our backup plug-in

go ahead and click on activate now updrafts
is going to add a settings option underneath

settings and it’s right here updraft plus
a backup so go ahead and click on that now

what we want to do is the best backup so that
you can have off-site backups this is where

is the backup occurs and then it’s pushed
off site someplace so it’s going to settings

and first try configuring this plug-in the
first thing we want to do is set these two

options the schedule for backing up your files
and the schedule for backing up your database

because your WordPress website is a is a group
of files and it’s a database in their separate

so files don’t change that often the database
will change regularly so what I like to do

for the files I like to change this to back
up once per week and then right here it’s

configured to keep the last two backups I
usually reduce this to one so this is going

to back it up once a week and it’s going to
replace that backup with a new backup each

week now for the database I actually like
to back this up daily and I want to retain

seven database backup so the last prior seven
days in case I need to go back in time now

it’s nice as is automatically going to maintain
this so once there are eight backups it’s

been and delete the oldest backup and that’s
one of things I like about this plug in now

right here we get to choose the off-site remote
storage location and I want a recommended

dropbox most people have a dropbox account
I haven’t use the Google drive I think it’s

a little more complicated to set up but you
have all these various options I would recommend

choosing a dropbox so what a Mexican to do
now is first to scroll down and click on save

changes and now I’ll go ahead and click on
dropbox like this and then I’m in a go ahead

and click save changes again and now what
it’s telling us is you have to click on this

link it’s gonna take you over to dropbox or
to login authorize the backups to be stored

there and then it’s gonna kick you back here
so much as to together some go ahead and click

on here I recommend having a dropbox account
already created and you just go to dropbox.com

and and set one up so I want to go ahead and
log in right here okay hopefully I remembered

my password I’ll go ahead and click on sign
in and let’s see if I did hopefully yes I

did all right so it’s just telling me to complete
the set up for dropbox press the button below

all I have to do is click on complete set
up right here and then it takes me back into

the WordPress website back into updrafts and
I get this little confirmation here that is

set up correctly it says I have authenticated
with dropbox and it even shows me my dropbox

name and the quota vessels basically saying
I’ve used 51% of the storage I have available

to me on dropbox so now I can make my first
backup if I wanted to by just clicking on

backup now and just get a quick backup now
again and it’s good to make my backup and

it’s good to push it off into dropbox for
me and what it’s going to do is now it’s going

to and moving forward it’s going to back up
according to this schedule right here summary

click back to current status you can see it’s
making backup files and then you’ll see that

it’s pushing those backup files into the cloud
all right it is now done in creating the backup

if I click on existing backups it’s showing
me all of the backups that were created and

it’s showing right here is a backup of my
plug-ins my theme my uploads and other files

and my database now what ended up happening
with the databases they just was going it

was making a backup according to the schedule
so that’s why I have these two database backups

now I hear what’s nice is you can see this
is the amount of space that’s being used on

your web hosting account you can see it’s
pretty much next to nothing and that’s because

what happens is it makes the backup pushes
it to dropbox and deletes it off of your web

hosting account which is actually a good thing
to not use that as a file storage now if I

wanted to restore any of these backups I pretty
much have to just click on restore and I can

go ahead and restore that backup and that’s
pretty much how easy it is now if you want

more in depth tutorial using updrafts I do
have a tutorial video on how to create an

off-site backup for your WordPress base website
but this is pretty much all there is to it

going ahead and configuring it with dropbox
and you’re pretty much set now there’s also

a paid version of updrafts you really don’t
need it it is a crates plug-in so if I click

on premium extensions it’s going to give you
some information here to try to sell it it’s

basically a bunch of additional features for
updrafts that you may find valuable I think

the only one that I really find a valuable
is the ability to take this backup and migrate

your website to a different domain name so
that’s the only time I really find it really

helpful I do have the paid version of it however
the free version is going to be perfectly

fine for probably 99% of you just that free
version is fine so anyways this is updraft

so we’ve just as she secured your website
and we have the ultimate security which is

a great backup and now what we need to do
is move on into SCO whoops let me get rid

of this little message there okay so now let’s
scroll down and activate Yoast SE0, go ahead

and click on activate and it adds this little
menu notice here and we have the new menu

item here on the left it’s as SCO soma go
ahead and click on that now I use Yoast SCO

I love it using on all of my websites there’s
a few good SCO based plug-ins I I find that

I like Yoast the most it’s funny that rhymes
I like to Yoast the most so here’s this notification

center and you can go ahead and click on X
and that’s canoe X out these loops them go

X and then X going to remove those notifications
I can find that little annoying sometime so

let me just tell you what search engine optimization
is okay there’s lots of different levels of

search engine optimization the one that you
have the most control of is something called

on the page SCO and that is to make sure that
you have all of the information kind of set

up right on your website to effectively communicate
to search engines what your websites about

and what your pages in your individual pages
are about and what your content is about that’s

pretty much on page SCO and there’s some other
strategies of interlinking content creating

silos were not gonna really get into too much
of that in this video so one thing that we

need to do for every piece of content is add
a descriptive title and description for each

pays page of content so let me show you what
Google does with your title and your description

for each of your pages so say you go to Google
and use a search for the phrase Irvine plumber

so obviously I’m looking for a plumber or
a plumbing service in Irvine a lot of people

will also search plumber near me or plumber
in Irvine or plumbing service or buying all

these various keyword phrases but basically
that is the searcher communicating to Google

hey I’m in Irvine I want a plumber or plumbing
service and this is what your results page

would look like today this is always changing
so you got the top area these are paid advertisements

and then these are local SCO has doesn’t have
a whole lot to do with your website but then

here are the organic listings and there’s
usually 10 of them and then we got some more

ads here so this is where you want your website
to show now you notice in the blue you have

a bit of information let me go here so for
pristine plumbing Inc. this is the page title

you can see there putting some of these keywords
and right like Irvine plumbers in the name

of their company and then the name of the
county and then you have this description

right here and so what we need to do for each
page on your website is write a descriptive

title and write it description that Google
will then take and pair up with the various

pages on your website so let me show you how
to do that in the morning to come back to

this page in a moment so what we need to do
for each page is we need to go to pages and

then we need to choose the page somata click
on let’s just say the homepage right here

that is fine and I’m going to scroll down
and right here is this new box of information

that Yoast adds to every page so here’s my
edit with Elementor button and this wasn’t

here just a moment ago so what happens is
if you don’t put anything in there it just

cannot pull whatever from the page that you’re
on so obviously he wouldn’t wanted to say

this you would want to have control over what
it says and how it looks and you notice how

you get this nice preview here and it looks
very similar to what you see here on Google

so it gives you an idea of what it’s gonna
look like so in here click on edit snippet

and then right here you can write whatever
you want for the title and you can write whatever

you want for the description and this is where
you want to describe what it is that you do

and that’s when you kinda want to naturally
put in some of these keyword phrases that

you would like for if someone was searching
that Google which suggests your website so

what we saw here and what these people did
right here this is what he put for title or

what they put for title Irvine plumbers pristine
plumbing Inc. orange county so if I was to

say put something like that in there you can
see it automatically reflects their’s you

know how it’s gonna look and what this is
is a visual indicator of how many additional

letters you could enter in so if it’s showing
green that means you’re in that safe zone

now if you keep entering letters you see how
the green keeps going and eventually it’s

going to turn red and that means you whatever
you’re putting in her stocking the show anyway

and the opposite is true if you put too few
letters watch is going to turn right at any

second there it is a returned orange so this
is just to let you know that you have too

few letters and you might want to put some
more information in there and the same thing

goes here for the meta-description and here
is the same bar here that is going to let

you know if you put enough information in
their so this is a great thing that you can

do to tell Google and communicate to Google
what you are doing with your website what

your web sight is all about another thing
we want to do and we probably should’ve done

it earlier but it’s necessity are related
and I mentioned it when we were in these settings

and then the general settings right here and
I said here’s our site title and our tagline

will this is where you would also want to
put something similar similar information

about what you’re doing so essentially if
you are going to create pages and maybe skip

a step and leave out some of that important
SCO data well what’s gonna happen is WordPress’s

just in a poll pull from this from your site
title so I always recommend getting ready

your tighten your tagline and then put a good
site title in there that would communicate

to Google what it is that this website is
about and make sure that you have some keyword

phrases in there that you want to rank for
next let’s go back into SCO right here and

what we want to do is click on it features
and then right here it’s as advanced the setting

page let’s go ahead and enable that so essentially
one of the things that Yoast is going to do

is create something called a site map for
you you always always always need to verify

that when you click on that site map that
it actually works I can tell you how many

people have used Yoast in the site map just
they never made sure that it worked and what

a site map is is a page that has everything
kinda categorize and organize in a surgeon

and comes your site in the first thing they
do is they look at your site map so they can

know where all your content is someone go
ahead and click on save changes to reveal

some of those advanced features and you can
see here on the left we now have more options

in wholehearted these options weren’t there
just a moment ago so now go ahead and click

on XML site map like this and right here it
says you can find your site map here then

I want you to click right here where it says
XML site map and I guarantee you it’s going

to say page not found and I don’t know why
this is such trouble with Yoast SCO it’s a

really simple fix but the thing that stinks
is people don’t really realize that they need

to make sure that when they click on this
they actually see the site map it’s luckily

it’s a very simple fix all you have to do
is go into settings go into permanent links

now we already set this earlier very early
in the video you just need to receive it by

clicking on save changes and then now you
can go into SCO XML site maps and then when

you click on this now I guarantee you’re going
to see this your XML site map you didn’t see

this a second ago you saw big old page that
said page not found but now it is found in

its working perfectly fine so that’s one little
thing that you learn with lots of experience

some to go back here back to the dashboard
you can get rid of this notification here’s

another notification saying hey if you liked
the plug-in please leave us a five star rating

on WordPress.org and I do recommend that you
do that so there we go and I got rid of that

notification single through some of these
options here so there is general and there’s

featured there’s your info but the fill this
out I mean there’s instructions here on how

to do it you can just go ahead and put your
website name all of that stuff their click

on Webmaster tools you would click on this
link to link it up with these different Webmaster

tools are definitely going to want to do that
as well and that’s pretty much the main things

that you need to know about how to add on
page SCO for your website obviously there’s

a time that more of things that you can do
to further optimize the on page SCO for your

website I do have some resources on my website
on doing this on page SCO I’m fact I even

have an entire course on it but I wanted to
share with you some of these basics that you

can get up and going right now because I know
there’s this whole thing might seem overwhelming

right you’re learning so many new things and
how all of this works together and I’m trying

to avoid all of the information overload so
that pretty much is the end of this video

tutorial I hope you enjoyed it as much as
I enjoyed making it for you if you did find

value in it please consider clicking on the
subscribe button and if you like video notifications

when I put out new videos there is a bell
off to the right of the subscribe button make

sure to give this video a thumbs up as well
if you enjoyed it now I’m sure you’re going

to have questions and I want to answer all
of your questions there is a comment form

down below in this video but I also in the
video description have a link to my website

where I’m going to have all the information
from this tutorial and all the various instructions

and there’s a comment form there and you can
ask me there and that would semi-probably

an easier place to find answers to questions
because if someone asks me a question and

I answered there you can easily find it when
it’s on my website versus the YouTube comment

system but you can leave a question either
place I would just ask if you do your best

to maybe find the answer first because sometimes
I find myself answering the same questions

over and over and over when someone could
just scroll up and see someone just asked

that if you days ago so if you could just
help me out in that because I deftly want

to help you in every way that I can that would
just make it more efficient I just wanted

thank you for spending all this time with
me and trusting me with your time in this

video tutorial and I hope that you found it
valuable enough to share with your friends

and share on different social media that would
really help me out and if you did want to

purchase any of the products I talked about
or services in this tutorial video I do have

links in the video description many of them
I might earn a small commission and those

are really a good way to say thank you to
me for putting in all the time and effort

in all the support I’m going to give moving
forward with this video tutorial so anyways

thanks guys for watching and I will see you
in the next one.

Adam @ WPCrafter

My passion is making the best quality video tutorial online, for non-techies. When I am not behind the camera, I am usually helping out one of my YouTube subscribers.
nusii-review

Nusii Proposals Lifetime (HOT) - $49

Create beautiful proposals in minutes with Nusii

website-hosting-discount

InMotion Hosting

56% Discount Offer

free-course-offer

Free Course Offer

WordPress Starter Course

  • Nicki says:

    Great video thank you! I can’t seem to find how to change the text in the bottom contact form that requests information about the electrical project.

  • >