Improve Website Visitor Interaction Using Vertical Tabs

Onder Hassan

Last Updated: May 19, 2023

Would you like to improve how you present the sales messages on your website?

In this article we’re going to share how you can use a simple design strategy to boost visitor interaction and optimize your page content. Plus, we’ll share how you can do this with no-code or design skills using our new OptimizeBuilder element.

When creating a high-converting website, you want to avoid overwhelming visitors with information.

Unorganised content can hurt engagement, confusing visitors and causing them to leave (bounce).

At OptimizePress, we’re always testing new ways to optimize the performance and conversions of websites and landing pages. Our new Vertical Tabs element is the latest release from our labs that we’ve found can help give you a conversions boost.

This article will look at the new element and how you can use it to increase clicks and visitor interaction.

We will also include industry examples to give you ideas on how to use this new element for the best results.

What Is The Vertical Tabs Element?

The Vertical Tabs Element is a new element in the OptimizeBuilder that helps you present content in an effective way to optimize the design of your web pages.

Using this new element, you can condense important sales messaging into a tab layout which grabs visitor attention, gets clicks and prevents information overload.

The Vertical Tabs element is great for showing off the key features, benefits, or uses of your product or service.

It has two main parts: The content area and the navigation panel.

In the content area, you can put any content you want such as images, text, videos, or any of the other OptimizeBuilder elements. You can easily drag and drop these items right into the content area.

The navigation panel lets you make personalized tabs for each content area. You can also customize each tab with more content, like text, links, icons or other information.

Why Use The Vertical Tabs Element?

With the Vertical Tabs Element, you can design your pages without content bloat that can negatively impact your conversions. When information is easy to consume, visitors spend more time on the site and are more likely to take the desired actions.

The new Vertical Tabs element is very flexible, and you can use it in many ways.

Here are some examples:

A beautiful Content Slider, showing pictures of your product, or even showcasing samples of your work in a portfolio-style tabs slider.
A Product Features area that can be used to display different features of a product. Each tab containing a unique feature with a detailed description or image.
An Image Gallery for Artists and Photographers to show off their portfolio. With each tab split into different art categories.
A Customer Testimonials area with tabs containing a different testimonials, providing a clean and organized presentation of customer feedback.
Event Schedules that can be used to display schedules or timelines. Each tab containing the details of different parts of the event.

Because of the effectiveness of vertical tab designs at engaging visitors, many established websites use them to ensure their sales message is clear.

1. Harvest

Harvest Vertical Tabs Element

Harvest has used vertical tabs as a filter to showcase some of the companies they’ve worked with by different industry types.

They share customer stories of their experience working with Harvest, which is an excellent way to appeal to other businesses in their target industries.

If you’re a service provider, you could create a Vertical Tabs element similar to Harvest to effectively showcase your past work to help you attract more clients.

2. Hopin

Hopin Vertical Tabs Element

Hopin has focused its attention on using vertical tabs in order to neatly display a list of product features.

Each tab includes a highlighted background colour to let the visitor know which tab is currently active.

This is a nice way to improve site usability and increase engagement. We strongly recommend including features on your page that improve the quality of life for your visitors as this will improve your page conversions.

3. Helpscout

Helpscout Vertical Tabs Element

Helpscout has cleverly designed their vertical tabs to encourage visitors to click for more information.

When a tab is clicked, it expands to reveal more content to explain a specific feature of their service.

Helpscout has used the element to target content around the goals that their audience might want to achieve. Focussing on benefits that buyers of Helpscout will get.

4. Trullion

Trullian Vertical Tabs Element

Trullion has included links on each tab that takes visitors to a dedicated page in order to learn more about a feature.

This is useful for providing navigation without depending on a conventional menu or footer as well as adding SEO benefits to the page.

If you have dedicated pages on your website, consider adding links to give visitors an option to click and get more information about your products and services.

With the new Vertical Tabs element, you can drag and drop our button element into the design to copy this example from Trullion.

5. Dub

Dub Vertical Tabs Element

Similar to Trullion, Dub has also included links in the form of buttons that take visitors to dedicated areas for more information.

Dub takes this as a stage further by adding popup lightboxes which displays once a visitor has clicked on a button.

If you have a website with a few pages but would like to include more information about a feature of your service, then a lightbox may be the perfect solution.

Using icons in the tab titles is a nice design touch, and we have element presets that will replicate this design for you.

Features Of The Vertical Tabs Element

So as you can see in the examples above, it is clear why vertical tabs have become an increasingly popular way to optimize page design.

As with all elements in our OptimizeBuilder, we have made adding the Vertical Tabs Element as simple as a few clicks of your mouse.

Taking this a stage further, we wanted to also ensure that any advanced designs or usecases you require can all be done using the inbuilt options that are available.

Here are a just a few that we’ve added:

Presets

As with all our elements, our presets are a great place to start. These provide pre-designed layouts and styling that you can use immediately.

