Plugin Details
Home / Plug-in market / Timeline Design Module
Timeline Design Module
Timeline Design Module
Overview
Timeline is a plugin that adds a timeline display module to the admin "Design → Decoration" builder. It offers four beautifully designed timeline styles for showcasing brand development journeys, company milestones, project timelines, product iteration history, and more. With extensive visual customization options, your brand story becomes more engaging.
Key Features
🎨 Four Timeline Styles
| Style | Description | Use Cases |
|---|---|---|
| Style 1 · Horizontal Arrow Timeline | Full-width card layout with arrow-shaped connectors between nodes – strong visual impact | Brand milestones, annual reviews |
| Style 2 · Vertical Image+Text Timeline | Alternating left/right image-text layout, image upload & position toggle, fold/expand support | Detailed development journey, storytelling |
| Style 3 · Centered Zig-zag Timeline | Cards automatically alternate left/right along a center axis – elegant visual, supports images and fold | Company history, project milestones |
| Style 4 · Horizontal Scroll Milestones | Cards arranged horizontally, scrollable when overflow (scrollbar hidden) – touch-friendly browsing | Milestone showcase, timeline overview |
📐 Rich Configuration Options
Common Settings (All Styles)
| Option | Description |
|---|---|
| Title & Description | Multi-language title and rich text description |
| Background Color | Custom module background color |
| Title Color | Custom title text color |
| Description Color | Custom description text color |
| PC Padding | Independent 4-side padding (top/right/bottom/left), range 0–400px |
| Mobile Padding | Independent 4-side padding (top/right/bottom/left), range 0–300px |
| Module Width | Narrow (container) / Wide (container-fluid) / Full width (w-100) |
Style-Specific Settings
| Style | Exclusive Options |
|---|---|
| Style 1 | Bar color |
| Style 2/3 | Fold toggle, default visible node count, expand/collapse button text |
| Style 4 | No additional options (cards auto-adapt to container) |
📝 Timeline Node Content
Each timeline node supports the following fields:
| Field | Description |
|---|---|
| Subtitle | Multi-language support – core node title |
| Description | Rich text editor with formatting support |
| Color | Node accent color (dot, connector, card border/bottom edge) |
| Date | Date picker (Style 1 & 4) |
| Image | Image upload + Alt tag (Style 2 & 3) |
| Image Position | Left / Right (Style 2 only) |
| Date Title | Large year text (Style 2 & 3) |
| Date Text | Detailed date information (Style 2 & 3) |
Technical Features
-
✅ Four Styles Freely Switchable : One-click timeline appearance changes without node reconfiguration
-
✅ Responsive : Mobile layout automatically collapses to a single vertical column
-
✅ Fold/Expand Support : Fold excess nodes to improve page browsing experience
-
✅ Lazy-loaded Images : Optimizes page load performance
-
✅ CSS Variables : Each module independently configured without interference
-
✅ Any Theme Compatible : Frontend views are plugin-bundled, unaffected by theme changes
-
✅ Design Editor Preview : Real-time preview within the design builder – WYSIWYG
Use Cases
-
Brand development journey / company milestones
-
Product version iteration history
-
Project milestone showcase
-
Team growth story
-
Event timeline recap
-
Awards & certifications timeline
