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.
How to Activate Advanced Tabs #
To use this Essential Addons element, find the ‘EA Advanced Tabs‘ element from the Search option under the ‘ELEMENTS‘ tab. Simply just Drag & Drop the ‘EA Advanced Tabs‘ into the ‘Drag widget here‘ or the ‘+’ section.
After you are done with step 1, this is the basic layout you are going to view:
How to Configure Content Settings #
Under the ‘Content’ tab, you will find the General & Content Settings sections.
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’.
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.
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.
Click to See Live Demo #
How to Style Advanced Tabs #
Switch to the ‘Style’ tab to style all the elements of Advanced Tabs.
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.
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.
Final Outcome #
By following these mentioned steps and a bit more modifying & styling, you can easily design your Advanced Tabs as per your preference.
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.
