Elementor News Ticker widget by Premium Addons WordPress plugin enhances Elementor’s functionality, allowing users to create advanced content ticker displaying updates and announcements in a customizable way. You can use the News Ticker widget to show any custom post type you want. Not just that, it can be used to get gold, stock, and physical/cryptocurrency prices and show them on your Elementor pages.

Check Elementor News Ticker Widget demo page.

Requirements:

• You will need Premium Addons free plugin installed and activated on your website.
• Make sure that this widget is enabled so you can find it in the Elementor editor.
• Premium Addons works only with Elementor Page Builder plugin so you will need to have it installed and activated.

Elementor News Ticker widget Settings

Start by dragging & drop Elementor News Ticker widget into your Elementor editor.

Key Features

• General.
• Query.
• Posts Options.
• Animation Settings.

General

Elementor News Ticker widget displays multiple Layouts on your WordPress website with easy customization options.

• Layout: Select between four layouts.
• Ticker Title: Set Elementor News Ticker’s title.
• Icon: Enable/Disable to show Elementor News Ticker’s icon.
  • Icon Type.
  • Choose Icon.
  • Draw Icon
  • Icon Size.
  • Spacing.
• Hide Title On: Select to hide the title on which devices.
• Show Current Date: Enable/Disable showing the current date.
• Date Format: Enter the date format.
• Hide Date On: Select to hide the current date on which devices.

• Additional Settings
  • Reverse Direction
  • Marquee Effect: Enable/Disable the marquee effect.
  • Separator
  • Title Pointer
    • Pointer Color
    • Pointer Width
    • Pointer Height
  • Title HTML Tag

Query

Query settings for Elementor News Ticker widget, you can from here select the source of the posts, and you can select custom posts type. Also, you can filter by categories, tag, author, and select specific posts. Generally, this option is to select the posts to display on the Elementor News Ticker.

Source: Select the source of the news ticker.

• Posts:
  • Categories Filter Rule: Show the posts that match specific categories or exclude them.
  • Tags Filter Rule: Show the posts that match specific tags or exclude them.
  • Filter By Author Rule: Show the posts that match specific authors or exclude them.
  • Filter By Post Rule: Select posts to show or exclude them.
  • Ignore Sticky Posts: Enable it to ignore sticky posts. Sticky Post is a post that is placed at the top of the front page, keeping it there until new sticky posts are published. For more information please check this article.
  • Offset: Exclude a number of initial posts from being displayed.
  • Exclude Current Post: Remove the current post from the query.
  • Order By: You can choose to order the posts by the following attributes:
    • None
    • ID
    • Author
    • Title
    • Name
    • Date
    • Last Modified
    • Random
    • Number of Comment
  • Order: Additionally, you can show the posts in descending or ascending order.
  • Empty Query Text: Add a message to be shown when the query result is empty.

• Pages:
  • Filter By Author Rule: Show the posts that match specific authors or exclude them.
  • Filter By Post Rule: Select posts to show or exclude them.
  • Ignore Sticky Posts: Enable it to ignore sticky posts. Sticky Post is a post that is placed at the top of the front page, keeping it there until new sticky posts are published. For more information please check this article.
  • Offset: Exclude a number of initial posts from being displayed.
  • Exclude Current Post: Remove the current post from the query.
  • Order By: You can choose to order the posts by the following attributes:
    • None
    • ID
    • Author
    • Title
    • Name
    • Date
    • Last Modified
    • Random
    • Number of Comment
  • Order: Additionally, you can show the posts in descending or ascending order.
  • Empty Query Text: Add a message to be shown when the query result is empty.

