如何在任何 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:

如果有不清楚的地方，请随时在下面的评论中寻求帮助。