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

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

插入圖片與超連結

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

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

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

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

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

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

圖片細部調整

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

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

-Brian-