News Ticker

The News Ticker Block is suitable for displaying the latest news on the site. It is a horizontal text-based line giving breaking news or live messages.

Once you insert the Block, you will get two options, i.e., Settings and Advanced. These tabs are to make changes to your block design. Let’s explore one by one below:

Block Settings #

The settings section mainly consists of four options as listed below:

Query #

In this section, you can choose and assign a specific Category to be displayed on the News Ticker Block. Once selected, the News Ticker Block displays the news according to the chosen category.

Ticker Label #

The Ticker Label comes with the following two options:

Label: It allows you to customize the News Ticker Label. By default, it displays the Breaking News, but you can customize it on your site requirement.

Color: It allows you to change the color of the News Ticker Label.

Ticker Body #

In the section, you can change the color of the news title. It will provide the color option for the Normal and Hover modes.

Icons #

  • It lets you add the icon at the front of the Breaking News section and comes with the following options:
  • Enable: It enables or disables the option to display the icons. Upon enabling it, a search placeholder appears where you can search for your chosen icon.
  • Size: It lets you choose the size of the icon. Moreover, you can set the icon size for various devices (Desktop, Tablet, and Mobile).
  • Gap: It adds the gap in front of the icon. Moreover, you can set the gap value for various devices (Desktop, Tablet, and Mobile).
  • Color: It allows you to choose the icon color according to site requirements.

Block Advanced #

The Advanced section consists of two customization options for the Block.

Advanced #

Inside the Advanced > Block Margin section, you will have the option to add the Block Margin values to all four sides of the block.

According to the site requirement, you can assign a specific margin value to the block along with units like px, em, %, and rem. Moreover, you can set the value of the different margins for various devices (Desktop, Tablet, and Mobile)

CSS #

It allows you to add a CSS class to your block, letting you write custom CSS to style this particular block.

For example, if you want to change the font size of the News Ticker block only, you can add a class such as news-ticker-title to the Additional CSS Class field. After that, visit your CSS editor and write a style for the class as below:

Upon adding the code, it will make the changes only to this particular block and not others.

Powered by BetterDocs

Scroll to top