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 優化技巧

分享在 facebook
Facebook
分享在 skype
Skype
分享在 pinterest
Pinterest
分享在 email
Email
分享在 twitter
Twitter
鵠學苑

鵠學苑

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

訂閱電子報

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

熱門文章

最新文章

相關文章

標籤雲

Sign up for our Newsletter

Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit

Scroll to Top