The Divi Timeline module displays a sequence of dated events along a connecting track, useful for company histories, product roadmaps, résumés, project case studies, and step-by-step process pages.
Each event lives in its own Timeline Item child module, so you can add, remove, and reorder items independently. The module also supports separate styling for every second item, which makes alternating left/right timelines easy to build without custom CSS.
Add the Divi Timeline module
When you load the Visual Builder, Divi automatically adds a Section.
Click the Green Plus icon
to insert a Row.Click the Gray Plus icon
inside the Row, which will show the list of all available Divi modules.Find the Timeline module and click on it to load it. Alternatively, you can use the Search option to find it.
Divi inserts the Timeline module with a starter set of Timeline Items so you can see the layout immediately.
Timeline Module Use Cases
Company or brand history pages where each year is its own event.
Product roadmaps showing past releases and upcoming milestones.
Résumé and CV pages with education, jobs, and certifications laid out chronologically.
Project case studies broken into discovery, design, build, and launch phases.
Step-by-step process pages, onboarding flows, service explainers, or how-it-works sections.
Timeline Module Settings Breakdown
Once you've added the Timeline module, its settings panel opens automatically. Like every Divi 5 module, options are organized into three tabs:
The Content tab
The Content tab is where you manage the items in your timeline and the standard module-level settings.
Add, edit, and remove - add new Timeline Items, edit them, duplicate them, or delete them. Covered in detail below.
Link - make the entire Timeline module clickable, directing users to another page, section, or external URL.
Background - choose the Timeline module's background styles.
Loop - enables the loop builder so the timeline can pull events from a dynamic data source.
Order - choose where the Timeline module appears inside a Flexbox or Grid layout.
Meta - choose the Timeline module's label text and force its visibility inside the Visual Builder.
The Design tab
All the design styles and options for the Timeline module are in this tab.
Timeline - choose the Timeline module's overall layout, including the alternating-sides toggle that drives the Even-variant styling.
Track - choose the styling for the connecting line that runs through the timeline, including color, weight, and spacing.
Item - choose the Timeline module's item wrapper styles. Includes Even-variant options to style every second item differently.
Spacer - choose the gap between items along the track. Includes Even-variant options.
Connector - choose the styling for the short line that joins each marker out to its card.
Marker - choose the dot, icon, or shape that sits on the track at each event.
Card - choose the Timeline module's card styles, the block that holds each event's date, title, and body text. Includes Even-variant options for alternating-side designs.
Date Text - choose the typography for the date label on each event. Includes Even-variant options.
Title Text - choose the Timeline module's title text styles. Includes Even-variant options.
Body Text - choose the Timeline module's body text styles. Includes Even-variant options.
Sizing - choose the Timeline module's sizing.
Spacing - choose the Timeline module's spacing.
Border - choose the Timeline module's border styles.
Box Shadow - choose the Timeline module's Box Shadow styles.
Filters - choose the Timeline module's filters, such as hue shifts, saturation changes, and blending modes.
Transform - choose the Timeline module's advanced design effects, such as scaling, rotating, skewing, and translating.
Animation - choose the Timeline module's animation styles, adding personality and interactivity while keeping a polished, professional feel.
The Advanced tab
The Advanced tab is for experienced designers who want to fine-tune the module with CSS, conditional logic, scroll effects, and HTML semantics.
Attributes - assign a CSS ID, reusable classes, or custom HTML attributes.
CSS - add custom CSS for fine-grained styling.
HTML - choose the semantic HTML tag for the module wrapper.
Conditions - show or hide the module based on dynamic conditions.
Interactions - trigger actions on the module from elsewhere on the page.
Visibility - control which devices the module displays on.
Transitions - set the duration and easing for hover and state changes.
Position - pin the module relative to its parent.
Scroll Effects - animate the module as the visitor scrolls past it.
Add, edit, and delete Timeline items
Each event on your timeline is a Timeline Item child module. You manage them from the Content tab of the parent Timeline module.
Open the Timeline module by clicking it on the page, then click the gear icon to open its settings.
To edit an item, click the pencil icon next to the Timeline Item you want to update. You can change its date, title, body content, or any of its own design settings.
To add an item, click Add New Timeline Item in the Content tab. Fill in the date, title, and body, then style it as needed.
To duplicate an item, click the duplicate icon next to it. This copies all content and per-item styling.
To delete an item, click the trash icon next to it.
⚠️ Note: Drag the handle on the left edge of each item to reorder events along the timeline.
Style every second item with the Even options
Several Timeline option groups include Even-variant sub-options that let you style every second item differently from the rest, with no custom CSS required. These even sub-options live inside the Item, Spacer, Card, Date Text, Title Text, and Body Text option groups on the Design tab.
The most common use is an alternating-side vertical timeline:
Open the Timeline module's Design tab.
In the Card option group, set the card to align to the left of the track.
In the same Card option group, switch to the Even sub-options and set the card to align to the right of the track. [VERIFY: confirm the exact option label that controls the card side and how even sub-options are surfaced in the UI.]
Repeat the same odd/even pairing inside the Item and Spacer groups to fine-tune the offset and gap on each side.
You can also use Even sub-options for subtler effects, like different card backgrounds on alternating events, different title colors for paired phases of a project, or different spacing for visual rhythm down the timeline.
Pro tip: The Connector and Marker option groups do not include Even sub-options. They sit on the track itself, so styling them consistently keeps the spine of the timeline visually unified.
Styling individual Timeline items
When you edit a setting on the parent Timeline module, it applies to every Timeline Item below it. But you can also override styling on a single item.
Click the gear icon next to the Timeline Item you want to style individually. This opens that item's own Content and Design tabs. The Timeline Item child module exposes a focused set of option groups:
Item Content - the date, title, and body fields for this specific event.
Spacer, Connector, Marker, Card - per-item overrides of the structural design.
Date Text, Title Text, Body Text - per-item typography overrides.
Settings you change here apply only to this item. To return to the parent module's settings, click the arrow icon in the top-left corner of the modal.
What's the next step?
Save your changes and exit the Visual Builder
To save the page design, you can type CMD + S on a Mac or CTRL + S on a PC.
You can also:
Click on the Save button.
Click on the Exit button.
