In this article, I am going to show you a free and simple way to create news ticker in Elementor where you can echo breaking news, add top bar notifications and announcements, as well as be able to navigate through your ticker content on your Elementor website.
Note: the digits in brackets e.g. (00:02) indicate the minutes of that exact explanation in the video so you can easily jump to that section and follow along.
Video: Elementor News Ticker Tutorial
Install the HT Mega Plugin
Start off by logging into your WordPress/Elementor website, go to Plugins > Add New, search for the HT Mega plugin, install and activate it (00:40)
After activating, go to your dashboard and click on HTMega Addons, in the list of addons find News Ticker and enable it (01:17)
To Read: Collect Email Subscribers using WPForms and Aweber in WordPress
Create News Ticker in Elementor
In your Pages, open up any page or section with Elementor where you would like to display your news ticker (go to the page and click Edit with Elementor)
In the Elementor editor, click the + icon to add a new section, then go to your widgets area, find the News Ticker widget and drag it to your canvas (01:48)
In the Edit news ticker section on the left, under Content > Style, there are several styles provided for you to choose from, select Style 5. Under Ticker Label, add the text you want, for example; Just Now.
Under Label Icon, choose an icon from your icon library.
Enable the Date option to display the date when a post is added to the news ticker.
You can also enable the Autostart and Pause on hover options (02:51)
Under Direction, select Down.
Go to Content Option; under Content Source you can choose either Posts or Pages, choose the default; Posts, then under Categories, you’re able to choose where your news will be picked from, for example, events, guides, etc, and whatever you add to that category you select will be added to your news ticker, leave that on default so it’ll pick up what’s in your blog posts.
Under News Limit, you can limit the number of events that will display in your news ticker, you can leave that at 0 so that it’s unlimited, or you can add 5.
You can enable the Custom Order option, then you can choose what you want to order your news posts by, for example ascending or descending, by date, name, etc (04:09)
Under the Navigation Button option, you can choose which icons to use for your navigation from the Icon library and insert them (04:26)
When you go to Style > Background Type, here you can change the color of your news ticker, select black, for example. You can also add images to it, as well as make more changes you want like under Padding, Margins, etc.
Under Content, you can change the color, typography of your content, and you can do the same under the Label option. You can also change the color of your Navigation, and edit your Date to your preference.
When you’re done just hit the Update button, and when you reload your preview page, you should have this new news ticker (06:19)
To Read: Create an Elementor Posts Loop with Custom Column Link
In conclusion
That’s how you create news ticker in elementor and add it to your website. You can add this news ticker to any part of your website, for example in your header, footer, or anywhere in your pages.
If you have any comments or questions, let me know in the section below. Remember to subscribe to my youtube channel and newsletter for more of these tips and tutorials.
