如何使用 Elementor [2022] 構建高轉化聯繫頁面

您知道大多數網站中最被低估的頁面之一是“聯繫我們”頁面嗎？

是的！

許多網站所有者和設計師不了解聯繫頁面的重要性。 這是您網站上舒適的小角落，用戶可以在這裡找到您或解決他們的問題。

但由於聯繫頁面沒有得到太多重視，它們變得不受歡迎，有時糟糕的位置使用戶很難找到聯繫我們頁面。 我們需要了解如何避免這個問題，並改進我們的聯繫我們頁面設計，使其更加引人注目。

在本文中，我們將了解是什麼讓聯繫頁面變得更好，以及如何使用 Elementor 頁面構建器進行設計。

那麼，是什麼讓聯繫頁面更好呢？ 讓我們來看看！

聯繫頁面最佳實踐

以下是成功聯繫我們頁面的功能和做法列表。 這裡的每個元素都在使聯繫頁面成為它需要的樣子方面發揮著至關重要的作用。

1. 讓它們隨時可用——聯繫頁面的鏈接需要出現的突出位置之一是頁腳。 每個頁面的底部都必須有一個聯繫我們的鏈接。 如果您有空間，在標題處添加聯繫表格也是一個不錯的選擇。
2. 包括重要鏈接——對於產品網站，最好添加產品文檔的鏈接，因為許多人可能會在腦海中提出與使用或計費相關的查詢。 這也避免了聯繫人收件箱的過度混亂。
3. 添加其他聯繫信息– 強烈建議為您的用戶添加電話號碼、電子郵件和郵寄地址。 這有助於使您的聯繫頁面對他們更有資源。
4. 避免不必要的字段和單詞——盡量減少聯繫表上的區域數量。 這樣做將使用戶更容易輸入他們的查詢。 許多優秀的表單構建器插件，例如 Gravity 和 WPForms，都非常適合 WordPress。
5. 添加成功消息- 很多時候，聯繫表單提交按鈕會將用戶引導至沒有消息的頁面。 僅僅將重定向鏈接添加到成功頁面或自定義聯繫表單以顯示成功消息會有很大幫助。 您可以添加一個簡單的“感謝您聯繫”並添加您的周轉時間。 您還可以鏈接您的社交媒體帳戶，以便您的用戶可以在其他平台上與您聯繫。
6. 讓它受歡迎——這是網站設計師最常犯的錯誤之一。 您必須確保聯繫表格看起來不枯燥，並且應該很受歡迎。 我們將了解如何在 Elementor Page 構建器的幫助下做到這一點。
7. 使其具有交互性——沒有任何地方規定您的聯繫頁面應該只包含姓名、電子郵件和消息字段。 您可以在您的位置上添加交互式元素，例如帶有大頭針的谷歌地圖。

當集成到您的聯繫表格中時，所有這些要點都可以為您的業務做更多的事情。

現在，我們將了解如何在您的網站上整合所有這些要點，即使您不知道如何編碼。

我們將使用 Elementor 頁面構建器和 Elementor 的 PowerPack 插件來設計我們的聯繫我們頁面。

讓我們潛入吧！

如何使用 Elementor Page Builder 構建聯繫我們頁面

在開始之前，請確保您已安裝並激活 Elementor Page Builder 和 PowerPack Addons for Elementor。 一旦你這樣做了，我們就可以開始我們的設計過程了。

第 1 步：啟動 Elementor 頁面構建器

首先，登錄您的 WordPress 儀表板，然後單擊左側的頁面選項。 現在查找您的“聯繫我們”頁面，然後單擊“使用 Elementor 編輯”按鈕。

這將啟動頁面構建器。

第 2 步：設計聯繫頁面的英雄部分

我們將首先在頂部添加一個英雄圖像並添加一個標題。 為此，請單擊“+ ”或添加新的部分圖標，然後將單列結構添加到您的頁面。

現在單擊行設置並從樣式選項卡向行添加背景圖像。

要使圖像和行更加可見，您需要從“佈局”選項卡中更改行的高度。 我們將最小尺寸設置為“600”。

