如何在 WordPress 上添加弹出窗口(2 种简单方法)

已发表: 2022-11-21
Facebook 鸣叫 领英

您想知道如何在 WordPress 上添加弹出窗口吗?

弹出窗口对于收集访问者的联系信息、提供特别优惠和销售、为活动注册用户等非常有用。

如果你有一个 WordPress 网站,你应该认真考虑添加弹出窗口作为你的销售和营销策略的一部分。

什么是弹出窗口?

弹出窗口或弹出框是在您的网站上“弹出”的较小窗口,用于向用户显示值得特别注意的内容。 您可能已经注意到,许多网站会在弹出框中使用一个简单的表格来询问您的电子邮件地址。

MonsterInsights 是最好的 WordPress 分析插件。 免费获取!

弹出窗口很难制作吗?

弹出窗口很容易在 WordPress 网站上制作,即使对于技术经验很少的人也是如此。 您可以使用 WordPress 插件制作弹出窗口、收集电子邮件地址,甚至只需点击几下即可将这些电子邮件自动添加到您的电子邮件列表中。

在这篇文章的其余部分,我们将向您展示两种不同的方式来构建弹出窗口,使用 WordPress 上两个最流行的弹出窗口构建器。

此外,我们将使用不同的插件来创建潜在客户捕获表单。 当我们创建弹出式广告系列时,我们会将表单嵌入到我们的弹出式窗口中。

让我们开始吧!

方法 1:使用 OptinMonster 和 WPForms 构建 WordPress 弹出窗口

OptinMonster 弹出窗口生成器徽标

OptinMonster 是使用最广泛的 WordPress 弹出式构建插件,活跃安装量超过一百万。 顾名思义,它是为制作选择加入表单和弹出框而设计的。

选择加入表单只是一种要求用户“选择加入”以接收电子邮件或营销信息的表单。 但是,当然,弹出窗口的用途远不止于此。

这个插件使初学者和专家都可以轻松地为各种目的创建漂亮、极具吸引力的弹出窗口。

除了易于使用之外,OptinMonster 还提供以下强大的功能:

  • 拖放式弹出窗口构建器让初学者可以设计自定义弹出窗口
  • 超过 400 个模板和 6 种活动类型可满足任何需求
  • 许多不同的触发选项可在您需要的时间和地点显示弹出窗口
  • Exit-Intent、InactivitySensor 和其他技术功能可提高转化率
  • 适用于任何网站,而不仅仅是 WordPress(不需要插件)

OptinMonster 确实能够创建一个简单的选择加入表单。 但是,对于具有更多设计选项的更强大的表单,我们建议使用专用的表单构建器插件。

幸运的是,OptinMonster 让您只需点击几下就可以将表单直接添加到它们的弹出窗口中。 您无需了解任何编程或 Web 开发即可使用以下方法添加表单。

在这个例子中,我们将使用 WPForms,这是您可以获得的最好的 WordPress 表单插件。

WPForms - 制作弹出窗口的最佳表单插件

当您安装这两个插件时,WPForms 会自动连接 OptinMonster。 这使得构建包含自定义表单的具有专业外观的弹出窗口变得异常容易。

让我们从安装 WPForms 开始。

在 WordPress 上安装 WPForms

要在您的站点上安装 WPForms,请转到 WPForms 并购买许可证。 获取WPForms Pro以访问 500 多个模板、支付处理、调查和其他高级功能。

不过,您可以使用所提供的任何计划为弹出窗口制作一个表格。

获得许可证后,通过单击下载 WPForms从您的帐户下载 WPForms 插件。 当您在该屏幕上时,您还可以通过单击License Key 旁边的剪贴板图标来复制您的许可证密钥

WPForms 帐户下载插件

现在,登录您的 WordPress 网站并安装插件。 您将首先单击插件 » 添加新插件。 然后,单击上传插件按钮并选择您下载的 WPForms 文件。

WPForms 上传安装插件

此时,您可以点击安装完成WPForms的安装和激活。 插件激活后,转到WPForms » 设置 » 常规并输入您之前复制的许可证密钥。 单击“验证密钥”按钮,一切就绪!

WPForms 验证许可证密钥

在 WPForms 中制作潜在客户捕获表格

要开始在 WPForms 中制作新表单,请单击 WordPress 仪表板中的WPForms » 添加新表单。 系统将提示您选择一个模板作为起点。

但首先,在屏幕顶部的“命名您的表单”框中键入适当的表单名称。 我们将我们的示例表单命名为Email Lead Capture – Newsletter Signup

WPForms 新表单标题和模板

如果您刚刚起步,我们建议您使用模板。 让我们通过单击使用模板来选择时事通讯注册表单模板。

好的,这是我们的注册表单模板。 如您所见,这是一个简单的表单,只要求提供姓名和电子邮件地址。

WPForms 编辑器注册表单