All you have to do is customize the content and you’re good to go.

Preset Vertical Tabs Element

Show Custom Content In The Navigation Side Bar

A unique feature of our Vertical tabs element is the ability to show additional content in the navigation item.

We’ve made this completely flexible so you can add additional content inside the navigation item for each tab.

Custom Content Vertical Tabs Element

Turn Your Vertical Tabs Into A Slider With Auto-Navigate

With the Auto Navigate feature, you can make your tabs cycle automatically, to help capture visitor attention as they scroll your page.

Set the interval for your tabs and loop the content so your content repeats infinitely.

Auto Navigate Vertical Tabs Element

Customize The Navigation Position

In true OptimizePress style, We give you complete flexibility for the positioning of the key components of the Vertical tabs element.

Choose to position your navigation bar on the left, right, above or below your content to fit with your page design.

Navigation Position Vertical Tabs Element

Add A Title For Your Navigation Sidebar

If you want that little extra customization, you can add a navigation title in your sidebar.

This allows you to add more context or guidance to your element where relevant.

Display Navigation Vertical Tabs Element

New Vertical Tabs Sections

To help you build or update your pages quickly, we have released a wide range of Vertical Tab sections. You can drag and drop these new sections onto the page, and they look stunning without any additional design required.

Vertical Tab Sections Light

A key benefit of using OptimizeBuilder Sections is that you select the section you want to add to your page, and all you need to do is add your content.

These new sections are now live and ready for you to use!

Vertical Tab Sections Dark

How To Use The Vertical Tabs Element

To show you how quick and simple it is to add a Vertical Tabs Element, we’re going to now walk you through a simple setup process that you can use as a starting point for designing your own.

To add the Vertical Tabs element to your page, you will find it listed on the element listings sidebar.

Vertical Tabs Element

Inserting the element on you page will insert a vertical tabs element using the following default layout.

Vertical Tabs Element Default Layout

Clicking on the ‘magic wand’ icon on the element toolbar will display a list of preset designs that you can select from.

Vertical Tabs Element Preset Templates

Select a preset design to quickly change the design and layout of your vertical tabs. Your existing content will still remain the same.

Edit Tab Content Vertical Tabs Element

Clicking on the ‘check’ icon on the toolbar will reveal the content area in your tab to allow you to edit the default text included in the preset.

The content area will include an image which you can replace with your own custom images.

Content Area Image Vertical Tabs Element

Lastly, to add additional elements to the content area, you will be able to add any of the existing elements in the OptimizeBuilder.

In this example, we’ve added a simple Paragraph Element below the image.

Text Vertical Tabs Element

With the Vertical Tabs element inserted, you will now be ready to edit your element that best fits your business objective.

How Will You Design Your Vertical Tabs?

We’d love to know how you plan to use this powerful feature in your business!

Please let us know your thoughts and questions in the comments…

Join the OptimizePress University

Get FREE access to our Premium Marketing Training Library

OptimizeUniversity gives you the latest marketing training courses, strategies & tactics to grow your business fast.

    4 replies to "Improve Website Visitor Interaction Using Vertical Tabs"

    • Daniel

      Can you not put different images different tabs?
      When using it, it seems like all the tabs are forced to use the same content area to the right instead of rotating between unique content each time you click a tab.

      For example, If I use this for a ‘features’ section, I won’t be able to show different images of the product for each feature tab I add.

      • James Dyson

        Daniel – each tab should have a unique content area. This means for each sidebar tab/item – you can have specific unique content (e.g. image, text etc) in the main content panel. If this is not how you see it working, perhaps there’s an issue on your site. Or it could be there’s some confusion on how the element works.

        Did you check out the video on the post that shows how the element works? If you are still having problems, drop our support team an email

    • Mike

      How’s it work on mobile?

      • James Dyson

        Mike on mobile you can choose to stack the nav above or below the main content area. We also added a feature to allow you to “scroll to content” which is designed for mobile devices, so when a user clicks the navigation link/item for the feature they are interested in, your screen will scroll to the content area.

        Remember as with all elements in the OptimizeBuilder, you can customize the layout, spacing, and styling for mobile devices specifically to suit that screen size.

Leave a Reply

Your email address will not be published.

Free access to our university

Get Instant Access to the Optimize University

Discover the latest marketing strategies and tactics in our comprehensive training library designed to help digital marketers and entrepreneurs grow their businesses faster. 

Join today for free instant access!

Create Your Free Account

Enter your name and email below:

By entering your email, we'll also send you marketing emails related to OptimizePress. You can unsubscribe anytime. See our privacy policy.

Close

Let's Get Started

Congratulations... Your account is being created!

You will shortly receive an email from our OptimizeUniversity team with your account set-up link. Please close this window to continue on the OptimizePress website.

Want to discover how to use OptimizePress to get more leads and sales?

Close