No results found. Try again with different words?

Search must be at least 3 characters.

    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.

    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.

    Advanced Tabs Module

    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.

    Advanced Tabs Module

    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.

    advanced tabs presets

    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.

    Advanced Tabs Module

    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.

    Advanced Tabs Module

    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.

    Advanced Tabs Module

    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.

    tab appearance - simple

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

    tab appearance - bar

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

    tab appearance - icon fall

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

    tab appearance - topline

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

    tab appearance - line box

    Note:

    You can enable/disable the icon for each tab appearance option depending on your requirement. Also, you have full control over tab style like tab width, tab focus color, text active, hover colors, and much more.

    Was this article helpful?

    Did not find a solution? We are here to help you succeed.

    Related Docs

     

    Grab this rare opportunity to save up to 50%

    WOAH, HOLD ON THERE!

    Don't Miss Our Biggest Discount

    00
    Months
    00
    Days
    00
    Hours
    00
    Minutes
    00
    Seconds

    You are backed by 100% risk-free money-back guarantee.

    Grab Our Biggest Discount Of All Time. Don’t Miss Out!

    00
    Months
    00
    Days
    00
    Hours
    00
    Minutes
    00
    Seconds

    Free Download

    Enter your name & email address to download this awesome freebie.

    Free Download

    Enter your name & email address to download this awesome freebie.

    Free Download

    Enter your name & email address to download this awesome freebie.

    Free Download

    Enter your name & email address to download this awesome freebie.

    Free Download

    Enter your name & email address to download this awesome freebie.

    Free Download

    Enter your name & email address to download this awesome freebie.

    Free Download

    Enter your name & email address to download this awesome freebie.

    Free Download

    Enter your name & email address to download this awesome freebie.

    Free Download

    Enter your name & email address to download this awesome freebie.

    Free Download

    Enter your name & email address to download this awesome freebie.

    Free Download

    Enter your name & email address to download this awesome freebie.

    Free Download

    Enter your name & email address to download this awesome freebie.

    Scroll to Top