News Ticker Element

Last Update: October 21, 2024

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.

How 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, so the options screen may look somewhat different.

General

HeadingDescription
Ticker TitleSet the ticker title.
Posts TypeSelect the type of posts displayed in the ticker.
Pull Posts ByChoose the taxonomy to pull posts by.
Order ByDefines how posts should be ordered. Note that custom post types like "Events", can have additionally ordering choices.
OrderDefine the sorting order of posts.
Number Of PostsSelect the maximum number of posts to be displayed in the ticker.
Show DateSelect whether or not to show the date before the post.
Date FormatSelect the date format, including the separator. By default "M j: ". You can find a list of date format placeholders here: link.
Ticker TypeSelect the ticker type to display posts.
Ticker SpeedSelect the ticker speed, in pixels per second.
Distance Between PostsSelect the distance between posts.
SeparatorEnter the separator text between the posts.
Display DurationSelect how much time a post should be displayed, before switching to the next post. In seconds.
Link TargetControls how the link will open.
Element VisibilityChoose to show or hide the element on small, medium or large screens. You can choose more than one at a time.
CSS ClassAdd a class to the wrapping HTML element.
CSS IDAdd an ID to the wrapping HTML element.

Design

HeadingDescription
TypographyControls the typography.
HeightEnter 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 ColorSelect the font color of the title.
Title Background ColorSelect the background color of the title.
Title ShapeSelect the title shape.
Title PaddingEnter padding for the title.
Ticker Font ColorSelect the font color of the ticker.
Ticker Background ColorSelect the background color of the ticker.
Ticker Indicators ColorSelect the color of the ticker indicators and next/previous arrows.
Progress Indicator Bar HeightSelect the height of the indicator bar.
Previous/Next Arrows StyleSelect the style of the carousel arrows.
Arrow Buttons PaddingIn pixels or percentage, ex: 10px or 10%. You can see the padding, by triggering bordering arrow style in the upper setting.
Arrows Border RadiusEnter value including any valid CSS unit, ex: 20px, or 50% to be perfectly rounded.
Ticker PaddingControls the padding of the ticker.
Element MarginEnter values including any valid CSS unit, ex: 4%.
Element Border RadiusEnter values including any valid CSS unit, ex: 10px.
Box ShadowSet to "Yes" to enable box shadows.
Box Shadow PositionSet 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 RadiusSet the blur radius of the box shadow. In pixels.
Box Shadow Spread RadiusSet 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 ColorControls the color of the box shadow.
Box Shadow StyleSet the style of the box shadow to either be an outer or inner shadow.

Extras

HeadingDescription
Animation TypeSelect the type of animation to use on the element.
Direction of AnimationSelect the incoming direction for the animation.
Animation ColorSelect the color of the animation
Speed of AnimationType in speed of animation in seconds (0.1 - 5).
Animation DelaySelect the delay time after the animation starts(0 - 5).
Offset of AnimationControls when the animation should start.

In this article