How to set up and style the Timeline widget in Elementor.
Timeline shows dated milestones as cards along a line. It can run vertically, with cards alternating or on one side, or horizontally as a row that visitors scroll. Use it for company history, roadmaps, project stages or event schedules.
Part of: Bright Addons Pro.
| Option | What it does |
|---|---|
| Items | The list of entries, each with a Content tab and a Marker tab. |
| Date / Label | The date or short label shown for the item. |
| Title | The heading of the card. |
| Content | Rich text for the card, which can include lists, links and images. |
| Image | An optional image shown at the top of the card. |
| Link | Adds a link button at the bottom of the card. |
| Link Text | The text of the link button, shown once a link is set. |
| Marker | Overrides the global marker for this item with an icon, text, image or dot. |
| Accent Color | Gives this single item its own accent color. |
| Option | What it does |
|---|---|
| Direction | Switches between a vertical and a horizontal timeline. |
| Line Position | For vertical timelines: center with alternating cards, left or right. |
| First Card Side | With the center line, puts the first card on the right or the left. |
| Move Line to the Left On | Moves a center or right line to the left on mobile, on tablet and mobile, or never. |
| Date Position | With the center line, shows the date opposite the card or inside it. |
| Items Visible | For horizontal timelines, how many items fit in view on each device. |
| Show Arrows | Adds previous and next buttons to a horizontal timeline. |
| Drag to Scroll With Mouse | Lets desktop visitors drag a horizontal timeline sideways. |
| Marker | The marker used for all items: one icon, an automatic number or a dot. |
| Fill Line While Scrolling | Fills the vertical line with the progress color as the visitor scrolls. |
| Reveal Items on Scroll | The effect used when items enter the screen. |
| Card Arrow | Shows or hides the small arrow on each card. |
| Title Tag | Sets the HTML tag used for card titles. |
One license gives you every Pro widget, all 10 extensions, the Theme Builder and priority support. From $16 a year, with a 14-day money-back guarantee.
These sections are in the Style tab.
accent color, space between items and space between card and line.
line color, progress fill color, thickness and solid, dashed or dotted style.
size, icon or text size, typography, Normal and Reached colors, Reached scale, border, radius and shadow.
background, hover background, border, shadow, radius, padding, hover lift and text alignment.
typography, color, background, padding and radius.
typography, colors and margins for the title (with a hover color) and the content.
height, border radius and spacing.
typography, colors, background, border, radius and padding, normal and hover.
button size, icon size, colors, border, radius and a disabled opacity for the horizontal arrows.
Yes. Open the item, go to its Marker tab and choose Icon, Text, Image or Dot. The Accent Color in the same tab changes the color for that item only.
By default a center or right line moves to the left on mobile so the cards have room. Change this with Move Line to the Left On. A horizontal timeline shows one item at a time on mobile unless you change Items Visible.
They can use the arrows, drag with the mouse, swipe on a touch screen or press the left and right arrow keys when the timeline has focus.
Check the troubleshooting guide, or contact support with the page address and what you expected to happen.
Troubleshooting guide