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


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://help.fluorescent.co/stiletto/sections/theme-sections/multi-column.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.