Elementor PRO 教學 (二) – Slider 圖片輪播小工具 介紹與操作

Elementor PRO Slider 小工具教學:

1. Slider 圖片輪播內容設定說明

2. Slider 外觀樣式變更方式

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 外掛特色介紹:https://elementor.com/features/

(注意事項:Elementor PRO 外掛購買與安裝 – 進入到上方提供的連結,選擇適合自己的方案後使用信用卡購買。特別提醒,鵠學苑本身也是透過購買才能使用此外掛,因此沒有提供任何免費版或試用版,同時我們也不會因為你的購買收到任何佣金或分潤,也不保證安裝此外掛與你的網站不會發生任何問題,在安裝前建議要先確認外掛與 WordPress 版本,才能將風險降到最低。)

Elementor 官方說明影片:

 

• Slider 圖片輪播內容設定說明

第一步:安裝 Elementor PRO 外掛並啟用後,使用 Elementor 編輯器開啟時在小工具列中會多出專業版,如果網站啟用語言為繁體中文,可以在工具列中找到幻燈片的小區塊,直接拖拉放到畫面中。

Elementor PRO Slider

第二步:在內容設定中首先要決定的是幻燈片輪播的數量,可以在單一幻燈片欄位右側選擇複製或刪除,下方高度部分是影響整體 Slider 在畫面中的高度。

Elementor PRO Slider

第三步:點開單一幻燈片可以選擇背景要以純色或圖片顯示,一般來說,選擇背景圖片時尺寸通常都會選擇覆蓋,讓圖片能確實填滿 Slider 區域。

Elementor PRO Slider

第四步:如果在上一步驟設定時有開啟 動態縮放效果,在展示幻燈片時就會有放大縮小的特效,讓 Slider 更引人注意,另外要注意的是如果要在 Slider 上套用背景覆蓋的效果,就不能開啟動態縮放,兩者只能取其一。

Elementor PRO Slider

第五步:下圖是背景覆蓋的效果,通常用於讓文字、描述、按鈕能更加顯眼,避免背景圖片與文字顏色的衝突,在設定顏色時要注意透明度的高低,也就是顏色設定選項中右邊的拖拉條。

Elementor PRO Slider

第六步:在單一幻燈片中切換到內容,這個位置就是輸入標題、描述、按鈕文字及連結的位置,可以使用 HTML 標籤來自定樣式。

Elementor PRO Slider

第七步:最後是樣式,這裡設定的是當前幻燈片的外觀,如果所有幻燈片都要套用統一樣式,這個部分可以跳過不需設定,只需要在第二小捷中對 Slider 整體樣式做統一設定就可以了。

Elementor PRO Slider

第八步:如果要讓每一張幻燈片都具有不同的文字顏色,可以如下圖所標示的位置做設定。

Elementor PRO Slider

第九步:在拖拉條選項中是決定導航圖示如何顯示,包含切換幻燈片要顯示箭頭或者分頁標點。

Elementor PRO Slider

第十步:拖拉條選項中也可以設定幻燈片播放速度,這裡要注意的是時間的單位是”毫秒”,下圖中設定 5000 的意思就是每 5 秒切換一次幻燈片。

Elementor PRO Slider

• Slider 外觀樣式變更方式

第一步:如果要設定 Slider 統一樣式,可以在小工具頁籤中切換到樣式選單,下圖中標示的內容寬度是指包含標題、描述、按鈕的容器寬度,就響應式設計概念而言,設定為 100% 在大多數主流的螢幕畫面都可以正常顯示內容。另外水平、垂直位置等是設定所有內容元素對齊的方式。

Elementor PRO Slider

第二步:標題、描述中都是設定字體、大小、行高、粗體等,在此就不贅述。在按鈕的部分不需要寫入 CSS ,可以使用 Elementor 預設的按鈕尺寸來決定顯示樣式就好。

Elementor PRO Slider

第三步:導航列中就是設定箭頭與標點分頁的顏色、位置、大小等,如果寬度設定為滿版,箭頭位置就只能設定裡面。

Elementor PRO Slider

 

 

 

結語:

Elementor PRO Slider 可以快速的建立大圖輪播效果,並且能減少主機負擔、避免卡頓的狀態發生,但相對的可以呈現的樣式與效果就一定比不上專業的 Slider 外掛,如果説追求的是比較豐富的動畫與特效,那麼 Elementor  Slider 就不會是首選了。

今天的教學到這裡告一段落了,不要忘記在右側訂閱鵠學苑電子報,確保收到最新 WordPress 教學文章,如果有網頁設計相關需求,或者想了解最新網站知識,也可以到 鵠崙設計 做線上免費諮詢喔!我們下次的教學見~

Elementor 相關教學文章:

網站架設知識推薦閱讀:

Site Kit for WordPress – Goolge 官方服務整合外掛正式上線

Elementor 網頁編輯器 突破 300 萬下載次數,最受歡迎的外掛!

WordPress SEO 項目 – 10 項一定要知道的網站 SEO 優化技巧

鵠學苑

鵠學苑

我們是由一群熱愛 WordPress 網站架設的同好所組成的團隊,希望可以將這套 頂尖的 CMS 管理系統推廣給想要架站的朋友們,並且能夠在過程中互相交流心得,讓網站架設過程變得更有效率!

訂閱電子報

立即訂閱鵠崙設計(鵠學苑)!我們將不定期發送架站教學文章、最新網站版型介紹以及網頁設計最優惠價格!

熱門文章

最新文章

相關文章

標籤雲

Scroll to Top