Md Jubayer Hossain

<p><strong>Neon Timeline for Elementor</strong> 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.</p>
<h4>Key Features</h4>
<p><strong>Layout</strong></p>
<ul>
<li><strong>Vertical timeline</strong> — alternating left/right cards with a centred animated rail</li>
<li><strong>Horizontal timeline</strong> — drag-to-scroll card track with above/below alternating support</li>
<li><strong>Per-breakpoint layout switching</strong> — 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>
<p><strong>Design</strong></p>
<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>
<p><strong>Per-item controls</strong></p>
<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>
<p><strong>Style controls (all via Elementor panel)</strong></p>
<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>
<p><strong>Performance & accessibility</strong></p>
<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.

JNext Services PVT. LTD

Vipul Ghori

<h3>HORIZONTAL & VERTICAL TIMELINE, CURVE TIMELINE, HISTORY TIMELINE</h3>
<p>GUTENBERG TIMELINE Block Plugin for Gutenberg allows you to create a beautiful vertical & horizontal “Content-Timeline-Block” and default “Post-Timeline-Block” by Ascending or Descending order based on random, title, date, menu-order of default posts or custom posts With Slider. You can use it to showcase important dates and milestones for your company’s history, and display blogs engagingly and practically.</p>
<h3>CHECK OUR TIMELINE PLUGINS DEMOS</h3>
<ul>
<li>Vertical Content-Timeline-Block <a href="https://www.youtube.com/watch?v=47CH9YAf2WI&t=21s" rel="nofollow ugc">View Demo</a></li>
<li>Horizontal Content-Timeline-Block <a href="https://www.youtube.com/watch?v=maLXORi1OJo" rel="nofollow ugc">View Demo</a></li>
<li>Vertical Post-Timeline-Block <a href="https://www.youtube.com/watch?v=XJMtJ9T7xpA" rel="nofollow ugc">View Demo</a></li>
<li>Horizontal Post-Timeline-Block <a href="https://www.youtube.com/watch?v=WQLP8Gr9Hi0" rel="nofollow ugc">View Demo</a></li>
</ul>
<h3>Features Of GUTENBERG TIMELINE Blocks</h3>
<p>GUTENBERG TIMELINE Block Plugin for Gutenberg allows you to create beautiful vertical & horizontal “Content-Timeline-Block” and “Timeline-Block”.</p>
<p>GUTENBERG TIMELINE Block Plugin for Gutenberg is a Gutenberg add-on with many additional options for Post-Timeline, Page-Timeline and Content-Timeline to provide the vertical & horizontal timeline Layout.</p>
<p>It is a standalone Gutenberg solution to give wow design possibilities for your blog posts, custom posts, pages and content with a clean design and fully responsive layout.</p>
<p>Users can show their stories, events, appointments, concerts, future, and history by using Gutenberg-Timeline Blocks on your website.</p>
<p>Users can easily create a timeline in real-time using Gutenberg blocks and settings.</p>
<p>Users can create a compact timeline, it means a timeline without a lot of space between stories or items.</p>
<p>It’s developer friendly and also you can easily customize timeline stories by using default query.</p>
<p>Users are able to animate blocks by choosing animation type.</p>
<h3>Curve Timeline Block</h3>
<ul>
<li>
<p>Timeline Customization</p>
<ul>
<li>Create center curve timelines.
<ul>
<li>Animation
<ul>
<li>Allow animation to blocks and choose animation according to your preferences.</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li>
<p>Content Customization</p>
<ul>
<li>Add custom images, title, description, and date to each timeline block.</li>
<li>Choose from a range of Font Awesome icons to enhance your stories.</li>
<li>Change Date position before and after title.</li>
</ul>
</li>
<li>
<p>Visual Customization</p>
<ul>
<li>Customize story background color and block connectors.</li>
<li>Select a background color for the icons.</li>
<li>Utilize typography options to personalize title, description, date, and icons.</li>
</ul>
</li>
<li>
<p>Layout and Display Options</p>
<ul>
<li>Enjoy a responsive layout on all devices and screens, including desktop, tablet, and mobile.</li>
</ul>
</li>
</ul>
<h3>Horizontal Timeline Block</h3>
<ul>
<li>
<p>Timeline Customization</p>
<ul>
<li>Create one-sided or both-sided horizontal timelines.</li>
<li>Easily adjust the arrow position based on your preferred layout.</li>
<li>Easily adjust the slider arrow and dots and slider setting according to your layout.</li>
<li>Animation
<ul>
<li>Allow animation to blocks and choose animation according to your preferences.</li>
</ul>
</li>
</ul>
</li>
<li>
<p>Content Management</p>
<ul>
<li>Remove block from the timeline by clicking the close icon.</li>
<li>Choose from a range of Font Awesome icons to enhance your stories.</li>
</ul>
</li>
<li>
<p>Visual Customization</p>
<ul>
<li>Customize story background color and block connectors.</li>
<li>Select a background color for the icons.</li>
<li>Utilize typography options to personalize title, description, date, and icons</li>
</ul>
</li>
<li>
<p>Layout and Display Options</p>
<ul>
<li>Show/hide arrows, dots, and customize their appearance for horizontal layout</li>
<li>Enjoy a responsive layout on all devices and screens, including desktop, tablet, and mobile.</li>
</ul>
</li>
</ul>
<h3>Vertical/Content Timeline Block</h3>
<ul>
<li>
<p>Timeline Customization</p>
<ul>
<li>Easily change the arrow position with different layout options.</li>
<li>Easily change alignment of blocks.</li>
<li>Manage Timeline Items
<ul>
<li>Remove items or stories by clicking on the close icon.</li>
<li>Reorder items or stories with the sorting order icon and drag & drop functionality.</li>
</ul>
</li>
<li>Animation
<ul>
<li>Allow animation to blocks and choose animation according to your preferences.</li>
</ul>
</li>
</ul>
</li>
<li>
<p>Content Customization</p>
<ul>
<li>Add custom images, title, description, and date to each timeline block.</li>
<li>Choose from a range of Font Awesome icons to enhance your stories.</li>
</ul>
</li>
<li>
<p>Visual Customization</p>
<ul>
<li>Customize story background color and block connectors.</li>
<li>Select a background color for the icons.</li>
<li>Utilize typography options to personalize title, description, date, and icons.</li>
</ul>
</li>
<li>
<p>Layout and Display Options</p>
<ul>
<li>Enjoy a responsive layout on all devices and screens, including desktop, tablet, and mobile.</li>
</ul>
</li>
</ul>
<h3>Post Timeline Block</h3>
<ul>
<li>
<p>Timeline Customization</p>
<ul>
<li>Create one-sided or both-sided vertical and horizontal timelines.</li>
<li>Easily adjust the arrow position based on your preferred layout.</li>
<li>Switch between vertical and horizontal orientations seamlessly.</li>
<li>Animation
<ul>
<li>Allow animation to blocks and choose animation according to your preferences.</li>
</ul>
</li>
</ul>
</li>
<li>
<p>Content Management</p>
<ul>
<li>Remove posts from the timeline by clicking the close icon.</li>
<li>Reorder posts by dragging and dropping them using the sorting order icon.</li>
<li>Choose the order of posts by random, title, date, or menu-order.</li>
</ul>
</li>
<li>
<p>Post Display</p>
<ul>
<li>Add a read-more button to provide users with a full post-view option.</li>
<li>Set bottom spacing for title, excerpt, and author details.</li>
</ul>
</li>
<li>
<p>Post Customization</p>
<ul>
<li>Show/hide excerpts, author information, featured images, and read-more buttons.</li>
<li>Customize appearance and layout according to your preferences.</li>
</ul>
</li>
</ul>
<h3>WHERE CAN YOU USE THE GUTENBERG TIMELINE PLUGIN?</h3>
<p>You can show history/future stories, events, appointments, and many other cool things using our JNext Timeline plugin. Here are all areas where you can use this plugin:-</p>
<ul>
<li>Creating a historical timeline to showcase a company’s history.</li>
<li>Presenting tutorial or process steps in a timeline format.</li>
<li>Illustrating a program’s timeline.</li>
<li>Using a timeline as a visually effective way to depict historical events.</li>
<li>Building a timeline to highlight job stories or accomplishments.</li>
<li>Representing a personal story through a timeline.</li>
<li>Detailing work experience through a timeline format.</li>
<li>Providing a step-by-step guide using a timeline.</li>
<li>Creating an events timeline.</li>
<li>Telling a brand’s story through a timeline format.</li>
</ul>
<p>We have tried our best to create an awesome timeline plugin but still, if you face any installation, coding, or design error, you can contact us anytime.</p>


GUTENBERG TIMELINE BLOCK

GUTENBERG TIMELINE is a powerful WordPress plugin that enables you to create visually striking and informative timelines. it's provide Curve Time …

Jubayer Neon Milestones for Elementor vs GUTENBERG TIMELINE BLOCK