如何建立著陸頁？ - Benchmark Email

知識庫首頁 aero-right 著陸頁如何建立著陸頁

如何建立著陸頁

著陸頁更新日期 21 三月, 2023

了解著陸頁編輯器能為您做什麼。建立專業著陸頁，吸引訪客瀏覽精美的頁面。

選擇您想了解更多的主題：

第一步：建立您的第一個著陸頁

開始動手設計您的第一個著陸頁，登入您的 Benchmark 帳戶，依照下列步驟操作：

點擊導覽列的「著陸頁」，然後選擇「著陸頁」。
點擊右上方的「建立新的著陸頁」按鈕。

新增著陸頁名稱。此名稱僅供您參考，訪客不會看到。完成後點擊「下一步」。

要複製先前做好的著陸頁，點擊您要複製的著陸頁右邊的刪除號替複製的著陸頁命名，或保留預設名稱，然後點擊「儲存」。

複製著陸頁只會將原始著陸頁內容，像是文字、圖片或是連結拷貝過去。您須要完成檢查列表的所有資訊才能發布著陸頁。

現在，您可以看到檢查列表。右上角的「發布」按鈕只有在檢查列表底下的項目都完成才能啟動。

填寫檢查列表底下的頁面資訊、標題和描述。著陸頁標題和描述可以提昇您的著陸頁轉換績效，點擊此處了解更多。 注意：檢查列表底下的每個項目都完成後，核取標記就會變成綠色。

現在開始進行「設計」步驟。

自訂著陸頁時間到。在檢查列表底下，點擊「設計著陸頁」按鈕。

注意

著陸頁編輯器等於是我們的郵件編輯器兄弟，如果您已經熟悉郵件編輯器的操作，建立著陸頁對您來說輕而易舉。如果您不熟，請繼續瀏覽下方說明，了解如何使用拖曳式編輯器。

畫面左上方可以看到三個標籤。系統預設選取的第一個是「版型」。您可以選擇「空白版型」從頭開始設計，或是在「範本」處選擇其中一款內建範本。兩個選項都可以設計出符合行動裝置瀏覽的精美著陸頁。

選好版型後，下圖就是您看到的畫面。

版型：您可以在此選項更改預設的範本，或使用空白的版型。如果選擇更改範本，已經建立的著陸頁內容將永久遺失。此動作無法還原。
區塊：您可以在這個標籤找到兩個選項：
1. 區段
2. 區塊
全局設定：在此標籤底下，您可以找到背景顏色。您可以更改著陸頁的背景顏色。同時可以看到背景圖片選項，新增背景圖片到整個著陸頁面。要了解如何新增背景圖片，點擊此處。最後，您還可以設定著陸頁標題跟內文的字體排版。

顯示區段按鈕：此按鈕會顯示著陸頁內的區段以及每個區段內的欄位數量。區段內有許多選項，您可以使用箭頭調整區段位置，或是複製、刪除、設定區塊，調整區塊背景以及內容排版。
顯示區塊按鈕：點擊此按鈕，每個區塊會出現綠色外框，您可以看到移動、複製或刪除區塊的選項。

行動裝置畫面按鈕：您使用的響應式編輯器會自動調整並優化區塊在行動裝置呈現的畫面。點擊此選項可以將畫面改為行動裝置瀏覽的畫面。如果不喜歡行動裝置版型，您可以自行修改區段，調整成符合您的內容。記住，這裡所做的變動也會影響桌機瀏覽的畫面。
名稱欄位：畫面右上角是您的著陸頁名稱，不是頁面標題。
返回檢查列表：點擊此選項會回到檢查列表，可以編輯著陸頁的其他資訊。
版型：設計著陸頁的地方。您可以拖曳內容區塊到此處，自訂您的著陸頁內容。
儲存選項：Benchmark 每隔幾秒鐘備份您編輯的內容。您在這裡可以看到上一次儲存時間。
預覽：此選項可以讓您瀏覽著陸頁在瀏覽器呈現的樣貌。
儲存及下一步：點擊此選項會儲存您編輯的內容並回到檢查列表，然後您可以選擇發布或之後繼續編輯。

隱藏選項

此選項可以讓您在部份裝置隱藏某些區塊。點擊您要隱藏的區塊，在左邊的區塊內容將橫桿從灰色切到藍色。您可以選擇在行動裝置或桌機隱藏某些區塊。

返回頁首

區段

著陸頁區由不同的區段組成。一個著陸頁可能有多個區段，一個區段可能有不同區塊。

您可以在「區塊」標籤底下找到「區段」選項。您可以新增想要的區段到著陸頁。

區段由欄位組成，從一欄到四欄的區段都有。

要新增區段到您的著陸頁，只要選擇您要的欄位數量的區段，拖曳到右邊的編輯畫面。請參考下方動圖。

