如何在任何 WordPress 主題中創建潛在客戶登錄頁面

*更新：由於你們中的許多人都覺得這篇文章很有趣，我們 ProteusThemes 決定為您省去所有的麻煩，並創建了 GrowthPress WordPress 主題，其中包括高度可轉換的潛在客戶生成登陸頁面。

您是否一直在努力使用現有的 WordPress 主題設置登錄頁面？ 按照這個簡單的教程，立即創建您自己的 WP 登錄頁面！

在本教程中，我將向您展示如何使用 SiteOrigin 的 Page Builder 在基本上任何 WordPress 主題中創建簡單的潛在客戶生成登錄頁面。

SiteOrigin 的 Page Builder 是最受歡迎的免費頁面構建器 WordPress 插件，它是有史以來排名前 20 的 WordPress 插件，活躍安裝量超過 100 萬。 它與我們在 WordPress 主題中使用的頁面構建器相同，我們堅信它是市場上最好的頁面構建器解決方案。

編寫本教程有兩個目的。 首先，向您展示如何創建潛在客戶生成登錄頁面，即使您的主題不包含為此預先構建的佈局，其次，向您展示 SiteOrigin 的 Page Builder 如何強大且易於使用.

什麼是潛在客戶生成登陸頁面？

登陸頁面是一個獨立的網頁，其設計目的只有一個——讓網站訪問者採取特定的行動。 用戶旅程看起來像這樣。 您將來自付費廣告或社交媒體的高度針對性用戶帶到您的登錄頁面。 在著陸頁上，你給用戶一些高價值和低風險的東西，例如免費的電子書，所以他願意給你他的聯繫方式作為回報。 稍後，您聯繫他並嘗試向他推銷優質內容或產品。

簡史或潛在客戶生成登陸頁面

如今，潛在客戶生成登陸頁面已司空見慣。 您將很難瀏覽互聯網而不會遇到潛在客戶生成登錄頁面。 如今，它們看起來精緻而精緻，然而，在互聯網的早期，情況並非總是如此。

潛在客戶生成登陸頁面可以感謝微軟的存在。 在 2000 年代初期，微軟試圖增加其核心產品 Office 的銷量。 由於當時創建登錄頁面的過程非常耗時，因此沒過多久，像 Instapage 和 Unbounce 這樣的解決方案就誕生了。

隨著此類工具的出現，潛在客戶生成登錄頁面變得更加複雜，如今，它們與電子郵件營銷平台和 CRM 工具等其他工具集成。

如何以及何時使用潛在客戶生成登陸頁面

潛在客戶登陸頁面也稱為擠壓頁面，因為它們通常旨在“擠壓”您的訪問者交出他們的電子郵件地址。

由於潛在客戶生成登錄頁面的主要目標是增加潛在客戶的數量，因此簡單的答案是在您進行促銷活動時使用它。 以下是一些示例，可幫助您在自己的業務中實施登錄頁面。

推廣單一產品或服務

當您想要推廣單個產品或服務時，潛在客戶生成登錄頁面是一個不錯的選擇。 它運作良好，因為沒有其他干擾，因此您的訪問者可以輕鬆地專注於特定產品或服務提供的所有好處。 您還可以通過提供與您要推廣的產品或服務相關的免費或低價優惠來獲取潛在客戶。 然後，您可以使用電子郵件營銷來為他們購買高價商品做好準備。

增加網絡研討會註冊

當您想要推廣即將舉行的網絡研討會時，潛在客戶生成登錄頁面是一個不錯的選擇。 網絡研討會通常用於推銷高價產品或服務，因此使用邀請訪問者註冊網絡研討會的潛在客戶登陸頁面會增加在網絡研討會期間看到您的報價並準備購買的潛在客戶數量。

宣傳您的時事通訊

如果您還沒有產品或服務，可以使用潛在客戶生成登錄頁面來宣傳您的時事通訊。 這使您可以獲取對您的品牌感興趣的潛在客戶，並且您可以在處理您的報價時繼續培養他們。

細分您的受眾

潛在客戶生成登陸頁面可用於細分您現有的受眾。 例如，如果您有一個電子郵件列表，則並非所有訂閱者都對您提供的所有內容感興趣。