• Landing Pages:
  • Filter By Author Rule: Show the posts that match specific authors or exclude them.
  • Filter By Post Rule: Select posts to show or exclude them.
  • Ignore Sticky Posts: Enable it to ignore sticky posts. Sticky Post is a post that is placed at the top of the front page, keeping it there until new sticky posts are published. For more information please check this article.
  • Offset: Exclude a number of initial posts from being displayed.
  • Exclude Current Post: Remove the current post from the query.
  • Order By: You can choose to order the posts by the following attributes:
    • None
    • ID
    • Author
    • Title
    • Name
    • Date
    • Last Modified
    • Random
    • Number of Comment
  • Order: Additionally, you can show the posts in descending or ascending order.
  • Empty Query Text: Add a message to be shown when the query result is empty.

• My Templates:
  • Filter By Author Rule: Show my templates posts that match specific authors or exclude them.
  • Filter By Post Rule: Select my templates posts to show or exclude them.
  • Ignore Sticky Posts: Enable it to ignore sticky posts. Sticky Post is a post that is placed at the top of the front page, keeping it there until new sticky posts are published. For more information please check this article.
  • Offset: Exclude a number of initial posts from being displayed.
  • Exclude Current Post: Remove the current post from the query.
  • Order By: You can choose to order the blog posts by the following attributes:
    • None
    • ID
    • Author
    • Title
    • Name
    • Date
    • Last Modified
    • Random
    • Number of Comment
  • Order: Additionally, you can show the posts in descending or ascending order.
  • Empty Query Text: Add a message to be shown when the query result is empty.

• Related:
  • Filter By Author Rule: Show the posts that match specific authors or exclude them.
  • Ignore Sticky Posts: Enable it to ignore sticky posts. Sticky Post is a post that is placed at the top of the front page, keeping it there until new sticky posts are published. For more information please check this article.
  • Offset: Exclude a number of initial posts from being displayed.
  • Exclude Current Post: Remove the current post from the query.
  • Order By: You can choose to order the posts by the following attributes:
    • None
    • ID
    • Author
    • Title
    • Name
    • Date
    • Last Modified
    • Random
    • Number of Comment
  • Order: Additionally, you can show the posts in descending or ascending order.
  • Empty Query Text: Add a message to be shown when the query result is empty.

• Stock Prices:
  • Type
    • Currencies: Select currencies to return the realtime exchange rate for any pair of digital currency (e.g., Bitcoin) or physical currency (e.g., USD).
    • API Key: Add your API key for currency stock prices or get your Alpha Vintage free API key from here.
    • Exchange Form: Select the currencies you want to exchange from up to 5 symbols separated by “,”. Example: USD,EUR,GBP,
    • Exchange To: Select the currencies you want to exchange to up to 5 symbols separated by “,”. Example: USD,EUR,GBP,
    • Show Change Details: Enable to display the change details depending on the previously cached data.
    • Reload Data Once Every: Set the reload data time every hour, 3 hours, 6 hours, 12 hours, or day.

• Stock Prices:
  • Type
    • Equities: Select equities to return the stock price details for a token/symbol of your choice.
    • API Key: Add your API key for currency stock prices or get your Alpha Vintage free API key from here.
    • Symbol: Select the stock tokens/symbols you want to query up to 5 symbols separated by “,”. Example: AAPL,MSFT,INTC
    • Reload Data Once Every: Set the reload data time every hour, 3 hours, 6 hours, 12 hours, or day.

• Gold Prices:
  • API Key: Add your API key for currency stock prices or get your Free Gold API Key from here.
  • Alternative API Key: This API key will be used in case the quota for the default API key is exceeded. 
  • Currencies: Select the Currency symbols you want to query up to 5 symbols separated by “,”. Example: USD,EUR,JPY,
    You can check the available currencies here -> Currency Code.
  • Reload Data Once Every: Set the reload data time every 12 hours or a day.

• Text Content:
  • Icon Order.
  • Icon Size.
  • Spacing.
  • Text Item.
    • Text: Add the text.
    • Link: Add the link.
    • Text Icon:
      • Icon Type: Select the icon type icon, Lottie animation, image or SVG draw.
      • Draw Icon.
      • Path Thickness.

Posts Options

You can set your post options for the sources from posts, pages, landing pages, my templates, and related.

