plugin-icon

Greenshift – 動畫與頁面編輯區塊

作者 wpsoul·
為 Gutenberg 提供超過 20 個特殊區塊，用以建置複雜的頁面與動畫，並獲得最高的網站使用體驗核心指標 評分。
animation
full-site-editing
gutenberg blocks
評價
4.8
版本
12.9.6
活躍安裝總數
70K
最近更新：
May 7, 2026
Greenshift – 動畫與頁面編輯區塊

高度最佳化 的網頁製作工具

你想建立高品質的動畫與頁面，卻在受困於熱門頁面編輯器在 Google 測試中表現出的低效能 嗎？Greenshift 將為你解決這個問題。

此外掛 不使用預先定義的樣式、架構、圖示字型與指令碼 程式庫。每個資產都是即時產生，且僅在你使用時才載入。同時，外掛擁有非常獨特的區塊與動畫可能性，能以高端動畫與過渡效果讓訪客感到驚喜。你無須任何程式設計知識即可建立如同獲獎頂尖網站般的樣式。

查看 Greenshift 區塊圖庫

一些專屬優點

✅ 支援全站編輯 (FSE) 的現成區段與版面配置 庫 ✅ 互動圖層：透過觸發程序、條件與動作 為區塊增加互動性 ✅ 動態屬性與動態運動：建立動畫鏈結 並與動態資料連結 ✅ 進階容器、資料列、CSS 網格：控制對齊、間距、位置、彈性位置、支援多達 4 個中斷點 的回應式 設計、Flexbox 與 CSS 網格選項 ✅ 編輯器 中的設計協助程式：直接在編輯器中更改位置、間距、框線 與大小 ✅ 行動裝置智慧捲動與跑馬燈區塊：將一般的資料行 與區塊轉換為行動裝置上的可捲動項目或輪轉 檢視 ✅ 進階輪播與分頁：將任何內容製作為輪轉/輪播/分頁。將一般圖庫 轉換為進階 3D 輪播 ✅ 擴展背景選項（色彩/漸層/影片）以及具備游標暫留 過渡效果的覆疊 ✅ 無須程式庫即可實現 CSS 捲動動畫與游標暫留 過渡效果 ✅ AR/VR 3D 檢視器 區塊與 Spline3D 區塊 ✅ 動態區塊：動畫標題、倒數計時、計數器、影片、分頁、開關切換、內容目錄、進度列 等 ✅ 輕鬆針對不同解析度控制所有選項 ✅ 上層 游標暫留過渡與背景動畫 ✅ 自訂 側邊與下拉式滑動面板、彈出式訊息 產生器 ✅ 本地 字型，符合一般資料保護規定 (GDPR) ✅ Figma 轉換器 ✅ 任何網頁與網站轉 WordPress Greenshift 轉換器 ✅ 動態資料、重複器、Meta 擷取器（可從自訂欄位、使用者 Meta、網站選項、外部消息來源等獲取資料） ✅ 顯示性選項

進階頁面設計與動畫

藉由 Greenshift 的功能，你無須具備程式設計 技能即可直接在核心編輯器 中建立複雜頁面與動畫。你可以像在其他頁面編輯器 中無法做到的那樣，新增間距、定位、CSS 轉換、陰影、框線。使用陰影預設集、游標暫留過渡預設集、覆疊過渡、無限 CSS 動畫、標題效果、自訂動畫、漸層背景、形狀分隔線、上層過渡等等。

欲查看一些獨特選項，請造訪功能頁面。

擴充的回應式 選項

現今行動裝置流量甚至超過了電腦，Greenshift 擁有一切讓你的行動網頁設計更出色的功能。它提供 4 個自訂中斷點、預覽模式，並允許為每個解析度設定不同的值。所有區塊都具備專屬最佳化 的行動裝置版面配置。此外，你也可以將一般的多行 設計切換為行動裝置上的智慧捲動，以產生應用程式風格的設計。

動態載入

我們明白你可能想保留目前的頁面編輯器，但同時也想使用 Greenshift 的某些功能。為此，我們增加了將區塊與頁面轉換為短代碼 的可能性。你可以直接在你的外掛或自訂頁面中使用它們。更進一步，我們還增加了當區塊進入視線範圍、或透過點擊/游標暫留時動態載入區塊的功能。這可以節省大型頁面的效能。

最高的網站使用體驗核心指標 評分

我們相信 Greenshift 是針對網站使用體驗核心指標評分最優化 的外掛。這是因為外掛採用了獨特的條件式資產載入技術。所有區塊都拆分為樣式區塊，僅在你於頁面中使用時才會載入。所有動態程式庫皆不依賴 jQuery。所有樣式均採內嵌 (inline) 方式載入至頁面標頭 區段，以防止累積版面配置位移 (CLS) 以及與快取 外掛的不相容。支援可重複使用區塊、小工具 與範本 環境。

透過 GREENSHIFT 附加元件 邁向更高層次

我們所有的核心功能現在免費，未來也將永遠免費。我們不販售任何進階版本，也不限制功能。同時，根據你的網站類型，你可能會對額外區塊感興趣。請查看完整的附加元件 WordPress 區塊列表。

動畫 (ANIMATION) 附加元件