要瀏覽版型裡的區段，點擊「顯示區段」按鈕。

點擊「顯示區段」會看到著陸頁切割成不同區段，每個區段會顯示欄位數量以及下列選項：

箭頭：點擊箭頭可以上下移動區段。
齒輪：點擊齒輪會開啟區段設定，您可以在此更改特定區段的背景顏色或是新增背景圖片到此區段。
複製：您可以複製整個區段，複製完區段就可以使用。
垃圾桶：可以刪除整個區段。此動作無法還原。

要退出區段模式，點擊「隱藏區段」按鈕。

返回頁首

如何新增背景圖片

區段設定以及「全局設定」標籤裡面可以設定背景圖片。要新增背景圖片，請依照下列步驟操作：

在單一區段新增背景圖片的步驟

此選項可以在您的著陸頁的特定區塊新增背景圖片。

在著陸頁編輯畫面左上方，點擊「顯示區段」選項。
找到您要新增背景圖片的區段，點擊齒輪圖示。
區段設定會顯示在左邊。點擊「新增背景」。

新增背景圖片到整個著陸頁

透過全局設定標籤新增背景圖片，圖片會套用到整個著陸頁。

在著陸頁編輯畫面左上方，點擊「全局設定」標籤。
點擊「背景圖片」選項。
然後選擇「新增背景」。

適用兩種新增背景圖片作法：

現在，您可以看到您的圖庫。您可以選擇圖庫裡的圖片，或是新增圖片。

新增圖片後，著陸頁就會顯示新的設定。

背景樣式
1. 填滿圖片會填滿整個區段。捲動螢幕時，圖片會靜止不動。下面是使用填滿背景效果的著陸頁範例。範例中，我們在開頭跟結尾各別放了一張背景圖片。中間區段我們新增與開頭背景圖片後半段，以及結尾背景圖片前半段相搭的顏色，營造一種漸層效果。
2. 並排圖片會根據它的尺寸跟畫面並排。圖片會呈現類似馬賽克牆的效果。圖片數量會根據螢幕大小而調整。
3. 視差此功能在捲動您的著陸頁時會固定您的圖片，呈現一種動態的效果。螢幕會顯示滿版圖片，但您也可以調整圖片的位置。請注意：上下捲動網頁時，視差效果最明顯。以下面這個紅酒為例，捲動某個區段到另一個區段時，前一張圖片會消失，新的圖片會覆蓋整個區段。
圖片位置 您可以根據需求，輕鬆更改圖片位置。
編輯選項
1. 編輯：使用我們的圖片編輯器剪裁或新增圖片效果。
2. 替換：您可以替換某張您不想要的圖片。
3. 重新編輯：此選項會刪除圖片，讓您使用別的圖片或背景顏色。
內容排版
- 邊框背景：又稱方框背景，它的週邊有間距，同時還有背景顏色。內容居中。
- 全幅背景：此選項僅顯示內容，週邊沒有加上間距。
完成後，別忘了點擊「儲存及關閉」。

返回頁首

區塊

區塊是設計元素也具有功能性。點擊「區塊」標籤，您會看到兩個選項：「區段」跟「內容」。想瀏覽可用的區塊，點擊「區塊」標籤底下的「內容」。

要新增區塊到您的版型，點擊區塊並拖曳到您想要放置的位置。請參考下方動圖。

注意

下方是可用的區塊。瀏覽說明，了解如何使用區塊。

返回頁首

單圖區塊和圖卡區塊

您可以透過這些區塊上傳圖片，或從您的圖庫選擇圖片。要使用這些區塊，將他們拖曳到您的著陸頁，然後新增圖片。

單圖區塊可以新增圖片到您的版型，而圖卡區塊可以同時新增圖片和文字，放到您的版型。

下面左邊是圖片區塊，右邊是圖卡區塊。

我該使用哪一個？

使用圖片區塊可以新增一張簡單的圖片。

使用圖卡區塊可以新增新增圖片的文字敘述。移除這個區塊，文字敘述也會跟著移除。

想了解如何新增圖卡區塊請點擊此處；單圖區塊則點擊此處。

您可能感興趣的主題：

返回區塊選單

圖文區塊

編輯器提供三種圖文區塊：

右欄文字

左欄文字

底端文字

想了解如何新增圖文區塊，點擊此處。

圖文區塊可以在區塊內同時新增圖片以及文字。圖文區塊和圖卡區塊最主要的差別在於圖文區塊沒有框架，所以您可以調整區塊內的間距，如下圖所示（左圖為圖文區塊，右圖為圖卡區塊）。

想了解如何新增圖文區塊，點擊此處。

返回區塊選單

文字區塊

