Improve Website Visitor Interaction Using Vertical Tabs

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.

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.

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.

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:

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

getharvest.com

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.

hopin.com

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.

Helpscout.com

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.

Trullion.com

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.

Dub.sh

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.

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:

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.

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.

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.

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.

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.

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.

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!

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.

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

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

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

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.

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.

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

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…

OptimizePress is the leading funnel builder and landing page builder that is affordable and designed for solopreneurs and founders who need to get their pages live fast.

The all-in-one platform for marketers using WordPress.  100% of this page was built with OptimizePress.

Copyright © 2010-2024 OptimizePress® · All Rights Reserved.   Privacy Policy   ·   Legal Information