• Open Post Link in New Tab: Enable to open the post link in a new tab.
• Change Post HTML Tag to Article.
• Content-Length (words): Set the number of words of the content, or leave it empty to display the full length.
• Show Post Thumbnail: Enable to show the post’s thumbnail.
  • Image Size
  • Width
  • Hide Thumbnail On
• Author Meta: Enable to show the post’s author meta.
  • Hide Author On
• Date Meta: Enable to show the post’s date meta.
• Date format: Set the date format.
• Hide Date On: Select the devices to hide the date on it.

Stock Options

You can set the stock options for the sources from stock prices or gold prices.

• Show Symbol Icon: Enable to add the currency/company symbol that the image below will be linked to. For example, USD or AAPL. (Only for Stock Prices)
  • Icon Size: Set the icon size.
• Show Symbols Names: Enable to show the stock tokens’ names you want to display corresponding to the above symbols and separated by “,”. Example: Apple Inc,Microsoft Corp,Intel Corporation. (Only for Stock Prices)
• Show Symbol: Enable to show the symbol. (Only for Stock Prices)
• Show Price: Enable the prices.
• Show Change: Enable to show the change in prices.
• Show Change Percent: Enable to show the change percent in prices.
• Change Indicator: Select the change indicator between arrows or -/+ sign.
• Arrow Style: Select the arrow style from Style 1, Style 2, Style 3, or Style 4.
• Decimal Places: Set the decimal place for the prices.

Animation Settings

Animation settings for Elementor News Ticker widget, you can from here select to enable or disable animation settings and set the auto-play and animation speed.

• Vertical.
• Auto-Play.
• Fade.
• Auto-Play Speed.
• Animation Speed.
• Navigation Arrows.
• Pause On Hover

Style

In the Style tab, you will be able to customize your News Ticker widget the way you want, to make it match and fit your needs.

• Title.
• Date.
• Posts.
• Ticker Element.
• Ticker Elements Container.
• Arrows.

Title

• Typography: Adjust the news ticker title text font settings and style it.
• Color: Pick colors for the news ticker title text.
• Text Shadow: Adjust news ticker title text-shadow:
  • Color
  • Blur
  • Horizontal Position
  • Vertical Position
• Background Type: Pick a background for the news ticker title text.
  • Classic Background: Color or Image background.
  • Gradient Background: Set the background using gradient colors.
• Border Type: Customize border settings for news ticker title text.
  • Width.
  • Color.
• Border Radius: Add a radius for the border corner for the title.
• Padding: Creates space around the title, inside of any defined borders. You can set the Padding in Pixel (PX), Em (em), or Percentage (%).

Date

• Typography: Adjust the news ticker date text font settings and style it.
• Color: Pick colors for the news ticker date text.
• Text Shadow: Adjust news ticker date text-shadow:
  • Color
  • Blur
  • Horizontal Position
  • Vertical Position
• Background Type: Pick a background for the news ticker date text.
  • Classic Background: Color or Image background.
  • Gradient Background: Set the background using gradient colors.
• Border Type: Customize border settings for news ticker date text.
  • Width.
  • Color.
• Border Radius: Add radius for border corner for Date.
• Padding: Creates space around the Date, inside of any defined borders. You can set the Padding in Pixel (PX), Em (em), or Percentage (%).
• Margin: Creates a space around the date, outside of any defined borders. You can set the margin in Pixel (PX), Em (em), or Percentage (%).

Posts

Select the posts styles for source types posts, pages, landing pages, my templates, and related.

• Content: Adjust posts’ content style.
  • Typography: Adjust font settings and style it.
  • Color: Select the color of the post text.
  • Hover Color: Select the color of the post when the user hovers over it.

• Date: Adjust posts’ Date style.
  • Typography: Adjust date text font settings and style it.
  • Color: Select the date color.