如果您对默认设置满意,则可以单击“立即保存”。 但是,让我们进行一项更改以增加访问者完成我们的表单的机会。

单击“名称”字段区域,将显示“字段选项”框。 现在,让我们将 Name 字段设置为可选,这样用户就不必填写该部分来提交表单。 默认情况下它是必需的,因此只需单击“关闭”必填开关即可将此字段设置为可选。

WPForms 自定义字段注册表单

现在您可以单击“保存”以保存此表单以备后用。

此时您将创建一个新的弹出窗口,然后将您保存的表单添加到该弹出窗口中。 因此,下一步是安装 WordPress 弹出插件。

在 WordPress 上安装 OptinMonster

在这一步中,我们将安装一个免费版本的 OptinMonster 插件,以在 WordPress 上构建我们的弹出窗口。

如果您需要更多帮助,OptinMonster 的基本计划附带一个Done-For-You Setup 这意味着 OptinMonster 转换专家将帮助您设置第一个弹出式广告系列,以确保您的发布取得成功!

要获得免费的 OptinMonster 插件,请登录 WordPress 并在仪表板菜单中单击插件 » 添加新插件

WordPress 添加插件菜单

现在,在搜索字段中输入optinmonster并输入。 在搜索结果中找到 OptinMonster,然后单击立即安装按钮。

激活 OptinMonster

安装完成后,单击“激活”,一切就完成了!

使用 OptinMonster 创建新的弹出广告系列

现在您已经安装并激活了 OptinMonster,是时候制作一个弹出窗口了。

首先,单击OptinMonster » 仪表板以查看显示您选择加入活动统计信息的概览屏幕。 在这里,您还可以开始构建一个新的弹出窗口。 只需在弹出式磁贴中单击新建

OptinMonster 创建新弹出窗口

之后,您将看到一个新屏幕,您需要在其中为弹出框选择一个模板。

对于此示例,我们将选择 Entice 模板。 您可以先预览模板,以确保它符合您的需要。 决定弹出模板后,单击使用模板

OptinMonster 选择模板

现在,系统会要求您为弹出广告活动命名。 我们将此示例称为Newsletter Signup 。 在框中输入您的活动名称,然后点击开始构建

OptinMonster 弹出广告活动名称

当您单击该按钮时,您将打开 OptinMonster 的拖放编辑器,您的模板已准备好进行编辑。 现在,您只需将WPForms 块从左侧拖动到弹出窗口中,即可放置新的潜在客户捕获表单的任何位置。

OptinMonster Add Form to Popup

放置 WPForms 块后,将自动打开一个下拉列表,您可以在其中选择要在弹出窗口中显示的表单。 因此,您将在此处选择您在 WPForms 中创建的表单的名称: Email Lead Capture – Newsletter Signup

删除多余的按钮

现在,保存弹出窗口之前的最后一步。 由于 WPForms 表单包含一个提交按钮,您应该从 OptinMonster 模板中删除这些按钮。 为此,只需将光标放在块内,然后单击垃圾桶图标即可删除。

OptinMonster 删除块

单击保存按钮保存弹出窗口和表单,然后单击X关闭 OptinMonster 编辑器。 您将返回到 WordPress 仪表板和 OptinMonster活动输出设置屏幕。

这是您决定在何处以及何时在您的 WordPress 网站上显示弹出窗口的地方。 默认情况下,弹出广告活动会在每个页面上显示给每个访问者。

但是,您可以将弹出窗口设置为仅显示在单个页面上,仅加载帖子,或仅显示给登录用户,仅举几个例子。

对于此示例,您可以保留输出设置不变。 但是,要显示弹出窗口,请转到Status下拉菜单并将状态更改为Published 。 然后点击保存更改

OptinMonster 在 WordPress 上添加弹出窗口

好的,就是这样! 您的新弹出窗口和潜在客户捕获表单现在将显示在您网站的每个页面上,以开始收集新订阅者。

这是我们发布后的示例:

OptinMonster 预览发布弹出窗口

在您的弹出广告活动将站点访问者转换为订阅者后,您将通过转到 WordPress 仪表板中的WPForms » 条目找到他们的联系信息。

WPForms Optin 弹出条目

WPForms 的插件允许您自动将新订阅者添加到 Sendinblue、Constant Contact 和其他流行电子邮件提供商的电子邮件列表中。 这使您的营销工作流程自动化,使与订阅者的沟通变得非常高效。

这就是我们创建弹出窗口的第一种方法。 让我们直接进入在 WordPress 上添加弹出窗口的第二种方法……。

方法 2:使用 Popup Maker 和 WPForms 在 WordPress 上添加弹出窗口

Popup Maker WordPress 插件

Popup Maker 拥有超过 700,000 名活跃用户,是 WordPress.org 上第二受欢迎的 WordPress 弹出插件。

在 WordPress 上安装 Popup Maker

首先,登录到您的 WordPress 站点并单击插件 » 添加新插件。 在搜索栏中输入popup maker并输入。

