Tabs Element
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 Fusion 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.
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.
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.
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.
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.
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.
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 Theme Options > Fusion 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.
Parent 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.
Background Color – Controls the background tab color.
Inactive Color – Controls the inactive tab color. Leave empty for the default value.
Border Color – Controls the color of the outer tab border.
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 (px), ex: 13px. Icons are selected in each child tab element on the left side and do not have to be used.
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 Fusion 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.
Add / Edit Settings
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.
Global Options
Location:Â WordPress Dashboard > Avada > Theme Options > Fusion Builder Elements > Tabs Elements. 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.
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.
Raw Element Parameters
Raw Parent Options
- design – Choose from classic, or clean. Sets the tabs design.
- layout – Choose from horizontal, or vertical. Sets the tabs layout.
- justified – Choose from yes, or no. Set the tabs to span full width of it’s container.
- backgroundcolor – Accepts a hexcode ( #000000 ) or RGBA ( rgba(0,0,0,0) ). Sets the active tab’s background color.
- inactivecolor – Accepts a hexcode ( #000000 ) or RGBA ( rgba(0,0,0,0) ). Sets the inactive tab’s background color.
- bordercolor – Accepts a hexcode ( #000000 ) or RGBA ( rgba(0,0,0,0) ). Sets the tab’s border color.
icon – A font awesome icon value. For example, fa-glass.
- icon_position – Choose from default, left, right, or top. Sets the icon’s position on the tab.
- icon_size – Accepts a numerical value. For example, 5. Sets the icon’s size.
- hide_on_mobile – Choose from small-visibility, medium-visibility or large-visibility. You can select more than one setting. This will show the element on the selected visibility options, and will hide them on the deselected ones.
class – Add a custom class to the wrapping HTML element for further CSS customization.
- id – Add a custom id to the wrapping HTML element for further CSS customization.
Raw Child Options
- title – The title of the tab.
- icon – A font awesome icon value. For example, fa-glass.
- custom content – Insert tab content between theCopy to Clipboard
tags.
