Divi Horizontal Timeline
Tell your story, left to right.
DG Horizontal Timeline is a Divi 5 timeline module: dates, milestones and steps on one line that people can swipe, drag or click through. Cards sit above, below or alternating, with photos, icons, numbers or avatars on the line. Ten real uses below, from company history to a fundraiser.
Live examples
Explore 15 Divi timeline examples
Drag, swipe or use the arrows on each timeline. All ten are one DG Horizontal Timeline module with a different layout, marker and line style.
USE CASE 01 · LUXURY BRANDS & HERITAGE
Maison Verlaine, since 1872
One and a half centuries on a single gold thread. The years sit on the line in large serif type, the stories float above it, and each card fades into its marker.
Date: on the line, serif · Cards: above, hairline gold top · Connector: fade · Marker: ring · 4 in view
USE CASE 02 · ARCHITECTS & DESIGN STUDIOS
The making of Casa Lume
A project diary as clean as the drawings. Photos lead every card, a dashed line marks the build, and cards step up and down like a section drawing.
Cards: alternate, first below · Line: dashed · Marker: dot · Connector: line · Arrows: top right, square
The site
A sloping olive grove facing the sea, and a brief for a house that disappears into it.
Concept & models
Forty clay models later: three stepped volumes under one long roof.
Permits & details
Every window framed to a single tree, every wall in local limestone.
On site
Fourteen months of building with a team of local masons and carpenters.
Handover
The family moved in with the first rain. The olive trees are all still there.
USE CASE 03 · SPACE, SCIENCE & DEEP TECH
Orbit-7: from launch to the Moon
A mission log that runs by itself. The glowing line fills as each phase moves to the centre, numbered markers light up, and glass cards float in deep space.
Marker: number, 42px glow · Highlight: centre · Autoplay: 3.5 s · Line: 4px cyan · Connector: dotted · Date: pill
USE CASE 04 · WINERIES, FARMS & SEASONS
A year in the vineyard
Two wide cards in view, a photo beside the words, and a burgundy ribbon on each corner for the season. As slow and warm as the wine itself.
Cards: below · Image: left of the text · Date: corner ribbon · Connector: pin · 2 in view · Arrows: bottom centre
Bud break
The first green shoots open on the old vines, and the frost watch begins.
Flowering
Ten quiet days that decide the size of the harvest. We hold our breath.
Harvest
Every bunch picked by hand at dawn, then sorted berry by berry in the shade.
Into the cellar
The new wine rests in French oak for eighteen months, under the house.
First tasting
Friends, family and the pickers taste the year together around one long table.
USE CASE 05 · FASHION & PRODUCT DROPS
The SS27 drop calendar
Tall lookbook photos above a slim dotted line, a boxed date for every drop and a little arrow pointing down to the day it lands. Drag it like a mood board.
Cards: above · Image: tall, top · Date: box · Line: dotted · Connector: arrow · 4 in view · Arrows: bottom right
Sunlit
Drop 01 · 12 FebCotton tees, tinted shades and the colour of late afternoon.
Coastline
Drop 02 · 5 MarLinen layers made for wind, salt and long walks.
Noir
Drop 03 · 2 AprWide brims, hard light and everything in black.
Verde
Drop 04 · 30 AprCrop tops and wide trousers in the green of new leaves.
City
Drop 05 · 28 MayBomber jackets and stair-step tailoring for the summer streets.
USE CASE 06 · COMPANY HISTORY
From a kitchen table to 120 people
The classic “About us” timeline: a photo for each year, cards alternating above and below the line, arrows and dots to move through the years.
Cards: alternate · Media: photo · Marker: ring
It starts at a kitchen table
Two friends, one laptop and a list of 40 local shops to call.
Our first real office
Six desks above a bakery. The smell of bread was free.
New York calling
Our first office abroad, and our first client with a skyline.
Home base in Lisbon
We moved the team to the sea, and never looked back.
Remote by choice
Half the team now works from 14 countries, coffee in hand.
120 people strong
Still small enough to know every name and every dog.
USE CASE 07 · PRODUCT ROADMAP
What we shipped, and what’s next
Each quarter has its own marker icon and accent colour: green for shipped, amber for in progress, grey for planned. The date is a ribbon in the card’s corner.
Marker: icon per item · Date: ribbon · Accent: per item
USE CASE 08 · ORDER TRACKING
Where’s my parcel?
Five steps that always fit on the screen, so there is nothing to scroll: no arrows, no dots. Icons sit on the line, times sit under it, and the cards are see-through.
Items in view: 5 · Date: on the line · Cards: no background
USE CASE 09 · EVENT AGENDA
Design Summit · Day one
Speaker photos sit on the line as markers. The timeline moves on by itself every 4 seconds and stops when someone hovers over it.
Marker: speaker photo · Autoplay: 4 s, pause on hover · Date: box style
Opening keynote
Mia Torres · Why calm design wins
Type that talks
Kai Nakamura · Fonts with feelings
Lunch & demos
Garden terrace · 40 product demos
Shipping weekly
Daniel Park · Small teams, big rhythm
Design for trust
Emma Lind · Forms people finish
Sunset drinks
Rooftop · live DJ until 21:00
USE CASE 10 · WEDDING WEBSITE
Our story, Sofia & James
A soft, romantic timeline for a wedding site: heart icons on a fine line, tall portrait photos, and a pin connecting each card to its moment.
Marker: heart icon · Connector: pin · Line: thin
We met
A rainy book fair in Porto, the same book, one copy.
First trip
Ten days, one tent, a lot of laughing.
Moving in
A tiny flat with a big window and two plants.
The question
On the same bridge where we had our first walk.
I do
12 September · Quinta da Serra, Sintra.
USE CASE 11 · RÉSUMÉ
Ten years, five teams
A CV that reads like a story. Company logos sit on the line, the dates sit above each title, and all cards share one side.
Marker: logo image · Cards: above · Date: above the title
Junior designer · Northwind
Icons, banners and my first design system.
Product designer · Lumen
Shipped the mobile app to 2M people.
Senior designer · Fable
Led checkout. Conversion up 18%.
Design lead · Orbit
A team of six, and a lot of whiteboards.
USE CASE 12 · ONBOARDING
Get set up in five steps
Numbered markers count the steps for you, and each card ends with a button to the right page. Arrows sit at the bottom, under the steps.
Marker: number (auto) · Card: button · Arrows: bottom centre
USE CASE 13 · AGENCY PROCESS
How we work
Each phase gets a big icon at the top of its card, the line is dashed, and the markers are simple dots. Drag it with the mouse or swipe on a phone. Media: icon · Line: dashed · Marker: dot
USE CASE 14 · TRAVEL ITINERARY
Seven days on the Portuguese coast
One card per day with a photo. The active day is held in the centre, cards sit above the line, and on phones it stays a swipeable strip. Highlight: centre · Phone: swipe · Cards: above
Lisbon
Trams, tiles and custard tarts.
Sintra hills
Palaces hiding in the fog.
Atlantic road
Windows down, music up.
Comporta
Rice fields and empty beaches.
Alentejo coast
Cliffs, storks and grilled fish.
Lagos
Kayak into the sea caves.
Sagres sunset
The end of Europe, glowing.
USE CASE 15 · FUNDRAISER
€72,400 raised for 3 new wells
Milestones a charity has reached, and the ones still ahead. Reached milestones have filled markers and the progress line; the start is set to the last item, so visitors see the goal first.
Start at: last item · Marker: icon · Date: pill