影片教學
影片
在這篇 網頁設計 教學中，我們將帶你一步步學會如何在首頁的輪播（Slideshow）中新增「按鈕連結」。
舊版輪播多使用整張圖片作為超連結，但使用者往往不容易發現。
而透過明顯的按鈕設計，不僅能提升點擊率，也讓導覽體驗更加清晰。
本教學適用於 SP Page Builder 編輯環境，
內容包含按鈕文字、連結、樣式與動畫效果設定，
適合初學者快速上手。
一. 為什麼網頁輪播大圖要加按鈕？
舊版的 Slideshow 是「整張圖片」當作連結，但這會有一個缺點：
使用者不知道圖片可以點。
因此我們改用「清楚的按鈕」來引導使用者，例如「了解更多」、「主日直播」等，這樣點擊率會更高、使用者體驗更好。
二. 網頁設計 編輯器 操作步驟教學
-
進入網站後台
-
點選「網頁編輯」，進入 SP Page Builder 的頁面編輯介面。
-
點選「前端編輯」，畫面會切到前台可以即時編輯的模式。
-
找到「Slideshow 元件」並點選它，就會看到一排工具列。
三. 編輯 Slideshow 的單張圖片
以第三張為例，我們點選它，可以看到以下設定區塊：
1. 圖片上傳區：
-
可以更換這張幻燈片的背景圖片。
2. Slider Content 區塊（下方）：
這邊可以設定 按鈕的內容與樣式，重點如下：
| 項目 | 說明 |
|---|---|
| Label | 按鈕上的文字，例如「了解更多」、「主日直播」 |
| URL / Menu Item | 點了按鈕後要前往的網址， 可以填網址，或是從網站的選單中選擇 |
| Icon | 按鈕文字旁邊的小圖示，像是 ➔ 箭頭 |
| 文字顏色 | 正常狀態與滑鼠移過時的文字顏色 |
| 背景顏色 | 正常狀態與滑鼠移過時的背景顏色，可以選「實色」或「漸層」 |
| 邊框與圓角 | 可設定邊框顏色與圓角大小 |
| 陰影 | 文字與按鈕是否要有陰影效果 |
| Padding | 按鈕內部的間距，維持預設即可 |
| 動畫效果 | 按鈕出現的方式，例如放大、滑入等，可自由選擇 |
| 動畫方向與時間 | 控制動畫從哪邊來、花多少時間完成 |
四. 如何快速新增一張新的 Slide？
-
在 Slideshow 裡按下 「複製」（Copy）按鈕，會產生一張一模一樣的 Slide。
-
修改標題與圖片，例如改成「主日直播」。
-
按鈕的部分已經複製過來了，只需要：
-
改按鈕的名稱（Label）
-
改連結的網址或選單目標
-
-
最後按「Apply」套用 → 然後在右上按「Save」儲存。
五. 網頁不同的樣式與排版
如果你希望 Slideshow 整體的樣式有變化：
-
點選首頁進入編輯
-
點選右側的「Page Layout」，這裡可以選擇整頁版型。
-
若只要換 Slideshow 的樣式，可以點選「Library」→ 選擇其他樣板。
六. 網頁設計 編輯 提醒
-
Slideshow 的按鈕設計是為了讓訊息更清楚，提升互動。
-
若你想要「新的按鈕樣式」或「更客製化的動畫」，也可以跟我們討論。
-
每一張圖片都可以設定不同的按鈕與連結，請自由發揮。
網頁設計 問與答：
網站建置 報價相關 https://des13.com/faq/quote.html
網站建置 技術相關 https://des13.com/faq/webtech.html
購物網站 網路開店 https://des13.com/faq/e-commerce.html
B2B形象官網建置 https://des13.com/faq/b2b.html
網站升級維護 https://des13.com/faq/upgrade.html
推薦閱讀：全後台模組化形象官網
簡易電子書下載：一頁式網頁設計電子書
如果您喜歡我們的文章，歡迎分享！也歡迎查看我們的其他文章。如果有任何疑問也歡迎加line和我們聯絡
全後台模組化形象官網，符合各式商業模式與需求，請參考：https://des13.com/service/rwd.html
Written by Ring
作者：益盛科技 專案經理
通過Google Ads-Measurement Assessment
15年 網站專案管理及人員管理實務經驗。
具網站美編企劃繪製能力
具多媒體網頁設計與 RWD設計之實務經驗
