Elementor教學:輪播圖_快速好用的Landing Page製作工具

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

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

elementor教學_新增幻燈片 wordpress

Elementor小工具「幻燈片」教學

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

elementor教學_幻燈片小工具1 wordpress

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

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

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

幻燈片調整:

  • 首先於「背景」的按鈕下點選幻燈片,於此處上傳圖片,或是簡單的上個背景色,不過一般會上傳一張最能傳達產品或服務的一張精選圖。另外還能調整圖片尺寸與加入幻燈片動畫特效,如向內縮放或是往外縮放,抑或是在圖片上方使用「背景套疊」功能,就能創造出如濾鏡的感受,依產品或服務選擇不同顏色,創造差異的質感。
  • 切換至「內容」按鈕,標題、內文或是副標、CTA按鈕(Call To Action 行動呼籲)更可設定點選的範圍,如: 整張幻燈片(任何一處)或是只有按鈕可以點選,都可以於「內容」加入。
  • 「樣式」按鈕,針對標題、內文,可調整水平與垂直位置,更改顏色也可於此處調整。

elementor教學_幻燈片小工具2 wordpress

拖拉條選項調整

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

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

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

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

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

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

-Brian-

網友回應

網友回應