Divi 5 Timeline Module: 12 Real Website Sections You Can Build With It

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.

The Timeline module is one of the five new modules Elegant Themes shipped with Divi 5, and it is far more flexible than the "vertical list of dates" most people picture. According to Elegant Themes, the module lists a series of events along a horizontal or vertical line, supports adjustable direction and offset, lets you nest other modules inside each timeline item, and even works with the Loop Builder so the events can be pulled dynamically from your database. That combination — a structured spine plus arbitrary nested content — is what makes it a genuine layout tool rather than a single-purpose widget.

This is an inspiration piece. Below are 12 real website sections you can build with the Divi 5 Timeline module, with a note on which Timeline settings carry the weight in each. Pick the ones that match the story your page needs to tell.

Get Divi 5

How the Timeline module actually works

Before the examples, the mechanism. Each timeline is a series of items strung along a line. Per the Divi documentation, you control the direction (vertical or horizontal) and an offset that shifts items relative to the spine, and because items accept nested modules, an "item" can hold a heading, body text, an image, an icon, a button, or a whole row of them. The module exposes composable settings, so spacing, connector style, marker shape, and animation are all designable per state.

Two practical consequences:

• You are not limited to text. A timeline item can be a mini card with an image and a CTA.
• Because the spine can run horizontally, a "timeline" can read like a stepped process bar, not just a history list.

Keep that flexibility in mind as you read the sections below.

12 sections to build with it

1. Company history ("Our story"). The classic use. Vertical timeline, one item per milestone year, each with a short paragraph and an optional photo. Use the offset to alternate items left/right for a balanced look on desktop.

2. Product roadmap. A horizontal timeline reading Now / Next / Later, or Q1–Q4. This one deserves its own build — see the dedicated walkthrough linked at the end of this article.

3. Project phases. Discovery → Design → Build → Launch. Nest an icon and a one-line deliverable inside each item so a prospective client can scan your process in seconds.

4. Resume / CV section. A personal site career history: role, company, dates, and a two-line summary per item. The vertical direction keeps it readable on mobile.

5. Onboarding flow. "Your first 7 days" for a SaaS or a course. Each item is a step with a checkbox-style icon and a link to the relevant help doc.

6. Customer case study. Problem → approach → milestones → result. This pairs especially well with tabs and nested elements; we cover the full case-study build in a separate guide linked below.

7. Changelog / release history. Pull double duty here: build it by hand for a few entries, or wire it to the Loop Builder so each release post becomes a timeline item automatically.

8. Event schedule / agenda. A single-day conference agenda as a horizontal timeline of time slots, or a multi-day event as stacked vertical timelines.

9. Agency process page. Similar to project phases but client-facing and persuasive: each step nests a short benefit statement, not just a label.

10. Course curriculum. Module 1 → Module 8, each item showing the lesson title, duration, and an icon for video/quiz/reading.

11. Milestones / "by the numbers". Funding rounds, user growth markers, awards. Nest a large number module inside each item so the figure is the hero.

12. WooCommerce order journey. "Ordered → Packed → Shipped → Delivered" as a horizontal status timeline on an order-status or shipping-policy page. With the Loop Builder you could even drive it from order meta.

Design tips that keep it clean

• Don't overload an item. A heading plus one or two nested elements reads; five does not.
• Match direction to context. Horizontal for short, sequential processes; vertical for long histories that must survive on mobile.
• Use Presets. Build one timeline item the way you like it, save it as a preset, and every new item inherits the styling — a big time-saver Divi 5 makes first-class.
• Mind the connector contrast. The line and markers should read against your background; set their colour with a Design Variable so a later rebrand is one edit.

FAQ

Is the Timeline module included in Divi 5 or is it an add-on?

It ships with Divi 5 as one of the five new core modules announced by Elegant Themes, alongside Breadcrumbs, SVG, Table of Contents, and Instagram Feed. No separate plugin is needed.

Can the timeline pull events automatically instead of being typed by hand?

Yes. Elegant Themes states the Timeline module works with the Loop Builder, so each timeline item can be generated from a post, product, or custom post type rather than entered manually.

Vertical or horizontal — which should I use?

Vertical for long, content-heavy histories (it stacks gracefully on phones); horizontal for short, step-by-step processes where the left-to-right reading order reinforces the sequence.

Can I put images and buttons inside a timeline item?

Yes — items accept nested modules, so an item can contain a heading, image, text, icon, and button together as a small card.

Bottom line

The Divi 5 Timeline module is best understood as a structured container with a visual spine, not a dates-only widget. Once you see it that way, roadmaps, process bars, curricula, and order journeys are all the same primitive with different content nested inside. Start with one of the 12 sections above, build a single item cleanly, save it as a preset, and let the pattern repeat.

Sources and further reading