Title: TechnologyWisdom Process Flow Timeline for Elementor
Author: Technology Wisdom
Published: <strong>2026 年 9 月 14 日</strong>
Last modified: 2026 年 9 月 14 日

---

搜尋外掛

![](https://ps.w.org/technologywisdom-process-flow-timeline-for-elementor/assets/
banner-772x250.png?rev=3694686)

![](https://ps.w.org/technologywisdom-process-flow-timeline-for-elementor/assets/
icon-256x256.png?rev=3694686)

# TechnologyWisdom Process Flow Timeline for Elementor

 由 [Technology Wisdom](https://profiles.wordpress.org/technologywisdom/) 開發

[下載](https://downloads.wordpress.org/plugin/technologywisdom-process-flow-timeline-for-elementor.1.0.0.zip)

 * [詳細資料](https://tw.wordpress.org/plugins/technologywisdom-process-flow-timeline-for-elementor/#description)
 * [使用者評論](https://tw.wordpress.org/plugins/technologywisdom-process-flow-timeline-for-elementor/#reviews)
 *  [安裝方式](https://tw.wordpress.org/plugins/technologywisdom-process-flow-timeline-for-elementor/#installation)
 * [開發資訊](https://tw.wordpress.org/plugins/technologywisdom-process-flow-timeline-for-elementor/#developers)

 [技術支援](https://wordpress.org/support/plugin/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.

## 螢幕擷圖

[⌊Screenshot 1: Shows the Process Flow Timeline template automatically imported 
and available in the Elementor Template Library after plugin activation.⌉⌊Screenshot
1: Shows the Process Flow Timeline template automatically imported and available
in the Elementor Template Library after plugin activation.⌉[

Screenshot 1: Shows the Process Flow Timeline template automatically imported and
available in the Elementor Template Library after plugin activation.

[⌊Screenshot 2: Shows how to edit the ready-to-use template in Elementor and customize
the process steps, content, colors, and overall layout.⌉⌊Screenshot 2: Shows how
to edit the ready-to-use template in Elementor and customize the process steps, 
content, colors, and overall layout.⌉[

Screenshot 2: Shows how to edit the ready-to-use template in Elementor and customize
the process steps, content, colors, and overall layout.

[⌊Screenshot 3: Provides a step-by-step guide for using the plugin, including template
setup, required CSS classes, and important usage notes.⌉⌊Screenshot 3: Provides 
a step-by-step guide for using the plugin, including template setup, required CSS
classes, and important usage notes.⌉[

Screenshot 3: Provides a step-by-step guide for using the plugin, including template
setup, required CSS classes, and important usage notes.

## 安裝方式

#### Automatic installation

 1. Go to **Plugins  Add New** in your WordPress admin
 2. Search for “TechnologyWisdom Process Flow Timeline for Elementor”
 3. Click **Install Now**, then **Activate**
 4. Confirm Elementor is installed and active

#### After activation

 1. Open **Templates  Saved Templates** (or the Template Library in the Elementor editor)
 2. Find the imported **Process Flow Timeline** template
 3. Insert it into an Elementor page
 4. Edit the steps in Elementor as needed

## 常見問題集

### Does this plugin require Elementor Pro?

No. It is designed to work with Elementor Free.

### Does the plugin track visitors?

No.

### Does it require an external service?

No. All assets are bundled with the plugin and load only on pages that use the timeline.

### Can I customize the timeline?

Yes. Open the template in Elementor and change colors, text, buttons, and other 
styles to match your site. You can also add or remove steps. Keep the timeline and
icon CSS classes so the progress line can find the layout.

### Will activating the plugin again create duplicate templates?

No. The import is idempotent. If the imported template is later deleted, the plugin
can recreate that bundled template once on a later activation.

### Does deactivating or uninstalling the plugin delete my template?

No. The saved Elementor template stays on your site. After you delete the plugin,
the progress line stops working because that feature belongs to the plugin. Your
step layout and text remain so you can keep or edit the template.

## 使用者評論

這個外掛目前沒有任何使用者評論。

## 參與者及開發者

以下人員參與了開源軟體〈TechnologyWisdom Process Flow Timeline for Elementor〉的
開發相關工作。

參與者

 *   [ Technology Wisdom ](https://profiles.wordpress.org/technologywisdom/)

[將〈TechnologyWisdom Process Flow Timeline for Elementor〉外掛本地化為台灣繁體中文版](https://translate.wordpress.org/projects/wp-plugins/technologywisdom-process-flow-timeline-for-elementor)

### 對開發相關資訊感興趣？

任何人均可[瀏覽程式碼](https://plugins.trac.wordpress.org/browser/technologywisdom-process-flow-timeline-for-elementor/)、
查看 [SVN 存放庫](https://plugins.svn.wordpress.org/technologywisdom-process-flow-timeline-for-elementor/)，
或透過 [RSS](https://plugins.trac.wordpress.org/log/technologywisdom-process-flow-timeline-for-elementor/?limit=100&mode=stop_on_copy&format=rss)
訂閱[開發記錄](https://plugins.trac.wordpress.org/log/technologywisdom-process-flow-timeline-for-elementor/)。

## 變更記錄

#### 1.0.0

 * Initial release.

## 中繼資料

 *  版本 **1.0.0**
 *  最後更新 **3 天前**
 *  啟用安裝數 **少於 10 次**
 *  WordPress 版本需求 ** 6.4 或更新版本 **
 *  已測試相容的 WordPress 版本 **7.1**
 *  PHP 版本需求 ** 7.4 或更新版本 **
 *  語言
 * [English (US)](https://wordpress.org/plugins/technologywisdom-process-flow-timeline-for-elementor/)
 * 標籤:
 * [elementor](https://tw.wordpress.org/plugins/tags/elementor/)[scroll animation](https://tw.wordpress.org/plugins/tags/scroll-animation/)
   [timeline](https://tw.wordpress.org/plugins/tags/timeline/)
 *  [進階檢視](https://tw.wordpress.org/plugins/technologywisdom-process-flow-timeline-for-elementor/advanced/)

## 評分

這個項目尚無任何評論記錄。

[撰寫評分](https://wordpress.org/support/plugin/technologywisdom-process-flow-timeline-for-elementor/reviews/#new-post)

[查看全部使用者評論](https://wordpress.org/support/plugin/technologywisdom-process-flow-timeline-for-elementor/reviews/)

## 參與者

 *   [ Technology Wisdom ](https://profiles.wordpress.org/technologywisdom/)

## 技術支援

使用者可在技術支援論壇提出意見反應或使用問題。

 [檢視技術支援論壇](https://wordpress.org/support/plugin/technologywisdom-process-flow-timeline-for-elementor/)