Unbounce: How to Create Tabbed Sections

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 free trial, sign up using my link:

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

Link used in the video with instructions: https://community.unbounce.com/t/how-to-add-tabbed-sections/4633

Link used in the video with the code: https://gist.github.com/noahub/fc3ed61f29d0176e2db53c7862033da9

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/
Unbounce: How to Create Tabbed Sections

Hey all!

In this video, I show you how to create tabbed sections in your Unbounce landing pages.

This is a pretty cool feature that requires a bit of third-party coding – so Unbounce doesn’t *recommend* it as part of their features/elements.

That being said, let’s get straight into and I’ll show you how you can make an amazing-looking tabbed section.

1. The first thing we have to do is create 2 *containers* for our navigation bar buttons and the content that they are going to point to in our Unbounce landing page.

You would need to create boxes to contain the elements within – I also show how to do that in my other Unbounce video here: https://www.youtube.com/watch?v=iM-BvMmYZG8&list=PLS46f4aLJ2hOdr6ZRw-9cnSXVWfa0r86i&index=7

Once you create these sub-sections, it is important that you rename them because it’ll be that much easier for you to sort later on…

2. After you created the contains and re-named them in Unbounce, it’s time to add the individual elements and drag them into the containers.

Depending on the number of buttons you want, just make sure that there is room in the container and that all the buttons go into your navigation bar container…

Once you do that, you need to do the same for the content boxes underneath the navigation bar.

It’s a little tricky putting these boxes inside the container as you create more of them, so you will need to hide the previous content box before putting the new one into the container in your Unbounce landing page.

Also, it’s very important that you remember to re-name all these navigation buttons AND the content boxes beneath them – trust me, it’ll make a huge difference later on!

3. Now that you have done that, you’re half-way done.

All you need to do now is input the code from the website attached above (here it is again: https://gist.github.com/noahub/fc3ed61f29d0176e2db53c7862033da9) and make some changes.

Basically you will need to a) in the javascript code, change the element ID’s of your navigation bar container and the content box container from your Unbounce landing page; and b) for each of your buttons, add the “Go to URL” as the element ID you want to be shown when the button is clicked. Namely, whichever content box you want to show up upon clicking the button, that’s the element ID you should put down, which you can find at the bottom right-hand corner of your Unbounce edit dashboard.

After you do all that, you’re done with the functionality part of this – just click on “preview” to see what this would look at and make sure everything works as planned.

Also make sure that your content box 1 which matches button 1 is placed “on top of” all the other elements.

4. Once you do all that, you can play around with the styling for the navigation boxes and content boxes on your Unbounce landing page.

I already cover most of these customization options in my Unbounce playlist: https://www.youtube.com/watch?v=p6JljKqlwFc&list=PLS46f4aLJ2hOdr6ZRw-9cnSXVWfa0r86i, and I don’t spend too much time going over the different things you can change here because I already covered most of them in the link attached.

However I can briefly go over the CSS code that you should have pasted as well into the “CSS” part of your Unbounce landing page.

The “color” represents the color of the text that will show up when clicking on the navigation button and staying active on that button. The “background” represents the color of the actual button when active. You can use either hex or the RGB codes to input these colors in.

That’s it!

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

Do you have any ideas or video topics about Unbounce or anything else you would like me to cover?

Write down in the comments below what you would like me to make a video on!

Most of my videos I made were requests/suggestions from subscribers, so don’t hesitate to let me know as well!

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

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

source