- Hey everyone, it's Waseem Bashir.
And in this video,
I'm going to show you some of the basics of how to use
Unbounce and how to build a landing page with an Unbounce.
Unbounce is one of my favorite tools
for building landing pages.
So I'll cover some of the basics in this video,
but I'll have more videos coming up
with more advanced topics.
Let's get started.
Great.
So now you've got Unbounce open
and you've logged into your account.
I've got a test account here, which I'm going to use.
So the first thing you will see here,
you will have your dashboard where you can see all your
pages and you can add popups, integrations, domains,
and other stuff.
I'm not going to go into that much detail
in this first video.
So in this video,
I'm going to talk about how to create
your first landing page.
In order to create a landing page,
you can click this button, create new.
On this page, you have quite a few options.
You can either select a pre-made template from Unbounce.
And there's quite a few templates here in my experience.
I've never actually used these templates,
but they could be a good starting point.
So I would usually start with a blank blank template,
and then I would put a name here.
Great, now you have your first landing page.
It's completely blank.
And you have the option to add stuff here.
So if you notice, if you ever use Photoshop,
there's a thing here called contents.
It's almost like layers in Photoshop where you can see
all the elements which you have on the page.
And on the right side,
you have properties for every element.
So if you don't have anything selected by default,
it will show you the properties of your page.
And let me try to add a text element.
So if I drag it over the canvas,
I can see I've got that selected
and now all the properties of the text elements show up
and I can here change or configure
the different properties of the text element.
Notice here, you will also have the mobile preview,
and if you turn it on by default, by the way, it's off.
So if you,
if you're wondering why you can't see or why the page is not
responsive on your mobile,
just make sure you have that switch on.
And then when you tab click on the tab, mobile,
it will then take you into the mobile preview.
And this is where most of issues happen,
because although you can see,
you have put your text element correctly,
or at least it's aligned correctly,
sometimes in the mobile preview,
it might be going over and the user or the visitor
on the page, won't see this text.
So just make sure whenever you add a element,
just come to the mobile preview and make sure everything
looks okay here.
So there's, the first thing also I would say
is to add a section.
So sections are literally blocks of different elements,
which you can group together.
And that way you can move them around.
It's like grouping quite a few of different elements so that
it's easier to move them across or to delete them
or to hide them.
They're very powerful,
especially if you want to hide a section
on mobile versus desktop.
So if you want to show it,
it's actually only on desktop.
You can go into the mobile preview and literally click this
element and click this little eye icon
and it will hide it on mobile.
So notice it doesn't hide up in desktop.
So that's why there's a,
there's a huge kind of power here because you can turn
things on and off depending on what device you're using.
The next important element,
which every landing page usually has,
especially a lead generation landing page, is a form.
And there's already a component here called
form and you can drag and drop drag it and drop it
onto the canvas.
So creating a form in Unbounce is relatively very simple.
There are predefined fields.
So for example, first name,
last name, phone number, email.
So those are the typical fields which you want to capture.
And if you click on any of these field elements,
you will notice you have the field label,
you have the placeholder text
and you also have the field ID.
Field IDs are very powerful,
especially when you want to integrate
with your CMS or your CRM.
So if you want to keep a name,
which kind of is relevant to what you use in your CRM,
just make sure you can use the same name and you can easily
edit it here.
You can make fields mandatory by putting this check box here
called required field,
or if you want to just, so let me actually create this form
and I can show you how it looks.
So this is how the form looks and we can easily move it
across the canvas.
This is one of the benefits of Unbounce.
So that's one of our sections.
I can move this form over to the main, the section here.
And similarly, you'll see this happen over in mobile.
As I mentioned before,
sometimes you will have to adjust the elements
because they don't fit the canvas size of the desktop.
So even if you're moving something over here,
it won't really reflect in desktop because mobile
almost has got its own canvas.
So as previously mentioned,
every element has got it's own properties.
So if I click on the form here,
it would show up all the properties on the right side.
It's this property window only appears when you have
the elements selected.
So make sure whenever you want to edit
any item on Unbounce,
just make sure you click on it first.
And if you want to go back and add more fields,
you have two, options you can click the edit form fields,
or simply just double-click.
I find double-clicking pretty easy.
And then if you want to now let's say change the text
of this button, which at the moment says form button,
you can literally just click on the button.
And in here there's text element and you can say,
get free PDF for example,
and that button has got its own kind of widget
and you can easily extend it, stretch it.
You can define different colors.
You will notice if you obviously add
an overlay color as well,
when somebody hovers over the mouse that usually indicates
it's a button.
And one of the cool thing is in Unbounce,
you can set up corner radius through which you can easily
define how the button looks.
So whether it's a square button
or more like a capsule button,
and all you have to do is drag this element
over to a hundred percent
and it will create that capsule effect.
So we've seen how the form elements are edit,
but if you want to add your custom ones,
you have the option of adding them
by just clicking them and saying,
I want a single line text element
or a multi line text element.
Single line text elements are obviously just single line.
Multi line are usually for descriptions.
For example, if I add a multi line component,
I can say here,
tell us about your project.
And that could be the label which sits on the form.
And I can, as a field name, I can just see a message.
So that will be the element or the ID,
which I'm going to use later on, on connecting to a CRM.
And if I want to make it required,
I can easily turn that setting on and off.
So if I click done here,
I can now see my element or my new field.
Tell us about your project has been added.
And similarly, if I go to my mobile view,
I could see it over here,
so just to, again, slightly adjust it.
I'll move this bar here.
Cool.
So now you've seen how the labels and the forms work,
but there's also one little cool thing, which I like,
which is a default text.
So if you don't like the way these boxes are empty
and there's field names defined here,
you can actually turn them off and put in the default place,
holder text, enter your first name.
And the difference is there's no label here
and there's default text,
which makes the form relatively leaner.
And if I do that for other elements.
Oh, yes,
this is one issue where the multi line field element
doesn't really have the default text property.
So as you can see here, there's a field place all the text,
and there is no place holder text
where we can add the full text.
And in order to do that, we have to use CSS,
which I'm going to talk about later on in the series.
So at the moment, that's how a form will look.
But if I get rid of this ugly component for now,
so you can see the difference between
that and what we had previously.
So that's the first thing you would do on an Unbounce page,
have some text and you would add your form.
But then the next obvious thing is to add images, make the form
look prettier and make the whole page
more conversion focused.
We'll talk more about how to design a page
in Unbounce later on in the series.
But the final thing which I would suggest
is once you click on your form,
you have the ability to send the user
to a thank you page or show them a message.
And in order to do that,
you can simply click a button here, which says confirmation.
And in here,
you can define exactly what should happen after the user
submits the form.
And in my case,
I just want to show them a confirmation dialogue.
And at that point,
if I want to show them a confirmation dialogue,
I can see there's a new tab added here.
And if I click on that tab,
that is the message I will show to my user.
So if I say thank you for submitting.
So I can easily change the text.
I can again,
use these widgets and add more stuff
so I can add an image, video.
There's no limit.
And again,
the mobile preview shows you exactly how the form will look
on a mobile screen.
So if I go back by clicking this tab here.
This is my page.
And in order to now actually preview the page,
I have two options,
so I can click save and then click preview.
So usually what I do is on my Mac,
I'm holding the command key that opens in a new tab.
Otherwise it'll open up in the same tab,
which although is a good thing,
but it kind of makes you then go back to the canvas.
So that's how our page looks at the moment.
So if I want to now actually publish this.
So notice it's actually right now
in the Unbounce preview mode.
In order to publish it,
I will go back to my editor
and go back and click overview here.
And you'll notice once you have this page,
it will be hosted under unbouncepages.com.
That's the default domain Unbounce uses for all the pages.
Later on in the series,
I'll cover how you can point a different domain
to your landing page URL
so that you can use your actual domain.
So in order to actually publish it on the domain,
just click, publish, and click publish now.
It takes a few seconds to obviously publish the page.
Once the page is published, you will notice you have a URL,
which you can now use and send traffic to.
So this is how the page looks.
It has a Unbounce URL,
which obviously is ugly,
but at least we have a page which is live and you can use
this for your own stuff.
In the dashboard, you have lots of options here,
and we will cover them in depth in our series.
I look forward to seeing you in the next episode,
please feel free to add your comments and subscribe
to the channel.
If you liked watching this video,
please subscribe to my channel and I'll cover more topics
on some of the basics and some of the advanced features
in Unbounce.
See you next time.