Slider Revolution 教學：製作 WordPress 網站動畫 (不用程式碼)

最後更新時間：2025-12-22，由 Dean 更新

當你在瀏覽網站時，是不是會被那種「圖片會動、有進場動畫、還有互動按鈕」的首頁吸引住？其實在 WordPress 網站上，只要安裝 Slider Revolution 動畫外掛就能輕鬆做到。

我會在這篇文章介紹 Slider Revolution 怎麼安裝啟用，並實際透過「匯入模板、替換模板、嵌入頁面、加入連結」等四個步驟，幫你製作出一個互動式的頁面。同時，介紹 30 款好用的擴充工具。

Slider Revolution 是什麼？優缺點+方案比較

Slider Revolution 是一款免寫程式也能做出互動效果和動態頁面的 WordPress 外掛。

如果你想讓首頁圖片滑動不只是「輪播」，而是帶有進場動畫、互動、背景動態特效，那這款外掛非常適合你。

它具備視覺化的「時間軸」編輯，支援進場、離場、滑鼠互動、滾動控制動畫，還可搭配高階轉場與 3D 效果，幾乎可媲美專業動畫平台。

以下是幾個應用上的例子：

區塊類型	常見的動畫功能
首頁大圖	進場動畫 + 高階轉場 + 滑鼠互動
品牌介紹	滾動觸發 + 進場動畫 + 圖像淡入 + 互動幻燈片
精選作品集圖庫	幻燈片圖片 + 用時間軸做出時間差
行銷活動	進場動畫 + 倒數計時 + 特效轉場

Slider Revolution 優點

• 模板豐富：官方提供超過 250+ 設計好的動畫模板，容易套用，並可商用。
• 可客製程度高：每個圖層都能設定進場、停留、離場等動畫，還能自訂動畫時間、方向、延遲與特效等，方便將模板改得更符合需求。
• 互動設計：提供滑鼠觸碰特效、頁面切換過場、滾動控制顯示與隱藏 … 等，能做出互動式的網站頁面，而不只是幻燈片。
• 支援響應版設計：提供不同裝置的斷點調整，並可為手機版單獨調整動畫排版與尺寸，且新版會自動優化手機版的動畫結構，並確保效果流暢、不跑版。
• 與主流編輯器相容性高：不管是用 Elementor、Divi、Bricks、還是區塊編輯器，都能透過短代碼或內建模組輕鬆嵌入頁面。
• 效能控制：內建延遲載入功能，以及快取管理，且新版引擎也針對結構做了優化，有助提升頁面效能。不過實務上仍建議搭配快取、圖片壓縮等外掛。
• 無條件退款：提供單站年訂閱方案，首次購買的 14 天內可退款，同時也有 3 個網站、5 個網站和無限授權、一次買斷等方案，官網還可用台幣計費。

Slider Revolution 缺點

• 學習曲線略高：客製化程度高，因此需要一些時間學習該如何調控出更好、更符合需求的效果。
• 編輯介面不直覺：功能集中在右側區域 + 下方時間軸，會讓沒剪輯經驗的人感到陌生。
• 介面未中文化：介面沒有提供繁體中文，對台灣用戶來說較不方便。
• 需自行下載：這款外掛無法透過 WordPress 後台安裝，必須在購買後下載，自行到官網後台複製金鑰，再到 WordPress 後台認證，才能匯入模板和使用附加動畫功能。
• 資源不足：相較頁面編輯器外掛，這類動畫外掛在中文圈的討論度較低，相應的教學資源也少，現存的教學資源都是使用舊版本，只能以官方教學為主。

Slider Revolution 有哪些方案？適合我用嗎？

Slider Revolution 的方案依照「使用網站數量」來區分，主要分為年訂閱與一次買斷兩種：

以下方案價格皆為官網公開資料，可能會有匯率上的波動：

