Scrolling bar
Last updated
Last updated
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.
| Setting | Description |
|---|---|
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:
| Block | Description |
|---|---|
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.
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.