您可以為每個核心報價或產品創建一個登錄頁面，並將鏈接發送到電子郵件活動中的所有這些登錄頁面。 在電子郵件中，請您的訂閱者單擊他們最感興趣的鏈接，以便他們從現在開始可以從您那裡獲得更多相關電子郵件。

通過這樣做，您將擁有更有效的電子郵件營銷策略和更高的轉化率，因為對特定優惠感興趣的電子郵件訂閱者在收到相關促銷信息時更傾向於購買。

迎合不同的流量來源

最後，您可以使用潛在客戶生成登錄頁面來細分來自不同社交媒體網絡和其他流量來源的訪問者。

例如，來自 Twitter 的新關注者可能不像從您的電子郵件中點擊進入您的登錄頁面的人那樣熟悉您的品牌。

因此，來自 Twitter 的人需要比已經認識並信任您的人更有說服力才能註冊您的提議。

您還可以使用它們根據您試圖從中吸引流量的社交網絡來推廣不同的優惠。

在我們的例子中，這看起來像這樣。 我們將讓用戶從社交媒體上點擊廣告，說“你在水電費上花了太多錢嗎？”。 當他點擊廣告時，他將被重定向到我們的著陸頁。 在那裡，我們將說服他向我們提供他的聯繫方式，以換取一本包含節能提示的免費電子書。 稍後，我們會聯繫他，嘗試向他推銷節能燈泡。 因為我們知道他想在能源上省錢。

一個好的登陸頁面應該有：

• 高度針對性的副本，重點關注您在著陸頁上宣傳的優惠的好處
• 電子書或時事通訊形式的高價值，可以在短時間內實施，以獲得即時滿足感
• 單一明確的號召性用語 (CTA)，可讓您輕鬆了解他們需要採取什麼行動才能獲得您的報價
• 社會證明（例如滿意客戶的推薦、銷售數量），這樣您就可以建立信任並消除反對意見，從而提高您收到的註冊數量

一個好的著陸頁不應該有：

• 主導航或頁腳導航，因為這將允許訪問者導航離開潛在客戶登錄頁面並轉到您網站上的其他頁面
• 任何其他傳出鏈接作為傳出鏈接將使訪問者遠離您的網站並導致失去潛在客戶而不是獲得他們
• 不止一個號召性用語 (CTA)，因為多個 CTA 將達到相反的效果並驅走訪問者

既然我們已經介紹了什麼是潛在客戶生成頁面，它們是如何產生的，以及使用潛在客戶生成登陸頁面的基本原則，讓我們來看看如何輕鬆創建一個。

我做了一個快速的線框圖，著陸頁的外觀。 頂部是一個不可鏈接的標誌，在下面的右側是一個大標題，代表你會得到什麼。 標題下方是三個主要好處，您可以通過下載一本書來獲得這些好處。 左側是一個表單，有兩個輸入字段和 CTA。 在頁面底部，您可以找到社會證明的推薦部分。

讓我們開始吧

首先，您需要進入您的 WordPress 管理區域並創建一個新頁面。 添加新頁面有三種方法。

• 單擊 WP 管理頂部工具欄中的新建。
• 轉到Pages並單擊邊欄中的添加新的。
• 或單擊頁面頂部的添加新按鈕。

創建新頁面後，您需要轉到該頁面並隱藏其中的所有默認元素。 因此，訪問者不會那麼容易離開您的網站。 離開著陸頁的唯一方法是單擊瀏覽器選項卡中的“X”。 這是設計登陸頁面時的第一技巧。

隱藏當前 WordPress 頁面的所有元素

首先，檢查您的主題是否已經有一個沒有頁眉和頁腳的可用頁面模板。 如果幸運的話，您可以跳過本文的這一部分。

如果您的主題沒有沒有頁眉和頁腳的頁面模板，您應該創建一個子主題並創建自己的沒有頁眉和頁腳的頁面模板。 那將是正確的方法，但為了簡單起見，我將向您展示如何隱藏頁眉和頁腳的更簡單方法。

要隱藏 WordPress 網站上的頁眉、頁腳和側邊欄等默認元素，請使用 CSS 屬性display: none; 對於所有元素，這些元素已經顯示在您新創建的頁面上。