網站數	年訂閱 (台幣 / 年)	買斷方案 (台幣)	適合需求
1站點	$1,048	$2,545	只經營一個網站，但想做有動畫的首頁
3站點	$2,665	$6,797	有 2~3 個網站，或自由接案的個人設計師
5站點	$4,162	$10,929	經營多個品牌網站的企業或小型設計團隊
10~100 站點	$7,156~59,854	$20,510~159,681	設計公司，接案量多、網站數量龐大

無論選年費還是買斷，功能都是相同的，包含所有模板、Add-Ons (外掛)、高階動畫與內建圖庫，只差在客服支援。

如果你還在觀望，可以先購買最便宜的年訂閱試試看；等確定會長期使用，買終身版會比較划算，大約 3 年就回本。

Slider Revolution 購買、安裝與啟用

第一步：購買外掛

step 1

我們進入 Slider Revolution 官網，點「Get started」開始購買。

step 2

這頁是選擇購買方案，依照自己的需求選擇就好：

1. 可切換「訂閱」或「一次買斷」，如果打算長期使用，買斷比較划算。
2. 不管選哪一種付款方式，差別主要在於授權的網站數量，功能本身是一樣的。

step 3

接下來會請你填寫 Email (當作你的帳號)，填完後按「繼續」。

(系統在填付款資料時會自動切換成繁體中文)

接著輸入信用卡資料，完成後點「立即訂閱」，就會正式扣款購買。

step 4

會跳出登入畫面，這時先不要直接登入，而是打開一個新分頁，到你的信箱收信。

在信箱中找一封主旨是「Slider Revolution Account Login Details」的信件，點開後點裡面的「Log in」連結，就可以設定密碼囉。

step 5

設好密碼後，會跳出 3 個簡單的問卷問題，照實際狀況填就好。填好後，都按 Next 繼續。

最後一頁勾選訂閱官方的電子報，再點「Done」，就完成註冊流程了。

接下來，就可以開始安裝和啟用 Slider Revolution 囉！

第二步：安裝並啟用

step 1

完成購買流程後，畫面會跳到這頁：

1. 點右上角的 Download，下載 Slider Revolution 的壓縮檔 (副檔名是 .zip)。
2. 往下滑，在「Your Licenses」找到授權碼，點右邊的「複製圖示」，先把密鑰複製起來，等等會用到。

step 2

接著，打開你自己網站的 WordPress 後台：

1. 左邊選單點「外掛 > 安裝外掛」。
2. 畫面上方點「上傳外掛」。
3. 選擇剛剛下載的 zip 壓縮檔，點「立即安裝」。
4. 等畫面顯示「成功上傳」，再點「啟用外掛」就完成了。

step 3

外掛啟用後，畫面會跳成深色，接下來先註冊你的授權碼：

1. 上面選單點「Activation」，跳到授權畫面。
2. 找到「Enter License Key」那一格，點一下貼上剛剛複製的密鑰。
3. 點「Register this License Key」。
4. 等上面顯示變成綠色「Registered」，就代表成功授權了。

step 4

最後一小步，回到官方網站後台確認串接：

1. 點一下右欄裡的「更新」圖示。
2. 等警告圖示變成打勾的綠色圖示，表示網站串接好了，可以切回網站後台開始使用啦！

Slider Revolution 教學：5 分鐘做出互動式首頁

安裝完成後，接下來我會用一組「室內設計」的作品圖片做為範例，快速套用一組幻燈片模組，做出包含圖片滑動、頁面嵌入和按鈕連結的互動式首頁大圖，讓作品集看起來更吸睛。

第一步：匯入模板

step 1

先來匯入一個模板模組，這樣可以省下不少設計時間：

1. 到 Slider Revolution 的管理介面上方，點「Module」。
2. 再點下面的「New Module from Templates」，開始匯入現成模板。

這時候會跳出一個包含教學影片、資源介紹的視窗，按右上角的「X」關掉 。

step 2

接著，會看到很多模板可以選。

我打算做一個室內設計師的個人網站，所以挑了一個適合放作品集的來用：

