Md Jubayer Hossain

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

Jubayer Neon Milestones for Elementor

Create stunning neon timeline layouts for Elementor with responsive design and smooth animations.

Abu Hayat

bPlugins

shehabulislam

srabonr

Tanin Rahman

Prosanta Roy

taninrahman21

The Most User-Friendly Timeline Plugin for WordPress – Loved by Thousands.
Timeline makes it effortless to create responsive, customizable, and interactive timelines that fit perfectly inside posts, pages, and widgets. 
Whether you’re displaying a personal journey, company history, project milestones, or event schedules — Timeline gives you complete visual storytelling freedom.
The plugin offers vertical and horizontal layouts, supports start alignment, custom HTML titles, and includes a powerful shortcode generator for quick embedding.
Choose the layout you like, add timeline items, customize the visuals — and publish. No hassle. No technical knowledge required.
<a href="https://bplugins.com/products/b-timeline/" rel="nofollow ugc">Timeline</a> | <a href="https://bplugins.com/products/b-timeline/pricing" rel="nofollow ugc">Pricing</a> | <a href="https://bplugins.com/support/" rel="nofollow ugc">Support</a> | <a href="https://bplugins.com/products/b-timeline/#demos" rel="nofollow ugc">Demo</a>
<h3>Key Features</h3>
<ul>
<li>Vertical & Horizontal Layouts: Easily switch between vertical and horizontal timelines with a single click.</li>
<li>Start Index Control: Choose whether your timeline begins from the left, right, top, or bottom.</li>
<li>Visible Item Limit (Horizontal): Select how many items should appear at once for better usability.</li>
<li>HTML Support in Timeline Titles: Add icons, bold text, or any HTML tags inside your titles.</li>
<li>Responsive & Mobile Friendly: Timelines automatically adapt to all screen sizes..</li>
<li>Shortcode Generator: Quickly embed a timeline anywhere using shortcode.</li>
<li>Lightweight & Fast: Clean code, optimized performance, and minimal footprint.</li>
</ul>
<h3>Pro Features</h3>
Upgrade to Timeline Pro and access advanced customization, premium themes, and interactive editing options.
What’s Included in the Pro Version?
<ul>
<li>Powerful Gutenberg Block: Build and customize timelines visually inside the Block Editor.</li>
<li>Nine Extra Themes: Professionally designed templates including dual-orientation themes.</li>
<li>Classic Editor for Descriptions: Format descriptions beautifully with rich text support.</li>
<li>Customizable Icons: Add icons to timeline items and style them exactly how you want.</li>
<li>Advanced Styling Options: Add icons to timeline items and style them exactly how you want.</li>
<li>Customizable Icons: Add icons to timeline items and style them exactly how you want.</li>
<li>Enhanced Layout Controls: Adjust every detail for a polished, professional timeline.</li>
<li>Animation: Add animation to your timeline items.</li>
<li>Enhanced Customization Options: Fine-tune every aspect of your timeline for ultimate design control.</li>
</ul>
👉 <a href="https://bplugins.com/products/b-timeline/pricing" rel="nofollow ugc">Upgrade to PRO</a>
<h3>🎯 How to Use Timeline – Quick Start Guide</h3>
<ol>
<li>Install and activate the plugin</li>
<li>Go to → Timeline → Add New</li>
<li>Configure your timeline settings</li>
<li>Copy the generated shortcode</li>
<li>Paste it inside any post, page, or widget</li>
</ol>
That’s it — your timeline is live!
<h3>Use Cases</h3>
Personal milestones & life stories
<ul>
<li>Company history timeline</li>
<li>Event & conference schedules</li>
<li>Project roadmap</li>
<li>Product evolution</li>
<li>Educational course chapters</li>
<li>Portfolio storytelling</li>
</ul>
<h3>⭐ Checkout our other WordPress Plugins-</h3>
🔥 <a href="https://audioplayerwp.com/" rel="nofollow ugc">Html5 Audio Player</a> – Best audio player plugin for WordPress.
🔥 <a href="https://wpvideoplayer.com/" rel="nofollow ugc">Html5 Video Player</a> – Best video player plugin for WordPress.
🔥 <a href="http://pdfposter.com/" rel="nofollow ugc">PDF Poster</a> – A fully-featured PDF Viewer Plugin for WordPresss.
🔥 <a href="https://wordpress.org/plugins/streamcast" rel="ugc">StreamCast</a> – A fully-featured Radio Player Plugin for WordPresss.
🔥 <a href="https://3d-viewer.bplugins.com/" rel="nofollow ugc">3D Viewer</a> – Display interactive 3D models on the webs.

Timeline – Vertical and Horizontal Timeline Layouts

Create stunning vertical or horizontal timelines to showcase stories, events, milestones, and memories on any WordPress site — no coding needed.

Jubayer Neon Milestones for Elementor vs Timeline – Vertical and Horizontal Timeline Layouts