Elementor教學:如何新增輪播圖(幻燈片)_打造最佳Landing Page

進入Landing Page，在不滾動或滑動畫面的情況下，首先映入訪客的圖片搭配文案，即稱為「主視覺」。許多網站或是到達頁為增添視覺的衝擊與營造豐富感，會在主視覺的區塊以輪播的方式呈現，此小工具在Elementor稱為「幻燈片」，除了能讓進入之訪客快速掌握重點，也能避免過多的資訊，造成的視覺擁擠感。

Elementor小工具「幻燈片」教學

在左選單「專業版」中可以找到幻燈片小工具，壓住滑鼠左鍵不放，拖拉至右側畫面虛線框框處(如圖一)；或是利用紅色＋號新增一個段，再將小工具拖曳至該段內，即可新增幻燈片小工具。

上傳圖片與加入動畫特效與濾鏡

點選小工具右上角畫筆(如圖二)，即可開始編輯小工具。

Elementor「內容模式」(如圖三)

幻燈片調整:

• 首先於「背景」的按鈕下點選幻燈片，於此處上傳圖片，或是簡單的上個背景色，不過一般會上傳一張最能傳達產品或服務的一張精選圖。另外還能調整圖片尺寸與加入幻燈片動畫特效，如向內縮放或是往外縮放，抑或是在圖片上方使用「背景套疊」功能，就能創造出如濾鏡的感受，依產品或服務選擇不同顏色，創造差異的質感。

• 切換至「內容」按鈕，標題、內文或是副標、CTA按鈕(Call To Action 行動呼籲)更可設定點選的範圍，如: 整張幻燈片(任何一處)或是只有按鈕可以點選，都可以於「內容」加入。

• 「樣式」按鈕，針對標題、內文，可調整水平與垂直位置，更改顏色也可於此處調整。

拖拉條選項調整

• 於此設定幻燈片切換的效果與速度，需特別注意速度快慢，太快可能導致訪客看不清楚內容，太慢則無法完整傳達訊息。還有訪客進入網站是否自動撥放、與是否顯示上一張/下一張幻燈片的指引符號，

Elementor「樣式模式」(如圖四)

進入此模式可調整幻燈片寬度，與文字、按鈕的排版與導航列。基本上功能為「內容」的更進階細部調整差異不大，就不再特別拉出來說明。

Elementor「進階」模式(如圖五)

基本上此為針對「段」的區塊進行調整

• 選擇「進階」，在外距或內距處，即可針對圖片「內或外」進行留空或者針對上下左右進行位置的微調；於右手邊有一個鎖鏈的圖案，取消點選後可分別調整上下左右的移動的值，否則全部數值為連動的。
• 選擇「背景」，即可於此個段中加入一個背景，即可選擇加入圖片或以單色、漸層色當成圖片背景。
• 選擇「邊線」即為此個段加入邊框，於此可調整邊線的類型如實線、雙實線，顏色與圓角。
• 選擇「響應」，可針對不同的裝置設定是否顯示，例如:專為桌機設計到達頁，可以將「在平板、手機上隱藏」功能開啟，因此使用者在瀏覽Landing Page時此區塊就只有使用桌機的使用者才能看見。
• 選擇「自訂CSS樣式」可在此加入CSS語法，為該區塊做更細部之調整。

-Brian-