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.

Satinder Singh

CoolHappy

Cool Plugins

B.M. Rafiul Alam

ThemesByte

Vertical Timeline Widget for Elementor is a powerful plugin that helps you showcase your company history, achievements, personal journey, milestones, and more in a vertical timeline layout, directly inside the Elementor editor.
<iframe loading="lazy" class="youtube-player" width="750" height="422" src="https://www.youtube.com/embed/07rIF-qEWgA?version=3&rel=1&showsearch=0&showinfo=1&iv_load_policy=1&fs=1&hl=en-US&autohide=2&wmode=transparent" allowfullscreen="true" style="border:0;" sandbox="allow-scripts allow-same-origin allow-popups allow-presentation allow-popups-to-escape-sandbox"></iframe>
Simply drag, drop, and customize your timeline stories without writing a single line of code.
<h3>Key Features</h3>
<ul>
<li>
Vertical Timeline Layouts: Display your timeline in a one-sided or both-sided vertical layout that alternates stories on the left and right side.
</li>
<li>
Add Images: Visually tell your timeline story by adding interactive images.
</li>
<li>
Timeline Customization: Customize your timeline’s colors, typography, icons, spacing, and more directly inside Elementor.
</li>
<li>
Story Direction: Choose how stories flow in the vertical timeline to match your content structure.
</li>
<li>
Compatible with all WordPress Themes: Vertical Timeline widget plugin is fully compatible with all WordPress themes.
</li>
<li>
Fully Responsive: This plugin is fully responsive, ensuring that your timeline displays perfectly on all screen sizes.
</li>
</ul>
<a href="https://cooltimeline.com/elementor-widget/vertical-timeline-widget-for-elementor/?utm_source=vtwe_plugin&utm_medium=readme&utm_campaign=get_pro&utm_content=check_demos" rel="nofollow ugc">Check Demos</a>
<h3>Upgrade to Pro Version</h3>
You have to upgrade to <a href="https://cooltimeline.com/plugin/elementor-timeline-widget-pro/?utm_source=vtwe_plugin&utm_medium=readme&utm_campaign=get_pro&utm_content=upgrade_to_pro#pricing" rel="nofollow ugc">Timeline Widget Pro</a> to unlock more advanced features like: 
* Layout Options: Choose from Vertical, Horizontal, and more timeline layouts to match your design needs. 
* Advanced Style Settings: Easily adjust text size, fonts, and colors for each story in your timeline. 
* Image/Video/Slideshow: Add images, videos, or slideshows to your timeline. 
* Ajax Load More: Load more stories as users scroll down the timeline. 
* Story Migration: You can easily migrate all your existing timeline stories to Timeline Widget Pro for Elementor without any data loss.
<h3>Check our other plugins demos</h3>
<ul>
<li>Cool Timeline: Display your company’s history, product roadmaps, personal stories, or key events using the built-in block or via simple shortcode. <a href="https://cooltimeline.com/demo/free-timeline/?utm_source=vtwe_plugin&utm_medium=readme&utm_campaign=demo&utm_content=ctl_free_demo" rel="nofollow ugc">View Demo</a></li>
<li>Timeline Block For Gutenberg: Create interactive timelines directly within the WordPress Block Editor to display step-by-step tutorials, a company’s history, and a product roadmap. <a href="https://cooltimeline.com/demo/gutenberg-timeline-block/?utm_source=vtwe_plugin&utm_medium=readme&utm_campaign=demo&utm_content=tbg_free_demo" rel="nofollow ugc">View Demo</a></li>
<li>Timeline Module Pro For Divi: Showcase your personal story or company history using stunning vertical or horizontal timelines directly inside the Divi Builder. <a href="https://cooltimeline.com/divi/?utm_source=vtwe_plugin&utm_medium=readme&utm_campaign=demo&utm_content=tmdivi_pro_demo" rel="nofollow ugc">View Demo</a></li>
</ul>

Vertical Timeline Widget for Elementor

Use a vertical timeline widget for Elementor to showcase your journey, story, milestones, or roadmap directly inside Elementor.

Jubayer Neon Milestones for Elementor vs Vertical Timeline Widget for Elementor