How Can We Help You?

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.


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.


‘Tabs’ section lets you add ‘Color’ , ‘Border’ or  ‘Background’ to the tabs depend on type of Tabs.


‘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’ 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.