# Multi-column

The **Multi-column** section allows you to pair images, text, and buttons in a flexible layout. You can display multiple columns in a **grid** or a single-row **slider**.

* Add multiple columns with images, autoplay videos, text, and/or buttons.
* Customize the shape, size, and position of images and videos
* Change the alignment of text and buttons

{% hint style="info" %}
You can add different combinations of content for the columns. For example, add columns of images (without text) or only text (without images).
{% endhint %}

<div><figure><img src="/files/rYVWFTvOstjX3Tm5ZgLA" alt=""><figcaption></figcaption></figure> <figure><img src="/files/er3r7s6odc9Mmgxb8bgz" alt=""><figcaption></figcaption></figure></div>

{% hint style="warning" %}
**Editing templates will change all pages that use the same template**. [Create new templates](/eclipse/pages/templates/using-templates.md) for different page layouts, or [show dynamic page content](/eclipse/general/editing-themes/dynamic-content-with-metafields.md) 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.

Click the section to add a **section header** and change **section styles** for colors and spacing.

<table data-view="cards" data-full-width="false"><thead><tr><th align="center"></th><th data-hidden data-card-target data-type="content-ref"></th><th data-hidden data-card-cover data-type="files"></th></tr></thead><tbody><tr><td align="center"><mark style="color:blue;"><strong>Section header</strong></mark></td><td><a href="/pages/3wq6hFMr3k1BDOHIgjqZ#section-header">/pages/3wq6hFMr3k1BDOHIgjqZ#section-header</a></td><td></td></tr><tr><td align="center"><mark style="color:blue;"><strong>Section colors</strong></mark></td><td><a href="/pages/3wq6hFMr3k1BDOHIgjqZ#color-scheme">/pages/3wq6hFMr3k1BDOHIgjqZ#color-scheme</a></td><td></td></tr><tr><td align="center"><mark style="color:blue;"><strong>Width and Padding</strong></mark></td><td><a href="/pages/3wq6hFMr3k1BDOHIgjqZ#section-width">/pages/3wq6hFMr3k1BDOHIgjqZ#section-width</a></td><td></td></tr></tbody></table>

&#x20;

### Section 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
* Display columns in a **Grid** (multiple rows) or **Slider** (single row)

&#x20;

`Click section to find settings`

<table><thead><tr><th width="190">Setting</th><th width="402">Description</th><th>Options</th></tr></thead><tbody><tr><td><mark style="color:blue;">Column spacing</mark></td><td>Choose the amount of spacing between column blocks.</td><td><strong>Small</strong><br><strong>Medium</strong> <em><mark style="background-color:yellow;">Default</mark></em><br><strong>Large</strong></td></tr><tr><td><mark style="color:blue;">Number of columns on desktop</mark></td><td>Select the number of columns to display on desktop screens.</td><td><strong>2</strong><br><strong>3</strong> <em><mark style="background-color:yellow;">Default</mark></em><br><strong>4</strong></td></tr><tr><td><mark style="color:blue;">Number of columns on mobile</mark></td><td>Select the number of columns per row on mobile screens.</td><td><strong>1</strong> <em><mark style="background-color:yellow;">Default</mark></em><br><strong>2</strong></td></tr><tr><td><mark style="color:blue;">Enable slider on desktop</mark></td><td>When enabled, columns appear in a single row with scroll buttons.</td><td></td></tr><tr><td><mark style="color:blue;">Enable slider on mobile</mark></td><td>When enabled, columns appear in a single row with scroll buttons. Visitors can also swipe to scroll through.</td><td></td></tr><tr><td><mark style="color:blue;">Show slider indicator</mark></td><td>When enabled, a bar below the columns shows how far visitors have scrolled.</td><td></td></tr></tbody></table>

&#x20;

## Add column blocks

***

Add column blocks with **images**, **videos**, **text**, and/or **buttons**.

* In the Multi-column section, click **(+) Add Column**.
* Click and hold the drag handles **`⋮⋮`** to rearrange the blocks.
* Click the **Column block** to add content.

{% hint style="info" %}
You can show columns with only images or videos by deleting the columns **text** and **heading** fields. You can show columns with only text by deselecting the **Display media** option.
{% endhint %}

### Add image or video

***

Add an image or autoplay video (without sound) as the column background.

{% tabs %}
{% tab title="Video requirements" %}
For **autoplay videos**, make sure your video files meet the following requirements:

<table data-header-hidden><thead><tr><th width="210"></th><th></th></tr></thead><tbody><tr><td><strong>Video file type</strong></td><td><code>.mp4</code> or <code>.mov</code><br><br><em>Embedded YouTube or Vimeo videos are not supported</em>.</td></tr><tr><td><strong>Video length</strong></td><td>&#x3C; 20 seconds (Recommended)</td></tr><tr><td><strong>Video size</strong></td><td>&#x3C; 10MB (Recommended)</td></tr></tbody></table>
{% endtab %}
{% endtabs %}

