News Ticker Element
The News Ticker Element shows the titles of your latest posts in a narrow bar, either as a continuously running line or one title at a time. Each title links to its post, so visitors can jump straight to the news that interests them.
It suits the top of a home page, a header section or a magazine layout, anywhere you want to point to fresh content without giving it much space. Besides blog posts it can list pages or any other public content type of your site, filtered by category, tag or another taxonomy.
In this article: How To Use · Element Options · Tips · Related Elements · Example
How To Use The News Ticker Element
Add the News Ticker Element to a column, enter an optional Ticker Title such as Latest news and choose the Posts Type. With Pull Posts By you can pick a taxonomy and then include or exclude single terms; leave the include field empty to use all of them. Set Order By, Order and Number Of Posts, and turn on Show Date to put the date in front of each title, formatted with Date Format.
Choose the Ticker Type. Running Ticker scrolls all titles in one line at the Ticker Speed you set, with an optional Separator and Distance Between Posts. One At A Time shows one title for the Display Duration, with previous and next arrows and a progress bar.
On the Design tab set the typography, the Height, colors for the title and the ticker, a Title Shape (rounded or triangle), paddings, border radius and a box shadow. The arrow and progress bar options only apply to One At A Time. The ticker pauses while a visitor hovers over it or moves keyboard focus into it, so a title can be clicked calmly.
Element Options
The tables below list every option of the element, grouped by the tabs you see when you edit it in the Builder. Many options depend on others, so the edit screen only shows the options that apply to your current choices.
Options with a small state switch next to them can be set separately for the normal, hover and active state.
General
| Heading | Description |
|---|---|
| Ticker Title | Set the ticker title. |
| Posts Type | Select the type of posts displayed in the ticker. |
| Pull Posts By | Choose the taxonomy to pull posts by. |
| Include Categories | Select the taxonomies to include, or leave blank for all. If the taxonomy is hierarchical, it will also include posts within children taxonomy. |
| Exclude Categories | Select the taxonomies to exclude, or leave blank for none. If the taxonomy is hierarchical, it will also exclude posts within children taxonomy. |
| Include Tags | Select the taxonomies to include, or leave blank for all. If the taxonomy is hierarchical, it will also include posts within children taxonomy. |
| Exclude Tags | Select the taxonomies to exclude, or leave blank for none. If the taxonomy is hierarchical, it will also exclude posts within children taxonomy. |
| Include Formats | Select the taxonomies to include, or leave blank for all. If the taxonomy is hierarchical, it will also include posts within children taxonomy. |
| Exclude Formats | Select the taxonomies to exclude, or leave blank for none. If the taxonomy is hierarchical, it will also exclude posts within children taxonomy. |
| Include | Select the taxonomies to include, or leave blank for all. If the taxonomy is hierarchical, it will also include posts within children taxonomy. |
| Exclude | Select the taxonomies to exclude, or leave blank for none. If the taxonomy is hierarchical, it will also exclude posts within children taxonomy. |
| Include Manufacturers | Select the taxonomies to include, or leave blank for all. If the taxonomy is hierarchical, it will also include posts within children taxonomy. |
| Exclude Manufacturers | Select the taxonomies to exclude, or leave blank for none. If the taxonomy is hierarchical, it will also exclude posts within children taxonomy. |
| Include Series | Select the taxonomies to include, or leave blank for all. If the taxonomy is hierarchical, it will also include posts within children taxonomy. |
| Exclude Series | Select the taxonomies to exclude, or leave blank for none. If the taxonomy is hierarchical, it will also exclude posts within children taxonomy. |
| Include Applications | Select the taxonomies to include, or leave blank for all. If the taxonomy is hierarchical, it will also include posts within children taxonomy. |
| Exclude Applications | Select the taxonomies to exclude, or leave blank for none. If the taxonomy is hierarchical, it will also exclude posts within children taxonomy. |
| Include Technology Types | Select the taxonomies to include, or leave blank for all. If the taxonomy is hierarchical, it will also include posts within children taxonomy. |
| Exclude Technology Types | Select the taxonomies to exclude, or leave blank for none. If the taxonomy is hierarchical, it will also exclude posts within children taxonomy. |
| Include Cooling Methods | Select the taxonomies to include, or leave blank for all. If the taxonomy is hierarchical, it will also include posts within children taxonomy. |
| Exclude Cooling Methods | Select the taxonomies to exclude, or leave blank for none. If the taxonomy is hierarchical, it will also exclude posts within children taxonomy. |
| Include Oil Types | Select the taxonomies to include, or leave blank for all. If the taxonomy is hierarchical, it will also include posts within children taxonomy. |
| Exclude Oil Types | Select the taxonomies to exclude, or leave blank for none. If the taxonomy is hierarchical, it will also exclude posts within children taxonomy. |
| Include Portfolio Categories | Select the taxonomies to include, or leave blank for all. If the taxonomy is hierarchical, it will also include posts within children taxonomy. |
| Exclude Portfolio Categories | Select the taxonomies to exclude, or leave blank for none. If the taxonomy is hierarchical, it will also exclude posts within children taxonomy. |
| Include Portfolio Skills | Select the taxonomies to include, or leave blank for all. If the taxonomy is hierarchical, it will also include posts within children taxonomy. |
| Exclude Portfolio Skills | Select the taxonomies to exclude, or leave blank for none. If the taxonomy is hierarchical, it will also exclude posts within children taxonomy. |
| Include Portfolio Tags | Select the taxonomies to include, or leave blank for all. If the taxonomy is hierarchical, it will also include posts within children taxonomy. |
| Exclude Portfolio Tags | Select the taxonomies to exclude, or leave blank for none. If the taxonomy is hierarchical, it will also exclude posts within children taxonomy. |
| Include FAQ Categories | Select the taxonomies to include, or leave blank for all. If the taxonomy is hierarchical, it will also include posts within children taxonomy. |
| Exclude FAQ Categories | Select the taxonomies to exclude, or leave blank for none. If the taxonomy is hierarchical, it will also exclude posts within children taxonomy. |
| Include Groups | Select the taxonomies to include, or leave blank for all. If the taxonomy is hierarchical, it will also include posts within children taxonomy. |
| Exclude Groups | Select the taxonomies to exclude, or leave blank for none. If the taxonomy is hierarchical, it will also exclude posts within children taxonomy. |
| Include Tirenoa Sliders | Select the taxonomies to include, or leave blank for all. If the taxonomy is hierarchical, it will also include posts within children taxonomy. |
| Exclude Tirenoa Sliders | Select the taxonomies to exclude, or leave blank for none. If the taxonomy is hierarchical, it will also exclude posts within children taxonomy. |
| Order By | Defines how posts should be ordered. Note that custom post types like “Events”, can have additionally ordering choices. |
| Order | Define the sorting order of posts. |
| Number Of Posts | Select the maximum number of posts to be displayed in the ticker. |
| Show Date | Select whether or not to show the date before the post. |
| Date Format | Select the date format, including the separator. By default “M j: “. You can find a list of date format placeholders here: link. |
| Ticker Type | Select the ticker type to display posts. |
| Ticker Speed | Select the ticker speed, in pixels per second. |
| Distance Between Posts | Select the distance between posts. |
| Separator | Enter the separator text between the posts. |
| Display Duration | Select how much time a post should be displayed, before switching to the next post. In seconds. |
| Link Target | Controls how the link will open. |
| Element Visibility | Choose to show or hide the element on small, medium or large screens. You can choose more than one at a time. |
| CSS Class | Add a class to the wrapping HTML element. |
| CSS ID | Add an ID to the wrapping HTML element. |
Design
| Heading | Description |
|---|---|
| Typography | Controls the typography. |
| Height | Enter value including any valid CSS unit, for example 20px. The height can also be changed only from typography line-height setting, and needs to be higher than computed value of line-height. |
| Title Font Color | Select the font color of the title. |
| Title Background Color | Select the background color of the title. |
| Title Shape | Select the title shape. |
| Title Padding | Enter padding for the title. |
| Ticker Font Color | Select the font color of the ticker. |
| Ticker Background Color | Select the background color of the ticker. |
| Ticker Indicators Color | Select the color of the ticker indicators and next/previous arrows. |
| Progress Indicator Bar Height | Select the height of the indicator bar. |
| Previous/Next Arrows Style | Select the style of the carousel arrows. |
| Arrow Buttons Padding | In pixels or percentage, for example 10px or 10%. You can see the padding, by triggering bordering arrow style in the upper setting. |
| Arrows Border Radius | Enter value including any valid CSS unit, for example 20px, or 50% to be perfectly rounded. |
| Ticker Padding | Controls the padding of the ticker. |
| Element Margin | Enter values including any valid CSS unit, for example 4%. |
| Element Border Radius | Enter values including any valid CSS unit, for example 10px. |
| Box Shadow | Set to “Yes” to enable box shadows. |
| Box Shadow Position | Set the vertical and horizontal position of the box shadow. Positive values put the shadow below and right of the box, negative values put it above and left of the box. In pixels, ex. 5px. |
| Box Shadow Blur Radius | Set the blur radius of the box shadow. In pixels. |
| Box Shadow Spread Radius | Set the spread radius of the box shadow. A positive value increases the size of the shadow, a negative value decreases the size of the shadow. In pixels. |
| Box Shadow Color | Controls the color of the box shadow. |
| Box Shadow Style | Set the style of the box shadow to either be an outer or inner shadow. |
Extras
| Heading | Description |
|---|---|
| Conditional Rendering | Add conditional rendering logic for the element. The element will only be part of the post / page contents, if the set conditions are met. NOTE: Server cache can interfere with results. |
| Animation Type | Select the type of animation to use on the element. |
| Direction of Animation | Select the incoming direction for the animation. |
| Animation Color | Select the color of the animation. |
| Speed of Animation | Type in speed of animation in seconds (0.1 – 5). |
| Animation Delay | Select the delay time after the animation starts(0 – 5). |
| Offset of Animation | Controls when the animation should start. |
Tips
- Pull Posts By only filters when the taxonomy belongs to the chosen Posts Type; otherwise all posts of that type are shown.
- The ticker shows titles only. Short, clear post titles work best, especially in the running ticker.
- Order is hidden when Order By is set to Random.
- The Date Format uses the WordPress date placeholders and includes its own separator; the default is
M j:. - Keep Number Of Posts small (five to ten). A long running ticker takes a long time to loop and visitors rarely wait for it.