WordPress 插件搜索弹出窗口制作器

在搜索结果中找到 Popup Maker,然后单击立即安装按钮。

Popup Maker WordPress 插件安装

插件安装后,单击激活即可开始使用! 您的 WordPress 仪表板现在应该包含 Popup Maker 菜单。 单击Popup Maker » Create Popup开始构建新的弹出窗口。

创建一个新的弹出窗口

Popup Maker 编辑器屏幕看起来与 WordPress 页面编辑器非常相似。 在顶部字段中输入弹出窗口的名称。 如果需要,您还可以在第二个字段中输入将出现在弹出窗口中的标题。

弹出式制作器编辑器

现在,您需要做的就是单击“添加表单”按钮。 将出现一个带有下拉列表的弹出框,您可以在其中选择您之前在 WPForms 中创建的表单。

Popup Maker 添加 WPForms 表单

继续并选择该表单,然后单击添加表单。 这会将您选择的表单的 WPForms 简码添加到弹出窗口中。

Popup Maker WPForms简码

好的,现在在发布之前,您需要设置触发器来定义弹出窗口在您网站上显示的时间和位置。

向下滚动到弹出设置框并单击添加新触发器按钮。

弹出窗口制作器添加触发器

在这里,您可以选择是在延迟时间后、单击时还是在提交表单后显示弹出窗口。 让我们选择时间延迟

弹出式制作器延时触发器

单击“添加”按钮,Popup Maker 将询问应该延迟多长时间(以毫秒为单位)。 默认值为 500,即二分之一秒。 您可以保持原样,也可以根据需要进行更改。 然后再次单击添加

WordPress 上的弹出时间延迟(以毫秒为单位)

设置弹出窗口的下一步是选择它在您网站上的显示位置、显示对象等。 单击定位选项卡。

弹出式制作器定位

此设置的下拉列表可让您选择将显示弹出窗口的特定页面。 Popup Maker 还有许多过滤器,因此您可以根据类别、标签、层次结构等在页面上显示它。

下一个设置提供了几个显示选项。 从图块中选择 4 个显示选项之一,然后单击上面的链接进行外观大小动画声音位置高级设置的调整。

弹出窗口制作器显示设置

好吧,我们快完成了! 单击“设置”框中的“关闭”选项卡。 现在,您需要告诉您的弹出窗口在有人提交注册表单后关闭。 单击顶部的表单提交,然后选中关闭表单提交复选框。

弹出窗口制作器在表单提交时关闭

好的,您现在可以将其他所有内容保留为默认设置。 让我们通过单击右侧栏中的发布按钮来保存。

现在,去访问您的网站以查看您的实时弹出窗口!

Popup Maker 在 WordPress 示例中添加弹出窗口

与我们的第一种方法一样,要查看新订阅者,您必须转到WPForms » 条目以查看注册人员的联系信息。

虽然 OptinMonster 总体上是一个更强大的工具,具有更多选项、内置模板和扩展,但 WP Popup Maker 是一个简单的替代品,适用于基本活动。

这就是我们关于将弹出窗口添加到 WordPress 网站的两种简单方法的教程的全部内容。 您还学习了如何使用 WPForms 创建一个选择加入表单来收集电子邮件线索。

使用 MonsterInsights 跟踪表单转换

我们研究了如何在 WPForms条目屏幕中查看表单条目。 但是,这并不能为您提供有关表单执行情况的太多信息。

要获得有关表单性能的更多详细信息,您需要像 MonsterInsights 这样的工具,这是适用于 Google Analytics 的最佳 WordPress 插件。

MonsterInsights 报告屏幕

MonsterInsights 提供了一个表单插件,让您可以查看用户如何与您网站上的表单进行交互,包括展示次数、转化次数和每个表单的转化率。 如果您的网站有多个表单或弹出窗口需要跟踪,这就很棒了。

安装 MonsterInsights 并激活表单跟踪后,您将通过转到Insights » Reports并单击Forms选项卡找到 Forms 报告。

用于跟踪表单转换的 MonsterInsights 插件

现在,您可以在 WordPress 的一个页面上快速高效地查看所有表单、印象和转化。 确定您的表单和弹出窗口是否正确显示,以及它们是否转换良好或需要改进。

MonsterInsights 的跟踪可以自动与几乎任何 WordPress 表单插件一起工作,包括 WPForms、Gravity Forms、Formidable Forms、Ninja Forms 等。

需要更多关于开始使用 MonsterInsights 的信息? 查看这篇文章,了解有关如何安装和设置 MonsterInsights 的深入教程。

如果您喜欢了解如何向您的网站添加弹出窗口,您可能想阅读这篇关于如何创建电子邮件通讯的文章。

不要忘记在 Twitter、Facebook 和 YouTube 上关注我们,以获取更多有用的评论、教程和 Google Analytics 提示。