WordPress For Beginners
[Music]
WordPress Made Easy
No Experience Needed
WordPress Step By Step Guide
Make A Beautiful Website
With Easy To Follow Steps
And No Hidden Costs
In Just 2 Hours Time
Let's get started!
hi I'm Bethany and I love to travel
right now I'm a Couple's Tower Isle
resort in Ocho Rios Jamaica one of my
favorite travel spots I recently got the
idea to make a wordpress website so I
could share my travel experiences and
give advice to people who are new to
traveling abroad I wanted my website to
be mobile friendly easy to navigate and
simple for me to update it turned out so
well that my husband and I decided to
make a tutorial to show others how to
use WordPress I hope you enjoy making
your website as much as I had fun
making mine thanks Bethany
hello I'm Yoda welcome to my remote office
San Souci resort Ocho Rios Jamaica
in this WordPress tutorial I'm going to
show you how to build a WordPress
website with easy-to-follow steps no
hidden costs in less than two hours of
your time this video will use all the
current web design and web development
techniques to create a fully responsive
website that will automatically adjust
to meet the screen needs of any type of
computer laptop tablet phone or any
other handheld device I think we're
ready to get started so without further
delay let's go ahead and visit Bethany's
new website your ultimate vacation comm
which is the website we're going to
build today the her website starts out
displaying a youtube video and basically
we're going to be able to embed that
into your website now initially you see
this and you can already feel a little
overwhelmed it's like wow look at all
this complicated stuff but the truth is
the wordpress software is going to
do all the complicated stuff all we have
to do is tell it what to do
to start with Bethany's going
to have a logo at the top left corner
we're going to learn how to make this
logo for free online
well then learn how to find free video
content that you can insert into your
website and then we'll learn how to
insert that video content into your
website now as we scroll down notice how
the content animates in until it gets to
its final destination I'll show you how
to do this animation yourself it's
actually very simple we're learning how
to insert pictures into your website
we'll learn how to add text and change
the size and the color well learn how to
make these little wave dividers there's
actually lots of different dividers to
choose from this is just one we chose
well learn how to do call-to-action
areas notice how the icon pops out and
the button pops out and we can control
the colors of all this and the size and
everything about it change the icon as
well well learn how to do these
accordion lists where we could basically
do any kind of frequently asked
questions we want to do notice how you
click on the different sections and it
brings it up now you're not actually
doing any of the coding to make this
happen all you're doing is providing the
content the software we're going to use
it's going to do all the real work well
learn how to do a photo carousel notice
you can force it to go to the right or
the left or if you let it sit long
enough it'll just scroll on its own
notice in the testimonial section how
the animation brings a content in nicely
well learn how to make this testimonial
section with images and the different
text sizes we got to control all this to
whatever you need it to be when we go to
build this you'll see that there's
plenty of options to make this exactly
what you want it to be you have total
control at that level then we're going
to do this parallax background notice
how the image slides up and down inside
of the window then we'll learn how to
add this floating box on top with a join
our email list inside of it I'll show
you how to make the two fields that are
required and we'll also show you how to
make the sin bunt and go exactly to who
you want it to go to at the very bottom
we have a footer it has four separate
sections you don't have to use all four
sections but I generally do you have
complete control of the content that
goes in your footer notice that column
four has complete navigation that can
take you anywhere from here or you can
hit the button at the bottom right which
takes you all the way to the top of the
website
then we'll build her about us page and
on the about Us page in the header is
this other logo we're going to learn how
to make that now also we'll learn how to
put this movie in the header at the top
now this could also just be a graphic or
an image we have full control over that
here's another to Collin section that
has some text to the left and image to
the right and then under destinations
you'll see that destinations is not
clickable we'll learn how to make that
not clickable it could be clickable what
we're going to learn how to make it not
clickable and then we're going to build
individual pages under that for example
the destination is Jamaica page which is
definitely one of our favorite
destinations we're going to learn how to
make this really nice header in fact if
I turn around where I'm sitting right
now that's exactly the view I have it's
just unbelievable how beautiful it is
here
definitely one of my favorite places in
the world to develop is right here at
San Souci resort Ocho Rios Jamaica
we scroll down you'll notice these little
progress bars will learn how to make these and
have complete control over those it's
basically a status bar we control the
text and the percentage we'll also learn
how to make these buttons that allow you
to jump down to a particular place in
the page for example if we scroll down
to things to do you can see that takes
quite a while to get there but if I
click on the button it takes me right
there immediately well learn how to make
these pictures go all the way to the
edge like this we'll also learn how to
put the text into boxes and how to
control the spacing around them
and we'll go back up to the top
learn how to make a gallery and one of
the things this gallery has is called a
light box and the light box all that
means is when you click on an image it
brings it up in a highlighted box and
then you can click to the right or left
from here notice when we close that
picture it doesn't matter which picture
you click on it'll start rotating from
that point again you're not doing the
mechanics of this you're simply going to
drag a photo gallery in tell it which
pictures you want to do and it's going
to do all the work for you that's what's
really incredible about this product it
really does all the work all we do is
tell it what to do then we're going to
build a travel tips page which includes
all the travel tips that bethany's
collected over the years just an
incredible list of helpful tools for
people who want to travel abroad our
goal of course is to build the page and
notice it has all these really cool
accordion pull downs and all we did was
provide the content it did the work for
us and then finally we will build a
Contact Us page and on the contact us
page we'll learn how to do these
separate sections again these can be
ordered to however you want this is just
one example of how it can be done so you
have a phone email and address the phone
will be clickable the email could be
clickable but we try to encourage people
to use the message touch forum so we
made it not clickable here then we'll
show you how to make the name email and
phone fields required whereas the
subject and that your message fields are
not required and we'll show you how to
make the send button go exactly where
you want it to go and we'll learn how to
insert a Google map into your website
notice how the map can be moved around
it can be zoomed in it can be zoomed out
and we should be able to complete the
actual construction of the website
itself in a little less than two hours
now all professional web sites have
certain intrinsic cost you simply can't
avoid for example you're going to need
quality website hosting and that's going
to run you about ten dollars a month and
you're also going to need a domain name
that's how you access your website and
it runs about twelve dollars a year I'm
gonna show you where I get these
services from to a discount promotional
rate but if you choose to purchase your
web hosting somewhere else in your
domain somewhere else this course will
work just fine but outside of those
costs that's it there's no extra cost to
follow if you're concerned you're gonna
run into troubles while taking the
course don't I'm in a web master
instructor aka the web Yoda for over
twenty years and I'd love to hear from
my students so as you work your way
through this course feel free to express
your comments suggestions and questions
below the video if you have any troubles
just ask I mean more than happy to
assist you
but in exchange please pay it forward
like the video share the video subscribe
to video tell your friends about the
video is the best way for me to get the
word out there to help so many students
like yourself as possible
so we're ready to start on our website
but before we can build a website we
have to have a place for our website to
live and that's what web hosting does
for you otherwise you'd build a website
on your local computer but only you'd be
able to see it you want to be able to
have the world see it so you have to get
hosting so everybody else can see your
results the next question is who are you
going to get hosting from because
obviously there's a lot of choices out
there
well web biota did some research and
they came across some very non biased
results where PC Magazine conducted an
Editors Choice Award for web hosting and
shown here are the top six results from
that Editors Choice Award and of the six
Hostgator was the number one pick for PC
Magazine Editors Choice Award and this
was because their features were amazing
the reliability and security was amazing
and their 24/7 support was very
proactive with all of this their pricing
was as good or better than any of the
other options out there so web yeutter
decided to go with Hostgator and they
use that for all their students and any
websites that build and will also be
using Hostgator for this course as well
so at this point we're going to go to
hostgator.com
front slash web Yoda and the reason for
that link is that now web Yuda has a
partnership with Hostgator thereby every
time a hosting package is sold through
that partnership a small portion of that
goes to the web unit of foundation and
the web unit a foundation in turn uses
that money to build more free courses
like this one as well as to provide free
training for training centers and online
students all over the world who may not
be able to afford professional training
so let's go ahead and go to the link
hostgator.com front slash web yoda and
this will show the web hosting options
that Hostgator has to offer
now Hostgator has three levels of
hosting their recommended hosting
package is the hatchling plan in this
plan is for a single domain so if you're
doing a single website or if you're
student taking this course then the
hatchling plan is for you now no matter
which plan you get they all come with
1-click installs now what this means is
for example when we install WordPress
there'll be an individual click inside
of our control panel we click that once
and it'll do all the work to install our
WordPress next all three plans come with
unmetered bandwidth and what this does
for you is no matter how much traffic
your website gets you're not going to be
charged any extra and finally what to me
is outstanding is they offer you a free
SSL certificate well what is that why do
I want one well it's the secure key it
will key up here in the top left and as
of earlier this year Google is basically
favoring websites that are secure and
also favoring websites that are mobile
friendly so we're going to build a
website that's mobile-friendly using
WordPress and thanks to Hostgator when I
have a free secure key so Google's gonna
like us even more now normally you could
pay thirty five to a hundred dollars for
a feature like this and Hostgator is
basically given that to us for free
and when your hosting options start at
just 278 a month it's just really hard
to beat if you're going to have multiple
websites you need to go with the baby
plan because that allows you unlimited
domains basically unlimited websites
within your account and then if you're
doing even larger things where you need
a dedicated IP and you need a lot of SEO
tools then the business plan is probably
the package for you now the hatchling
plan is going to work fine for us for
this example Bethany only has one web
site so let's go ahead and click the Buy
Now button
now we're ready to complete our web
hosting application so we can activate
our hosting and our first decision is do
I need to register a new domain or do I
already own a domain in most cases you
don't own a domain so you need to enter
a domain in this box unfortunately lots
of domain names already taken so it may
take you a while to find a domain
that'll work for your company then also
is available for this example I'm going
to make up one choose a domain name.com
and then I'm going to click to the right
of the dot-com button here and it says
that domain name is not available so I'm
going to pick a new domain name choose
another domain name.com and then I'll
click to the right again that one is
available so we're ready to go and we
don't need any other names because those
are for somebody else's website and not
ours now if you scroll down the next
thing you'll see is domain privacy
protection so let's turn this off to see
exactly what this is now for 1495 a year
if somebody goes to look up your domain
name the result they'll see will say
that it's owned by Hostgator comm have
their address their phone number and
their email if you choose not to pay
this fee then if somebody looks your
domain name up it's going to have your
name your address phone number and email
but this is likely on your website
already just like it's going to be for
Bethany so for us there's really no
benefit in paying the 14.95 so we're
going to choose to avoid that fee now in
Bethany's situation she already owns her
domain so we're gonna scroll back up to
the top and we're gonna choose I already
own this domain so we'll enter her
domain in the box your ultimate vacation
com
then we'll click to the right and it
shows it at it again a bunch of
additional choices but we don't need any
of those and notice when we scroll down
that the privacy option is gone now
because that's only applicable if you're
purchasing your domain name through
Hostgator now we're ready to set our
details for our hosting plan we already
chose the hatchling plan but in any time
if you need to upgrade you can just
contact them they'll just charge you the
difference your next choice is your
billing cycle and this goes all the way
from 36 months at their best price at
278 a month down to 548 a month for the
first month now obviously the longer you
commit to the better your price is but
on top of that we're going to give you a
promotional code web Yoda and that's
going to
get you an additional 60% off of
whatever your purchase is today now we
need to choose a username in my case I'm
just going to choose admin yota
and a security pin of nine none now we
need to enter our billing information
and they give you an option between
credit card and PayPal which is nice
I'll be entering this information behind
the scenes now we're going to look at
their additional services and decide
which one's work best for us the secure
key is the first one it's free so we're
definitely keeping that one the second
one is protection for the website well
they already offer great protection of
their servers because they want to make
sure that their servers aren't hacked by
anyone next they're going to offer
protection from you so that you don't
accidentally mess up their servers so in
my opinion if you pay for this you're
paying for a service you really don't
need next four five dollars a month
they'll give you a professional email
web Yoda has a video that shows you how
to make an email forward for free on
your Hostgator account and that helps
you avoid this fee next there's a backup
option for 2395 a year we're going to
opt against this for two reasons one
Hostgator does monthly backups on an
automated basis for us into web Yoda has
a video on how to backup your WordPress
website and thereby avoiding the annual
fee the last option under there
additional services is an SEO package
and I really don't want to tie an SEO
package to my web hosting package at
this time maybe once the web site is
complete I can address that the next box
is the coupon code box in this box
you'll want to put web Yoda this is
going to get you 60% off your entire
purchase today if you found an option
out there better than that please let us
know because our partnership with them
pretty much guarantees that no one's
going to have better than 60% off you do
the math over here you'll see it's
basically 60% off now we don't have the
domain name in here because Bethany
already owned her domain so your price
may be a little higher than this also if
you choose a longer term your price will
go up from here and you'll still get the
60 percent off your total purchase but
in our case this 583 is really an
outstanding price for what we're getting
today at this point we can scroll down
and we're ready to checkout you'll
notice that the checkout Now button is
disabled that is because we need to
agree to their terms of service and
cancellation policy before we can
proceed so if we just click the box over
here to the left then we're ready to
checkout and now we're ready to click
the checkout Now button to complete our
purchase
at this point our purchase is complete
we're waiting for Hostgator to finish
setting up our account once complete
it'll refresh to the next page and our
order is complete and we're ready to
proceed our next step is to login to our
control panel for our new hosting
account that we just purchased and to do
that we first need to go to our email
and there's mine now so we want to click
into your email and you'll be looking
for an email from Hostgator that has
your account information in it it's
going to have the domain name that's
associated with your hosting account
it'll have the username that you chose
it's gonna have a password they created
for you so your need to highlight that
and copy the clipboard because nobody
could possibly remember that password it
also includes the link to your control
panel for your hosting account you're
going to need to make a copy of this
link or make a bookmark to it or
something because you're going to be
going back to that periodically
alternatively you could also refer to
this email they sent you so now we're
going to click on our link to our
control panel this will create a new tab
at the top and it says cPanel login you
want to click on that tab and that
brings up the box to log into your
control panel and then you want to enter
your user name in this case admin yota
and then you're going to paste in that
crazy password you just copied from the
email
next you're going to click the login
button and now you've successfully
logged into your cPanel your control
panel for your web hosting account now
we're ready to install WordPress in the
section at the top called popular links
you want to look for build a new
WordPress site first we need to select
our domain name for installation simply
click the pulldown and click on your
domain name now since we use this
account for more than one thing there's
lots of things in our box so in our case
we're going to pick Bethany's new site
your ultimate vacation com as for a
directory name you don't need to choose
one we're simply going to click the next
button now we're going to enter the blog
title which is basically the website
name so for Bethany's site we're going
to put your ultimate vacation from our
WordPress admin user I'm going to use go
to user and for the first name and last
name I'll just choose Yoda Yoda
then for the admin email I'm going to
use Yoda at web Yoda calm
we want WordPress to automatically
create our database for us we'll leave
this checked then we need to agree to
their terms of service so we'll click
that and now we're ready to install so
we'll click on install you can see at
the top that it's spinning away then it
says installation complete even though
our installation is a hundred percent
complete if you look to the right the
overall website progress is only 60
percent now if you scroll down you'll
see why that is they basically want to
up charge you for different features
well we don't need to pay for any extra
features because I'm going to show you
how to do the rest of the install for
free under the installation details you
can see that our WordPress has been
installed to your ultimate vacation com
our username is the one that we selected
in this case Yoda user and then they've
also generated a really fancy password
for us so we're going to copy that
password to our clipboard and next we're
going to click the login button now
we're at the login area for our
WordPress admin in the first box you
want to type in your username in my case
you go to user and then we're going to
paste that crazy pass where they gave us
into the password box then we're going
to click on login now when you see the
WordPress admin come up for the first
time it can be very intimidating you're
like oh my god what have I got myself
into this looks really complicated how
am I going to build that website we
looked at earlier using this stuff but
fear not we're not going to be using any
of this craziness we're in a very simple
way for you to do this if you have any
troubles at all you'll just leave
questions under the video I'll answer
and help you get you moving again
you can get through this trust me this
little message here we can just dismiss
that now before we proceed I want to go
ahead and clean up our tabs a little bit
we no longer need this one so we can
close that one we no longer need this
one so we can close that one and now I
want to open up a tab to the right that
is the website we're going to build and
to do that we're on a highlight right
here and then if we right click here it
brings up a menu where we can open up
our website in a new tab
now our website is here so we can click
on that
and as of now you can see it's a whole
lot on nothing and now I want to open up
a new tab over here to put Bethenny's
version of the website as our reference
site so I opened up a new tab and now
we'll go to her web address
now we can go back to our dashboard
and we're ready to proceed at this point
our WordPress application is officially
installed but as the next step I like to
go ahead and show you how to change that
crazy password they gave you to
something that's more manageable what
you're looking at is the dashboard for
your WordPress admin on the left hand
side about 3/4 the way down it's an
option called users this is where you
can update add and delete users to your
system let's go ahead and click on users
now notice that our mouse is a little
difficult to see so I figured I'd turn
on highlighting and make it easier for
you to follow now that's a little bit
better now let's go ahead and click on
the username and this brings up the
profile for the user and as we scroll
down the profile there's a section near
the bottom called new password generate
password when you click on generate
password it's yet another fancy password
that craziness nobody's gonna want to be
able to remember and so we're going to
delete that and then we'll click on hide
so people don't see us typing our new
password and as we start typing you'll
notice it'll say very weak and maybe
you'll say weak and then you had to type
confirm use or click on confirm use weak
password you really won't want to do
that you want to pick something that's
got strong and then that'll give this
and that little message goes away that
way you have a really fancy password but
yet it's still something you can
remember so it's the best of both worlds
at this point we just go ahead and click
on update profile
and up here it shows profile updated so
now we now have a new password at this
point I want to take care of a couple of
frequently asked questions the first of
those is how do you log into your
WordPress how do you come back to it log
into it and the answer is in your URL
basically it's your domain name slash
wp-admin and that'll take you back to
the login box for your WordPress so if I
hit enter on that I would normally get a
login box since I'm already logged in it
just takes me to my dashboard but
typically you type in your domain name
front slash WP dash admin and that's how
you get to the login box
now the next frequently asked question I
get a lot is how do I go back to a
particular spot in the video to review
it or to reuse it in another website and
the answer is go to the video that you
watched in this case the one you're
watching now and then scroll down below
the video and look for where it says
show more and when if you click on show
more and scroll down and that there's a
section called timestamps in any of
these crime stamps if you click on and
it takes you to the review for that
particular piece of the video now these
time stands for for a different web you
a tutorial but the idea is the same now
that our WordPress is completely
installed there's a few other things we
need to install to get everything ready
for us to work on our real website the
first of those is called a theme we're
going to click on appearance and themes
and then we're going to be adding a new
theme but first we need to do is
download the theme we're going to use
and so we're going to make a new tab on
our browser and then we're going to go
to web yet accom front slash themes and
this brings up the themes page on the
web GL web site and now we're just going
to scroll down to the project or working
on in this case your ultimate vacation
com and the theme for this website is
ocean WP theme then we're going to click
on that and it will download it to our
downloads folder and each time I do it
download like that Mount automatically
brings up a window like this yours may
not and I can click close on that and
now I'm ready to upload our new theme
and to do that we can go ahead and close
this tab we're going to go back to WP
admin
and at the top of themes there's an add
new button we clicked on that and now
we're gonna click on the button that
shows up in the same spot upload theme
and we're going to choose a file on our
local computer in this case it's in my
downloads folder and it's called ocean
WP dot zip I click on open and now I'll
click on install and it will install
that theme and once the theme is
installed you make sure that you click
on activate which is right here and that
makes it the active theme that you're
going to use for your website now
oftentimes when you do an install of the
theme it's possible that they've made
updates to it which they do fairly
regular and you'll see an update button
if you see one just click on the Update
button and it'll give you the latest
version of that now there's one last
thing we need to install before we can
actually start building our website and
that item is plugins now plugins are the
tools they're going to allow us to build
our website much like a contractor has
tools to build a house WordPress uses
plugins to build websites so on the left
hand side we can click on the word
plugins now inside the plugins there's
going to be a list of all the plugins
that come by default within your
WordPress environment but these plugins
are for somebody else's website not for
ours so our first step will be to delete
all of these WordPress plugins and then
we'll proceed to install the plugins
we'll use with our website
to delete plugins you first have to
deactivate them and on the left-hand
side you'll see a box that says bulk
actions if you do the pulldown you can
choose deactivate and just below that is
a box you can click called plug-in that
allow you to select all the plugins at
once now we're going to click apply this
point it's going to deactivate each one
of them now they're deactivated at this
point we can go to the bulk actions
option again we can choose delete we can
choose our plug-in button to select them
all again and then we click apply
okay yes we really want to do this and
we watch one by one as they get deleted
and clean up our environment so now all
the plugins are deleted and we're ready
to start installing our own plugins to
install our plugins we first have to
download into our local computer then we
can upload them into our WordPress
environment to do that we're going to
make a new tab in our browser we're
going to get a web.com front slash
plugins now in this page scroll down to
the project we're going to be doing in
this case your ultimate vacation comm
and one by one we're going to click on
each of the plugins that download them
to our computer first plug-in we're
going to download is Elementor and this
is the page building plug-in that's
going to allow us to build our amazing
website today
every time I download a plug-in I get
one of these pop-up boxes I don't need
all these so I'm going to close these as
I go along
the second plug-in is contact form seven
a contact form seven is the most popular
contact form plug-in for WordPress it
allows us to build the contact forms
where we can send information from our
website to us from the users the third
is cf7 Elementor and this allows a
contact form 7 to work inside the
element or environment the fourth is
ocean WP extra and these are extra
plugins that work well with the theme
that we installed
and the final one is the duplicate page
plug-in and this thing is amazing it
allows you to take for example the
destinations to make a page and make a
copy of it and call it a Hawaii page and
then we can just change the content to
be the new page we need now that we've
downloaded all our plugins it's time to
start installing our plugins we're going
to go back to WP admin and from here
we're inside our plugins and at the top
we're going to click on add new
at this point click on upload plugins
choose file and just go to your
downloads folder that's where they
should be yet we'll start with the one
at the top duplicate page we'll click on
open install now
and once its installed you need to click
activate plug-in once that's complete
we'll click on add new again
plug-in use a file motion WP install now
activate plug-in and three more to go
click on add new upload plug-in choose
file pick our third one install now
activate plug-in add new upload plug-in
choose file pick our fourth one open
install now activate plug-in and we have
one more the biggie Elementor you're
gonna love it
add new upload plug-in boosts file
Elementor open install now and activate
plug-in and we are officially ready to
start working on our website now
Elementor is going to come with a brief
overview but you don't need that you
have me so we can close this out
and there's one last thing I wanted to
bring up if you notice near the top left
that says updates to and lower down it
says plugins - basically that's telling
us there's some updates that can be done
and if you click on whatever the item is
in this case plugins you scroll down you
can hit update now next to each one of
these and this makes sure you're running
the most up-to-date versions
you'll notice that even though we just
installed WordPress there is a message
here at the top that says that there's
available for a new update now this is
likely because the default installed
version was not necessarily the most
up-to-date and now there's a newer
version available that's good because
now we can learn how to update our
WordPress now to update WordPress
basically when you log in to your
dashboard you'll see a message like this
and if that message shows up all you
need to do is go ahead and click to
update now it will click on update now
and at the top of the WordPress updates
page there's an important notice to back
up your database and files now if this
is a new WordPress environment where you
haven't built anything yet you don't
need to worry about the backup but if
you've got your website already up and
running you're looking to update your
WordPress you'll want to back those up
now we already have a video for backing
up your database and files called how to
backup your WordPress and it's using a
product called backup buddy and use that
video to see how to do automated and
manual backup so that you can go ahead
and do that before you would proceed at
this time we're going to go ahead and
click on update now and this starts the
update process for the WordPress
now the updates complete and it usually
doesn't take too long but it could take
a little bit longer it just depends on
circumstances then from here we can just
click on dashboard to get back where we
were at before we started the update now
one of the things you'll quickly notice
when you're working on your website is
that the dashboard will change for
example what you're seeing right now in
the dashboard is what it looked like
before we installed our plugins and it's
just information about what's going on
currently with WordPress and a lot of
times it's advertisement for things that
you have installed or advertising for
things they might want you to install
now once we installed our theme in our
plugins you'll notice that this is what
the dashboard looked like and it has
information about our new theme and it
has information about our mentor and
things that are going on these little
windows are movable so they might be
useful for you and give you information
about what's going on and things like
that but many times things will come up
like this little piece at the top is
just an advertisement they recommended
something but we're not going to be
using that so we can close as little
advertisements out like that okay our
first step in building our website is to
create some pages to do that we're going
to click on pages on the left hand side
and first we'll go ahead and delete the
pages that are there these are just
sample pages we don't need those I can
choose those bulk actions they've to
trash apply and now we have no pages now
to add our first page we're gonna click
on add new and from here we don't need
this little box it's going helpful we're
gonna set a couple of defaults the
reason why we're going to do that is so
once we've finished our first empty page
we can copy it in the defaults for all
the new empty pages will already be set
the first let's set a title for the page
since this is our first page we'll call
it home and then under content layout
we're going to use a hundred percent
full width and finally under title we're
going to set the title to be disabled
and these are just the defaults that are
going to work for the site we need to
build so now the top right we'll click
publish
and click publish again and now our page
is complete and if we go back to pages
we'll see that it's listed as our first
page that's available now there's one
more default I want to set on our
initial page if you highlight the name
of the page it comes up with these extra
options and we're going to choose the
option quick edit in here there's a
template and we're going to choose
element or full width because that's the
one we're going to be using for this
course now we can click on update
and our first default page is complete
to copy this page if we put our mouse
over the home name again this menu comes
up and the right is duplicate this
that's how you duplicate one but how
many duplicates do we need let's go back
up to Bethenny's site and we have our
home we need 1 2 3 4 5 empty pages so
we'll come back over to our WordPress
admin and we're going to make five empty
pages so first if we highlight home we
see duplicate this we'll click on that
and now we have one copy duplicate this
again and now we have two copies three
copies or copies and now five copies so
at this point we just need to rename
each of these to be the individual pages
they're going to be so if we hover over
the name we can choose quick at it and
the first page is going to be about so
we'll put a title of about and the slug
name is basically the name of the page
itself when you go to click on it and
we're going to make that lower case
because the server is case-sensitive and
now we can hit update now our second
page name is going to be destinations so
we go in a quick edit title of
destinations and slug name destinations
lowercase update now we're ready for our
third page we click on quick edit it set
the title of gallery a slug name of
gallery lowercase and we click update
now we're going to do the travel tips
page we'll click on quick update then
we're going to give it a title of travel
tips a slug name of travel tips with the
lowercase T a dash and another lowercase
T and the reason why we like to use a
lot of these words is if you're using
keywords in your slug names it makes the
search engines like you better but now
we need to scroll down a little bit so
we can see our update button we'll click
on update and now we're ready to change
our last one so we hover over the name
click on quick edit title of contact
slug name contact lowercase role so we
can see the word update and now our
individual pages have their own
individual names
now I did forget one thing and that was
that these are all in draft mode instead
of published mode so we're going to
quickly change that and you can see how
that works I can go back into quick edit
under status choose publish and update
and I'm going to do it for all the rest
of these and you'll see that draft will
go away
and now all of our pages are published
and are ready to start building our
first page the Edit the pages of our
website requires us to access the
element or plugin and to do that it's
the same for all pages first you want to
make sure you can see the list of your
pages by clicking on pages on the left
and then choose the page you want to
edit let's say we want to edit the about
page that we clicked on the about at the
very top there's a button that says edit
with Elementor and we're going to click
on that button this loads our page and
Elementor and now we're ready to make
edits now let's say we're done making
edits we need to get back to the
dashboard you come to this hamburger
icon you click on that and at the very
bottom is exit to dashboard now at this
point we can go back to our pages and
choose a different page to work on now
notice that the about has element or
next to it that means it's in the
element or mode that also means when we
go to edit it if we click on it again
now instead of have an icon at the top
it has one right in the middle of the
page and we click on that icon going
forward to make edits to that page and
if you're ready to work on another page
click on pages and choose another page
that you want to edit
you'll notice the link for the
destinations page is now changing to
destinations Jamaica this is because the
actual page is destination is Jamaican
but the link at the top is destinations
that we'll need for the menu now before
we start adding content to our pages so
we go back to Bethany site notice this
menu across the top we want to go ahead
and build that menu before we do
anything else so let's go back to our
dashboard now to add a menu we need to
go to appearance and menus
and in the box next to a menu name we're
going to put main menu and save menu now
we're going to pick all the pages that
we just created and we're going to add
them to menu then we'll scroll down and
under custom links we'll add another
menu item
destinations and we're going to use a
pound sign as the URL for now click Add
menu
and now we have our menu we need to
organize it the way we're going to use
it so we wanted our home button at the
top and then about and then destinations
and then gallery and then travel tips
then contact and then destinations
Jamaica is a sub menu for destination so
we're going to bring it up here and
inset it just to the right under
destinations now as a final step we're
going to go into this custom link which
is destinations and just take that out
and that's how you make it to where it's
not clickable so we can click on save
menu and now our menu is saved and then
at the bottom we want to choose this to
display as our main menu and then we'll
click on save menu again and now if we
go over to our website then we hit
reload you notice now we have a menu and
each of these items is clickable and
they take us to those default pages that
we've made so notice that destinations
is not clickable but the pulldown
destinations Jamaica is clickable all
the pages obviously look the same
because they're empty right now within
Bethany's website she had a black menu
bar with these lighter colors now it's
not totally black and the letters not
totally white that makes a little easier
to read to make that effect we're going
to get back to our WordPress admin and
under appearance this time we're going
to choose customize and within customize
we're gonna choose header and so you may
need to scroll down a little bit to see
it and inside a header we're choosing
general and that's going to have the
place where you gonna change your
background color now if you click on
select color it comes up with this pad
where you can basically move around and
pick whatever color you want or choose
from these different choices here and
then move it around some more and decide
what color you want now in our case
Bethany went to a lot of trouble to go
ahead and make a lot of information for
us so for example the titles and slugs
were there that she's in our website as
are the default colors that she used all
the logo colors and things like that so
for her the menu he wanted to have it
black but not totally black and this
color is a little less than black and
I'll show you how that works let me come
back over here by pick black notice it's
all zeros or if I pick white it's all
F's well
all FS is white all zeros is black and
anything in between makes the number go
up and down now for her she picked a
color it was almost black and that way
it has a little softer look to it now at
that point we need to change the letters
now so we can actually see them again we
will go ahead and click on publish to
make that change to our site and I'm
going to scroll back to the top and then
I'll hit the left arrow to take us back
one menu and now we're going to the menu
options and from here we can make the
change to the color so notice here's the
link color so I'll go back to Bethany's
document and I'll pick the off-white
that she chose as opposed to this full
white and when we go back in here we can
change this link color don't know if I
picked white it's really really bright
but if I pick the one that she chose
it's a little less than why it's a
little easier on the eyes and then I
want to go back and pick our menu accent
color and I'll show you how that works
notice this blue here when you come over
here you can see that a little line
there well if I change that to the color
that she chose it's this green and then
I come down there's another place down
here where you can change the same thing
now when we come over here it'll have
this nice little green accent on it now
we want to go ahead and change the
background and link color for the drop
down to match what they are up here so
we do that under the drop down styling
we go in here to our background color I
set it to the background color we used
and then we'll scroll down to the link
color and use the color that she chose
there now when we come back over here
you'll see that those things match up
just fine in Bethenny's menu this menu
is to the left over here if we scroll to
the top here's our option position left
center right well she's left and what
she's published and now the only thing
left is to build the logo that's going
to fill in this spot and so we'll go
ahead and do that next
let's open up a new tab in our browser
clearly there were lots of options for
creating free logos out on the internet
but we found that design Evo comm by far
was one of the best choices out there to
give you a high quality professional
product as well at the same time being
free they also reached out to us
originally because they were interested
in a partnership with web you had a
foundation to provide some of the
proceeds to create more free training
for those who couldn't afford it so to
get to their website we're going to do
design Evo comm and then you can do
front slash web Yoda and that takes you
into the partnership link directly to
the free logo section and so you can see
here we are ready to go we can start our
new logo in the logo is 100% free no
cost to us at all now if it turns out
you need a high-res version of your logo
the link that you just went through is
going to get you discounted rates and on
top of that if you use the promotional
code web Yoda 30 off it'll get you an
additional 30% off if you decide to do
that but you're not required to purchase
anything and I'll show you how you can
download and use this particular logo
for free let's go ahead and click on
make a logo to start our free logo and
on the left you'll see a bunch of
different categories if you particular
interest for example business and
finance it'll bring up examples that may
work for your business beer in the food
and drink industry it'll have ones that
are relative to that basically any
industry you can think of now in
Bethenny's case she was interested in
travel so we can click on travel and
then let's scroll down and see if we can
find the logo that she settled on
nice thing is as these logos you can
change the colors out as well you're not
restricted to that let's see where is
she there it is
so there's the one she use we're gonna
go ahead and click on that and they're
gonna ask you hey you know that's that
the other you want a name of it and a
slogan we're just going to skip that and
go straight to making our logo however
we want to make it and how the logo has
been added to our environment and it's
ready to be edited
now for Bethenny's website there were
more than one type of logo she needed
he's gonna need this logo that has your
ultimate vacation com built into it
she's going to need a favicon icon the
one that shows up on your browser tab
and then on the interior pages if you go
to about us he needed a third logo which
is this one right here what turns out
this logo and this leg are the same
thing but basically we're going to have
the logo by itself and then we're gonna
have one with this text next to it so
let's go back to the editor and get
started on that at first we'll build a
logo that won't have any text and to do
that we're gonna highlight the text that
they gave us by default hit delete
highlight the text and hit delete now
the free logo can only be 500 by 500 max
so we're going to use that size and
we'll take this to the edge and then
we'll stretch this out and since I need
this to have a transparent background on
the about Us page what I want to do is
come over here to background and I'm
gonna change the background to a color
that is the white white color that
Bethany has in her website and that way
it's gonna be easier to replace that as
a transparent color now we're gonna
change the colors in this logo to match
the ones that Bethany used in her
website so we'll click on the logo and
it shows the colors that are in the logo
in this case the yellow ones here we'll
change that first then we're going to
click on that and then click add and
then we're going to change this to be
the color that of yellow she used which
won't be too much different but a little
bit and then this blue was a green in
her logo so we're gonna click that and
add our green and finally this teal
color is a little bit different as well
so we'll go ahead and add her color in
there and now we have all the colors of
her logo in there Bethany's logo is
ready to download and so we'll go up
here and click the download and notice
they're too fancy purchase methods and
then right here is the link to get the
free version they want you to share on
social media if you don't mind to have
the opportunity to use the free version
and we're going to click download and
agree
now this comes up in my downloads folder
in it's inside of a zip file and then I
can click inside that folder and what
I'm going to do is just pick one of
these I'll right-click on the ping file
the PNG when I copy that I'm gonna get
back to my download folder then I'm
going to paste it now I can delete the
one that I'd downloaded that folder and
I'm going to rename this one to be logo
dot free free version doesn't come as a
transparent version and we need it to be
a transparent version but we need to go
back to our browser and we're gonna open
a new tab and we're going to do a search
for Luna pick and then under Luna pick
one of the choices is transparent we're
going to choose a file from our computer
then our download folder and we'll do
logo free click on open and there's our
logo and now if we click on the color we
want to be transparent it will choose
that and then we click on apply and it's
applied now on the Left we can click on
save and then it has a choice the
default is to save as ping and that is
being downloaded right there and if we
go back to our download folder there it
is I'm going to go ahead and rename this
file and I'm going to rename it logo -
brands so I know that that's the
transparent version of our file so now
we have our logo it's transparent and
it's free now since this logo is going
to be used to sit on top of a video I
have a little bit of a concern of
whether or not the resolution is going
to be good enough to look correct with
the motion behind it so if I take this
logo and I drag it to my browser and a
new tab like this you can see that it's
a little grainy on the edges and that's
the best it's gonna get when we've got a
size that's so small now if we look at
Bethany's website you'll see that it's
super smooth around these edges and the
reason hers is super smooth is because
we made the commitment went ahead it
bought it doesn't mean you have to buy
anything but for our particular needs it
just made sense to go ahead and buy this
it wasn't really that expensive I'll
show you how we did that but the free
version certainly works as well to
purchase the high-res version we go back
to our logo
and then we click on the download and
just look at the options and let's just
choose it I'm not saying you have to do
this but we choose it you come down to
the box have a coupon web get a 30 off
redeem and now you're at less than $20
to get a high-res version your logo so
it's your choice but now I'm going to
show you what the difference looks like
so let's say the purchase goes through
and then now it's going to take you back
to your screen where your logo is that
and now because we're going to have a
purchase version it can be larger than
that and we're going to make it larger
in the high-res it's going to give ASCII
bigger than that so let's put 1,000
and one thousand apply now we can take
our logo and stretch it out really nice
and big now we're ready to download the
high-res version so we just click on
download and it automatically starts
downloading the high-res version of that
now it's successful and it shows it in
our downloads folder we'll go into the
folder use high res and then I'm going
to right click on logo transparency and
we'll copy that get back to my downloads
and then I'll paste it in here
and so now I have the transparent
version now I'm going to drag that to my
browser over here just so we can compare
the difference now we're ready to
compare our two versions so if we come
up to our browser and click on the logo
you'll notice it's a little bit bigger
and it's a little bit smoother so you
say well that's really not that much of
a difference I'm not sure what I paid
for now over here this is as large as it
gets over here if I click on and it'll
show us how big it really is and I'm
telling you I was shocked to see the
resolution when I'm look at this I'm
like I cannot believe how nice a quality
this is and it was for less than $20 so
for me we got our money's worth and we
inserted in her site and it looks just
absolutely wonderful on there so I don't
think we made a mistake but once again
it is possible to use the free version
and in most situations maybe it'll be
just fine for you as well go ahead and
clean some of these tabs up so we can
make the second logo that we need I
don't need I don't need that only that
and so now we're back to where we're at
now at this point if we click Save it'll
make a copy of that in our folder so
that we have it permanently so if you
come over here you can go into my logos
and you'll see it shows up in there
and there's a free one that I had looked
at earlier and then I just saved it just
because and here's the one that we have
the basic agreement on now one of the
wonderful things that I found out is
that if you add it the one that's here
you can download the new version so
basically you can put whatever you want
in here you could make unlimited logos
inside of here as long as you didn't
mind replacing the old one with a new
one we're going to click on edit so we
can go ahead and make the secondary
version of this now let's go ahead and
review the second logo to remind us of
what we're doing but basically we're
going to be building this logo now so
we're gonna have the same logo here but
this is gonna be going across this way
so go back into our logo maker
so the second logo is going to be a
thousand across but it doesn't need to
be nearly as tall so the first thing I'm
going to do is shrink my logo down to
say this big put at the middle of the
screen and then I'm going to change the
dimensions to 1,000 by say 200 and then
I can bring our logo over here to the
left into the top and then I'll stretch
it out to fit perfectly just like that
now the second logo is going to have the
same background color as the menu bar so
I'm gonna come over here to background
and then we're going to go in and add a
color and then we're going to add the
color which is the background that we
used in the menu bar for the website now
we're ready to add the text to our new
logo I'm going to click on text and the
first text she used has a type that's
modern sans and inside of that it's
going to be this Julius sans one so
we'll go ahead and click on that and
then it's gonna be the word you're can't
see anything yet so let's change the
color the color is gonna be the yellow
that we use on the website so now we can
see it let's make it bigger and now
let's kind of drag it over here
somewhere
and it might necessarily be the perfect
spot yet but we're going to go ahead and
keep working with it
now since I know the dot-com in the
corner is gonna be very similar to this
same font in everything I can select the
your and come over here and choose this
icon and make a duplicate of it and then
I can just drag that over here
then I can click on the text change the
text to be calm
again we adjust sizes and things like
that later now we're ready to do the
word ultimate here now if we
accidentally leave something highlighted
and then we picked a new font say this
it actually changes the font or the one
that's selected and we didn't want to do
that they have these undo and redo
buttons that are really helpful so that
undoes it and that redoes it that undoes
it again so now we want to put new text
here and to do that the next font that
she wanted to use is also a modern font
and it's called quick sin but we'll
click on that makes a box here this
particular one is going to be green and
then inside the box we can type our new
text ultimate and now let's give this a
bigger size let's say 93 and now we'll
move this somewhere up here let's say
like that and now we're ready to do our
next word
now the last word we're going to put in
is vacation that's going to be this
Roboto condensed and it's going to be
let's say size 100 and we'll change the
color to the blue that's in the website
and now we'll click on this text to go
ahead and change it say vacation and now
let's kind of drag it up into place so
now we got all the content we just need
to adjust everything to get it to fit
just right now let's make some final
adjustments to the positioning of the
text let's move that basically there
let's make this guy a little bit smaller
move over here to the corner a little
bit bring this guy down here just next
to that like so bring ultimate down here
so it lines up let's say like so and
then for this text
Bethany use this little magic one thing
as you turned on this glow and you can
barely see it but just add a little bit
of effect it makes the letters pop out a
little bit and then she clicked on
vacation and she also added glow and
basically we're done with the new logo
the second one is complete now we're
ready to download the second logo and
remember since I purchased the slot that
the logo lives in and I've updated the
logo that's in that slot when I go to
download I'm going to be downloading the
new logo as a high-resolution as well
it's basically two for the price of one
at this point so now I can click on
download and just as before it'll bring
it up in a download folder for me
I'm gonna click on the logo folder click
on the high res folder now I don't need
it to be transparent because in this
particular situation it's going to be in
the menu so I'm going to right click on
the ping version copy that to the
clipboard go back to downloads I'm going
to paste it and then I'm going to rename
this one logo menu and hit enter
I'm gonna drag that one over to my
browser and I'll look at it in the
browser and look how great it looks and
then I'm gonna click on it and see it is
really really nice but again now that I
got to low good for the price of one I'm
pretty happy with myself at this point
now let's go ahead and clean our browser
up a little bit so we can proceed to
start using our new logo so we'll close
this now here I'm going to close that
window and I'm actually gonna click Save
because this was tougher to make and so
that's the version it saved inside of
there I'll close this I'll close this
I'll close this now go back to the
wordpress dashboard by clicking the X at
the top left to add a logo to the menu
bar you're going to go under appearance
and then you're going to choose
customize you're going to choose header
and then you're going to choose logo now
we're going to do select logo I
currently don't have a logo in here so
what do these select files we're going
to choose our logo - menu it open it
select and we're just gonna skip
cropping because we want to use the
whole thing and it's gonna fill in right
here in whoa it's really big so we're
going to make some updates to that go
down here we've got in width and height
that we can set so let's just try 200
200 first and that actually looks pretty
good but I think I'm gonna make it just
a tiny bit bigger on both of these so
that your and the.com look a little bit
bigger I think that's good so we're
gonna go ahead and click on publish and
we'll come back over to our website and
let's hit reload and look it there we're
making progress now we're going to go
ahead and add our favicon icon that's
the little icon it'll go right here then
we're going to go ahead and go back to
our WordPress admin and again for the
sake of being thorough we're going to go
back to the dashboard and from here
you're going to go to appearance
customize site identity and then down
here we're going to select image and we
currently don't have the image uploaded
yet so we're going to do upload files
select files pick our logo transparent
our own big fancy one click open now
we'll click select and it is the correct
cropping already so we'll say crop to
image now the favicon has been added we
can click publish and now if we go up
here and reload it should show up and it
did well done now one of the things we
need to do is define our home page we
have a home button and that does take us
to the page that would be our home page
but the main home page is going to be
whatever it is when you come into here
which is just your URL by itself and
this is a pace that isn't going to exist
in our site the set our home page we're
going back to our WordPress admin and
again for the sake of being thorough
where I'll start at the dashboard under
appearance we're gonna pick customize
then we're going to choose home page
settings and now we're going to choose
static page and for our home page we'll
pick home now we can hit publish and now
we come back over here and we hit the
logo again and that shows that it comes
back with our empty page it no longer
shows that default page from before so
we have now updated our home page if you
notice when we click on one of our pages
the names of these pages have index.php
inside of the name and what we want to
do is we want to change our naming
convention and to do that we're going to
go back to our WordPress go back to the
dashboard and from the dashboard
we're gonna go to settings and then
we're going to click on permalinks and
this is the different types of naming
conventions the most popular is called
post name and the reason is is basically
it's your URL and whatever you gave your
slug name to be it's clean and it's
helpful for the search engine so that's
one we want to use so now we can scroll
down it save changes now if we come back
to our website and we reload
about us page just comes with the word
about a so now it's working correctly
now not all websites can benefit from a
search option for example Bethany's
website the navigation itself should get
you to just about everything you need so
we're going to go ahead and remove the
search option from her website to do
that we're going to get back to our
WordPress admin and under appearance
from the dashboard we're going to go to
customize then we're go to header menu
and then we're going to scroll down
until we see the option that has to do
with the search box search icon style it
says drop-down and we're going to say
disabled and notice it went away over
here we'll hit publish now we go back to
our website and we reload and it's no
longer there next I want to remove this
little white line here because that's
going to become a problem when I we have
our video pushing right against here do
that we're going to get back to our
WordPress admin and we will go to the
dashboard and from the dashboard you go
to appearances customize header general
and then we're going to turn header
border bottom off and publish and
finally we need to remove the spaces
above the menu bar but of course it make
too much sense for it to be right here
so once again we'll get back to our
dashboard from there we're going to go
to appearance customize and from here
we're going to go to top bar general and
where it says enable top bar we're going
to turn that off and that one goes away
hit publish and everything's finally
cleaned up nicely now let's go ahead and
change the copyright information in the
footer to say what we want it to say and
to do that we're going to go back to the
dashboard and from here click on
appearance then customize
then scroll to the bottom and choose
footer bottom and now we can change it
to say whatever we want in this case
we'll just put Webb Yoda Inc now we'll
hit publish and now I'll notice it has
this little ocean WP underscore date
that's a special code that says when
you're actually on the real page to fill
in a year and so when we hit refresh on
our page now I'll say web yet Inc so our
empty page is totally complete and we're
ready to add real content to our website
and of course we're gonna start with
building our home page to do this we're
gonna get back to our wordpress admin
get back to the dashboard now we're
gonna go into pages and pick the page we
want to work on in this case home now
notice again it doesn't say element or
next to it because we haven't used home
page with element or yet we click on
home so the first time through the edit
with element or button is here we'll
click on that and it brings up our new
page inside element or here's the tools
we're going to use here on the left and
here's we're going to be building our
page on the right in the same way that
driving a vehicle for the first time can
be disorienting and maybe intimidating
using element or is going to have that
feel at the very beginning as well now
as opposed to doing a general overview
of everything that it'll do step by step
what we're going to do is build pieces
step by step and you're gonna learn the
overview as we go along and the reason
is there's only about 20% of element are
you ever going to use 80% of the time so
there's really no reason to cover a
whole bunch of stuff you'll never use as
opposed to just showing you everything
that we're going to use on a regular
basis so the basic mechanics of the
element or environment are you have
widgets here on the left and they're the
things you're going to use to build your
page and then you're going to have your
content area over here where you're
going to build it now the left item is
for creating a new section whereas the
right item is for inserting templates
and the templates are basically sections
that have already been created and so
one of the nice things is is once you've
built a section you can save that as a
template and later bring it back in to
recycle code
all websites require content to create
the website so in your case you're going
to need content for your website which
is any text and information you have as
well as the pictures that go along with
it
in our case Bethany's provided that for
example for the content she's provided a
Google Doc that has all of the text and
information about what fonts and things
she wanted to use to build the entire
site so that allows us to get a head
start and it turns out that collecting
the content can be a little bit
frustrating but if you already have your
content in an order it's gonna make it a
lot easier to build your website now
Bethany also provided a folder that had
all the different files she's going to
need so here's the files for the
destinations there's gonna be a gallery
here's some additional images from
testimonials videos and audio different
related stuff so again being organized
and having your content available
certainly some of it in advance is going
to make it much easier for you to build
your website now suppose you don't have
good access to images and videos for
your website what are your options below
this video you'll find two sections one
with royalty-free images meaning you can
use them and not have to pay a fee and
royalty-free video clips where you don't
have to pay a fee for example if we
click on this link it takes us to a
website called unsplash and from here if
I do a search for say cloud light rays
there's the image we used at the very
beginning of the video and then at that
point we just click the download it goes
to our download folder and it's ready
for us to use now this site has lots of
amazing pictures to use hundreds and
hundreds and hundreds on the off-chance
you don't have access to your own
royalty-free images and videos so now
we're ready to add our video and to do
that we first need to create a section
so we're going to click on this plus
sign here and it gives us a choice how
many columns we want now we can add
columns as often as you want we can
adjust the columns but this is kind of a
default now for our beginning section
it's only going to have one column so
we'll choose that and it made this
little area up here now on the left hand
side it has three different things you
can do you can control the layout the
style and advanced features of the
particular section now in this case
under layout I'm just going to set the
height to be fit to screen
that made this really big area and it's
going to allow us to put a background
video in that spot but to add a video
background you first have to have a
video and in our case we're going to
provide you with some resources below
this video to get access to free video
clips the first one of those is YouTube
is obviously the most popular and one of
the advantages to the YouTube
environment is any video you use from
YouTube you don't have to worry about
licensing because part of the agreement
is is that they put it in YouTube it
gives you the privilege to at least
display it in your own personal website
in the search box I'm going to type 4k
Beach and the 4k is for basically really
high resolution videos and Beach be
obvious we're gonna click on the first
one and here's this really nice beach
scene now we can actually just copy the
URL up here to our clipboard and we're
going to be able to paste that into our
website and make it a background and
this little add it's not going to show
up in there let's go ahead and get back
to our website and now to do the
background so we going to click on style
on the left and then the first section
you see is about backgrounds and the
types of backgrounds you can choose from
is classic which is just basically an
image gradient and movie let's review
each of these to see how they work so
let's look at making a background here
we can click here to add an image and
then we're going to upload an image that
we want to use we're gonna select files
and then we're going to go actually it's
an easier way to do this let's use
Bethany's folder we're going to go to
images and then we're going to just drag
this over here now our image is loaded
we can just click on insert media at the
bottom right and it's going to place
that image in there now initially our
background is black and we're like well
that didn't give us what we were looking
for if we come over here to positioning
on the left here we can choose center
center and then scrolling down you'll
see there's always extra options if you
scroll let's set the size to cover all
of a sudden now it kind of makes sense
the second option is this gradient if
you want to choose a gradient and it's
going to choose
between two colors two gradiate between
so let's pick a second color pick this
green and so it Grady eights from one to
the other
now once you've picked a color you have
to click on the color box to get the
display to show you your options again
and now down here at angle you can
choose the angle that you want that
gradient to be at you can also choose
the type of gradient so if it's linear
that's basically left or right and then
we can do radial that goes from inside
to out now the last background type is
the video so we'll click on the video
icon in the here where it says video
link we just paste that video link that
we had in there and it'll just show up
in the box for us and that's just really
spectacular so we got out of nowhere we
went from having a website that didn't
have any content in it they're having
this pretty video we like the way it
looks so we're going to click on update
at the bottom and now we can get back to
our website and click on the home page
and now we have this spectacular
background for our homepage now in
Bethany situation she created her own
video so if we go to YouTube in another
browser tab then when you do a search on
your ultimate vacation they'll come up
as one of the pop listings
and here's the video coverage she's
going to use and in her section here it
has the credits to all the people that
contributed some of these were purchased
and other ones we were just given the
opportunity to use and we appreciate
that
we'll also put these video credits at
the bottom of the video you're watching
now though for us to use this video we
simply copy that URL to the clipboard we
go back to our website and in the box we
put in the new URL and it'll show up
with the new video we click on update we
go back to our website we can click the
home button again and we see that it
shows up now at this point we can go
back to our home page and we're ready to
start on our next section and so to add
our new section in her case if we go
back to her home page
we're going to be looking to build this
section right here now I know there's
text on this we're going to add the text
that video a little bit later but we
want to build this section right here
now in this section we've got a column
at the left that has an image and a
column on the right it has content at
the top and bottom of the section or
these little swish things we're gonna
add the swish things and later once we
built them at the majority of this page
and so now to make the edit to this we
can go ahead and go back to our website
then now we're back at our WordPress and
to do our new section we're going to
scroll down we're going to choose a plus
sign to add a new section and in this
case it's going to have two areas one
for the picture on the left and for the
content on the right so we'll choose
that and now we have these two little
boxes we're going to want to picture in
the left box let's go ahead and come to
the left-hand side I clicked on that
plus to bring this up and we're going to
put an image in there and we're just
going to drag this over to that little
box and now we can choose our image so
we click on this and now we're going to
need to upload a new image so we're
going to go back to Bethany's folder and
choose her profile picture it will pick
that one
drag it over it's done loading insert
media and now it's added to the page
well worry about resizing that in a
minute what we want to do now is put
some content on this side over here
and to do that I'm going to click on
this box now what's interesting is
there's three different types of things
you can edit just to give you a good
idea notice this tab just like this one
that's for editing the section so when I
click on that it shows me the section
controls so for example if I click on
this one it shows me the section
controls for this one
now over here notice there's this little
block here well that's for editing the
column which that pictures in and this
is editing the column that there's
nothing in so far whereas the little
icon over here is for editing the
contents of the column in this case this
image so we can edit the section which
gives us controls we can edit the column
which gives us controls and we can edit
the item itself which gives us controls
so now we want to add some text to the
right column and if I click on that box
it comes up with the options over here
and we're going to put a header in there
first so let's drag a header over there
just like that and it shows up with some
default text now it's possible to edit
the text here but you're better to edit
it on the left hand side it ensures you
don't accidentally get some additional
funny formatting in there so we're going
to come in here and put our new text
your ultimate vacation guide and now I
want to add another line of text below
that now when you're in a section and
you want to get that widget to show back
up you can click this little icon right
here and I'll show you your choices and
so we're going to drag another header
over here and notice how the blue line
is where the widget will be inserted and
then we're going to change the text for
that
and then we're going to add a third item
and we're going to do a text editor this
time because we want to put a bunch of
text under that and then we'll come over
here and we'll paste in our content for
that now for this section
bethenny used the green background of
the color scheme that she chose so we're
going to click on the section tab and
then we're gonna go to style and notice
where the background thing is where we
did the video before we're going to
choose classic which is going to give us
the opportunity just to choose a color
cuz you can either do just a call or get
to an image and we're gonna put in paste
in the green that she gave us and then
again click on the color icon to close
that out and now we have the green
background that's going to match what
she had on our website at this point
we're ready to format the rest of this
text and make it look correct let's take
a quick field trip back to Bethenny's
site and notice that she has some large
text here that's white medium text here
that's black and small our text here
that's white and these turn out to be
three separate fonts and she gives us
those fonts so if we look in the
document that she gave us she told us
what she wanted these fonts to be and
one of the things that's really nice
about WordPress is that instead of
having to define all the fonts every
single time you use him you can actually
set defaults and so that's what we're
gonna do next
we're gonna go back to our WordPress and
now over here at the hamburger icon
we're gonna click on that and we're
going to click on default fonts
now a primary headline is the large
white text Bethan to use the secondary
headline is the medium texture used and
the body text is just the regular
everyday I'm reading in a website text
now accent text we haven't used and so
we're not going to be setting that today
so we're going to go ahead and set the
three types for Bethany's website now
the primary headline for Bethany she
chose Latta
and then the weight we're gonna leave as
the default is 600 basically the weight
is how bold something is and when you
look inside of their default you got
bold and then you've got a gradiated
scale and six I think for hundreds
basically regular bold there's 600 is a
little bit more bold than that next for
the secondary headline she wanted to use
Roberto slab and that ends up being the
default in this case so that worked out
well and we'll also use the same weight
for that's the default there and then
we're going to click on the body text as
our last one and for body text she chose
open sans they'll go ahead and choose
open sans and we'll also use the default
weight for that now at this point we can
hit apply and now all of our default
fonts have been set now one typical
question that comes up often is how do
you know what the fonts are well let's
go over here to our tab and then we're
going to type in google fonts and hit
enter and then from here just click on
the first link it'll be fonts google.com
and these are all the fonts that are
built into WordPress that are usable by
you and they're broken down by the
different types of categories and
trending fonts and different things like
that so basically if you're interested
in a certain font let's say well what
does Latta it look like well I can go
and type it in and then I can see well
that's what ladder looks like now with
our default font set we can go in and
set the color and size of the different
fonts we're using we're going to head
back to our WordPress and just a
reminder remember if you click here
you're editing the section which is this
entire area it's the information that
applies to that whole area if you edit
in either of these little black boxes
you're editing the particular columns
and if you edit the little right edge of
these these are for the particular items
that are within the columns so there's
three levels of editing now in this case
we want to change the size of this
particular piece of text so we're going
to click on the little blue box here and
it brings up the controls for that on
this side now remember there was
something called a primary heading which
is the large text that's white and the
secondary heading which is the medium
text that is black well to choose those
it's down here in under this HTML tag we
want to choose h1 which is going to make
the primary heading the choice for this
text right here now we're going to click
on the style options for that and
typography is going to allow us to set
style for that particular font
whereas above that is text color now
that text is supposed to be white so
we'll click here and we'll go ahead and
choose white and again click on the
little box to exit out of there so now
our text is white now we can do the
typography and the typography is going
to allow us to set the individual
attributes for the font so for example
if we want to change the size we can
scroll in and out on this or we can
manually set it we're gonna set it to 50
in this situation and then the weight we
could set that that's going to be our
default
now for transform if you want it to be
all uppercase it'll do that for you all
lowercase capitalized which makes the
first letter capital on each word normal
and we're just going to stick to the
default also under style you can pick
normal italic
or oblique in this case obviously
default and the decorations allow you
just say whether it's going to be
underlined over line line through or
none or choosing default and at the
bottom you can choose a line height
which is how much space is between the
lines and you can space how much or
choose how much spaces between the
letters and by putting nothing in these
boxes you're going with the defaults on
those as well and for me I'm almost
always using the defaults because
they're set to a standard for a reason
all right so that typography is fixed
well text shadowing allows you to set
text shadowing around it to a particular
color so let's say we want to have it to
be black then choose black and then as
we scroll up or down you notice that the
letters over here and we're getting a
line around I'm bigger and smaller and
if I close out of that I can choose a
blend mode so it gives you a lot of
different options as far as ways of
having special effects on your text now
for me I'm just going to have normal and
I'm not going to have that particular
feature on this one so I'll pick default
now I'm going to set the text for the
next box so I'll come over here and
click on that and I'm gonna go to style
and we want to use black for this one so
we'll choose black exit out of that and
then in a typography it turned out that
she had decided even though her
secondary headlines she wanted to be
roberto slab that in this particular use
she wanted to make it Montserrat and so
we're going to choose that and we'll set
the size to 32
we can exit out of that and now we'll
click on the text for our edit box
we're gonna go to style this text is
supposed to be white so we'll choose
white place that out and now we'll go to
typography and default is the font for
the size let's put 18 now we close out
of that and will rage them edit the
settings for the picture now one problem
is even though this is a great picture
it's way too big and it's certainly not
what Bethany has on her site notice how
much smaller it is and the reason is is
that the default when we gave it two
columns was 50% and clearly she's made
her is less than 50% so we'll go back to
our WordPress and then we'll click on
the column itself and now we can make a
change and set a 50 let's try 30 that
looks a little bit more like what she
had we'll click on update I'll come over
here we'll reload our page and that
looks significantly more like what she
had now at this point notice that this
stuff is centered and ours is not so we
want to go back and make that Center
adjustment as well so we can come back
over to our WordPress
and then we'll click on this text and at
the bottom we can Center it and then
we'll click on this text and at the
bottom we can Center it and now we can
update and go back to our website and
hit reload and now it's also centered if
you notice in our version there's a lot
of space on either side whereas in
Bethany's or not so this particular
section she has full width instead it
boxed in so let's go ahead and go back
to our WordPress and then for that
particular section we're gonna select
that section and then on the Left we're
going to turn on section stretch and
then we're going to turn on content full
width to be full width there like that
and then we're going to click on update
and now we'll go back to our site and
we'll hit reload and now it basically
looks the same as her site now we want
to go back to Bethany's website and
notice the dividers it has with a little
wave looking thing and the extra space
at the top and the extra space at the
bottom and again the wave thing we're
going to go ahead and make those updates
to our version so if we go back to
WordPress the first thing we're going to
do is add some space in the top and
bottom of this section so let's go ahead
and click on the section itself and then
if you go to the Advanced tab we can add
padding to it now if you add padding in
here it adds it all the way around
so for example if I put 40 in here it'll
do it at the top in the bottom in the
left and the right well if I don't want
it that way I can click on this little
guy here that didn't really want it on
the left and the right so much maybe but
I wanted it on the top and the bottom so
it allowed me to add the spacing at the
top and the bottom just the way we want
it to now we're going to add the spacer
in between here that looks like a little
wave and it actually is added to the
bottom of the top section so we're going
to click on the top section and make it
the active one we're going to go to
style and at the bottom of style there's
a thing called shape divider an inside
shape divider you can put a divider at
the top or at the bottom or both we're
going to choose bottom and then we're
going to choose the waves brush and it
shows up down here and now we're going
to click on to change the color and use
the green that Bethany used exit out of
that and then we're going to set the
height of this to say 60 and now we have
that wave divider there now to put the
wave divider at the bottom we're going
to come into this section
we'll scroll down and then we're going
to go back into our style for this one
and we're going to scroll down shape
divider and we're also going to put it
on the bottom and then we're going to
choose our shape of the waves brush and
it's the white the same as hers you see
if I come over here hers is a white one
at the bottom but that's okay but it's
too tall so we'll go in here and change
the height of that to say 60 and then
there's not enough space in between
these anymore it's a little close so
we'll go back to our Advanced tab and
where we had 40 for the bottom
let's try 60 and maybe 70 so now we have
enough space we have the divider at the
bottom in the divider at the top so we
can hit update
and then go back to our website and hit
refresh and we have the divider at the
top and we have the divider at the
bottom and we're ready to do our next
section now we're going back to
Bethenny's website to review the next
section which are the three
call-to-action areas and those when you
move your mouse over the icon they pop
out a little bit and over the buttons
they pop out a little bit we're going to
create one of these call-to-action areas
and then we'll make two copies and then
just change the content on those so
let's go back to our WordPress and now
we're going to make a new section in
this section it's going to have three
columns in it and now for the first
column we're going to click on that
we're going to want to add what's called
an icon box that we're going to scroll
down and there's our icon box
we're going to drag that over and look
at that little blue line where that blue
line is that's where it's going to
insert it out
and now I'm going to go back up here and
I'm going to click on this icon to bring
the list up again and I'm going to grab
a button and we're going to bring it
down here and we're going to add a
button below that as well and while
we're here we'll go ahead and center our
button so our buttons in the right spot
now we want to style our icon box so
we're going to click on that to make it
active and up here where it says star
we're going to pick Sun because that's
only used the title we're going to use
is destinations and the content is that
now at this point we want to make the
changes for colors and things to this so
we're going to come into the style tab
and under primary color we're going to
pick the yellow that Bethany used in her
website close that out and then under
content it has two areas it has the
title which is this guy and it has the
description which is this guy and for
the description I mean free to the title
we're going to set the color to the teal
that she used it was in her list of
colors we'll close that out and now
under typography we're going to make the
font a little bit bigger let's say 28
and then for the description to size of
the font let's go down here and make it
a little bigger
we'll choose 18
go out of that now we'll scroll back to
the top and under advanced we want to
add a little spacing around here so for
our padding let's put 20 all the way
around that gives it a little space
around there and then notice that our
icon doesn't bounce so let's go back to
the style and under here it has normal
and has hover and basically when you
hover over it's when it happens so we're
going to click on hover and then their
hover animation we scroll down and it
says bounce in and now I knew our mouse
over it bounces like the other one now I
don't want these words just spread out
in this section as they are so we're
going to click on that or go into our
style for that section at the bottom is
the content and this is the description
so we'll go into typography and scroll
to the bottom of that and we'll see that
there's a line height and let's just put
that at 1.3 that's a lot better now
let's make some changes to our button so
we'll click on the button item and the
text on the button should say learn more
the link should be for our destinations
to make a page and then we're going to
set the color of the button under style
we'll just click on the background color
and put Bethenny's green in there and
close that out
now we're ready to update we can go back
to our website and see what it looks
like they'll click up here and then
we'll do reload and our call to action
is ready to go and we can make our two
duplicates now to make our two
duplicates we'll go back to our
WordPress and then we'll come over and
look at the or highlight this icon in
the left hand corner that's the column
icon if we right-click it there's an
option to duplicate if we right-click it
again there's an option to duplicate
well now we got to come over here and
right-click and delete the two that were
extra that we had and right-click and
delete that one so now we have our three
areas and we just need to update the
content on those and maybe do some magic
and make that happen pretty quick now
our content has been updated for the two
here and we're ready to hit update
and get back our WordPress website page
it reload and there we have all three of
our call to actions now we want to add
our wave divider at the bottom and in
Bethany site it's that teal color they
were to come back over to our WordPress
we're gonna select this section is it's
going to go at the bottom of this
section then we're gonna go to a style
and unjust inside of shape divider we're
going to choose the bottom one and then
we're going to come inside of here and
choose waves brush we're gonna set our
color to that teal lays it out and we're
gonna set the height to 60 and now we
notice that there's some clearly there
needs to be more space here so to do
that we're going to go into advanced and
then we're going to unlock this and then
we're just going to add a whole bunch at
the bottom let's say 70 and maybe we'll
try 80 and that looks good going hit
update go back to our site it reload and
the call to action section is complete
okay okay that's almost complete but
when you go across these buttons they
don't light up and they don't bulge out
so let's come back to our wordpress well
click on the button we got to go to
style and we got to set the hover for
those and then the background color is
going to be Bethany's yellow I'll close
out of that and then the animation is
going to be our bounce in
and now that one bounces and then we're
going to magically do the other two just
the same and now they all work and we
can hit update
get back to our website hit reload and
we really are done no now we're ready to
do the next section on Bethany's website
the next section is this travel tip
section basically frequently asked
questions about travel and it uses a
header and then it has this accordion
effect where you're able to put content
inside of each of these items and at the
bottom there's a button we want to head
back to our WordPress and we'll add a
new section at the bottom gonna be one
column and now in that column we want to
first put a header you'll add that in
there then we'll pick another item which
is called an accordion we'll scroll down
and that one's right there and then
finally we're gonna put a button in
there the very bottom and so now we have
the three items we're going to put in
there now we just need to add content
and style them so to start let's just go
ahead and change out our content so
we'll click on that and the header for
that will be top five travel tips and
the first item in our accordion if we
click on the accordion it comes up over
here first item in there we're gonna put
the name here it's going to be make a
list and then we can scroll down here
and this is where the contents gonna go
we'll need to leet the content that's in
there and then put our own content and
so now we have our first one and now
we're ready to edit the second one so we
can come down here and you click on the
second one right there and the title for
this one is that and then we'll replace
our content and you can stretch that box
so you can see exactly what you're
putting in there and now we have two of
these see they both work and then you
can add a third item like that and we'll
put our title here for this one like so
and then our new content and we can
scroll down actually we can close that
one by clicking there and then we can
add another one for our fourth of five
the title there
but our content there plays that one
down and add our last one like that and
so now this is where the title guy but
this one will be sunscreen
and the content sunscreens good use
sunscreen and now we have a fully
functional accordion with a title and a
button but we still have some more work
to do on these now we're ready to style
this section so we'll start by styling
this header and we'll come into the
Style section and the color for this
header is going to be Bethenny's yellow
and then we're going to go into
typography to set the size and let's go
ahead and set that at 30 and we can
close that out now we'll click on the
accordion go into the style for that and
then under title we'll set the color of
the titles to white now that's obviously
gonna make it disappear for the moment
so we'll pick white close that out and
now we'll go into the background or
where I'll set the background to that
teal that we'll use
but to do the teal it needs to be in the
section so we need to click on the
section and then go to style because we
want the whole section to be teal then
we get a background type classic and
we're all set the color and set it to
that teal and all the sudden everything
shows back up we can close out of that
let's go back into our accordion and we
want to go back to the style for the
title because under typography we wanted
to make that funnel it bigger so let's
say 30 and then close that out and then
for the content itself typography and
we're gonna set that content to say 18
and then we need to set the color for
that to black and that might do it
now that looks kind of big though so
let's change that out go back into title
and typography write 20 and if we click
on that that looks really good okay so
now we need to work on the button but
I'm going to actually delete the button
and I'm going to delete it for two
reasons number one it's going to be
styled the same of these so basically if
I make a copy of this one I don't have
to put all the bells and whistles on our
set to change a few settings on it and
secondly I want to save this section as
a template so we can use it on our
travel tips page later so let's go ahead
and delete our button so we can come
over here and right-click and choose
delete and now we want to save this as a
template
now to say this is a template we go up
to the section tab we right-click on it
and then we choose save as template and
then we give it a name so I'm going to
say your ultimate vacation - and we're
going to call this travel tips
and now we have that particular travel
ship saved and when we go to our travel
tips page we'll be able to insert that
and want to build it again so that'll be
real helpful and when we get there I
will show you how to do that so I'll
close that out now we're going to make a
copy of this button I'm going to right
click duplicate and now I can drag this
button down here and notice it am right
center just way we want it so now all we
have to do is make the updates to this
button so this button if we click on it
over here is where we need to change our
text
and the button should say more travel
tips and the link will be that and now
we've got everything set up and ready to
go we can click on update go back to our
page it reload there are new accordion
in action everything's working now the
one thing is this is a little close to
the top so shoot we should add some
space at the top and the bottom and
we're gonna find that we do that all the
time so we're going to come in here get
back into the section go into the
Advanced tab unlink all those and then
for the top will say fit 20 right 30 and
for the bottom 30 that should do it I'll
do update back to our site it reload and
that section is ready to go now one
thing I forgot to do is that in Bethany
sites there's no lines around it and our
site there is and it actually turns out
that there are lines around hers you
can't get rid of the lines but you can
tell the lines to be the same color as
the background which basically makes
them go away so we're going to do the
same thing on our so we're going to come
back over here and then we're going to
choose the accordion and then we're
gonna go into style and then the border
with nothing matters you put zero
doesn't work but you can come in here
and change it and use that same teal and
then when you go to update and you look
at the site those lines will disappear
and so we have the effect we want now I
went ahead and went back and resaved our
template without the line so when we use
our template later it'll be correct as
well now we're ready to do our next
section and on Bethany's website you'll
see it says image carousel and the
dividers actually overlay into the
images so they're actually inside both
of those are inside that section so
we'll be adding those as well so let's
go back to our WordPress and then we're
gonna scroll to the bottom create a new
section one column and on the right
we're going to make this full stretch
full width width columns having no gaps
we're basically wanting this thing to be
as wide as possible now we're going to
click on this icon to bring up our list
and we're going to do the image carousel
and it's going to be located a little
bit farther down drag that over and now
it's entered in there now we need to add
images that we can click on images here
and we're going to upload images
then we're going to go to Bethenny's
image folder and inside of her folder is
a gallery and then we're going to select
all of these there's 24 of them drag
them over to the left and it'll insert
all those for us
now our images have uploaded and we can
click on create a new gallery and just
choose insert and here's our gallery now
we're going to set the image size to
full
and then we're going to tell it they do
three at a time to show three at a time
I think that's the default and then
we're going to do slide three at a time
now I like the arrows but I don't really
like the dots so we're going to scroll
down and there's a place to modify the
navigation and we're going to choose
just the arrows
now we need to put our little dividers
on the top and the bottom and to do that
we need to pick this particular section
go to style and under shape divider
we're going to do the top one first and
we're going to pick our same wave brush
and then we're going to set the color to
the teal that Bethany likes and it will
close that out and then we're all set
the height to 60 and it's not showing up
but the reason is is we need to turn on
this bring to front because the carousel
sitting on top of it so now we can see
it and now we're going to pick the
bottom we're going to pick waves brush
we're going to pick color or white and
close that we're gonna pick sixty and
then we're gonna turn that on and now we
have a fully functioning carousel now
it's interesting if you come in here and
try these different ones you'll see they
do lots of stuff so I don't just decide
on one you can actually go through and
try a whole bunch of different things it
does neat stuff I just happen to pick
this one actually Bethany picked it
because it looks really good for what
she's trying to do so now our carousel
is complete we can click on update go
back to the website hit reload and we're
ready for the next section this -
carousel we're actually going to use on
multiple pages so let's go ahead and go
back and right click on the section and
save as template and we'll give it a
name your ultimate vacation and this
will be carousel save it and now we have
these two that we'll be able to recycle
and use later now we're ready to go to
our next section and that section will
be
the testimonials now I notice the
animation the stuff we're going to show
you how to do all that animation later
but at this point we're just going to
learn how to build this testimonial page
it's going to have a header it's going
to have one testimonial and then we'll
clone it and then we'll make another
clone to have four of them total and a
button at the bottom so that's our goal
let's go ahead and get start it and
we're going to go over to our WordPress
start a new section we'll have one cell
we're gonna make it a stretch section
full width and then inside of it we're
going to put some different widgets so
let's go to the menu of widgets we're
gonna have a header at the top now pick
another widget and then we're gonna have
this intersection and basically what an
intersection is it's kind of a sub
widget basically it allows you to put
two columns within it and the reason why
I'm using this is that when you display
this on a mobile device whatever's in
this cell will nicely wrap under the one
that's there and since all these
testimonials are kind of look the same
but some may be taller than others this
is going to make it look better on a
mobile device and then at the bottom
we're going to need a button so we'll
come up here and we'll right-click on
that and we're going to do duplicate and
we'll drag that button down
here somehow now we got them in order
that was tough so next we're going to
put the text that we need to have in
here which is testimonial so we'll put
that there and then we want to go to the
style right here and we're going to set
the color of this the Bethany's green
and then we're going to go to do the
size of this
so we'll set the size to 40 and Bethany
had a special font she wanted to use I'm
not gonna even gonna begin to try to
pronounce that and we're gonna use a
weight of 300 close that out go back to
content I'll Center it now we need
another widget we're gonna scroll down
we want an image box drag it in there
and notice that our images at the top
right now we want our image to the left
just like that
and now we need the image so we're going
to come over here and click on image and
we need to upload some images and to do
that we're going to use Bethany's folder
I'll go back to here and then under
testimonials and we'll go ahead and drag
all these in at once and then we're
going to pick that one I think is the
first one
holy load and that's the item we're
going to pick for the first testimonial
so we'll insert that media and then
we're going to click on the heading for
this and the heading is going to be that
now in HTML instead of just an ampersand
you're supposed to put that particular
code but you want to make sure you do it
the same way that's there so that it
works in all browsers now we need the
content that's going to go in here and
we'll put that in there like that and
now we have a testimonial built and now
we just need to style it to be the same
as Bethenny's so now we'll go over to
our style tab
and this determines the space between
here and here well let's say F up at 20
in there it makes a little bit bigger
and this decides how big this is let's
say we'll put 40 there and at the bottom
we can modify the content or these two
things for example the title we want
that to be black that will scroll down
and choose black
we can close that out and then we can
check in on the typography see what our
options are there let's go ahead and set
this to 20 that might have been the same
but it looks good blows that out and
then when we go down to the typography
or the bottom and scroll and look at
that go ahead and make that 15 that's a
little bit bigger and that should do it
only weird thing is there's a little
tick mark in there so let's go ahead and
change that and get rid of that now we
have one testimonial that's completed
now to build a second one we'll just
right click and choose duplicate and
then we can drag that one
by that little handle there over here
and now we can right-click on this
section this intersection and duplicate
and now we have the four that we need
and then finally we need to update this
button to do exactly what we need it to
do
so it's going to say more testimonials
and the link is going to be testimonials
so our testimonial section is complete
except that we need to change the
content on these other three and we're
going to go ahead and use some magic
again to change those all at once and
now all of our testimonials are updated
and we're going to have a testimonials
page so again we want to make ourselves
a template then we're going to right
click there save as a template name our
template you're open take a ssin
testimonials it's save and now we have
three templates to use later on we'll
close that we'll hit update get back to
our site hit reload and the testimonial
is there we just will have our little
border thing that we'll end up doing at
some point let's go ahead and get
started on the next section we'll get a
Bethany's website and we're going to
build this parallax section down here at
the bottom or this image slides like
that really nicely and then we're gonna
put a joint email list in that so let's
go ahead and go back to our WordPress
and we're gonna go to the bottom and
we're going to create a new section one
column and then under advance for that
column we're going to unlink those we're
going to go to 130 at the top 130 for
the bottom that spreads that out now I
want to get his style and we're going to
set the background type to just a
regular image and we're going to choose
our sunset image insert media and now at
the bottom we're going to set attachment
to fixed roll down a little bit it's
that size to cover and that's starting
to look nice next we're going to go back
up and we're going to add an inner
widget and then we're going to delete
one of these cells
we'll set the width of our inner widget
to say 500 they're going to go back to
our widgets and we're going to put a
header in there for now as a placeholder
and then for this particular column
we're going to come in and set a
background and let's say we'll set the
background to that color we're going to
give it some transparency if we come
down in the border section we can round
the corners with border radius let's say
12 and now we'll go ahead and add our
separators for this so we'll come into
that section we've got a style roll down
and for our dividers we're gonna do the
top one it's gonna be white that will
pick our waves brush we'll pick a color
it's already white so we don't do that
and we'll set a height of 16 and then
we'll choose bottom waves brush we'll
set the color on this one to Bethenny's
black and we'll close out of that and
we'll set our height to 60 and we have
that piece completed we'll click on
update we'll go back to our website it
reload and we have that working now we
need to put in our join email list form
in here we're going to go back to our
wordpress and now we're going to need to
exit out of this page and go back to the
dashboard because we're going to work on
the contact form 7 it's going to allow
us to build the mechanics that are gonna
make that work so on your left hand menu
you'll see a contact and you can click
on that and then when you scroll down
you'll see there's already a form there
we're going to click on that form and
we're actually going to make our contact
us form and then we're going to make our
join form so we don't have to come back
here later and we're just going to
rename that contact us and I can hit
save just to make that change now
scroll down you'll see they've already
done most of the workforce but I want to
show you how the mechanics of this work
so this particular form is going to have
your name your email a subject and your
message well suppose that you wanted to
have the telephone number in here I'm
going here and add a spot in between I
can click on this telephone option here
and then I'm just going to click insert
tag now all we need to do is make the
content that goes along with this look
the same as the other so for example I'm
going to copy that to the clipboard I
want to paste it there now if I take the
telephone tag I copy that I can just
paste it where the one on this one was
and so now we effectively have the
telephone number that's going to be in
the form itself
now notice up here in the text in the
email fields there's an asterisk that
astrick tells it to be required field so
if we want a telephone field to be
required which we do in this case we've
put an asterisk there and now that will
be required now for the label will just
simply rename it to your phone you can
make it whatever you want you notice
that it says required here but that's
just text we actually had to put the
little bitty asterisks here to make it
required we're just saying tell the
person that's going to use the form that
this is going to be a required field now
obviously this is just one example we
added phone but you could add any of
these other things with a text area
dropdowns checkboxes radio buttons and
it'll do all the Mechanics for you just
be instructing on what you want it to do
at this point one hit save and that will
tell the system that we have this new
field in there and then we're going to
go into the mail tab and make some
adjustments in here now the first thing
we're going to do is set the two the two
field is where do you want the email to
go to but default it's the admin you set
up for your WordPress environment but we
want in this case to go to comment set
your ultimate vacation comm you can make
this go to any email you want so you
could get make it to go to your personal
email if you chose as well next we're
going to make an adjustment to the from
field meaning who did the email come
from
we're gonna put no reply at your
ultimate vacation calm now obviously
that's not who it's really coming from
but that keeps a server happy whoo it's
really coming from is under these
additional headings that they already
put there for you
where it says your - email and if you
look back at the form that's the email
they've submitted so in reality it's
going to work the way we want and we're
going to keep the server happy by
setting that finally we want to scroll
down to the body of the message and
currently in the body of the message it
does not have the phone number we added
on the form itself but we can come up
here and we can highlight this that is
our field for our telephone and then
inside of our forum at the bottom we can
make some space we can put phone and
then we can add our tag and now it'll
add that field when we receive an email
we can come back up here hit save and
now our contact form is complete next we
want to make our join our email form and
to do that we're going to click on
contact on the left again that brings up
our list and it has the contact us we
created if we highlight that we can make
a duplicate of it now that duplicate
comes up automatically and then we can
change the name of it right here now
we're going to put our name for our new
form in here we'll call it join our
email we'll scroll down and look at the
fields for the form in this form we only
need the email and the name of the
person so we're going to delete those
three and so now it just has the
person's name and their person's email
and we can click on save over here on
the right and now we're going to make
some adjustments to our mail tab and if
we go in there and scroll down where it
says subject we're going to change this
out and we're going to change that to
say join our email the rest of this can
stay the same and in the bottom section
we only need the person's name and email
so we're going to delete those
we'll come over here and put space here
the email get rid of the less-than and
greater-than now we'll just be receiving
their name and email scroll back up its
save and now both of our forms are
joining email form and our contact form
are ready to be inserted into Elementor
so now we'll go back to Elementor so
we'll click on pages we're going to
scroll down and click on home cuz that's
the page we're working on
edit with Elementor
and then we're going to scroll down to
the bottom
and we want to make an adjustment here
we're going to add our foreman right
there at our forum we're going to go
down and we're going to pick a very
bottom one which is going to be this
void contact form seven and we will just
enter it right there and it's just an
empty form at this point and then we're
going to pick the contact form it's
going to be and it's going to be our
joint our email and now we want to
change some of the styling settings so
let's go ahead and styling I'll click on
that and at this point we're going to
need a tiny bit of coding in our first
field at the top we're going to put
color colon white semicolon then we're
going to scroll down to where it says
all input CSS we're going to put the
same thing color colon white semicolon
and then we're going to scroll down one
more time and we're looking for the part
where they're submit button is and we're
going to put the same thing again color
colon white semicolon and now we're also
going to add one more piece of code here
which is the background color background
colon and then this is the code for
Bethany's yellow now at the end of that
you'll notice we put a semicolon every
time you do CSS or semicolon at the end
of each of those and that particular
piece of code made this yellow button
and it made the text on it white and
then the two that we added up here the
second one we added change the code
that's inside of these boxes so that it
shows up white and then the very top one
at the top was doing that your name and
your email so that's what that did so at
this point what we're going to do is
we're going to click on this column it's
inside of here then we're going to go to
style I'm gonna scroll all at the bottom
go to typography and then hit Center and
that allowed us to Center these
different things here to make that look
nice now we want to change the header up
here to be what it's supposed to say so
we're going to come back over here and
in this box will put join our email and
now we'll go into style typography we're
going to set the size let's say 28 and
we'll make the color
we'll say white and that should do it so
we can now hit update and get back to
our website and hit reload and now our
site has a fully functional joint email
form so we're ready to do the next
section which is going to be the footer
let's head back over to Bethenny's
website and we're going to look at the
footer we're gonna have a picture of her
as our guide we're gonna have a follow
us section we're gonna have a contact
info section and then we're gonna have
navigational section let's go see how to
add those and first let's go back to our
WordPress so we can get started the end
of the footer we need to exit back to
the dashboard we're going to click the
hamburger icon and choose exit to
dashboard now on the left hand side
we're going to choose appearance and
then we're going to choose widgets
you'll notice over here there's four
sections here's the footer one but our
two foot a three footer four and those
relate to one two three four now for
footer one we're gonna put a picture of
Bethany so let's scroll down and find
the image widget we click on that and
then you want to choose footer one add
widget now we can put a title your
vacation guide well pick a picture and
we'll use the one we already have for
her right here add two widget and for a
link we're gonna put a link to what will
be the about Us page we'll hit save and
come back over here and reload and we
have our first section so let's go back
over here and get ready to do section
two and four foot or two we're going to
use the social icon so we'll scroll up
and find that widget choose footer to
add widget and then we're going to use
all the defaults but we're going to be
adding in her social media right here
and we use a little magic to make that
happen real quick now we can scroll down
and click Save
go back to our page it reload and now we
have a fully functional follow us
section with all of our social media
we're ready for the next section come
back over here and for footer three we
need to scroll to the top we're going to
choose the contact info option and we'll
pick footer three
add widget' and for this one we're going
to use a lot of their defaults but we'll
change out a couple things for example
we're going to put text and say we would
love to hear from you now for the
address section we're going to do that
on this per section so we're going to
take those out and for the phone section
we'll just change out the phone number
that'll be for this website for the
mobile in fact section we won't be using
those so we'll take all that information
out and then for the email section we'll
put the email for this website and last
for the website we're going to actually
use this to do a message us box as
opposed to doing a website but for a
title we're gonna put message us and for
the URL we're gonna make it go to our
contact us form and for our URL text
we're gonna put message us now we won't
have any Skype so we'll turn that off we
can it save come back to our website hit
reload and there's our third section
ready to go so for our final section
we'll go back to WordPress and we're
going to do a custom menu that's how
we're gonna get the navigation in there
so we'll scroll back up near the top
there's the custom menu widget and we're
going to do that for footer for add
widget and again mostly defaults we'll
set the title to where to next then
we'll choose our menu which is the main
menu we have for our link color we're
gonna choose the color that was
Bethany's white and then for the hover
color we're gonna use Bethany's green
and the rest is just defaults we can hit
save get back to our website hit reload
and we have a fully functioning footer
now notice that our little wave
separator is a different color and
that's because that's the one that
Bethany wants to use for the menu and
for the footer so we're gonna actually
have to go back into the customize
section to change the footer background
color so let's go ahead and head back to
WordPress and from here we're gonna go
to appearance customize and we're gonna
scroll down and go into footer widgets
roll to the bottom of that and where it
says background color will change this
to Bethenny's black will hit publish go
Mike over here hit reload and now our
footer is complete now that also means
that our entire first page is complete
and I think hopefully at this point
you're like wow you know this actually
is doable I can make this happen it may
take longer than I thought it would but
it's going to be easier than I thought
it would as well so we're ready to get
started on the about Us page and to do
this go ahead and go back to WordPress
and from here we can just close that and
we'll go into pages and we'll pick our
about page and then you just click on
edit with Elementor to get started now
notice now our new blank page has our
footer on it as well all of our pages so
we'll go back to Bethenny's website and
we want to see what her about us looks
like it's going to have a little movie
at the top special version of the logo
we're gonna see how to do that some text
on the Left picture on the right and our
carousel so we'll be inserting the
carousel that we've used before and
we're going to go to YouTube so it will
make a new tab
and then I'm going to do a search or
landscapes nature relaxation for K and
we'll pick on the first one you'll
notice that this video has the
background that I want to use but it
also has a bunch of text and other stuff
going on
another problem is if you click out way
farther in the video it's about
something other than what we're trying
to do though the trick is is that we
only want to use a certain piece of the
video so if we click back over here we
can find a starting point we want to
start at so for example anywhere in here
if I want to have a starting point I can
just choose to pause it you want to
pause it for example I paused it right
at one minute when I right-click on this
and then choose copy video URL and
current time and I paste it in my
browser
it shows 60 what's the number of seconds
well I can be my starting point and then
let's say later on in the video I kept
playing it for a little bit and it went
forward in time a little bit then I can
pause it again I can right-click on that
choose copy video URL with time and now
it says it's 186 so I can have a
starting and ending point and we want to
use those in our video to only loop
through that small piece of time copy
that URL to our clipboard and get back
to Elementor and we're ready to add in
that background at the top of this new
page that we're going to click on there
we're going to choose a single section
we'll go to style and we're going to do
video and we're going to paste the video
name in there and then I'm going to give
it the starting at any point in seconds
so 60 to start with
and I chose 130 seconds for my ending
point and you can see the little video
playing in here we're going to give it
some space
well unlink that at the top we'll put 30
and at the bottom up at 60 because we
know we're going to do our wave divider
go into style first and then scroll down
and choose shape divider we'll go to the
bottom and then we'll pick our wave and
then we'll set our color to Bethenny's
green
said our height 60 and now we've got
this section getting close to what we
want it to be so now we're going to go
ahead and choose put another widget in
by clicking that icon we'll put a header
in here this should say about now we can
go into style to style that and let's
tell it to be white
we'll use that fancy font that Bethany
used before
let's say we'll set the size to 40 and
then we'll close out of that and let's
get a little shadow that will just go in
and give it a black as the color and
ramp that up and you see a little shadow
behind it now we'll go over to the
content tab well Center it and now we're
going to add an extra column so we're
going to right click on this column and
add a column now just between these you
can grab on the middle and shrink it
like that and now all of a sudden it's
starting to be where we want it to be it
now for this particular column we're
going to add a background to it but
we'll come in here use that and we're
going to use our logo that we used
earlier well insert that and we need to
choose Center Center and we'll set the
size to cover and it's starting to look
like the logo we want let's click on the
text again we're going to go in it to
advanced and we'll give it
20 at the top and 20 at the bottom and
now we have our logo at the top go ahead
and go down to the bottom and click
update now we can go back to our website
and hit reload and our header shows up
we're ready to add the next section so
let's go ahead and go back to Elementor
we're going to add a section this is
going to have two columns the right
column is going to have a picture left
toggles on have text let's go ahead and
set the background color for that
section while we're here it'll pick
color I'll use Bethany's green again and
now we need to pick a picture for the
right-hand side so we'll go up here to
choose so we can drag in the image
widget
we'll choose the upload file option
we'll go back to Bethany's images and
inside the images we'll find the image
we're looking for and they'll be this
one we'll drag that over and that loaded
and we can click insert media
and now we want to put some text on this
side so we're going to go back to
widgets
and we're going to choose text editor
and we want to put the content in here
that goes there
but we will replace it with the right
content use a style tab go into here
color white close that let's make the
font a little bit bigger and we can
scroll down and that section is complete
we can hit update go back to our page it
reload and we can see that's been added
and we just need to add the carousel at
the bottom now so let's go back to
element or when I come to the bottom and
now we're going to choose this folder
instead of this icon instead of the plus
because we're going to go in here and
we're going to choose my templates and
there's our my templates and there's our
carousel I'm going to insert that always
choose no on this and it inserts our
carousel and I'll notice that it's got
the wrong color at the top and because
it's I'm going to leave the footer at
the bottom it has the wrong color at the
bottom so we're going to change those
out so we're in the section and we'll go
in here date divider change the top
color to that will go into bottom and
we'll change the bottom color to match
the footer color which is the Bethany
black and an X out of that we can hit
update we can get back to our website
and hit reload and the about Us page is
done just like that
now we're ready to get to the next page
so we're going to go back to Elementor
and then we go to the icon up here exit
to dashboard and now we need to go back
to pages and pick our next page so we'll
scroll down pick destinations Jamaica as
our next page to edit click on edit with
Elementor and now we can start on the
destinations you make a page the first
thing we'll do is make a column one
column in that section we're going to
stretch it pull with and now let's set
the background and we're going to show
you to use an image so we'll pick
classic and we're going to need to load
an image from here so we need to get a
Bethany folder so we'll go to backup
here destination Jamaica and over here
we needed to do the upload folder now we
can just drag this over
now that's added we can insert media and
it shows at the top we're going to set
attachment to fixed
sighs two contained and now we're going
to put some content in here so we'll go
back up here and let's just drag this
widget in there three times
the
donation so we'll put that in there and
then we'll go to style we'll set the
color to white we'll go into typography
I'll set this to say 23 she wanted to
use a different font for this we're
going to use this viga font 200 for the
weight place that we're going to go into
the shadow we're going to do five and
two two this will kind of offset the
shadow to the bottom right now we'll go
into the next text will change that text
here and then we'll go into settings
under the style again we'll set the
color to white we're going to keep
typography this time we'll do 33 font
the VGO again and then we can close that
out and we're do the shadow the exact
same way five to two lays that out for
the last one it's gonna say Jamaica get
a style and this one we're going to set
the color to Bethany's screen I'll close
that typography
we're gonna pick another font that
Bethany likes squatter one I'll make
this really big 3:30 what is that get
back to the color I wanted to make this
a little bit transparent
like that and then we're going to go in
the shadow do the shadow exact same way
five two two plays that and now for the
blend mode on this we're going to do
luminosity it's fun to play with the
different ones see the kind of effects
now notice this hangs down a little bit
as far as the word Jamaica we're gonna
move it up some but it's still gonna
look funny in here but when we produce
it in our update you'll see that it
looks correct also on this edge here
these are too close to the left so let's
go ahead and choose that section and
inside of here we're gonna unlink the
padding and for the left hand side let's
set that to 20 that moves it in a little
bit and now we want to edit the position
between here and here this is a neat
trick but we're going to choose the
Jamaica text and we're going to go in in
advance and now we're going to use
margin this time we're going to unlink
those now one of the neat things you can
do with margin is you can also get
margins and negative numbers so this top
margin up here I'm going to say negative
30 and notice how it pulled it up there
real nice like that now if I hit update
and I come in here and I reload
you'll see that it fits in there really
nicely destination is a little high up
here so I want to move it down a little
bit and that'll move everything down
just a tad so we'll click on destination
advanced will unlink this and for the
top on this will put 20 and then we'll
hit update and then we'll come back in
here and hit reload and it's a little
much because this is starting to show at
the bottom so we're going to move this
space get a little bit of that space out
of there and a little bit of the space
out of here so come to destinations I'll
come in here and we'll do that same
trick we're going to go into margins
unlink that and for the bottom margin
now I'm going to put minus 10 and that
is how I pulled it up a little bit and
then for the Jamaica where we had minus
30 let's try minus 40 and we'll do
update I might get in here
reload and it looks perfect now so let's
go ahead and view Bethany's website and
we'll see that she has the header at the
top it's got a title here some text here
and then it has these fancy little
progress bars and they're in two columns
so we're going to do an inter column to
do that and then we got a button a bunch
of buttons across here that we want to
add those as well so let's go ahead and
work on that first section so we'll come
back over to our WordPress and then
we're going to scroll down and we're
going to pick to make a new section and
this section is going to be one column
and now we'll go over to our widgets
we'll put a header in there come back to
the widgets well
put a text editor in there just below
that back to the widgets I'm going to
put an intersection just below that and
get back to the widgets and I'm
scrolling down looking for what's called
progress
and we're going to put a progress bar in
the first one of those and then once we
build it will make a cut bunch of copies
and we'll copy them to either side so
we'll start by adding some style to the
text header we'll go to the content and
choose Center and we'll set that to say
introduction and then we're going to get
a style it we're going to set the color
to be Bethany's teal and then we're
going to set the typography to the fancy
font that Bethany likes saw has a fifty
blows that out now we'll edit this text
based in our content go to style and I'm
into type however he will use default
font let make it bigger and we're going
to use black here and now we're ready to
edit our progress bar so we'll click on
that and the top here is what goes right
there so we'll change that to say
accommodations and this sets the
percentage of the bar we'll say 80 and
the inner text inside the bar is that
text right there now we've got one of
them completed we're just going to make
duplicates of these to make all six and
then we can change the content for those
basically I can come here duplicate
duplicate duplicate write one of those
over here
duplicate duplicate now while I'm
thinking about this Texas a little too
high up so we're gonna click on that
text go to advanced unhook those and
then on the top of that let's make that
30 that brings it down some that looks a
lot better okay so now we have these
that need new content and we'll go ahead
and use some magic to do that so the
progress bars are complete but in
Bethany sight she didn't have the
percentages on here because these really
aren't percentages those are kind of
just approval ratings and so really we
want to go back and change that and so
what we need to do is click on each one
of these say for example we can click on
the first progress bar and under display
percentage we just put hide just like
that now we'll just quickly adjust the
other five to do the exact same thing
and our progress bars are complete and
are ready to work on their next section
and for here we're going to add another
intersection so we're going to come back
up to our widgets and then we're just
going to drag this intersection to here
and in Bethenny's website it has the
yellow coming up next so let's go ahead
and add this little bar in between our
separator they'll come into here we're
going to choose that section get a style
shape divider we're gonna do a bottom
and we're gonna choose our waves brush
and our color is going to be Bethenny's
yellow blows that out I'll put a height
of 60 now we can see that it's there but
it's a little bit close on here and
obviously it's going to change when we
put the other stuff in there but while
we're in here let's go ahead and go to
here and we'll unlink the padding and
let's try 60 in here and now we're ready
to start working on our button bar so
we're going to come back up to widgets
and we're going to choose a button we'll
drag that in there and we're not going
to need this empty column ecause we'll
just copy the button column that we have
to the left so I'll right-click that and
delete it and now for our button we'll
just come over here and tell it to be
centered and we're ready to add the rest
of our formatting for that button from
here we'll click on style we'll set the
background color for the button to
Bethenny's green and then we're going to
choose hover and set the background
color for the hover to Bethenny's yellow
and now we move over the button we'll
see that it highlights as we would want
it to so we're going to duplicate our
button six times well five we need six
I'll right click there on the column
duplicate and we'll do that four more
times
so now we have our six buttons and are
ready to get our buttons to point
somewhere but first we need the sections
that are going on point two because this
button is going to point to the next
section let's go ahead and start the
next section and we're going to make
this a single column will go into style
we're going to set the background for
this section the Bethany's yellow now
we're going to add some widgets to that
so we'll come in and put a title widget
there and an editor widget under there
like so and then we're gonna start
putting the content in for those two
and there's actually a subheading so
we're gonna put another heading in here
like so go ahead it the first heading
style and we're gonna pick Bethany's
fancy font and we'll set the height to
50
and we'll go ahead and set the text to
that to be places to stay and under
style we'll set the color to be white
now we're ready to do the bottom one
here text will be that go in a style
we'll set this also to white well is
that typography default font
let's try 30 and then for the text for
the bottom section just change that out
and now we're actually going to need
another section of text below that
because we're going to put numbers next
to it and show you how to do that let's
go ahead and go back up here to widgets
I'll put another text editor down here
and for the one that we started with
let's go ahead and to style we'll set
this to black
was that typography default font but
let's go with 18 for the size and then
we'll do the same thing for the one down
here we'll go into style color black
pipe ography 18 for this particular
piece of content we want to make this a
numbered list and to do that to make
this software work well you want to have
the individual pieces of content have a
space between them now I did this in a
text editor to make it work well for me
and so in this case I'm going to
highlight the five different areas I
have copy that to the clipboard and then
I can come over here and I can paste it
in
and when I scroll up you'll notice
there's an individual line between each
one of those if you don't have an
individual line when you apply the line
numbers it'll only give you a one at the
top and now we can select all that and
I'm gonna go click on line number and if
you notice now there's nice line numbers
next to them now from here we're gonna
go ahead and put in the bottom wave
separator till let's come up to the
section for that we'll go to style and
it will get a shape divider this will be
for the bottom we're gonna use our waves
brush and we'll use Bethenny's green for
this because that's going to be the next
section below that and we'll set this to
60 and now we scroll down we can see
that there's not enough space there so
again come in too advanced unlink those
and for the bottom let's set this to 60
and now we've got plenty of space there
now let's go ahead and visit Bethenny's
website again and for the sake of time
notice that most of this is very similar
to what we're already doing that the
sections are changing colors and things
like that we have this special section
here I'm going to show you how to do but
all the rest of this is very similar and
at the very bottom there's also a photo
gallery I'm going to show you how to do
that but for the most part that content
is very similar so I'm just going to do
that behind the scenes as a bonus for
making it this far through the course
I'm about to show you everything you
need to know about using element or
templates you have probably already
figured out there's a duplicate version
of this website obviously because the
site has the content for bethany's
already in it
so there also is a back-end for that one
we're going to go into that back-end and
here's the section for the places to
stay that's completed so in this section
I'm going to right click on this I don't
want to save this as template and then
I'm going to give it a template name
that has the word original on it so I
know it came from the original site now
I'll click on save to make a copy of
that
now it's listed in our list of templates
for this particular site but I need to
use it in the new one we're doing so I'm
going to come over here this little icon
and I'm going to export it
and it comes up with this box and I want
to save it as a file and now that's been
downloaded to my computer and if I go to
my downloads folder you'll notice that
it's listed but it has a really funny
name and you definitely want to change
these names so we're gonna go ahead and
rename that and I already named it what
I named it originally that way when I go
to recycle it it's going to make sense
now we're ready to insert this version
of the template into our version of the
website so let's go back to our
Elementor
we need to save our updates that we were
already working on and now we're gonna
have to go back to the dashboard because
you have to import them from the
dashboard that's the only way you can
get the new templates back into your
site that are exported so we're going to
click on Elementor and it should just
bring up your templates by default if
not there's a my templates option as
well and now from here we're going to
import new templates so we'll click on
import templates choose file choose the
template to import and import now and
now you see it shows up in our list of
templates that we can use now we can go
back to pages that will click on
destinations Jamaica edit with Elementor
and now we're back to our Jamaica
destinations page and before we can
insert the new piece we need to come
down here and remove the old section
that we had so we'll remove that section
and now we're going to go to our folder
here and inside a folder we'll be able
to get to my templates now before we
insert our template I want to tell you
about blocks and pages blocks are
basically sections that you can add into
your website project now any of them
that say Pro next - I mean if you want
to access that you pay a one-time fee -
Elementor to have unlimited access to
all their pro versions which gives you
access to the really nice ones if you
scroll down you'll see that there's
really a lot of stuff here it just keeps
going on and on and on it's just
wonderful what they've done and many of
them are free there's also a lot of pro
versions as well we end up getting the
pro version to have access to all the
additional ones because it really wasn't
that expensive no under pages these are
entire pages that are complete so if you
wanted to have an entire page that was
done and used in a certain way you could
go in here and just click on it and
again the ones that don't say pro or
free and the ones that say pro you paid
a one-time small fee to them
and you get access to all those
unlimited and then under my templates
are the ones that we've created or we've
imported or we've saved now under this
video
I've also have some content that shows
you where you can find templates for
example WebM / templates has all the
templates that were in the different
courses where we've used them all so
Elementor is a partner with web yoda
just like hostgator was a partner with
webby etta so if you end up deciding you
need the pro version a portion of those
proceeds go to help provide additional
free training for training centers and
students online all over the world who
can't afford training and finally
there's template monster and this site
has templates for lots of different
environments as far as building websites
and particularly they have a really good
collection of ones that are used for
element or itself so let's go ahead and
go back to our wordpress and notice that
now this one's available because we
added it to our library and so I'm just
gonna click on insert I'm always going
to choose no for this and now it's added
to the site but notice it has all the
content so not only that save us the
trouble but I saved me the trouble of
having to write this whole thing in
there a second time notice in our import
that the text is now no longer black
this seems to be an import issue I'm
sure Elementor will fix quickly but in
our case I just went back and set it to
black in the page now suppose you don't
want to just save one section what if
you wanted to save the whole page well
the way you do that is down here if you
click on that little arrow there's an
option to save as template and that
would save the entire page as a template
and that allows you to import entire
pages as templates in fact that's
exactly what I did here once again our
import resulted in our black text
becoming gray
fortunately Bethany provided me with the
solution that we will apply later in
this video
if you scroll down you'll notice that
now all the content is in the site
except for the small piece I'm going to
show you how to do here and the photo
gallery at the bottom now at the very
top we had these buttons and now these
buttons have names because we imported
those now when you click on one of these
buttons it shows a name here notice that
name has a pound sign in front of it and
the pound sign is required and then next
to it is whatever the name of the link
we're going to link to inside of a page
so this case is going to be places to
stay and each one of these has their so
name things to do now to get it to go to
that place we have to add a special
widget so let's go to our widgets and
scroll to the bottom and it's called a
menu anchor and we're going to drag that
menu anchor just above the heading there
and then over here we can paste in the
name of our anchor but we got to take
off the pound sign now at this point
well if we scroll down and we hit the
places to stay button it automatically
jumps to that spot now it turns out that
all the other ones we've already put
into place so you can see that one goes
there and if you go down to the budget
it goes straight to the budget section
so if we hit on update and we get back
to our website and hit reload now this
will be the new version and each of
these buttons will work and go to a
particular areas now at this point we're
ready to go ahead and fill in those
little sections that were left over from
before so let's go ahead and go back to
our wordpress and from here we're going
to scroll down to the section that we
want to work on and we're going to work
on this section right here we're going
to set this to stretch pull with column
gap no gap next we're going to need some
pictures to put in here I'm going to go
ahead and make a duplicate of this
because we're going to use it twice and
so now we're going to go back and get an
image widget put one in there roll down
I'll do the same thing here another
image widget is going to go in there now
we're going to choose an image for this
one we're going to upload one and we're
going to use Bethany's folder and then
we're going to take this one I'll drag
it in just like that insert media and I
want to come over here and do this one
same thing we're going to add another
file
this time we're gonna have that one
insert media and now we just need to put
the content in these two fields and
those are going to be the text editor
widget so we'll grab one of those or
each one of those sections we can go
ahead and style these we can set the
color white I'll close that typography
I'll put 18 as the font size and we'll
do the same thing over here style color
white what is typography 18 now each one
of these is also going to have a little
header on it so we'll go ahead and pick
a header and drag one of those on each
side
now we can style the headers so we'll go
into style I'll set the color to white
you know do the other one the same way
I'll set the color of white and then
we'll use the rest of the defaults and
now we just need to change out this
content for these two sections
now the content is now updated we can
hit update here get back to our website
it reload
and now we have that section complete
except look at this these are really
close on this one on this one's not
really close this is that column and
we're just going to put 12 on here I did
it on that one I forgot to do it on this
one we'll do update come back over
reload and now it fits there just fine
and we're ready to fill in our photo
gallery let's go back to our WordPress
I'll scroll to the bottom
we're going to put a photo gallery right
here a bunch of images look at a widgets
rolling down looking for image gallery
drag that in then we want to add some
images to it so we're gonna click on add
images we're going to go back to
Bethenny's folder and then we're going
to select all the images that we want to
be in the gallery drag them over and let
those load now those are later do we can
click create new gallery now will click
insert gallery and we're just going to
change our image size to 300 by 300 and
that looks really nice and pretty but if
you want it spacing between them you can
go to style spacing custom and then put
however my spacing you want now I can do
Update
go back to our page hit reload and now
our photo gallery is complete and are
ready to solve the mystery of why the
text is gray inside Elementor originally
I thought wow you know the imports not
working right can't really figure it out
and I pointed out the Bethan a little
frustrated she goes what are you talking
about all you need to do is set your
color defaults and I was like color
defaults well that makes a lot of sense
so basically we go back to our dashboard
and when you scroll up here's this grey
text well she had her default color set
now if we come to this icon over here we
can go into default colors choose text
hit black hit apply and all sudden
that's exactly the way it's supposed to
be so we'll go back to our page
we'll hit refresh
and everything's right now to get
started on our gallery let's first look
at Bethenny's gallery so we'll go back
to her site we'll go to the top we'll
click on gallery
and you'll notice that the top is
basically the same as our about us so we
can recycle that and we're going to
enter another image gallery just like we
had in the last one but we're not going
to put any spaces in between them so
let's go back to our wordpress we need
to go back to our dashboard dues pages
scroll down to our gallery page choose
that edit with Elementor and we're ready
to start creating this page now at the
top of this page we want the about Us
header and I actually went to the
trouble to go ahead and do that behind
the scenes for us so it's in my
templates now and there it is right
there so we're going to insert that
we'll click no and there it is it's
already at the top of our page now we
can just click on that text and instead
of saying about us change it to gallery
and now we want to add a new section so
we're going to click on section we're
gonna put a gallery in there so let's go
in and put our image gallery use that
drag the image gallery in there like so
well click on that and we're ready to
pick pictures for that so add images
and from here we're going to choose the
images that were from our original
carousel but we don't need Bethenny's
profile picture in there so that'll give
us 24 we can say create gallery insert
gallery now we're going to set the image
size to medium large columns 3 now we're
going to go back in for that section and
set the style and we're going to set the
background the Bethany's green like so
and then a top over here we had a little
text editor so we're going to add one of
those text editor guys right here we're
going to change out the text
get back in style color white blows
typography eighteen will hit center now
we need to add the waves brush to the
bottom so we'll choose this section and
we'll scroll to the bottom we'll go to
advanced let's go ahead and unlink that
and choose 80 as our bottom and I'll go
into style shape divider bottom pipe
equals waves brush and the color is
going to be Bethany black and then we'll
come down here and set this to 60 and we
should be ready to go we can hit update
get back to our website click on gallery
and our gallery page is complete now
we're ready to go on to the travel tips
page and start that one with all the
resources we've already created the
travel tips page is going to be really
straightforward so let's go to Bethany's
website and let's look at her travel
tips page and notice it has the same
header as the about us it has these
accordion sections that we saved one of
those and all we're basically doing is
making a whole bunch of those and
changing out the content and at the
bottom it has the carousel just above
the footer so since we've already done
all these things I'm just going to go
ahead and insert the travel tip page
because I'm pretty sure you already
figured out how that piece is going to
work and we're ready to move forward to
the Contact Us page
let's visit Bethany's Contact Us page
and we'll see that again it has the same
header at the top as we had for the
about us as a little section here where
it's got two columns and down here it
also has two columns we're going to be
putting in a new form we already made
that back in for that and we'll be
adding a map so let's go ahead and get
started so we head back to our WordPress
and from here we need to go back to the
dashboard
well click on pages
we'll click on contact us Elementor then
we're ready to get started on our
contact us page from here we're going to
click on the folder go to my templates
and we're going to insert the about Us
header click no and then basically we
just need to change this out to say
contact us next we're going to add
another section we'll make that two
columns and we're going to do the same
thing again and then for this first
section we're going to set the color to
Bethenny's green close that and then
we'll come to this section we'll go into
style for that one set the background to
Bethenny's yellow we'll close that now
inside the first section we're going to
go into advanced well unhook that we'll
put a top margin of 20 a bottom of 60
they're going to go into style shape
divider and we're gonna put our wave at
the bottom and we're going to choose the
color of Bethany's yellow blows that
that's 60 and now we'll basically do the
same thing to the bottom section so
we'll go there
advanced unlink set 20 bottom to 60 I'll
go into style set the shape divider to
bottom waves brush and the color for
this will be the footer black so it's
not all the way black I'll close that
and we'll set the height of that to 60
and now all we need to do is put the
content in those two sections so we're
going to come back into the widgets and
we're going to pick a header and put it
in there like that we're going to go to
style we're going to set the color to
white what is that typography
we're going to pick rave a slab and
we'll set the size to 26 now we'll go
back over to content and we'll put in
the content for the first one which I'll
be phone email and now we'll come over
here I'll right-click I'll make a
duplicate drag it down there and we'll
make another duplicate I get over there
get another duplicate right get down
there and now the content is updated and
we're ready to add a little icon list
under each of these two so go back into
our widgets and we'll choose this icon
list we're going to put it there we'll
go ahead and format this list now we're
only gonna need two of them here spacing
between if you add something here it
just spreads these apart a little bit
under icon we're gonna set the color of
our icon to black what is that and then
we're going to set the size of our icon
let's say to 18 make it a little bit
bigger we'll go into text we're going to
set the color of that to black and then
we just use the rest of the defaults I'm
going to right click and I'm going to
duplicate this because we're going to
use another one on the other side that's
very similar and now we want to make
adjustments to the content itself and to
do that we'll select the widget and over
here when you click on it it will blue a
pulldown you can set the text that's
going to be over here to the right and
then you can choose an icon so for
example we want it to be phone so we can
click down here and that'll open up the
second one and put the title for that
one that shows up over here and then we
can pick the icon we want it to be and
now we're ready to work on the one on
the right-hand side so we'll choose that
one first item heading for that will be
that and then we're going to choose the
icon
and for the second one we don't need an
icon so we're just going to click this X
box to get rid of it all together and
then for the list title item two we'll
put the second part of the address now
notice this is inset here we really want
it to line up over here but the problem
is if you couldn't hear and you add
spacing before this regular spaces won't
do anything so we have to use a
different trick to make it work and what
we're going to do is we're going to come
over here right-click and we'll make a
duplicate and then in the first one
we're going to delete the second line
and then the second one we're going to
delete the first line and now in the
second one we can come up to advanced
and we can unlink this unless they pick
23 and that'll line up and then we just
have to adjust the spacing between these
two and we can move that up using our
little trick here so on the top let's
try minus 15 and that looks about right
now we're ready to add our message box
so we'll go back to our widgets and at
the very bottom is our void contact form
seven we'll add that in right there and
then we'll come up and choose our
contact us form and we're ready to do
some styling on that we will click on
styling in our first box we're going to
put color black and that changes the
color of that text in our all input CSS
box we're going to put this which is
going to change this box to white and
allow black text inside of it and then
in the text area CSS we're going to put
the same thing which will allow that box
to be white and allow black text inside
of it and everything else should be fine
so for our final section we need to add
a map we're going to go back to our
widgets use Google Maps drag that over
there like that and then over here we
paste in whatever the address is I'm
going to leave the zoom at the default
and then we're going to set a height and
this height is going to be based on how
tall we need it to be to fill that
window and once you get it exactly right
you're ready to hit update we'll go back
to the site it contact us and now we
have a fully functional Contact Us page
that's ready to go so at this point our
website's pretty much complete but if
you look at Bethenny's website on the
home page there was some animation that
we want to show you how to do as well it
will click on the home button
and now when we scroll down notice how
this content kind of Scrolls in like
that and then we come down and that
swooshes in and that swishes in we're
going to look real quick at how we do
that and then after that we're going to
look at how to get this text to come in
like that so let's go ahead and head
back to our wordpress and we're going to
add animation to our home page we need
to go back to the dashboard
go to pages roll down is home edit with
Elementor scroll down and we want to
animate this first section content
animation is one of those super
complicated looking things that's super
easy to do there for example to add
animation to this section we're going to
click on Bethany we'll go to advanced
and there's entrance animation from here
we can do the pulldown and we can say it
zoom in we can pick the header here
advanced entrance animation let's do
fade down we can choose the next header
advanced animation fade from the left
and then this piece of content here
advanced animation will do zoom in again
now this is complete for that section it
update get back to our website hit the
home button and we scroll down and now
that all animates now scroll down to the
next section and we're going to apply
animation to the columns it works the
same way for the left column here I can
choose that go to advanced I can say
animate in from the left when the column
in the middle I can get advanced
animation in from say the top I can
choose the third one advanced animation
from the right now we can click on
update and go back to our site scroll
down and watches that animates in and we
scroll down to the next section and that
animates in and I went ahead and applied
the animation to the rest of the
sections let's go back to Bethenny's
site to look at the final animation
effect we want to be able to accomplish
so we're going to click on home page
and notice how this text is flying in
and it changes over time now this
actually is a pro feature and there's
lots of amazing pro features I just
didn't cover those because I promise you
can make this site but it'll cost to you
and I'm going to show you how you can
put this text in where it doesn't fly in
for free but if you want to have this
fancy fly-in thing it's going to be the
pro feature it's not really expensive go
tell em intercom front slash web yo to
get you to the partnership and get you a
discount and get you these amazing pro
features but let's go back to our
homepage and add this to our site and
from here we can scroll to the top and
let's do the free version first if we
click in here we can choose the header
we can drag it in there you can put
whatever text you want you can Center it
and go in and style it we'll say we want
it to be white and let's say we want it
to be the permanent marker font and then
we'll make this let's say 70 and then
let's say you want it to be a little bit
transparent you can come back in there
and so now you have a version of this
that is free now if you want to animate
this we got to do a different way so
we're going to have to delete that one
we're going to click on our widgets icon
again and I've added the pro version
down here so that we can have access to
this animated headline I'm just gonna
drag that in right there but let's see
what that animated headline looks like
and I want you to see a short piece
about what you can do with just this
look it's an underlying thing going on
here make this text come in like this
make this text rotate like this make
this text highlight like this so all of
these things is just one particular Pro
feature and this particular one's one
we're going to use let's edit our
animated header so we'll click on it and
choose it for style we're going to pick
rotating for animation we'll choose drop
in and we'll put some text in and each
of these lines are going to rotate
through over here now notice the before
text that shows up here the after would
show up after it but if you don't give
any at all then it's just going to
rotate the text that's being animated
now we can go to style and we can set
typography and let's set this to 80
we'll come back out of that and then
we're going to set it specifically for
the animated we'll come in here we'll
set it to white and we'll make it a
little bit transparent well close that
will come in to typography down here
we'll choose the font permanent marker
and now we have this text rotating but
notice it's shifted to the right now if
we update that and we go back to our
website and reload
and scroll up you'll notice that it's
not shifted to the right so it worked
the way we wanted it to now let's go
back to element or I'll notice as these
lines of text come in there's no delay
in between each line of text if you want
a delay you come back to content and
just put an extra space between each of
the lines of text so basically it's
displaying empty text and every other
space so we can hit update go back to
our site hit reload and now we have that
extra space in between
and is the last section for this
tutorial we're going to look at how to
ensure that your website is both mobile
and other device friendly first let's
look at how to look at our website in
different modes this little tab right
here when you click that this basically
shows what it looks like on a desktop
computer now at the very bottom there's
an option here and we can select tablet
at this point we can see what it looks
like on a tablet but notice the section
at the top doesn't look as good as we
might want it to look like as well as
other sections below made also need
adjustment now let's look at our website
on a mobile device come back here now we
click on mobile now at this point it
looks like things may be working okay up
here but when you close this out you're
actually really seeing it in mobile mode
now in this case the technology for
doing video backgrounds is not supported
on some mobile devices so in our case we
just want to go ahead and remove that
feature altogether so to do that let's
go back to editing and now notice we're
in editing for the mobile mode I can
choose that particular tab right there
and then under advanced it's a very
bottom let's close that there's a
responsive area and under the responsive
area I can tell it with this thing right
here let's just turn that section off
now when I close that now that sections
gone altogether and it actually looks
pretty good however if we look down here
this your ultimate vacation guide thing
really isn't working well what if we
just wanted to remove that so we can
come back over to our tab now we can
click on that and go back into advanced
and then go back into the section at the
bottom it's responsive and we can tell
it to hide that particular item on
mobile as well and now we can push that
back out and now when we look at our
website this is what it looks like on a
mobile device and this is looking really
good now from here if we scroll down
we'll see that our website looks pretty
good the front page on this particular
format for the mobile device and I think
what we're ready to do is to look at
what this is going to look like on a
tablet and make our adjustments there so
to make tablet adjustments for our main
page we'll click this little icon
comes back out and now at the bottom
we're gonna choose tablet and I'll go
ahead and close that to get it out of
the way
and now what we want to do is we want to
change this because that's really not
working well so what if we were to
change this to where it didn't have a
video but instead it had a image the
first thing we'll do is we'll come up to
the top and we'll choose that section go
in into advanced and then under
responsive or tablet we'll also turn
that off and so when we click here now
that goes away now we want to add our
new image at the top so let's go back to
our edit mode for tablet and we'll click
here to add a new section we want that
section to be one column we'll stretch
it
we'll make it full width and now we'll
go into style and we're going to set a
background image and we'll click here
and then we want to go to upload files
and then we want to go to Bethenny's
folder we want to drag that over
now that's loaded and we can hit insert
media and now we have the media here at
the top let's go into advanced well
unclick these let's set this to say 400
and now let's see what it looks like and
see now we have this image at the top
but it really doesn't have the exact
look we want it to have so go back to
our edit mode we have the background
here and we want to go back into style
position center size cover now we can
look at it again in tablet mode and
that's looking really good at that point
now one of the things you need to be
careful about is when you make these
adjustments they only show up on the
pages you want to show up so for example
if we go back and then we choose at the
bottom to look at this in mobile mode
and we go back out you'll see that that
image shows up on the mobile mode which
obviously wasn't what our intention was
so we can go back into edit mode that
section is already selected we can go to
advanced and then under responsive we're
just going to tell that to be turned off
on both the desktop and the mobile and
now when we go back to the mobile
version and we close that out now it
looks the way we want it to look now
let's proceed back to the tablet mode
for editing because I had another
adjustment I wanted to make if you come
down here
you'll notice that the section right
here that these things are really tight
on each side what we want to do is
adjust the padding only in the tablet
mode to give those more space we'll come
back into edit mode and we'll choose
that text we'll go to advanced and in
here let's say I just put five go to
here
advanced five and here
advanced five and that gives us a lot
more room but now we need some padding
at the bottom of this because clearly
that's hitting a wave so let's go into
that area advanced and now on here we
had some space at the top but now for
tablet mode we're going to put some
space at the bottom let's put 60 and 60
looks about right now we can hit update
go back to our website and hit reload
and we notice that none of the changes
that we made for the tablet in the
mobile device version have affected what
happens in our main site now that was
just a small sample of the type minor
adjustments you can make to ensure your
site is mobile friendly and other device
friendly but feel free to use those
exact same techniques throughout your
entire website to get everything looking
perfect on every possible device
so that about wraps it up you should now
have all the tools and skills needed to
build your own professional WordPress
website I hope you've enjoyed the course
I certainly have enjoyed being your
instructor please remember to Like share
and subscribe to the video below to help
me spread the word to as many inspiring
web designers as possible again my
name's yota
it's been a pleasure being your
instructor today I look forward to
hearing from you below but until then
have a great day peace out you're still
here it's over go home
