The Layout might not show properly in the Divi Builder, Only on the front end It will be 100% accurate. This is something elegant themes will be improving in the near future for rendering divi library layout in visual builder.

The Supreme Advanced Tabs Module is the perfect module to create stunning High-Quality Tabs in Divi. The module features Beautiful Animations and a wide range of customization options & functionalities, allowing you to create tabs that perfectly match your website’s design.

Content Options

Adding Tab Items

Click on + Add new Item to add your first Tab Item . Clicking + Add new Item will open a completely new list of design settings (including Content, Design, Advanced) for your new Tab Item.

See below for individual Tab Item settings.

After you add your first Tab Item, you will see a gray bar Tab Item near with the title of your Tab shown as a label. The gray bar also has three buttons that allow you to edit, duplicate, or delete the Tab Item.

General

Layout

Here you can change the Layout type of the Tabs. You can change it to:

• Horizontal
• Vertical
• Column

Position

Here you can change the Position of the Tabs, to Top/Bottom or Left/Right, depending upon the Layout you chose.

Trigger

Change the Trigger for Tabs to change, you can set it to "Click" or "Hover".

Show Arrow for Active Tab

Enable this option to show a cool arrow for Active Tab.

Content Animation

Here you can add Animation to the Content from many different Animations. It will apply the animation to the Wrapper.

Inner Content Animation

Here you can add Animation to the Inner Content from many different Animations. It will apply the animation to the Inner Content.

Tabs Alignment

Here you can change the Aligment of the Tabs to where it looks good to you.

Tabs Image/Icon Placement

This is where you can change the Tabs Image/Icon Placement to Left, Right or Top of the tab.

Enable Deeplink

Enabling this option will allow you to open a certain tab just from the URL, Simply enable the option and when you go to the page on frontend, and change to a different tab, you'll see the URL changes in the address bar of the browser. Simply copy and paste it anywhere, and the selected tab will be open by default.

Enable Image Lightbox

If you want to open the Content Image in the lightbox, enable this option.

Make Tabs Stick to Top

If you want your Tabs to be sticky on scroll (Helpful when you've long content in your tabs), simply enable this option. You'll then see the option to control the Top offset value.

Auto Scroll on Mobile

Enabling this option will automatically scroll to the tab content on Mobile If you've many tabs, making it easer for users to see content.

Design Options

Tabs Wrapper

Here you can add stylings to the Tabs Wrapper.

Width

Change the Width of the Tabs Wrapper here.

Margin

Here you can add Margin to the Tabs Wrapper.

Padding

Here you can add Padding to the Tabs Wrapper.

Background

Here you can add Background to the Tabs Wrapper.

Alignment

Change the Alignment of the Tabs Wrapper here.

Else you can customize the Tabs Wrapper by adding Border, Border Radius & Box Shadow etc.

Image & Icon

Here you can style the Image & Icon on the Tabs.

Image Width

If you've selected Image for Tab, then you can change Its width from here.

Icon Font Size

If It's an Icon, you can change its size here.

Icon Color

Change the Icon Color here for Normal State.

Active Icon Color

Change the Icon Color here for Active State.

Margin

Here you can add Margin to the Tabs Image or Icon.

Padding

Here you can add Padding to the Tabs Image or Icon.

Else you can customize the Tabs Image & Icon by adding Border, Border Radius & Box Shadow etc.

Content Image & Icon

Here you can customize the Image & Icon found in the Content area.

Margin

Here you can add Margin to the Content Image or Icon.

Padding

Here you can add Padding to the Content Image or Icon.

Icon Font Size

If you've selected Icon for Tab, you can change its size here.

Image Width

If It's the Image, then you can change Its width from here.

Else you can customize the Content Image & Icon by adding Border, Border Radius & Box Shadow etc.

Tabs

This is where you can style the Tabs, change active/inactive color and more.

Gap

Change the Gap between Tabs here.

Inactive Background

Here you can change the Background color of the Inactive tabs.

Active Background

Here you can change the Background color of the Active tab.

Inactive Color

Here you can change the Text color of the Inactive tabs.

Active Color

Here you can change the Text color of the Active tab.

Else you can customize the Tabs by changing its font, size, color and weight & even add Border, Border Radius & Box Shadow & Active Box Shadow. However you like.

Content

Here you can style the Content the way you like.

Background

Here you can change the Background color of the Content.

Margin

Here you can add Margin to the Content.

Padding

Here you can add Padding to the Content.

Else you can customize the Content area by changing its Title/Body font, size, color and weight & even add Border, Border Radius & Box Shadow to the Content.

Button

Enable Use Custom Styles for the button to add custom styling to the button. You can design the button same way you always design your Divi Buttons you can change button, font, size, weight and more and play with Margin and Padding and also you can add Corner Radius, Border and Box Shadow to the button.

Advanced Options

Use the advanced options to give your Advanced Tabs module custom CSS ID’s and Classes. Add some custom CSS for advanced styling and designate the module's visibility on certain devices.

Advanced Tabs Item Content Options

Tabs

Title

Here you can change the Title of the Tab.

Use Image/Icon

If you'd like to use Image/Icon for the Tab, you can enable this option and then you can choose whether to use Image or Icon.

Content

Here you can change the Content of this Tab Item.

Content Type

Here you can change the Content Type, you can choose from:

• Content - Will give you options to add Image/Icon, Title, Body etc to the Content.
• Divi Library - Will give you the option to choose a Layout from Divi Library for Content.

Below options will show up when using "Content" type.

Title

Change the Title of Content here.

Content

Add Body/Description in the Content here.

Use Image/Icon

If you'd like to use Image/Icon for the Content, you can enable this option and then you can choose whether to use Image or Icon.

Image/Icon Placement

Here you can change the Placement of Image/Icon to "Left" or "Top".

Button Text

If you'd like to add a Button, simply add in Button Text here.

Button URL

Change the Button URL here.

Button Link Target

Change the Button Link Target to either open in "Same Window" or in a "New Tab".

Advanced Tabs Item Design Options

Tabs Image & Icon

Here you can style the Image & Icon on the Tabs.

Image Width

If you've selected Image for Tab, then you can change Its width from here for this item.

Else you can customize this Tab Image & Icon by adding Border, Border Radius & Box Shadow etc.

Content Image & Icon

Here you can customize the Image & Icon found in the Content area for this item.

Margin

Here you can add Margin to the Content Image or Icon.

Padding

Here you can add Padding to the Content Image or Icon.

Else you can customize this Content Image & Icon by adding Border, Border Radius & Box Shadow etc.

Tabs

Here you can customize this Tab by changing its font, size, color and weight etc.

Content

Here you can customize this Tab Content by changing its font, size, color and weight etc.

Button

Enable Use Custom Styles for the button to add custom styling to this Item button. You can design the button same way you always design your Divi Buttons you can change button, font, size, weight and more and play with Margin and Padding and also you can add Corner Radius, Border and Box Shadow to the button.

Advanced Tabs Item Advanced Options

Use the advanced options to give your Advanced Tabs Item custom CSS ID’s and Classes. Add some custom CSS for advanced styling and designate the module’s visibility on certain devices.