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.
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.
You can add title, description, add and edit icons, modify buttons, and more to make the tabs more appealing to the viewers.
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.
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 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.
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.
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.
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.
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.
If you want to customize the background with specific color, gradient or images, you can do that from the advanced settings as well.
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.
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.
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.
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.