hi this is Tyler and in this video I'm
going to show you how to make three
hundred four billion different websites
step by step with no steps skip everyone
even huge companies like Wix Squarespace
and Weebly have the website creation
process wrong but I finally figured out
how to do it right I finally figured out
how to get people to actually complete
their website see the old way of
creating a website was to either start
off with a blank page which is
terrifying you just have this blank
screen in front of you and you don't
know what to do or what to say and that
is awful and almost no one finishes it I
visit hundreds of people's websites it's
like 2% it's crazy the second way is to
import an entire page or an entire
website but then you have all these
pieces of content that don't go with
your website and it's all mishmash and
you have to delete things and once you
delete things then it just doesn't get
finished because it's not right so
that's a terrible way of also doing your
website and that's what all these big
businesses are doing plus if you do
import a website that already has all
the content in it and you do change it
and it even does look nice well you have
the same website as another hundred
thousand people so it's not very
customized so how do you get that
customized flexibility and speed well
it's not starting off with a blank page
and it's not importing an entire website
I have figured out what to do and I
think it's perfect it starts off with
only using the best we're using the best
platform in the world which is WordPress
to create our website we're using the
best page builder to build our pages
which is Elementor and we're using the
best free theme which is ocean WP then
the magical part we went to the best
websites in the world we went to Airbnb
Nike Disney Apple uber and we saw all
the best sections not the entire website
just the best sections and we took those
sections and we copied them and we
redesigned them and we made them perfect
so that you can import them into your
website so you're gonna have the best
sections of the best companies in the
entire world you can import it in just
one second just click import and you
have the best design in the entire world
right there in a second on
website so far we have designed 200
different sections beautiful sections
and all you have to do is click and
import them and they're there in a
second if you put five sections on each
page that will give you 300 4 billion
278 million
4800 different websites so you never
have to worry about your website looking
like everyone else's but you also never
have to look at a blank screen and be
terrified you have the best designs at
your fingertips in an instant and this
is all step by step so if you just do
the same things I do if you click where
I click and do what I do then you'll
have your own website at the end of this
video a nine-year-old emailed me the
other day showing me his website it was
amazing and of course everything works
on mobile phone tablet PC Mac whatever
you want even though this video is for
absolute beginners and you don't need to
know a thing it can also be used by
professional web designers you guys are
probably using WordPress anyways and
imagine having something to show a
client in a day instead of a month and
that's exactly what's happening a few
weeks ago I got an email from n Manuel
and he emailed me and told me that he
lives in Florida and he was working as a
sprint store manager and he saw one of
my videos and it inspired him to become
a web developer he was just thanking me
for my videos and I was just so blown
away that someone could watch something
on YouTube and start their own business
and it just it inspires me so much and
so what we did is we collaborated on
this video he's designed a whole bunch
of the sections so if you need any help
he's there to help you of course you
could do it on your own it's easy
step-by-step no coding anything like
that but he's just there to help you if
you need it his website is I create your
site calm he's amazing
so to build your website you can use a
Mac or a PC or anything else all the
software and everything is all online
and again we're going to be using
WordPress which is the most popular way
to make a website in the entire world
it's used by people like Forbes CNN Katy
Perry jay-z Beyonce Sweden's official
website Microsoft you see
Boult Disney stoop dog Mercedes Ben UPS
best buy the Rolling Stones etc alright
so let's get started with a plan of what
we're gonna do so our plan is right here
it's easy it's in four steps we're gonna
get our domain name get hosting install
WordPress and create our website a
domain name is the same thing as your
website name so my domain name is Tyler
com Facebook's domain name is
facebook.com go goals don't my name is
google.com without a domain name there's
no place for people to go to see your
website so you definitely need a domain
name it's definitely required in order
to have a website a domain name cost
about thirteen dollars per year the next
thing that we need to get is hosting
hosting is a computer that's on 24 hours
a day that holds all of your website
information so it holds all of your
content
it holds all of your images it holds all
of your text it holds your logo
everything that you see on a website is
a computer that's on 24 hours a day
that's holding all of your information
and that's what hosting is so if you
only had a domain name but no hosting
someone will go to your website but it
would be blank there would be nothing
there but with hosting someone goes to
your website and they see all the text
and images and information and all the
content is there so again hosting is a
computer that you rent out from a big
warehouse that has really fast internet
so that your website loads really
quickly and that cost about ten dollars
per month in step three we're going to
install WordPress again WordPress is
what's called a content management
system it's just a fancy way of saying
it helps you manage all your content so
instead of having to know code like HTML
and CSS all you have to do is type and
upload pictures and it makes it really
easy to create a website WordPress is
the most popular way to make a website
in the entire world and luckily for us
WordPress is free the next thing that
we're gonna do is create your website
and because you're not paying a web
developer thousands and thousands of
dollars to create your website you're
actually doing yourself that obviously
is also going to be free so that is all
of the necessary cost involved in
creating your website so just to start
out you're going to need to
for that domain name which is $13 a year
and pay for the hosting which is $10 a
month so your initial cost to get your
website on the internet would be $23 but
I have a huge discount and that's gonna
bring the cost down to ten dollars and
37 cents now that may change and
fluctuate a dollar here or there a
little bit but it should be around there
and I think that's a great deal to get
yourself on the internet and
broadcasting to the entire world so the
first thing that we're gonna do is steps
one in two and luckily we could do that
at the same place Hostgator com so I'm
just gonna open up my browser and go to
hostgator.com that's H OS t da t o r dot
c om and I think Hostgator is really
great I've been with them for about 12
years
one of the best things is that they have
24/7 365 live chat support or you can
email them or call them and the prices
are really good so we have all these
options we have web hosting cloud
hosting wordpress hosting etc but we
don't need to pay attention to any of
them the only thing we need to pay
attention to is the regular web hosting
now you might think why not WordPress
hosting but that just adds a whole bunch
of bells and whistles and things that
you don't need so we're just gonna stick
to the basic web hosting so just go
ahead and click on that so once we do
that there are three different plans
under web hosting we have the hatchling
plan the baby plan and the business plan
and what I recommend is the hatchling
plan because you can upgrade to a plan
at any time you want so if you want to
go to a hatchling to baby you can
upgrade anytime you want
if you want to go to a baby plan to a
business plan you can upgrade anytime
you want and I just think the business
plan has way too much stuff you don't
need all the stuff that it includes and
you can always upgrade later so we don't
need the business plan so between the
hatchling plan and the baby plan the
difference is the baby plan lets you
have as many domain names or websites as
you want so you can have your website
com your dog's website com your friends
website net your mom's website org you
can have as many websites as you want
but usually people just start off with
one website so that's why I recommend
the hatchling plan and it is the least
expensive so that's also
awesome alright so all we have to do is
click sign up now and now we have two
options here we can register a new
domain or you can say I already own this
domain so if you bought your domain name
already or your website name already
from a place like GoDaddy and you've
already purchased it then you're going
to want to click I already own this
domain and fill it out right here but if
you're purchasing a new website name or
domain name then you're gonna want to
enter it in right here and here we can
choose the extension type so I usually
go with dot-com but you can do online
sites tour that website tech sometimes
the dot-com is not available so you can
use the other ones or sometimes it's
just kind of cool to have a dot site or
dot online or a dot tech but that is
totally up to you and once we choose our
ComNet org it's gonna ask you do you
want all these other ones and my advice
is no you don't want all these other
ones they just want to put on and add on
some more money I don't feel like people
are going to try to get your same
website and copy you that just doesn't
really happen and so you don't need to
do it the next thing that we have here
is domain privacy protection and what
this does is it hides all of your
information so when you buy or purchase
a domain name people can see all of your
contact information like your name and
your email and your address but a lot of
people don't like that I think it's fine
personally but if you don't want that
you can add on domain privacy protection
but I trust people so I'm just gonna
unmark that and continue on next it says
choose a hosting plan we've already
picked the hatchling plan which is great
and now it wants to know the billing
cycle so basically for this the longer
that you commit to so if you pay thirty
six months up front you're gonna get a
bigger discount but it's gonna cost you
more up front and the shorter amount of
time that you commit for say one month
it's gonna cost you less up front but
you're not getting as big of a discount
so it's really up to you but I'm gonna
choose just the month-to-month option so
it cost me the least amount of money up
front next choose a username and
security pin and enter in your billing
information alright once you do that you
the option to pay with credit card or
PayPal I'm just gonna choose credit card
put in your info and the expiration date
then it's gonna ask you if you want to
add on additional services and again I
don't find that you need it because you
can always add them on later if you find
that you do need it but you probably
won't need it at all so I'm just gonna
uncheck those then we can see that that
mountain too is $25.00 in 95 cents but
if we put in save code that's SAV e c.o
de and click validate we can see that
the amount due goes down to 10 dollars
and 37 cents now this is my code and I
do get credit for it so thank you very
much and it is the biggest discount code
that there is and if it isn't please
email me at tyler moore at gmail.com and
say hey what's up man it's not the
biggest discount no but it really is the
biggest discount on the entire internet
and i appreciate you putting it in
because it gives me credit and helps me
make these free tutorials so i really
appreciate that thank you
alright i'm just gonna scroll up because
sometimes they add on the domain privacy
protection after you add on the coupon
but they didn't this time so that is
good it's ten dollars thirty seven cents
and we can review our order we have 24/7
365 fo and live chat and email support
account activation money-back guarantee
your domain name and our hatchling plan
all right now you can click I have read
and agree to the Terms of Service and
click checkout now and you are done
signing up for hosting the next thing
that we're gonna do is install WordPress
so all you have to do is click on
hosting scroll down and click launch
quick install once you do that you can
exit out of this tab here and scroll
down and click on WordPress and you can
select a domain name for installation
now I have a whole bunch of domain names
but you'll probably only have one so I'm
just gonna choose the domain name I want
to install it on and we're can I leave
this directory here blank because if you
choose it then WordPress will install on
your website comm forward slash
something instead of your website com so
we're just gonna leave that blank we're
gonna click Next and we're gonna enter
in a blog title I'm just going to title
this create a website
and you can change us later at any time
so don't worry about it and for admin
user I'm just gonna put in my name and
I'm gonna put in my first name last name
and put in my email address all right
and we're gonna make sure automatically
create a new database for this
installation is marked off and we're
gonna check the Terms of Service
agreement then click install all right
we're just gonna wait for WordPress to
install really easy and our installation
is complete so right now make sure to
copy your username and password because
it's important and print it or write it
down or just put it in a file or
something alright now if we check our
website we can see that it is not gonna
work yet and that's because the internet
needs a little bit of time to realize
that you've just got this new domain
name so it takes time to spread
throughout the entire world telling the
internet that hey this website exists so
we need to wait about two hours for our
website to work and it could take as
much as 24 hours but 99% of the time it
takes about two hours and sometimes even
less all right so we just have to wait
for that so I'm gonna take a little
break right now and come back in a few
hours alright so I am back and now I'm
going to check the website again and as
you can see it works you have a live
website on the internet that is your own
that you've built now of course it
doesn't have all of your content and the
things that you want on it but a lot of
people charge a lot of money just to get
you to this place right here and you did
it all yourself and it was super easy
alright we can browse around your
website and we can click on hello world
this is just dummy content that
WordPress automatically installs on your
website but that's not very much fun we
want to be able to log in and change it
and make it your own so we can click on
this tab and copy this password right
here and now what we want to do is we
want to go to your website comm forward
slash WP dash ad mi n and you're gonna
want to write that down or remember it
of course you can Google how do I log
into WordPress and find it that way also
but this is how you log in to your
website alright and we know that our
user
is whatever you said it to and our
password is this big funky password so
we're just gonna want to copy our
password and paste it right in there and
press login
all right once we're logged in we can
close this tab to keep everything
organized and you can click I don't need
help because we're gonna be doing all
the steps manually and I think it's
better to do it that way anyways all
right once we do that the first thing
that I like to do is change my password
because I can't remember that crazy
funky password so I want it to be
something else so to do that go to users
and click on your username and scroll
all the way down and click generate
password I'm gonna hide my password here
and type in your password then press
update profile so the next thing that
we're gonna do is delete plugins and
what plugins are is it adds
functionality to your website and that's
one of the things that makes WordPress
great let's say that you want a contact
form well by default WordPress doesn't
come with a contact form so you download
a plug-in that someone built and now you
have a contact form or a photo gallery
or an image slider so plugins add
features to your website that people
build and it's really really cool but
what hosting companies do is they
install all of these extra plugins on
your website because well they get paid
too and of course they're in the
business of you know providing a service
but also making money and that's alright
but we don't want the plugins on our
website so what we're gonna do is we're
going to click plugins and we're gonna
check this box on top and from the
drop-down we're gonna press deactivate
and apply and now deactivate all of the
plugins but we still need to delete them
so we're gonna check the box again and
press delete and apply and press ok and
that will delete all of the plugins on
your website so that you can start off
fresh the next thing that we're gonna do
is update our permalinks and let me show
you what that is so if we hover up right
here and click visit site we go back to
our site and we see this bar up here and
that shows us that we're logged in so
our users aren't going to see that we
just see that but anyways if we scroll
down and click on the hello world we can
see up here it's our website com
forward slash index dot PHP forward
slash the date thin HelloWorld but
that's not really professional you don't
go to Google's website and click there
about page and see Google com forward
slash index dot PHP for slash about all
you see is google.com
forward slash about it's simple it's
easy and it's professional so how do we
get rid of that index dot PHP and that
is where permalinks come into play so to
change the permalinks all we have to do
is hover over our website name and click
dashboard then click settings and go to
permalinks then I just like to click on
post name you can obviously change yours
and make yours different but I think
post name is perfect then I click to
save changes alright now we can hover
over our website name and visit our site
again and click on hello world again and
now we can see it's just our website com
forward slash hello world it is much
simpler much plainer much cleaner and
much more professional alright the next
thing that we're gonna do is see if
WordPress needs any updates we want to
update our website before we do anything
because sometimes updates can cause some
changes to our website so we want to do
it before and not after we've completed
our website so what you do is hover over
your website name and click on dashboard
and click on updates now we don't have
any updates right now but if we did all
we would do is click on update and it
would update WordPress for you the next
thing that we're gonna do is install
your theme a theme is the design of your
website what your website looks like and
that's one of the reasons why I love
WordPress so much because thousands and
thousands of people make themes for
WordPress so you have thousands of
designs to choose from so we can see
what our theme looks like by just
visiting our website so if we visit our
website this is what it looks like it
has this big image up here and if we
scroll down we can see this is just what
our website looks like so how do we
change that how do we make it look much
much better to do that just go back into
your dashboard and go to appearance then
themes now we see we have these three
themes but how do we add
and that's really easy we just click on
add new once we do that we can scroll
through all of the themes and look at
them or we can go to popular and look at
the popular themes they have many
beautiful themes but I do have a
favorite theme and this is the theme
that you should install because this
tutorial is based on this theme so if
you install a different theme then you
can't follow all the steps they'll be
different so the theme that I love is
ocean WP and again this is my favorite
theme and we can go to details in
preview and we can see that it has five
stars it was rated 164 times and that's
all great so we can exit out of there
and we can click install so now the
theme is installing and once it does
that we can click on activate and now
our theme is activated on our website
now up top right here it says this theme
recommends the following plug-in
Elementor and ocean extra so we're gonna
click begin installing plugins and again
plugins add features to your website so
it's extra things that the theme needs
in order to work properly alright for
now we're just going to install ocean
extra and we'll install element or later
so just click on install and it will
install then we can click visit site and
we can see that the theme or the design
has changed so it doesn't look that
great right now but it is the building
block to a really beautiful website so
the next thing that we're gonna do is
delete some pages and post that
WordPress installs automatically we just
want to start off clean and blank and
fresh so to do that let's go back into
your dashboard by hovering over your
name and clicking dashboard then click
pages and we'll see this sample page and
we can view it to see what it looks like
yep just looks like a regular sample
page and we can go back and we can click
on trash alright once we've clicked on
trash it goes into the trash can and we
can delete permanently alright so that's
how you delete pages now we're gonna
delete our posts so just go to posts and
hover over hello world and click on
trash and we can go to trash and we can
delete permanently the difference
between pages and post pages our web
pages like about services contact
products or store and post our blog
posts so if you want to create a blog
you would click on post and create your
blog posts there alright so we're done
deleting our pages and posts and that
was really easy the next thing that
we're gonna learn how to do is change
our title in tagline so to do that we
can hover over our website name and
click visit site and we can see our
title up here
create a website and our tagline just
another WordPress website well ours
isn't just another WordPress website
ours is something great and amazing so
we definitely want to change that to do
that click on customize up here it
didn't click site identity and we can
see our site title I'll just change it
real quick to show you that it changes
and this is where you should put your
business name and your tagline describes
what you do or gives you more
information about what it is so I'm just
gonna put step by step with no steps
skipped but if you did something like
graphic design then you would put what
you do so you can say you do drawings
illustrations and websites so it really
describes what you do in the tagline
alright once you're done with that you
can click on publish and exit out of
there and we can see our title up here
in our tagline right down here but it's
not always gonna look like that that
just kind of ugly I don't really like
that so we're gonna remove that and make
our website look much better a little
bit later but alright that is how you
add your title and tagline but now our
website is blank so the next thing that
we're gonna do is add pages to our
website to do that hover over your title
name and go to dashboard and click pages
then click add new and you can enter in
your page name we of course need a home
page so I'm just gonna put in home and
we're gonna leave it blank for now so
we're just gonna click on publish
alright once we do that we can add
another page so we're just gonna press
add new and we're gonna name this one
about and we're gonna click on publish
then again click on add new and we're
gonna add services and click on publish
then we're gonna click on add new and
we're gonna put in contact and click
publish
then we can see all of our pages by
clicking on pages and see all the pages
right here of course you can add so many
different pages you can add features or
pricing or a store page where people can
buy things and you can add a lot more
pages we're just gonna have these four
pages because it is a tutorial and I
want to keep it as short as possible but
the options are limitless all right so
that is how to add pages we are done
doing that so the next thing that we're
gonna do is edit our menu to do that
hover over your name and click visit
site and we're gonna add links to this
part right here and we're also gonna
remove this space right here so let's
click on customize and let's click on
top bar then click general and uncheck
enable top bar that will remove this
space up here alright once we do that we
can go back and now let's add all of our
menu items so just click on menus and
click create new menu then we can name
our menu and I'm just gonna name it main
and check it off as the main menu then
press next and click add items so we're
just gonna add home and we can click on
custom link right here and make sure
it's our website name then we could
click Add items again and check off
about services contact and we can go
back and if we look at the top right of
our website we can see at home about
services and contact are added to our
menu all right now we could go back to
edit more settings and go to header then
go to general and we can choose the
style of our menu we can do full screen
and that will make this little hamburger
icon and when we click it it will make a
full screen menu or we could do medium
which will make it in the center or we
can do transparent and what this does it
makes them a new transparent so that if
you build content on your website you
will see the content through that menu
so it'll be transparent through it so I
think that's a really cool effect so
let's just do that one alright now
there's a border at the bottom of our
menu and we don't want that so I'm just
gonna uncheck that and for height you
can make your menu really big or really
small I'm just gonna keep it at 80 and
for background color I'm just gonna make
this black and this is for the
background color if it was not trans
parent now sometimes you don't want your
pages to have a transparent menu just
because it doesn't make sense and I'll
show you that a little later on in the
tutorial so we're just gonna make this a
dark color not all the way black but
pretty close to black and under
transparent header settings I'm just
gonna click on background color and I'm
gonna make it black by click holding and
dragging it all the way to the bottom
left all right now we can mess with the
transparent slider and if we slid it all
the way to the left it would be
completely transparent you would see
right through it and if we slide it all
the way to the right it wouldn't be
transparent at all so I'm gonna slide it
to about 23 so it is mostly transparent
but you can still see the menu all right
everything looks pretty good so let's go
back and now let's change what the menu
colors look like like the home about
services contact let's change those
colors so just click on menu and for a
link color we're gonna make it all the
way white so we're gonna just drag it to
the top left and for a link hover color
we're gonna change that and what that
does is when you hover over a link like
the home about services contact it will
change colors to indicate that you're
hovering over a link so we want it to be
a slight change but not too dramatic so
I'm just gonna make it a very light
yellow and right here for the hex color
code you can enter in your own number
if you've copied and pasted from
somewhere else or you want to use a very
specific color for current menu item
that is when you're on like let's say
you click on the about page and you're
on the about page the menu color can be
different if you want it to be I just
want it to be white so I'm just gonna
make it white then I don't want a search
box on my website but maybe you do but I
don't so I'm gonna press disable and
that will go away
alrighty everything is looking pretty
cool so we could click on the back
button and click back again then we can
go to typography now what typography is
it's basically the fonts or text used in
your entire website so you can change
what the fonts look like for your site
and you can change any of the fonts here
but I want to change the logo and we can
make the logo bigger or smaller and we
could change the font family there are
about 600 different fonts to choose from
and you can look at the
if you go to google.com forward slash
fonts but we have all of these to choose
from and I'm gonna choose one called
permanent marker because it looks really
cool and later I'm gonna show you how to
make a logo but if you just want this as
your logo that's totally cool and I
think it works great alright that looks
good let's go back so just click on main
menu and we're gonna do a text transform
so we're gonna make this all uppercase
so now our menu is all upper case and of
course you can make the font size bigger
or smaller and you can make the letter
spacing more so I'm just gonna make it
two and what that does is it spaces out
the letters so that it's a little bit
wider and has more space in between them
and that looks pretty good so we're
gonna go back and we're gonna go back
again now what we're gonna do is make
that create a website we're gonna make
that font white so just click on header
and go to logo and we're gonna upload a
logo later but if you want to use this
as your logo that's awesome so go to
select color and we're gonna make it
white and the logo should turn white so
now if your mouse is hovered over the
logo it will turn blue but we are going
to press select color and make that into
so it turns black alright that looks
pretty cool so now we can go back and go
back again so the next thing that we're
gonna do is set our homepage to the
actual homepage right now our homepage
is set up as a blog but we don't want it
to be like that we want it to be as the
page that we named home so just go to
homepage settings and go to a static
page so instead of our homepage being
set to all these blog post again or just
it's going to be a static page that we
created and it can be set to any page it
can be set to your about page or
services page or contact page but we're
gonna set it to the page that we named
home so just click a static page and
from the drop-down box we're gonna
choose home and this is the page that we
created so now when people go to your
website it will be to this page right
here alright so we're all done with that
we can click on publish and we can exit
out of there and now we can see that
this page on your main website is set to
the home page pretty cool and we can
also see that the navigation works here
if we go to about or services or contact
it
works so we have set up our navigation
the next thing that I'm gonna do is show
you how to add content the old way the
not so fun way but it's still important
to know so to do that you hover over
your website name and go to dashboard
and then click on pages and scroll down
and find your homepage and click on it
then we can add any content that we want
right here and you can toggle this
toolbar and get more options and we can
bold things or italics things add
different headings or paragraphs add in
images or links but we're not gonna do
any of that but it's super easy you can
see right here it's just like Microsoft
Word
alright then we're gonna press update to
save all of our changes and after we do
that we're gonna press view page alright
and we can see our content here this is
the old way of creating a website not
that fun but kind of interesting alright
let's look at the new in improved way of
creating a website and to do that we
need to get a plugin and again a plug-in
is something that extends the features
of your website so thousands of people
will make plugins or add-ons for
WordPress and that's really the beauty
of WordPress anyone can create something
to build and add on to it so you can do
practically anything so what we're gonna
get here is a page building plugin so to
do that just hover over your website and
go to dashboard and click on plugins
then click add new now we can search for
plugins and we can search for element or
elem en T ou R and press Enter and it
should be the first one and it has five
stars and 300,000 active installations
so it's really good
you can go to more details and you can
see the screenshots of what it does and
what it looks like and you can exit it
there and press install now so now it's
installed on your website but it's not
activated yet so we just have to click
on that activate button and it will
activate all right now we have Elementor
installed and activated on our website
so we can go back to pages and we could
go to our home page and now we're gonna
see this edit with element or button
right here and if we click on it we can
use the element or page builder but we
still have a title up here that we don't
want and this
I bar that we don't want we want to be
able to use the entire page for
Elementor so to do that just click on
the back button and under a content
layout go to 100% full width and if you
click on title on the left you can
disable the title so that will get rid
of the title and the sidebar then press
update once you do that you can view the
page and now we see no title and no
sidebar all right but let's edit with
Elementor so let's just click on edit
page and click Edit with Elementor now
that we've done that it will have our
old content here but we can hover over
it and press the X to delete it and now
we can add a new section so just click
add new section and you can add one
column two columns three columns four
columns a sidebar all into your website
so we're just gonna choose one column
and we can add in text heading and click
this button up here to add more then we
can put in a text editor it's just like
regular text or we can add in a video or
a divider and we can also add in a
button we can also do a testimonial or
Google Maps so you get the point you can
add practically anything but sometimes
this experience is also daunting like
how do you know what to do or maybe
you're not a designer or you just don't
have a lot of experience doing it or
maybe you just want to save a lot of
time and not have to build all these
things from scratch or for memory or
from inspiration from others so
Elementor has done something really cool
and you can go scroll down here and
press add template and you can add an
entire page so you can press insert and
it will insert an entire website page
into your website and we can exit out of
all of these to see what it looks like
and there we have it we have an entire
complete website already done and all we
have to do is change the information and
I think this is really cool of Elementor
and its really innovative and it's
awesome to be able to just import it in
just a second so we can go ahead and
click on save and we can exit out of
there and press view page and now we see
we have a really cool-looking website
already it doesn't have all of our
content and everything on it but you can
see the potential it is really cool and
of course you could build any
of this by scratch if you want to or you
could just change out the information
just click on it and we can change this
to how to make a wordpress website and
we can shift the columns over to make
them smaller and we can scroll down and
change any of this content and if we go
to style we can change the colors we can
delete images and add our own and it's
all really easy alright so that is
really really awesome and so cool and
innovative of Elementor to do that and
to allow us to use any of their
templates but I think it could be taken
one step further instead of importing an
entire website you can import just
different sections that you want because
really you don't want to import an
entire website usually you don't need
the entire website to show up you just
need a certain section you just need a
client testimonial you just need a
call-to-action you just need a video so
you don't need the whole thing you just
need certain sections and that's what
I've done I've made all of these
different sections that you can actually
import into your website and with the
click o button it can show up so I think
that's even cooler than what Elementor
has done which is super awesome so we're
just gonna remove all of these sections
and let me show you the even better way
of creating your website so now let's
find the templates that we want to use
on our website to do that just go to
Tyler comm that's
Tyl ER dot c om and you can click on
templates or view templates down here
alright once we do that we have all of
these different templates to choose from
and these are all just different
sections to choose from that you could
insert into your website and over here
are different categories so you can
search for left right image text that
means that there's an image on the left
or right side and text on the left or
right side so we could view that and we
can see all of the templates that offer
that or we can see the features
templates and this is basically if you
have different features for your app or
product or different features for your
services
you have a bunch of different services
you can list them here but now let's
start creating our website and I'm just
gonna click on headers and heroes this
is like the main image of your website
usually at the top but it could be used
anywhere you can get creative with it
and just scroll down and look for the
one that you want I kind of like this
one v1 so let's just go ahead and click
on it and look at it and it's pretty
cool it has a video in the background
and a big call-to-action button and all
we have to do is click on the download
v1 template and I'm just gonna save it
to my desktop and a new folder called
templates and press create of course you
can save the file wherever you want and
I'm gonna save it there alright let's go
back and let's search for another
template let's just keep on scrolling
down maybe we'll go to page two and I
like this one
P 4 so we can just click on it and you
can press ctrl and click if you're on a
Mac or command and click if you're on a
PC or you can right click and open it in
a new tab to open it in a new tab
alright this one is pretty cool I really
like it Alex awesome so I'm gonna press
download template and save it takes it
out of there and now let's get a client
in testimonial we have all these to
choose from I'm just gonna do this one
looks really cool q4 and you can see it
has a video in the background which is
awesome so I'm gonna download that and
press save and exit out of there then
I'm going to go to call to action and
sometimes you want your call to action
at the bottom of the website so that
when people reach the bottom they
actually have something else to do or
somewhere else to go and not just leave
your website and I don't like any of
these so I'm gonna go to page 2 and look
at q1 alright that looks awesome let's
download that template and go back and
let's actually go back to page 2 I think
I saw one that I did like yeah let's try
q3 that looks pretty cool alright so
lets just download that template save it
and we can exit out of there okay now
that we have all of our templates
downloaded to our computer we need to
upload them into our website so to do
that we can exit out of there on the
bottom left and press go to dashboard
and we can actually press stay cuz let's
save our changes click Save and now exit
and go to your dashboard and go to
Elementor then go to my library we're
going to be adding templates to our
Elementor library let's go back let's
press import templates and press choose
file
and let's add them all so we're gonna
add q3 we're going to open or going to
import now and it will import then we're
gonna press import templates again
choose file q1 open then import and you
get the point just import all of the
rest of these I'm gonna speed this up a
little bit because it is repetitive
alright now that all of our templates
are imported we can go back to pages and
we can click on our home page and we can
click Edit with element or that should
launch element or then click add
template and instead of pre-designed
templates click on my templates and they
should all be there and now we're just
going to insert them so we're gonna
insert v1 and bam it's there and we're
gonna add template and we're going to go
to my templates and we're going to
insert p4 there it is an ad template go
to my templates insert q4 pretty cool
add templates my templates insert q1 and
we got one more so go to add templates
my templates and insert q3 all right so
I think that is the new and improved way
of creating a website I think it makes
it much better
you can combined all these different
templates all these different sections
into so many different combinations to
get your website looking exactly like
you want and not insert this entire page
where there's a bunch of things that you
don't really want so you have to delete
them all so I think it is much better
and I hope you're as excited about it as
I am it'll make my job much easier
building websites for people I know that
all right now we can edit the page so
what I'm gonna do is just click on this
bike tour over here and I don't want it
so I'm gonna go over to the pencil and
I'm going to exit out of there and
there's a little space right here and
you can make this space bigger or
smaller if you want but I don't need a
space here so I'm just gonna exit out of
that one too and then I'm gonna click on
the title and I'm going to change it
over here I'm gonna type in love what
you do and for this bottom text here I'm
going to change it and I'm gonna add in
some text create a website and start
your business so you can do what you
really love all right then I'm gonna
click on the button and I'm going to
link it somewhere else so I'm going to
link it to forward slash about so when
someone clicks on it it's gonna go to
your website comm forward slash about
and I hope that's where your about page
lives if not you have to change that
link to maybe for size
about - me or whatever your about page
is named all you have to do to get that
name is to visit your about page and
whatever it says up on top in the URL
field that is the name so just copy the
four slash about four slash about - us
forward slash about - me or whatever it
is alright so that will link to that
page and now to change the button style
just click on style and we can scroll
down and we can change the background
color so maybe I want the background
color to be transparent so you can make
it go all the way down to transparent
and that will make the button
see-through which is a cool effect but
you can't really see it so let's add a
border to it so under a border type we
can choose the drop-down we can go to
solid and add in width I'm just gonna
put two so it's two pixels wide and now
we can see that see-through button which
is really awesome alright and now maybe
we want to change the love what you do
font so all we have to do is click on it
and go to style and under typography
make sure that that is checked on and
for size we can increase it or decrease
it I'm gonna increase it to 94 and for
family that's the font family I'm going
to make it permanent marker just like
the logo so it gives a cool little
effect it looks like it's written over
the video playing which is cool alright
for line height I'm going to change that
to 1 and that's how tall the line is and
for letter spacing I'm going to space it
out a little bit more at 0.7 so that the
letters have a little room to breathe
and now you see how it goes on two lines
I don't want that to happen and that's
because the content width is too small
so I'm gonna show you how to make it
bigger all you have to do is click on
this whole section so this is the edit
section button right here and if we
click on it you can make your content
with a thousand and it will allow the
words not to be on two different lines
alright what we want to do next is maybe
add some space to the top and bottom you
see how it's kind of scrunched it's kind
of not very big
this section here one of the coolest
things that you could do in Elementor is
add spacing and pad
to the top and bottom of the entire
section so to do that click on advanced
in under padding we could change this to
240 so it gives a lot of space on the
top and 100 so it gives some space on
the bottom and that looks really awesome
and some more amateur websites they
don't really adjust the spacing
correctly and I think adding a lot of
space giving space to things is really
one way of making your website look a
lot more professional alright that looks
pretty good we can also go back to style
and this is the entire section style and
if we want we can change this link
because maybe we don't want it to be
this video we want to choose the video
that we want to be on this background so
we can change that there but first let's
go to background overlay and let's make
it not purple because maybe we don't
want it to be purple so we can just
click on it and press clear and that
will get rid of the purple and go to
opacity and make it zero so it's all the
way transparent and what you're seeing
here is a black and white video so we
can't change the video from being black
and white we can't make it color because
that's just the way the video is so
we're gonna actually swap out the entire
video so to do that click on background
and up here where it says background
type you have three different types
once the classic background one is a
gradient background so it goes from one
color to another and the third one is
the video background so right now we're
already on the video background so we're
just gonna keep it as that and we're
gonna go search for a video so we can
just open up a new tab and go to
youtube.com and let's search for a video
I'm just gonna type in GoPro Hero 6
that's the newest GoPro and just click
on the first video and that looks pretty
awesome so all you have to do is copy
this URL right here so just right-click
and copy or command C on a Mac ctrl C on
a PC and we can paste it in right here
now that will load any YouTube video
right into your website which is really
sweet if you have a video that you want
to use like you have some footage of the
beach or the mountains or a view or
whatever then
I recommend uploading it to YouTube
first anyone who'd get a free account on
YouTube then just copying the URL and
putting it in here just like this
and I recommend that because YouTube
compresses the video for you and it does
all these complex things that make it
really good to stream online and here is
our video now and that looks really
sweet alright this is turning out great
so let's go down to the next section and
that looks pretty good
of course we could change any of the
text or any of the buttons or anything
that we want let's go down to this next
section we can change this quote and
this one looks pretty good too and this
hello section also looks great let's
change this section down here so let's
click on the text instead of saying
writing made simple let's say WordPress
made simple I hope this is simple for
you guys if it is simple please remember
to comment rate and subscribe thank you
and let's scroll down some more and
let's get rid of this image right here
we don't need it and let's actually add
a button to the bottom section but let's
not create a new button let's just
duplicate the button on top so scroll up
go to the pencil icon and hover over it
then click on the duplicate button and
click hold and drag and you sort of have
to wiggle it a little bit it's a little
weird just like wiggle it down and drag
in the button and let it go alright
that's looking pretty sweet let's add
something else by clicking on this box
up here and dragging in the spacer and
just increasing the space let's do a
hundred if I can get it I'll just type
it in here 100 so 100 pixels of space at
the bottom that looks really nice and
our website is looking all done I am
very happy with it that's looking really
cool we did it in almost no time let's
see what it looks like on the mobile
version so if we click this button over
here and click on mobile we can see that
it still looks pretty good but the join
the next tour button is kind of squished
so let's go back to the desktop version
and let's make sure we save that first
and let's exit out it there and view our
page and we notice that on Elementor
we looked at the mobile version the
video still worked but actually if we
make our page smaller we're gonna see
that that video actually disappears
because videos don't really play in the
background like on your phone so on a
really small screen the videos will stop
playing it just doesn't work it's not
the same technology really so it doesn't
work well on your phone just playing a
video in the background and the button
again is sort of messed up so let's fix
those things so we can exit out of there
and the first thing that we want to do
is fix the issue where the video is not
playing like on your phone because it
just won't play in the background on
your phone so to do that click on the
top section and under style under
background fallback click the button to
add a image and click on whatever image
that you want and I'll show you how to
get images later in just a second so
we're just going to click any image that
we want and press open and insert media
okay so now we have this image that will
work anytime the video doesn't load so
anytime the video is too slow or they're
on a mobile device and the video is just
not loading any time that happens the
image will show so that's really cool
it's like a safety guard against bad
things from happening alright so we can
save that and exit out of there and view
our page now if we squish the page we're
gonna see instead of being blank it will
show that image in the background and
that looks really cool we still need to
fix some things like this love what you
do head line is too far up so we need to
add a little more space to the top and
the join the next tour button is on two
lines wheeling one on one line so let's
go ahead and fix that so let's go back
to Elementor and go to the mobile view
and click on the top section then go to
advanced and now we have all of these
buttons so we have these buttons for
desktop tablet or mobile make sure the
mobile button is clicked and under
padding we are going to unlink the
values and that's so that each of the
top right bottom and left can be
different so
we're going to add 100 to the top and so
that is only gonna be on the mobile view
only when that screen is that small it's
going to trigger that all right so let's
save that and let's go to our page and
click refresh and now let's see when we
squish the page we can see that more
space was added to the top and that
looks really great alright we can even
add a little bit more
I'll just put 125 and that's gonna look
perfect so the next thing that we need
to do for our mobile website is to click
on the button join the next tour then go
to style and we can change the letter
spacing but make sure the mobile icon is
highlighted and we can mess with that it
still goes on the next line though so we
can scroll down a little bit
and under text padding we can enter in
20 and that will make the padding a
little bit less so it works perfectly on
the mobile website alright that looks
pretty good that scroll down to the
bottom and click on the bottom join the
next tour button and let's go to style
and let's change the letter spacing to
zero and that seemed it work for that
section so let's just click on save and
go to our website and press refresh and
now if we look at it we can see that
that headline is looking great and the
button looks perfect if we scroll down
the button looks perfect there also so
now our website is completely
mobile-friendly alright so we can exit
out of there and view our desktop page
one more time to make sure everything is
looking fantastic which it is and now we
can go to the dashboard because we are
done setting up our homepage the next
thing that we're gonna do is create our
about page so what you want to do is
click on go to dashboard and now let's
import the templates for our about page
so just go to element or my library open
up Tyler comm and click on View
templates
then I'm gonna click all templates and
just look for something that I like
maybe go to the second page
keep on looking and I'd like this Z one
and actually maybe I'll use the Z 2 Z 3
and Z 4 I'll use all of them and that
will be my about page just keep it
pretty easy indicate command or control
click you're on a Mac or PC and open
them all up into new tabs all right then
go ahead and download each one and we've
already done this so I'll speed it up a
little bit
and once all of those are saved we can
exit out of there and go to import
templates choose file and import your
template press open and import now and
I'm gonna speed through all of that
because we have done that before again
and it's really easy so just import all
of your templates alright and once
you've imported all of your templates
just go to pages and click on about and
you want to make sure that the content
layout is 100% full width and the title
is disabled so that we have the whole
entire page to play around with
then press update and click Edit with
Elementor alright now we can add our
templates in so just click Add templates
and click on my templates and we'll add
all of them so I'm going to add Z 1
insert click add templates go to my
templates Z to insert add templates my
templates Z 3 insert add templates my
templates Z 4 and insert alright once
they're all inserted you can click on
anything and change the information you
can click on the button and change the
text right here or change the link let's
have this link to our contact page which
lives at ford slash contact and that is
looking pretty sweet if we scroll to the
top and click on the edit section part
they can go to style and we can choose
this position as fixed for the image or
scroll or default with default when you
scroll down it will scroll like normal
and if we choose scroll and scroll down
it again it Scrolls like normal I guess
but if we choose fixed and scroll down
you can see the image stays in the same
spot when you scroll down and it adds a
cool little effect so we're just gonna
keep that all right so we're gonna save
all of that and exit of there and view
our page and that is a really cool
looking page and you can tell your story
on the about Us page and they could
click and go to the contact page but we
haven't built that yet and if we squish
it simulating a mobile phone and scroll
down we can see that it's a little funky
we see
that Chris Brown is all the way to the
left and so is Jessi olive pretty sure
these are just made-up names but we're
gonna fix them anyways all right so
let's go back to Elementor and
let's click on this button down here and
click mobile to simulate the phone and
let's click on our button because we
want to add a little space to this
button because it's a little cramped so
if we click on it and go to style and
choose typography as on then go to line
height let's pump it up a little bit and
we will make it 23 that looks pretty
good all right then if we click on Chris
and go to style click on content make
sure the mobile button is highlighted
and click Center it should Center and
now we can click on Jessi and go to
style then click content and press
Center now we can scroll back up press
save refresh our page and view the page
looking great on desktop and all
centered and perfect on mobile all right
that's perfect let's exit out of there
exit out of there also and go to our
dashboard and we are done creating our
about page the next page that we want to
make is a services page of course this
can be any page that you want so let's
go to Elementor and let's go to my
library and let's find some services
templates to put on our page so again we
can go to Tyler comm that's t yle RCom
and we could just go to forward slash
templates save us some time and let's go
to headers and heroes and I like this v5
right here so I'm just going to open it
up in a new tab and let's click on
features and scroll down go to page to
scroll down page 3 I guess maybe page 4
will have some luck page 5 we got to
have some luck and say the best for last
so let's click on c4 and now let's go to
a miscellaneous one and click on p2 and
there we have it our services page b5 c4
and p2 so
let's download v5 and download c4 and
download p2 and exit out of all of that
then go to import templates choose file
and just import all of those
and once you're done importing you could
click on pages and go to services and we
can view our page and we see that we
have that title and sidebar that we want
to get rid of so we're just gonna go
back in under content layout we'll do
100% full width they'll get rid of the
sidebar and under title will disable
I'll get rid of the title and press
update all right then we can view our
page and we see that there's nothing
here it's a blank clean page for us to
work on so we're just gonna press edit
page and edit with Elementor then we're
going to add template and we're gonna go
to my templates and we're gonna add all
of them so we're gonna add v5 very cool
add template go to my templates and
we're gonna add c4 very nice scroll down
go to add templates go to my templates
and p-two alright awesome and now we are
going to edit it to our liking
first let's click on the edit section so
we're gonna edit the top section and
we're gonna add a little more space at
the top so we're gonna go to advanced
and we're padding is we're gonna put 170
and we can see padding and margin so
padding is on the inside and margin is
on the outside so margin would push
everything away and add like a blank
white space at the top if you put like a
hundred margin at the top but padding
adds it to the inside so there's more
padding at the inside of the top so you
still see the background and everything
it just pushes all the content down but
within it I hope that makes sense
alright once we're done with that we
could click on the title and let's
change it to what we do best and go to
style and for the font family
let's do open sans that's one of my
favorite fonts I think that's the fun I
use on my own website and then if you
want to look at the fonts you can go to
google.com forward slash fonts and check
out all of the fonts here and you can
uncheck these to only show handwritten
fonts or serif or sans serif fonts or
whatever you want and we can exit out of
there I just want to show you those
fonts and click to edit the section
again then go to style and we're going
change the background overlay so go to a
background overlay and maybe we want it
to be blue and then green so this will
give us a gradient background overlay
which i think is a really cool effect
so click choose your color and we can
drag this to green and we could choose
this one as blue or what you could do is
you can add in your own color if you've
copied a color from a different part of
your website you could just add in this
hex code here there we go I like that
green and now we will add in a blue and
there we go so we have that nice blue
alright so it looks good it goes from
green to blue and now we're gonna change
all of these icons so instead of
Facebook let's type in WordPress find
that icon and let's type in WordPress so
maybe we do WordPress and for the next
one we do the same thing let's type in
paintbrush and put in design cuz maybe
we do some design and let's go to the
next one click on it and use a pencil
and type in content because maybe we
also do people's content alright that's
looking pretty sweet now what we can do
is change the second headline instead of
fall in love with our features we can
say we're pretty good at these things
too and we could click this line here
and we can make it a different color or
of course type in any color that we want
and we can click on this real time stats
and change the content if we want or go
to style and go to content and change
the color I'm just gonna paste in that
same color green as a line and I'm gonna
do that for all of them so I'm just
gonna speed this up a little bit so I'm
not wasting any of your time and make
them all that green color all right now
we're gonna edit this last section here
so let's click on edit the section then
go to style and let's delete this image
but before we do that let's actually
search for a new image and one of my
favorite websites to get images that are
free and copyright free and you can use
them however you want is pixabay.com
that's p IX a ba y dot c om and we can
search for interior design or anything
else and if we scroll down this one
looks pretty cool
so let's go and click free download and
I'll do the 1920 and press download nope
it wants me to sign up for full
resolution
so the 1280 is just going to be fine
alright so once we do that I'll just
save it to my desktop and call it design
and press save exit out of there and I
will delete this image and add a new
image and then go to upload files select
files and find the image I just
downloaded to my desktop and press open
it will upload then we'll click insert
media and it will insert and that is a
pretty cool picture I like that that's
pretty sweet
alright after we do that let's click on
advanced and unlink these padding values
and we can add padding to the top and
that's way too much so I'm going to add
a little bit less and you can add
padding also to the bottom so it gives a
little bit more space to the top and
bottom another way you could accomplish
the same thing is to delete the padding
from the top and bottom of the section
make it zero it then actually click on
this column right here where it says
we're almost ready so click on that then
go advanced it then go to margin and
unlike the values and the margin is on
the outside so it's gonna push this away
from it so if we add stuff here it's
gonna give more space not on the inside
but on the outside of the top and bottom
so I'm just gonna add 50 and 50 to the
top and the bottom here in that way this
little box right here will never touch
the top and bottom it'll always have
like a little border around it and
that's exactly what we want so that
looks great
alright instead of saying we are almost
ready I'm gonna put we can help you with
and these are gonna be all my things
that I can help you with so now we can
go to style and maybe we want to change
the color make it sort of black and go
to size and adjust that a little bit
you
and we can click on this design here and
we can go to style we could change the
color and we could change it to any
color that we want and then you can
click on content and go to style and
change it to any color that you want
again just gonna paste in the same color
and then do that for or front end but in
any color you want and do that for back
end put in any color very easy stuff and
what we can also do is click on
something like front end and add in a
title and that will go above it and that
will look fine or we can go below for
inner text and put it in right there so
I want to say that I'm good at WordPress
75 no way I am 100% alright but maybe my
design is not 100%
maybe that's 82 and that looks awesome
then we'll take the social media links
and exit out of there and for more
updates follow us we're just gonna say
start today it's gonna be a little call
to action and go to style and change the
font color to black or blackish and then
for font family I want to do open sans
again and for this space I'm just gonna
put in less space and adjust it there
then I'm gonna add a button by clicking
on this button right here and then go on
to button and drag it in it after I do
that click on the button and for the
text I'll put start and for the link
I'll put contacts so they'll click on
this and then they'll go to our contact
page and they can contact us there for
the size of the button let's just do
medium and for the style you can click
on style and go to border-radius and put
in 20 and that will make all your edges
rounded and for text padding you could
change that that's how much padding is
around the start button so you can put
10 50,000 you would probably never want
a thousand that's a lot 110 100 alright
that looks a little funky sorry I must
change that maybe to 20s at the top and
bottom to 60s man that still looks weird
alright maybe we want the border radius
to be 50 all the way around
let's turn typography on I think it
needs to be a bigger size or something
that big all right 23 it is still looks
funny I don't know do a better job than
this guys all right we'll do 40 and 40
10 and 10 all right that looks all right
that's pretty good I like it
maybe make the text a little bit of
smaller I'm going crazy with this I know
this is just a demonstration you'll do a
lot better job when you have time but
that looks pretty good all right now
let's also add a gradient background to
this background so we want to click on
the entire section then go to style and
click background overlay then click
gradient because it's gonna go from one
color to the next and now we can click
on the color for the first color and
we're gonna make it green and for the
second color we're gonna make it blue
you can type in the hex code make that
blue and we can type in a hex code for
the green also if we want a very
specific color all right so now we have
our blue and green and it goes from
green at the top to blue at the bottom
but what if we want it to go from green
on the left to blue on the right or vice
versa you can change that with first
location which is when does a blue in
green start does it start in the middle
does it start in the beginning let's
make it start at 39 out of 104 blue it's
the same thing where does it start or
where does it end actually so we're
gonna have it end at 100 and here's the
angle so now we can rotate the angle and
let's do 240 so it starts at blue at the
bottom left corner and ends at green at
the top right corner alright so it
matches this up here or it starts at
blue at the bottom green at the top and
it's the same on the bottom right here
and that looks pretty cool it matches
pretty great all right let's just click
on save and save all of that and exit
out of there and view our page and this
is our page and I love how the
navigation picks up on that blue on the
left and green on the right I think that
is a really cool effect and if we scroll
down our page is looking awesome and the
we can help you with pops up with all of
our abilities and it just slides to the
right very cool and I love it if we
squish it down like it is a mobile phone
it's a little crammed up here what we do
best
but other than that the page is looking
really awesome so let's just fix that
real quick
let's go back to Elementor and go to the
mobile view and click on the very top
section and go to advanced and under
padding let's put in 130 press save go
back to check our website and click on
refresh check the mobile version and
that is looking perfect and everything
else looks great and mobile-friendly and
awesome all right let's exit out of
there go back to our desktop view exit
out of there and go to our dashboard we
are done with our services page the next
thing that we're gonna do is our last
page which is our contact page but
before we do it let's import all of our
templates so go to element or within my
library once we do that we go to tailor
comm forward slash templates and let's
actually search for a template I'm gonna
search for map and here we have u5 a
nice map and let's just download it
right here save it to our templates
folder press save go back to templates
and let's click on contact and maybe go
to page two maybe page three and let's
try this k5 all right that looks pretty
cool we can delete this map here and put
in a contact form so let's download the
template and save it and exit out of
there then let's import templates like
import choose file click on templates
and you've done this before so find the
template and open and import now do that
again for the other template import
templates choose file k5 open import now
and now let's start building our page so
go to pages and click on contact and
under content layout let's do a 100%
full width and click on title and
disable it then we can press update and
click Edit with Elementor then we can
add template and go to my templates and
let's add u5 which will put in the map
and then add template my templates and
let's go to k5 and insert that and if we
click on the map we can change the
address so the address will be where the
pin is
you can also put in a city
or even a state you could change the
zoom level so it's really zoomed in or
regularly zoomed in and that looks
pretty good so let's scroll down and
let's exit out of this map because we
already have a map and let's click on
these icons and go to style and go to
icon and we can change the color and we
can type in our color here if we want
I'm just gonna do 2169 EF then click on
the title and change the title to
contact us and let's click on the Edit
section and instead of full width which
will make the contact us section and the
form go all the way to the side let's
make it boxed so it stays in a little
box and let's not put anything in here
it'll just be default alright for a
Content position we want it to be
default because if it's in the middle
then all the content that we add is just
going to be in the middle of the section
instead of default which is what we want
which is on the left side of each
section all right now we can go to
advanced and I think there's too much
spacing at the top so I'm gonna change
that from 150 to 102
I'm gonna change my address right here
and I'm gonna put in my phone number
right here and I'm going to delete this
cuz I don't have two phone numbers and
I'm gonna put in my email address Tyler
Moore at gmail.com right here alright
that looks pretty good so let's save
that and we're not adding iform yet
because we can't do that here we need to
do it somewhere else but before I do
that actually let me go to style and
make this contact us open sans and make
it less bold well well maybe a little
more bold than that alright that looks
right alright so let's click Save and
what we're gonna do next is add a
contact form right here so let's go
ahead and do that eggs that are there
and press go to dashboard and again we
need a plugin and again a plug-in adds
new cool features to your website like a
contact form so just go ahead and click
on plugins then click add new and search
for contact form and one of my favorite
ones is contact form 7 even though the
one on the right is also super easy and
maybe even a little bit
easier than contact form 7 but i've been
using contact form 7 for so long that i
can't part with it but WP forms is super
awesome also alright so we're just gonna
click install now and then we're gonna
click activate to activate our contact
form 7 and we're gonna go to contact and
we're just gonna click on contact form 1
and here you can change all of these
fields but you want to make sure that
you go to mail and change this or don't
but just make sure that it has your
email address because this is where when
they fill out the form this is where it
gets sent to so you want to make sure
this has your email address in it and
now what we can do is copy this contact
form code here it's called a shortcode
and go back to pages and click on
contact then click edit with Elementor
and now what we can do is search for
shortcode sh o RT co d e and drag it in
there and this will allow you to put
that code into your page so just go
ahead and paste that code in there and
your contact form will show up now when
anyone emails you it will go straight
here and you can email them back and
start a relationship alright and we can
adjust this size so that the contact us
is a little bit smaller that section and
the contact form is a little bit bigger
so adjust it to whatever you want then
click save and exit out there and view
our page and now we can see our page and
it is really cool but maybe this contact
us should be a little bit down so it's a
little more even with the form so let's
go here we can click on this section
this column section right here
go to advanced unlink the values for the
margin and just put 10 here and press
save and now if we refresh that contact
us should go a little bit down and that
looks a lot more even in level 2 my eye
alright so that's pretty awesome but if
we look up here we see the menu is over
this map and it looks pretty weird so
how do we make it so that the menu is
just like a regular menu and not a
see-through menu but only on this page
and to do that all we have to do is not
go to element or page but click on edit
page and click
on header then click under header style
go to minimal and press update then view
our page and now we can see it looks
much much better and you can change this
header color it just like you did on the
transparent one by clicking on customize
and header I believe alright so that
looks pretty sweet and if we look at the
mobile version and squish it down a
little bit that looks perfect and that
looks awesome the next thing that we're
gonna do is add a logo right here
instead of text even though the text
looks pretty awesome so to do that we're
just gonna exit out of there and we're
gonna exit here and we're gonna go to
the dashboard once we do that we could
just click on visit site and let's open
up a new tab and go to logo maker com
that's L OG o ma ke R Co M we can exit
out of this tutorial and find our logo
so I'm just gonna look for triangle I
don't know that seems like a pretty cool
logo maybe and I'm just gonna search in
searched and searched and searched and
searched for the right triangle not a
right triangle for the correct triangle
and this one looks pretty cool
so just click on it and in logo maker
you can click hold and resize you can
add text here you can put in your
business name and drag it to the side or
if you want to be like Apple you can
just have the logo there you can change
the font but we want a more modern
looking logo for our website where it's
just the logo that's what like Apple
does and that's what logo maker also
does if you see in the top left it's
just our logo it doesn't say their name
so we're gonna add that and to do that
we're just going to right click on the
text and press Delete and drag it so
it's a big size it doesn't matter the
exact size then we're gonna make it
white and you can't see the logo there
but it is there and we're gonna press
save in the top right corner and press
download and agree to give credit
alright once we do that we will go to
desktop and just name it logo dot PNG
make sure it says dot PNG because PNG
makes it so that there can be
transparency so that it's not like a
square box like if you save it as a JPEG
it would be like a square box white in
back of it but if you do a PNG
and it will be like see-through all
right so save that to your desktop or
wherever we can exit out of logo maker
then we can click on customize and go to
header and click logo then click select
logo and go to upload files select files
go to your desktop or wherever you
downloaded it to and choose the logo and
press open then it will upload and
choose select and click skip cropping
because we don't want to crop it that
we'll take off the top in the bottom so
skip cropping and now we can see our
logo is huge but we don't want it that
big so go under max width and just
change it so I'm gonna change it to
about let's see 45 that looks pretty
good I like it I like it a little small
by depending on your logos dimensions it
will definitely be different then we can
press publish and exit out of there and
now we can see we have this really
cool-looking logo on our website and
that is awesome
so our website is almost done almost
complete almost perfect but we have this
bottom footer area here and we want to
change it and make it look much better
so just go to the dashboard and go to
Elementor and go to my library and now
we're going to import a footer template
so I've created footer templates for you
guys so you don't need to do all the
work yourself
alright so open up a new tab and go to
Tyler comm click on templates and click
on miscellaneous and we have a choice of
a black footer here or a blue footer
let's go with the black one and press
download template and press save it's
downloaded now we need to import
templates choose file go to templates
let's do the x1 template that's open and
import now alright once we're done with
that this is gonna be a little bit
different so we need to go to theme
panel and go to my library and add new
so we're adding a new template to our
theme panel put in the title you can
just put in footer and again just like
everything else we want the content
layout to be a hundred percent full
width and the title to be disabled now
we can publish that click edit with
element or add a template go to my ten
and go to the x1 and insert it and here
we're looking at doubles because one is
a desktop version and one is a mobile
version so the desktop version will only
show on the desktop and the mobile
version will only show if you're on a
phone or a screen that's really small so
to make sure that your menu is in here
again just click on it and go to select
menu and make sure it says main or
whatever you named your menu next we're
going to change out this logo so just
click on it and press Delete and then
we're gonna add in one we're gonna add
in the a and press insert that looks
pretty cool and you see it's cut off
here a little bit on the right side and
that's because the image size is set to
thumbnail and not full so we want it to
be full and now we see the whole thing
and we can adjust the size here I'm
gonna make it a little bit smaller and
let's duplicate it and just click hold
and drag it to the bottom one and let's
go over this pencil and exit out of
there and let's make it in the center
because when all of this gets squished
on a small screen it's all gonna stack
up on top of each other so we want
everything to be in the center on the
mobile version alright and we can
increase the size a little bit on that
one now we can go over to the social
media icons and click on Facebook
actually we'll keep Facebook and for
Instagram I'm just gonna type in YouTube
and I'm gonna put in my YouTube URL and
I'll click on Facebook and I'll change
it to my facebook URL alright we'll
hover over the pencil and we'll press
the duplicate button and we'll just drag
that below and we will exit out of this
one and we will Center it so that it
goes in the center alright that's about
it so let's press save and exit out of
there and view page and this looks
really weird because we're just viewing
the footer page but if we go to our home
page and we scroll down we're not gonna
see it because we haven't added the
footer to our page yet so what we need
to do is click on customize and let's
scroll down so that we can see the
footer then click on footer or bottom
and we're actually going to disable it
and that will leave us with just a black
bar then we're gonna go back and go to
footer widgets and select template so
we're gonna
select our template that we added so now
footer is here so we're gonna select
that and now we see our footer there but
really there's black space on the top
and bottom so if we go to select color
and we make it a different color we can
actually see it and we don't want all of
that color there so where it says
padding we're just gonna put in zeros
sometimes when you put in one zero it
doesn't work so sometimes you have to
put in double zeros so just put in
double zeros and we still see color on
the left side and the right side and
that's because the footer is not
stretching all the way across so let's
publish all of that and exit out of
there and let's go back to our dashboard
and then go to theme panel my library
and click on footer and edit with
Elementor and let's click on the top
section first and boxed is fine right
here but where it says stretch section
let's click on yes and let's click on
the second section and also press yes
all right that should solve the issue
where it doesn't stretch out all the way
but we also forgot a step here if
someone clicks on the logo at the bottom
it should take you back to the home page
that is the standard way of how things
work usually so let's click on the first
logo and under link - let's do custom
URL and let's put in our website name
alright and let's do that for the second
one just click on it go to custom URL
and put it on our website name now we
exit out of there and view the page and
it looks funny but if we go to the home
page and we see it in a link to our home
page and it stretches all the way across
and it looks pretty fantastic now if we
squish it the mobile version comes into
play and everything is centered and that
looks pretty awesome too
the next thing that we're gonna do is
change our fav icon and that's this
little icon up here you could barely see
it but you see it looks like a page
right now we want our logo to be in
there but if we keep our logo as white
because it's a white background you're
not gonna be able to see it so I want to
change our logo into a black logo so
that we can actually see that icon so to
do that click on customize then click
site identity and we can rehear site
icon should be square and at least 512
by 512 pixels are
right so let's go to logo maker.com
again that's ello geo Mak are with know
e-comm exit out of there and let's
search for that triangle again and I
will speed this up because takes a long
time to find this triangle all right so
we found the triangle and now I'm gonna
make it bigger now if we move this
layers panel we can see the crop button
hiding behind it and the bottom right so
just click on it and if we adjust it we
can see in the top right the dimensions
and the dimensions again if we look on
the website need to be 512 by 512 so
let's go back to logo maker and let's
adjust it so we can see the width 512
and the height needs to be also 512
there we go
then let's crop it right here let's move
it and double click to crop and now that
it's cropped we can click and drag the
logo so that it fills it out and try to
fill it out as much as possible
then click Save logo alright and press
download and just type fav icon exit out
of there and select your image upload
files select files click on fav icon
press open and press select and click on
crop image and now we can see we have
that cool little a right in the top left
corner click on publish and exit out of
there and you have that little icon
right up there and it looks really cool
and really polishes off your website so
that is how you create a website step by
step with no step skipped I hope you
love your website and I hope you got a
lot out of this video and just be amazed
at what you built it is truly amazing
what you can do now and we can look at
our website and it looks really cool we
can go to the about page awesome our
services page is beautiful
click start' and go to the contact page
and i think that we did a really really
good job we could click on this bottom
logo right here and it should take us
back to our home page and it just looks
amazing now there is one more thing that
we need to do and that is to log out so
we can view it as the visitor so just go
over to the top right and hover over
then click log out and then visit your
site just like a visitor would and you
are done creating your website so I hope
you loved this video please remember to
comment rate and subscribe
I'm Tyler Moore thank you so much