# Scrolling content

{% hint style="info" %}
Scrolling content was added in v1.2.0 — Learn how to [update your theme](https://help.fluorescent.co/eclipse/changelog/update-your-theme) to access new features.
{% endhint %}

The **Scrolling content** section displays a banner with moving text, images, and icons. Use this section for eye-catching promotions and store updates.

* Add scrolling **text**, **images**, and **icons** with optional links
* Add **highlighted text**
* Control the **duration** and **direction** of scrolling

<figure><img src="https://3688473072-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHUe2h5JnXOGnUNdkJwav%2Fuploads%2FeL8OanuFNr54aXc9XY47%2Fscrolling-content.png?alt=media&#x26;token=5e8d16b9-ab66-4cff-a8e6-ecef1731d931" alt=""><figcaption></figcaption></figure>

## Set up section

***

In the editor side panel, click **(+) Add section** and select **Scrolling content**. Click and hold the drag handles **`⋮⋮`** to re-order sections.

{% hint style="info" %}
**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 %}

### Section styles

***

Click the section to edit general **section styles** for colors and spacing, available in all sections:

<table data-view="cards"><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 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>Section width</strong></mark></td><td><a href="../overview/section-styles#section-width">#section-width</a></td><td></td></tr><tr><td align="center"><mark style="color:blue;"><strong>Section padding</strong></mark></td><td><a href="../overview/section-styles#section-padding">#section-padding</a></td><td></td></tr></tbody></table>

## Content blocks

***

Add **Text**, **Image**, and **Icon** blocks to show as the scrolling content. You can add multiple blocks of the same type.&#x20;

* Under the **Scrolling content** section, click **(+) Add block**.
* Use the drag-and-drop handles **`⋮⋮`** to rearrange the blocks.
* Click a block to edit content and settings.

## Text block

***

Add scrolling **text** with an optional link. Click **(+) Add block** to create more text blocks. Click the block to:

* Enter text for a scrolling message
* Make the text block a clickable link
* Highlight part of the text with an accent color

In the section settings, you can change the font, text size, and colors of text blocks.

### Add text link

***

In the **Text link** field, add a link to apply to the entire text block.

{% hint style="warning" %}
If you've added a **Text link**, do not apply linked text to the content. Using the rich formatting buttons to remove any linked text.
{% endhint %}

### Add highlighted text

***

Highlight a word or words within the text block. With **Enable highlighting** toggled, enter pipe characters (`|`) on either side of the words you want to highlight. For example: `|text|`

Highlighted text uses the **Accent** color of the section's selected color scheme.

&#x20;

`Click text block for settings`

<table><thead><tr><th width="171">Setting</th><th>Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Text</mark></td><td>Enter text to show in the scrolling content.</td></tr><tr><td><mark style="color:blue;">Text link</mark></td><td>Add a link to redirect visitors when they click the text block. If enabled, do not apply linked text to the content using the rich formatting buttons.</td></tr><tr><td><mark style="color:blue;">Enable highlighting</mark></td><td>When enabled, wrap text with pipe characters (<code>| text |</code>) to apply the accent color.</td></tr></tbody></table>

`Click section for settings`

<table><thead><tr><th width="170.5">Setting</th><th width="408.5">Description</th><th>Options</th></tr></thead><tbody><tr><td><mark style="color:blue;">Text style</mark></td><td>Choose the font for the text blocks, based on your theme settings.</td><td><strong>Heading</strong> <em>Default</em><br><strong>Body</strong></td></tr><tr><td><mark style="color:blue;">Text size</mark></td><td>For desktop screens, change the font size for all text blocks.</td><td><strong>1 - 8</strong></td></tr><tr><td><mark style="color:blue;">Mobile text size</mark></td><td>For mobile screens, change the font size for all text blocks. </td><td><strong>1 - 8</strong></td></tr></tbody></table>

&#x20;

## Image block

***

Add a scrolling **image** with optional link. Click **(+) Add block** to create more image blocks. Click the block to:

* Upload a custom image
* Change the image size
* Make the image a clickable link.

&#x20;

`Click image block for settings`

<table><thead><tr><th width="170">Setting</th><th width="432.5">Description</th><th>Options</th></tr></thead><tbody><tr><td><mark style="color:blue;">Image</mark></td><td><p>Select or upload an image.</p><p></p><p>We recommend a <code>.png</code> image with a transparent background and minimum dimensions of 50px by 50px.</p></td><td></td></tr><tr><td><mark style="color:blue;">Image size</mark></td><td>Adjust the width of the image for desktop screens.<br><br>Make sure the image size does not exceed the width of your uploaded image.</td><td><strong>20 - 500 px</strong></td></tr><tr><td><mark style="color:blue;">Mobile image size</mark></td><td>Adjust the width of the image for mobile screens.</td><td><strong>20 - 350 px</strong></td></tr><tr><td><mark style="color:blue;">Image link</mark></td><td>Add a link to redirect visitors when they click the image.</td><td></td></tr></tbody></table>

&#x20;

## Icon block

***

Add a scrolling **icon** with an optional link. Click **(+) Add block** to create more icon blocks. Click the block to:

* Select from 30+ icons or upload a custom icon image
* Change the icon size and color
* Make the icon a clickable link.

&#x20;

`Click icon block for settings`

<table><thead><tr><th width="136">Setting</th><th width="437">Description</th><th>Options</th></tr></thead><tbody><tr><td><mark style="color:blue;">Icon</mark></td><td>Select from 30+ icons to show in the scrolling content.</td><td></td></tr><tr><td><mark style="color:blue;">Custom icon image</mark></td><td><p>Upload your own icon to show in the scrolling content. <br></p><p>We recommend a <code>.png</code> image with a transparent background and minimum dimensions of 50px by 50px.</p></td><td></td></tr><tr><td><mark style="color:blue;">Icon width</mark></td><td>Increase or decrease the width of the icon for desktop screens.<br><br>Make sure the icon width does not exceed the width of your custom image.</td><td><strong>1 - 75 px</strong></td></tr><tr><td><mark style="color:blue;">Mobile icon width</mark></td><td>Increase or decrease the width of the icon for mobile screens.</td><td><strong>1 - 75 px</strong></td></tr><tr><td><mark style="color:blue;">Icon color</mark></td><td>Choose an icon color based on the section's color scheme.</td><td><strong>Accent</strong> <em>Default</em><br><strong>Text</strong></td></tr><tr><td><mark style="color:blue;">Icon link</mark></td><td>Add a link to redirect visitors when they click the icon.</td><td></td></tr></tbody></table>

&#x20;

## Scrolling behavior

***

In the section settings, change the **duration** (speed) and **direction** of scrolling.

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

&#x20;

`Click section for settings`

<table><thead><tr><th width="159.5">Setting</th><th width="410.5">Description</th><th>Options</th></tr></thead><tbody><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></tbody></table>

## Gap between blocks

***

After adding the blocks, you can increase or decrease the space between content blocks.

&#x20;

`Click section for settings`

<table><thead><tr><th width="168">Setting</th><th width="362">Description</th><th>Options</th></tr></thead><tbody><tr><td><mark style="color:blue;">Gap</mark></td><td>For desktop screens, adjust the space between content blocks.</td><td><strong>0 - 100 px</strong></td></tr><tr><td><mark style="color:blue;">Mobile gap</mark></td><td>For mobile screens, adjust the space between content blocks.</td><td><strong>0 - 100 px</strong></td></tr></tbody></table>