---
title: "Divi News Ticker Pro"
url: "https://divipeople.com/docs/news-ticker.md"
canonical: "https://divipeople.com/docs/news-ticker/"
published: "2026-07-09"
modified: "2026-07-09"
author: "Fahim Reza"
tags:
  - "Divi Blog Pro"
---

# Divi News Ticker Pro

**Divi News Ticker Pro** adds an animated breaking-news ticker to any Divi page. It rotates your latest headlines in a single compact line — with a bold title badge, autoplay, and previous/next controls — making it perfect for news sites, magazines, announcement bars, and sports or finance updates.

## Key Features

- **3 animation styles** — Typewriter, Vertical Slide, or Fade.
- **4 title badge designs** for the "Breaking News" label.
- **Autoplay with adjustable speed** plus pause-on-hover.
- **Previous/Next controls**, optionally shown only on hover.
- **Phone-specific toggles** — hide the controls, title, or date on small screens.
- **Full query controls** — categories, ordering, include/exclude by ID, and offset.

## Adding the Module

1. Edit a page with the **Divi Visual Builder**.
2. Add a new module and search for **News Ticker Pro**.
3. The ticker starts rotating your latest posts — open the module settings to configure the query, ticker behavior, and design.

## Content Settings

### Query

The Query toggle controls which posts rotate through the ticker.

1. **Post Type** – Choose the content type to display (default: Post).
2. **Included Categories** – Show only headlines from the selected categories.
3. **Order By** – Sort by Date, Title, ID, Author, or Random (default: Date).
4. **Sort Order** – Ascending or Descending direction.
5. **Post Limit** – How many headlines rotate in the ticker (default: 10).
6. **Post Offset Number** – Skip a number of posts before the ticker starts (default: 0).
7. **Include Posts by IDs** – Rotate only the posts whose IDs you list.
8. **Exclude Posts by IDs** – Keep specific posts out of the ticker.

### Ticker Settings

The Ticker Settings toggle controls the ticker's label, animation, and behavior.

1. **Show Ticker Title** – Display the title badge before the headlines (default: On).
2. **Ticker Title** – The badge text (default: "Breaking News").
3. **Show Date** – Display each headline's publish date (default: On).
4. **Date Format** – WordPress date format for the headline date (default: d F, Y).
5. **Ticker Height** – Height of the ticker bar (default: 40px, responsive).
6. **Animation** – Typewriter, Vertical Slide, or Fade (default: Typewriter).
7. **Autoplay** – Rotate headlines automatically (default: On).
8. **Autoplay Speed** – Time between headlines, 3000–20000 ms (default: 5000).
9. **Pause on Hover** – Pause the rotation while the visitor hovers the ticker (default: On).
10. **Show Controls** – Display previous/next arrows (default: On).
11. **Show Controls on Hover** – Reveal the arrows only on hover (default: Off).
12. **Hide Controls on Phone** – Remove the arrows on small screens (default: On).
13. **Hide Title on Phone** – Remove the title badge on small screens (default: Off).
14. **Hide Date on Phone** – Remove the date on small screens (default: On).

## Design Settings

The Design tab styles every part of the ticker with Divi's full typography, color, spacing, border, and shadow controls.

- **Ticker Style** – Overall bar background, spacing, and alignment.
- **Title Badge** – Badge Design 1–4 (default: Design 3), Right Shape Color, Title Padding, and Title Spacing.
- **Ticker Title**, **Post Title**, and **Date** – Full typography controls for each text element.
- **Date** – Padding and spacing around the date label.
- **Controls** – Control Size (default: 28px), Spacing Between, Arrow Size (default: 20px), Arrow Color (default: #fff), and Control Background.

## Tips & Notes

> **Ticker placement**
> The ticker works best in a full-width row directly below the header or above the main content, where visitors expect breaking-news updates. Combine it with a Theme Builder header template to show it site-wide.

> **Readability on phones**
> Small screens have little horizontal room. The defaults already hide the controls and date on phones — keep them hidden unless your headlines are very short.

## FAQ

### How do I change the "Breaking News" text?

Edit **Ticker Settings → Ticker Title**. You can also restyle or reshape the badge under **Design → Title Badge**, which offers four badge designs.

### How do I slow down or speed up the ticker?

Adjust **Ticker Settings → Autoplay Speed** — anywhere from 3000 ms (3 seconds) to 20000 ms (20 seconds) per headline.

### Which animation should I choose?

Typewriter types each headline character by character — the classic news-desk feel. Vertical Slide rolls headlines upward like a stock ticker, and Fade cross-fades between them for the subtlest effect.

### Can I show only one category of news?

Yes — pick the category under **Query → Included Categories**. Combine it with Post Limit to control how many headlines rotate.