FAIR

Federated and Independent Repositories

Jubayer Neon Milestones for Elementor

Plugin Banner

Jubayer Neon Milestones for Elementor

by Md Jubayer Hossain

Download
Description

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

From the WordPress Plugin Directory

  1. In your WordPress admin, go to Plugins Add New
  2. Search for Neon Timeline for Elementor
  3. Click Install Now, then Activate
  4. Open any page or post in Elementor
  5. Search for Neon Timeline in the widget panel (left sidebar)
  6. Drag the widget onto your page and configure it

Manual Installation

  1. Download the plugin ZIP file
  2. Go to Plugins Add New Upload Plugin
  3. Choose the ZIP file and click Install Now
  4. Click Activate Plugin
Does it require Elementor Pro?

No. Neon Timeline works with the free version of Elementor (3.5.0+).

Can I use different layouts on desktop and mobile?

Yes. In the Content Layout panel you can independently select Desktop Layout, Tablet Layout, and Mobile Layout. For example: Horizontal on desktop, Vertical on tablet, Vertical on mobile.

How do I set up the horizontal scrollable timeline?

Set Desktop Layout to Horizontal. The track is drag-scrollable on desktop (click and drag) and touch-scrollable on mobile. Use the Style Rail & Nodes controls to adjust card width, gap, and track padding.

Can I add images to each card?

Yes. Each timeline item has a Card Image field. Once uploaded, you can control its height, border radius, and object-fit mode from Style Cards.

Can I use custom icons?

Each item supports three icon types: Icon Library (any Font Awesome or other library icon), Number / Text (for numbered steps), and Image (for custom logos or illustrations).

Does it affect my page’s performance?

Assets are minified and only loaded on pages that contain the widget. The scroll reveal system uses IntersectionObserver (no scroll listener overhead). All animations use CSS transform and opacity only.

Is it translation-ready?

Yes. The plugin is fully internationalised. A .pot template file is included in the /languages directory.

Is it GDPR compliant?

Yes. The plugin loads no external resources, makes no remote requests, sets no cookies, and collects no user data.

1.0.0

  • Initial release
  • Vertical and horizontal timeline layouts
  • Per-breakpoint responsive layout switching (Desktop / Tablet / Mobile)
  • 4 neon colour presets + custom colour support
  • Scroll-driven animated rail progress fill
  • Animated nodes with pulse effect on active item
  • Mouse spotlight hover effect on cards
  • Entrance animations (Fade Up, Fade In, Zoom In) with stagger delay
  • Drag-to-scroll for horizontal mode
  • Progress indicator dots for horizontal mode
  • Per-item: badge, date, title, description, icon, card image, status, CTA button, card skin
  • Full Elementor style controls: typography, colours, spacing, image sizing, icon sizing
  • Minified CSS and JS for production
  • Keyboard navigation (arrow keys)
  • Reduced-motion support
  • Translation-ready with .pot file
Back to top