# Collage tab

<div data-full-width="true"><figure><img src="https://1997835572-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MlL6sK9D7unq8F2VPPp%2Fuploads%2Fa5w6LQkUFhLWSt58jhjP%2FHelp%20Center%20banner%20%201250%20x%20200-2.png?alt=media&#x26;token=ab0daf12-b917-4435-a603-9a3f6613f853" alt=""><figcaption><p><a href="https://foxecom.com/pages/affiliate?utm_source=minimog%2Bhelp%2Bcenter&#x26;utm_medium=banner&#x26;utm_campaign=foxaffiliatelaunch2024">Explore FoxEcom Affiliate Program now </a><span data-gb-custom-inline data-tag="emoji" data-code="2728">✨</span></p></figcaption></figure></div>

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

<figure><img src="https://lh7-us.googleusercontent.com/AaDtBywOQOeRPKmc3KRN8dQqaioGHHfkP2oI1be8k8GrxfvCLUydl64yex0GJxN654P-i5hS_XsYXaNKzbsPz-YA9GdP09643MiBBEo5Ilh-hEubru8fnn2oPmX7x5Tr4mx0KG9EGUOexPFS-Q7DAUM" alt=""><figcaption></figcaption></figure>

## How to add a Collage tab

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

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

## Section settings

### Collage tabs

Adjust the **Container type** (Default/Full width/ Use container box) and **Color scheme** for this section.

<figure><img src="https://1997835572-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MlL6sK9D7unq8F2VPPp%2Fuploads%2FAIG90LfquNR8HNNBfDhB%2Fimage.png?alt=media&#x26;token=1fb3d83b-484e-4f46-aeed-2a986fb96ed6" alt=""><figcaption></figcaption></figure>

### Tab settings

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

You can also adjust the **Image width** on the desktop view (0-80%).

<figure><img src="https://1997835572-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MlL6sK9D7unq8F2VPPp%2Fuploads%2FeoKZSr8WB35KzpfwlCjQ%2Fimage.png?alt=media&#x26;token=dd8674bb-b83f-4fcd-9fee-4cb0b41ff890" alt=""><figcaption></figcaption></figure>

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)&#x20;

## Block settings

### Tab settings

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

<figure><img src="https://1997835572-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MlL6sK9D7unq8F2VPPp%2Fuploads%2FuGKkkv1owfntxWaaglb0%2Fimage.png?alt=media&#x26;token=632ee859-d5af-4de0-b9b0-13e87cf74959" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://1997835572-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MlL6sK9D7unq8F2VPPp%2Fuploads%2FtyhD2iPXPjwP7ZRiCS7p%2Fimage.png?alt=media&#x26;token=054f6c99-25f8-4e8e-93b0-5ba05be294a0" alt=""><figcaption></figcaption></figure>

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

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

<figure><img src="https://1997835572-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MlL6sK9D7unq8F2VPPp%2Fuploads%2FevSSkA8gwqlG8Ia6GFEf%2Fimage.png?alt=media&#x26;token=b1aae375-28b5-4938-a89f-78d82f813b17" alt=""><figcaption></figcaption></figure>

### 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/White button), and insert the **Button** **link**.

<figure><img src="https://1997835572-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MlL6sK9D7unq8F2VPPp%2Fuploads%2FJtkcu49R9xG7ULNhCeGp%2Fimage.png?alt=media&#x26;token=0b618b48-5dcd-4295-a629-2afdca8cf9ba" alt=""><figcaption></figcaption></figure>