就我而言，我需要隱藏兩個頁眉元素和兩個頁腳元素。 這是我粘貼到 WP Customizer 中的 Additional CSS 的代碼（外觀 > 自定義 > 附加 CSS）。

我還需要將頁面 ID 放在所有類的前面，因此頁眉和頁腳僅在該特定頁面上消失，而不是在整個站點上消失。

如何找到要隱藏的元素的類？

這並不難，尤其是如果您曾經在瀏覽器中看到過檢查工具。 要查找類的名稱，您需要轉到新創建的登錄頁面 > 將鼠標懸停在要隱藏的元素上 > 右鍵單擊 > 檢查，然後在開發工具中，嘗試找到您要隱藏的元素的父 div想躲。

當您找到要隱藏的元素的父 div 時，只需將類的名稱複製/粘貼到您的定制器。 就我而言，該名稱是header__container 。

*當您將鼠標懸停在下面的代碼行上時，頂部的元素會突出顯示。 *如果您找不到合適的課程，請觀看這個簡短的視頻教程。

如何在 WordPress 中找到頁面 ID？

轉到 WP Admin > Pages > 您的登錄頁面，您將在該頁面的 URL 中看到類似這樣的內容：

再一次，您的附加 CSS 應該如下所示，您使用自己的更改了類和頁面 ID。

現在我們有了一個沒有任何東西的干淨的白色頁面，我們可以開始構建我們的登錄頁面。 首先，通過 SiteOrigin 和 SiteOrigin Widgets Bundle 安裝名為 Page Builder 的插件（插件 > 添加新 > 搜索插件）

然後轉到您的站點（頁面 > 所有頁面 > 您的頁面）並單擊選項卡Page Builder 。

然後單擊按鈕Add Widget，並選擇SiteOrigin Image 小部件。 新的小部件應出現在下方。 我們將把我們的標誌插入到這個小部件中。 為此，您需要單擊小部件 > 選擇媒體並選擇您的徽標。 如果您尚未上傳您的徽標，請立即上傳。 完成後，單擊設置媒體。

由於我們希望我們的徽標居中，因此單擊Image Alignment並選擇Center 。 準備就緒後，單擊完成。

*注意：如果您去實時預覽並看到您的徽標仍未對齊，原因可能是您的頁面顯示（空）側邊欄。 編輯頁面時嘗試更改右側邊欄中的頁面模板。 如果幸運的話，您的主題有一個沒有側邊欄的預製模板。 是的，所有 ProteusThemes 主題都包含此功能

現在是英雄區的時候了。

我們希望這裡有兩列，所以我們要回到編輯頁面。

單擊添加行，設置比例為 65% – 35% 的兩列行，然後單擊插入。 現在我們做了一個空行，有兩列。

下一步是插入標題和三個要點。 我們單擊左列，使其突出顯示，然後單擊添加小部件，然後添加名為 SiteOrigin 編輯器的小部件。 對我來說，這是最有用的小部件，因為它具有靈活性。

我們單擊新創建的小部件並開始插入內容。

*如果你沒有檢查圖標，你可以下載我的。 圖標的優秀資源也是 IconFinder，但請在使用圖標之前檢查許可證。

讓我們創建一個潛在客戶生成表單。

為此，我們將使用 Contact Form 7 插件。 如果您還沒有安裝和激活它，請立即執行。 安裝 Contact Form 7 插件的過程與我們上面使用 Page Builder 插件的過程相同。

安裝並激活 CF7 插件後，轉到WP Admin > Contact > Add New並輸入聯繫表格的名稱。

由於我們將只收集用戶名和電子郵件，因此您的表單代碼應如下所示：

 <label> 您的姓名（必填）
[文字*你的名字] </label>
<label> 您的電子郵件（必填）
[電子郵件*您的電子郵件] </label>
[提交課程：btn 課程：btn-primary “立即下載免費電子書”]

因為我不想有一個沒有樣式的按鈕，所以我在我的按鈕中插入了兩個額外的預定義類。 就我而言，就是class:btn和class:btn-primary 。 如果您也想這樣做，但又不知道按鈕類的名稱，我相信您會在主題文檔中找到它。

