New here? Get 40% off Lifetime plans.

See pricing
Skip to content
Get Divi Torque Buy Now

Native Divi 5 ModulePro

Divi Timeline

Tell a story on a vertical timeline.

Why use the Divi Timeline module?

A history, a roadmap, a process, a set of release notes: they are all the same shape, and building that shape by hand in Divi means a column of rows, a vertical line faked with a border, and a row of circles that drift out of line the moment one entry runs longer than the rest.

The Timeline module is one module holding the whole thing. Each entry is a child item with a title, a subtitle, a description, an image, an icon and a date, and the parent owns the layout, the line and the spacing.

The timeline beside this is the live module, running layout 2.

One module, any number of entries

HOW IT WORKS
Each entry is a child item with its own title, subtitle, description, image, icon and date.
Jan 08, 2026
09 AM
5

Three layouts

ONE DROPDOWN
Alternating, single column, or title across the line from the body.
Feb 19, 2026
09 AM

Every part is styled separately

DESIGN
The line, the connector, the content box and six text elements each have their own group.
Apr 11, 2026
09 AM

What you get out of it

Three layouts, one dropdownAlternating sides, a single column, or the title pulled across the line from the body. Switching does not touch the entries.The connector is its own elementAn icon from the Divi picker or an uploaded image, with size, colour, background, dimensions and a border of its own.A line that fills as you scrollTwo line colours, resting and active, and an option to draw the active one in as the reader moves down the page.Dates that read properlyFour date formats, or move the date into the connector circle where the day, month and year each get their own typography.Spacing per breakpointItem spacing, content padding and the title, subtitle and date spacings each take a separate desktop, tablet and phone value.Native on Divi 5Built on the Divi 5 engine, and Divi 4 layouts using the old timeline shortcode convert across.

Everything the Divi Timeline module does

Every option below ships in Divi Torque Pro. The list is drawn from the module settings.

Any number of entries as child itemsThree layouts: alternating, single column, splitTitle, subtitle and description per entryOne image per entry, with its own alt textConnector icon from the Divi icon pickerOr an uploaded image as the connectorDate and time per entryFour date formatsDate in the connector instead of an iconSeparate day, month and year typographyShow or hide the date, and the timeLine width, colour and active colourScrolling line that fills on scrollConnector size, colours, background, borderContent background, padding and radiusContent direction arrow, and its positionLeft column width for the split layoutItem spacing, responsiveImage height, width and spacing, responsiveSeparate font groups for six text elementsCustom CSS hooks for title, subtitle, image, description, date and connector

See the Divi Timeline in action

Every timeline below is the live module, not a picture of one. This first one is layout 1, which alternates entries either side of the line.

Layout 1 · Alternating

Odd entries left, even entries right, line down the middle.

Layout 1 alternates sides

TEMPLATE
Odd entries sit left of the line, even entries sit right. The line runs down the middle. This is the layout most people picture when they say timeline.
Jan 12, 2026
09 AM
5

The connector is a real element

CONNECTOR
Size, colour, active colour, background, height, width and border all belong to the circle on the line. It takes an icon from the Divi picker, or an image you upload.
Feb 03, 2026
09 AM

Two line colours, not one

LINE
The line has a resting colour and an active colour. Turn on the scrolling line and the active colour fills in as the reader moves down the page.
Mar 18, 2026
09 AM

Spacing is responsive

SPACING
Item spacing, content padding and the title, subtitle and date spacings each take their own value on desktop, tablet and phone.
Apr 27, 2026
09 AM

Layout 2, with images

One column, line on the left, every entry to the right of it. An entry takes a single image, and entries do not have to match. This is the layout for a sidebar or a narrow column.

Brief and research

WEEK ONE
A quiet studio interior with a desk and daylight
An entry takes one image, a title, a subtitle and a description. The image sits above the description and has its own height, width and border.
Feb 02, 2026
09 AM
5

Design review

WEEK THREE
A gallery space with framed work on a pale wall
Entries do not have to match. This one carries an image, the next one does not, and the line stays even because spacing is set on the parent.
Feb 16, 2026
09 AM

Build and handover

WEEK SIX
Layout 2 keeps the line on the left and every entry to the right of it, which suits a narrow column better than the alternating layout does.
Mar 09, 2026
09 AM

Layout 3 puts the title across the line

The title and subtitle move into their own right-aligned column on the left, and Content Left Width sizes it.

Layout 3 · Split

Heading on one side of the line, body on the other.

Title crosses the line

LAYOUT 3
In layout 3 the title and subtitle are pulled out to the left of the line and right-aligned, and the description stays on the right. Content Left Width sizes that column.
Jan 20, 2026
09 AM
5

Good for dates

WHEN TO USE IT
It reads best when the left column is short and repeats: a year, a stage name, a release number.
Feb 24, 2026
09 AM

Same settings underneath

NO EXTRA WORK
Switching layout does not ask you to rewrite the entries. It is one dropdown and the same three fields.
Apr 06, 2026
09 AM

The date as the connector, and a line that fills

Scroll this band slowly: the active colour draws in behind the resting line as it comes into view.

Date connector · Scrolling line

Day, month and year in the circle, and the date row switches itself off.

04
Mar
2026

The date becomes the connector

DATE CONNECTOR
Turn on Date Connector and the circle carries the day, month and year instead of an icon. Each of those three has its own font group.
22
Apr
2026

The date row switches off

NO DUPLICATE
When the date is the connector, the module stops rendering the date row inside the content, so the same date is never printed twice.
15
Jun
2026

The line fills as you scroll

SCROLLING LINE
Use Scrolling Line draws the active colour in behind the resting colour as the reader moves down. Scroll this band and watch the line above.

Building one takes about two minutes

Three steps, and none of them involve custom CSS.

1Add the timelineDrop Timeline into any row. It arrives with entries already in place, so the shape is there before you type anything.2Write each entryEvery entry is a child item: a title, a subtitle, a description, an optional image, a connector icon and a date.3Pick a layoutAlternating, single column or split, then set the line colours, the connector and the item spacing.

Questions people ask first

Short answers, all of them checked against what the module actually does.

Is the Timeline module free?No. It ships in Divi Torque Pro. The free plugin does not include it.Does it need Divi 5?It is a native Divi 5 module, built on the Divi 5 engine rather than shimmed from Divi 4. Layouts built with the Divi 4 timeline convert across.Can I make it horizontal?Not with this module. Timeline is the vertical one. Horizontal Timeline is a separate module in Divi Torque Pro, with its own settings.Can the layout differ on mobile?No. The layout is a single setting for all breakpoints. The spacings are the responsive part: item spacing, content padding and the title, subtitle and date spacings each take three values.Can an entry hold a list or a heading?No. The description is a plain text area, so it takes text and line breaks rather than rich markup. Titles and subtitles are separate fields with their own typography.Can I link an entry to a page?No. There is no link field on an entry, so a timeline item is not clickable. Put the link in the surrounding section instead.