About this plugin
Neon Timeline for Elementor adds a fully-featured, visually stunning timeline widget to the Elementor page builder. Display company histories, product roadmaps, career journeys, event chronologies, or step-by-step processes with a modern neon aesthetic — all controlled entirely from the Elementor panel, no custom CSS required.
Key Features
Layout
- Vertical timeline — alternating left/right cards with a centred animated rail
- Horizontal timeline — drag-to-scroll card track with above/below alternating support
- Per-breakpoint layout switching — choose a different layout for Desktop, Tablet, and Mobile independently (e.g. Horizontal on desktop, Vertical on mobile)
- Alternating, all-left, or all-right card positions for the vertical layout
- Alternating above/below card positions for the horizontal layout
Design
- 4 built-in neon gradient colour presets: Electric Violet, Neon Magenta, Aurora Blue, Cyber Green
- Custom colour override with full gradient control
- Glassmorphism-style dark cards with a layered glow border on hover
- Mouse spotlight effect — a subtle radial glow that follows the pointer inside each card
- Smooth hover lift animation on cards
- Active item rail progress fill that animates on scroll
Per-item controls
- Badge label and colour
- Date / year
- Title, description
- Icon (Font Awesome library, plain text/number, or image)
- Card image with configurable height, border radius, and object-fit
- Status indicator: Completed, Active, Upcoming
- CTA button with URL and external link support
- Individual card skin per item
Style controls (all via Elementor panel)
- Card background, border radius, padding
- Image height, image border radius, image fit
- Icon box size and icon glyph size
- Title, description, and date colours + full typography groups
- Rail colour and thickness
- Node size
- Gap between cards (vertical and horizontal independently)
- Horizontal card width and track top/bottom spacing
- Entrance animation: Fade Up, Fade In, Zoom In, None
- Stagger delay for sequential reveals
Performance & accessibility
- Minified CSS and JS served in production ( SCRIPT_DEBUG aware)
- IntersectionObserver for scroll-triggered reveals (no layout-thrashing)
- Throttled resize handler for breakpoint detection
- Keyboard navigable (arrow keys move between items)
- prefers-reduced-motion respected — all animations disabled
- Lazy-loaded card images
- Proper ARIA attributes on interactive elements
- Full live preview in the Elementor editor (content_template)
Use Cases
- Company history and founding story
- Product roadmap
- Career journey / portfolio timeline
- Event chronology
- Step-by-step process guide
- Project milestones
- Product release timeline
Requirements
- WordPress 6.3 or higher
- Elementor 3.5.0 or higher (free version — does not require Elementor Pro)
- PHP 7.4 or higher