Timeline
Tell your history or a process as a step-by-step timeline.
A vertical timeline block whose items hold any blocks — alternating or one-sided (separately on phones), icon, number, dot, image or text markers, a line that fills as you scroll, reveals, or your latest posts.
Gutenberg block
Requirements
- The block editor (Gutenberg)
- WordPress 6.5 or newer
- PHP 7.4 or newer
- Licence: Pro ($2 / year) — add it to the cart in Moduly
Add it to a page
- Open the page or post in the block editor.
- Click + (Block Inserter) and search for Timeline — it is in the Moduly category.
- Insert it, then fill in its content on the canvas. Ready-made presets appear when you insert it, and later under Transform to in the block toolbar.
- Adjust it in the right sidebar: the Block tab holds the settings below, and the Styles tab its colours, typography and spacing.
- Add or reorder items with the + inside the block; each item (Timeline Item) has its own settings when selected.
Settings
Items
| Setting | What you can set |
|---|---|
| Items from | manual or posts |
| Date | beside, inside or none |
| Post type | Text |
| Number of posts | 1–50 |
| Order | DESC or ASC |
| Order by | date, modified, title, menu order or rand |
| Category IDs | Text |
| Date format | Text |
| Excerpt length (words) | 0–100 |
| Button text | Text |
| Show the featured image | On / off |
| Category as a badge | On / off |
| Marker | Text |
| Leave out the current post | On / off |
| Title | Colour |
| Date | Colour |
Layout
| Setting | What you can set |
|---|---|
| Layout | alternate, left or right |
| Layout on phones (under 782 px) | alternate, left or right |
| Markers | icon, number, dot or image |
| Marker position | top or center |
| Card arrow | On / off |
| Image | top, bottom or side |
| Title HTML tag | h2, h3, h4, h5, h6, p or div |
| Card text alignment | left, center or right |
| Mirror the text on the left side | On / off |
| Button look | link or button |
| Image height (px) | 0–600 |
| Image width beside the text (px) | 40–400 |
| Button | Colour |
Scroll effects
| Setting | What you can set |
|---|---|
| Draw the line as you scroll | On / off |
| Reveal items | none, rise, slide, fade or zoom |
| Pulse the latest passed marker | On / off |
| Lift cards on hover | On / off |
Sizes
| Setting | What you can set |
|---|---|
| Line style | solid, dashed or dotted |
| Line width (px) | 1–16 |
| Space between items (px) | 0–160 |
| Space beside the line (px) | 0–120 |
| Marker size (px) | 8–140 |
| Marker icon / number size (px) | 6–80 |
| Marker roundness (px) | -1–70 |
| Card radius (px) | -1–60 |
| Card padding (px) | -1–80 |
| Line | Colour |
| Progress line | Colour |
| Marker background | Colour |
| Marker icon / text | Text |
| Passed marker background | Text |
| Passed marker icon | Text |
| Highlighted marker | Text |
| Card background | Colour |
| Highlighted card background | Text |
| Text | Colour |
| Badge text | Colour |
| Badge background | Colour |
Timeline Item (item) settings
Items
| Setting | What you can set |
|---|---|
| Button text | Text |
| Marker | icon, number, dot, image or text |
| Date | Colour |
Sizes
| Setting | What you can set |
|---|---|
| Highlight this item | On / off |
| Marker background | Colour |
| Card background | Colour |
Item
| Setting | What you can set |
|---|---|
| Badge | Text |
| Link | Text |
| Open in a new tab | On / off |
Marker
| Setting | What you can set |
|---|---|
| Marker text | Text |
| Marker icon | Colour |
Styles tab: typography and spacing, from WordPress's own design tools.
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.
- Not sure where to start? Insert one of its presets and edit from there.
Troubleshooting
- In the editor the line spans the whole list, and the scroll fill and reveal only run on the front end.
- Category filtering for posts takes IDs (comma separated) rather than a picker.
- Pre-existing elementorFrontendConfig is not defined front-end error for logged-in users (Elementor), not from this block.
- A change not showing on the live site is almost always a page cache — clear your caching plugin or host cache.
Related
- Also available for Elementor (Timeline).
- Works well with: Advanced Accordion, Card, Content Switcher.