1. 點一下想用的模板。
2. 再點「+」，右邊會跳出詳細資訊，要特別注意的是 “Create Blank Page”，如果開啟它，會幫你自動建立一個空白的新頁面，並把這個幻燈片模組直接加進去。建議開啟，編輯比較方便。
3. 都確認的話，點「Install Template」就會下載這個模板。

step 3

下載完成後，就會看到模板出現在管理介面上，點一下，再點筆的圖示，就會正式進入編輯畫面了。

補充說明：Slider Revolution 一共有 9 種模板類別，總數超過 200 個。建議可以先到官方模板庫逛逛，或參考不同的網頁設計範例，設計起來會更有效率。

第二步：替換模板內容

step 1

進入編輯介面後，先快速看一下整個編輯畫面的結構：

1. 功能列：這裡有所有操作選單，像是切換幻燈片、設定圖層動畫、整體樣式等等
2. 時間軸：每個圖層的動畫出場順序、時間長度都在這裡調整，概念有點像影片剪輯。
3. 工具列：像是儲存、預覽、切換裝置大小 (桌機、平板、手機) 等都在這裡。
4. 編輯預覽區：就是你實際拖拉圖片、編輯文字的地方，任何內容都要先點一下才能編輯。

等等編輯時，記得檢查所有幻燈片：

1. 上方點開「Slider」。
2. 看看這個模組有幾張幻燈片 (這個範例有三張)，記得等等每一張都要進去改。

step 2

接下來先把三張幻燈片的圖片都換成自己的，但需要一張一張手動改。

按下列步驟改單張圖片：

1. 點一下圖片。
2. 找到「Background > BG Image」，點「Media」就可以上傳自己要用的圖片。
3. 完成後，點左上「Silders」把其他幻燈片也一起改掉。

step 3

再來是改掉三張幻燈片上的文字，也是點開一個個文字框手動改：

1. 點一下文字元件，右邊會跳出文字設定。
2. 在「Text/Button Layer Content」下方的文字框中編輯。
3. 改完這張，點左上「Silders」把其他幻燈片也一起改掉。

step 4

由於我想把這個模組嵌入已經設計好的頁面，所以先把這組幻燈片的尺寸設定好，避免之後跑版：

1. 點右上角的齒輪圖示。
2. 進入「Module General Options > Layout」。
3. 在「Sizing」選擇 Auto，比較適合內嵌在一般頁面裡。

都設好後，記得點右下角的「儲存」，再點「預覽」看看效果。

進到預覽畫面後，也可以順便檢查一下平板和手機版的顯示：

1. 點上方裝置切換按鈕，看看不同畫面顯示是否正常。
2. 確認沒問題後，右上角「X」關掉視窗即可。

這個模板也很適合用在餐飲或民宿等服務的網站上，展示好吃的餐點或看起來很舒適的居住空間。

第三步：嵌入網站頁面

模組編輯完成後，接下來就是到 WordPress 編輯器，把模組嵌進你的網站頁面。

step 1

在 Slider Revolution 的介面左上角點一下 Back，回到網站後台，進入要加這組幻燈片模組的頁面：

1. 進入 WordPress 預設的區塊編輯器後，在左上角點「+」展開區塊功能列。
2. 點一下你想插入模組的位置。
3. 左側工具列往下滑，找到「Slider Revolution」的圖示並點一下。
4. 插入模組後，點「Select Module」。

這時會跳出一個模組清單，選到你剛剛做好的那組模組，在上面點「+」，就會成功插入囉！

step 2

最後，我們來用 Slider Revolution 內建的壓縮功能，幫整組動畫做個「輕量化」，加快載入速度。

先點開編輯器右側功能列的「Optimize File Sizes」。

1. 等視窗跳出，就可以看到有些圖片同時有白點和灰點 (有時會有好幾個灰點)：
   • 點一下灰點，圖片就會壓縮至比較小的狀態 (都點在綠線上，才不會壓縮得太小)。
   • 建議有出現灰點的圖片都點灰點壓縮。
2. 最後點 Save Changes，就完成了。

