# 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="https://3688473072-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHUe2h5JnXOGnUNdkJwav%2Fuploads%2FMba3LuIv6J0x1JLfBocs%2Fmulti-column.jpg?alt=media&#x26;token=b169012d-2fa4-4c1a-ab50-836e10ad48fb" alt=""><figcaption></figcaption></figure> <figure><img src="https://3688473072-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHUe2h5JnXOGnUNdkJwav%2Fuploads%2F58ABzDoN06XI5UiBM6BP%2Fmulti-column-buttons.jpg?alt=media&#x26;token=4d2c68f9-9195-4fa8-af9b-63c96fe7cbd1" alt=""><figcaption></figcaption></figure></div>

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

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="../overview/section-styles#section-header">#section-header</a></td><td></td></tr><tr><td align="center"><mark style="color:blue;"><strong>Section colors</strong></mark></td><td><a href="../overview/section-styles#color-scheme">#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="../overview/section-styles#section-width">#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="https://3688473072-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHUe2h5JnXOGnUNdkJwav%2Fuploads%2FlzJ7R1poBu5R8LEQ0aTe%2Fbutton-styles.png?alt=media&#x26;token=10258959-a791-402c-997e-914d95ad16f3" 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>