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

If you want to try out Unbounce yourself for free for 14 days 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-sticky2-1

URL used in the video (with the code): https://www.disruptiveadvertising.com/graphic-design/5-easy-unbounce-codes-to-upgrade-your-landing-page/

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!

I show you the 2nd way to add a sticky bar to your Unbounce landing page.

This way is actually easier personally than the first method just because everything is on one page and you don’t have to go back and forth to make edits.

If you still want to see how to do it the “Unbounce way”, you can see this video here: https://www.youtube.com/watch?v=HfgFV6fO9hE

That being said, let’s get into the live action for how to add it the 2nd way!

(1) Go to the landing page that you want to add the sticky bar to.

I mean duuhhh, you probably already know that. 😊

(2) Grab the code from the URL that I pasted above and show in my video.

You would need to paste it just before the ending /body tag of your page Javascript code.

Note that you would do the exact same thing with the general Unbounce way of adding a sticky bar … only difference here being that you can actually edit this sticky bar within the landing page builder itself without needing to go back and forth.

(3) Now you need to add a box container and add the elements in the header/sticky bar that you want to stick to the top to this container.

Here is a video that shows how to add a subsection: https://www.youtube.com/watch?v=iM-BvMmYZG8

Make sure you cover and add all the elements you want inside of that container. The container will automatically cover the entire width of the page, but you can adjust the height to whatever you see fit.

(4) Now you have to take the element ID of this new box container that you added and replace the element ID inside of the Javascript code with that element ID of your container.

Now you click save and publish the page and you should see the scrolling header/sticky bar on top of your landing page!

That’s it!

Here is your link to the free Unbounce 14-day trial: https://unbounce.grsm.io/ivan?sid=u-sticky2-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