如何使用 Mailpoet 电子邮件 opt-in 表单创建 Elementor 登录页面（免费！）

需要帮助创建 Elementor 登录页面吗？

Elementor 凭借其可视化的拖放编辑器，为您提供了创建美观、有效的登录页面所需的所有工具，而无需编写一行代码。

但将这些工具组合在一起来创造最终产品可能会让人感到有点不知所措，对吧？

您可能会有以下疑问：

我的登陆页面上应该包含哪些内容？
我应该如何在 Elementor 中设置一切？
我如何添加电子邮件选择加入表单来扩充我的列表？

在这篇文章中，逐步指导您完成构建 Elementor 登录页面的过程，以回答所有这些问题以及更多问题。

首先对所有着陆页所需的元素进行基本讨论（Elementor 或其他）。然后，展示如何使用Elementor 页面构建器的免费版本设置所有内容，包括添加由 MailPoet 提供支持的电子邮件选择加入表单。

最后，你将能够构建出大致如下所示的东西：

Elementor 登陆页面的四个关键元素

好的，登陆页面是您的产品或服务所独有的，所以，并不是想说“您的登陆页面需要所有这些元素，而不需要其他任何东西”。

然而，如果必须归纳出大多数着陆页应该包含的高级元素，那就是以下四个元素：

英雄部分
特点/优点部分
关于部分
电子邮件选择加入表格

下面，通过 MailPoet 登陆页面中的示例来看一下。

1. 英雄部分

您的英雄部分是出现在首屏上方的突出内容。基本上，这是访问者到达您的着陆页时看到的第一件事。

英雄版块不包含大量内容——你永远不应该有一大堆文字。相反，大多数英雄版块的基本设置是：

标题——这可以吸引访问者的注意力，并用一句话概括您的产品/服务的主要优势。
副标题——对标题进行扩展，但保持内容简短。
CTA——这些是您希望访客采取的行动。通常，CTA 不应超过两个。
图像/视频/插图——除了文本，通常还会包含某种类型的图像、视频或插图。

2. 特点/优点部分

接下来，您有功能/优势部分，它扩展了您的产品/服务。

基本上，在这里您可以展示英雄部分中支持标题的所有内容。

3. 关于部分

接下来，您可以提供一些关于您自己或您公司的简要信息。这让您有机会与访客建立联系并建立信任：

相关文章：10 大电子邮件营销联盟计划

4. Email opt-in

大多数着陆页底部附近都有一个电子邮件选择加入表单。如果人们足够关心您的着陆页并愿意向下滚动，他们可能对您所说的内容感兴趣。

通过获取他们的电子邮件地址，您将有机会在将来与他们建立联系：

您可能需要其他元素——发挥创意

再次强调，上述四个元素不一定是您应该包含的唯一元素。它们为您的着陆页提供了坚实的基础，但您还需要考虑是否应该包含以下部分：

您的投资组合
来自满意客户的推荐以增加社会证明
您曾合作过的大品牌的徽标（也用于社会证明）
定价表
您最近的博客文章列表（如果内容营销在您的战略中发挥重要作用）
额外的行动呼吁

在下面的教程中，向您展示如何使用这四个关键元素设置您的登录页面。

然而，当您完成时，您应该拥有根据需要添加更多部分所需的所有技能。

如何构建 Elementor 登陆页面：分步指南

现在，进入更具可操作性的部分——学习如何使用WordPress.org 上的 Elementor 免费版本创建 Elementor 登录页面了。

除了向您展示技术步骤之外，还会为您的着陆页的内容和设计提供一些建议。

1. 选择画布

首先，您需要为 Elementor 登录页面选择基本画布。

您有两个选择：

您可以创建一个 100% 空白的画布。您将从空白开始，没有任何活动 WordPress 主题的痕迹。
您可以保留主题的页眉和页脚，但可以自由控制其间的所有内容，不受侧边栏或容器的干扰。

如果您希望登录页面与网站的其他部分无缝衔接（例如 MailPoet 主页），则通常需要使用第二种方法。但对于独立页面，您需要使用第一种选项。

做出此决定：

创建一个常规的 WordPress 页面来容纳您的登录页面。
在文档侧栏中找到“页面属性”部分。
使用模板下拉菜单选择您的画布。

它包含两个模板（但您的主题可能还包含其自己的附加模板）：

Elementor Canvas ——100% 空白画布，没有主题元素。
Elementor 全宽– 这仍然包括主题的页眉/页脚。

对于本教程，选择了Elementor Canvas模板，以使本教程与主题无关。

然后，单击使用 Elementor 编辑以启动 Elementor 界面。

2. 选择你的设计方法

有了画布后，您就可以选择设计方法。

如果您已做好准备，您可以从头开始设计整个登陆页面。

但是，如果这是您的第一个登陆页面，您可能会觉得必须亲自做所有事情有点难以承受。

在这种情况下，强烈建议您查看模板，您可以通过单击文件夹图标来访问模板。

您可以仔细查看页面模板，看看是否能够找到适合您需求的完整登录页面模板。

