自訂同意首選項

我們使用 cookie 來幫助您有效導航並執行某些功能。 您將在下面的每個同意類別下找到有關所有 cookie 的詳細資訊。

被分類為「必要」的 cookie 儲存在您的瀏覽器中,因為它們對於啟用網站的基本功能至關重要。

我們也使用第三方 cookie 來幫助我們分析您如何使用本網站、儲存您的偏好並提供與您相關的內容和廣告。 這些 cookie 僅在您事先同意的情況下才會儲存在您的瀏覽器中。

您可以選擇啟用或停用部分或全部 cookie,但停用其中一些可能會影響您的瀏覽體驗。

Always Active

Necessary cookies are required to enable the basic features of this site, such as providing secure log-in or adjusting your consent preferences. These cookies do not store any personally identifiable data.

Functional cookies help perform certain functionalities like sharing the content of the website on social media platforms, collecting feedback, and other third-party features.

Analytical cookies are used to understand how visitors interact with the website. These cookies help provide information on metrics such as the number of visitors, bounce rate, traffic source, etc.

Performance cookies are used to understand and analyze the key performance indexes of the website which helps in delivering a better user experience for the visitors.

Advertisement cookies are used to provide visitors with customized advertisements based on the pages you visited previously and to analyze the effectiveness of the ad campaigns.

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

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

Elementor教學如何插入圖片

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

插入圖片與超連結

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

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

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

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

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

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

圖片細部調整

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

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

-Brian-