if you're looking for the best elementor
tutorial on how to build an elementor
website with easy to follow steps in
90 minutes or less at no cost to you
then you have come to the right place
[Music]
[Music]
wow
[Music]
huh
[Music]
hi i'm bethany and i love to write right
now i'm at couple san souci 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
writings with others and offer my
readers practical advice i wanted my
website to be mobile friendly easy to
navigate and simple to update i also
needed a shopping cart and a blog 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 and
welcome to my youtube channel in this
website tutorial you'll learn how to
build a website that has an amazing
intro video professional logo
eye-catching graphics and all the bells
and whistles the pros used at absolutely
no cost to you this video used all the
current web design and web development
techniques to build a fully responsive
website that automatically adjusts to
meet the screen needs of any computer
laptop tablet phone or any other
handheld device to get started the only
hard cost we have is web hosting and
that's where your website lives that's
going to run us three to ten dollars a
month with your web hosting you'll get a
free domain a value of 15 as well as an
ssl key which makes your web pages
secure and that has a value of about 99
as for software requirements there are
none everything we're going to need
we're going to do online as for system
requirements this website tutorial is
compatible with both windows and ios
systems all you need is your favorite
browser and access to the internet and
you're ready to go i recommend chrome
and firefox as browsers of choice as
i've had some students in the past that
had complaints about compatibility
issues with safari opera and internet
explorer now during this course if you
run in any troubles just leave a comment
below the video to be more than happy to
assist you and don't be shy about asking
for help i've been a webmaster
instructor aka the web yoda for over 20
years and i love to hear from my
students but if you could please pay it
forward if you could like the video
subscribe to the video share the video
tell your friends about the video those
are the kind of things that help get the
word out though so other students like
you can find this video
there was something else oh at the end
of this video i'm going to discuss the
four biggest mistakes people make that
drastically hurt your search engine
placement turns out the solutions for
these four things are really easy and
they're free
so i think we're ready to get started so
without further delay let's go ahead and
look at the website we're going to build
today
today we're going to build bethany's new
website which is selfdashtastic.com
we'll learn how to do an intro like you
see right here and we'll learn how to
add it to our website
now notice that this text flies into
place at just the right moment once the
homepage is revealed you're going to be
able to learn how to do that effect as
well as all the other effects that are
shown in this website now definitely
don't get intimidated i know this is
going to look really fancy it's going to
look very professional but you're going
to be able to do all this trust me it's
not going to be a problem at all now
you're not just a passive participant
sitting in the audience watching a magic
show as i put the show on you're
actually going to learn behind the
scenes how to do all this it's very
simple it's very easy and you're going
to be surprised how quickly you can
build this entire website
if you don't have a logo we'll learn how
to make a logo
scroll down notice how these items
animated out we'll learn how to do that
we'll learn how to make these category
sections in many cases those are
services for example
scroll down
we'll learn how to do that animation but
we'll also learn how to remove the
background from that animation so that
it just has the girl coming in
we'll learn how to do these call to
action areas and notice how they also
animated in from the right and the left
and then we'll learn how to make the
buttons grow when we hover over them
scroll down
we'll learn how to make an image
carousel in this case it's just images
of words of wisdom but they could be any
images you want
and then we'll learn how to do another
animation similar to the one we did
above
and then if you need an email newsletter
we'll be able to integrate that into
your website
and then we'll learn how to make this
footer at the bottom it looks exactly
the same on all pages
[Music]
under about we'll learn how to make this
fancy header
and then we'll learn how to integrate
text so that it can wrap around a
picture like it does here
and then we'll learn how to import the
words of wisdom section so we don't have
to create that again
we will not be adding a shopping cart as
part of this course but once we have
completed our website i will provide a
link to the video shown here in case you
want to add the shopping cart later
we'll learn how to make this super fancy
gallery
notice as we scroll down how neat those
are when they slide in together
and this is also a light box so any of
these we pick on it'll bring it up and
we can scroll to the left or the right
and close that out
and then we'll learn how to make a fully
functional blog
with a unique header
and then the individual blog items like
this
and when you click on one of those
we'll learn how to format the blog post
to have all these extra features
nicely formatted like that
and then we'll learn how to make this
contact us page where we have a really
nice clean form like this
and then near the bottom we'll have a
map and the map can zoom in and out and
change it to whatever you need it to be
now you should be able to learn
everything you need to know in about two
hours time
i know on the surface it could look
intimidating super complicated but trust
me you can do all this i've got step by
step all the way through showing you
exactly what to do and if you're running
any troubles just leave below the video
i'd be more than happy to help you out
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
finding great web hosting solutions in
the matrix of hundreds of choices can be
frustrating at best you have to
understand that nearly all web hosting
review sites make sure that the web
hosting company they are affiliated with
always get the best review so basically
that web hosting company is number one
to them because they get paid if you
decide to use that company i have been
hosting websites for over 30 years with
the first five years being me supplying
my own hosting i have used at least 10
of the hosting companies shown here
either personally for my clients
obviously not all web hosting companies
are created equal and there are only a
few that stand out from the rest but how
do you reveal the best web hosting
provider with all the fake reviews out
there as puzzling as this might sound i
was able to find my answer while not
allowing my own bias to interfere
for me i like to turn problems inside
out in this case i was looking for the
web hosting review that reveals a web
hosting company that sucks the least
so first the quick answer to the
question of who is the best web hosting
company for me is simple hands down it's
hostgator hostgator is definitely the
best web hosting solution for me my
clients and for web yoda but the obvious
next question is why is hostgator the
best choice well webiota did some
research to try to find some authentic
web hosting reviews and they settled on
some results from pc magazine you have
to understand that pc magazine has been
around for nearly 40 years providing
essential technology information to the
end user
for our purposes every year pc magazine
does an editor's choice award to
determine the best web hosting companies
and shown here the top six web hosting
companies for this year with hostgator
being number one it turns out the
hostgator has been rated the number one
web hosting provider by pc magazine for
many years running basically hostgator
collectively has the features you need
their server reliability is amazing
their 24 7 support is amazing their
prices are good or better than anybody
out there i personally have been using
hostgator for more than three years now
i host over 200 domains and websites
with them webiota also decided to go
with hostgator for all their needs in
fact webiota partnered with hostgator
and as part of that partnership web yo
to students receive up to 75 off plus a
free domain name now for you to take
advantage of this offer you simply need
to go to your browser and type in
hostgator.com front slash web yoda now
this takes you to the partner page for
hostgator and web yoda and it reveals
our three choices for hosting plans
currently as part of this partnership
hostgator is going to offer us a free
domain name provided we sign up for one
of their annual plans and it turns out
this is actually the most affordable
choice for us
if we scroll down we can reveal the
pricing for each of the plans all three
of the plans come with one click install
so that means when we go to install the
software it's gonna allow us to build
our website we can just click a link and
it'll install everything for us they
also come with unmetered bandwidth which
means we don't pay for the traffic that
comes to our website no matter how small
or large that might be and finally they
also come with a free ssl certificate
which typically runs around 99 a year
and you say okay what is that what do i
need that for well that's a little lock
up here in the top left it allows your
page to be secure so the information
going to and from your website is secure
at this point you need to decide which
one of the plans is best for you for our
purposes i'd recommend the hatching plan
if you have one domain or the baby plan
if you plan on building multiple
websites and then if later you find you
need additional features you can just
upgrade to the business plan and pay the
difference so in your case you probably
need the hatchling plan which is a
single domain so we'll choose that
the first step is to pick a domain name
that works best for your purposes in my
case for this example i'm going to use
choose my domain name and if we click to
the right it'll tell us if it is
available
and in our case it is available
so we're going to scroll down
the next item is domain privacy
protection and basically what they'll do
is for 14.95 a year they'll hide your
name your address your information like
your email and stuff like that from
people being able to see it now for me
it's going to be on the website anyway
so i don't feel like i'm giving anything
away so i'm not going to choose to pay
for that
next we already picked our package type
we chose the hatching plan because we
only have one domain so we want to look
at our billing cycle
within the billing cycle if you purchase
one month it's 5.48 but it's only for
that first month and then the price goes
up if you go all the way up to 36 months
it's going to be 2.71
and it's going to be 61 off now to get
the free domain you're going to pick 12
months 24 months or 36 months so let's
go ahead and pick the 12 months it says
76.40 but let's see if we can do a
little bit better than that now we're
going to pick a username in my case i'm
going to pick admin yoda
and a security pin
then we want to put in our billing
information
and we'll scroll down to additional
services
now we don't need any of these services
but i'll explain them real quickly the
first is an ssl certificate we already
get that for free so we don't need to
add that the second is for them to
protect us from hackers i know firsthand
they're going to give you protection
whether you ask for it or not so there's
no reason to pay for this additional
thing they're going to want to protect
their servers from both the internet and
from you so they're going to definitely
stay on top of this next we don't need
to pay for an email for our domain name
i'm going to show you how to make an
email forward for your domain at no cost
at all next they offer a backup service
where it'll do daily backups but i know
firsthand they do monthly backups for
you i'll go ahead and give you a video
that'll show you how to make your own
backups without having to pay them a
regular fee like that
if you're looking to make scheduled
automated backups of your wordpress
website where you're in full control as
well as make manual backups at any time
that you can store locally on your own
computer then you'll want to check out
my wordpress backup and restore video at
some point
we'll turn that off
and finally hostgator offers some seo
tools for nearly three dollars a month
but there's plenty of free tools out
there so we're not going to worry about
that
if we scroll down
you want to make sure the web yoda
coupon code automatically spawned in
here so you get the best possible price
and we look down and we see that now
we're at 33 dollars which is really a
great deal that's money for the whole
year it also includes our free domain
name at no cost to us
and that comes with 24 7 365 support
instant activation of our account money
back guarantee which is awesome 45 days
collectively all these features leave me
feeling very confident that i'm making
the right decision today we're going to
scroll down we need to agree to their
terms
and now we're ready to check out but in
my case i own the domain i'm going to
use so i'm going to do one last thing at
the top so scroll to the top and i'm
going to choose i already own this
domain
then i'm going to change this to say
choose yourdomainname.com
that's the one i own so now we go back
down to the bottom
and we're ready to check out now
and our purchase is complete it is now
setting up my account
once our hostgator hosting account is
complete and ready to go you're likely
to get a survey that looks like this one
but at this point we're going to go
ahead and go off script and save
ourselves a lot of time and a lot of
questions if you didn't have this video
to follow obviously following these
steps would probably get you to the goal
that you wanted to do but we're going to
be able to get there faster and easier
we're ready to set up our email forward
and install wordpress so to proceed
you're going to go ahead and head to
your email
and you want to look for an email from
hostgator.com that says your account
info at the top
from my experience there are two
different versions of emails you might
receive from hostgator that will contain
the information you need to proceed
so now we'll discuss both of those email
versions to minimize confusion of course
hostgator could change things at any
time but what you learn here should be
enough to allow you to proceed the first
email type will look something like the
one you see here
whereas the second email will look more
like this one
if you selected a free domain name from
hostgator as part of your purchase then
this short section on how to point your
domain name to your hosting account will
not apply to you as your domain was
automatically set up for you by
hostgator
to point your domain name to your
hosting you first need to know what your
name servers are for your hosting
account in the first email example your
name servers are shown here as i've
selected
in the second email version you can also
easily find your name service as shown
here please do not use the name server
shown in this example as those are the
name servers for my hosting and your
name service shown in your email will
most likely be different than mine
once you have located your name service
you need to log into your domain account
and set your dns settings to use your
name servers
all of my domain names live at
godaddy.com so i needed to go into the
dns at my godaddy account and point that
domain to the hostgator name service as
shown here now if you're not using
godaddy.com it should be a similar
process and if you have any trouble just
contact your domain company and they can
give you further assistance
next we're going to log into our control
panel and since there are two possible
emails you might receive that means
there's two possible ways to log into
your control panel to access your
hosting account
let's start by looking at the first
method
to log into our hosting account we're
going to need our username and we're
going to need a password
we're going to take that password and
we're going to copy it to the clipboard
and now you want to go to the control
panel which is how you access your
hosting space so we'll click on this
link
and that takes us to the control panel
login page
now my username and password are already
there so i can just choose login
and that takes you to your hostgator
control panel also known as your cpanel
in the second method for logging into
your control panel you will simply click
the go to hostgator button found in your
and this will take you to the url
porthole.hostgator.com
front slash login from here you will
enter your username and password that
you provided when you purchased your
hosting
now my username and password are already
there so i can just choose login
once you are successfully logged into
your hostgator portal there will be an
option at the bottom right to access
your control panel simply click on the
cpanel button to access your control
panel
and that takes you to your hostgator
control panel also known as your cpanel
as promised i want to quickly show you
how to make an email forward under
popular links you can find email
forwards here if for some reason it
doesn't show up under popular links you
can click on email on the left and that
will bring up all the email options and
then you can choose email forwards
now we're ready to set up our email
forward we're going to choose add
forwarder
and we're going to put in this case i'm
going to put yoda
there's my domain name
and where do i want it forward to i want
it to forward to in my case yota
webiota.com
scroll down add forwarder
and now any email sent to yoda at
chooseyourdomainname.com will be sent to
my email address yoda at www.com
obviously this would be your domain name
and whatever email you wanted to send to
now we're ready to install wordpress if
we click on hostgator at the top left it
takes us back to the control panel at
the time of making this video there was
a wordpress installer inside the popular
links but this particular method of
installing wordpress has gone away for a
much easier method
so on the left hand side under our
website section we're going to choose
softasculus apps installer
and that takes us to the softasculis
options at this point simply choose
wordpress as the option and this will
display the wordpress installer
so to be completely thorough i wanted to
throw in one additional tip when you
come down and you click on softasculous
apps installer there's a chance that
wordpress doesn't show up in your list a
very very small chance but let's assume
it doesn't in that case you simply click
on any of the other ones
and in the box just type wordpress
you click on wordpress and you're back
to the same installer
now before we proceed with our wordpress
installation i wanted to address how to
deal with wordpress installation errors
in very rare occasions when you're
trying to install wordpress you may get
an error
i've already installed wordpress so that
i can demonstrate that error then i can
show you how to correct the error then
we'll install wordpress correctly so
let's go ahead and click on install now
like we think this is going to work and
don't worry about the settings right now
we'll worry about that next time through
and i'm going to click on install at the
bottom it starts the install
and then it gives you an error
now in this case it's just telling me it
already exists but this error could be
any area where something went wrong our
goal is to get rid of the install error
so we can reinstall correctly to get
started click on softasculis at the top
left
and right here is a list of our
installations if i click on that
it shows the one installation we had
we know that we don't want it because it
didn't work so we can simply click this
x
we can scroll to the bottom
remove installation are you sure
yes we're sure
that installation has now been removed
and now we're ready to install wordpress
so at this point we can go back
to softasculous
choose wordpress
and now we're back to the installer and
we'll click on install now
and we'll go ahead and proceed to
install our wordpress
the first option is which version do you
want to use
the default will be the latest version
we'll use that
next you'll choose your domain if you
have multiple domains they'll be in that
drop down
now over here it says what protocol do
we want to use the problem is it can
take a little while for the secure key
to be activated so we're going to go
ahead and turn this off for now we can
activate it later
so we'll just choose the regular one
like that and it shows that currently
our ssl certificate was not found and
that's because it takes hostgator about
24 hours to get that up and running
under site settings the site name is the
company name so let's say this was for
web yoda i'd put webviewer
and then the description is whatever the
description for the company is
so let's say i put free online courses
you can leave this unchecked
we want to pick a username and a
password i'm going to pick yoda user
then you want to pick a secure password
so let's hide that so i can put a secure
password in there now the admin email is
where any email associated with a
website will be sent so for example if
you needed to reset your password that's
where it would go
now since we didn't set up this email
forward that's not going to be good
enough for us so in my case i'm going to
pick one that does work so for me it's
going to be yod.weber.com for you it'll
be whatever your regular email address
is you can choose a different language
if you like
we don't need to select any plugins
we're going to do all that ourselves
no reason to make any adjustments to the
advanced options
and no reason to select a theme now
we're going to do that ourselves as well
when the installation is complete where
do we want to send details to i'll use
the same email address and now i can
click install
this says that it could take three to
four minutes
i've found it doesn't take really that
long at all
now that wordpress has been successfully
installed we're ready to open up a new
tab and look at our website
at this point we're probably going to
have to take a small break and that's
because we just set up a hosting account
that has a new domain the hosting is
immediately available but the domain
takes a while to propagate across the
internet so that it's able to be
accessed
to test to see if your domain name is
ready simply open up a new tab in your
browser and go to your domain name and
if your domain's not ready you'll get a
message that says this site cannot be
reached
so you're likely need to take a break
for about two hours and then come back
again and go back to your domain and
refresh and see if it works when it's
ready you'll get a page that looks like
this one that says website coming soon
or you might get your new website home
page so let's go ahead and close that
test tab now we're looking at our
completed wordpress installation page
again now that wordpress has been
successfully installed we're ready to
open up a new tab and look at our
website to access our website we simply
go to our domain name and go to our
website
before you can start editing your
website you need to be able to access
your website admin
to do that you simply go to your domain
name front slash wp
admin hit enter a login box will come up
now simply enter the username and
password you created during your
wordpress installation so in my case
yota user
password
paste that in hit login
and now we're logged into our wordpress
so if you've been following along with
the video you probably already know by
now that
selfdashtastic.com already exists
so for us to build a new website we're
going to have to have a sample area so
in this case i'm going to build
sample.selfdashtastic.com
and i'm going to go to wp-admin
to bring up the admin for her website
in my case my username was already there
so i can paste in my password
and log in
and now i'm at the fresh install for
bethany's new website
now one of the first things i want to do
is get something set up for us
and so if we go over here and we
highlight over where it says selftastic
if i right click on that
i can open the link in a new tab and
what that did was
it opened our new website in our second
tab
and now i want to go to bethany's live
website in a third tab
so we can follow along in real time
exactly what it is we plan to accomplish
in most cases when i build a new how-to
video i make a script for that video so
that it's easier for me to create the
video
and at some point when i was using the
script in a previous video a student
pointed out that i should make that
script available to everybody since it
was very useful
well it was a great idea and so that's
what we're going to do next
so let's go ahead and open another tab
and to get to the script we're going to
go to webyota.com
selftastic
and the last thing we want to do is
download all the content i use within
this website so when you're following
along you can build the exact same
website so i'm going to open up another
tab
and this time i'm going to go to
webyota.com
content
and now i'm going to scroll down to the
project we're working on
selftastic.com
and that was another way to get to the
script but we're going to click on this
link here
and it's going to download selftastic
for us
and when it's done
on mine i can click on that
and show in a folder
and you see it's in my downloads folder
and then i can right click on the file
i can choose extract all
click on extract
and now it makes a folder containing all
the content i need
opens it up in a new window
so i can close that one
bring that over here
and when i click on that
this is all the content we're going to
use to create this website
so i can go ahead and close this tab
and this tab is a script for building
the website
and this tab is bethany's real website
and this tab is the site we're going to
build and then this tab is our admin for
our wordpress so we can build the
website now that we're ready to get
started i wanted to cover a couple of
tips that'll really help you out first
some subscribers have pointed out that i
tend to talk too fast this is
unavoidable as my processor runs a
little faster like a child's processor
probably because i refuse to grow up
fortunately youtube offers a feature to
slow videos down to meet your needs so
for example i'm going to go to this
video in a new browser window
now within the video i'm going to choose
the settings gear
i'm going to choose playback speed
0.75
now this is what 75 sounds like which
should probably meet your needs
now choose playback speed again
i'll choose normal and we're back to
normal speed
next i want to scroll down
and within the content under the video
that i've provided there's going to be
an entire set of time stamps that allows
you to pick any particular spot in the
video to proceed
let's go ahead and close that tab
and the last tip i want to give you is
the script itself when you go to the
script it's got a lot of information
here tells you the plugins we're going
to cover that anyway in the video it
tells us about the astra theme then it
has a whole bunch of royalty-free video
clips you may be able to use
royalty-free images you can use and then
it has all the notes i'm going to need
for the class for example all the colors
i'm going to use are found here now two
things that are nice within this is if
you need to find a hex color and we'll
talk about that a little later if you
click on this link i'll right click
and open link it comes up with the
ability to pick a color so let's say i
wanted to pick a red and now this number
right here
is your hex color all you have to do is
click this icon and it copies it and now
you have that color alternatively the
other one we'll right click on this
choose open link
this gives you the ability to pick this
type of color and this digit right here
is to say how much transparent it is so
watch when we go like this see how that
gets transparent right here so that
gives you some idea here's your color
settings
and then here's how transparent it is
and then again you can click there it
makes a copy of it and you can use it in
your website
let's go back to the script and now
you're into the getting started section
these are all the notes i made for
myself so i can make the video but you
can also use these to your benefit
when you scroll down you'll probably
notice to the left of yoda you talk too
fast is a bunch of w's and you're going
to say to yourself hey yoda why are all
the extra w's
i will tell you
bethany decided she was going to get a
new kitten the kitten decided he wanted
to play on my keyboard
it hit the w and i decided to leave it
in the course
okay random facts
we've already covered the hosting we've
already covered wordpress and now we're
going to jump into themes and plugins
now for the most part i won't be showing
the script i'm just going to be using
the script but you know that it's there
for you as well
now admittedly i'm no bob ross but i
definitely do my best to keep things fun
and easy i hope that the tips i just
provided you will ensure your experience
building your website will be met with
confidence and enjoyment
so i'm going to go ahead and go back to
our wordpress admin
at this point if you already have a
website then there's really no reason to
watch the steps on how to build a
website
instead you can go ahead and proceed to
the section called enable ssl which is
the first step in the process of adding
a shopping cart to your website
so the first step in building bethany's
website is to remove all the stuff
that's not going to be part of her
website so let's go ahead and click on
pages first and we don't need any of the
pages they have here we're going to make
our own so we select that check box
there and it selects all of them under
bulk actions we're going to choose move
to trash
and then we'll choose
and as apply
additional step i like to click on trash
choose them all again bulk actions
delete permanently
apply
and now we want to get rid of all the
plugins that were pre-installed because
we're not going to need any of those
we're going to use all of our own so i'm
going to go down to plugins
and this brings up a list of all the
plugins that were pre-installed
again i can select next to plugins
that check box and it chooses all of
them
bulk actions
and before we can delete them we have to
deactivate them so we'll choose
deactivate
apply
now i can choose plugin again so it
selects them all
bulk actions
delete
apply
okay because yes we want to delete them
and this will remove all the
pre-installed plugins
now we want to add the theme that we're
going to use for bethany's website
so we're going to go to appearance
themes
choose add new
and we're ready to upload a theme
so first we're going to download the
theme we need
but you might say to yourself that here
are all the themes when i just pick the
one i need
well the answer is you could do that but
i can't guarantee that the theme we're
going to use or the plugins we're going
to use are always available in all
environments so if you don't have your
hosting with hostgator the theme and
plugins may not be available in your
environment to make sure the theme and
plugins we need are going to be
available i've stored them permanently
on the web yoda server so let's go ahead
and get our theme now so open up a new
tab
and we're going to go to webyota.com
front slash
themes scroll down to the project we're
working on
there's self dashtastic.com
and we're going to click on astra theme
that takes us to the astra website but
it also downloaded the astros theme
right there we go and close that
now we want to go to
webyoder.com front slash plugins we want
to download the plugins we need for this
project so again we'll scroll down to
this project
selfdashtastic.com and we're going to
need to download all of these plugins
and as we download them i'll give you a
little bit of information about what
each one of them is
the astra starter sites we'll click on
that that's going to allow us to install
a fully functioning complete website
including a shopping cart in case we
want one
then we're going to download header
footer for elementor that's going to
allow us to build a free header and
footer for our websites instead of
having to pay a premium for it
then we're going to download profile
press and profile press allows you to
set the icon for your blog instead of
being whatever the default one is
and then we're going to download social
sharing and this plugin makes it real
easy for someone else to share your blog
posts
and then we're going to download the
classic editor
a lot of updates and changes have made
to the wordpress environment and by
having the classic editor as well as the
classic widget
it ensures that we all see the exact
same environment so that what you're
following along on your admin matches
what's in the video
then we're going to download duplicate
page
and duplicate page allows you to take a
page you've already created and make a
copy of it and then edit that to be your
new page which is significantly faster
than building a page from scratch now
we're going to download really simple
ssl
what this plugin does is ensure that the
secure pages are the default for your
website and next we're going to download
the woocommerce stripe gateway
and the woocommerce stripe gateway is
what allows you to accept credit cards
on your shopping cart in case you're
doing the shopping cart
and now we're going to download
woocommerce taxes and shipping and this
gives you an automated way to do taxes
and shipping in case you add a shopping
cart to your website
and finally we're going to download the
woocommerce plugin itself
and that's the plugin that allows us to
add a free shopping cart to our website
so now all of those have been downloaded
i'll go ahead and close that and now we
want to go to our downloads folder so
i'll bring mine up and it shows
everything that we've downloaded so far
i'm going to go ahead and click on date
and that's going to allow me to see
these in the order that they were
downloaded so now let's go back to our
wordpress admin
now we can choose upload theme and now
we're going to choose a file
and you want to go to your downloads
folder
then we're going to select astra.zip
that's our theme we'll choose open
install now
and once it's installed we need to
activate it and it's that little link
right there and that activates our theme
in almost all cases you'll immediately
be able to update it to the most recent
version
so we'll choose update now
now our theme is updated
now if we come back to our website and
hit reload you notice that it's changed
a little bit
still nothing like the site we're going
to build but we're getting closer
so let's go back to our wordpress admin
and we're ready to install the plugins
we're going to need for our website so
we're going to choose plugins
add new
now we want to do upload plugin
choose file
we want to be in a downloads folder and
the first one we're going to do is astra
starter sites so we'll select that
choose open
install now
activate plugin
ready for the second one add new
upload plugin
choose file
the second one is header footer
elementor
open
install
now
activate plugin
ready for the third one
add new
upload plugin
choose file
wp user avatar that has a new name
profile press but the original file name
is still the same so we'll choose that
one
open
install now
activate
plugin we're ready for the next one
add new
upload plugin
choose file
the next one is social sharing by danny
open
install now
activate plugin
add new
upload plugin
choose file
and the next one we're going to do is
the classic editor
open
install now
activate plugin
and choose add new
upload plugin
choose file
the next one is classic widgets
choose open
install now
activate plugin
again
add new upload plugin
choose file
duplicate page
open
install now
activate plugin
now at this point if you're following
along in the script you'll see that
we're not going to install the other
four at this time we'll take care of
that later so we've installed all the
plugins we need for now
also at some point profile press may ask
you to create pages we're just going to
do no thanks when it asks us that
because we don't need that
so we'll go back to our wordpress admin
and another thing you're going to find
is always a lot of little advertisements
you can close each of those
and try to clean things up a little bit
this says to install elementor that's
going to be taken care of a different
way for us
next thing we want to do is update our
plugins so we're going to choose to
select them all
bulk actions
update
apply
then we can scroll down and watch it do
its thing
now all of our plugins are updated
and now we're ready to install our
starter site
now watch what happens when i click
right here i want to see the library
it's going to give me this sorry you're
not allowed to access this page don't
know why sometimes it doesn't do that
usually it does so i'll click the back
arrow
and then we'll go back to the starter
sites when we click on c library again
it's going to work
what we want to do is scroll down
choose build your website now
and we're going to choose elementor
which is the world's most popular
website page builder so we'll click on
that
now for some reason you didn't have that
option for some reason maybe you had
already tried this before your option to
choose would be up here as well
now what we're looking at right now are
all the different website templates they
have to offer it's totally amazing what
they have already pre-built and
basically a lot of times you can find a
website that's just about everything you
need it to be now there's two types of
templates in here if we go over to all
we can choose
premium
and it shows only their premium versions
and if you decide on a premium template
for your website go ahead and visit
wpastra.com front slash web yoda and
this will guarantee you the best price
in most cases you can find a free site
that'll work and for this example we're
going to use a free site so let's go
ahead and change that back to all
now notice there's lots of different
categories that you can look through to
find the particular one you're looking
for
in our case we're going to do one that's
called cosmetics as our default so if
you type cosmetics in the box
you'll see that the ones that are
available under that heading show up and
the one that we're going to want looks
like this in my case it's the first one
it may be farther down the list
if you want to go ahead and click on
that
and this brings up the starter site
we're going to use to build our website
there's a number of options you can fill
in here but we're going to do all that
ourselves later so all we need to do is
click on skip and continue
we're going to scroll to the bottom
we're going to choose continue
it's going to ask us a couple of
questions
so let's go ahead and fill in the boxes
we'll put yoda
yoda at web yoda.com
i am
we'll tell them we're intermediate
and we're building
our website
and i don't really want their newsletter
right now
scroll down
submit and build my website
now it's installing our starter site
and remember earlier we didn't install
elementor ourselves that's because it's
going to install it here so there's
really no reason i add that extra step
this process doesn't take very long i
speeded up just a little bit right here
so that we didn't have to wait as long
congratulations installation complete
took 33 seconds they give you an option
to view your website here but we already
have a tab to do that
and if we go to our second tab and hit
reload
look at there we've got a fully
functioning website with a shopping cart
already built into it how nice is that
so that's for free from astra themes and
you could basically build any website
they have in that collection either the
free version of the premium versions and
start with a website that's already
completed i love it
but in our case we're going to take this
website which is pretty cool as it is
and build bethany's website which is i
think even cooler
so let's go back to our wordpress admin
let me go ahead and close this little
window it takes up space and i don't
like it
now since we're going to be building
bethany's website first before we do any
of the shopping cart related things and
some people may not even choose to use
the shopping cart we're going to go
ahead and disable the woocommerce
shopping cart for now and then we can
reactivate it later when we're ready
so the first step to do that is we're
going to go to plugins
scroll down
and we'll just deactivate woocommerce
next
we want to remove the shop button
in this case on our website it's right
there
to do that we're going to go to
appearance
menus
and now we need to choose the menu we're
going to look at
so we're going to pull down that menu
there and choose
primary menu
hit select
and now we're looking at the primary
menu
inside of the one that says shop
i can remove that for now
and now at the bottom may have to scroll
down to get to it
save menu
and now we go back and reload our site
there's no longer a shopping cart in
there for now
so we'll go back to our wordpress admin
and at this point i wanted to discuss
the things that can go wrong
murphy's law states that when things can
go wrong they will go wrong and you will
experience this yourself it's in my
experience plenty of times while
building websites that random
unexplained things can go wrong
for example once i wanted to update my
theme and the theme button would not
work
another time i clicked on my widgets
page and instead of seeing these widgets
the page came up empty like this
another time on my shopping cart where
there should be stars under the review
there were just a bunch of esses instead
another time inside of my customized
options only a portion of the options
were showing up instead of all the
options i expected to see
so i know right now you're saying
yourself hey yoda what am i going to do
about these things what happens when
they go wrong
i will tell you
in most cases the problems can resolve
with a simple keystroke
if you're inside the page that you want
to fix for example let's say it was this
page i can hold down the control key and
the shift key and then i can hit the
reload button at the top left and in
most cases that'll solve the problem and
you'll see the corrected version
alternatively you might also try
clearing the cache inside of your
browser you may try restarting your
browser
or you might also try viewing your
website in incognito mode to see what
the rest of the world sees
and at this point if you're still having
problems just leave a message under the
video and we can work on your problem
together
now as a last resort you can always
restore your website from a backup when
things really go wrong unfortunately if
you don't have a reliable backup
solution in place when something goes
wrong with your website you stand to
lose everything i personally use backup
buddy which has saved me many times over
the years either way you want to
consider a backup solution that meets
your needs
if you're looking to make scheduled
automated backups of your wordpress
website where you're in full control as
well as make manual backups at any time
that you can store locally on your own
computer then you'll want to check out
my wordpress backup and restore video at
some point
now in my case i also installed the
backup buddy plugin in bethany's new
website and periodically as we go along
i'll save where i'm at in case something
goes wrong i can always restore to where
i'm at
so at this point i'm going to scroll
down
i'm going to choose backup buddy
i'm going to choose complete backup
watch it do its thing which really
doesn't take that long
and when the backup's complete i scroll
up
and i choose
download the backup file and this
downloads a complete copy of the entire
website and the database in case
something goes wrong
and now we're ready to make some
adjustments to the header section of
bethany's new website
if you look at the real-time one there's
a logo to the left and a menu to the
right
on ours the logo is above let's go ahead
and get started in making some of these
changes so go back to our wordpress
admin we'll go to appearance
customize
header builder
and notice down here it shows us the
orientation of the stuff that's up here
so for example
i can move this one over here
and it shows that logo over there
i can move this one over here
and it shows the menu over there
now we're going to choose the site
identity and logo button
and we're going to change our logos
so we'll click on change logo
i wanted to point out an interesting
quirk about the media library sometimes
when you load the media library it'll be
in this mode which is upload file mode
however sometimes when you load your
media library it'll come up in media
library mode where you see the pictures
and you see how it could be confusing if
i bring up a screen that looks like this
but yet you go into yours and it looks
like this it could be confusing
so just keep in mind that if you see
this but you expect to see all the
pictures all you have to do is click on
media library to bring up the picture
version
so let's go back to the upload files now
i can select files here
but the much easier way to do that is to
bring up that folder we have that has
all of our content in it
but we can drag stuff from the content
folder directly into here
so i'm going to scroll down and look for
my logo
and there's my menu logo
i can drag that over
i can choose select
we're going to skip cropping
and we'll scroll down
we'll change the next image
now it's in our library
so i'll choose it again
choose image
scroll down
and what width do i want it
in this little icon here says on a
regular computer screen
and i want the width on a regular
computer screen to be 230
see how that made it the correct size
there now if i click that icon
now it's in tablet mode
and in tablet mode i want it to be
that size
and also
i can move this to the left
this to the right
we click that icon again
it shows us phone mode
i want to go ahead and make that 180.
we want to make sure both of these
settings are turned off which they are
by default
and now we want to upload what's called
the favicon icon and that's a little
icon like right here where you see the
web yoda one on bethany's you see the
self-tastic one and on these two tabs it
shows the wordpress
default so we'll choose select site icon
you want these images to be a minimum of
512x512
we'll go back to our library
and here's our logo for the favicon
i use the ping format for most files
it's a very versatile format
so i'll drag that over
i'll hit select
choose crop image
and now you see it showed up down here
and when we refresh this page it'll also
show up so we'll hit publish
now we're not seeing it here just yet
but if we come over here and we hit
reload
i held down shift and control when i did
that to make sure i got a better reload
and now it shows the new icon
the logo is to the left the menus to the
right we're making progress
now notice this doesn't have our logo
yet
and that's because this is a transparent
menu bar so we're going to go ahead and
go back and change the logo in a couple
of other places the logos we've done so
far will make sure the logo shows up
correctly in your shopping cart in case
you're putting a shopping cart on your
website so if we scroll to the top we
can hit customize transparent header and
now we scroll down and we're going to
change these two images
so that logo is right there
choose image
again
or change image
use that one
hit the choose image button
we scroll down
now we're looking at the phone version
still if i click that
it displays the computer format again
i want to make that 230 for the computer
as before and then for the tablet
i'll make it 200
and for the mobile
again 180.
let's choose publish
go back to our new website hit reload
and now we have a nice logo here but
you're saying to yourself but you don't
have a logo what do i do i will tell you
if you're looking to make a professional
logo for your website online at no cost
to you in about five minutes time then
you'll want to check out my make a free
logo video at some point
the next thing we want to do is to be
able to change this font
this font may be fine for you and you
don't need to change it but i want a
different font for our menu so we'll go
back into our wordpress admin
i'll choose x
and just for consistency i'm going to
show you how to get to these things each
time from the top menu so we're going to
go back to appearance
customize
header builder
choose the primary menu button
choose the design button
scroll down
and here's the menu font option
they really hide this stuff don't they
so i'll click on the pencil
and i want the family to be
open sans condensed
i'm going to choose 24.
choose publish
come back over here
reload
and i like that a lot better
now i want to look at how to set base
colors for your entire website
so we're going to close that out
again for consistency we'll start at the
dashboard we'll go to appearance
customize
global
colors
and now here's your colors for your
website the only one i'm going to set
right now just so you see how it works
so i'm going to choose this
and i want to scroll and i'm going to
put my background color in there and
you're like well where did i get that
color from i came over to our script
i'll scroll to the top and these are all
the colors that we had predefined me and
bethany sat down and figured out the
colors we wanted you'll want to go in
and decide the colors you want and then
when you save them in a file you can
always get back to the ones you need for
the different things you need to use
them for so in my case the background
color was this light blue and that's
where that number came from right there
we came back over here
i can hit publish
and you could set all your default
colors for your website within here the
what's there is going to work fine for
what we're trying to do for right now
and one of the last steps that we want
to do that have to do with kind of the
setup of things
is when you come to the website and
let's say we clicked on testimonials
notice how it says the word testimonials
here now the page name you assigned to a
webpage is called the slug name so in
this case the slug name for the
testimonials page is testimonials to
make wordpress use the slug name as the
page name requires a specific setting in
wordpress and let me show you what i
mean if i come back in here
and you go to settings
and then you go to permalinks
this defines the different ways that
your urls for the pages can show up by
choosing post name as the permalink
setting you are telling wordpress to use
the slug name as the page name at the
end of your url
and so if you're following along and you
built your website with a different
theme or something like that yours may
not have the permalink set the same way
we want to set them typically post name
is liked better by search engine so we
like to use that
now scroll down
hit save changes
and now if we go back to the website
we're working on and we click the home
button
we're going to start
making this page look like this page
so let's go back to our wordpress admin
and we're going to choose pages
and that brings up the pages that are in
our website and then down where the home
page is
out to the right when you're hovering
over it you can choose edit with
elementor
and that loads our home page up into the
elementor editor now the elementor page
builder is the most popular page builder
on the planet and you're going to find
out real quickly why that is it's just
really easy to use super user friendly
it's fast reliable all those fun things
now before we get started making changes
to our page i wanted to give you a
little bit of background on how this
works
at the very top you see these icons and
this is the section edit icon
this allows you to control the section
which in this case is this whole area
here
whereas this section is that section
there
and that's a different type of a section
we'll talk about that notice how it's
got a little border on here if you click
on that that's called an intersection
see right there
and keep going down and we click on here
that's a section in itself so each one
of these it's basically a row
is what a section is
now inside of a row can be columns and
this little icon here
defines the column so as we scroll down
this particular one here has more than
one column in it notice there and there
and this one here has a column here a
column here and a column here
so you see that's the section
we click on that it shows a section in
this case it's called an intersection
i'll tell you how that's different we'll
use that later
but it's still a section and inside a
section there's columns so a section is
a row and then the columns inside of it
there's a column marker so you edit the
column by clicking on those
and then inside of a column this is a
cell you can put different widgets so
that's a widget and see the little icon
that's how you edit the widgets
so when you scroll down to any area
here's the section that edits the
section
and then here's the column if i click on
that now i'm editing the column and then
inside of that look there's one two
three different
widgets if i click on that it's editing
that widget if i click on that it's
editing that widget if i click on that
it edits that widget
furthermore within each section within
each column
and within each widget
are three different ways that you can
edit so for example where it says are
happy clients if i select that
on the left i can change the content
so here's the content i can change the
style of that content and then i have
advanced settings for that content
and that's true for anything so when we
come to the top and we click on this
content up here
that is the section
at the top
here is the layout in this case the
style for that section and the advanced
settings for that section
and if i go to the column
here is the layout for that column
here's the style for that column and
here's the advanced for that column
and then inside of this if i click on a
widget
there's the content for the widget the
style for the widget and the advanced
for the widget so that's enough to get
us started and the first thing i want to
do is change the background from being
this cute girl to being the one that's
going to be on our website so we'll
choose the section at the top
and then we're going to choose between
layout style and advanced we're going to
choose style
and here's the image that we're going to
change
so if we click on that
i need to put the new image i'm going to
use here so we'll bring up our content
folder
and now i'm looking for the cover image
and it's that one right there cover home
i'll drag that over
and then i'll choose insert media and
now it has that image
we can hit update at the bottom
go back to our website hit reload
and it's that easy
pretty neat huh
so let's go back to elementor and one of
the things you might ask yourself is
well where did i get this image
i will tell you
if you're looking to access the best
royalty free photos and images online at
no cost to you then you'll want to check
out my best free stock photos and images
video at some point or you can simply
click on the link at the top right and
visit it now
now as that promo mentioned you can
basically get almost everything you need
for free online and that's how almost
all the art within this website was
collected was to get free images online
so if you're wondering well why didn't
we just use a free bethany picture well
she decided she didn't want to be the
clickbait on everything so as a
compromise i picked a different picture
as the main picture for the website
so now let's make some changes to our
website this text right here we're going
to use some of this stuff
i'll click on that widget like that
and on the left hand side it's already
defaulted to content and in this box i
want to put welcome to
and then we're going to set some style
for that
typography is basically the font and
stuff like that
so we'll click on that
we're going to set the font to open sans
condensed
we're going to choose a size of 23
and the weight which is how bold it is
will set to 100. that's what 900 looks
like
that's what 600 looks like and we're
just going to use 100
and now let's change this heading right
here so we'll choose that widget
and then on the left we'll choose
content and we'll type in that now i
really didn't want this all the way
across i kind of wanted it to be two
separate words so you're going to learn
a really neat little piece of code if
you do a less than
the letter b the letter r and a greater
than
that's literally the only html tag you
ever need to know
and that tells it to make a line break
and what it did was is it put self on
one line and tastic on the other
now we'll go into style
typography
and for the font i want to use lundrina
shadow so we'll choose that and we'll
set the size of that to 122.
look how cool that is
now i don't like the line spacing in
between that being so big so if you
scroll down here's the line height
let's set that to 100 that way they're
nice and close
and i want to set the margin to zero
and let's look at what margin is if we
scroll to the top inside of our advanced
we've got margin and we've got padding
well i want to set this margin from
being 20 i'm going to set it to 0
and notice that it took this space out
here as we go along we'll see some
differences i'll show you how margin and
padding are different right now it would
be difficult to tell
but both of those things give you
a certain amount of space around
whatever the item is but for now let's
just set that to zero and we'll discuss
margin and padding in depth later now
for the next line
now we want to change the text in this
widget i'll choose that one
be the best you
will go to style
typography
for this one i want it to be
open sands condensed
we'll make this 30.
we'll change the weight to 100
and we'll choose a line height
of 19
and that just kind of told us how much
space we want between this text and this
button right here
now i want to change this view more
button to a learn more button
i'll choose that widget
under content
where it says view more
i'll put learn more and over here for
the link
i'll put about
and now we can hit update
go back to the page we're working on
hit reload and wow look at that we're
making progress so let's go back
to our elementor and now i want to add
the intro video but to add the intro
video i first have to add it to the
media library and to add a video i have
to do it outside of elementor so i'm
going to choose this icon here
and then i'm going to choose exit to
dashboard
now i'm going to choose media
and that takes us to our media library
and this is the same one we're using
inside elementor it's just that some
things you can load here that you can't
load directly into elementor and now i'm
going to go to our content folder
and i'm looking for our intro video
and there it is
i'm going to take this
drag it to the left
now that that's loaded
i'm going to select it
so that i can get this link over here
and i will copy the url to the clipboard
and now i can close that
we'll go back to pages
we can go back to home edit with
elementor
and now we're going to select the
section at the top again
we're going to choose style
but instead of choosing it to be a
background which is just the classic one
we're going to choose this little video
choice
and here we can put in a link
so we'll paste our link in there
and look at there
our animation automatically worked
right out of the box
now it's playing over and over again
here's an option play once we'll turn
that on
so that way it'll only play once and
when it's done
what we see
is that there's no background
then we're like but it was there what
happened
well the reason is is now we need to
scroll down
and there's a section called background
fallback we want to click on that
and we'll choose the image we already
uploaded
like so
hit insert media and now it's there
we can hit update
and that allows it to have the image
that's going to be there after it loads
we'll go back to our page and hit reload
and watch the animation but also notice
this text is already on the page right
there
but on bethany's site
when you reload
it loads the intro
and then right after the intro finishes
that little menu slides in boom pretty
neat huh that's what we want to do
so we'll go back to elementor
and this is the column we want to set to
delay until after the intro video has
completed
and so what we're going to do is we're
going to choose that column
and now we'll go to advanced
and under advanced one of the options is
motion effects
and for the motion effect
we want to choose
fade in from the left
and then we're going to set the
animation to eight thousand
eight thousand milliseconds is eight
seconds
which is a little bit longer than our
animation is
so we go and click update
go back to our version of the website
hit reload
now the intro shows
and at the end of the intro
slides in the text really neat huh
but you're saying yourself yo that's a
pretty neat intro but i have no idea how
to make one i will tell you
if you're looking to make a free video
entry for your website online at no cost
to you then you'll want to check out my
make a free video intro video at some
point
now we'll go ahead and go back to our
elementor
and we're going to scroll down and we're
ready to work on this next section now
in this section i want to build a
category section
typically you'd use it if you had
services that you wanted to highlight or
feature in your website
this particular piece of code right here
i don't need it
so i can right click on that little icon
and choose delete
and now let's start working on our
category section first we'll delete this
widget right here and also i can right
click on that little icon and choose
delete now for this header right here
i'll select that icon and over here i'm
going to change that title to beat that
text and the color we're going to use if
we go to set style
we can choose a color
and i want to be that color
kind of a brownish color
now to get out of color mode you just
click the tab again so it kind of
toggles let open and close like that now
for typography
the family i'm going to use the site
pretty much we're going to use open sand
condense on a whole bunch of stuff
and the padding around this
so if we go to advanced
do padding again we'll talk more about
this a little bit later
right now see this icon
that's linked together that's linked
apart
if they're linked together and you add
one they all add together
and if they're linked apart if they're
not linked then you change them
individually
i want them linked together that's the
default
and i want to put 20 in there
and that puts space around that
particular item
again don't worry too much about the
difference between margin and padding
right now i'll discuss it a little bit
later we'll have a good example for it
now i'm also going to delete this widget
i don't need it
and now we're ready to add a widget we
haven't done that yet
to your elementor environment to add
widgets we have to get to the collection
of the widgets to get to the collection
of the widgets we choose this icon right
here
and these are the different widgets we
have at our disposal
notice some of these have locks on them
because we don't have access to those
the one we want is the one at the top
it's called intersection
basically it allows you to make a
section inside of a section so if you
hold down on that with your mouse you
can drag it over and see that little
blue line that's where it's going to
land at it's kind of tricky sometimes to
get it to land where you want it i want
it to land under the text
and now i have this new section
now in this first box
i want to put an image so we'll go back
to our collection of widgets
and here's the image widget
i can drag that over and again notice
i can choose where it's going to land by
moving it around and i want it in that
box right there
just like that and now i want to set
that image to be one of my categories
so on this side over here i can click on
that image
and they're not in here yet so let's go
to our content
and we're looking for categories
and we've got six categories i'm going
to select all six of those and i'm going
to drag them over
all at once to save me some time later
now they're all loaded if you click on
it that tells you which one you're going
to select and over here it tells you the
particular name of whichever one it is
so in my case that's my first category i
want so i select that and insert the
media
and now we've added an image to our
website pretty easy huh
now what i want to do is show you a
trick for reusing widgets so here this
widget here is a title widget if i click
on that
it says it's a heading
i'm going to right click on that and
tell it to duplicate
now i have a second copy
now if i move my mouse over the little
widget icon edit
i can hold down on it and drag it
wherever i want it and i want to drag it
under this picture like that
and then i want to change this text
so i have that one selected already
over here and change the title to say
personal development
i'll go to style
typography
in this case i'm going to change the
font
we're going to choose work sans
and i'm going to choose a size of 22
and now i want to make a copy of this
because i want to be able to reuse the
layout that i already have so just
follow me on this if i wanted to
duplicate this picture i could right
click here and duplicate but what i want
to do is duplicate the whole column
so i'm going to say right click
and duplicate now i want another copy so
i'm going to say right click and
duplicate now i've got three copies
and now on this fourth column i want to
get rid of it so i can right click on
that and choose delete
and now i have the three that i want
now at this point i can right click on
that intersection
and choose duplicate
and now i have six of those so you can
see quickly instead of having to build
everything from scratch
we have a lot of the stuff that we're
going to want to use already
and now we can customize these
one of the things that i don't like is
how much space is around here
so let's choose this one
i'll come over to advanced
and we're going to set this to zero
even though that worked for the top
title it didn't work down here
i'll set it to 0
and i'll disconnect these
and then i'm going to set the bottom one
to 20 by itself
now i need to fix all the other ones the
same way i did this on purpose because i
wanted you to see how to copy the style
so here we made a style change on this
one
so i can right click on this one
copy it
and when i right click instead of
pasting it to make a new copy
i'm going to paste the style and it just
fixes the style
and i can do that for each one of these
so you can see that's a neat way to be
able to make changes quickly to the
style without having to do all the work
over and over again
now i just need to change out the
pictures and the text to match
so to change this one
i choose that image i come over here
and i pick my second image
hit insert media
and then i'm going to
choose that text
change the heading over here
and now that one's changed and then i'm
going to do a little magic to get all
these a change real quick since you know
how to do that
and now they're all changed little fun
fact that's a picture of me and bethany
at one of our favorite resorts at our
wedding now if we click on update
and go back to our website and hit
reload
you don't have to wait for the intro to
load before you start scrolling down
just so you know
and there's our new section
now in bethany's
when you hit reload on it
notice that these things come out to the
sides like that and so we want to do
that next
so we'll go back to elementor
and now we're going to choose this
column icon
we'll go to advanced
motion
and we want to slide in from the right
to the left so for the animation
we're going to slide in
from the right
then we're going to put the delay hit
1000 milliseconds which is one second
now we'll right click on that column
copy
right click on this column
paste style and now that one's set it
didn't move but it did set it
so now we'll come over to this one
select it
advanced
motion effects
we're going to slide this one in
from the left
one thousand milliseconds which is equal
to one second
right click
copy
right click
paste style
now for this one we'll select it
advanced
motion effects
and then this one
we'll choose zoom in
again
one second
right click
copy
right click
paste style
now we can update
go back to our website
hit reload
and notice how those slide in but let me
do it again notice how this one is on
top
so they're stacked in a different order
than i want them basically we want this
one and this one to be on the top and
there's an easy way to do that so go
back to elementor
we already have this one selected
under advanced
for z axis
we put a number one the default zero
that'll make this one sit a little bit
higher
and we'll do the same thing here
advanced
z index of one
hit update
we'll come up here
hit reload
and they're coming in exactly the way we
want them now we're ready to work on our
next section so let's look at bethany's
site
and we scroll down
we're going to make this animation right
here and we'll also learn how to make
the background transparent for the
umbrella girl
so now let's go to our script and we're
in the inspiration section
and we're going to learn how to make the
girl transparent
so first we're going to go to unsplash
and we're going to do a search for
girl umbrella yellow and there she is
and we can download that if we want it
gets added to our collection in our
download folder
and you go to your download folder you
see the picture that's there now it's
going to be the whole thing the question
is how do you get just the girl part
cropped out
that's a really good question right
i will tell you
if you're looking to edit photos and
images online at no cost to you then
you'll want to check out my how to edit
photos online video at some point
so now let's go to our script
now we want to go to the photo scissors
this is a website that allows you to
crop a picture
and it says upload an image i'll show
you how easy it is
here's my images
there's the one we're interested in
click open
uploads the picture
notice that it cropped the girl out no
problem
you can take this and go like that
obviously i made a mirror image of this
but it gives you generally the idea of
what you're trying to do
and then you can choose download
download load resolution
the low resolution is fine for what you
want to do
and you can go back to your elementor
we scroll down
so now that we've successfully made our
umbrella girl have a transparent
background we're ready to start on our
inspirational section and then add her
to it
the first thing i'm going to do is going
to change this background
so we're going to click on this and it's
called an intersection this one right
here
see how there's an intersection is there
and the main section is there we want to
be on the intersection we want to be on
that section
there specifically
and then we'll go to style
and then we'll click on the picture
and now we need to upload a picture
and we want to go to our inspirational
pictures so here's our content and
scroll until we get there they are our
inspirational pictures
and there's the background i want
drag that over
hit insert
now
we want this to be center center for the
position it already is but check that to
make sure
instead of size cover
let's change it to contained
and now in this intersection there's two
columns a left and a right
if you grab the edge in between you can
slide it left and right and make it
change its size
and get it roughly to 40
on the left
and 50 or 60 on the right
you can also choose the column
and then specifically put it to 40
that's a little easier and the other one
by default will be the difference
now let's add the girl
we'll go
up here
to where we can pick from our widgets
we'll drag over
an image
and then we'll add our image
so we'll go back to our content folder
and there's our transparent girl that we
created drag that over
we hit insert
now her image has been added
so from here we're going to choose
advanced
i want to put some padding at the top so
let's say
200 that moves her down a little bit
and then we're going to go into the
motion effects
default
let's fader in from the left
and
let's
give it a thousand milliseconds or a one
second delay for bringing her in like
that
and let's let it come in a little more
slowly just because we can
ta-dah there we go
now we can just hit update just out of
curiosity it's nice to see our work
sometimes
come over here
we'll hit reload
and there she is
we're making progress
back to elementor we're going to choose
our section tab right here to edit the
section itself
and then we're going to go to style
and see that background's white
we're going to change it to
one of the darker cyan looking colors
and now
we're going to go to advanced
and change this from 0 to 35
and change that 100
to zero and bethany's you see this
little wave brush thing going on right
here we want to add that
so let's go ahead it turns out being at
the bottom of the section above so we
got to scroll up
choose that section
then go to style
and then we're looking for shape divider
we're going to add the shape divider at
the bottom
and the type of shape divider we're
going to use
is waves brush so we scroll down and you
see that's what it looks like
and there's lots of different ones you
can choose from
it's worth checking them all out to try
different stuff
in this case we're going to use the
waves brush
and then
we're going to set the color to that
same
blue
that's in the section down here see how
it matches now
and then we're going to set the height
to 60. there's a lot of extra space
right here
i want to come back up here we still
have that selected
we'll go to advanced
and we're going to change that from 200
to 100
so that brings it in some
and this itself will adjust itself out a
little bit to bring that down in a
second to make it look more correct
now over here
this particular header
this widget we're going to drag it below
the other one like that and then this
one we're not going to need so let's
delete that one
and then this button
obviously we can make a button but i
want to show you how you can recycle
stuff so i'm going to take this button
i'm going to bring it down here i'm
going to put it right there because we
can just use it there and make it work
for us and it saves us the trouble of
making one
come back up now let's work on this
first header here the bigger one
and let's make that say
be inspired and we'll go to style
we'll set the color to be white and
we'll close the color out we'll go into
typography
i'm going to choose a font of mozzarette
we'll make it 80
and make the thickness be 700
now the margin for our header
we go up here
we'll click on margin
and we disconnected those right there
it's going to be 29
and basically that just allows that to
sit a little bit lower
and so for this text
if we choose that widget
we'll change the text
to live your best life
good advice
click on style
color is white
close that
go into typography
font
laura
we'll make this one 40
and we'll make the weight 500.
and now below this we want to do an
image carousel
and so we need to go up here and choose
this icon that displays all of our
widgets
now the one we want is called an image
carousel but instead of scrolling down
looking for it we type the word image
it'll bring up all the ones that have
that in common
there's the image carousel
we can drag that over that puts it above
the words that puts it below the words
where we want it
i can choose that
now we need our inspirational pictures
so we'll bring up our content
these are our six inspirational images
drag those over
now they're loaded
we can just click
create a new gallery
and insert gallery
now it's got three of them there for now
we're going to tell this to be large
and we're going to sell it to put one
per slide
and we're going to say image stretch
equals yes
and that looks about right
now notice that it has these dots here
and it has these left right arrows
so you can have navigation built into
the carousel
i don't want that for this particular
carousel so under navigation
i'm going to tell it none and that gets
rid of the arrows on the dots
and then down here under additional
options
pause on hover that means if i put the
mouse over it it stops showing new
pictures
well that might be nice in some
situations but i want to continue to
show new pictures whether the mouse is
on it or not
so we're going to turn that off
our animation speed
let's set that to 4000
and
we'll change this from being a slider to
fading and that will fade in between the
different pictures like that
and now you see when we added this stuff
in there this wave sits exactly where we
needed it to sit which is really nice so
let's go ahead and hit
update we'll go back to our page
hit reload
and look at that
our inspired section is really working
well
so now we want to work on our call to
action section
these little sections that have like an
icon some text and a button they're
called call to action
let's go back over here
the first thing i want to do
this is an inner widget so we got to
drag it i want to bring it down to this
next section into the light blue section
and then this logo bar right here this
logo carousel i can right click and
delete that i no longer need that and
now we want to build out our call to
action section and the first thing we'll
do is put our little brush
divider here
but will it put at the top of this
section so you can see how you can do it
either way
so i have that section selected
i go to style
shape divider it's going to be on the
top this time
click there
waves brush
pick the same color as this color right
here
like that
close that out
set the height of it to 60
and we've got that part done
and so let's start to format this
i'm going to click on that column
and we're going to choose advanced
and where this says 0 25 0 25
i'm going to just change it to
0 20
0 20 just a little less space on that
don't waste so much space
then we're going to choose
this icon widget
and we're going to go to style
and i'm going to set the color
a little bit darker
and then for the header
we'll also go in
set the color to the same color
close that out and then typography
we will pick
montserret
we'll make it 32 tall
and a weight of 300
and then for the text section
we'll choose that widget
and i want to go into style
and i'm going to use a special kind of
alignment normally if you've got left
center right i'm going to use justified
and i'll square things off it looks a
little weird with this sample text when
we put real text in there it'll look a
little bit better
and then we'll go into typography
and a different font
railway i'll make this 21
and a way to 200
and then a color for this will be the
same color we used for the icon in the
header
so everything kind of matches
and i'm going to choose
right click on that icon and choose copy
right
paste style
right
okay style and on this header
right
copy
right click pay style
right click pay style
and for the text box
right click copy
right click pay style
right click pay style
now for our button
i'm going to choose the button
then go into style
and
i'm going to change the button color
to that
not much different
and then
when you move over the mouse we want it
to grow a little bit
so what we're going to do
is we're going to choose
the hover option
and then on hover
the animation
we just want it to grow
look at that
pow
now
right click
copy
right click
paste
right click paste
bring it over
bring it over
many ways you could have done that just
showing you a different way now we see
that there's content in these
but it needs to be changed obviously
so let's go ahead and change the icons
first
so i'll click on that icon
go to content choose here
and i can search i want to do a heart
icon
so we'll choose that one
and now for this one we'll choose that
icon you don't always have to click the
little box i tried it in the habit
because i know that works better
come back over here
come up over here
we'll look at comments
we'll pick that one
insert and then we'll choose the last
one
come back over here
question
i'll choose the first one
insert and now since you know how to
change the text on these i'll just use a
little magic to make those happen
okay that updated the text but i wanted
to do the buttons together because we
hadn't had as much practice with that so
we'll choose the first button
come over here on the left and this one
will be learn more and we'll point that
to our about page
the second one will say contact me
and we'll send them to our contact page
and the last one
we'll say tips here and we'll send it to
our paypal page
let's hit update
go back over
let's reload the page
scroll down
and it's looking a lot better
but let's add some animation to this
so we'll come back in here
choose column one
go to advanced
motion effects
fade from the left
take this one
advanced
motion fx
fade from the right
choose this one
advanced
motion
and we'll zoom that one in
just like that we'll hit update
and we'll reload
looks pretty good
all right so on bethany's site the next
one we're going to do is this words of
wisdom section
and ours does not look anything like
that right now
i'll come back over here
and to do the words of wisdom section
we're going to do a carousel and we're
going to go ahead and insert a new
section above this just so you can see
how to insert sections in between
i'll click right there
now i have a new section
and i'll click on the plus sign
i just need this to be one column
and i will choose that section
i'll go to style
and we're going to set the section color
to white
now i'm going to scroll to the top and
i'm going to right click on that header
and copy it just another way of showing
you how to recycle stuff
come back down here
right click
and paste it and now for the text
we'll change it to say
words of wisdom
and now we're going to go to our
collection of widgets
and we'll type the word image again to
find the carousel
we're using the carousel differently
this time
we'll click on here to add pictures to
our carousel we'll bring up our
content and we're looking for words of
wisdom
and there they are
so we'll select all those
drag them over all at once
we'll click on create a new gallery
we'll click insert gallery
for the image size we'll choose full
so we can see the whole word
slides to show
let's say five
we want to scroll one at a time
i don't want any navigation
now we'll look in the advanced section
again i don't want to stop the animation
if i hover over it
i only want about 500 milliseconds in
between
that's half a second
and i want to slow that down so it's
going to do it slower
that's nice just like that
we'll hit update
go back to our page hit reload
and we're making progress
so we're going to go back over to
elementor
and i don't really like the spacing here
let's come back into advanced for that
widget i'll put zeros in there
disconnect them
i want 70 from the top because we're
going to put a brush
wave thing here but i want these closer
now what's interesting is is that if i
do a margin
i can do a negative margin on that
and look how it brings it up
so we'll take that negative margin of
25.
for all practical purposes that's the
main difference between padding and
margining in most cases we will see some
other examples as well but with margin
you can bring things closer together
by using a negative number instead of a
positive number
so we want to put our brush divider
right here
we got to choose the section first
and then we'll click on the shape
divider
and it's going to go at the top
and it's going to be our waves
and our color is going to be that same
color
close the color we didn't pick the right
waves did we
waves brush
we'll change it to 60
and that's looking pretty good we can
hit update now since i know we're going
to want to reuse the words of wisdom
section i want to go ahead and save it
as a template now so we can use it later
so i'll go ahead and go up here
we can right click
choose save as template
we'll give it a name
choose save
now that we've saved our word of wisdom
section as a template we'll be able to
reuse that in any other page in our
website
so let's go ahead and close this window
come back over here
reload
and that's looking pretty good
now we'll look at bethany's website
again
the next section we're going to do is
this practical advice section again
we'll utilize a transparent image slider
so let's go ahead and go back to our
page
now the next section of the website is a
testimonial section bethany's website
does not need a testimonial section but
you might need one for your website
so one of the things you might consider
is to leave this the way it is
or you potentially could come up here
copy this button
come down here
paste the button
and then change this to say
more testimonials
and you could have a page of
testimonials and in fact the default
site also has a testimonials page so you
could point to that and repurpose it and
have a testimonials page for yourself
so since bethany's website doesn't need
testimonials i'm going to delete this
section
we're also not going to use a latest
product section here so i'm going to
delete that section
and then i'm going to click the plus
sign so i can make a new section in
between
and then we'll click the plus
we want this to have two columns
under layout instead of content with
boxed we're going to say full width
and then the left column
we're going to make it 55
which makes the one over there 45.
i'm going to choose that section it's
already chosen but
choose style
and we're going to add a background
so we'll click on the background
classic click there
now we need to get our correct image for
this so we'll go back to our content and
there's the practical advice beach we'll
drag that in
insert
media and now we have our beach scene in
there
the positioning we're going to use is
going to be top center
and the size is going to be
cover
i know you can't see anything yet but
it will reveal itself
now in the left box we're going to put
an image
let's drag an image in there like that
and then we're going to put the image
into the image widget
go to our content and then we want the q
a image this time
drag that over
insert media
and now for this left column
i'm going to go in advance
and we're going to set some padding
and we'll turn that to 90 on the top
and 40 on the bottom
and then we're going to copy the words
of wisdom
heading
and then we'll come back down here and
right click and paste it
that'll save us from some of the setup
for that
and we'll go into style
we'll set the color to black
and we're going to change the height of
that to 50
and then below that we're going to add
a widget
if we type the word test
brings up testimonial i'll put that
under it
it's kind of like an all-in-one widget
it has some text and a picture and stuff
like that in it
and for the image
we're going to put a profile picture for
bethany
and there is the practical advice
profile picture
we'll drag that over
insert
and for
the content
we're just going to put questions and
answers from quora
we'll put her pin name
of pepper low
and positioning
we'll choose top
and then we'll go back to the top and
look in style
under image
we'll set a size
of 115
for the image size
for the content style
we're going to go into typography
and we'll choose
droid arabic
24
and we'll set the color
to that
and for the name we'll go into
typography
and we'll pick
open sans condensed and we'll make it 30
and we'll set the color to that
make it a little easier to see on the
sand
and we'll go back
where it has title designer
we're not going to put that at all we'll
just take that out
now on the right hand side we're going
to choose that column
and we're going to tell the vertical
alignment
to be at the bottom
that way when the picture slides in
it'll be sliding in at the bottom and
then we're going into advanced
and even though these look like they
have no value at all
i'm going to open those up and make sure
they all say zero and now we're going to
add our image to the right column so we
come up here
choose our image widget
choose our image
go to our content folder
there's the transparent bethany
she's very transparent very genuine
great person
got that
size
pull
a line left
and if we go into style
we can set the width to 400.
that does not look right the default was
percentage
we wanted pixels
400
see it happens to me too murphy's law
i hate that guy
we'll go into advanced
motion
we're going to fade in from the right
we're going to fade in slowly from the
right
and we're gonna wait a thousand
milliseconds one second to do that
we can hit update
we'll come back to our page
we'll hit reload
look at that we got it working i don't
really like all this extra space here
so let's go back and fix that
and that's because the words of wisdom
had extra space when we made a copy from
the other
header
so we'll go into advanced
and we'll change this to zero
and that looks pretty good we can update
and then where it has the name here for
bethany inside of this widget
let's go ahead and make a link
to contact
we'll hit update
reload
and that looks much better
now we want to do the sign up
and that's pretty straightforward
we look at the one over here
we just basically change the text out
because everything else was okay for our
needs
so i'll come back over
here and we're going to change this text
out so we'll click on that
come over here
paste that in notice i had br tag to
allow this to break in the middle
and now i'm going to choose alignment
right i can make it look exactly like i
want it to look
now over here
if you click on this widget it shows
this shortcode form
this is not the way to do this there's a
better way to do this so we're going to
delete that widget
and you're like but it was fine it
worked well maybe but we want to do it
more correctly
if we type in this box wp forms
we come up with two choices this is the
one from the company itself wp forms
we'll drag that in the box
now over here
or over here we can select the form
so we'll go in here
we want to choose sign up form
and
now it looks the same but it's more
correct
now when we build our contact page it'll
also have a form like this and we'll be
able to set both of those to point to
your email address at the same time so
we won't worry about making that update
just yet
so we hit update
come up here
hit reload
and that's ready to go
and i forgot one last thing
this wasn't supposed to continue to say
words of wisdom it was supposed to say
practical advice
so i'll say update
and that'll be fixed
so now we're ready to build a footer for
our website and our footer will be the
same on every page
so let's go ahead and go back to
elementor
and now we're going to have to exit to
the dashboard so we'll click there
exit to dashboard
the first thing you want to do is remove
the footer that came with the website
then we're going to replace it with one
that's much better
so the first thing we're going to do is
click on
appearance
customize
footer builder
and then we're going to delete all the
fields that are here
now we'll hit publish
and we can exit out of that
now we're back at our dashboard
now under appearance we're going to go
to elementor header and footer builder
we're going to choose add new
intermediate
for myself
or just choose skip
the title is going to be website footer
the type
is going to be footer
choose
it makes sense to display on all pages
but really what we want is the entire
website so don't make that mistake all
pages doesn't include posts so anytime
you posted something to your blog it
wouldn't show up there
so you want to choose entire website and
that'll mean it'll show up on all pages
all posts everywhere
scroll down
user rules
all
will check that box to enable for
elementor
choose publish
now we'll edit with elementor
and now we're ready to build our footer
you're saying to yourself but you know i
just saw what the footer looked like why
should i have to do it all the way
you're correct i will show you we're
going to build it using a template
so we're going to click on our folder
we're going to choose this little icon
here
which imports a template
and now we're going to go to our content
folder
and at the bottom are a whole bunch of
templates
and one of those is the website footer
we'll drag that over
now we have a website footer
we can insert the footer
and it automatically loads it in exactly
what you needed to say
obviously you change this to be whatever
content you need whatever image you need
but it's already set up easy to use just
like that
now if you're going to have a shopping
cart
you might want to change this one over
here it says about
you could change it to shop
you could also have more but i didn't
really want more
and we put shop there
and now it'll go to the shop when we get
ready to do that
hit update
come back over here
hit reload
scroll to the bottom
we already have a footer it's just that
easy
so now our home page is totally complete
okay okay so it's not totally complete
what it's totally complete on is your
desktop what we need to do is to
optimize it for a mobile as well and
then you can apply that to tablet too
now to make other device adjustments
first of all we click down here on the
responsive mode
and then at that point you can choose
between the different views that you're
seeing
and we're just going to focus on the
mobile version and you can apply what
you learn here to all your other pages
in your tablet so we'll choose the
mobile device
and notice this wraps funny
so we'll choose that
we'll go into style
and for the size let's just set that to
100.
now that works
also the website intro videos aren't
typically compatible with mobile devices
so if you find that your video intro is
not working on a mobile device rest
assured it's not your fault
so let's scroll down
now i want to change the padding on this
a little bit
and if you go to the bottom of that
section
i can change it here as well
so we'll choose the section
and we'll go into advanced
and we'll set that to
40 20
40 20.
and then for this text
i want to make that just a tiny bit
bigger so i can select that text
go to style
typography
and we'll choose 26.
now when you scroll to the bottom of
this section
you notice how the wave is really tall
we don't want the waves to be that tall
on the mobile device so we're going to
change that this particular wave is at
the bottom of this section
so we'll choose that section
we'll go to style
shape divider we know it's at the bottom
and we'll go ahead and set that to 30.
now we scroll down
see that looks good
now while we're already in that mode
let's scroll down and do the other ones
so we'll choose that one
style
shape divider
30.
see if i missed any
yeah i missed that one
select that section
style
shape divider
height 30.
okay
now all this looks pretty good so we'll
leave that alone
however this isn't working out it's got
too much space up here
and she kind of takes the whole screen
so we'll choose the umbrella girl
and we'll go into advanced
we'll do 60 at the top
we'll unconnect that
we'll do 30 on the left
and we'll do 30 on the right
at the bottom we'll do zero
now we want to work on this piece to
bring it up a little bit and make it
smaller so the first thing we'll do is
work on the padding for that column so
we'll choose the column
choose advanced
now notice these have the little phone
next to it this means we're only editing
the phone version
i'll type 10.
we'll select the be inspired
go to style
typography we'll set the font to 40.
it's still wrapping so let's move it
down now it doesn't wrap
so now it's at 38. now that's a little
bit close at the top
so let's go ahead and go back into our
padding on that we'll disconnect these
and let's set the padding at the top to
say
30.
now we want to adjust this font
so we'll select that
we'll go to style
typography
and we'll set the size to 28
and now there's too much space below b
inspired so we'll choose that
we'll go to advanced
change this to zero
brings that up
and that looks real good now so we'll
scroll down
there's not enough spacing at the bottom
of that wave
so we can choose that column
and at the bottom
let's try 50.
there that looks better
now for the about me the spacing looks
okay but look how close that one is so
we're going to choose the icon
and we'll go to advanced
and then for the margin at the top we'll
put 60
and that looks good
same thing with this one we'll select
the icon
go to advanced
and set the top one
to 60.
now for the words of wisdom that's a
little small so i'll click on that
choose style
typography
let's try a size of 40. that worked out
good
now this section here
really doesn't work really well look at
the text how it fits in there funny and
it's a wrong color
and i wasn't able to find a way to make
this work well that made any sense but
it's a good chance to see another
feature
and that is we're going to select that
section
we'll go to advanced
and under responsive
we're going to hide that section on
mobile now you can hide a section you
can hide a column and you can hide a
widget so you have that flexibility in
this case we're just hiding the whole
section
now we'll scroll down this particular
piece of text here
let's go ahead and choose that
and let's center it
there's no way to center this any easy
way unfortunately
and that should do it now what you can
do is you can click this little tab
right here
and this gives you an idea of what it's
going to look like on a mobile device
so you scroll up and you see is there
anything else i want to change about
this
but it looks pretty good
so we can bring that back out choose
update
and the mobile updates to our home page
are now complete
so now our home page is totally complete
and we've accomplished a lot in a small
amount of time
so i'm going to go back to my elementor
i'm going to exit elementor
and now that i've personally
completed a substantial amount of work
i'm going to use my backup buddy
again if you have another method of
backing up it's a good time to do it
i'm going to choose create backup
i'm going to choose complete backup
let it do its thing
now the backup is complete
come back up
download the backup to my computer
that is complete and now i have the most
recent backup of everything that i've
done so far so if anything goes wrong i
can at least get back to where i am
right now
so now we're ready to start on our next
page so we'll go back to our dashboard
and we're ready to start on our about us
page
and let's go ahead and close this down
here
we're going to go to pages
we'll hover over about
and choose edit with elementor
now that our about page is loaded in
elementor let's go ahead and go back to
bethany's site and see what her about
page looks like
so i'll scroll to the top
click on about
and we're going to build this nice
header we're going to put some text in
that's going to wrap around a
picture and we're going to put that
background that has selftastic in it
let's go ahead and go back to elementor
the first thing we'll do is update the
background picture for the about section
so we'll choose that section
go to style
choose the image
now we need to bring up our content
folder
scroll to the top
and now we're looking for our header
images so we'll scroll down
and there they are and the one we want
at this point is going to be the about
header so we'll drag that over
now that's loaded we can insert media
notice there's some shading on this
image
we're going to do some shading ourselves
but it's only going to be enough to
shade the top so that the menu shows
through a little bit better and i'll
show you how that works
we're going to go to the background
overlay section
and these are the two colors that are
associated in here
we'll choose the first color
we'll set it to that
and i'll close that
and i'm going to start with a location
of zero which is the top edge up here
and then i'll go to the second color
paste that in
now if you're interested where am i
getting these particular colors from
i'm getting them from the about us
content in case you want to do the same
thing
then i can close that and notice how
it's light at the top and it goes dark
to the bottom
if i change this angle to 180 it turns
it upside down
now it's a little bit dark at the top
and light at the bottom and then for the
bottom location i'm just going to change
it to 24
because i only wanted to come down a
certain amount of space now if i click
on update
and we go back to our site and view it
scroll to the top
click on about
notice there's a little bit of shading
here it made our menu show up just a
tiny bit better and that's what we were
looking for so let's go back to
elementor and now let's work on the
header
so we'll select that we'll make the
align left
we'll go into style
let's set the color to white it already
is white but
just in case
we'll go into typography
we'll set the font
to laundrina shadow
size 90 and then we'll go into advanced
we'll open up our padding and let's set
this to to 150 that pushes that down
just nicely like that we can hit update
and now if we look at bethany's you'll
see there's a little bit of a shape
divider here
we're going to add that same effect
using that same cyan color we'll go back
to our elementor
let's go ahead and choose that section
and now we're going to scroll down
choose shape divider
and we're going to apply it to the
bottom
and we're going to select tilt opacity
and then we'll set the color
update
reload our page
and there it is
we're going up using this header on a
lot of pages so what i want to do next
is save this as a template so let's go
back to elementor
we'll right click
choose save as template
give the template a name
hit save
our template has been saved so now we
can close that window
and now we want to work on the next
section
so the first thing we'll do is choose
that section
go to style
we'll set the background color
and then we're going to set a background
overlay notice that there's something in
the background already
we'll choose background overlay
there's the current one
we'll choose that
bring up our content folder
now we need to find our logo background
overlay
so we'll scroll down to our logo section
and there it is
we'll drag it over
now it's loaded
insert media
we're going to choose ours to be
top left
and we'll leave it fixed
we'll leave it at no repeat
our size will be covered
and we'll set our opacity to 0.05 so we
can see it a little bit better
so now you can see that shows in the
background but it doesn't get in the way
of the text
now i want to adjust the padding for
this section
so we'll scroll back to the top go to
advanced
let's just make this
100 at the top
100 at the bottom
we're not going to use any of their
content but we do need one cell
i'm just going to take this one and
delete that column
and i'm going to scroll down
and i'll delete this section
and i'll delete this section
and now we're left with the one section
we need
and then i will delete that widget
and i'll delete that widget
and i'll delete that widget
and i'll delete
that intersection
so now basically we have
a header a heading
and we have a text editor now
alternatively you could come over here
and you could have dragged a heading
over and you could drag the text editor
over it as well
so we'll select the heading
and we want that to say about me
and we want to go to
style
we're going to set the typography
the font will be
montserrat 32
a weight of 300
now we actually have two of these we
only need one i'll delete that one
we're going to edit the other text
editor so i select that
we'll come back in here to style
we'll choose a color of that
typography
we'll set the font to railway
size to 21
weight to 400
now we'll go back to content
and i'll paste in the correct content
and now we want an image over here to
the right and to do that we're going to
click on add media
and now we need to get the item that
we're going to be adding so let's go to
our content folder
scroll to the top and there is the about
picture we'll drag that over
it's loaded
insert into post
and it's at the bottom
but we don't want that there
so let me click on that and delete it
and i'll show you what i really wanted
to do
i wanted to scroll to the top
select right there so i can set it in
there
choose add media
select the image
insert
now it's inserted at the top
we need a few more adjustments here
so we'll select the image
this icon here will align it to the
right
so now all of a sudden the text wraps
around it nicely
we'll click the pencil
for the size
i'm going to choose full size
if you wanted to add a link you could
add it there
we'll do update
and it wraps nicely
let's hit update
go back to our page
hit reload
and we're making progress
now on bethany's page
she's got the words of wisdom section
so let's go back to our elementor
we'll scroll down
we'll choose the folder icon
we'll choose the words of wisdom section
click on insert
i always choose no on this question
now it's been inserted into our page
we can hit update
go back to our page
hit reload
and now we just need to add the black
waves brush above the footer we can go
back to elementor
so words of wisdom is already selected
we'll go to style
scroll down
shape divider
we're going to put it at the bottom
we're going to choose
waves brush
we'll set the color
we'll set the height
to 60
and notice this is overlaying funny
right here it's okay
advanced
we'll unconnect those
and let's see what 50 does
looks just right so we can hit on update
go back to our
page hit reload
and this page is complete
now inadvertently even though i told
this font to be railway somehow it got
saved as default
so we need to choose this widget
go to style
typography
and where it says default
we'll choose railway
and notice how it changed there
we'll do update
we'll go back to our page
and now see it's the old font here
we hit reload
that's the correct font
then we go back to elementor
and we can exit elementor
and go back to our dashboard
so let's go ahead and go back to pages
and now that we've made the about page i
want to make some duplicates of that
page so that i can use them later so i'm
going to go over and hover over about
choose duplicate
now here's our duplicate i'm going to
choose quick edit
the title for this page will be gallery
the slug name will also be gallery
status
published
hit update
now we'll make another duplicate for our
blog page
again we'll hover over the duplicate
choose quick edit this one will be
called blog
slug name blog
published
hit update
and we're going to make one more copy
and we're gonna make a services page
even though bethany's site doesn't need
a services page yours might so we're
gonna make a services page for you in
case you need one
so we'll go to duplicate this
and again hover over that
so we can choose quick edit
title equal services
slug name equal services
status is published
hit update
and that should be all the duplicate
pages we'll need for a while
and now if we go back to bethany's site
scroll to the top
you can see these are the different
items she has we want to go ahead and
make our menu match hers
so let's go back to our
dashboard we're going to choose
appearance
we're going to choose menus
make sure we're pointing at the primary
menu still
and this is what our menu looks like
right now
we're not going to need a testimonial
for her site but if you need one you'll
leave it
so i'm going to take that one out
also you can decide whether or not to
leave a home button
on many websites these days the logo
itself is clickable so you don't really
need a home button so it's kind of up to
you whether you want one or not
i'm going to leave ours there for now
now for bethany's website it needs a
blog it needs a gallery
you might add services if you're going
to add the services page that we're
going to create
we'll choose add to menu
and now you can drag these around to
organize them so i want
the gallery to be here
and i want the blog to be here
scroll down
save changes
change is saved and now we're going to
quickly build a services page
in case you need one for your website
so we're going to go to pages
i'm going to scroll down
hover over services
edit with elementor
and there's our copy of our about page
and what we're going to do
is delete every single widget here
and then we're going to choose the
folder
and then we're going to import a
template
we'll go back to our content folder
scroll down to the templates here's our
services page
drag that over
and here's our complete services page
we'll choose insert
i'll always choose no
and look at there you have a complete
services page you can make updates and
changes to that yourself
we'll hit update
your services page is complete
we'll exit to the dashboard
and now we're ready to work on our
gallery page so let's go back to pages
we'll hover over gallery
choose edit with elementor
see how nice it is to start with a page
that already has a lot done for us
so we'll go ahead and change that text
to gallery
let's change our background have a
different background for the gallery
select that section so we can change the
background image we'll go to style
click on that
now we need to load the correct header
so let's go to our content folder
scroll down to headers
and there's the gallery header
drag that over
choose insert media
our header is complete
now we want to work on the next section
and we're going to go ahead and delete
this header
and delete that text editor
and the first thing i'm going to do is
show you the free gallery
so we'll come up here
choose
type in gallery
and there's the basic gallery
drag that in now we want to add pictures
to the gallery
we need to go back to our content folder
and here's our gallery pictures
we'll choose that one
hold down shift
and choose that one so they're all
selected
we'll drag them all over at once
and let them all load at same time
they're all loaded and by default
they're all selected so we can create
new gallery
you can reorganize these if you wanted
to
and then we'll choose insert gallery
and there's our gallery
we'll scroll down
we'll set our image size to medium
columns four
let's hit update
let's go back to our page
scroll to the top
let's see what that looks like
we need to hit reload because our menu
is not there yet our new menu
there's our new menu
choose gallery
and there's our gallery
so we can see this is a nice looking
gallery
and not bad
it's also a light box gallery
so we click on that
but it's just not as fancy as the one
that bethany has if we go to her gallery
see how nicely those load in like that
now at our gallery if we made all these
pictures the same size it would make it
look a lot better than it does and
that's basically as good as you're gonna
be able to do for a free plugin at this
point but in my case i'm gonna wanna go
ahead and go back to elementor
and i'm gonna upgrade to elementor pro
so you can see how to use the pro
version of the gallery
now that upgrade is complete
i'm going to delete the current gallery
i'm going to come over here type in
gallery
and we want this one
it's just called gallery but it ought to
be called super fancy gallery
choose that
we want to pick our pictures
they're already loaded from before so
we'll just select them all
create gallery
again you could switch these around
however you want to organize them
insert gallery
and now see it automatically made things
fit nice together like a puzzle but
we're going to scroll down
and the layout type we're going to do is
masonry
look at that
and we'll use four columns that's the
default
we can choose update
now let's go review our page again
we'll hit reload
and i just like that a lot better
obviously it's up to you but for me
between that and the other things i can
do with elementor pro it was worth it
for me
if you decide you want to get the pro
version of elementor at the best
possible price just go to webuta.com
front slash elementor and choose the
elementor pro button
so our gallery page is complete
so we can go ahead and exit to the
dashboard
to blog or not to blog that is the
question at this point
there's many reasons to have a really
good blog on your website and there's
people who just don't need a blog
if your website doesn't need a blog you
can remove the blog button from your
menu bar and go ahead and proceed to the
contact us section
for the rest of us we're going to go
ahead and create a blog
so the first step in adding a blog to
your website is to create a header for
all of your blog posts as well as a
header for your blog page that contains
all your posts
so let's go ahead and go to appearance
and then we'll go to elementor header
footer
first we'll create a header for your
blog page the page that contains a list
of all your posts
so the title will be blog page header
template type will be a header
and where do we want it to display
we want it to display on our blog post
page
user roles
all
we'll enable this for elementor
we'll publish
choose edit with elementor
i'm providing a template for both the
blog page header and the blog post
header
so let's go ahead and click on the
folder
we're going to choose the upload arrow
bring up our content folder
scroll down to the templates
and there's our blog page header
i'll drag that over
and there's our blog page header
we'll go ahead and insert
i'll always choose no
and there's our blog page header
obviously you'd change this out to be
whatever you needed it to be
we'll choose update
exit elementor
now we want to create our blog post
header
so we'll choose add new
we'll set the title to blog post header
template type
header
display on
all posts
user rules all
enable for elementor
choose publish
edit with elementor
now we're in elementor
we'll choose the folder
we're going to choose the upload arrow
again go back to our content folder
now we're going to choose the blog post
header which is this one drag that over
and there's our blog post header
go ahead and insert that
always choose no
again make whatever changes you want
here
we'll choose update
exit elementor
and now your header for your blog page
in your blog post is complete
so the next step to adding a blog to our
website is to remove any old posts
so let's go ahead and choose posts on
the left
so now we can select all the posts in
this case one
bulk actions move to trash
apply
and that's all gone
now we're ready to add our first post
so we're going to choose add new
let's visit the script for a second i
want to point out how helpful it is to
have all the information you're going to
need to do your post obviously you're
not likely to just make these up as you
go along so i collected all the
information for the different posts
we're going to do to make this easier
so for example the title of the first
post will be this
so we'll set the title to that
and now for the content
paste that in
and notice at the top
this is already bold because in the
google doc i did it was already bold so
it allowed me to import some of the
formatting as well
blog posts are organized into categories
so over here we want to add a category
in this case this particular post is a
life lessons
so i'll add life lessons
hit enter
and it automatically checked it
now if you don't give it a category
it'll automatically use uncategorized
next we'll add tags for this particular
post
i'll hit add
and these are basically like keywords
that are associated with the post i also
want to point out if you need to make
changes or adjustments to your
categories or tags
under posts categories and tags allow
you to make those updates and changes
scroll down
now we want to add a featured image
i'm going to choose
set featured image
we want to bring up our content folder
again
and the images for blog will be near the
top
so there's our first blog and there's
our six we're gonna have six in this
example
drag those over
and our first blog is the puppy
set featured image
now i normally make my blog images about
800 pixels across just as a reference
now we can scroll up
and choose publish
now if i want to see this post just as
an example i can right click on this
link
and open in a new tab
and we can look at that tab
and there's that header we made
and this is the post
just like that
not bad huh
let's go ahead and close that
now we're going to add one more post
together so i'll click add new
and then the other four
will use some magic to make those since
it's all the same process
so the second blog post the title is
that
the content for the post
is that
this one's going to have multiple
categories
so we'll choose the life lessons
we'll add a new one
hit enter
this will also have mental health
personal development
and we'll scroll down
we'll put some tags in
that are terms associated with the
document scroll to the bottom
set our featured image
and there's our blog 2 image
that one is now set
scroll to the top
now if you didn't want to publish
immediately you could go inside and
choose a date that you'd publish
something
i'm going to publish this immediately
now we can right click on that
open a new tab
check it out
and there's our second post
notice it automatically added the share
post plugin so other people can share
your blog posts
we'll close that
i'm going to go ahead and add the
additional post at magic speed
okay and so now all six posts have been
added
and let's go ahead and look at this
particular post
right click
open a new tab
i'll bring that up
this particular one bethany wrote about
people that wanted to make money using
blogs and so if you have an interest in
doing that this may give you some more
information as well
we want to make a couple of changes to
this to make this more user friendly
first of all notice it says buy yoda
user
instead of buy pepper low
and if we click on that has picture of
me we don't want that well she doesn't
want that
so we'll back up
how do we fix this
we'll go back to our wordpress admin
so the two things we'll change are the
profile picture and the pin name the
first thing we'll change is the profile
picture and we're going to do that
inside of profile press
and i go to plugins and then i scroll
down
to profile press
and i choose settings
i'm going to choose profile and cover
photo
now i'm going to scroll down
where it says disable gravatar we're
going to choose to disable that
now we want to choose an image
at this point we want to upload a
profile picture for bethany for her blog
bring up our content folder
there's our profile picture for the blog
drag that over
select
save changes
next to change the pin name
we're going to go to users
i'll click on the username
we'll scroll down
and for nickname we'll change it to
pepperlow
and for the display name we'll choose
pepperlow
and there's also a section to do bioinfo
let's put a little bio in there
choose update profile
profile is updated now if we go back to
our post
and scroll down
where it says yo to user if we reload
it'll now have bethany's pen name pepper
low if we click on pepper low
it now says pepperlow has her picture
and it has her bio pretty nice right
now if we back up
we're looking at a post now one of the
problems with this post is that there's
no way to really get anywhere else other
than the post itself
so a really convenient thing to have is
a sidebar over here that has a lot of
controls that you can use within your
blog
so let's go ahead and add the sidebar
so we're gonna go back to our
wordpress we're going to go to
appearance
customize
we'll choose sidebar
under blog post
we'll choose right sidebar
we'll hit publish
and then we can close out of that
now we want to customize our sidebar
to do that we're going to go to
appearance
widgets
now the sidebar that's going to be the
one that's on your blog post is called
the main sidebar and for whatever reason
there's a lot of stuff in here i may or
may not want
the defaults for these are never exactly
the same so what we want to do is we
want to clean this up
now if we go to the script file
this is basically what i want to get i
want to have a search box i want to see
recent post i want to see recent
comments archives categories meta and a
tag cloud and we'll talk about those but
basically we're trying to get to that
and we're currently seeing this
so the first thing that we can do is
delete all of these that just say block
on them
i think as much as anything they're just
duplicates
and now we have
the list
that looks like this one
except that there's one extra one that i
want to add to this
now on the left hand side are all the
widgets you could add to your sidebar
and you could probably find other
plugins to add additional stuff
if i scroll down the one i'm interested
in is called tag cloud
if i click on that i can choose where i
want it to be
it's got by default it's chosen the main
sidebar
i'll choose add widget and when i scroll
up
now tag cloud has been added to the
collectional widgets on the main sidebar
we're not going to give it a title it'll
automatically say tag cloud
also you can organize these however you
want
that order right there matches what we
have on our list
again you could pick other ones if you
want to put stuff in there but these are
basically the general tool set you're
going to see on most blogs
and there is no save
on this page so basically it's already
saved
so now if we come back over to our post
and we hit reload
and now you can see the sidebar has been
added we have a search box we have
recent post
comments
archives
categories
meta options and a tag cloud
the next thing you might wonder is
okay here's the default but what kind of
control do i have over this and the
answer is really not much
the free version astro the free version
of elementor neither of those give you
any real tools for doing any updates and
changes to the formatting for the posts
themselves so unfortunately kind of
stuck with the excessive padding in the
default font and things like that
i know you're saying yourself hey there
must be a way to fix the spacing in the
fonts for free right
absolutely
i will show you
so what you want to do is go to your
script
and you're going to look for a section
under the blogs
it's called adjust blog post font and
spacing
and this is cascading style sheets css
don't worry about what it does just
worry that it doesn't what you want to
do is select the yellow text
copy to the clipboard
and now we're going to go back to our
wordpress admin
we're going to go to appearance
customize
and at the very bottom is additional css
we'll click on that we don't need this
little window so we can do close
and right here there's nothing in there
yet so we're just going to paste that in
at the top
and now we'll do publish
and then we'll come back over
and this is what our page looks like
right now this is what the fonts look
like this is what the spacing looks like
we hit reload look at that we have
better spacing now we have a different
font that doesn't take up so much room
it's a lot cleaner than it was before
and it was free
so at this point we want to be able to
access our blogs from a blog page if we
click on our blog page
actually let me clean this up real quick
we've got an extra tab here if we click
on our blog link
it takes us to our default about page
remember we made a duplicate of that
we'd like that to come up with our blog
so let's go do that
so we're going to go back to our
wordpress admin
we'll close that to get to our dashboard
we're going to go to pages
we'll hover over blog
choose edit with elementor
and from within here we're going to
delete the top section
and the delete that about me section and
leave words of wisdom
we'll choose update
and now we'll exit elementor
we'll choose appearance
customize
scroll down
home page settings
for post
we'll choose blog
we'll hit publish
and now we'll visit our website again
and hit reload
and look at there there's our header
and there are all our blog posts now
unfortunately no matter how much you
talk to yourself about hey yoda this
really doesn't have a lot of formatting
what can we do about it i don't have an
answer for that because unfortunately
there wasn't really an easy freeway that
i was able to do that there must be free
plugins out there that will allow you to
have more control over your blog layout
than this but i haven't been able to
locate them
however just for comparison if you have
access to elementor pro it's possible to
make this page look really professional
with very little work at all and that's
what we're going to do next so we'll go
back to our wordpress
and where we had post page and we set to
blog let's go ahead and set that back to
select
and we'll hit publish
now we're going to exit out of that to
our dashboard
so let's edit this page again with
elementor
now at the very top we're going to
insert a section
we'll choose our folder
we'll choose my templates now we want to
insert our blog page header so we'll
choose insert
always choose no
so at the very top we will not need this
intersection that has the logo and the
menu in it so we're going to go ahead
and close that one not the one at the
top but that one right there
so we close that now there's not a lot
of space there
let's choose the widget that has the
word blog in it we'll go to advanced
and where it says 200
let's put 300
now we want to add another section just
below our header
and in this box we'll hit the plus
we'll choose a single column
now we want to go up to our widgets
again
we'll type in the word posts
that's the one we want right there
make sure your icon matches that
drag that over
and there it is that's looking nice
now let's go ahead and change a couple
things on it first of all we'll set the
skin to cards that's really nice
now let's go ahead and do some
formatting on this so we're going to go
to style
we'll go into content
under title for typography
we'll set the font
open sands condensed we'll set the size
to 24.
we'll close that
next we'll do the excerpt
typography
font open sans condensed
we'll set the size of this to 21.
we'll close that
finally the read more
typography
font
open sans condensed
and we'll set this one to 16.
close that
now hit update
now go back to our blog
and hit reload
and look at that we have a really nice
looking blog now
now i understand it took elementor pro
to make it look that good but that
decision is going to need to be up to
you whether or not you feel it's worth
paying for elementor pro to be able to
get a nice fancy blog that looks like
this
now we're ready to work on our final
page of the website before we start on
the shopping cart and that's the contact
us page so let's go ahead and go back to
elementor
and now we'll exit out of elementor
back to our dashboard
to start on our contact us page we need
to go back to pages
now we want to go down and hover over
contact
choose edit with elementor
the first thing we'll do is delete their
header and add our own
so let's delete that
now we'll choose the plus sign to add a
section
we'll go to our folder
and remember we saved in our my
templates are about us header so go
ahead and insert that
always choose no
now
we'll choose the about and let's change
that to contact
now we want to change the background
image we have a special one for this
page
so we'll go to style
click on the image
now this is one of the situations i
talked about earlier it didn't come up
with the pictures this time like it had
before
i don't understand why
i want to bring up our content folder
now we're going back to our header
images they'll be near the top
and there's our header image for the
contact page
drag that over
choose insert
now we're ready to work on the next
section
let's go ahead and change the message us
we'll choose that
go into style
typography
we'll set the font to open sans
condensed
size 30.
close that
we also have a background that we're
going to use so we'll choose that
section
we'll go to style
click on the image
now we want to go back to our content
folder
scroll to the top
there's our background for the contact
now notice it's not going to matter that
the pictures aren't here
i can still drag that over and it works
fine
choose insert
now we're going to scroll down
we'll set the settings for this soon
that'll allow this to point to your
under contact us let's put some content
there
like that i'm going to make that a
little darker so i'll go into
the style for that
change the color
to that
close that out we'll go into typography
font
you guessed it open sans condensed
size 21
we'll put a weight of 400.
that looks nice we'll close that now we
want to put a profile image under this
so we'll go back to our widgets
let's drag an image right there
we'll select the image
go to our library
we'll scroll down
the image we want it's already in here
that one right there
insert media
scroll down
let's go ahead and style
we'll set the max width
to 75.
that's percent by the way we learned
that already
and now for follow us let's edit that
first we'll go into advanced
instead of 100 for the margin top we'll
put 70.
go into style
typography
font
open sans condensed
size
30.
that looks good let's close that at the
bottom is our social media
we'll choose that i'm going to go into
style
and set the size to 32 make it bigger
go back into content
these can be added subtracted organized
so for example i can take instagram and
drag it to the bottom like that
now you're going to set each one of
these so we'll go ahead and set hers
now to close these be sure you click on
the name because if you click on the x
over to the right you're going to
actually delete the item and that would
be bad now in bethany's case she doesn't
have a youtube so we're going to use
that one differently
so we'll recycle that one we click on it
we'll go to here
in the box we'll type medium
and there's medium
we'll insert that
now for the link we'll put her medium
link
you can close that back down
i think we'll put that one at the bottom
now let's do the facebook one
set the link to that close that now
we're ready for twitter
our twitter link is that
close that
let's put twitter at the top
open instagram
set the link
close it
and we're okay with that now
let's come back on this side and work on
it a little bit
we'll go ahead and choose this widget
we're going to come over to the left
hand side
we'll go ahead and set the address
like that
close that out
now i'll put the phone number
like that
change the hours
like that
obviously you could pick different ones
you can also move these around
you can add one right there
so let's go ahead and go to style
under text
we'll set the color
to that
close that
typography
change the font
open sands condensed
let's make that 21
and weight of 400.
now we want to work on our map so we can
select that widget
we can put our location
zoom at 15 is fine
but i think we want this a little bit
taller maybe come down to here somewhere
let's try 500
that looks good
we'll hit update
come back over to our page
we'll click on contact
and look there we already have a contact
us page it was that fast isn't that nice
but now we need to get the forms to
point to you in this case they're going
to point to bethany but you get the idea
so let's go back to elementor
now we're going to exit
elementor to the dashboard
now we want to edit our forms as well as
set the forms to point to the email we
want them to go to to do that we're
going to go into wp forms
and then i'm going to choose the contact
form that's the one we're going to edit
so i click on that
now this works very similar to elementor
that's why it's such a great product and
everything we're going to do with this
basically is free
so suppose you wanted to add a subject
line
on the left hand side
grab the single line text widget
drop it in just like that
now if we choose field options
and we select that field now we can edit
that field
and we can make it say subject now
suppose you want to go all the way
across
under advanced
set field size to large
and now it's all the way across
so now let's say you wanted to have a
phone field
come back over to add fields
and you look and you're like uh oh
there's no phone field oh wait here it
is and you click on the phone field
upgrade to pro
that's quite convenient everybody's
going to want a phone number yet we're
going to have to pay for it but you're
saying to yourself hey yoda there's
gotta be a way around this don't you
have a trick for this
absolutely
i will show you
so we'll close out that window
now instead of picking the phone field
let's go back up pick the single line
field
we'll drag it in let's say we want to
set it there
and then we'll go back to field options
we choose that field
set the label to phone
now we have a phone field
now let's say you want that field to be
required
you notice the ones with an asterisk
next to them those are the ones that are
required so for the phone field if we
turn this on right here
now it's required it has the asterisk
next to it
now we'll go into the advanced
and we'll set the width to large
now we have a phone field but what's the
difference well the main difference is
when somebody enters a phone number in
ours it's not validated to make sure it
really is a phone number now we want to
set where the email is going to go to so
on the left hand side if you go to
settings
and then you go to notifications
right here send email address
that is the email that is going to send
to by default it's going to be the one
that's in your admin and that might be
fine
but in our case the admin was mine but
we want these to go to bethany
so we'll put that in there
and we can set the subject line for the
emails so let's change that i'll change
it to say self-tastic comments
and then who do we want the from name to
be
we'll say from there
we can leave the rest alone
let's go ahead and click save
now i'll close that
and we'll go ahead and make the change
we need for the sign up page as well
so we'll click on sign up
we just want to go into settings
notifications
this will also go to bethany
or the subject line
join club self-tastic set our from name
everything else can stay the same
hit
save obviously we didn't do a lot in wp
forms only the stuff we really needed
but if you're interested in learning
more make sure you watch my video
if you're looking to learn more about
what wp forms can do for your website
then you'll want to check out my wp
forms for beginners video at some point
so hit close
and now we want to test this out to see
that we get email
so back to our website
we'll hit refresh just to make sure
we're looking at a fresh copy
and notice now it has the subject line
now this is going to go to bethany
so let's send it from me
subject line
test
hello world
hit send
and our message was sent successfully
good job
now
one of the things you might be
interested in
is you might have said to yourself
hey
what about some formatting here what can
we do
well again without getting the pro
version they really don't give us a lot
of tools
but you're like but yoda you always have
a piece of code for us so we can do it
without having to pay for it
i know you're right and okay i will show
you so what you want to do is you want
to go to your script and look under the
form section for a section called format
your forms so once again you'll
highlight the yellow code like that
copy it to your clipboard
now let's go back to our wordpress
and now from here we're going to go to
appearance
customize
scroll down
additional css
let's click on contact over here so we
can actually see this working
and that's what it looks like right now
down below this let's hit a couple extra
lines
paste that in
and look at that
it changed everything up just a little
bit
again i'm not going to try to teach you
css but you can look in here and see
that some of these things can be changed
and get a little bit more flexibility if
you like
we'll choose publish
go back to our page
that's what it looked like before
hit reload
that's what it looks like now
now officially our website's complete
but there's one more step that we don't
want to forget and that is to turn on
secure pages for our website
to do that we're going to go back to
wordpress
we'll exit to the dashboard
now we want to install the plugin that's
going to allow us to make our pages
secure
so we're going to go down to plugins
add new plugin
upload plugin
choose file
make sure we're looking at our downloads
folder
and now the one we're looking for
is really simple ssl
hit open
install now
activate plug-in
now for some reason you didn't have this
plug-in already
you just need to go to web yoda dot com
front slash
scroll down to this project
and then download the plugin you need
now once that's installed it immediately
says hey go ahead and activate but i
don't want to do that just yet i want to
do is we want to scroll down
find the plugin
and we're going to go to settings
tells us we're not connected yet we know
that but what we're really looking for
is this check mark it found an ssl
certificate detected for our website if
you don't see that message you need to
contact your hosting company to ask them
how to get your certificate activated
because without a certificate we can't
secure your web pages
since we have a certificate all i need
to do is click on go ahead to activate
now it's been activated once you've
activated your ssl and you weren't in
secure mode it's likely to want you to
log back in
so for example our next step is going to
click on elementor
and when i did that it asked me to log
back in
so i'll choose login
so our next step was we clicked on
elementor it brought up this page and it
has these options we're looking for the
option called tools
so we click on tools
and then we're going to click on replace
url
so in this box we're going to put our
original url when we didn't have secure
pages so i'll paste that in
and notice it just has http
then in the second box i'm going to
paste the same thing
but at the beginning i'll put an s right
there
basically going from non-secure pages to
secure pages and it's going to look
throughout the entire website and see
any places that finds this and replace
it with this
we'll hit replace
261 rows affected
that was a good thing
now if we go back to our page notice
it's not secure
we hit reload
now it has a little lock there and now
we're secure
so our website is officially complete
and if you don't plan on adding the
shopping cart to your website there's
one more thing you'll want to check out
at the end of this video i have a search
engine optimization section that will
teach you how to make your website liked
better by the search engines if you will
be adding the shopping cart to your
website simply choose the link above to
proceed to the woocommerce video then
jump ahead to the section for adding the
shopping cart so we've reached the end
of creating the website i hope you've
enjoyed taking the course i know i've
enjoyed being your guide and your
instructor
but as promised i had four really key
things that i wanted to add at the end
of this video that will help your
website show up in the search engines
better
the first tip is that inside of
wordpress there's a place that
specifically discourages search engines
from indexing your site once your
website's live you don't want it to be
discouraged from being indexed so let's
fix that
exit to the dashboard and then we're
going to look for settings
and under settings we're going to
reading
and this may or may not be set depending
on when and how yours was done and look
at that search engine visibility
discourage search engines from indexing
this site
i definitely want to turn that off
and hit save changes
tip number two there is an amazing
plugin out there called yoast
every website that ranks higher than
yours probably has yoast also free
so we're going to go to plugins
we're going to add a new plugin
and over here
type in yoast
5 million active installations tells you
something
so let's go ahead and install it
let's activate it
now you have the most powerful plug-in
for doing seo available
tip number three secure pages google
likes websites that have a lock google
likes websites that are mobile friendly
so if we can do both of those things
we're going to ensure that our website's
liked better
tip number four you want to make sure
the search engines think the value of
your website's stronger than any of your
competitions obviously having a lot of
great graphics and great content your
website makes a difference having a
really good look and feel like this
website makes a difference however one
of the number one things that improve
your search engine results is by having
other websites point to you if somebody
else's website has a link to you that's
called a backlink the more backlinks you
have the more important your website
seems to google the more backlinks the
people who point to you have the more
important they seem which also means the
more important you are now it seems like
a lot of work
but if you go to jose1.com these guys
will teach you everything you need to
know about backlinks that's basically
all they do and if you look at it jose
one seo literally is their middle name
so they know what they're doing now
under seo solutions
it shows you the basics the terminology
and the details they'll teach you
everything you need to know as far as
making your own backlinks how it works
how to make the system work for you and
if you decide you don't want to put the
time in to build them yourself you can
also contact them so if you decide to
use jose one services be sure to mention
the promo code web yoda and that'll save
you fifty percent off your first month
with a hundred percent guarantee on that
first month if you don't like it you get
your money back
now i truly hope i covered everything
you needed in this tutorial now if there
was something i didn't mention or you
had additional questions please leave
them below be more than happy to answer
them for you but if i don't know the
answer i'll go hey i don't know but if i
do know the answer i can find the answer
i'll give it to you and maybe we can
work on it together so i really enjoyed
doing this i hope you had a great time
as well the only real payment i'm
looking for if i could possibly get a
subscribe out of this possibly a like
out of this that'd be super helpful but
outside of that i just hope you have a
great day peace out
you