> For the complete documentation index, see [llms.txt](https://help.fluorescent.co/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.fluorescent.co/stiletto/sections/theme-sections/multi-column.md).

# 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.

<div><img src="/files/QsIP7wffD9wFnxII1KOT" alt=""> <figure><img src="/files/EjgOebeME0qPSh3GvPYO" alt=""><figcaption></figcaption></figure></div>

***

{% columns %}
{% column width="58.333333333333336%" %}

#### Set up section

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

Click the section to edit general **section styles**, like colors, width, padding, and the section header.

{% hint style="info" %}
Editing templates change all pages that use that template. For unique pages, [use new templates](/stiletto/general/editing-themes/using-templates.md#create-and-assign-multiple-templates) or [dynamic metafields](/stiletto/general/adapting-your-theme/dynamic-content-with-metafields.md)
{% endhint %}
{% endcolumn %}

{% column width="41.666666666666664%" %}

#### <mark style="color:$info;">Section style guides</mark>

<table data-view="cards"><thead><tr><th></th><th data-hidden></th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td><i class="fa-bookmark" style="color:$primary;">:bookmark:</i> <mark style="color:$primary;"><strong>Section header</strong></mark></td><td></td><td><a href="/pages/nxNcI6zBaofEs4kObMMf#section-header">/pages/nxNcI6zBaofEs4kObMMf#section-header</a></td></tr><tr><td><i class="fa-bookmark" style="color:$primary;">:bookmark:</i> <mark style="color:$primary;"><strong>Section colors</strong></mark></td><td></td><td><a href="/pages/ugnuWgDX3bpXquEJrAeA#color-schemes">/pages/ugnuWgDX3bpXquEJrAeA#color-schemes</a></td></tr><tr><td><i class="fa-bookmark" style="color:$primary;">:bookmark:</i> <mark style="color:$primary;"><strong>Section width</strong></mark></td><td></td><td><a href="/pages/nxNcI6zBaofEs4kObMMf#section-width">/pages/nxNcI6zBaofEs4kObMMf#section-width</a></td></tr><tr><td><i class="fa-bookmark" style="color:$primary;">:bookmark:</i> <mark style="color:$primary;"><strong>Padding and divider</strong></mark></td><td></td><td><a href="/pages/nxNcI6zBaofEs4kObMMf#section-padding">/pages/nxNcI6zBaofEs4kObMMf#section-padding</a></td></tr></tbody></table>
{% endcolumn %}
{% endcolumns %}

***

<h2 align="center">Add column blocks</h2>

***

Add up to 8 **Columns** with a featured image, headings, and button. There are 3 different types of column blocks: **Columns**, **Columns with images**, and **Columns with icons**.

Click **(+) Add block** to add new columns blocks, and use the drag-and-drop handles **`⋮⋮`** to change their order.

<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 new **Column**, **Column with image**, or **Column with icon**.

   > 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**.

   > we recommend a short title of one or two words.

   > Set the **Heading size** to **Small**, **Medium**, or **Large**.
5. Enter **Text** as the main column content below the Heading.

   > We recommend one or a few short sentences.

   > 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.

   > The most effective button labels ask customers to do something (e.g. Get started, Join us, Shop now). To learn more, [read "What is a Call to Action?"](https://www.thebalancesmb.com/call-to-action-1794380)
8. Select a **Button style**: either **Solid**, **Outline**, or **Text**.

   > Click on the **Multi-column** section to find the color options for buttons.
9. Click **Save**.

</details>

### <mark style="color:$primary;">Headings and button</mark>

For all column block types, add **headings**, **text**, and **buttons**. You can change the **text size, max width of text**, and **button style**.

<sub><mark style="color:$info;">Click Column block to find settings<mark style="color:$info;"></sub>

<table><thead><tr><th width="164">Setting</th><th>Description</th></tr></thead><tbody><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 tag</mark></td><td>Change the heading tag to modify the page structure. Use H2 to indicate important topics, and use H3-H6 for related topics.<br><br>This option doesn't change the heading's appearance.</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: <strong>Small, Medium,</strong> <strong>Large,</strong> or <strong>Extra large</strong>.</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 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;">Text size</mark></td><td>Change the font size of the text: <strong>Small, Regular,</strong> <strong>Large,</strong> or <strong>Extra large</strong>.</td></tr><tr><td><mark style="color:blue;">Button link</mark></td><td>Select or paste a URL for the button.</td></tr><tr><td><mark style="color:blue;">Button label</mark></td><td>Enter text to display a button label. Leave this field blank to remove the button.</td></tr><tr><td><mark style="color:blue;">Button style</mark></td><td>Change the button style to <strong>Solid</strong>, <strong>Outline</strong>, or <strong>Text</strong>.</td></tr></tbody></table>

### <mark style="color:$primary;">Column image</mark>

Upload an image to display a the top of the column.

<sub><mark style="color:$info;">Click Image with text column block to find settings<mark style="color:$info;"></sub>

<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;">Apply circle crop to image</mark></td><td>Choose to crop all images to appear as circles. This setting applies only when the Image aspect ratio is set to Square.</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>

### <mark style="color:$primary;">Column icon</mark>

Select an icon to display a the top of the column.

<sub><mark style="color:$info;">Click Image with icon column block to find settings<mark style="color:$info;"></sub>

<table><thead><tr><th width="177">Setting</th><th>Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Icon name</mark></td><td>Select from 30+ icons to show in the column.</td></tr><tr><td><mark style="color:blue;">Icon width</mark></td><td>Increase or decrease the width of the icon for desktop: between <em>50</em> to <em>100</em> percent of the width of the column. screens.</td></tr><tr><td><mark style="color:blue;">Mobile icon width</mark></td><td>Increase or decrease the width of the icon for mobile: between <em>50</em> to <em>100</em> percent of the width of the column. screens.</td></tr><tr><td><mark style="color:blue;">Custom icon image</mark></td><td>Upload your own icon to show in the column. We recommend a <code>.png</code> image with a transparent background and minimum dimensions of 50px by 50px.</td></tr></tbody></table>

### <mark style="color:$primary;">Column alignment</mark>

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 on 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>

<sub><mark style="color:$info;">Click section to find settings<mark style="color:$info;"></sub>

<table><thead><tr><th width="204.9573974609375">Setting</th><th>Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Content vertical alignment</mark></td><td>Position content within all column blocks towards the <strong>Top</strong>, <strong>Center</strong>, or <strong>Bottom</strong>.</td></tr><tr><td><mark style="color:blue;">Content background padding</mark></td><td>Change the amount of space around the content within column blocks. Select either <strong>Small</strong>, <strong>Medium</strong>, or <strong>Large</strong>.<br><br>This option applies to blocks when <strong>Show background behind columns</strong> is enabled in the <strong>Color</strong> settings.</td></tr></tbody></table>

### <mark style="color:$primary;">Column colors</mark>

Apply color schemes to columns items for a colored background and text.

<sub><mark style="color:$info;">Click section to find settings<mark style="color:$info;"></sub>

<table><thead><tr><th width="204.9573974609375">Setting</th><th>Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Color scheme</mark></td><td>Select a color scheme to apply to all column items.</td></tr></tbody></table>

<h2 align="center">Section layout</h2>

***

You can customize the **Desktop** and **mobile layout** of the column blocks, including the **number of columns**, **column spacing**, and **row spacing**.

<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>

#### <mark style="color:$primary;">Desktop layout</mark>

<sub><mark style="color:$info;">Click section to find settings<mark style="color:$info;"></sub>

<table><thead><tr><th width="211">Setting</th><th>Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Number of columns</mark></td><td>Display <strong>1</strong> to <strong>6</strong> columns per row on desktop screens.</td></tr><tr><td><mark style="color:blue;">Column spacing</mark></td><td>Change the maximum amount of horizontal space between columns (<strong>4</strong> to <strong>48</strong> pixels).</td></tr><tr><td><mark style="color:blue;">Row spacing</mark></td><td>Change the maximum amount of vertical space between columns (<strong>4</strong> to <strong>48</strong> pixels).</td></tr><tr><td><mark style="color:blue;">Column alignment</mark></td><td>Align the columns to the <strong>Left</strong>, <strong>Center</strong>, or <strong>Right</strong> of the section.</td></tr></tbody></table>

#### <mark style="color:$primary;">Mobile layout</mark>

<table><thead><tr><th width="214">Setting</th><th>Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Enable slider on mobile</mark></td><td>Display columns in a single row that can be swiped through.</td></tr><tr><td><mark style="color:blue;">Number of columns</mark></td><td>Display <strong>1</strong> or <strong>2</strong> columns per row on mobile screens.</td></tr><tr><td><mark style="color:blue;">Column spacing</mark></td><td>Change the maximum amount of horizontal space between columns (<strong>4</strong> to <strong>48</strong> pixels).</td></tr><tr><td><mark style="color:blue;">Row spacing</mark></td><td>Change the maximum amount of vertical space between columns (<strong>4</strong> to <strong>48</strong> pixels).</td></tr><tr><td><mark style="color:blue;">Column alignment</mark></td><td>Align the columns to the <strong>Left</strong>, <strong>Center</strong>, or <strong>Right</strong> of the section.</td></tr></tbody></table>

***

> **Related links**
>
> [Gallery carousel](/stiletto/sections/theme-sections/gallery-carousel.md)\
> [Grid](/stiletto/sections/theme-sections/grid.md)\
> [Image with text](/stiletto/sections/theme-sections/image-with-text.md)