我們還使用樣式選項卡中的背景疊加部分添加了不透明度為0.57的背景疊加。 以下是我們所做的更改：

第 3 步：自定義聯繫人頁面的標題

將 PowerPack 附加包的雙標題小部件拖放到行上。

現在將文本的外觀和設計更改為如下所示。 您可以使用您的創造力並以您想要的方式設計您的標題。

如果您不想從頭開始標題設計，您還可以從雙標題小部件的預設中進行選擇。

第 4 步：將聯繫表添加到您的頁面

是時候在頁面上添加一個體面的聯繫表格了。 為此，我們使用了Contact Form 7插件。

您可以使用任何流行的 WordPress 表單構建器插件，例如 Gravity 表單、Caldera 表單、Ninja 表單或 WPForms 插件。 在我們繼續之前，請確保您安裝並激活插件。

如果您尚未安裝聯繫表格 7，您可以在此處獲取。 安裝插件並刷新我們為獲取聯繫表單小部件而設計的頁面。

在頁面上添加 Elementor Contact 表單小部件

現在將聯繫表格 7 小部件拖放到頁面上，然後選擇您要顯示的聯繫表格。

現在是時候自定義表單了。 使用切換按鈕禁用標題並轉到樣式選項卡。 在這裡，您可以更改表單的顏色、背景、版式、寬度和填充。

對於此表格，我們進行了以下更改 –

• 更改了字段的背景顏色和文本顏色，並將間距增加到 20。
• 為字段添加了邊界並更改了邊界半徑。
• 更改了佔位符文本顏色。
• 對於提交按鈕，將寬度更改為 170 並更改顏色。
• 為按鈕添加了邊框和懸停效果。

這就是聯繫表格完成後的樣子。

第 3 步：添加其他聯繫信息

現在，只有聯繫表單對於聯繫頁面是不夠的，如果他們想在聯繫表單之外與您聯繫，您需要向用戶提供更多信息。

為此，我們將在同一行添加另一列，然後添加 Elementor Info List 小部件。

右鍵單擊該列的列圖標，然後單擊“添加新列”按鈕。

現在將信息列表小部件拖放到頁面上。

從相應的設置中更改圖標、顏色、文本、間距和填充。 對於此列表，我們更改了以下設置 -

• 更改了圖標、描述和標題。
• 物品間距：30
• 圖標大小、框大小和間距分別為 39、77 和 25。
• 更改了樣式選項卡中的標題、描述和圖標顏色。
• 添加頂部和底部填充：50

您可以保留上述相同的值，也可以根據需要更改和更改它們。

這就是所有更改完成後整行的樣子。

第 4 步：將 Google 地圖添加到聯繫頁面

聯繫我們頁面應該不僅僅是簡單的文本和字段。 一些創意和互動元素加起來很多。 為此，我們將向我們的頁面添加自定義谷歌地圖。

添加谷歌地圖

首先，將 PowerPack Addons 的 Google Maps 小部件拖放到頁面上。 確保檢查小部件右上角的“PP”圖標：

添加後，在經緯度的幫助下輸入您辦公室的位置。 您也可以設置多個位置或引腳。 如果您遇到錯誤，可以參考此文檔。

您還可以通過從預先設計的主題中選擇一種來更改地圖控件和样式。

設置 Google 地圖小部件後，您的聯繫頁面就準備就緒了。

現在唯一剩下的就是使更改生效。 為此，請單擊頁面左下角的發布按鈕。

就是這樣，伙計們！

答對了！ 您已經成功創建了一個漂亮的聯繫頁面。 這就是整個聯繫頁面完成後的樣子。

如果您想進行更多更改，可以使用 Elementor Page Builder 輕鬆完成。 您可以使用 Elementor 和 Elementor 的 PowerPack 插件向頁面添加更多交互式元素。

要了解有關 Elementor 的更多信息，您可以查看我們的熱門指南：

• 如何使用 Elementor：初學者詳細指南
• Elementor 錯誤以及如何修復這些錯誤
• 最佳免費 Elementor 學習資源的終極清單

如果您覺得本教程有幫助，請分享它，如果您有更多疑問，請在下方留言！