# Collage tabs

<figure><img src="https://3064615700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3yE7VVjvl0MgK6awOPKB%2Fuploads%2FAXzuTEStMuK2DuHRX1xJ%2FFrame%205250.png?alt=media&#x26;token=ab9ab003-788f-4ea6-a2aa-3e295996f13f" alt=""><figcaption></figcaption></figure>

The collage tab is a modern and eye-catching section with images and content presented in different tabs.

## How to add a Collage tabs section

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

1. In the theme editor **(Customize)**, click **Add section.**
2. Locate **Collage tabs.**
3. **Save.**
   {% endhint %}

## How to edit a Collage tabs section

### Section settings

#### Tab settings

Set a **Navigation alignment** (Left/ Center/ Right) and **image position** (Left/ Right) for the **desktop view**.

You can also adjust the **Desktop image width** (30-70%).

Select the **Image aspect ratio** for both views as one of the following options:

* Adapt to image/ Square (1:1)
* Portrait (3:4)
* Landscape (4:3)

<figure><img src="https://3064615700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3yE7VVjvl0MgK6awOPKB%2Fuploads%2F202KBHy96nT7wqliily3%2Fimage.png?alt=media&#x26;token=5446d6dc-ecba-41ad-bf6b-6ed0dec87810" alt=""><figcaption></figcaption></figure>

### Block settings

<figure><img src="https://3064615700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3yE7VVjvl0MgK6awOPKB%2Fuploads%2Fx5QKrR5C3lWAiK4PQy0Y%2Fimage.png?alt=media&#x26;token=fdd06a1c-cc3b-44c5-a32f-4696eb1e5d8f" alt=""><figcaption></figcaption></figure>

#### Tab

Select the main **Color scheme, Navigation title,** and **Image** for the block.

<figure><img src="https://3064615700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3yE7VVjvl0MgK6awOPKB%2Fuploads%2FZsUvQ5GYdEeYA23fylIQ%2Fimage.png?alt=media&#x26;token=2894f79b-141b-488f-85a0-c0767d84e4eb" alt=""><figcaption></figcaption></figure>

Give a name to the tab to navigate by filling in the **Navigation title** field.

<figure><img src="https://3064615700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3yE7VVjvl0MgK6awOPKB%2Fuploads%2Fe6910BC0Eybb2rx7mZ9w%2Fimage.png?alt=media&#x26;token=46b6f338-ba3b-4158-8c3e-a7eb19f893a6" alt=""><figcaption></figcaption></figure>

Then, upload the **Image** you want to use and insert its content (Heading, Subheading, and Description).

<figure><img src="https://3064615700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3yE7VVjvl0MgK6awOPKB%2Fuploads%2FQsHtxfJKkJzYUxKSX7lN%2Fimage.png?alt=media&#x26;token=b78857a2-3e90-4769-ba08-713f828b2bef" alt=""><figcaption></figcaption></figure>

Set the **Text alignment** of the content: Left/ Center/ Right.

#### Button settings

You can also add a button to each tab to direct customers to your desired page.

Give the button a **label** and specific **Button style** (Primary button/Secondary button/Underline button), and insert the **Button** **link**.

<figure><img src="https://3064615700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3yE7VVjvl0MgK6awOPKB%2Fuploads%2FBggKG3NX0JrtUdTOGLDN%2Fimage.png?alt=media&#x26;token=e8f30dd1-20a3-4462-89da-da678beb0f55" alt=""><figcaption></figcaption></figure>
