Advanced Tabs Module

Ultimate Addons for Beaver Builder has one of the most used modules which helps enhance the look of your pages with interactive Advanced Tabs module.

Below are some key features of the module –

• Options to have Icons on Tab Title with Icon Position option
• Active Tabs styling and Layout options- Horizontal/Vertical
• Choose from Tab Appearance Options – Simple/Bar/Icon Fall, etc.
• Responsive Mode for Tabs with responsive Breakpoint option
• Ability to insert Content/Photo/Video Embed Code to Tabs content
• And also insert Saved Rows/Saved Module/etc to Tabs content while using with Beaver Builder Pro.
• Multiple Styling Options
• Easy & 100% Customization for Tabs Title, Content, & Icons

How to Use the Advanced Tabs module on Beaver Builder Page?

Step 1: First, search the panel for the “Advanced Tabs” Module, in the Beaver Builder Editor, and drag & drop the module onto the page.

Step 2: In the Tab Items tab, add or duplicate items and start editing individual items with Title, Tab Icon, and Content as per your requirement.

Step 3: While working with UABB modules, you can simply choose any style from a list of professionally designed, sleek, and classic presets. Presets will help you quickly create great designs. You can select the preset of your choice here. But before changing presets, save the content, you added to the module. Otherwise, your content will be overwritten with the default one.

Step 4: Visit the second tab of the module, which is the Tab where you can select the Tab layout – Horizontal/Vertical. Also, you can select the appearance of how the Tab is supposed to look. Additionally, this Tab has padding, responsive options, etc to style the Tab title section further.

Step 5: The next Content section, will help style the content of your tabs. You can set the Alignment, content color, background color, padding, border, and much more here.

Step 6: If you want to change the typography of the Tabs and Content, you can modify it from the respective Tab/Content and further from the Typography tab.

Let’s have a glance at the detailed overview of Tab Appearance Options:

You can choose the appearance from the different tab styles:

• Simple
• Bar
• Icon fall
• Topline
• Line box

Simple: When you set the tab appearance to simple, it will look like this.

Bar: When you set the tab appearance to bar, it will look like this.

Icon fall: When you set the tab appearance to Icon fall, it will look like this.

Topline: When you set the tab appearance to Topline, it will look like this.

Line box: When you set the tab appearance to Line box, it will look like this.