Advanced Tabs
How to Configure and Style UBE Advanced Tabs
Make your important content readable to the user with Advanced Tabs Widget on your pages without scrolling down
Using Advanced Tabs:
You can see the below video to get an insight into how you can use the Advanced Tabs Widget to create beautiful designs. Or you can follow the documentation whichever you find convenient.
How to Activate Advanced Tabs
To use this UBE Addons 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:
How to Configure Content Settings
Under the ‘Content’ tab, you will find the Tab sections.
Tab
From the ‘Tab’ section,
| Type | Choose the layout type of the tour. Includes classic, flat, outline, pills, underline. |
|---|---|
| Spacing | Allow spacing between tabs or not |
| Scheme | Choose the default color for the tab including border, text and background depending on the style of the tab. |
| Enable Icon | Allow displaying icons on tabs or not |
– Tab content:
Each tab item includes:
| Title | Enter the title of the tab |
|---|---|
| Icon Type | Choose the type of icon including icon or media. This control only works when Enable Icon is on |
| Description | The content of the tab is added by adding the widget you want. This is different from Tabs Widget. |
How to Style Advanced Tabs
Switch to the ‘Style’ tab to style all the elements of Advanced Tabs.
General
‘Tabs’ section lets you add ‘Color’ , ‘Border’ or ‘Background’ to the tabs depend on type of Tabs.
Title
‘Title’ section lets you add Nav Alignment , Typography, Icon Size, Icon Spacing, Padding, Margin and Color, Icon Color, Background Color, Box Shadow in normal, hover and active to the tabs depend on type of Tabs.
Content
‘Content’ section lets you add Background Color , Border, Padding to the content depend on type of Tabs.
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 UBE 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.