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.
After you have chosen the News Ticker Block, you’ll get a block editing panel on the right-hand side. It has three options: General, Style, and Advanced. These options customize the design and other elements of the block. Let’s explore one by one below:
General #
The settings section mainly consists of three 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 to your site requirements.
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).
Style #
Under the style option, you’ll find the following options available:
Ticker Body #
- Text Color – It changes the color of the news title. It will provide the color option for the Normal and Hover modes.
Advanced #
The Advanced section consists of four options for the News Ticker block.
Spacing #
Under the spacing section, you can find the following options available:
- Block Margin – 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),
- Block Padding – According to the site requirement, you can assign a specific padding 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).
Z-Index #
It allows you to set the priority of the News Ticker block according to the site requirement.
Responsive Condition #
Using the option, you can enable/disable displaying the block on various screen sizes:
- Hide on Desktop – It hides the News Ticker block on the Desktop.
- Hide on Tablet – It hides the News Ticker block on the Tablet.
- Hide on Mobile – It hides the News Ticker block on Mobile.
Advanced #
Under the option, you can set the CSS ID and Classes for this particular News Ticker block. The available options are listed below:
- Block HTML – It sets the HTML elements to your site requirements. By default, the HTML element is div; however, you can use another element such as Address, Article, Aside, etc.
- CSS ID – It allows you to set specific IDs to style this particular block. Once you have set the ID, you can write the CSS Code to style the block using that particular ID.
- 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.
