> For the complete documentation index, see [llms.txt](https://webibazaar.gitbook.io/flute-documentation/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://webibazaar.gitbook.io/flute-documentation/sections/sliding-bar.md). # Sliding bar {% embed url="" %} The **Sliding Bar** section displays continuously scrolling content across the page, making it perfect for highlighting promotions, announcements, brand messages, categories, or featured collections. The scrolling animation naturally draws customers' attention to important information without interrupting their shopping experience. Use this section to promote offers, free shipping, seasonal campaigns, featured collections, or showcase images with accompanying text.
SettingDescription
Space between blocks

Controls the spacing between each scrolling item.

You can adjust the spacing and set it to the minimum spacing of “20px” and a maximum spacing of “100px.”

Speed

Adjusts how fast the sliding content moves across the screen.

How to use

  • Lower values create a faster scrolling animation.
  • Higher values create a slower, easier-to-read scrolling effect.
Direction

Controls the scrolling direction of the content.

Use of "Direction" allows the rotation of the "Text" from left to right or right to left.

Separator between text

Adds a separator between scrolling items for better visual distinction.

  • Dot — Displays a small dot between each item.
  • Line — Displays a vertical line between items.
  • None — Displays the content continuously without separators.
Separator colorUse this to set color of Separator between each block of text.
Font sizeControls the size of the scrolling text. you can set it to the minimum size of “14px” and a maximum size of “60px.”
Font type

Choose the font family used for the sliding bar text.

  • Heading font — Uses the theme's heading font.
  • Body font — Uses the theme's body font.
Font thickness

Adjusts the weight of the scrolling text.

  • Normal
  • Medium
  • Bold
  • Extra bold

Heavier font weights create stronger visual emphasis.

Enable hover image

Displays an image when customers hover over a text item.

This feature works only when a Text block is added to the section.

Note: This option only works when using Text blocks.

Enable secondary background

Shows an additional background behind image-based scrolling items for better visual contrast.

Note: This option is only available when using Image with Text blocks.

Image size

Using this settings you can customize image size of image with text block of the section.

Increase the value for larger visuals or reduce it for a cleaner, minimal appearance.

Color scheme

Selects the color preset used for the section's text, background, buttons, and other design elements.

  • Scheme 1
  • Scheme 2
  • Scheme 3
  • Scheme 4
  • Scheme 5
  • Scheme 6
## Section settings screenshot #### Separator between text

Separator between text — Dots, Line or None

#### Enable secondary background

Enable secondary background

#### Enable hover image {% hint style="danger" %} Note: This feature only work when "**Text**" block is added and in the '**Text**' block '**Hover image**' is selected. {% endhint %}

Enable hover image

## Add Block The Sliding Bar supports different block types, allowing you to create a variety of scrolling experiences. To add block to the scrolling bar section, click on the 'Add text'. There are many options available similar to the scrolling bar, as you can see in the below points and screenshot:
BlockDescription

Heading

Adds the main scrolling message that will be displayed in the Sliding Bar.

Uppercase text

Displays the heading in uppercase letters.

  • Enabled – Converts the entire message to uppercase for stronger visual impact.
  • Disabled – Displays the text exactly as entered.

Enable outline text

Displays the heading using an outlined text style instead of a solid fill, creating a bold and modern visual effect.

  • Enabled – Shows outlined text.
  • Disabled – Displays regular filled text.

Tip: Outline text works best with larger font sizes.

Icon

Adds a custom SVG icon before or alongside the scrolling text.

This helps make promotional messages more eye-catching and visually engaging.

Timer

Enable timer

Turn this on to display a countdown timer alongside your text message.

Background image

Use this to add background image to scrolling bar timer.

End date

Add date here. The end date must be set to a future date and include the following format: YYYY/MM/DD Example: 2025/12/31.

Background color

Use this to set background color to the timer of this block.

Text color

Use this to set text color to the timer text of this block.

Image with text

Image

Selects the image displayed alongside the scrolling text.

Text

Defines the text displayed next to the image in the scrolling bar.

Link

Adds a clickable link to the image and title.

When customers click the block, they are taken directly to the selected page.

## Block Settings Screenshot #### Uppercase text

Uppercase text

#### Enable outline text

Enable outline text

#### **Enable timer** {% hint style="danger" %} **Note :** Timer related all settings only visible when '**Enable timer**' is set to '**Enabled**'. {% endhint %}

Enable timer

#### **Image with text**

Image with text