PPM site
Just another New Help App Staging Sites site
Advanced Tab will let you display key information in an interactive manner that support custom made nested tabs design to attract audience on an instance.
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.
To use this element, find the ‘Advanced Tabs‘ element from the Search option under the ‘ELEMENTS‘ tab. Simply just Drag & Drop the ‘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:
Under the ‘Content’ tab, you will find the General & Content Settings sections.
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’.
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.
Switch to the ‘Style’ tab to style all the elements of Advanced Tabs.
‘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.
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.
By following these mentioned steps and a bit more modifying & styling, you can easily design your Advanced Tabs as per your preference.
By using Advanced Tabs, this is how you can easily put the spotlight on your significant contents & make them appealing to your visitors.
Powered by BetterDocs