現在轉到第二個選項卡Mail並設置您希望用戶在確認郵件中獲得的所有字段。 在這裡，我們需要包含指向電子書或電子書本身的鏈接，因為這將是用戶向我們提供電子郵件的唯一原因。 完成後，點擊底部的保存。

然後復制頁面頂部藍色背景上彈出的簡碼。 就我而言，簡碼如下所示： [ contact-form-7 title="form" ] 。 然後返回編輯頁面並將其粘貼到右側的 SiteOrigin Editor 小部件中，然後單擊完成。

*我強烈建議您每隔一段時間單擊一次更新，因為您永遠不知道何時會意外關閉瀏覽器。

因為我們希望這個英雄區域高度可見，所以我們要改變背景。 您可以通過單擊 兩列行右上角的扳手圖標，然後單擊編輯行。

然後您需要單擊右側邊欄中的設計並設置背景圖像。 我將使用作者 Raul Petri 在 Unsplash 上創建的圖像。

*不要忘記優化您的圖像以獲得更好的性能。 我的同事 Marko 寫了一篇關於圖像優化的精彩文章。

因為我想讓這個背景圖像全寬，所以我將佈局設置為全寬（佈局>行佈局>全寬）。

如果你去實時預覽，你會看到現在你在深色背景上有一個深色文本。 要更改文本顏色，請轉到包含內容的左側小部件，然後單擊一行中的最後一個圖標，稱為Toolbar Toggle。

現在您可以獲得更多選項，包括文本顏色。 選擇所有文本並將其著色為白色。

我們希望聯繫表單更加突出，因此我們也將更改左側小部件的背景顏色。 再次單擊Widget > Design ，然後將背景顏色設置為白色。

正如您在上面的屏幕截圖中看到的那樣，間距根本不對。 首先，我不喜歡我的表單觸及圖像的上邊框。 要改變這一點，我們應該點擊 英雄行的扳手圖標，然後編輯行。 在右側的側邊欄中，我們單擊Layout並設置填充。 我在45px 90px 45px 90px上設置了填充。 結果如下：

我不喜歡的下一件事是小部件的內部填充。 為了改變這一點，我們轉到那個小部件，我們再次選擇右側邊欄中的佈局並設置內部填充。 我將它們設置為45px 60px 0px 60px 。

如您所見，我們的著陸頁看起來越來越好。 我重複上面的過程，直到所有的填充和間距都達到應有的水平。

當您對結果和著陸在桌面上的外觀感到滿意時，就該查看移動視圖了。

? 這是允許稍微祈禱的時刻。

如果你很幸運（或者如果主題作者已經完成了他的工作），那麼只有幾個空格被破壞了。 要修復它們，請再次訪問 扳手圖標 > 編輯行或編輯小部件 > 佈局並更改移動填充的值。

向我們的登陸頁面添加推薦

既然您知道了 Page Builder 的工作原理，我將在最後一部分加快該過程，我將在其中創建一個推薦部分。 我將在底部添加一個新的單行，添加一個SiteOrigin 編輯器小部件，並在其中放置一張照片、一個報價、推薦書本身和評論者的姓名。 我將使用預定義的標題來獲得不同的字體大小。

如果您不喜歡預定義的字體大小，您可以隨時添加自己的內聯 CSS。 為此，請單擊右上角的文本選項卡（當您在小部件內時）並添加font-size:屬性。 例如，我將默認 h5 字體大小更改為 28px：

例如，我將默認 h5 字體大小更改為 28px：

<h5>Lorem Ipsum dolor site</h5>

這是我們的潛在客戶生成登陸頁面的最終結果：

*專業提示：不要在設計潛在客戶登陸頁面上花費太多時間。 設計只是一個好的登陸頁面的一部分。 專注於其他重要的事情，例如副本和您為用戶提供的實際價值。 內容最重要！

如何培養您的潛在客戶

現在您的目標網頁已完成，您已準備好開始為其吸引流量，這樣您就可以開始獲取有針對性的潛在客戶。 一旦他們加入您的電子郵件列表，您將需要花一些時間培養他們，以便他們能夠轉化為買家和客戶。 以下是一些可以幫助您實現這一目標的技巧。

專注於提供價值