補充一下，如果你點不開這個壓縮功能，有可能是主機沒開啟 GZIP 壓縮功能。

你可以用這個 線上測試工具 (gzip-test) 查查看你的網站有沒有啟用 GZIP，有的話會出現「Enable」；如果沒啟用，就要問一下主機平台的客服能不能啟用。

第四步：單一幻燈片連到相關頁面

這一步要來設定「點幻燈片上的元件，跳轉到對應的介紹頁」，適合用來做作品集或商品介紹。

我們會用到 Slider Revolution 的「滑鼠動作 (Actions)」功能，讓某個圖片或文字變成可點的連結。

開始前，記得先準備好至少一個作品介紹頁，這樣等等才能設定連結目標。

step 1

開啟滑鼠動作的設定視窗：

1. 點一下幻燈片上的某個文字框，叫出功能列。
2. 點上方功能列裡的「Actions」按鈕。

step 2

設定跳轉動作的細節：

1. 下方點「Add Action to ‘xxx’」 (xxx 是你剛選的元件名稱)。
2. 新增動畫之後，上面會出現一條紅色的設定列。
3. 點一下那條紅色列，右側會跳出詳細設定，填法如下：
   • Interaction：選 Click (點擊)。
   • Action Type：選 Simple Link (單純超連結)。
   • Link URL：輸入要連去的頁面網址，例如 https://你的網域/作品1。
   • Protocol：選 https://。
   • Target：選 New Window，點了會開新分頁，比較方便回來看其他作品。

step 3

然後，設定背景圖片的滑鼠動作，因為讓整張圖片也能點擊跳轉，會比較直覺：

1. 點一下幻燈片裡要設的圖片元件。
2. 右側出現圖片設定後，一樣點「Actions」。
3. 照上一步一樣的流程設定就好。

全部設好之後，別忘了右下角點一下「Save」儲存，再按「Preview」預覽一下跳轉有沒有正常。

確認 OK 的話，就可以依序建立其他作品的介紹頁，讓每張幻燈片都能連到對應的內容囉！

補充步驟：幻燈片加入按鈕，進行行動呼籲

這一步驟不是必要的喔，適用時機是：當你希望在幻燈片放上按鈕，引導讀者前往其他頁面 (像表單預約頁面等)。

我自己的做法是：複製第一張幻燈片，再加一句文案和一顆按鈕，這樣很快就能設好。

step 1

先新增一張幻燈片來放按鈕：

1. 在左上工具列點開「Slides」選單。
2. 滑到第一張幻燈片，點複製圖示，就會新增一個一模一樣的幻燈片。

step 2

讓這張新幻燈片整體暗一點，讓上面的按鈕看起來更清楚：

1. 到下方時間軸，點「Slide BG Animation」旁的圖片圖示，就會選到最上層的圖層。
2. 上方工具列點開「Add Layer」選單。
3. 點「Shape」加入一個色塊。

接著設定這個色塊：

• 右側功能列會自動跳到「Size & Pos」，點開「Size Position」並選「Cover」，色塊就會自動覆蓋整個畫面。
• 預設是黑色半透明，如果想換顏色或透明度，可以到「Style」自行調整。

step 3

現在幫按鈕上面加一句文案：

1. 點上方工具列「Add Layer > Text > Quick Style Headline」加入標題文字。
2. 右側功能列跳出預設的字體選單時，先按右上角「X」關掉，上方切換到「Style > Font & Icon」，設定成繁中字體，再依照需求調整顏色、字重、行高等樣式。

文字加入後，來調整一下位置：

1. 點「Size & Pos > Position & Size」區塊，將「Align」設為「左右＋上下置中」。
2. 切到「Content」修改內容，像是「讓你感受家的溫暖」、「立刻擁有一個舒適的家」這類能引導行動的文案。

step 4

這一步加上按鈕，讓讀者可以點擊跳轉：

1. 上方工具列「Add Layer > Button」。
2. 右側會跳出按鈕樣式選單，選一個你喜歡的。

