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.

CoolHappy

Cool Plugins

<h3>Timeline Block for Gutenberg/Block Editor</h3>
<iframe loading="lazy" class="youtube-player" width="750" height="422" src="https://www.youtube.com/embed/WsFekfIL-A8?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>
<a href="https://cooltimeline.com/plugin/timeline-block-pro-for-gutenberg/?utm_source=tbg_plugin&utm_medium=readme&utm_campaign=get_pro&utm_content=top_description" rel="nofollow ugc">Timeline Block for Gutenberg</a> is a powerful WordPress timeline slider plugin designed specifically to help you build vertical step-by-step timelines, history/future stories, events, appointments, and many other cool things directly inside the WordPress editor.
Just search ‘Timeline Block‘ from the block editor ‘Add Block‘ section and create a stunning timeline slider.
<a href="https://cooltimeline.com/demo/gutenberg-timeline-block?utm_source=tbg_plugin&utm_medium=readme&utm_campaign=demo&utm_content=view_demo" rel="nofollow ugc">View Demos</a> | <a href="https://cooltimeline.com/docs/timeline-block-pro/video-tutorials/free-plugin-video/?utm_source=tbg_plugin&utm_medium=readme&utm_campaign=docs&utm_content=video_tutorial" rel="nofollow ugc">Watch Video Tutorials</a>
<h3>Key Features</h3>
<ul>
<li>Vertical Timeline Layout: Display your stories using a vertical timeline. </li>
<li>Multiple Timeline Designs: Choose whether you want to display the timeline on both sides or one side according to your preferences.</li>
<li>Content Alignment: Align your timeline content to the left, right, or center.</li>
<li>Customizable Labels: Add labels like step numbers, dates, tags, or short titles to make your timeline more organized and easy to navigate.</li>
<li>Image & Multimedia Support: Enhance your timeline’s engagement using interactive images that visually tell your story.</li>
<li>Story Icon Support: Add a custom icon to each timeline slider step to give visual context, or, by default, you can choose to display a dot.</li>
<li>Fully Responsive: This plugin is fully responsive, ensuring that your events display perfectly on all screen sizes.</li>
</ul>
<h3>Where can you use Timeline Block?</h3>
<ul>
<li>Represent your company’s story.</li>
<li>Showcase tutorial/process steps in timeline format.</li>
<li>Create a program timeline.</li>
<li>Represent history.</li>
<li>Create events/appointments timeline.</li>
<li>Job stories/achievements timeline.</li>
<li>Personal story timeline.</li>
<li>Product roadmap.</li>
</ul>
<h3>Upgrade To Pro:</h3>
<ul>
<li>Horizontal Layout: Timeline Block Pro offers Horizontal Default Design and Horizontal Simple Design layouts.</li>
<li>Multiple Timelines:Easily create and display multiple timelines on one website, categorized by different layouts.</li>
<li>Video, Images & Slider: Seamlessly integrate images, videos (YouTube), and slideshows into your timelines.</li>
<li>Dot, Icon, Image & Text: Customize icons with options including dot, icon, image, and text for personalized timelines.</li>
</ul>
<a href="https://cooltimeline.com/plugin/timeline-block-pro-for-gutenberg/?utm_source=tbg_plugin&utm_medium=readme&utm_campaign=get_pro&utm_content=upgarde_to_pro" rel="nofollow ugc">Get Pro!</a>
<h3>Check Our Other Timeline Plugins</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/cool-timeline-free/?utm_source=tbg_plugin&utm_medium=readme&utm_campaign=demo&utm_content=ctl_free_demo" rel="nofollow ugc">View Demo</a></li>
<li>Timeline Widget For Elementor: Showcase your company history, product roadmap, and personal journey in vertical & horizontal layout directly inside Elementor. <a href="https://cooltimeline.com/demo/elementor-timeline-widget/free/?utm_source=tbg_plugin&utm_medium=readme&utm_campaign=demo&utm_content=twea_free_demo" rel="nofollow ugc">View Demo</a></li>
<li>Timeline Builder: Create a small timeline inside the Gutenberg block editor using a vertical or horizontal timeline. <a href="https://cooltimeline.com/demo/timeline-builder-pro/?utm_source=tbg_plugin&utm_medium=readme&utm_campaign=demo&utm_content=tbp_view_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=tbg_plugin&utm_medium=readme&utm_campaign=demo&utm_content=tmdivi_view_demo" rel="nofollow ugc">View Demo</a></li>
</ul>
Use of 3rd Party Services: This plugin connects to the Cool Plugins feedback server only for optional usage data sharing and voluntary feedback submission (for example, during plugin deactivation). Data is transmitted solely after explicit user consent. No hidden tracking is performed, and no frontend visitor or site user data is collected. For more details, please review our <a href="https://my.coolplugins.net/terms/usage-tracking/" rel="nofollow ugc">Data Usage Policy</a>, <a href="https://my.coolplugins.net/terms/" rel="nofollow ugc">TOS</a>, and <a href="https://my.coolplugins.net/terms/privacy-policy/" rel="nofollow ugc">Privacy Policy</a>.

Timeline Block For Gutenberg

Great to use,looks fantastic and adapts nicely to all screens.

Looks great straight out of the box


The plugin overwrites your content, to try and force you to buy the premium version? No thanks.


whatever.

Showcase your company history, process steps, milestones, and roadmap inside Gutenberg using the powerful Timeline Block

Jubayer Neon Milestones for Elementor vs Timeline Block For Gutenberg