# Advanced Tabs

The **Advanced Tabs** **Widget** is **used to** add a tabbed section anywhere on your site. It allows you to represent a large amount of information concisely within a small arena.

### Using the Advanced Tabs widget

Go to your site and start editing the page with Elementor.

### Step 1:

Select the **Advanced Tabs** widget from the menu bar on the left-hand side of your screen then drag and drop it into the selected area.

![](https://1186712708-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fe1Jo7DkgxZUy8C30NAXD%2Fuploads%2FNb5qgcEYFfbgfuYWpv35%2FCompanion%20-%20adv%20tab%20add.png?alt=media\&token=922c92a8-cf77-4509-8899-dd3aafbfe53f)

### Step 2:

You will get a window with the basic setting options under the **Content** tab. In **General settings**, you can add the title to the Widget section and add new tab items:

![](https://1186712708-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fe1Jo7DkgxZUy8C30NAXD%2Fuploads%2F0Hz9ZRHPAXyl8ovbyTP4%2FCompanion%20-%20adv%20tab%20general.png?alt=media\&token=1d3a2377-80d6-4118-914b-825bbe90cb79)

In the **Tab List** section, you can add content to the tab items:

![](https://1186712708-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fe1Jo7DkgxZUy8C30NAXD%2Fuploads%2F8nzoZROqVI0l9IIzOXdL%2FCompanion%20-%20adv%20tab%20items.png?alt=media\&token=d82f6723-0f11-4829-9cbe-99785536669b)

Hit on the **Add item** to add new tab items.

### Step 3:

Now, by clicking on the Style Tab you can customize the text color, typography, margin, padding, and many more for used Items:

![](https://1186712708-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fe1Jo7DkgxZUy8C30NAXD%2Fuploads%2FEs4VjkgYubk2g7CKbbmn%2FCompanion%20-%20adv%20tab%20style.png?alt=media\&token=dff5a0a9-43ca-493c-a5ac-e69bdd3422dd)

### Step 4:

If you want to add motion effects, background, or make the page responsive, click on ‘Advanced**’** to explore those options. This **‘Advanced’** tab is a default feature of Elementor. Give a read to [this Document](https://docs.elementor.com/article/571-advanced-tab) to know more about Advanced features and their uses.

![](https://1186712708-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fe1Jo7DkgxZUy8C30NAXD%2Fuploads%2F5vZlNlYUH7oKYrYEqqRO%2FCompanion%20-%20adv%20tab%20adv.png?alt=media\&token=2620aa06-6255-4359-9f85-f035f601ee31)

Finally, after completing all the customization click on ‘Publish’ to see your work live.

![](https://1186712708-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fe1Jo7DkgxZUy8C30NAXD%2Fuploads%2F6wWTqlpMU8JTkNUKmscv%2FCompanion%20-%20adv%20tab%20final.png?alt=media\&token=84f2854d-0c59-4e53-a51d-a8b862cd7eb3)

Great job! You have done it successfully.

![](https://1186712708-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fe1Jo7DkgxZUy8C30NAXD%2Fuploads%2FYs8AugXIQ6TzU99XO1QX%2FAdvanced%20Tabs.gif?alt=media\&token=8fa0a8c5-cf68-4288-8c41-01dbba5abe2c)