# Grid

{% hint style="info" %}
This section is available in v3.0 and later. Learn how to [update your theme](https://help.fluorescent.co/eclipse/changelog/update-your-theme) to access new features.
{% endhint %}

The **Grid** section displays a flexible collage of images and autoplay videos. Mix and match between different size blocks and reorder them to create a promotional feature or lookbook layout.

<div><figure><img src="https://3688473072-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHUe2h5JnXOGnUNdkJwav%2Fuploads%2F70g0C1peC1UPQuYJHta8%2Fgrid-50.png?alt=media&#x26;token=cbf79299-818a-4642-970b-22d986b12d49" alt="" width="563"><figcaption></figcaption></figure> <figure><img src="https://3688473072-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHUe2h5JnXOGnUNdkJwav%2Fuploads%2FG3EGXZ2tFhzu5SHAcEw9%2Fgrid-100.png?alt=media&#x26;token=98400790-6d0e-4bf0-90d4-6337f2f1b9d1" alt=""><figcaption></figcaption></figure></div>

## Set up section

***

In the editor side panel, click **(+) Add section** and select **Grid**. 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>

## Set up grid items

***

Add **Grid item** blocks with background images or autoplay videos. Create different layouts by reordering the blocks with the drag-and-drop handles **`⋮⋮`** and customize the width and height of each block.

* Add background **images** or **autoplay videos**.
* Add **headings** and **buttons** with selected positions
* Change the **width** and **height** of each item

### Add background media

***

Add an image or autoplay video (without sound) as the grid item's background.

<table data-card-size="large" data-view="cards"><thead><tr><th></th><th></th><th data-hidden data-type="content-ref"></th><th data-hidden data-card-cover data-type="files"></th></tr></thead><tbody><tr><td><mark style="color:blue;"><strong>Using color overlays</strong></mark></td><td>Learn how to change overlay colors and use gradients.</td><td><a href="../overview/section-styles#overlay-colors">#overlay-colors</a></td><td><a href="https://3688473072-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHUe2h5JnXOGnUNdkJwav%2Fuploads%2FJmND9VbF4HtwEqV18aeb%2Foverlay-color-gradient.png?alt=media&#x26;token=953171f8-094a-43c4-97fe-2c767e76505e">overlay-color-gradient.png</a></td></tr></tbody></table>

{% 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; 15 seconds (Recommended)</td></tr><tr><td><strong>Video size</strong></td><td>&#x3C; 10MB (Recommended)</td></tr></tbody></table>
{% endtab %}
{% endtabs %}

&#x20;

`Click Grid item block to find settings`

<table><thead><tr><th width="187">Setting</th><th>Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Image</mark></td><td>Select or upload an image.</td></tr><tr><td><mark style="color:blue;">Mobile image</mark></td><td>Select or upload an alternate image to display on mobile screens.</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 video</mark></td><td>Upload an alternate video to display on mobile screens.</td></tr></tbody></table>

### Change width and height

***

Adjust the width and height of each block to create unique layouts.

`Click Grid item block to find settings`

<table><thead><tr><th width="204">Setting</th><th>Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Width</mark></td><td>Choose the width of the grid item as a percentage of the section width. Select 33%, 50%, 66%, or 100%.</td></tr><tr><td><mark style="color:blue;">Height</mark></td><td>For desktop and mobile, change the height of the grid item between 300 to 800 pixel.</td></tr></tbody></table>

### Add content

***

Add headings, text, and optional button to overlay the grid media.

&#x20;

`Click Grid item block to find settings`

<table><thead><tr><th width="204">Setting</th><th>Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Content position</mark></td><td>For both desktop and mobile, choose the placement of the headings within the grid item. Select one of nine positions.</td></tr><tr><td><mark style="color:blue;">Text alignment</mark></td><td>For both desktop and mobile</td></tr><tr><td><mark style="color:blue;">Content width</mark></td><td>Choose to display the content full width or a custom width.<br><br>Select Custom width to set the <strong>maximum content width</strong> between 100 to 900 pixels.</td></tr><tr><td><mark style="color:blue;">Overline</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 to show a main heading.</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;">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. Learn how to <a href="https://github.com/fluorescent/kb-horizon/blob/main/general/editing-themes/h1-heading-tags/README.md#replacing-default-h1-headings">replace default H1 headings</a>.<br><br>This option doesn't change the heading's appearance.</td></tr><tr><td><mark style="color:blue;">Text</mark></td><td>Add text to show a subheading below the main 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 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 Solid, Outline, or Text.</td></tr><tr><td><mark style="color:blue;">Button size</mark></td><td>Change the size of the button to Small or Regular.</td></tr></tbody></table>

## Scrolling text

***

Display scrolling text around the edges of grid items.&#x20;

1. In the grid item block settings, add the **text** you want to show.&#x20;
2. Then, in the section settings, change the style of scrolling text:

* Use the **Scroll duration** slider to increase or decrease the number of seconds it takes for the content to scroll from beginning to end.
* Choose to scroll content towards the **Left** or **Right**.
* Show an icon and change the text divider

&#x20;

`Click section for settings`

<table><thead><tr><th width="184.5">Setting</th><th width="417.5">Description</th><th>Options</th></tr></thead><tbody><tr><td><mark style="color:blue;">Enable scrolling text</mark></td><td>Toggle on to rotate scrolling text added to grid blocks.</td><td></td></tr><tr><td><mark style="color:blue;">Scroll duration</mark></td><td>Change the number of seconds it takes for the content to scroll from beginning to end.</td><td><strong>5 - 45 secs</strong></td></tr><tr><td><mark style="color:blue;">Scroll direction</mark></td><td>Choose the direction of scrolling.</td><td><strong>Left</strong> <em>Default</em><br><strong>Right</strong></td></tr><tr><td><mark style="color:blue;">Text divider</mark></td><td>Display an icon or dot between scrolling text blocks.</td><td><strong>Icon</strong><br><strong>Dot</strong><br><strong>None</strong></td></tr><tr><td><mark style="color:blue;">Icon</mark></td><td>For the icon text divider, select from 30+ free icons.</td><td></td></tr></tbody></table>

## Grid spacing

***

Adjust the **grid spacing** between grid blocks on desktop and mobile screens.

&#x20;

`Click section to find settings`

<table><thead><tr><th width="202">Setting</th><th>Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Desktop spacing</mark></td><td>For desktop screens, adjust spacing between the grid blocks: between 0 and 60 pixels.</td></tr><tr><td><mark style="color:blue;">Mobile spacing</mark></td><td>For mobile screens, adjust spacing between the grid blocks: between 0 and 50 pixels6</td></tr></tbody></table>