Horizontal Timeline (Gutenberg)
Tell your history or a process as a timeline across the page.
A timeline across the page as a carousel or free-scrolling strip: events hold any blocks, the line fills to the current milestone, with a progress bar, arrows, dots, drag, wheel and keys.
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 Horizontal Timeline (Gutenberg) — 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 Event) has its own settings when selected.
Settings
Timeline
| Setting | What you can set |
|---|---|
| Cards | below, above or alternate |
| Markers | icon, number or dot |
| Current event (0 for none) | Number |
| Pulse on the current event | On / off |
| Line | solid, dashed, dotted or gradient |
| Dates | text or pill |
| Notch pointing at the marker | On / off |
| Cards of equal height | On / off |
| Reveal cards when scrolled to | On / off |
| Lift cards on hover | On / off |
| Dots | On / off |
| Line | Colour |
| Markers | Colour |
| Cards | Colour |
| Dates | Colour |
Moving through it
| Setting | What you can set |
|---|---|
| Movement | snap or free |
| Events in view | 1–8 |
| Events in view on tablets | 1–6 |
| Events in view on phones | 1–4 |
| Space between events (px) | 0–120 |
| Start at | first, current or last |
| At the end | stop, rewind or loop |
| Autoplay | On / off |
| Time per event (ms) | 1000–15000 |
| Pause on hover | On / off |
| Animation speed (ms) | 100–3000 |
| Arrows | On / off |
| Arrows sit | line, top or below |
| Progress bar | On / off |
| Drag and swipe | On / off |
| Arrow keys when focused | On / off |
| Mouse wheel and trackpad | On / off |
| Name for screen readers | Text |
| Arrows | Colour |
Sizes
| Setting | What you can set |
|---|---|
| Marker size (px) | 12–96 |
| Line width (px) | 1–10 |
| Done, current and progress | Colour |
| Line gradient end | Colour |
| Marker icons | Text |
| Arrow background | Colour |
| Active dot | Colour |
| Card headings | Colour |
| Card text | Colour |
Timeline Event (item) settings
Event
| Setting | What you can set |
|---|---|
| Marker icon | Text |
| Badge | Text |
| Or text in the marker | Text |
| Marker | Colour |
| Marker icon | Colour |
| Card | Colour |
| Date | Colour |
Styles tab: typography and spacing, from WordPress's own design tools.
Tips
- 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
- If “Start at the current event” lands past the last full view, Splide starts at the last full view instead (the next arrow is then disabled).
- In the editor, the strip doesn't run as a carousel; arrows, dots and the progress bar show only on the front end.
- Pre-existing elementorFrontendConfig is not defined front-end error for logged-in users (Elementor).
- A change not showing on the live site is almost always a page cache — clear your caching plugin or host cache.
Related
- Works well with: Advanced Accordion, Card, Content Switcher.