step 5

插入按鈕後，修改按鈕上的文字：

1. 功能列點「Content」。
2. 到下方文字框改字，例如：改成「馬上預約免費諮詢」(後面的程式碼是 icon，按上面的 icon 鈕可修改)。

step 6

接著，調整按鈕外觀：

1. 點 Style 功能。
2. 參考步驟 2-3，到「Fonts & Icons」設定字型與文字樣式。
3. 繼續往下，在「Background」改按鈕色，視網站風格調整。

step 7

把位置調整一下：

1. 點「Size & Pos」。
2. 在下方的「Position & Size > Align」把左右改成置中。
3. 如果按鈕蓋到標題文字，可調整 Y 軸數值，讓它往下移一點 (避免用滑鼠移動，會不小心點到其他元件)。

step 8

最後，需要讓按鈕有連結：

1. 在右側點「Actions」，打開設定視窗。
2. 點「Add Action to ‘Button-xx’」，在這個按鈕元件上新增一個滑鼠動作。
3. 點一下新增的紅色列。
4. 設定你要嵌入的連結。
5. 全部設好後，點右下角「Save」儲存。

到這邊就全部完成了！可以看看以下成品。

補充：如果你在前一個步驟已經把這個模組嵌入首頁，就不用重複嵌一次，這張加了按鈕的新幻燈片就會自動出現在輪播中。接下來，還可以把這個模組嵌到別的頁面去喔。

Slider Revolution 有哪些好用的擴充功能？

Slider Revolution 除了內建動畫控制與模板系統，還提供 30+ 款官方擴充功能，例如：粒子背景、滾動播放、Lottie 動畫、切片視差等，都能一鍵啟用、直接使用。

類別	Add-On 名稱 (可自行搜尋)	可做的效果或用途
動畫強化類	Particles、Distortion、Slicey、ShapeBurst、Fluid Dynamics、The Cluster、Exploding Layers、Advanced Transitions、Holiday Snow、Polyfold Scroll Effect、whiteboard	粒子特效、扭曲背景、切片視差、爆炸碎片動畫、進階轉場效果、繪製、摺疊效果
互動類	Mousetrap、Scroll Video、 Paintbrush	滑鼠拖曳互動、滾動控制影片、滑鼠塗抹顯示圖片
數據視覺化類	Charts、Typewriter、Reveal	圖表動畫、打字機文字、遮罩揭示特效
內容特效類	Lottie、Duotone、Before & After、panorama、Filmstrip	插入 Lottie 動畫、雙色風格、前後拖曳比較圖、360 度全景特效
網站整合類	404、Maintenance、Post Featured Slider、Social Sharing、Login Page、WordPress Gallery、Adjacent Post、Related Post、Reload、Domain Switch	自訂 404 頁、登入頁、維護頁、WP 登入頁、社群分享功能、重新載入、相關文章、精選文章輪播、轉址、WordPress 圖庫
其他功能類	Weather、Backup、Domain Switch、Reload	天氣、模組備份、網址切換、設定幾秒後自動跳頁或重整

Slider Revolution 和其他動畫外掛比較

比較項目	Slider Revolution	Smart Slider 3	LayerSlider	MetaSlider	Motion.page
核心特色	進階動畫 + 3D、視差、時間軸	拖拉設計 + 響應式 + 圖層動畫	進階動畫 + 視差 + 彈出視窗	主題式模板 + 簡單輪播	GSAP 動畫編輯器，純自訂
易用度	中	高	中	高	中
模板數量	250+	免費 10+ 付費 120+	120+	免費 20+ 付費 4	自訂動畫
相容性	高	高	中高	高	中高
價格 (USD)	NT$1,054 一年 NT$2,559 買斷	$49 買斷	$28 一年 $69 買斷	$39.5 一年	$69 (5站點)
適用對象	設計師、開發者、行銷人員	新手、快速建站用戶	設計師、行銷人員	初學者、部落客	動態設計師、開發者

Slider Revolution 其他相關問題