您可以使用文字區塊新增文字到您的著陸頁。要使用此區塊，將區塊拖曳到您想要放置的位置。接著，點擊區塊，將預設文字改成您的內容。

使用文字區塊的幾點注意事項。

輕鬆貼上新內容

使用「輕鬆貼」功能從其他來源複製並貼上您的內容。「輕鬆貼」功能讓您複製貼上其他來源複變得快速又簡單，像是您的網站、Google 以及微軟文件。您可以移除原本格式或保留格式以符合您的其他頁面。

要使用「輕鬆貼」功能，依照下列步驟。

複製其中一個來源的內容。
然後貼上內容到郵件內的其中一個文字方塊。
在彈出視窗，選擇「保留」或「移除」格式。
- 移除格式，移除行內樣式並保留某些格式，像是粗體、斜體、縮排、編號列表以及 URL 連結。
- 保留格式，保存樣式及原始內容架構。「輕鬆貼」只會保存郵件可用的安全 HTML 代碼，並移除內容代碼中不安全且無效的代碼、專屬樣式、屬性和標籤。

完成後內容後，點擊「儲存」。

重要

不符合郵件安全的字體將改回預設的 Arial 字體。
「輕鬆貼」功能不支援圖片。
如果需要更多樣式，您可以使用文字區塊工具欄或區塊的原始碼。

複製貼上

如果您要複製文字並貼到您的著陸頁，我們建議您使用貼上功能，移除文字內任何隱藏字元，因為他們可能會影響您的文字設計。

原始碼

要新增原始碼，點擊原始碼

圖示，貼上您的代碼。

如果您沒有看到上述的符號，點擊工具列右邊的「更多」圖示。

返回區塊選單

影片區塊

影片是非常有效的視覺工具。透過影片，您可以呈現產品的品質，或是為什麼顧客應該跳過您的競爭，選擇您的產品。千萬別錯失在著陸頁使用影片的機會。

如果您想了解如何上傳影片到影音走廊以及如何新增影片到您的版型，點擊此處。

返回區塊選單

分段區塊

使用分段區塊將著陸頁的不同區塊區隔開來。這個區段不一定要設定為空白。要新增分段區塊，將區塊拖曳到您想要的位置。了解所有分段區塊的資訊。

返回區塊選單

按鍵區塊

行為召喚 (CTA) 按鈕是著陸頁最重要的部份。它是決定著陸頁以及其他行銷活動是否成功的決定因素。要新增按鍵，將區塊拖曳到您想要的位置。在左側面板，您會看到自訂按鍵的選項。繼續閱讀，了解如何設定按鍵內容。

您可以在這個方框內新增按鍵文字，也就是所謂的行為召喚。著陸頁會有一個目標或行銷目的，而行為召喚可以協助您達成這個目的。撰寫吸睛的文字，抓住訪客的目光。
首先，選擇「連結類型」，然後在「網站 URL」輸入網址。注意，這個頁面可能是外部 URL，或是您同一個著陸頁的某個地方。舉例，如果按鍵寫「註冊」，該按鍵連結可以導引訪客到同一個著陸頁的訂閱表格。要插入其他連結，請依照下列步驟操作：
1. 您可以點擊位於上方文字編輯工具列的「插入連結」，然後新增網址。
2. 或是，直接在按鍵區塊內容選擇「連結類型」。注意：要新增錨點，您需要先建立錨點。
在畫面上方的文字編輯工具列自訂文字以及連結的各項設定。
如果著陸頁有多個按鍵，您不需要逐一設定。設定其中一個按鍵，，然後勾選左側面板「內容」標先底下的「套用所有按鍵區塊」。著陸頁上的所有按鍵就會套用相同的內容設定。

Back to blocks menu

社群媒體 & 社群分享區塊

社群媒體區塊很重要。我們的編輯器提供兩種區塊，增加您的社群曝光管道。將其中一種區塊拖曳到您要的位置即可使用。

社群媒體區塊可以讓您新增社群媒體圖示，或是圖示加上文字。區塊可以新增多達 20 種不同的服務，包括 Facebook、Twitter、Whatsapp、Linkedin、YouTube、Pinterest、RSS、Vimeo、TripAdvisor 等。

社群分享區塊可以新增：Facebook、Twitter、Linkedin、Myspace 以及 instapaper。此區塊可以讓您直接將著陸頁分享到社群媒體。

使用哪一種區塊？

如果您要導引訪客到您的社群媒體，使用社群媒體按鈕。他們可以點擊想要瀏覽的社群媒體，按讚或新增到他們的偏好

如果您想要用戶分享您的內容，使用社群分享區塊。

依照下列指示在兩個區塊內新增社群媒體：

