# 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="https://2636770384-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsD7BEEDU3B7WiEJlN0F7%2Fuploads%2FWtL3MqTi8Sy0hi7SlTlH%2Fimage-with-scrolling-text.gif?alt=media&#x26;token=01fde643-ab6b-4e5e-9a25-30b769855a06" 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>