# Multicolumn

<figure><img src="https://2841038207-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIGTidUfSjAqopf8pRRmN%2Fuploads%2FJLNHxaQ2174IPjYzUDfv%2F2025-04-04_10-53-34.jpg?alt=media&#x26;token=710bd7a0-8c49-456a-a050-de59c91f1a93" alt=""><figcaption></figcaption></figure>

{% hint style="success" %}
**Steps:**&#x20;

1. In the theme editor **(Customize)**, click **Add section.**
2. Locate **Multicolumn**
3. Make necessary changes. > **Save.**
   {% endhint %}

## General Settings

<figure><img src="https://2841038207-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIGTidUfSjAqopf8pRRmN%2Fuploads%2FucsbzpIBgXVdBmQEn4A2%2F2025-04-04_10-55-41.jpg?alt=media&#x26;token=b1524a6e-0cd7-465f-816e-81273169e2f9" alt=""><figcaption></figcaption></figure>

* **Width** - With of this section 3 options : Boxed / Wide / Full
* **Subheading**&#x20;
* **Heading** - Heading of this section
* **Heading size** - From Heading 1 to Heading 6
* **Description** - Description of this section
* **Layout** - *Horizontal / Vertical*

### View all button

* **Link url**  - Link for button in Header section
* **Link text** - Text for button
* **Button type**  -  there are 7 Options button
* **Show arrow icon**

### Column settings

<figure><img src="https://2841038207-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIGTidUfSjAqopf8pRRmN%2Fuploads%2F043WS1IjUL6F7GNJ2jnX%2F2025-04-04_10-56-40.jpg?alt=media&#x26;token=b4234013-5bfe-4c24-a521-da154da3e896" alt=""><figcaption></figcaption></figure>

* **Image width**  - Small / Medium / Large / Xtra large / Full
* **Image ratio -** Adapt to image / Square (1:1) / Portrait (3:4) / Landscape (4:3) / Landscape (5:3.5) / Wide (16:9)
* **Column heading size** - from Heading 1 - Heading 6
* **Column alignment** - Left / Center / Right

### **Grid settings**

<figure><img src="https://2841038207-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIGTidUfSjAqopf8pRRmN%2Fuploads%2Fl9MkUh9aM02w4jHYtzud%2F2025-04-04_10-57-53.jpg?alt=media&#x26;token=cb5b5992-b965-4634-b042-02624b428120" alt=""><figcaption></figcaption></figure>

* **Stack columns** -  Display columns in a grid layout. ( If disable Layout columns is carousel )
* **Show carousel progress bar**
* **Enable overflow visible** - When this feature is enabled, the Carousel will be allowed to overflow from the container
* **Column (Desktop) -** Number columns per row for desktop
* **Gap (Desktop) -** Spacing each column

### Mobile Layout

<figure><img src="https://2841038207-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIGTidUfSjAqopf8pRRmN%2Fuploads%2FLsC9A9VUAHMfLSlU2jnh%2F2025-04-04_10-58-50.jpg?alt=media&#x26;token=040c775c-3807-4aa7-a587-77b11913c11c" alt=""><figcaption></figcaption></figure>

* **Columns on mobile** : 1 column / 2 columns&#x20;
* **Gap (mobile)**
* **Enable swipe on mobile**

### Colors

<figure><img src="https://content.gitbook.com/content/IGTidUfSjAqopf8pRRmN/blobs/UGk0oLMDJ9FIGhG6FfAC/color-c.jpg" alt="" width="280"><figcaption></figcaption></figure>

* **Background**
* **Text color**

### Section padding

<figure><img src="https://content.gitbook.com/content/IGTidUfSjAqopf8pRRmN/blobs/n2xL6bjz1tYl76g1pebr/padding-c.jpg" alt="" width="280"><figcaption></figcaption></figure>

* **Top padding**
* **Bottom padding**

## **Block settings**

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

1. Locate **Multicolumnt.**
2. **Add Column.**
3. Make necessary changes. > **Save.**
   {% endhint %}

<figure><img src="https://2841038207-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIGTidUfSjAqopf8pRRmN%2Fuploads%2FLgREbJancXxW0X08SWnI%2F2025-04-04_10-59-42.jpg?alt=media&#x26;token=26eb5b95-b4f9-48f0-b44e-b3b47b0b8e9d" alt=""><figcaption></figcaption></figure>

* Image&#x20;
* Image link
* Heading&#x20;
* Description
* Button
* Button link
* Button style
* Show arrow icon
* Desktop image placement ⇒ Top / Bottom