拖曳想要使用的區塊或點擊編輯畫面裡現有的社群媒體區塊。
點擊左側導覽列的「內容」標籤。
點擊「增加」的下拉式選單，選擇一款社群媒體然後點擊旁邊的加號圖示。
在編輯畫面，點擊剛才新增的社群媒體圖示。自訂圖示的選項會出現在左側導覽列。
新增 URL 連結並自訂您的圖示。完成後，您可以使用「套用圓角至所有區塊的按鍵」選項，套用同樣的圓角設定到所有區塊的按鍵。

此外，移動滑鼠到社群媒體圖示會看到移動或刪除的選項。

返回區塊選單

導覽列

導覽列可以讓您的訪客瀏覽更多關於您的企業消息。

要新增連結，只要點擊「內容」標籤底下的「加號」按鈕。要自訂連結，點擊導覽列區塊的「連結」，設定的選項會顯示在左邊面板。您可以新增最多六組連結。連結類型有兩種可以選擇：文字或圖片。
導覽列有三種版型可以選擇。您可以結合圖片和文字。點擊並選擇符合您設計風格的選項。

使用水平對齊和垂直對齊選項設定導覽列的排列方式。「間距寬度」決定每個連結之間的距離。
行動裝置樣式可以選擇預設、垂直堆疊以及垂直堆疊並置中。您可以選擇著陸頁在行動裝置上呈現的樣貌。

返回區塊選單

訂閱表格

使用著陸頁收集訂閱用戶。收集越多訂閱用戶就能發送您的訊息給更多人，業績也會跟成長。

注意

如果先前已建立內嵌式訂閱表格（進階），請依照下列步驟操作。要建立內嵌式訂閱表格（進階），點擊此處。

拖曳訂閱表格區塊到您要放置的編輯畫面。
在左側面板的下拉式選單中選擇現有的訂閱表格。注意：著陸頁只能使用內嵌式訂閱表格（進階）。

您的訂閱表格會出現在剛才選取的位置。在著陸頁編輯器，您可以將「自訂寬度」從灰色切換成藍色，自訂訂閱表格寬度。如果您要設計訂閱表格，點擊「開啟訂閱表格編輯器」。您可以在彈出的新頁面編輯您的訂閱表格。完成後，點擊「儲存並發布」及「確認」。
更新過的內容不會在著陸頁馬上顯示出來。要瀏覽更新過的內容，請刪除著陸頁上的訂閱表格（移動滑鼠到訂閱表格區塊，點擊垃圾桶按鈕）。

注意：您可以隨時在下拉式選單中選擇新的訂閱表格。

返回區塊選單

電子商務區塊

您可以在著陸頁裡使用電子商務區塊，推廣和銷售您的產品。

電子商務區塊包含以下內容：

圖片佔位符
產品描述
產品價格
按鍵部份

要使用產品區塊，拖曳區塊到您的著陸頁區段裡面。

要自訂您的電子商務區塊，請依照下列步驟操作。

首先新增一張產品圖片。
新增產品描述；內容應該簡短且帶有描述文字。
更新您的產品價格。
然後，自訂產品按鍵內容：

按鍵文字。
按鍵 URL，新增一組 URL 讓聯絡人可以進到網站完成購物。
最後，設置搭配您品牌特性的按鍵樣式。要省去重複操作，您可以設定相同樣式，套用到著陸頁內所有按鍵。想了解更多關於按鍵樣式選項，點擊此處。

如果您不想使用任何區塊元素，只要在「內容」標籤內關閉即可。

完成後，點擊「儲存」然後「儲存及下一步」，或是只點擊郵件外面空白處即可儲存。

底下是使用電子商務區塊及設定樣式的範例。

返回區塊選單

Shopify 產品區塊

開始前，點擊並拖曳區塊到著陸頁中想要放置的地方。

要使用 Shopify 產品區塊，您需要有付費的 Shopify 帳戶。第一次使用時，您需要整合 Shopify 到您的 Benchmark 帳戶。想了解如何整合 Shopify 商店到 Benchmark，點擊此處。

一旦成功整合您的 Shopify 帳戶到 Benchmark，您會看到可用的 Shopify 產品列表。

選擇其中一項產品。區塊會使用 Shopify 的詳細資訊，自動填入產品資訊。

Shopify 產品區塊包含下列：

產品圖片
- 產品圖片是從 Shopify 產品的 URL 取得。圖片不會儲存在您的 Benchmark 圖庫。但如果您使用 Benchmark 圖片編輯器修改圖片，修改過的圖片會在圖庫另存新檔。
產品描述
- 產品描述的文字內容來自 Shopify 的產品標題。
產品價格
- 產品價格來自 Shopify 商店指定的價格。
產品按鈕
- 產品按鈕自動連結到您在 Shopify 商店的產品 URL。產品 URL 也可以用來追蹤轉換目標。