> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.dorik.com/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# Tab

# Getting Started

You can add tabs to your website with the Tab element. This article will cover how to add and edit a tab element using the following element. Follow all instructions accordingly.

Follow the steps below to add a **Tab element** to your site. 

- Click on the `(+)` button labelled **Add Element or Container** within an empty container
- From the **Elements** tab, select **Tab Element**

**Refer to the GIF below:**

![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/gif-recording-2024-05-12-at-25_1la82k.gif)


![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/image_1uttbzg.png)

![Tab element after it is added](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/image_17gjcz6.png)


# Editing the Tab element

Follow the steps and instructions below to add and edit a **Tab element** on your site.

The **Tab** element editor has the following options:

* Tabs Items
* Title Style
* Content Style
* Tabs Options
* Background

The **Tab** element editor:

![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/image_14uyh44.png)

# Tab Items

This option lets you copy, edit and delete items in your tab. Refer to the GIF below to demonstrate the settings inside this option.

![](https://cdn.cmsfly.com/63969cb64dabfc00be8d85e0/gif_recording_2022-09-04_at_3.00.29_pm-X3lbOv.gif)

# Title Style

This option lets you stylize the title in the Tab element. With options like changing the color, adding a background etc.

Refer to the **GIF** below to see the settings being demonstrated inside this option ⬇️

![](https://cdn.cmsfly.com/63969cb64dabfc00be8d85e0/gif_recording_2022-09-04_at_3.02.00_pm-QWiF83.gif)

# Content Style

The content inside the Tab element can be edited from the Content Style option. 

Refer to the **Image** and **GIF** below to see the settings being demonstrated inside this option ⬇️

![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/image_1mpekao.png)

![](https://cdn.cmsfly.com/63969cb64dabfc00be8d85e0/gif_recording_2022-09-04_at_3.07.30_pm-djmiWZ.gif)

# Tabs Options

This option lets you set a breakpoint for each tab. Use the Selected Tab option to choose the tab where you want to change the breakpoint.

![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/image_io11zl.png)

# Background

In this option, you can change the background of the tab element, from adding a plain color to changing the gradient.

![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/gifrecording2022-09-04at31222p_1gqiraq.gif)