你可以在核心版本中加入任何自訂動畫，但「動畫」(Animation) 附加元件 會提供更多基於熱門 GSAP 程式庫的選項。包含自訂視差滾動、多種動畫觸發程序（捲動、游標暫留、點擊、交錯、批次）、透過捲動控制插值、捲動時釘選 區塊、在狀態間進行平滑 翻轉、使用智慧 Lottie 載入程式、加入動畫水滴效果、顯現效果、滑動互動、動畫鏈結 與連接、文字與 SVG 動畫、圖片序列與影片載入程式。使用 Rive 區塊加入 Rive 場景，並透過我們的特殊 API 連結動態網站值與 Rive。

查詢 (QUERY) 附加元件

如果你想擴充動態功能，「查詢」(Query) 附加元件 非常實用。它為查詢迴圈 區塊提供許多現成的區塊版面配置，你可以使用特殊的 Meta 擷取 區塊（用以獲取並顯示來自自訂欄位、ACF、ToolSet 或分類法 Meta 的值）、願望清單 區塊、按讚數與熱度計數器來逐一自訂與擴充。可見性區塊可讓你根據不同篩選條件（分類、標籤、分類法、自訂欄位值、使用者角色、目前分類偵測）來顯示或隱藏內容。進階清單編輯器可幫助你建立目錄清單。查詢產生器則允許你為自訂內容類型 (CPT) 迴圈與輪轉 建立任何形式的設計。

SEO 與行銷附加元件

我們在為聯盟行銷、評論與比較網站開發各種工具方面擁有長達 10 年的經驗。透過與頂尖聯盟行銷專業人士及部落客合作，我們打造了一系列高轉換率的特殊區塊，助你在網站上賺取更多利潤。包含連結剖析協助程式、優惠區塊、比較與對照表、清單、評分與評論框、WooCommerce 框。所有區塊都具備專屬的行動裝置版面配置。

WOOCOMMERCE 附加元件

為全站編輯 (FSE) 新增 WooCommerce 區塊。透過「立即購買」按鈕、免運費、售罄計數器、套件組合、組合包、滑動面板、色票、屬性群組、額外的單一商品範本、自訂 分頁、Ajax 搜尋等多項功能來擴展你的商店。

任何網頁轉 WordPress 轉換器

將任何網頁或 HTML 設計轉換為 Greenshift 區塊。需訂閱 AIO 方案。

Figma 轉 WordPress 轉換器

只需點擊一下，即可將任何 Figma 設計轉換為 Greenshift 區塊。開放大眾免費使用。

AI 協助程式

AI 協助程式 is a tool that helps you to build blocks with AI. Use own API keys, no GreenShift subscriptions, no payment to GreenShift required. AI requests are sent directly to the selected third-party AI provider.

= HTML 程式碼 轉 WordPress 區塊轉換器 = HTML 原始碼轉區塊轉換器：貼入任何包含 CSS 與 JS 片段 的 HTML，系統將會將其轉換為動態區塊。

第三方服務

此外掛 在特定情況下會連線至外部第三方服務：

GreenShift 商店

當你啟用 GreenShift 附加元件 的進階版授權 時，外掛 會連線至位於 https://shop.greenshiftwp.com/ 的授權伺服器，以驗證 並啟用你的授權金鑰。此連線會傳送你的授權金鑰與網站網址 以供驗證之用，不會將其他資料 傳送給第三方。此連線僅在啟用授權時建立，若不使用授權則不需要此連線即可使用外掛。

GreenShift Template Library

When you browse or import layouts, templates, categories, or related template assets from the GreenShift library, the plugin connects to https://greenshift.wpsoul.net/ to retrieve the requested template library data. The request may include selected category IDs, tag IDs, page numbers, layout IDs, and download URLs needed to load or import the selected layout. This connection is used only when interacting with the template library or importing a template.

YouTube

When a page uses a YouTube video element or YouTube lightbox/player feature, the plugin may load the YouTube iframe API from https://www.youtube.com/iframe_api to render and control the embedded video player.

Vimeo

When a page uses a Vimeo video element or helper, the plugin may request Vimeo oEmbed data from https://vimeo.com/api/oembed.json for the provided Vimeo video URL so the video can be embedded properly.

Google Maps

When a map block is configured to use Google Maps and a Google Maps API key is provided, the plugin loads Google Maps JavaScript from https://maps.googleapis.com/maps/api/js to display the map. The request includes the configured API key.

OpenAI

When AI Helper features are configured to use OpenAI with your own API key, the plugin sends the prompt and related AI request data directly to OpenAI API endpoints such as https://api.openai.com/v1/responses, https://api.openai.com/v1/images/generations, or https://api.openai.com/v1/images/edits. The request includes your configured OpenAI API key and the content needed for the selected AI action.

Anthropic

When AI Helper features are configured to use Anthropic with your own API key, the plugin sends the prompt and related AI request data directly to Anthropic API endpoints such as https://api.anthropic.com/v1/messages. The request includes your configured Anthropic API key and the content needed for the selected AI action.

Google Gemini API

When AI Helper or image generation features are configured to use Google Gemini with your own API key, the plugin sends the prompt and related AI request data directly to Google Gemini API endpoints such as https://generativelanguage.googleapis.com/. The request includes your configured API key and the content needed for the selected AI action.

Github Repository

https://github.com/wpsoul/greenshift

免費於付費方案
立即開始使用
安裝即視為你同意WordPress.com 使用條款與第三方外掛程式服務條款。
目前已測試版本
WordPress 7.0
此外掛程式已可供下載，並可用於你 系統。
下載