Scrolling bar

Here, in the Piano theme, with the use of the scrolling bar, you can scroll the important announcements and promotional texts. The scrolling bar section in the Piano theme comes with various customizations.

SettingDescription

Enable content in double row

By enabling this checkbox, you have the ability to show scrolling bar content in double row.

Scroll direction

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

Speed

Speed is used to customize the scrolling speed of the text in the section.

Font size

You can adjust the font size and set it to the minimum size of “16px” and a maximum size of “40px.”

Text font as

Following is the font customization of the heading of the section:

  • Body

  • Heading

Maximum space between items

"Space between items" is to give left and right side spacing to the text of the section. You can adjust the spacing and set it to the minimum spacing of “0px” and a maximum spacing of “100px.”

Pause on hover

By enabling this checkbox you can pause scrolling bar content on mouse hover.

First scrolling bar color

In this section, you can change the background and foreground color of a first row using the color scheme.

  • Scheme 1

  • Scheme 2

  • Scheme 3

  • Scheme 4

Second scrolling bar color

In this section, you can change the background and foreground color of a second row using the color scheme.

  • Scheme 1

  • Scheme 2

  • Scheme 3

  • Scheme 4

Section inner padding

Utilize this feature to add spacing to the top and bottom of the content.

Add block

To add block to the scrolling bar section, click on the 'Add block'. There are many options available similar to the scrolling bar, as you can see in the below points and screenshot:

BlockDescription

Text

Heading Enter text to display as a title in the section. Make text uppercase Allows you to enable uppercase styling for text. Icon

Using this feature will display selected icon next to the text. Add custom image Use "Custom image" to add the image to the section.

Custom svg code Enables you to insert and display custom SVG code for unique graphics.

Image

Image Use "Image" to add the image to the section. Link Using this feature to add a link on the image in the section.

Last updated