Tabs Element

Last Update: April 10, 2024

The 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 of them. You can use icons next to the titles, easily drag and drop each tab item into different locations, insert images, icons, checklists and much more. Read below to discover more about this very useful design element.

For privacy reasons YouTube needs your permission to be loaded.

How To Use The Tabs Element

The Tab Element is the most versatile way to add a tabbed section anywhere on your site. To start, simply add the Element to your desired column.

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 then there is the Tab Content field. This can take text, HTML, or shortcodes, so there is no limit on what the content of the tabs can be.

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

HeadingDescription
DesignChoose a design for the element.
LayoutChoose the layout of the element.
Justify TabsChoose to get tabs stretched over full element width.
Tabs AlignmentChoose tabs alignment.
Sticky TabsTurn on to have the tabs navigation stick on scroll. Useful for long content.
Sticky Tabs OffsetControls 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.
IconGlobal setting for all tabs, this can be overridden individually. Click an icon to select, click again to deselect.
Icon PositionChoose 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 SizeSet 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 VisibilityChoose to show or hide the element on small, medium or large screens. You can choose more than one at a time.
CSS ClassAdd a class to the wrapping HTML element.
CSS IDAdd an ID to the wrapping HTML element.

children

HeadingDescription
Add / Edit ItemsAdd or edit new items for this element. Drag and drop them into the desired order.

Design

HeadingDescription
MarginEnter values including any valid CSS unit, ex: 4%.
Tabs Title TagChoose HTML tag of the tabs title, either div or the heading tag, h1-h6.
Tabs Title TypographyControls the tabs title text typography.
Tabs Title PaddingControls the padding of tabs title, In pixels or percentage, ex: 10px or 10%.
Tabs Content PaddingControls the padding of tabs content, In pixels or percentage, ex: 10px or 10%.
Tabs Title Border RadiusControls the border radius of tabs title, In pixels or percentage, ex: 10px or 10%.
Border ColorControls the color of the outer tab border.
Tabs Title ColorControls the color of the tabs title.
Icon ColorSet the color of the icon.

Mobile

HeadingDescription
Mobile ModeChoose 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 TabsSet tabs to sticky for carousel mode on mobile, useful for long content.

Child Items

HeadingDescription
Tab TitleTitle of the tab.
IconClick an icon to select, click again to deselect.
Icon ColorSet the color of tabs icon.
Tab ContentAdd content for the tab.

In this article