• Author: Adjust posts’ content style.
  • Typography: Adjust font settings and style it.
  • Color: Select the color of the author’s text.
  • Hover Color: Select the color of the post when the user hovers over it.
• Featured Image:
  • Box Shadow: Add a shadow around the featured image. Select the color and the following settings:
    • Horizontal Position
    • Vertical Position
    • Blur
    • Spread
    • Position: Outline or Inset
  • Border Type: Customize border settings for featured image.
  • Border Radius: Add radius for border corner for featured image.
  • Margin: Creates a space around the featured image, outside of any defined borders. You can set the margin in Pixel (PX), Em (em), or Percentage (%).
• Container
  • Box Shadow: Add a shadow around the container. Select the color and the following settings:
    • Horizontal Position
    • Vertical Position
    • Blur
    • Spread
    • Position: Outline or Inset
  • Background Type: Pick the background for the container.
    • Classic Background: Color or Image background.
    • Gradient Background: Set the background using gradient colors.
  • Border Type: Customize border settings for the container.
  • Border Radius: Add a radius for the border corner for the container.
  • Padding: Creates space around the container, inside of any defined borders.
  • Margin: Creates a space around the container, outside of any defined borders.

Ticker Element

• Name:
  • Typography: Adjust name text font settings and style it.
  • Color: Select the name color.
• Symbol:
  • Typography: Adjust date text font settings and style it.
  • Color: Select the date color.
  • Margin: Creates a space around the name outside of any defined borders.
• Price Details:
  • Typography: Adjust font settings and style it.
  • Color: Select the color of the post text.
  • Negative Change Color
  • Positive Change Color
  • Spacing
  • Icon Size
  • Icon Margin
  • Margin
• Container
  • Box Shadow: Add a shadow around the container. Select the color and the following settings:
    • Horizontal Position
    • Vertical Position
    • Blur
    • Spread
    • Position: Outline or Inset
  • Background Type: Pick the background for the container.
    • Classic Background: Color or Image background.
    • Gradient Background: Set the background using gradient colors.
  • Border Type: Customize border settings for the container.
  • Border Radius: Add a radius for the border corner for the container.
  • Padding: Creates space around the container, inside of any defined borders.
  • Margin: Creates a space around the container, outside of any defined borders.

Ticker Elements Container

• Background Type: Pick the background for the container.
  • Classic Background: Color or Image background.
  • Gradient Background: Set the background using gradient colors.
• Color: Select the color of the container.
• Border Type: Customize border settings for the container.
• Border Radius: Add a radius for the border corner for the container.
• Padding: Creates space around the container, inside of any defined borders.
• Margin: Creates a space around the container, outside of any defined borders.

Arrows

• Icon Size: Set Elementor News Ticker icon size.
• Color: Select a text color for normal and hover modes.
• Background: Select tab color for normal and hover modes.
• Border Type: Set a border type for filter buttons. Choose from the following border types:
  • None (Default)
  • Solid
  • Double
  • Dotted
  • Dashed
  • Groove
• Spacing: Set space between arrows.
• Padding: Creates space around the arrows, inside of any defined borders. You can set the Padding in Pixel (PX), Em (em), or Percentage (%).

Separator

• Position: Set the separator position.
• Width: Set the separator width.
• Height: Set the separator height.
• Color: Select the color for the separator.
• Border Radius: Add a radius for the border corner for the separator.

Conclusion

In conclusion, the Elementor News Ticker widget created by Premium Addons is an excellent tool for websites that want to display breaking news or important announcements in an eye-catching and attention-grabbing way. Its user-friendly interface and customizable options make it easy for website owners to add the widget to their pages and customize its design to fit their branding. With its smooth animation and responsive design, the Elementor News Ticker widget is a great addition to any website that wants to keep its visitors informed and engaged.

If you still need any further assistance, feel free to contact Premium Addons support team. We would be more than glad to help 😁

Join the Community

You’re most welcome to join our Facebook group and YouTube channel to get updates about new features, improvements, and bug fixes.