The Advanced tab tool can be used to create tabs on different sections of the website and make it look eye-catching to your visitors. 

Video Instruction #

Using Advanced Tab #

Go through the following steps to use the Advanced Tab tool on your website and display visually appealing tabs. 

Step 1 #

From the menu bar on the left-hand side, select the Image Carousel. Drag and drop the widget on the area you want it to be.

Step 2 #

Choose from the built in options to display your tabs on the webpage. It has 4 unique presets you can pick from. 

Tab widget on Elementor page builder

Step 3  #

In the Content section, you can add different titles that will be displayed within the tab. You can customize the options in detail as well. 

Tab widget's content menu

You can add title, description, add and edit icons, modify buttons, and more to make the tabs more appealing to the viewers. 

Tab widget's content settings tab

Step 4 #

In this section, you can make the tabs exclusive with designs and other variations. The style option allows you to customize general modification, tab title, caret, and content of the widget. 

General #

From the General section, you can add padding, margin, border, and box-shadow to your tabs to make it stand out on your web page. 

Tab widget's general style settings tab

Tab Title #

In the Tab Title section, you can modify the typography of the title, padding, margin, background color, type and more. You can also add images on the tab and make an eye-catchy design with the help of border variations. 

Tab widget's title settings tab
Tab widget's title settings tab

Caret #

Caret comes with the Tab widget and you can choose, if you want to show it or not. From here, you can change the size and color of the caret.

Tab widget's title settings tab

Border #

In a few presets in the advanced tabs option you can add borders and create a stylish and different outlook for tabs. In the border section, you can add height from different sides to create borders. 

Tab widget's border settings tab

Step 5  #

In the Advanced section of the widget, you will have the flexibility to add margin and padding to the widget. You can also modify the Z-index to customize the widget more. 

Tab widget's advanced settings tab

You will also get the chance to edit and customize the following options: Motion Effects, Background, Border, Positioning, Responsive, Attributes, Custom CSS. 

Motion Effects #

From the Motion Effects option, you can add different effects such as fading, zooming, bouncing, sliding, rotating, attention-seeking motion, lightspeed, and more effects to make your widget look different. 

Tab widget's motion effects settings tab

Background #

If you want to customize the background with specific color, gradient or images, you can do that from the advanced settings as well.

 

Tab widget's background settings tab

Border #

If you want to add any line, box, dots and other design variations as borders of the widget, you can do it from here. You can also customize the size and insert shadow effects if you want to. 

Tab widget's border settings tab

Positioning #

This feature will allow you to fix the positioning of the widget. From the width section you can select if the position will be full width, inline, or customized. And you can set the position as absolute or fixed as well from these settings. 

Tab widget's positioning settings tab

Responsive #

You can check the responsiveness of the widget if you toggle through the available options. However the change of the widget will be only visible on the live page or preview, not in the Elementor.

Tab widget's responsive settings tab

Attributes #

With Attributes, you can add custom HTML attributes to any elements. However, this feature is only available with the pro version of the Droit Elementor Addons. 

Custom CSS #

Custom CSS lets you add CSS code to any widget, and see it render live right in the editor. However, this feature is only available with the pro version of the Droit Elementor Addons.

Powered by BetterDocs