# Tabs Widget

> Organize content into tabs with the Phox Tabs widget for Elementor: tab items, Elementor templates as content, and tab control styles.

Source: https://phox.wdes.org/docs/tabs-widget/
Last updated: 2020-05-23

![wdes widget tabs](https://phox.wdes.org/docs/assets/wdes-widget-tabs.oXGsbSx__1fImf1.webp)

**Tabs** widget is quite useful when creating tabs and enriching them with all kinds of Elementor-built content. It makes possible to organize content in a smart way and make it look way more stylish.

## Tabs widget Sample

On the pictures below you can view Tabs widget sample.

![wdes tabs widget](https://phox.wdes.org/docs/assets/wdes-tabs-widget.LyxnhkkU_eRve1.webp)

![wdes tabs](https://phox.wdes.org/docs/assets/wdes-tabs-2.tv1XrgiY_1doCKh.webp)

#### Content

![wdes tabs content](https://phox.wdes.org/docs/assets/wdes-tabs-content.BT_v9zpi_VyxCP.webp)

#### Tab Items

- **Title** – type in item Title to apply it.

- **Description** – type in item Description to apply it.

- **Text Decoration** – you will have 2 options, one to use Icon beside Tab Title, and the other one to use Image beside Tab Title.

  - **Icon** – here you can select the icon to apply it to the tab.
  - **Image** – here you can select the image to apply it to the tab.

- **Content-Type** – here you can select to use Editor, for example, write some texts, or you can choose Elementor Template you set before.

  - **Editor** – here you can type your text and apply it to tab content.
  - **Template** – here you need to choose the template to embed it inside the tab. and you will have options to customize tab animation like effect, delay, and speed.

- **Add Item** – click **Add Item** button to add more tabs to the widget.

#### Style

![wdes tabs style](https://phox.wdes.org/docs/assets/wdes-tabs-style-1.CGH7WZJv_Z2kR5Jv.webp)

#### General Tab

- **Tabs Position** – here you can change the tabs position to **top, bottom, left,** or **right**.
  - incase you choose left or right you will get new option Tabs **Control Width** to set the width

* **Background Type** – in this block you can choose, whether you want to use **classic** or **gradient** type for the items. The customization options vary for each type.
* **Padding** – here you can set the preferable custom padding. Fill in the values for the top, bottom, right, and left padding in pixels or % to apply your custom padding.
* **Margin** – input the values for the margins in the required fields.
* **Border Type** – here you can select the needed type of the border to use for the item.
* **Border Radius** – here you can set the border-radius to make the angles more smooth and round.
* **Box Shadow** – here you can apply the shadow for the widget and change the shadow’s settings, such as color, blur, spread, and **position**.

#### Tabs Control

- **Background Type** – in this block you can choose, whether you want to use **classic** or **gradient** type for the items. The customization options vary for each type.
- **Padding** – here you can set the preferable custom padding. Fill in the values for the top, bottom, right, and left padding in pixels or % to apply your custom padding.
- **Margin** – input the values for the margins in the required fields.
- **Border Type** – here you can select the needed type of the border to use for the item.
- **Border Radius** – here you can set the border-radius to make the angles more smooth and round.
- **Box Shadow** – here you can apply the shadow for the widget and change the shadow’s settings, such as color, blur, spread, and **position**.

#### Tabs Control Item

- **Tabs Alignment** – here you can set the alignment of the tabs and make it different for different screen resolutions.
- **Icon Margin** – input the values for the margins in the required fields.
- **Image Margin** – input the values for the margins in the required fields.
- **Image Width** – input the values for the width in the required fields.
- **Icon Position** – here you can choose between left and top icon position.
- **Image Position** – here you can choose between left and top image position.

#### Style State

Switch between **Normal, Hover** or **Active** modes to customize the controls text and icon according to your needs when the tab is active, or in the normal state.

- **Text Color** – here you can change the tab label text color to the one you want.

- **Typography** – turn the option on to view the typography settings.

- **Icon Color** – here you can change the color of the icons to be shown in the tabs.

- **Icon Size** – here you need to customize the size of the icons and make it responsive.

- **Description** – here you will find a bunch of option to customize Tabs Button Description

  - **Typography** – turn the option on to view the typography settings.
  - **Description Color** – here you can change the tab Description text color to the one you want.
  - **Padding** – here you can set the preferable custom padding. Fill in the values for the top, bottom, right, and **left** padding in pixels or % to apply your custom padding.
  - **Margin** – input the values for the margins in the required fields.

- **Background Type** – in this block you can choose, whether you want to use **classic** or **gradient** type for the tabs. The customization options vary for each type.

- **Padding –** here you can set the preferable custom padding. Fill in the values for the top, bottom, right, and left padding in pixels to apply your custom padding.

- **Margin** – input the values for the margins in the required fields.

- **Border Radius** – here you can set the border-radius to make the angles more smooth and round.

- **Border Type** – here you can select the needed type of the border to use for the item.

- **Box Shadow** – here you can apply the shadow for the tab and change the shadow’s settings, such as color, blur, spread, and **position**.

#### Tabs Content

incase you choose in > General Tab > Tabs Position \[left or right] you will get here new option **“Control Width”** to set width for the content.

- **Background Type** – in this block you can choose, whether you want to use classic or gradient type for the content of the tabs. The customization options vary for each type.
- **Typography** – turn the option on to view the typography settings.
- **Color** – here you can change the tab Content text color to the one you want.
- **Padding –** here you can set the preferable custom padding. Fill in the values for the top, bottom, right, and left padding in pixels to apply your custom padding.
- **Border Type** – here you can select the needed type of the border to use for the item content.
- **Border Radius –** here you can set the border-radius to make the angles more smooth and round.
- **Box Shadow –** here you can apply the shadow for the tab content and change the shadow’s settings, such as color, blur, spread, and position.