How To Build a Product Roadmap in Divi 5 With the Timeline Module

Affiliate disclosure: techivilla.com may earn a commission if you buy Divi through links on this page, at no extra cost to you. We only recommend tools we would build with ourselves.

A public product roadmap does two quiet but valuable jobs: it shows prospects you are actively building, and it cuts the "is feature X coming?" questions your support inbox fills up with. In Divi 5 you can build one without a roadmap SaaS subscription or a single line of JavaScript, using the new Timeline module. This guide walks the whole build, from page structure to a Now/Next/Later layout you can update in minutes.

Try the Divi 5 builder

Why a roadmap page is worth building

A roadmap is a trust signal. For a SaaS or startup landing page, a visitor weighing whether to sign up wants evidence the product is alive and heading somewhere they care about. A clear roadmap answers that before they email you. It also gives your own team a public commitment to point at, and gives churned-leads a reason to come back.

The trap is over-promising. The safest framing is Now / Next / Later rather than hard dates — it communicates direction without turning a slipped quarter into a broken promise. If you prefer time buckets, Q1–Q4 works too; just keep the language directional ("targeting Q3") rather than contractual.

What you need in Divi 5

The Timeline module ships with Divi 5 as one of the five new core modules. Per Elegant Themes, it lists events along a horizontal or vertical line, supports adjustable direction and offset, and lets you nest modules inside each item — which is exactly what a roadmap card needs (a status label, a heading, a description, maybe an icon). That is the entire toolkit; no add-on required.

Step 1 — Plan the page structure

A roadmap page that converts is usually three blocks:

1. Hero — one line on what the product is and a primary CTA (sign up / start trial).
2. The roadmap itself — the Timeline module.
3. A feedback nudge — "Want something on this list? Tell us." with a link or form.

Keep the roadmap above the fold-ish; it is the reason people are on this page.

Step 2 — Choose your axis and buckets

Decide before you build:

• Horizontal timeline for Now / Next / Later or Q1–Q4 — the left-to-right reading order maps naturally to "sooner → later".
• Vertical timeline if you have many items per bucket and need them to stack on mobile.

For most roadmaps, horizontal with three or four columns reads best on desktop and reflows acceptably on phones.

Step 3 — Build one roadmap card, then repeat

This is the Divi 5 way of working: perfect one item, then let it propagate.

1. Add the Timeline module and set direction to horizontal.
2. In the first item, nest: a small text module for the status label ("Now"), a heading for the feature name, and a body text module for one or two sentences of detail.
3. Style it — background, padding, marker colour. Set colours via Design Variables so a rebrand is a single edit.
4. Save the item as a Preset. Every new item you add inherits the design, so building the rest of the roadmap is pure content entry.

Step 4 — Fill the buckets honestly

Group items under Now / Next / Later. A few rules that keep a roadmap credible:

• Now = actively in development, high confidence.
• Next = committed but not started.
• Later = directional, may change. Say so.
• Keep each card to one feature and one or two sentences. A roadmap is a scan surface, not a spec.

Step 5 — Make it easy to maintain

The reason most roadmaps go stale is friction. With Divi 5 you have two low-friction options:

• Manual but presetted: because every card is a preset instance, editing the roadmap is just changing text and dragging items between buckets.
• Dynamic via Loop Builder: Elegant Themes notes the Timeline module works with the Loop Builder, so you could drive cards from a custom post type ("Roadmap Item") with a status field. That is more setup up front but turns roadmap updates into normal WordPress posts — ideal if non-designers maintain it. The Loop Builder vs Blog Module comparison linked below explains when that extra structure pays off.

FAQ

Do I need a third-party roadmap tool?

No. The Divi 5 Timeline module covers the layout, and either presets or the Loop Builder cover the maintenance. The whole page lives in WordPress.

Now/Next/Later or quarters — which is safer?

Now/Next/Later. It communicates direction without committing to dates you might slip. Use quarters only if your audience expects them, and hedge the language ("targeting Q3").

Can non-technical teammates update it?

Yes, if you build it with the Loop Builder driving a "Roadmap Item" post type — then updates are just editing a post. With the manual/preset approach, anyone comfortable in the Visual Builder can move and edit cards.

Will the horizontal timeline break on mobile?

The module supports both directions and responsive settings; for many items, set it to stack vertically at smaller breakpoints so cards remain readable.

Bottom line

A roadmap page is one of the highest-trust pages a SaaS site can have, and Divi 5 makes it a no-code build: Timeline module, a single presetted card, three honest buckets. Start manual, and graduate to a Loop-Builder-driven version once the page earns its keep.

Sources and further reading

Sources

• Elegant Themes — Five New Modules in Divi 5 elegantthemes.com
• Elegant Themes — Everything You Need To Know About Divi 5's Loop Builder elegantthemes.com
• Elegant Themes — Divi 5 Visual Builder Help Center help.elegantthemes.com

Keep building

Read the Timeline module ideas guide