# Image with scrolling text

This section is a highly flexible and customizable solution for displaying important messages alongside imagery. With extensive options, it fits a variety of design needs, from announcements to promotional banners.

<figure><img src="/files/MF6kzviw8rHvi8Sf9SSu" alt="Gif showcasing image with scrolling text seciton"><figcaption></figcaption></figure>

### Section settings

Add and organize various section blocks within the layout, allowing you to customize the structure of your content by arranging different elements, such as the section heading and buttons, to create a visually engaging and well-structured page.

<table><thead><tr><th width="221.24395751953125">Settings</th><th width="140.53466796875" align="center">Type</th><th>Description</th></tr></thead><tbody><tr><td><strong>Content</strong></td><td align="center"></td><td></td></tr><tr><td>Image</td><td align="center"><code>image_picker</code></td><td>Main desktop image (Recommended: 3200 x 1200px, JPG).</td></tr><tr><td>Image link</td><td align="center"><code>url</code></td><td>Optional URL to make the image clickable.</td></tr><tr><td>Space between messages</td><td align="center"><code>range</code></td><td>Controls the spacing between scrolling messages.</td></tr><tr><td>Autoplay speed</td><td align="center"><code>range</code></td><td>Adjusts the scrolling speed of the text.</td></tr><tr><td><strong>Text typography</strong></td><td align="center"></td><td></td></tr><tr><td>Text alignment</td><td align="center"><code>select</code></td><td>Vertical text position: <code>Top</code>, <code>Center</code>, or <code>Bottom</code>.</td></tr><tr><td><strong>Scrolling text typography</strong></td><td align="center"></td><td></td></tr><tr><td>Font</td><td align="center"><code>font_picker</code></td><td>Font style for scrolling text.</td></tr><tr><td>Text size</td><td align="center"><code>range</code></td><td>Font size for scrolling text.</td></tr><tr><td>Letter spacing</td><td align="center"><code>range</code></td><td>Controls spacing between letters.</td></tr><tr><td>Uppercase</td><td align="center"><code>checkbox</code></td><td>Transforms scrolling text to uppercase.</td></tr><tr><td>Position</td><td align="center"><code>select</code></td><td>Alignment for scrolling text: <code>Top</code>, <code>Center</code>, or <code>Bottom</code>.</td></tr><tr><td>Text direction</td><td align="center"><code>select</code></td><td>Marquee direction: <code>Right-to-left</code> or <code>Left-to-right</code>.</td></tr><tr><td><strong>Desktop</strong></td><td align="center"></td><td></td></tr><tr><td>Height</td><td align="center"><code>select</code></td><td>Choose height: image-based or fixed screen ratios.</td></tr><tr><td><strong>Mobile</strong></td><td align="center"></td><td></td></tr><tr><td>Image</td><td align="center"><code>image_picker</code></td><td>Alternative image for mobile (Recommended: 1200 x 1600px, JPG).</td></tr><tr><td>Height</td><td align="center"><code>select</code></td><td>Mobile height options similar to desktop.</td></tr><tr><td><strong>Colors</strong></td><td align="center"></td><td></td></tr><tr><td>Color scheme</td><td align="center"><code>color_scheme</code></td><td>Choose a color scheme from predefined options.</td></tr><tr><td>Overlay type</td><td align="center"><code>select</code></td><td>Adds an overlay: <code>Disabled</code>, <code>Opacity</code>, or <code>Text underlay</code>.</td></tr><tr><td><strong>Padding</strong></td><td align="center"></td><td></td></tr><tr><td>Top</td><td align="center"><code>range</code></td><td>Padding at the top.</td></tr><tr><td>Bottom</td><td align="center"><code>range</code></td><td>Padding at the bottom.</td></tr><tr><td><strong>Advanced</strong></td><td align="center"></td><td></td></tr><tr><td>Show placeholder image</td><td align="center"><code>checkbox</code></td><td>Show placeholder if metafield image is not used.</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://broadcast.presidiocreative.com/sections/sections/banners/image-with-scrolling-text.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.