In today's video I'm going to share
with you how easy it is to create your
own landing page on your WordPress
website.
Are you ready? Let's go. Let's
take a real quick look at Jasmine's
landing page for her book release. At the
top you'll see she has a nice little
coming soon announcement and then she's
using a really neat feature which is a
countdown timer. I use these all the time.
I absolutely love them. The really cool
thing too is you can set them for a
certain day and time and once that day
and time arrives, your visitors will be
redirected to a new page. Let's say you
have an online course sales page and the
day and time that it ends, let's say
tomorrow at midnight, once that time
arrives your visitors and that
promo or that course is no longer
available; you can have visitors
redirected to a new landing page saying
"enrollment has closed" and maybe
offering them something else
instead. It's really really great. I
love it. As we scroll down she added
in the middle a nice little opt-in so
that she can send people the first 16
pages of her book before it releases. In
the center is a cute little quote and at
the bottom are some features. As you
can see there's nothing too complicated
here. it's very clean and very simple.
What I'm going to do is I'm going to
show you exactly how we created this. I'm
going to use our motivational coach
website. If you would love this website,
it's available for purchase on my
website and I can include a link for you
down below in the comments. I'm going to show you exactly
how to create a landing page on your
WordPress website. I have my
motivational coach website pulled up and
if you're interested in purchasing this
website I'll include a link below where
you can go ahead and grab it. Let's
do this: in order to get started we
make sure we're logged in to our
website and then we're going to go ahead
and click on +NEW > PAGE right from the top of
our WordPress site. The first
thing we're going to do is I'm just going
to go ahead and give this a title. I'm
going to call it landing page for
simplicity sake.
Over on the right-hand side there's a
few things you want to make sure we
disable. I've disabled the primary
header. This will get rid of the logo and
the navigation. Disabled the title, a
featured image, the footer bar. We just
want to get rid of everything and we
just want a clean empty page with
nothing on it so we're going to get rid of
all that stuff. Alright and that looks
good. I'm going to go back up and I'm
just going to publish it for now so
that you guys can see it. As you
know if you've been following me for a
while, I use a page builder called Beaver
Builder to create amazing pages on the
fly. What we're going to do is we're
going to use this nice little button
here, launch Beaver Builder, which will
take us to the front side of our website.
Here we go. If this is the first
time you're using Beaver Builder,
you can take a tour and
they'll show you around. We've used it
before, so we're going to say "no thanks." Now you'll notice the top everything is gone
from the top: there's no primary
navigation, there's no headers; it's just
a clean page. Now you do see this gray
area so we're going to get rid of that. I'll
have to go back and show you how to do
that. We are
using a theme, Astro theme, which has been customized.
This is a section that has been
added to the bottom, so we'll have to
turn that off as well. Just a couple
of things to turn off,  but that's not
really a big deal. Over on the
right-hand side, to get started, we are
going to drop a row in here. If we
look at our page, it has a nice little
coming soon at the top. What we're going to do is just do a one column row
and inside that we're going to
click on a the modules and we're going to
grab a heading. We'll drop a heading
in there and we're just going to type in
"coming soon."
We'll go ahead and style that up: we are
gonna make it centered. Very nice and
that's good. Now you'll notice that
we want this row. This is our row and
we want our row to go clear across the
page so we're going to make that full width.
The content can stay in the center.
Now there is a nice background she has
on that, so down where it says background we're going to pick color and we're going
to make that a pretty color. Our
options are for this website are this
pink and black color so I'm gonna make
that pink. The black is not looking
amazing so we're going to make our text
white. There we go. Now I'll click
SAVE. One thing I do want to do right
now is I'm going to go back to edit our
page. I'm going to click on EDIT PAGE
and then go back and I'm going to set
this page to full width. Over where it
says Astra settings, again Astra is the
name of the theme, and I'll leave a link
to that as well for you. There's no
sidebar, we have that turned off, but
right here it says content layout. We
want to use full width and stretched, that
will take up our whole page and there
won't be any colored background. Let's
make sure we have that and we'll update
it. We've got this countdown timer in the
middle so we're going to go to module and
we can just take our timer. You
can see here's a countdown; it
doesn't look like hers that's because
she has customized it. You can
customize it. The really cool thing
about this timer is you can do a fixed
timer. You can also do
evergreen so in the future if you
ever have something that you want
evergreen this is great for that too.
For now, we're doing fixed. We're going to do our time zone you just can pick one here.
Select your date and time. This is
when you want it to end. We're going to go
with we're just going to pick a date for
fun and then you can even do up to the
hour and the minutes. I will
just pick some minutes here.
There's our time and we can choose an
action for after the timer ends. We
can hide the timer, we can display a
message, or we can direct our user to a
new URL, or do nothing. Those are your
choices and the styling is fun. You
can choose how much space you want
between the timer; you can space between
the elements; we can change the digits; we
can make it circle square or a custom;
we can add a background color. You can
see there's a lot of things we can do
here. The border style, we can choose to
put our units inside the box, and we can
move them above or below. There's a
lot more here you can turn on if you
want to: we're going to turn off
years because there's no years; we're
going to turn off the months; we just
want the days, hours, minutes, and seconds
counting down. I'm going to
go back up because that looks a little
better. It was a little bit big. Okay,
that looks better. And then for our
typography, you can go in here and we can make that a different size.
That's our font. Our units we can
dial that back a little bit, we will make
those smaller. I think you have the idea
there so I'm going to move on now. Looking back at the coming soon page we see that
she has a book on the left and her text
on the right so real quick we're going to
drop in a row with two columns and we're going to add
on the left the book.
Now we need to upload the file okay
there's that. Then I'm going to put a
heading on the right. Her heading is
here, we can just copy that and paste it
in, and you'll see here that it's kind of
wrapping around so we'll want to change
that. Over here on our row we can
make this row go full width and then our
content we can actually make that go
full width and so we can move this
around. You can really customize it a lot.
We're going to move it back in I think that
looks good. Another little trick is
you can see how this is kind of above
this, we can center these columns so
that they're equal. To do this, we're going to
equalize our heights and we'll just
center. This will change once I add
the text. So I'll go back up and I'm going to drag my text editor over here and we're
going to copy this text and paste
it in there like that and hit SAVE.
That looks really nice and we can do a
little bit more here. That
looks really really good. You see this big
space right here between these two
things? I want to move this row up so I
just click on the row gear and I head
over here to ADVANCE and the PADDING, I can make that zero and that will move
that up a little bit.
That looks good and then same thing
you can do for this row. You can go here
and we can make that zero. We
don't want that at the top there so you
can see the spacing is a little bit
better. You see how we're starting to get
our landing page to take shape? One more thing I want to share with you before we
go is I want to show you that opt-in
right here in the center that's a really
neat feature. Let's go here and down here is what's
called a SUBSCRIPTION FORM, it makes it
super easy to add a subscription box to
your website. Here is our opt-in box, you
can choose your service. As you can see
here, you can choose from
Active Campaign, ConvertKit, MailerLite,
Mailchimp, Infusionsoft, Ontraport, there's Constant
Contact. There's tons of them to
choose from. You'll just need to create
an account name that's unique to your
company, the API key which you will find
at your email service provider, and then
you click CONNECT and they'll connect.
From there it's super easy to
customize this: you enter a heading, you
can add a subheading below your form
fields, your name, email provider, you can
add some more custom text below. Let's
say you want to have them check a box
for terms and conditions, you can show
that for GDPR.
There's all kinds of ways that you can customize this
additionally: there's the styling and the
button can be customized.
We'll click SAVE. You'll notice
on ours it's a lot smaller, so we just go
over the row and we'll just make that
row smaller like 900 and click SAVE.
You can also customize the column
so that you can add like a background
color behind this. Let's just go like
that for now.
Thank you so much for
joining me today! If you have any
questions please leave a comment below or send me an email. I would love to hear
from you! Take care guys. Bye!
