Overview
The News Ticker module displays a scrolling or animated feed of your latest WordPress posts or pages directly on your page. It automatically pulls content from your site and presents it in a compact, eye-catching ticker bar — ideal for homepages, news portals, and content-heavy sites. You can choose from a wide range of animation styles (continuous scroll, fade, slide, typing, flip, zoom, and more), control which post details appear (category badge, date, tag), and fully customise the label, layout, and appearance to match your design.
Content Settings
Post Settings
Post Type (Dropdown)
Choose whether the ticker pulls from Posts or Pages.
- Available options: Posts, Pages
- Default: Posts
Post Count (Slider)
Set how many posts to show in the ticker.
- Range: 1 to 50
- Default: 5
Offset (Slider)
Skip a number of posts from the beginning of the query. Useful when you want to exclude the most recent posts that appear elsewhere on the page.
- Range: 0 to 50
- Default: 0
Order By (Dropdown)
Determines how posts are sorted before being displayed.
- Available options: Date, Title, Random, Modified, Comment Count
- Default: Date
Sort Order (Dropdown)
Sets whether posts are sorted newest-first or oldest-first (or A–Z / Z–A when ordering by title).
- Available options: Descending, Ascending
- Default: Descending
Date Format (Text)
Enter a PHP date format string to control how the post date is displayed (for example: M j, Y produces 'Jan 1, 2025'). Only relevant when Show Date is enabled.
- Default: M j, Y
Elements
Show Category (Toggle)
Show or hide the post's first category as a badge next to the title.
- Default: On
Show Tag (Toggle)
Show or hide the post's first tag as a badge next to the title.
- Default: Off
Show Date (Toggle)
Show or hide the post's publication date alongside the title.
- Default: Off
Show Separator (Toggle)
Show a visual separator character between items. Only available when Animation Mode is set to Scroll.
- Default: On
- Only visible when Animation Mode is set to Scroll.
Separator Style (Dropdown)
Choose the character used to separate items in scroll mode.
- Available options: Bullet ( • ), Pipe ( | ), Slash ( / ), Star ( ★ ), Diamond ( ◆ ), Dash ( — )
- Default: Bullet ( • )
- Only visible when Show Separator is turned on.
Show Label (Toggle)
Show or hide the label badge on the left side of the ticker (for example: 'Latest News').
- Default: On
Show Controls (Toggle)
Show previous, pause/play, and next buttons so visitors can manually navigate through ticker items.
- Default: Off
- Only visible when Animation Mode is NOT set to Scroll.
Show Progress Bar (Toggle)
Display a thin progress bar that shows how long until the next item appears.
- Default: Off
- Only visible when Animation Mode is NOT set to Scroll.
Progress Position (Dropdown)
Place the progress bar at the top or bottom of the ticker.
- Available options: Bottom, Top
- Default: Bottom
- Only visible when Animation Mode is NOT Scroll and Show Progress Bar is turned on.
Ticker Settings
Animation Mode (Dropdown)
Select how posts animate through the ticker. Scroll runs all items in a continuous horizontal stream. All other modes display one item at a time with a distinct entrance animation.
- Available options: Scroll, Fade, Slide, Typing, Flip, Zoom, Bounce, Rotate, Blur, Wave, Reveal, Glitch, Swing, Cube, Newspaper, Drop
- Default: Scroll
Direction (Button toggle (Left / Right))
Set whether items scroll from right to left, or left to right.
- Default: Left
- Only visible when Animation Mode is set to Scroll.
Speed (Slider)
Controls how fast the ticker scrolls, measured in pixels per second. Higher values make the text move faster.
- Range: 10 to 200 px/s
- Default: 50
- Only visible when Animation Mode is set to Scroll.
Duration (Slider)
Sets how long each item is displayed before the next one appears, measured in milliseconds (1000 ms = 1 second).
- Range: 1000 to 10000 ms
- Default: 4000 ms (4 seconds)
- Only visible when Animation Mode is NOT set to Scroll.
Pause on Hover (Toggle)
When enabled, the ticker pauses whenever a visitor hovers their mouse over it.
- Default: On
Auto Play (Toggle)
When enabled, the ticker starts animating automatically when the page loads.
- Default: On
Gap (Slider)
Controls the space between items in scroll mode.
- Range: 10 to 200 px
- Default: 60 px
- Only visible when Animation Mode is set to Scroll.
Label
Label Text (Text)
The text shown inside the label badge on the left of the ticker.
- Default: Latest News
Label Icon (Icon Picker)
Choose an icon to display inside the label badge alongside the label text.
Show Label Arrow (Toggle)
When enabled, a small decorative arrow is shown on the right edge of the label badge, pointing toward the ticker content.
- Default: On
Design Settings
Title
Title (Font settings)
Control the font, size, weight, colour, line height, and letter spacing of the post title text shown in the ticker.
Category Badge
Category (Font settings)
Style the text inside the category badge (font, size, colour, etc.).
Background (Background)
Set a background colour or gradient for the category badge.
Border (Border)
Add borders, rounded corners, or outlines to the category badge.
Spacing (Spacing)
Adjust the padding and margin around the category badge.
Tag Badge
Tag (Font settings)
Style the text inside the tag badge.
Background (Background)
Set a background colour or gradient for the tag badge.
Border (Border)
Add borders or rounded corners to the tag badge.
Spacing (Spacing)
Adjust the padding and margin around the tag badge.
Label
Label (Font settings)
Style the text inside the label badge.
Background (Background)
Set a background colour or gradient behind the label badge.
Spacing (Spacing)
Adjust the padding and margin around the label badge.
Icon Color (Color picker)
Set the colour of the icon shown inside the label badge.
Icon Size (Slider)
Control how large the label icon appears.
- Range: 10 to 60 px
- Default: 16 px
Ticker Wrapper
Background (Background)
Set a background colour or gradient for the entire ticker content area (excluding the label badge).
Spacing (Spacing)
Adjust the padding and margin of the ticker wrapper.
Date
Date (Font settings)
Style the date text that appears alongside each post title.
Separator
Separator Color (Color picker)
Set the colour of the separator character shown between items in scroll mode.
Progress Bar
Background Color (Color picker)
The colour of the unfilled (inactive) portion of the progress bar.
Active Color (Color picker)
The colour of the filled (active) portion of the progress bar as it counts down.
Height (Slider)
Controls the thickness of the progress bar.
- Range: 1 to 20 px
- Default: 3 px
Controls
Button Background (Color picker)
Set the background colour of the previous, pause, and next navigation buttons.
Button Color (Color picker)
Set the icon/text colour of the navigation buttons.
Button Size (Slider)
Control the overall size of the navigation buttons.
- Range: 24 to 60 px
- Default: 32 px
Sizing, Spacing, Border, Box Shadow, Filters, Transform, Animation
These are standard Divi design controls available on every module. Use them to set the module width and height, adjust outer spacing (margin and padding), add borders and rounded corners, apply a box shadow, add CSS filters (blur, brightness, contrast, etc.), apply 2D/3D transforms, and configure entrance animations.
Advanced Settings
- CSS — Add custom CSS to specific parts of the ticker: the label badge, label icon, post title text, category badge, tag badge, date, separator, progress bar, navigation buttons, and the ticker wrapper.
- Attributes — Add custom HTML attributes to the module's outer element.
- Visibility — Show or hide the module on desktop, tablet, and phone, or restrict it to logged-in / logged-out visitors.
- Transition — Control the speed and easing of hover transitions applied to the module.
- Position — Set the module's CSS position (static, relative, absolute, fixed, sticky) and fine-tune its placement.
- Scroll Effects — Apply parallax-style scroll animations (vertical/horizontal movement, fade, blur, scale, rotate) as the visitor scrolls the page.
- Conditions — Show or hide the module based on dynamic conditions such as user login status, user role, date range, and more.
Tips & Best Practices
- Use Scroll mode for a classic, continuously moving news ticker. Use single-item modes such as Fade or Slide for a cleaner, more focused display.
- Enable Show Controls (available in non-scroll modes) so visitors can manually step through posts at their own pace.
- Enable the Progress Bar alongside Show Controls to give visitors a visual cue of how long until the next item appears.
- Set Post Count to only as many items as you need — a shorter list with relevant posts is more engaging than a very long one.
- Use the Offset field to skip the N most-recently published posts, which is handy if those posts already appear in a hero or featured section above.
- Combine Show Category with distinct badge colours (via the Category Badge design settings) to make it easy for visitors to identify the topic of each headline at a glance.
- Increase the Gap value in Scroll mode if your post titles are long, to prevent adjacent items from looking crowded.
- The Label Text defaults to 'Latest News' — change it to something specific to your site, such as 'Breaking', 'Trending', or your site name.
- Pause on Hover is on by default and is recommended — it lets visitors read a title before it scrolls away.