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

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

新增Elementor分頁小工具

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

Elementor新增文字與圖片

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

Elementor標題內文顏色邊線調整

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

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

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

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

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

-Brian-