The Timeline Module in Divi 5¶
The Divi 5 Timeline Module creates animated, vertically (or horizontally) flowing timelines of events. It is loop-aware, so each timeline entry can be generated from a post, custom post type, or other dynamic source.
Overview¶
This module was introduced as part of the Five New Modules for Divi 5 release (Timeline, Breadcrumbs, Table of Contents, SVG, Instagram Feed). Per the announcement, the Timeline module is designed to work well inside loops, making it suitable for date-based content such as company history, release changelogs, or résumés generated from a CPT.
Caption: Placeholder — capture once a working install is available.
Settings & Options¶
Content Tab¶
| Setting | Type | Default | Description |
|---|---|---|---|
| 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. |
Design Tab¶
| Setting | Type | Default | Description |
|---|---|---|---|
| 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. |
Advanced Tab¶
| Setting | Type | Default | Description |
|---|---|---|---|
| CSS ID | text | none | Custom HTML id attribute |
| CSS Class | text | none | Custom CSS class(es) |
| Custom CSS | code | none | Target specific elements within the module |
| 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 New Timeline Item | Add New Timeline Itemin the Content tab. Fill in the date, title, and body, then style it as needed. | ||
| Card | he sameCardoption 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.] | ||
| Item | at the same odd/even pairing inside theItemandSpacergroups to fine-tune the offset and gap on each side. | ||
| 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. | ||
| Save | k on theSavebutton. | ||
| Exit | k on theExitbutton. |
Elegant Themes tutorials¶
- Five New Modules for Divi 5 (Timeline, Breadcrumbs, Table of Contents, SVG, Instagram Feed) — release announcement covering all five modules; the Timeline module is highlighted as loop-friendly.
Version Notes¶
Divi 5 Only
This page documents Divi 5 behavior exclusively.