&#x20;

`Click Column block to find settings`

<table><thead><tr><th width="187">Setting</th><th>Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Display media</mark></td><td>Uncheck this option for columns blocks without an image or video.</td></tr><tr><td><mark style="color:blue;">Make media full height</mark></td><td>If the column block only has an image or video without any text or button, checking this option will make the image or video span the full height of the row.</td></tr><tr><td><mark style="color:blue;">Image</mark></td><td>Select or upload an image.</td></tr><tr><td><mark style="color:blue;">Video</mark></td><td>Add a short autoplay video (without sound) to replace the image.</td></tr><tr><td><mark style="color:blue;">Mobile image</mark></td><td>Select or upload an alternate image to display on mobile devices.</td></tr></tbody></table>

### Add heading and text

***

Change the **Heading** and **Text** in the column block, or delete the text in these fields to remove them.

&#x20;

`Click Column block to find settings`

<table><thead><tr><th width="170">Setting</th><th width="403">Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Heading</mark></td><td>The title of the column.</td></tr><tr><td><mark style="color:blue;">Text</mark></td><td>Add multiple lines of rich text. Use the buttons to make the text bold or italicized, or to add a link.</td></tr></tbody></table>

### Add button

***

Add a link and label for the column button. To remove the button, delete the text in the **Button label** field.

&#x20;

`Click Column block to find settings`

<table><thead><tr><th width="166">Setting</th><th width="400">Description</th><th>Options</th></tr></thead><tbody><tr><td><mark style="color:blue;">Button link</mark></td><td>The URL that you want the button to link to.</td><td></td></tr><tr><td><mark style="color:blue;">Button label</mark></td><td>The text that displays on the button.</td><td><em><mark style="background-color:yellow;">Default</mark></em><mark style="background-color:yellow;">: "Button"</mark></td></tr></tbody></table>

## Customize column styles

***

Change the overall style of **text**, **buttons**, and **media** of all column blocks.

### Change text layout and size

***

Change the **alignment** and **size** of column text and headings.

&#x20;

`Click Multi-column section to find settings`

<table><thead><tr><th width="162">Setting</th><th width="433">Description</th><th>Options</th></tr></thead><tbody><tr><td><mark style="color:blue;">Text alignment</mark></td><td>Set the position of the text content for desktop screens.</td><td><strong>Left</strong> <em><mark style="background-color:yellow;">Default</mark></em><br><strong>Center</strong><br><strong>Right</strong></td></tr><tr><td><mark style="color:blue;">Heading size</mark></td><td>Change the size of the heading text from small to large.</td><td><strong>1-8</strong> <em><mark style="background-color:yellow;">Default</mark></em><mark style="background-color:yellow;">: 2</mark></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><td><strong>H2 - H6</strong></td></tr><tr><td><mark style="color:blue;">Text size</mark></td><td>Adjust the size of the section text from small to large.</td><td><strong>1-8</strong> <em><mark style="background-color:yellow;">Default</mark></em><mark style="background-color:yellow;">: 3</mark></td></tr></tbody></table>

### Choose button style

***

Change the visual style of column buttons. The button colors use the selected **color scheme** in the section settings.

<figure><img src="/files/hMTnCgtQUV93hUWksqUA" alt="" width="515"><figcaption></figcaption></figure>

`Click Multi-column section to find settings`

<table><thead><tr><th width="166">Setting</th><th width="400">Description</th><th>Options</th></tr></thead><tbody><tr><td><mark style="color:blue;">Button style</mark></td><td>Change the style of the button.</td><td><strong>Solid</strong> <em><mark style="background-color:yellow;">Default</mark></em><br><strong>Outline</strong><br><strong>Text</strong></td></tr></tbody></table>

### Change image and video layout

***

Change the **aspect ratio** (shape) and **position** of all column images and videos.

&#x20;

`Click Multi-column section to find settings`

<table><thead><tr><th width="179">Setting</th><th width="356">Description</th><th>Options</th></tr></thead><tbody><tr><td><mark style="color:blue;">Media aspect ratio</mark></td><td>Select an <strong>aspect ratio</strong> to crop images to be a uniform shape, or select <strong>Natural</strong> to display images in their original shape.</td><td><strong>Natural</strong> <em><mark style="background-color:yellow;">Default</mark></em><br><strong>Portrait (2:3)</strong><br><strong>Portrait (4:5)</strong><br><strong>Square (1:1)</strong><br><strong>Landscape (5:4)</strong><br><strong>Landscape (3:2)</strong><br><strong>Landscape (16:9)</strong><br><strong>Landscape (21:9)</strong></td></tr><tr><td><mark style="color:blue;">Media position</mark></td><td>Show the image or video above or below the column content.</td><td><strong>Above content</strong> <em><mark style="background-color:yellow;">Default</mark></em><br><strong>Below content</strong></td></tr></tbody></table>


---

# Agent Instructions: 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/eclipse/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.