News Ticker Element
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.
Latest Docs:
How To Use The News Ticker Element
Step 1. Ensure Avada Builder, or Avada Live is active.
Step 2. Create, or choose the Column you wish to add the Element into. Click on Add New Element.
Step 3. Choose News Ticker from the Elements List.
Step 4. Simply 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.
Step 5. Click Save when you are finished customizing the Element.
Read below for a detailed description of all element options.
Element Options
Location: The edit screen within each Element.
You can deploy as many individual Elements in pages and posts as you need, there is no limit. Within each of the Elements you will see a tab or tabs that house an array of options that make it possible for you to configure each Element independently, and greatly enhance your flexibility and creative 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 Tab
Ticker Title – Set the ticker title.
Posts Type – Select the type of post displayed in the ticker. This option will display the full range of custom post types installed on your site. What Post Type you choose here will affect what options there are for the next option Pull Posts By..
Pull Posts By – Choose the taxonomy to pull posts by. If you select anything other than All. you will also get Include and Exlude options below this for the specific taxonomy chosen.
Include ‘Taxonomy’ – Select the taxonomies to include, or leave blank for all. If the taxonomy is hierarchical, it will also include posts within children taxonomy.
Exclude ‘Taxonomy’ – Select the taxonomies to exclude, or leave blank for all. 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. Choose from Descending or Ascending.
Number Of Posts – Select the maximum number of posts to be displayed in the ticker. The range is from 3-15.
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.
Ticker Type – Select the ticker type to display posts. Choose from Running Ticker, or One At A Time.
Ticker Speed – Select the ticker speed, in pixels per second.
Distance Between Posts – Select the distance between posts. In pixels, from 25 – 200.
Separator – Enter the separator text or symbol between the posts.
Element Visibility – Allows you to control the column’s visibility. Choose one or more between Small Screen, Medium Screen, or Large Screen.
CSS Class – Allows you to add a class for the column.
CSS ID – Allows you to add an ID for the column.
Design Tab
Font Size – Enter value including any valid CSS unit.
Line Height – Select the line height of the text inside the ticker.
Title Font Color – Set the font color of the title.
Title Background Color – Select the background color of the title.
Title Shape – Select the title shape. Choose from None, Rounded, or Triangle.
Title Padding – Controls the padding of the title.
Ticker Styling – Use filters to see specific type of content.
Regular Options
Ticker Font Color – Select the font color of the ticker.
Ticker Background Color – Select the background color of the ticker.
Hover/Active Options
Ticker Link Hover Color – Select the font color of the ticker when the mouse is over the link.
Ticker Background Hover Color – Select the background hover color 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. Only shows if Box Shadow is set to Yes.
Box Shadow Blur Radius – Set the blur radius of the box shadow. In pixels. Only shows if Box Shadow is set to Yes.
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. Only shows if Box Shadow is set to Yes.
Box Shadow Color – Controls the color of the box shadow. Only shows if Box Shadow is set to Yes.
Box Shadow Style – Set the style of the box shadow to either be an outer or inner shadow. Only shows if Box Shadow is set to Yes.
Extras Tab
Animation Type – Controls the column’s animation type. Choose between None, Bounce, Fade, Flash, Rubberband, Shake, Slide, Zoom, Flip Vertically, Flip Horizontally, or Light Speed.
Direction of Animation – Controls the direction of animation on the column. Choose between Top, Right, Bottom, Left, or Static.
Speed of Animation – Controls the speed of animation on the column. Choose between 0.1 to 1.
Offset of Animation – Controls when the animation will start. Choose between Default, Top of element hits bottom of viewport, Top of element hits middle of viewport, or Bottom of element enters viewport.
Global Options
There are no Global Options for the News Ticker Element.
