內容目錄
歡迎回到鵠學苑 — WordPress 網頁設計超詳細攻略，Elementor PRO Slider 是使用 Elementor 架站時非常容易使用到的小工具，尤其是在架設企業官網或者活動網頁時，因為 Slider Widget 具有圖片輪播、標題、敘述、按鈕等網頁元素，可以快速為網站設計出大圖輪播的效果。在設計首頁 banner 時使用 Slider Widget 特別有幫助，可以直對剛進入網站的使用者展示網站最近的活動重點、主打商品等，並且利用按鈕功能將使用者引導到我們希望提高曝光率的連結頁面，當然也不只在首頁，也可以利用 Slider 小工具來展示商品、文章等等，用途非常廣泛。
在本篇教學中將說明 Elementor Slider Widget 內容及外觀設定的方式，分享快速架設網站 Banner 的方式，使用 Elementor 還有一個優點，就是不再需要另外購買 Slider 輪播外掛，耗費主機資源拖慢網站速度，Elementor Slider 就能快速解決網頁設計輪播效果的問題！接下來跟著鵠學苑的腳步，讓我們開始學習吧！
Elementor Slider 操作說明
https://docs.elementor.com/article/93-slides
Elementor PRO 外掛購買
https://elementor.com/pricing/
(注意事項：Elementor PRO 外掛購買與安裝 – 進入到上方提供的連結，選擇適合自己的方案後使用信用卡購買。特別提醒，鵠學苑本身也是透過購買才能使用此外掛，因此沒有提供任何免費版或試用版，同時我們也不會因為你的購買收到任何佣金或分潤，也不保證安裝此外掛與你的網站不會發生任何問題，在安裝前建議要先確認外掛與 WordPress 版本，才能將風險降到最低。)
Elementor 官方說明影片：
Slider 圖片輪播內容設定說明
第一步：安裝 Elementor PRO 外掛並啟用後，使用 Elementor 編輯器開啟時在小工具列中會多出專業版，如果網站啟用語言為繁體中文，可以在工具列中找到幻燈片的小區塊，直接拖拉放到畫面中。
第二步：在內容設定中首先要決定的是幻燈片輪播的數量，可以在單一幻燈片欄位右側選擇複製或刪除，下方高度部分是影響整體 Slider 在畫面中的高度。
第三步：點開單一幻燈片可以選擇背景要以純色或圖片顯示，一般來說，選擇背景圖片時尺寸通常都會選擇覆蓋，讓圖片能確實填滿 Slider 區域。
第四步：如果在上一步驟設定時有開啟 動態縮放效果，在展示幻燈片時就會有放大縮小的特效，讓 Slider 更引人注意，另外要注意的是如果要在 Slider 上套用背景覆蓋的效果，就不能開啟動態縮放，兩者只能取其一。
第五步：下圖是背景覆蓋的效果，通常用於讓文字、描述、按鈕能更加顯眼，避免背景圖片與文字顏色的衝突，在設定顏色時要注意透明度的高低，也就是顏色設定選項中右邊的拖拉條。
第六步：在單一幻燈片中切換到內容，這個位置就是輸入標題、描述、按鈕文字及連結的位置，可以使用 HTML 標籤來自定樣式。
第七步：最後是樣式，這裡設定的是當前幻燈片的外觀，如果所有幻燈片都要套用統一樣式，這個部分可以跳過不需設定，只需要在第二小捷中對 Slider 整體樣式做統一設定就可以了。
第八步：如果要讓每一張幻燈片都具有不同的文字顏色，可以如下圖所標示的位置做設定。
第九步：在拖拉條選項中是決定導航圖示如何顯示，包含切換幻燈片要顯示箭頭或者分頁標點。
第十步：拖拉條選項中也可以設定幻燈片播放速度，這裡要注意的是時間的單位是”毫秒”，下圖中設定 5000 的意思就是每 5 秒切換一次幻燈片。
Slider 外觀樣式變更方式
第一步：如果要設定 Slider 統一樣式，可以在小工具頁籤中切換到樣式選單，下圖中標示的內容寬度是指包含標題、描述、按鈕的容器寬度，就響應式設計概念而言，設定為 100% 在大多數主流的螢幕畫面都可以正常顯示內容。另外水平、垂直位置等是設定所有內容元素對齊的方式。
第二步：標題、描述中都是設定字體、大小、行高、粗體等，在此就不贅述。在按鈕的部分不需要寫入 CSS ，可以使用 Elementor 預設的按鈕尺寸來決定顯示樣式就好。
第三步：導航列中就是設定箭頭與標點分頁的顏色、位置、大小等，如果寬度設定為滿版，箭頭位置就只能設定裡面。
結語：
Elementor PRO Slider 可以快速的建立大圖輪播效果，並且能減少主機負擔、避免卡頓的狀態發生，但相對的可以呈現的樣式與效果就一定比不上專業的 Slider 外掛，如果説追求的是比較豐富的動畫與特效，那麼 Elementor Slider 就不會是首選了。
今天的教學到這裡告一段落了，不要忘記在右側訂閱鵠學苑電子報，確保收到最新 WordPress 教學文章，如果有網頁設計相關需求，或者想了解最新網站知識，也可以到 鵠崙設計 做線上免費諮詢喔！我們下次的教學見～
Elementor 相關教學文章：
網站架設知識推薦閱讀：
新冠肺炎大流行 – 企業線上數位轉型網站架設重點與優勢分析
AMP Stories 介紹 – 你一定要了解的 Google 行動網站技術
Google 優先索引行動版內容 將於一年內對所有網站實施
