# Vertical tabs

***

The **Vertical tabs** section organizes content into clickable tabs, allowing customers to switch between different media (images/videos) and content without leaving the section. It’s ideal for showcasing collections, features, or storytelling in a structured and interactive layout.

### 1. Our guide to set up a Vertical tabs section:

{% hint style="info" %}
**Steps:**

* In the theme editor, click **Add section.**
* Locate **Vertical tabs.**
* Click **Save.**
  {% endhint %}

<figure><img src="/files/npgGntvS84Fn49eM41q5" alt=""><figcaption></figcaption></figure>

### 2. **Section settings**

<figure><img src="/files/AwdLGAujKcsvtTFl4wwp" alt=""><figcaption></figcaption></figure>

* **Color scheme:** Controls the overall background and text colors of the section, including tab titles.
* **General**
  * **Heading:** Add a title for the section.
  * **Heading size:** Adjust the prominence of the heading.
  * **Desktop image height:** Set a fixed height for media on desktop.
  * **Adapt section height to image size:** When enabled, the section height follows the original image size.&#x20;
* **Mobile layout**
  * **Mobile image height:** Adjust media height on mobile devices.
  * **Mobile content alignment:** Control text alignment for better readability on smaller screens.
* **Corner radius:** Adjust the roundness of media (image/video) inside each tab.

### **3. Tab block settings**

<figure><img src="/files/7gGUKE4jJI1zdSZ0opVK" alt=""><figcaption></figcaption></figure>

Each **Tab block** represents one tab item with its own media and content.

* **Tab heading:** Defines the tab name. *If left empty, the tab will not be displayed.*
* **Content:**
  * **Image:** Upload an image for the tab.
  * **Video:** Upload an autoplay video. *If both image and video are set, video will override the image.*
  * **Media overlay opacity:** Add an overlay to improve text readability on media.
  * **Heading:** Add a title displayed over the media.
  * **Heading size:** Adjust text size.
  * **Description:** Add supporting content below the heading.
  * **Button label:** Add CTA text.
  * **Button link:** Assign a destination URL.
  * **Use outline button style:** Toggle between solid and outline button styles.
* **Colors:** Customize content colors independently from the section:
  * **Heading color**
  * **Text color**&#x20;
  * **Button label color**&#x20;
  * **Button background color**&#x20;
  * **Button outline color**


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://help.inspiredtheme.com/articles/sections/sections-available-in-inspiredtheme/vertical-tabs.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
