[WordPress] 外掛分享： TechnologyWisdom Process Flow Timeline for Elementor

外掛標籤

開發者團隊

原文外掛簡介

TW Process Flow Timeline for Elementor adds a lightweight process timeline to Elementor. After activation it imports a ready-to-use template into the Elementor Template Library. You insert that template, keep the hook classes, and the plugin draws a vertical progress line as visitors scroll.
This is a genuinely free plugin. The template, the progress line, and the editor workflow are all included. There is no paid upgrade, no tracking, and no external service.
Why this plugin?
Elementor makes the process steps easy to design. The missing piece is a progress line that stays aligned with the real icons as the layout changes. Hard-coded pixel offsets break as soon as you add a step or change padding.
This plugin measures the first and last process icons and draws the line between them. A gray track fills with black up to the middle of the viewport as visitors scroll.
Features
Elementor template

A bundled Flexbox Container template imported into Templates → Saved Templates
Demo process steps you can edit, duplicate, or remove in the Elementor editor
No HTML, CSS, or JavaScript widgets required inside the template

Scroll progress line

Gray track (#d9d9d9) with a black fill
5px centered line
Line runs from the center of the first icon to the center of the last icon

Performance & privacy

Vanilla JavaScript, no jQuery, no extra libraries
CSS and JS load only on pages that contain the timeline
No analytics, no telemetry, no remote requests

Security, Privacy & Accessibility

CSS and JavaScript ship uncompressed so reviewers can inspect them
The plugin does not collect, store, or transmit personal data
Uninstalling the plugin stops the progress line. The Elementor template stays in your library so your layout is not deleted
The progress line is marked aria-hidden so screen readers skip the decorative track

Requirements
This plugin requires the free Elementor plugin, version 3.16 or later. Elementor Pro is not required.
The bundled template uses Elementor Flexbox Containers. If Containers are disabled on an older site, enable them in Elementor → Settings → Features.
Source
JavaScript and CSS ship uncompressed and human-readable in assets/js and assets/css. There is no build step.
Usage
Keep these CSS classes if you customize the layout:

tw-pftfe-timeline on the timeline container
tw-pftfe-icon on each step icon widget

The plugin injects the decorative line and loads its assets automatically.
You can change the look in the Elementor editor: card colors, text, buttons, and any other styling. You can also rewrite the wording and add or remove steps. The progress line follows the first and last icons automatically. It stays behind the icons and does not block clicks.
The plugin does not insert the template into existing pages automatically.