Timeline
Tell your history or a process as a step-by-step timeline.
Vertical timelines, alternating or one-sided per device, from manual items or posts, with icon, number, dot or image markers and a line that fills as you scroll.
Elementor widget
Requirements
- Elementor 3.5 or newer
- WordPress 6.2 or newer
- PHP 7.4 or newer
- Licence: Pro ($2 / year) — add it to the cart in Moduly
Add it to a page
- Edit the page with Elementor.
- In the widget panel, search for Timeline. Our widgets sit in the Moduly category and carry the Moduly badge.
- Drag it onto the page.
- Set it up in the Content tab, style it in the Style tab, and use Advanced for spacing, motion and visibility.
Settings
Timeline
| Setting | What you can set |
|---|---|
| Items From | Entered here or Posts |
| Items | each item: Content, Date, Time, Title, Subtitle, Text, Image, Badge, Button Text, Link, … (18 in all) |
Posts
| Setting | What you can set |
|---|---|
| Post Type | Post, Page, Floating Element, Template, Project, Download or Product |
| Categories | Uncategorized · Empty = all. |
| Number of Posts | Number |
| Skip | Number |
| Order By | Date, Last modified, Title, Menu order or Random |
| Order | Newest / Z first or Oldest / A first |
| Leave Out the Current Post | On / off |
| Date Format | PHP date format, e.g. M Y. Empty = the site’s format. |
| Show the Time | On / off |
| Show the Featured Image | On / off |
| Show the Category as a Badge | On / off |
| Excerpt Length (words) | Number |
| Button Text | Text |
| Marker | Timeline default or Featured image |
Layout
| Setting | What you can set |
|---|---|
| Layout | Alternating (line in the middle), Line on the left or Line on the right · Set it per device — e.g. alternating on desktop, line on the left on phones. |
| Date | Beside the card (opposite side / above), Inside the card or Hidden |
| Markers | Icons, Numbers, Dots or Images · Each item can override it. |
| Marker Position | Top of the card or Middle of the card |
| Card Arrow | A small pointer from the card to the line. |
| Image | Above the text, Below the text or Beside the text |
| Image Resolution | any registered image size |
| Image Dimension | You can crop the original image size to any custom size. You can also set a single value for height or width in order to keep the original size ratio. |
| Title HTML Tag | H2, H3, H4, H5, H6, div or p |
| Card Text Alignment | Left, Center or Right |
| Mirror Text on the Left Side | Alternating: cards left of the line align right. |
Scroll Effects
| Setting | What you can set |
|---|---|
| Draw the Line as You Scroll | The line fills up to the middle of the screen; markers passed light up. |
| Reveal Items | No animation, Rise in, Slide in from the side, Fade in or Zoom in |
Style tab: design controls for Line, Markers, Card, Date & Time, Title & Text or Button — colours, typography, spacing, borders and hover states.
Tips
- Start with the Layout choice — it changes the overall look the most; fine-tune the rest afterwards.
- Visitors who ask their device for reduced motion get a calmer, still version automatically.
Troubleshooting
- Changes not showing on the live page? Regenerate CSS in Elementor → Tools → Regenerate CSS & Data and clear any page cache.
Related
- Also available for Gutenberg (Timeline).
- Works well with: Advanced Accordion, Advanced Toggle, Card.