但是，更好的选择通常是转到“块模板”选项卡。块模板是着陆页特定部分的部分模板。然后，您可以像拼乐高积木一样将它们拼凑在一起，混合搭配以构建完美的设计。

块模板也很有用，因为它们的针对性不那么强，这使得它们更容易适应不同的情况。

如果您使用下拉过滤器，您会发现上面讨论的大多数基础着陆页部分的预制块，其中包括：

英雄
特征
关于

因此，您无需从头开始构建，只需弹出其中一个块模板，然后根据需要进行编辑即可。

3. 设计你的英雄部分

现在，是时候深入研究构建登陆页面的技术部分了。

一般来说，着陆页的每个“部分”在 Elementor 中都应该是自己的部分。

首先，点击加号图标。然后，对于英雄部分，你通常需要创建一个两列部分：

从那里，您可以在列内添加内容小部件。

在左栏中，您可以添加：

标题的H1标题小部件。将其保持在一个句子内。它应该描述您提供的内容的核心。对于 MailPoet 来说，那就是“为 WordPress 驱动的网站提供更好的电子邮件”。
一个 H2 或 H3标题小部件，用于您的副标题。最多将其保持在一两句话。您可以扩展标题的内容。对于 MailPoet 来说，标题是“发送每次都能到达收件箱的精美电子邮件，并培养忠诚的订阅者。”
为您的 CTA 设置一个或多个按钮小部件。如果您使用多个 CTA 按钮，则应为主要 CTA 赋予更醒目的颜色。

然后，您可以在右栏中添加图像或视频小部件。

最后，您可以打开“部分”的设置来为整个英雄部分添加背景：

4. 设计功能/优点部分

接下来，转到功能/优点部分。

对于紧凑选项，您可以添加一个包含三列或四列的新部分。然后，您可以使用每列中的图标框小部件列出每个功能：

这种图标框方法是您在登陆页面上会看到的一种常见策略。

如果您想更详细地介绍每个功能，您可以为每个功能创建单独的两列部分，就像 MailPoet 主页一样。

在一侧添加文本，在另一侧添加图片。为了增加趣味性，您可以交替显示文本，如下所示：

这里要记住的一点是，您不应该只列出功能本身，还应该展示每个功能如何让您的访客受益。

5. 设计“关于”部分

您在设计“关于”部分时拥有很大的灵活性。对于样式/布局没有硬性规定——这是增加一些个性并与访客建立联系的好机会。

这里也是添加您自己（或您的团队）照片的绝佳位置。或者，您可以添加视频 – 一切由您决定！

6. 添加电子邮件订阅表格

虽然 Elementor 的免费版本包含构建功能性登录页面所需的一切，但除非您购买 Elementor Pro，否则 Elementor 不包含可帮助您收集电子邮件地址和增加订阅者列表的工具。

要免费将电子邮件选择加入表单添加到您的 Elementor 登录页面，您可以使用免费的 MailPoet 插件。

MailPoet 不仅可以轻松地向 Elementor 添加电子邮件选择加入，还可以帮助您直接从 WordPress 仪表板发送手动或自动新闻通讯。

首先，您需要离开 Elementor 界面一秒钟并在您的网站上安装免费的 MailPoet 插件。然后，转到MailPoet选项卡并完成简短的设置向导。

从那里，转到MailPoet → 表单 → 添加新表单以为您的登录页面创建选择加入表单。

如果您想添加新字段，可以点击加号图标。例如，如果您想收集访客的姓名。

要配置表单并使其样式与目标网页相匹配，您可以使用侧栏中的表单设置：

完成后，保存表单。然后：

返回 Elementor 界面。
保存更改。
刷新界面。

刷新 Elementor 后，您应该会看到一个新的MailPoet 3小部件，您可以使用它将您的电子邮件选择加入表单添加到您的登录页面。

在小部件的设置中，您将能够选择刚刚创建的表单。然后，您应该在 Elementor 中看到表单的实时预览：

要进一步配置表单的行为和间距，您可以转到小部件设置的“高级”选项卡。

如果需要，您还可以使用其他 Elementor 小部件添加一些其他内容，例如表单上方的标题。

就这样！您刚刚使用 Elementor 创建了一个登录页面。

立即构建您自己的 Elementor 登陆页面！

只需使用 Elementor 的免费版本，您就可以创建一个有吸引力且有效的 WordPress 登录页面。

如果您愿意，可以从头开始构建所有内容。或者，如果这让您感到有点不知所措，学习如何使用 Elementor 模板可以让这个过程变得容易得多。

一个好的折衷方案是使用 Elementor 的块模板。您可以根据需要混合搭配模板，它们为您添加自己的内容和样式提供了良好的基础。

但是，Elementor 免费版无法让您在登录页面添加电子邮件选择加入表单。

要使用您的登录页面来扩大您的电子邮件列表，您可以将 Elementor 与免费的 MailPoet 插件配对，这可以帮助您直接从 WordPress 仪表板扩大、管理和发送电子邮件列表。

您可以创建自己的自定义电子邮件选择加入表单，然后使用专用小部件将其嵌入到 Elementor 设计中。