潛在客戶生成登陸頁面通常側重於免費報價。 不言而喻，優惠本身應該是有價值的，但是，在您從訪問者那裡獲得聯繫方式後，您需要繼續提供價值。

通過提供價值，您將與潛在客戶建立信任，並將自己定位為您所在領域的權威。 這將使您的潛在客戶更傾向於向您購買。 這讓我想到了我的下一點，那就是……

實施歡迎序列

歡迎序列是為新潛在客戶提供價值的最佳方式。 一個好的歡迎序列通常包含 5-7 封電子郵件（並且可以更長），這可以進一步培養您的潛在客戶。

您的歡迎順序應詳細說明您的免費報價，並介紹您和您的業務。 您可以分享您的起源故事、您的品牌或公司價值觀、您的使命，並教育您的潛在客戶如何幫助他們。

注意時機

時機就是一切。 弄錯了，您將看不到任何銷售，也不會在您的潛在客戶登陸頁面上獲得良好的投資回報率。 做對了，您的潛在客戶將變成買家和忠誠的品牌大使，這將幫助您獲得更多的潛在客戶和客戶。

因此，您的歡迎序列應該以這樣一種方式來安排時間，即讓您始終牢記您的潛在客戶，而不會惹惱他們並導致他們按下取消訂閱按鈕。

通常建議錯開歡迎順序，以便您新獲得的潛在客戶在 5 或 7 天內每天收到一封來自您的新電子郵件。 但是，如果這對您來說太過分了，您也可以降低頻率並每兩天發送一封電子郵件，這會使您的歡迎序列過長。

這將需要您進行一些嘗試和錯誤，但大多數電子郵件營銷提供商允許您調整歡迎電子郵件的發送頻率。 您可以從每天一封電子郵件開始，並註意您的參與率和退訂率，然後根據需要進行調整。

在您要求出售之前等待

雖然在有人將他們的電子郵件地址或其他聯繫方式交給您後立即要求出售可能很誘人，但在要求出售之前您需要等待。

根據研究，用戶在準備購買之前至少需要與您的品牌接觸 7 次，而您的歡迎序列是確保這 7 個接觸點實際發生的完美方式。

考慮使用稀缺性

當您的歡迎序列接近尾聲時，您應該開始介紹您的報價。 獲得銷售的一種方法是應用稀缺營銷的原則，並在有限的時間或有限的數量內提供報價。 稀缺性之所以有效，是因為它的運作假設是，如果我們知道我們可能無法得到它，我們會立即想要更多的東西。

例如，我們的節能燈泡可能會提供 20% 的折扣，但前提是他們在接下來的 48 小時內購買。 或者您可以提供高端的一對一課程，但僅限於 20 位參與者。

雖然稀缺是一種流行的營銷策略，可以產生很好的效果，但需要注意的是：只有在您的報價確實有限時才使用它。 如果您在有限的時間內或以有限的數量宣傳某些東西，而您的潛在客戶發現這不是真的，您不僅會失去他們的信任，還會損害您的品牌聲譽。

不要放棄

最後，不要放棄。 即使在最初的歡迎序列之後，一些潛在客戶也不會準備購買，但是，沒有理由絕望。 在再次出售之前，只需繼續培養他們並為他們提供價值。

如果您的營銷軟件允許，請考慮標記所有尚未購買的潛在客戶或將它們添加到單獨的列表中，以便您可以將它們包含在下一個促銷活動中並再次推銷您的報價。

恭喜！

您完成了本教程。 現在您知道如何在基本上每個 WordPress 主題上創建一個簡單的登錄頁面。 我希望你有很多線索！

想節省一些時間？

如果您想重新創建登錄頁面，但沒有時間製作，您可以下載我的 .json 文件並將佈局導入您的 Page Builder。 為此，請創建一個新頁面 > 單擊佈局 > 導入/導出，然後導入.json 文件。

*即使您導入了演示內容，您仍然需要安裝所有插件，創建一個新的聯繫表單並隱藏頁面的頁眉和頁腳。

PS：

既然您已經創建了潛在客戶生成登錄頁面，請不要忘記進行一些 A/B 測試。

PP:

如果有不清楚的地方，請隨時在下面的評論中尋求幫助。