Elementor教學: 如何摺疊資料?利用分頁小工具_打造最佳Landing Page

Elementor教學: 新增分頁小工具 WordPress頁面視覺化編輯器

打造Landing Page時,有些資訊是必須存在,但如果全部放入會造成Landing Page過長,如:分店地址,這時就可以利用Elementor的「分頁」小工具達成,使用者能依需求或興趣自行點選獲得資訊。如此一來維持到達頁的版型設計,又能完整傳達使用者需要的資訊。

elementor教學_新增分頁小工具

新增Elementor分頁小工具

進入Elementor視覺化編輯器之後,於左側的「一般」選單,可以找到分頁小工具,壓住滑鼠左鍵拖拉至畫面右側,即可完成新增分頁小工具。其實使用分頁小工具,也能用於介紹產品或服務,例如說同一產品,不同系列或顏色,皆能透過此種方式去呈現,既能維持版面的美觀性與必要資訊達到一個完美平衡。

elementor教學_分頁小工具1

Elementor新增文字與圖片

於「內容」模式下(如圖一),於此處可以插入標題、內文,還有相當重要的圖片,圖片的吸睛度可是遠大於文字,盡量以簡潔的文字搭配高品質插圖,就能有效地引發訪客的興趣,繼續往下瀏覽頁面。項目標籤的數量,請依畫面調性去做調整,且勿貪心的全部加入,請以屬性作好分類;如數量太多請新增第二個分頁小工具。

elementor教學_分頁小工具2

Elementor標題內文顏色邊線調整

於「樣式」模式下(如圖二),可增加小工具的邊線與調整邊線顏色,或是為整個小工具加入背景。背景顏色請考量到主色與輔助色(可參考此篇),一個Landing Page如果出現過多顏色組合,易出現雜亂無章的感受,因此請考量主色系再決定是否要要於小工具加入背景色。

標題與內文的尺寸、粗細、行高、斜體、字元間距……都可於「排版」內進行調整,調整的結果都會即時顯示於右側的畫面處,因此Elementor可說是Wordpress中相當簡易直覺的Landing Page製作工具。

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

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

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

-Brian-

網友回應

網友回應