# Multi-column

The **Multi-column** section displays a row of text blocks with optional images and icons, great for highlighting your values, how your company works, or explaining key elements of your product.

<figure><img src="https://475958657-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fyt3Wwaqhge0XvrXmVj7D%2Fuploads%2FKp0Gay0C51dQx65iRsk7%2Fmulti-column-botanical.png?alt=media&#x26;token=16b586ef-8a30-4ad5-bba1-9a88332900b3" alt=""><figcaption></figcaption></figure>

{% hint style="warning" %}
**Editing templates will change all pages that use the same template**. [Create new templates](https://help.fluorescent.co/cornerstone/general/editing-themes/using-templates#create-and-assign-multiple-templates) for different page layouts, or [show dynamic page content](https://help.fluorescent.co/cornerstone/general/adapting-your-theme/dynamic-content-with-metafields) in the same template.
{% endhint %}

## Set up section

***

In the editor side panel, click **(+) Add section** and select **Multi-column**. Click and hold the drag handles **`⋮⋮`** to re-order sections.

### Section styles

Sections include general styles. Click the section to find options for **colors**, **spacing**, and **animations**.

<table data-view="cards"><thead><tr><th align="center"></th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td align="center"><mark style="color:blue;"><strong>Section colors</strong></mark></td><td><a href="../section-styles#section-colors">#section-colors</a></td></tr><tr><td align="center"><mark style="color:blue;"><strong>Section spacing</strong></mark></td><td><a href="../section-styles#section-padding">#section-padding</a></td></tr><tr><td align="center"><mark style="color:blue;"><strong>Section animations</strong></mark></td><td><a href="../section-styles#section-animations">#section-animations</a></td></tr></tbody></table>

## Add column blocks

***

Add up to 8 **Columns** with a featured image, headings, and button. There are 2 types of column blocks: **Text column** and **Image with text column.**

<details>

<summary><mark style="color:blue;"><strong>STEPS</strong></mark></summary>

In your theme editor (**Customize**):

1. Click on a **Column block** to open the settings.

   > Click **(+) Add block** to add a **Text column** or **Image with text column**.

   > Click **Remove block** or the eye icon to delete or hide a block.
2. Under *Image*, click **Select image** to upload an image or icon to display at the top of the column.
3. Adjust the **Max width of text** of the Column text using the slider.

   > The width will need to be adjusted when there are two columns per row on desktop.

   > Experiment with this setting to find a clean visual shape for your text.
4. Enter text for the column **Heading**.
5. Enter **Text** as the main column content below the Heading.

   > We also recommend trying to keep the text for all Columns around the same length.
6. Select or paste a URL for the **Button Link**.
7. Change the **Button label**.

   > Leave this field blank to remove the button.
8. Select a **Button style**: either **Solid**, **Outline**, or **Text**.
9. Click **Save**.

</details>

`Click Column block to find settings`

<table><thead><tr><th width="164">Setting</th><th>Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Text width</mark></td><td>Set the maximum width of heading text as a percentage of the window width on a desktop.</td></tr><tr><td><mark style="color:blue;">Accent</mark></td><td>Add text to show a small heading above the main heading.</td></tr><tr><td><mark style="color:blue;">Heading</mark></td><td>Add text for the column block heading. We recommend using a short title.</td></tr><tr><td><mark style="color:blue;">Heading size</mark></td><td>Change the font size of the heading from small (1) to large (8).</td></tr><tr><td><mark style="color:blue;">Text</mark></td><td>Add text to show beneath the heading.</td></tr><tr><td><mark style="color:blue;">Text size</mark></td><td>Change the font size of the text from small (1) to large (8).</td></tr><tr><td><mark style="color:blue;">Button link</mark></td><td>Select or paste a URL for a button. This link applies to the entire grid item if the button label field is blank.</td></tr><tr><td><mark style="color:blue;">Button label</mark></td><td>Enter call-to-action text to display as the button label. The most effective button labels ask customers to do something (e.g. Get started, Join us, Shop now).</td></tr><tr><td><mark style="color:blue;">Button style</mark></td><td>Change the style of the button. Select Primary button (Solid), Secondary button (Solid), Tertiary button (Outline), or Text.</td></tr></tbody></table>

`Click Image with text column block to find settings`

<table><thead><tr><th width="238">Setting</th><th>Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Image</mark></td><td>Select or upload an image. There are no required dimensions. We recommend using the same shape and size of images for multiple columns with images.</td></tr><tr><td><mark style="color:blue;">Image width</mark></td><td>Set the width of the image between <strong>50</strong> and <strong>100</strong> percent of the column width.</td></tr><tr><td><mark style="color:blue;">Image aspect ratio</mark></td><td>Crop the shape of your image to <strong>Square (1:1)</strong>, <strong>Landscape (3:2)</strong>, or <strong>Portrait (2:3)</strong>. Choose <strong>Natural</strong> to display the original image shape.</td></tr><tr><td><mark style="color:blue;">Image focal point</mark></td><td>Select the most important part of the image to keep centered. Use focal points to avoid unwanted cropping across different screen sizes.</td></tr><tr><td><mark style="color:blue;">Image position</mark></td><td>Display the image <strong>Above text</strong> or <strong>Below text</strong></td></tr><tr><td><mark style="color:blue;">Image link</mark></td><td>Enter a URL or page to turn the image into a clickable link.</td></tr><tr><td><mark style="color:blue;">Small caption</mark></td><td>Enter text to show below the image.</td></tr></tbody></table>

### Change content alignment

***

Adjust the alignment and position of the headings and text within all columns.

<details>

<summary><mark style="color:blue;"><strong>STEPS</strong></mark></summary>

In your theme editor (**Customize**):

1. Click the **Multi-column** section to open the section settings.
2. Set the **Content vertical alignment** and **Column alignment**.
3. Set the **Content background padding**: Applies to blocks when "Show background behind columns" is enabled.

</details>

### Change columns layout

***

In the section settings, you can adjust the overall layout of the column blocks.

* Choose the **number of columns** to display per row
* Change the amount of **spacing** between columns

<details>

<summary><mark style="color:blue;"><strong>STEPS</strong></mark></summary>

In your theme editor (**Customize**):

1. Click on the **Multi-column** section to open the settings.
2. Change the **Number of columns** to display **`1 - 6`** columns for Desktop and **`1 - 2`** for Mobile.
3. Change the **Column spacing** to set the maximum pixel width (**`4 - 48`** px) between the left and right edges of columns.
4. Change the **row spacing** to set the maximum pixel width (**`4 - 48`** px) between the bottom and top of columns.
5. Click **Save**.

</details>

`Click Multi-column section to find settings`

<table><thead><tr><th width="211">Setting</th><th>Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Number of columns on desktop</mark></td><td>Choose how many items to display in each row: between 1 and 5 columns.</td></tr><tr><td><mark style="color:blue;">Column spacing</mark></td><td>Increase or decrease the spacing between columns: from 4 to 48 pixels.</td></tr><tr><td><mark style="color:blue;">Row spacing</mark></td><td>Increase or decrease the spacing between rows: from 4 to 48 pixels.</td></tr></tbody></table>

## Show text box

***

Choose to display the content blocks with a box with a color background. You can show tiles with shadows or borders.

`Click Multi-column section to find settings`

<table><thead><tr><th width="203">Setting</th><th>Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Show text box</mark></td><td>Display all column blocks within a container.</td></tr><tr><td><mark style="color:blue;">Text box style</mark></td><td>Display boxes with a <strong>Soft drop shadow</strong>, <strong>Solid drop shadow</strong>, or <strong>Borders</strong> with different thicknesses.</td></tr><tr><td><mark style="color:blue;">Color scheme</mark></td><td>Change the color scheme applied to the text box.<br><br>Use the <strong>Default</strong> color scheme from your theme settings or select a variant scheme based on the default: either <strong>Inverse</strong>, <strong>Soft</strong>, <strong>Accent</strong>, or <strong>Sale</strong>. You can also select a <strong>custom color scheme.</strong> <a href="../../../theme-styles/colors#color-schemes">Learn more</a>.</td></tr><tr><td><mark style="color:blue;">Override with custom colors</mark></td><td>Use custom colors for this section to override the color scheme.</td></tr><tr><td><mark style="color:blue;">Text color</mark></td><td>Select a custom color for text within the text box.</td></tr><tr><td><mark style="color:blue;">Background color</mark></td><td>Select a custom color for the background of text box.</td></tr></tbody></table>

## Section header

***

The **Section header** appears above the section. Add a **heading**, **subheading**, and optional **button**.

`Click Multi-column section to find settings`

<table><thead><tr><th width="202">Setting</th><th>Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Center header content</mark></td><td>Choose to display headings as center-aligned within section. Uncheck this option to align headings to the left.</td></tr><tr><td><mark style="color:blue;">Accent</mark></td><td>Add text to show a small heading above the main section heading.</td></tr><tr><td><mark style="color:blue;">Heading</mark></td><td>Add text to show a main heading above the section.</td></tr><tr><td><mark style="color:blue;">Subheading</mark></td><td>Add text to show a subheading below the main heading.</td></tr><tr><td><mark style="color:blue;">Maximum text width</mark></td><td>Set the maximum width of heading text between <strong>400</strong> and <strong>1000</strong> px.</td></tr><tr><td><mark style="color:blue;">Button link</mark></td><td>Select or paste a URL for a button. This link applies to the entire grid item if the button label field is blank.</td></tr><tr><td><mark style="color:blue;">Button label</mark></td><td>Enter text to display as the button label. The most effective button labels ask customers to do something (e.g. Join us, Shop now).</td></tr><tr><td><mark style="color:blue;">Button style</mark></td><td>Change the style of the button. Select Primary button (<strong>Solid</strong>), Secondary button (<strong>Solid</strong>), Tertiary button (<strong>Outline</strong>), or <strong>Text</strong>.</td></tr></tbody></table>

***

> **Related links**
>
> [Grid](https://help.fluorescent.co/cornerstone/pages/theme-sections/grid)\
> [Icon list with columns](https://help.fluorescent.co/cornerstone/pages/theme-sections/icon-list-with-columns)\
> [Image with content](https://help.fluorescent.co/cornerstone/pages/theme-sections/media-with-content)\
> [Image with content split](https://help.fluorescent.co/cornerstone/pages/theme-sections/media-with-content-split)