Tabs Element

14/12/2022

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 of the other 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.

Design

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vel nulla sapien. Class aptent tacitiaptent taciti sociosqu ad lit himenaeos. Suspendisse massa urna, luctus ut vestibulum necs et, vulputate quis urna. Donec at commodo erat. Sed egestas consequat augue eu iaculis sadips ipsums dolores nonsi etra un. Donec elementum pellentesque. Sed gravida, nisl ac lobortis pulvinar, augue est vulputate felis, vel pulvinar ex eros sed est. In hac habitasse platea dicssa. Duis sodales eleifend sem, nonsi semper dui consectetur on roin leoi.

Learn More

Animation

Learn More

Development

Learn More

Video

Learn More

View Element Demo Page!

How To Use The Tabs Element

The Tab Element is the most versatile way to add a tabbed section anywhere on your site.

Step 1 – Create a new page or edit an existing one.

Step 2 – Add a container then select your desired column layout.

Step 3 – Click the ‘+ Element’ button to bring up the Elements window. Locate the ‘Tabs’ element and click it to bring up its options window.

Step 4 – The options on the right hand side are Parent Options, and affect the whole series of tabs, while the individual tabs are configured on the left hand side. This element has a range of options, starting with two designs and two layouts to choose from. Make sure to view the Element Demo page, to fully appreciate the different layouts and options on offer.

Step 5 – 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.

Step 6 – Once you have set all your Parent Options, you add Child Items on the left. 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.

Step 7 – 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.

Step 8 – Once you have completed adding your tabs, click Save. You will be returned to the edit page. You can preview the page to view the tabs, and you can always edit the element again to make changes.

Read below for a detailed description of all element options.

870,011 Businesses Trust Avada

Get Avada

870,011 Businesses Trust Avada

Get Avada

870,011 Businesses Trust Avada

Get Avada

Element Options

Location: The edit screen within each Element.

You can deploy as many individual Elements in pages and posts as you need, there is no limit. Within each of the Elements, you will see a tab or tabs that house an array of options that make it possible for you to configure each Element independently, and greatly enhance your flexibility and creative 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.

Children Options

Add / Edit Items – This is where all your child element’s items are found. Each will be numbered to better keep track of how many you currently have. You can reorder elements by dragging them and dropping them into place.
Edit Item Icon – Allows you to edit an item.
Clone Item Icon – Allows you to clone an item. Cloned items will automatically be added to the bottom of the items list.
Delete Item Icon – Allows you to delete an item.
Re-order Feature – Allows you to drag and drop the item to your desired order to rearrange them. A small thumbnail of the image is shown to assist you in this.
Add New Tab Button – Allows you to add a new Tab.

View The Options Screen

Child Options

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

View The Options Screen

General Options

Design – Select a design for the element. Choose from Classic, or Clean.
Layout – Select the layout of the element. Choose from Horizontal or Vertical.
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.
Icon – Global setting for all tabs, this can be overridden individually. Click an icon to select, click again to deselect.
Icon Position – Select the position of the icon on the tab. Choose from Default, Left, Right, or Top. Icons are selected in each child tab element on the left side and do not have to be used.
Tabs Icon Size – Set the size of the icon. In pixels (e.g. 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 – Allows you to choose which devices to display the element. Choose one or more from Mobile, Tablet, or Desktop. Each of the 3 sizes has a custom width setting on the Avada Builder Elements tab in the Theme Options.
CSS Class – Allows you to add a class name to the wrapping HTML element. The class name does not have to be unique, but all areas with the same name will reflect any changes made to the class.
CSS ID – Allows you to add an ID to the wrapping HTML element. The ID must be unique to each CSS ID.

View The Options Screen

Design Options

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. Leave empty for default value.
Tabs Title Typography
Tabs Title Typography – Controls the tabs title text typography.
Font Family – Controls the font family of the title.
Font Size – Controls the size of the font.
Line Height – Controls the line height of the text. Enter value including any valid CSS unit, ex: 28px.
Letter Spacing – Controls the letter spacing of the text. Enter value including any valid CSS unit, ex: 2px.
Text Transform – Choose how the title is displayed. Choose from Default, Normal, or Uppercase.
Tabs Content Padding – Controls the padding of tabs content, In pixels or percentage, ex: 10px or 10%.
Tabs Title Padding – Controls the padding of tabs title, In pixels or percentage, ex: 10px or 10%.
Border Color – Controls the color of the outer tab border.
Colors
Regular Options
Background Color – Controls the background tab color.
Tabs Title Color – Controls the color of the tabs title.
Icon Color – Set the color of the icon.
Active Options
Background Color – Controls the background active tab color.
Tabs Title Color – Controls the color of the active tab title.
Icon Color – Set the color of the active tab icon.

View The Options Screen

Mobile Options

Mobile Mode – Choose the tabs mode on mobile devices. Select from Default, Accordian, Toggle or Carousel. Carousel will be come active only, if tabs don’t fit the device screen width.
Sticky Tabs – Set tabs to sticky on mobile, useful for long content.

View The Options Screen

Global Options

Location: WordPress Dashboard > Avada > Options > Avada Builder Elements > Tabs. These global element options control all elements that use a carousel.

The Avada Advanced Options Network gives you amazing flexibility with additional Global Element Options that allows you to control individual Element default settings.

Tabs Background Color + Hover Color – Controls the color of the active tab, tab hover, and content background.
Tabs Inactive Color – Controls the color of the inactive tabs as well as the post date box layout for the Avada Tab Widget.
Tabs Border Color – Controls the color of the tab border.
Tabs Title Tag – Choose HTML tag of the tabs title, either div or the heading tag, h1-h6.
Tabs Title Padding – Controls the padding of tabs title.
Tabs Content Padding – Controls the padding of tabs content.
Icon Position – Select the position of the icon on the tab. Choose from Left, Right, or Top.
Tabs Icon Size – Set the size of the icon. In pixels.
Tabs Icon Color – Set the color of the icon.
Active Tab Icon Color – Set the color of the active tab icon.
Tabs Title Typography
Font Family – Controls the font family of the title.
Font Size – Controls the size of the font.
Line Height – Controls the line height of the text. Enter value including any valid CSS unit, ex: 28px.
Letter Spacing – Controls the letter spacing of the text. Enter value including any valid CSS unit, ex: 2px.
Text Transform – Choose how the title is displayed. Choose from Default, Normal, or Uppercase.
Font Color – Controls the color of the heading, ex: #000.
Tabs Active Title Color – Set the color of the icon.
Tabs Mobile Mode – Choose the tabs mode for mobile devices. Carousel will be come active only, if tabs don’t fit the device screen width.
Mobile Sticky Tabs – Set tabs to sticky for carousel mode on mobile, useful for long content.