News Ticker Element
Last Update: February 14, 2023
The News Ticker Element allows you to add a news ticker to any page (or in a layout section) that pulls posts, events or a range of other content. Read below for an overview of the specific features of the Element, and watch the video for a visual overview of the Element.
For privacy reasons YouTube needs your permission to be loaded.
I AcceptHow To Use The News Ticker Element
To start, simply add the element into your desired column, and then configure the Element as you wish.
Initially, choose the source of the ticker feed by choosing a Post Type to display, and then configure the feed. There are options to display the ticker as a running ticker, or one at a time, as well as being able to control the speed and distance between posts etc. There are also some design options for styling the Element.
Read below for a detailed description of all element options.
Element Options
Note: The displayed option screens below show ALL the available options for the element. If you have Avada’s Option Network Dependencies turned on, you will only see options relevant to your selections, and so the options screen may look somewhat different.
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 Product Type | Select the taxonomies to include, or leave blank for all. If the taxonomy is hierarchical, it will also include posts within children taxonomy. | |
| Exclude Product Type | Select the taxonomies to exclude, or leave blank for none. If the taxonomy is hierarchical, it will also exclude posts within children taxonomy. | |
| Include Product Visibility | Select the taxonomies to include, or leave blank for all. If the taxonomy is hierarchical, it will also include posts within children taxonomy. | |
| Exclude Product Visibility | Select the taxonomies to exclude, or leave blank for none. If the taxonomy is hierarchical, it will also exclude posts within children taxonomy. | |
| Include Product 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 Product 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 Product 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 Product 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 Product Shipping Classes | Select the taxonomies to include, or leave blank for all. If the taxonomy is hierarchical, it will also include posts within children taxonomy. | |
| Exclude Product Shipping Classes | 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 Element Type | Select the taxonomies to include, or leave blank for all. If the taxonomy is hierarchical, it will also include posts within children taxonomy. | |
| Exclude Element Type | Select the taxonomies to exclude, or leave blank for none. If the taxonomy is hierarchical, it will also exclude posts within children taxonomy. | |
| Include Category | Select the taxonomies to include, or leave blank for all. If the taxonomy is hierarchical, it will also include posts within children taxonomy. | |
| Exclude Category | Select the taxonomies to exclude, or leave blank for none. If the taxonomy is hierarchical, it will also exclude posts within children taxonomy. | |
| Include Avada 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 Avada 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. Each of the 3 sizes has a custom width setting on the Responsive tab in the Global Options. | |
| 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, ex: 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, ex: 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, ex: 20px, or 50% to be perfectly rounded. | |
| Ticker Padding | Controls the padding of the ticker. | |
| Element Margin | Enter values including any valid CSS unit, ex: 4%. | |
| Element Border Radius | Enter values including any valid CSS unit, ex: 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 | |
|---|---|---|
| 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. Default currently set to Top Of Element Hits Bottom Of Viewport. |
