# Scrolling Text and Images

<figure><img src="https://1734026102-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKXAimBJFhRJImV3lJL36%2Fuploads%2F2ak12XhYRtwPBTYn2c9Q%2Ff_scroll.png?alt=media&#x26;token=c9dc25c2-fb68-4eeb-93c7-bce7664713ce" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
**Footer -> Scrolling text and images**
{% endhint %}

The section "Scrolling Text and Images" - an advanced dynamic element designed to present engaging, continuous visual and textual content. This section is ideal for showcasing brand messaging, featured products, or unique imagery in a captivating, ticker-style format. The section is highly customizable and includes its own overarching settings, along with configurable sub-sections for individual content elements.

## General Section Settings

| Option                     | Description                                                                                                                                              | Values/Details                                                                                  |
| -------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------- |
| Layout                     | Controls the structural arrangement and spacing of the entire section.                                                                                   | *(Specific layout options not detailed, but generally governs full-width, boxed content, etc.)* |
| Top spacing                | Defines the vertical clearance above the section content.                                                                                                | `None`, `Small`, `Medium`, `Normal`                                                             |
| Home page top spacing none | When enabled, overrides the default `Top spacing` setting specifically for the storefront's main index page, eliminating top padding for a flush layout. | Works only on home page                                                                         |

## Configuration Settings (Settings Subsection)

This subsection governs the behavior and visual effects of the scrolling ticker element.

| Option             | Description                                                                                                              | Values/Details                                                                                                                      |
| ------------------ | ------------------------------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------- |
| Horizontal spacing | Adjusts the horizontal distance between content blocks (text and image elements) within the scroll.                      | *(Adjustable value/slider)*                                                                                                         |
| Image hover effect | Selects the interactive visual effect applied to images when a user hovers over them.                                    | `Basic theme settings`, `Disable`, `Zoom in #1`, `Zoom in and rotate`, `Zoom in #2`, `Zoom out #1`, `Zoom out #2`, `Slide`, `Shine` |
| Image roundness    | Controls the corner radius of the images displayed within the section.                                                   | *(Adjustable value/slider, often percentage or pixel-based)*                                                                        |
| Ticker time        | Sets the duration for one complete cycle of the scrolling animation. A shorter time results in faster movement.          | *(Value in seconds or milliseconds)*                                                                                                |
| Direction of move  | Determines the orientation of the scrolling animation.                                                                   | *(Commonly Left to Right or Right to Left)*                                                                                         |
| Dual ticker        | Enables a configuration where content is duplicated and mirrored, creating a continuous, looping effect from both sides. | `Enable`                                                                                                                            |
| Swap               | When `Dual Ticker` is enabled, this option reverses the content order in the duplicated strip.                           | `Enable`                                                                                                                            |
| Opacity            | Adjusts the overall transparency of the section's content.                                                               | *(Adjustable value/slider, 0% to 100%)*                                                                                             |
| Black and white    | Applies a monochrome filter to all images within the section.                                                            | `Enable/Disable checkbox`                                                                                                           |
| Dividing line      | Renders a thin horizontal separator line to delineate the section from adjacent content.                                 | `Show`                                                                                                                              |

## Background and Styling Options (Background Subsection)

This subsection manages the aesthetic presentation of the entire section.

| Option                    | Description                                                                                    | Values/Details              |
| ------------------------- | ---------------------------------------------------------------------------------------------- | --------------------------- |
| Background                | Selects the visual treatment for the section's backdrop.                                       | `Hide`, `Color`, `Gradient` |
| Color                     | If `Background` is set to `Color`, this option allows selection of a single background color.  | *(Color picker)*            |
| Vertical internal padding | Adjusts the vertical spacing between the section's top/bottom edges and its internal content.  | *(Adjustable value/slider)* |
| Colors (Sub-group)        | Allows granular control over the color scheme applied to specific elements within the section. |                             |
| Base                      | The primary color used for general text or background elements.                                | *(Color picker)*            |
| Accent                    | The secondary color used for emphasis, such as links, icons, or specific hover states.         | *(Color picker)*            |
| Lines                     | The color designated for any dividing lines or borders within the section.                     | *(Color picker)*            |

## Content Blocks (Subsections)

The "Scrolling Text and Images" section permits the addition of multiple individual content blocks, allowing for rich, varied content within the ticker. The two available block types are:

* **Text**: Allows the entry of customizable text content, suitable for slogans, short announcements, or brand values.
* **Image**: Allows the upload and configuration of a graphical asset, which will participate in the scrolling animation and interact with the hover effects.
