自訂同意首選項

我們使用 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製作工具

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-