Unbounce: How to Create & Add a Sticky Bar (Option 1)

If you want to try out Unbounce yourself for free for 14 days (WAS CHANGED FROM 30 BY UNBOUNCE!!!!) and then get 20% off for the next 3 months after the 1-month free trial, sign up using my link:

https://unbounce.grsm.io/ivan?sid=u-sticky-1

My Unbounce playlist so you can find every important piece you need:

https://www.youtube.com/watch?v=p6JljKqlwFc&list=PLS46f4aLJ2hOdr6ZRw-9cnSXVWfa0r86i

If you need help with a specific issue and want me to personally take a look at your setup, I can help! Check out the ‘My Services’ section of my blog: https://amarketingessentials.com/my-services/

Hey all!

In this video, I show you how to create a sticky bar and add it to your Unbounce page or pages if you have several.

The process is pretty simple, but can get confusing if not done correctly.

There are two parts involved in creating this sticky bar in Unbounce. The first involves actually creating the sticky bar, editing the features that are important to you, making it mobile-responsive, and publishing the sticky bar itself. The second part involves adding the sticky bar code to the actual pages you want it to show up on. There are many simple settings that go with that, but they are super and we’ll go over them, so do not fear and let’s get started!

First off, you will need to create the sticky bar.

So click on “Popups & sticky bars” on the left hand side of your Unbounce dashboard and click on “create new”. You can now choose from a landing page template, a popup template, a sticky bar template, and an AMP template. In the previous video we covered how to create a popup, so check that one out if you want to create a popup. So just go over the sticky bar templates and select whichever one you like best. If you happen to not like any, you can select the “create sticky bar from scratch” option as well.

I selected a fairly simple template, named it on the bottom right, and then proceeded to edit it.

This part is very simple and straightforward if you know how to create pages within Unbounce. I have a playlist showing how to do all that here which you might find valuable: https://www.youtube.com/watch?v=p6JljKqlwFc&list=PLS46f4aLJ2hOdr6ZRw-9cnSXVWfa0r86i

I use the same basic editing elements to edit the sticky bar.

Once you are fully satisfied with your sticky bar design, make sure it’s mobile optimized (have another video that covers mobile optimization in my playlist attached above), and save! There is no “publish sticky bar” option anywhere here on this page, however just hit “save”, go back to the popup/sticky bar section, and you will be able to publish the sticky bar there.

BUT – we are not ready to publish just yet. Remember, the two parts to making the sticky bar show up on our page included creating the sticky bar and then adding the code to our page…

So let’s get started with the 2nd component now.

Let’s go from top to bottom.

The first part asks you to add a URL for where you want the sticky bar to show up exactly. This is especially useful if you want to add this sticky bar to a NON-Unbounce page, and want to add it a website that contains many pages within it, like a “my services” page, a “home” page, and “about us” page, and so on.

In this case, you can simply add the code to the entire website, but then specify which exact URL(s) you would like the sticky bar to show up on.

In our case, since we are just adding this sticky bar to our Unbounce landing page, we can just enter the URL and say “All URL’s”, since we want to include it on just that page.

Once you finish that, you can scroll down and you’ll see some trigger and frequency settings – not going to spend too much time here are they are very straight-forward. How often do you want your sticky bar to show up to each individual user, and when do you want the first sticky bar to appear? These are the 2 questions Unbounce is basically asking you.

There are some additional location settings, but those are available on the advanced pricing plan, and I’m just currently using the basic one, so I won’t get into those too much.

The last part includes grabbing the code given to you and adding it to your actual page.

So in the video, I have my actual editing interface open for the page I want to edit/add the code to, and just go into “Javascript” at the bottom, go to the “Head” section, and input the code there. Hit “save”, then “save” at the top right for the landing page, “publish” my sticky bar and our sticky bar is now good to go! Even if you make frequency/trigger changes to it, you don’t need to re-add the code.

That’s it!

Here is your link to the free Unbounce 14-day trial: https://unbounce.grsm.io/ivan?sid=u-sticky-2

You should now have a good-looking sticky bar that activates when a user lands on your page(s). 🙂

Like my Facebook page! https://www.facebook.com/onlinemarketingessentials

Thanks for watching, and I’ll see you in the next video!

source