Advanced Tabs

How to Configure and Style EA Advanced Tabs #

Advanced Tabs is quite similar to the element  Advanced Accordion. However, the most noticeable difference is in how these two elements display and present underlying text. And this is what every business should be looking for- the most appropriate manner to present their content.

Table of Contents: #

  1. How to Activate Advanced Tabs
  2. How to Configure the Content Settings
    2.1. General Settings
    2.2. Content
  3. How to Style Advanced Tabs
    3.1. General
    3.2. Others
  4. Final Outcome

1. How to Activate Advanced Tabs #

To use this Essential Addons element, find the EA Advanced Tabselement from the Search option under the ELEMENTS tab. Simply just Drag & Drop the EA Advanced Tabs into the Drag widget hereor the ‘+’ section.

Advanced Tabs

After you are done with step 1, this is the basic layout you are going to view:

Advanced Tabs

2. How to Configure Content Settings #

Under the ‘Content’ tab, you will find the General & Content Settings sections.

2.1. General Settings #

From the ‘General Settings’ section, you have the freedom to choose your preferred layout out of these two: Horizontal & Layout. Simply use the toggle to display or hide ‘Icons’ for the tabs. If it’s enabled, you are able to change the position to either ‘Inline’ or ‘Stacked’.

Advanced Tabs

2.2. Content #

From the ‘Content’ section, you can change your ‘Tab Title’ and ‘Content Type’. You have the freedom to add your own ‘Tab Content’ as well. If you want to increase the number of tabs, simply click on the ‘+ ADD ITEM’ button right at the bottom.

Advanced Tabs

You can also use your ‘Saved Template’ as ‘Content Type’. You can also change the Icon Type, Tab Icon and enable/disable ‘Active as Default’ tab option. If the ‘Active as Default’ is enabled, the certain tab will always be open when you visit the ‘Advanced Tabs’ section.

Advanced Tabs

Click to See Live Demo #

3.  How to Style Advanced Tabs #

Switch to the ‘Style’ tab to style all the elements of Advanced Tabs.

3.1. General #

‘General’ section lets you add ‘Padding’ and ‘Margin’ to the tabs. Besides, you are able to change the ‘Border Type’ and ‘Border Radius’ of the tabs as well. If you want, you can even add ‘Box Shadow’ too.

Advanced Tabs

3.2. Others #

From ‘Tab Title’ & ‘Content’ sections, you are able to change the ‘Background Color’, ‘Text Color’, ‘Border’ and ‘Typography’. If you have the ‘Icon’ option enabled, you can also modify the ‘Icon Size’ and ‘Icon Gap’ from the ‘Tab Title’ section.

On top of that, you can even control the ‘Background’, ‘Text’ & ‘Icon’ color of the tabs based on when it’s in Normal, Hover or in an Active view. Simply use the toggle to display or hide ‘Caret’ when a tab is active from the ‘Caret’ section. If it’s enabled, you can change the size and color of the ‘Caret’ as well.

Advanced Tabs

4. Final Outcome #

By following these mentioned steps and a bit more modifying & styling, you can easily design your Advanced Tabs as per your preference.

Advanced Tabs

By using EA Advanced Tabs, this is how you can easily put the spotlight on your significant contents & make them appealing to your visitors.

Getting stuck? Feel to Contact Our Support for further assistance.

Get Started Now

Powered by BetterDocs