Elementor教學:如何插入圖片_打造最佳Landing Page

WordPress x Elementor教學:如何新增圖片

Elementor教學如何插入圖片

組成Landing Page最基本的元素就是圖片,雖然這是基本功,不過不可否認就是圖片是製作到達頁最常使用到的功能,因此唯有把基礎概念建立起來,之後再建立其他小工具的時候就能更有效率地完成,如果對Elementor的概念還不熟悉,可以參考這篇

插入圖片與超連結

進入Elementor左側為編輯選單,右側即為Landing Page的畫面預覽區。在左側編輯選單的「基本」即可找到「圖片」小工具,只需將小工具拖拉至右側畫面預覽區愈新增圖片的區塊。

將小工具置於愈新增處後,可以看見上方有三個選單按鈕(如圖一)。

  • 於「內容」中即可加入圖片,插入圖片標題、調整圖片尺寸,如有固定的尺寸,可於下拉選單中選擇「自訂」。
  • 如需要在圖片中加入超連結,於「連結到」下拉選單中,選擇「客製URL」,即可於下單欄位加入網址。elementor教學_圖片小工具

圖片透明度、邊線樣式與陰影調整

進入「樣式」後(如圖二),可調整圖片寬度與設定最大的寬度百分比

  • 針對圖片可調整不透明度,於CSS Filters調整圖片模糊程度、亮度、對比。
  • 選擇「懸停」加入圖片動畫,當使用者將滑鼠移動至該圖片即可出現相關的動畫效果。
  • 於「邊線類型」可增加邊線如:實線、雙實線、虛線;還能調整邊線圓角,使邊線呈現一個較柔和的線條感。
  • 如想增加圖片立體感,於「方框陰影」可進行圖片陰影效果的細微調整。

圖片細部調整

於「進階」選單模式下(如圖三),基本上此為針對「段」的區塊進行調整

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

-Brian-

網友回應

網友回應