# Multicolumn

***

### 1. Our guide to set up a Multicolumn section:

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

* In the theme editor, click **Add section.**
* Select **Multicolumn.**
* Click **Save.**
  {% endhint %}

<figure><img src="https://1670075522-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F6M5ltDUBhmgWKXclaWBK%2Fuploads%2F2BZKKeDma5WfNFbiMNf5%2FScreenshot%202023-12-21%20at%2010.39.23%20PM.png?alt=media&#x26;token=d55da242-3255-4d2c-904a-25005c018310" alt=""><figcaption></figcaption></figure>

### **2. Section blocks: Column**

<figure><img src="https://1670075522-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F6M5ltDUBhmgWKXclaWBK%2Fuploads%2FVY8WwXZfN4urQ7S0v9gX%2FScreenshot%202023-12-21%20at%2010.37.15%20PM.png?alt=media&#x26;token=86f6e5d9-5f1e-4180-9e95-ae497bb54f43" alt=""><figcaption></figcaption></figure>

* Click **(+) Add column** to add a new **Column (**&#x43;lick **Remove block** or the eye icon to delete or hide a block.)
* Under **Image**, click **Select image** to upload an image to display at the top of the column.
* Enter text for the column **Heading.**
* Enter **Description** as the main column content below the **Heading**.
* Fill in **Link label** and paste a URL for the **Link**.

<figure><img src="https://t9008110498.p.clickup-attachments.com/t9008110498/58d882c6-5fd3-418e-b71e-87f4acf4f8f6/Screenshot%202023-11-16%20at%203.08.54%20PM.png" alt=""><figcaption></figcaption></figure>

### **3. Multicolumn section settings:**

* Click on the **Multicolumn** section to open the section settings.

<figure><img src="https://t9008110498.p.clickup-attachments.com/t9008110498/036047a4-645c-4a2b-aaf7-fd39dd86528c/Screenshot%202023-11-16%20at%202.03.25%20PM.png" alt=""><figcaption></figcaption></figure>

* **Heading:** Change the **Heading** text as a title for your section. Delete the text in this field to remove the heading.

<figure><img src="https://1670075522-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F6M5ltDUBhmgWKXclaWBK%2Fuploads%2FCbHf5ovAR3xd309DDCJG%2FScreenshot%202023-12-21%20at%2010.44.01%20PM.png?alt=media&#x26;token=b4cb9a5e-8a80-4b8a-81a8-fa119d6682a3" alt=""><figcaption></figcaption></figure>

* **Button**: Add a **Button label** and **Button link** to display a call-to-action button underneath the column.

<figure><img src="https://1670075522-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F6M5ltDUBhmgWKXclaWBK%2Fuploads%2F1KTI7J4qP1ylurBGNo5r%2FScreenshot%202023-12-21%20at%2010.44.09%20PM.png?alt=media&#x26;token=523cecf7-e4c6-45e5-b709-e7a9b6ab4499" alt=""><figcaption></figcaption></figure>

* To make your images a uniform shape and size, select the **Image aspect ratio** to crop your images to **Square**, **Circle**, or **Portrait**. The **Adapt to image** setting will display the original orientation of each image.

<figure><img src="https://1670075522-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F6M5ltDUBhmgWKXclaWBK%2Fuploads%2FcmSJX8ijYwHhTCOdlt4u%2FScreenshot%202023-12-21%20at%2010.50.10%20PM.png?alt=media&#x26;token=1d058576-821a-482a-89df-9a5005569745" alt=""><figcaption></figcaption></figure>

* Select **colors** for the Background: Use the **Color scheme** dropdown to set the color for the multicolumn section. Color only appears when you select to show the **Secondary background**.

<div><figure><img src="https://1670075522-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F6M5ltDUBhmgWKXclaWBK%2Fuploads%2FNP9X1JB8gziCIAyhEwPA%2FScreenshot%202023-12-21%20at%2010.51.25%20PM.png?alt=media&#x26;token=d64396cb-9d81-4241-bcfe-a363a8d32b65" alt=""><figcaption></figcaption></figure> <figure><img src="https://1670075522-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F6M5ltDUBhmgWKXclaWBK%2Fuploads%2FDC6vTzBpZdDgiMas3VfV%2FScreenshot%202023-12-21%20at%2010.51.38%20PM.png?alt=media&#x26;token=da38b44b-d87c-4896-accb-4977a710a7c6" alt=""><figcaption></figcaption></figure></div>

* Change the **Image width** to **Full/Half/One-third width of column**:

<figure><img src="https://1670075522-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F6M5ltDUBhmgWKXclaWBK%2Fuploads%2FX6UWAMnfzYR8tFoSqJbm%2FScreenshot%202023-12-21%20at%2010.53.30%20PM.png?alt=media&#x26;token=92c6153b-f745-41d2-be57-c2ce2c7164d4" alt=""><figcaption></figcaption></figure>

* Select the **Column alignment** options to make the Column content **Left** or **Center** aligned.

<figure><img src="https://1670075522-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F6M5ltDUBhmgWKXclaWBK%2Fuploads%2FAmsWaIN01bceKajkcYwl%2FScreenshot%202023-12-21%20at%2010.54.00%20PM.png?alt=media&#x26;token=6cc33519-85eb-429e-abb7-684cbb503eb7" alt=""><figcaption></figcaption></figure>
