> For the complete documentation index, see [llms.txt](https://foxecom.gitbook.io/minimog-theme/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://foxecom.gitbook.io/minimog-theme/theme-sections/collage-tab.md).

# Collage tab

<div data-full-width="true"><figure><img src="/files/1OZ2q7N6tFYitFzBKwTz" 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="/files/Pvte1GEvCv2EcBuaSn6n" 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="/files/ve3d6Yn9oWKgJV066Mv0" 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="/files/WQeDoSYm8GXGSUJnPDH0" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/ocpHsIXDDUpjYgy9KIKG" 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="/files/aVfntGbn9XJsLLj2fqGi" 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="/files/05C84nbFjMmW5AdCEtsj" alt=""><figcaption></figcaption></figure>
