# Scrolling Text and Images

<figure><img src="https://2952946279-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJbMIFqRrJiqVKdsbTyW4%2Fuploads%2FxgW78S2nQEM2951HeHN0%2Fimage.png?alt=media&#x26;token=62c3558b-6946-4619-aee6-0a39db3582e0" alt=""><figcaption></figcaption></figure>

{% hint style="success" %}
Steps

1. In the theme editor (**Customize**), click **Add section**
2. Locate **Scrolling Text and Images**
3. **Save**
   {% endhint %}

## Section settings

### General settings <a href="#general-settings" id="general-settings"></a>

<figure><img src="https://2952946279-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJbMIFqRrJiqVKdsbTyW4%2Fuploads%2FNvioVXXP9z4mUyqDWkeT%2Fimage.png?alt=media&#x26;token=fb986a13-cfa9-4895-a9c9-5f6a3fb895c7" alt=""><figcaption></figcaption></figure>

<table data-full-width="false"><thead><tr><th width="215">Setting</th><th>Description</th></tr></thead><tbody><tr><td><strong>Section width</strong></td><td><p>4 options for container</p><ul><li>
<strong>Default</strong>: follows the theme’s standard layout behavior (automatically adapts based on screen size and theme settings).</li><li><strong>Stretch width</strong>: span the section width regardless of screen size.</li><li><strong>Fixed width</strong>: depends on your page content width in <strong>Theme settings</strong> <strong>-></strong> <strong>Layout</strong>.</li><li><strong>Full width</strong>: takes up the entire space on the page and it usually resizes itself to fit the size of the screen.</li></ul></td></tr><tr><td><strong>Color scheme</strong></td><td>Select colors from <strong>Theme settings -> Colors</strong></td></tr></tbody></table>

#### Scrolling settings

<figure><img src="https://2952946279-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJbMIFqRrJiqVKdsbTyW4%2Fuploads%2Flm61SeuigBOj0FaSQrCx%2Fimage.png?alt=media&#x26;token=8919be7e-5650-4a06-bca8-026b5b42ed48" alt=""><figcaption></figcaption></figure>

<table data-full-width="false"><thead><tr><th width="215">Setting</th><th>Description</th></tr></thead><tbody><tr><td><strong>Direction</strong></td><td>Choose the scrolling direction of the content (left or right).</td></tr><tr><td><strong>Speed</strong></td><td>Adjust how fast the content scrolls (in seconds).</td></tr><tr><td><strong>Gap</strong></td><td>Set the spacing between items (px).</td></tr><tr><td><strong>Image roundness</strong></td><td>Control the corner radius of images (px).</td></tr><tr><td><strong>Background color</strong></td><td>Set the background color of the section.</td></tr><tr><td><strong>Content padding top/bottom</strong></td><td>Adjust the top and bottom spacing inside the section (px).</td></tr></tbody></table>

#### Reflection settings

<figure><img src="https://2952946279-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJbMIFqRrJiqVKdsbTyW4%2Fuploads%2FwI2iiFr4VRkM3BCdpbLl%2Fimage.png?alt=media&#x26;token=c8e68e7b-3fab-4bb1-a579-8d420b4bfba6" alt=""><figcaption></figcaption></figure>

<table data-full-width="false"><thead><tr><th width="215">Setting</th><th>Description</th></tr></thead><tbody><tr><td><strong>Enable reflection</strong></td><td>Turn on/off the reflection effect for the content.</td></tr><tr><td><strong>Swap direction</strong></td><td>Reverse the direction of the reflection.</td></tr><tr><td><strong>Opacity</strong></td><td>Adjust the transparency level of the reflection (%).</td></tr></tbody></table>

#### Section padding

<figure><img src="https://2952946279-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJbMIFqRrJiqVKdsbTyW4%2Fuploads%2FRT2qW7ddCDYt05M4Ah69%2Fimage.png?alt=media&#x26;token=4e741bd5-4fe7-41d7-90d7-0b842db063c1" alt=""><figcaption></figcaption></figure>

<table><thead><tr><th width="200">Setting</th><th>Description</th></tr></thead><tbody><tr><td><strong>Top</strong></td><td>Customize the top margin of the section</td></tr><tr><td><strong>Bottom</strong></td><td>Customize the bottom margin of the section</td></tr></tbody></table>