Tabs Element

Last Update: August 22, 2025

The Avada Tabs Element is perfect for displaying a large amount of organized information in a small area. Avada includes 2 different design styles for tabs: Clean and Classic. Both design styles can be vertical or horizontal, and you can use any other simple Avada Builder elements inside them. You can use icons following the titles, easily drag and drop each tab item into different locations, insert images, icons, checklists, and much more.

Watch the video below for a visual overview of the Element, view the Avada Tabs Element page for live examples, and read on to see the complete list of options.

For privacy reasons YouTube needs your permission to be loaded.

View Element Page!

View Live Example!

View Avada Builder Elements!

How To Use The Tabs Element

The Avada Tab Element is the most versatile way to add a tabbed section anywhere on your site. To start, add the Element anywhere within the site's content. There are both Parent Options, which affect the whole series of tabs, and individual tab items. This Element has a range of options, starting with two designs and two layouts to choose from.

Once you have chosen your design and layout, you can slowly move down the Parent Options, deciding how to style the Tabs. There are color, border, and icon options for you to configure.

Once you have set all your Parent Options, you add Child Items. Click the pencil icon to edit the existing item. The Child Item Options Panel appears. This is where you add the content for the individual Tabs. You can add a title, an icon, and the Tab Content field. This can take text, HTML, or shortcodes, so there is no limit on the content of the tabs.

You can then set up other tabs, either by duplicating existing ones or creating new tabs, by clicking on the Clone Item icon or the + Tab button, respectively. Read below for a description of all element options.

Element Options

Note: The Default setting will use the global settings assigned for this element in your Options > Avada Builder Elements > Tabs Elements section. Also, please note that the displayed options screens below show ALL the available options for the element. If you have Avada's Option Network Dependencies turned on, you will only see options relevant to your selections, and so the options screen may look somewhat different.

General

Heading		Description
Design		Choose a design for the element.
Layout		Choose the layout of the element.
Justify Tabs		Choose to get tabs stretched over full element width.
Tabs Alignment		Choose tabs alignment.
Sticky Tabs		Turn on to have the tabs navigation stick on scroll. Useful for long content.
Sticky Tabs Offset		Controls how far the top of the column is offset from top of viewport when sticky. Use either a unit of measurement, or a CSS selector.
Icon		Global setting for all tabs, this can be overridden individually. Click an icon to select, click again to deselect.
Icon Position		Choose the position of the icon on the tab. Icons can be selected in the general tab for the same icon on all tabs, or in each child item for individual tab icons.
Tabs Icon Size		Set the size of the icon. In pixels, ex: 13px. Icons can be selected in the general tab for the same icon on all tabs, or in each child item for individual tab icons.
Element Visibility		Choose to show or hide the element on small, medium or large screens. You can choose more than one at a time.
CSS Class		Add a class to the wrapping HTML element.
CSS ID		Add an ID to the wrapping HTML element.

children

Heading		Description
Add / Edit Items		Add or edit new items for this element. Drag and drop them into the desired order.

Design

Heading		Description
Margin		Enter values including any valid CSS unit, ex: 4%.
Tabs Title Tag		Choose HTML tag of the tabs title, either div or the heading tag, h1-h6.
Tabs Title Typography		Controls the tabs title text typography.
Tabs Title Padding		Controls the padding of tabs title, In pixels or percentage, ex: 10px or 10%.
Tabs Content Padding		Controls the padding of tabs content, In pixels or percentage, ex: 10px or 10%.
Tabs Title Border Radius		Controls the border radius of tabs title, In pixels or percentage, ex: 10px or 10%.
Border Color		Controls the color of the outer tab border.
Tabs Title Color		Controls the color of the tabs title.
Icon Color		Set the color of the icon.

Mobile

Heading		Description
Mobile Mode		Choose the tabs mode for mobile devices. Carousel will be come active only, if tabs don't fit the device screen width. The breakpoint can be controlled from the Global Options.
Sticky Tabs		Set tabs to sticky for carousel mode on mobile, useful for long content.

Child Items

Heading		Description
Tab Title		Title of the tab.
Icon		Click an icon to select, click again to deselect.
Icon Color		Set the color of tabs icon.
Tab Content		Add content for the tab.