BLACK FRIDAY: 50% OFF all Pro plans
Pro from $18 a year or $60 lifetime, no code needed
Ends Cyber Monday, 30 Nov. Lock in the price today
Get 50% Off
Free widget

Advanced Tabs Widget for Elementor Free

Horizontal or vertical tabs that work with the keyboard.

Overview

What Advanced Tabs does

Advanced Tabs splits content into tabs, each with a title, an optional icon and a rich text panel. Use it to fit several related pieces of content into one space, in a horizontal or vertical layout.

Live demo

See it in action

We start with your goals and design a site your visitors will enjoy using.

Features

What it can do

  • Unlimited tabs, each with a title, an optional icon and rich text content.

  • Horizontal layout with tabs on top, or vertical layout with tabs beside the content.

  • Tab alignment for the horizontal layout: left, center, right or justified.

  • Choose which tab is open when the page loads.

  • Keyboard support: arrow keys move between tabs, Home and End jump to the first and last.

  • Tab and panel markup with the roles screen readers expect for tabs.

  • Separate text and background colors for normal and active tabs.

Use cases

When to use it

Product details

Split description, specifications and shipping into three tabs.

Service overview

Give each service its own tab with an icon so visitors can scan the list.

Process steps

Show each stage of a process in its own tab, in order.

Plans or audiences

Show different content for different groups of visitors without adding more pages.

Setup

How to set it up

A few steps from adding the widget to a finished result.

  1. Drag the Advanced Tabs widget onto the page.

  2. In Tabs, open each row in Items and set the Title, an optional Icon and the Content.

  3. Add more rows for more tabs and drag them into order.

  4. Choose a Layout: Horizontal or Vertical.

  5. For the horizontal layout, set Tabs Alignment. Justified stretches the tabs across the full width.

  6. Set Active Tab Number to the tab that should be open first.

  7. Open the Style tab to style the tab titles and the content panel.

FAQ

Questions and answers

Can I put icons on the tabs?

Yes. Each tab has an Icon control. The icon appears before the title.

Can visitors use the tabs with a keyboard?

Yes. Arrow keys move to the next or previous tab, and Home and End go to the first and last tab.

Can I make the tabs vertical?

Yes. Set Layout to Vertical. On small screens the tabs move above the content.

Can a tab hold another widget or a template?

No. Each tab holds rich text content from the built in editor.

Free forever

Advanced Tabs is free

It is one of 51 widgets in the free Bright Addons plugin. Each widget loads its code only on pages that use it.