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


---

# 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/scrolling-content.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.