如何自由快速地向 WordPress 网站添加弹出窗口

访问网站时，您是否曾看到屏幕上突然显示图像或消息？ 那是网站的弹出窗口或通知窗口。

弹出窗口是一种流行且有效的营销策略，被许多业务运营商和网站所有者使用。 要将这样的弹出窗口添加到 WordPress，您可以使用免费插件使其快速简单。 即使您不是专家，也只需 10 分钟即可按照我们的说明进行操作。

为什么要在商业网站上使用弹出窗口？

下图是一个商业网站的弹出示例。 看起来很棒，不是吗？

弹出窗口不仅令人惊叹（如果您设法设计出一个匹配且有吸引力的），而且还有许多其他好处，例如：

• 宣传重要信息、销售和营销活动，……
• 号召性用语，提高转化率
• 产生潜在客户

使用 Popup Builder 插件向 WordPress 添加弹出窗口

要将弹出窗口添加到您的 WordPress 网站，您可以聘请可靠的网页设计公司或编码员。 然而，为了节省时间和金钱，插件是最好的选择。 在众多弹出式插件中，Popup Builder 可能是最易于使用和最有效的。

它是一个免费插件，可在 wordpress.org 上获得，因此您只需要在仪表板中安装并激活该插件即可。

完成后，请按照以下步骤操作。

第 1 步：选择弹出窗口的类型

现在Popup Builder子菜单将显示在仪表板上。 去那里，单击添加新闻并选择提供的 4 种弹出窗口类型之一。

为了更好地说明，下图是该插件提供的 4 种类型的弹出窗口在前端的显示方式。

选择您想要的类型后，转到下一步。

第 2 步：将内容添加到弹出窗口

首先，为弹出窗口命名以更轻松地管理它。

不同类型的弹窗需要不同的内容。 让我们深入研究每种类型。

将内容添加到 Facebook 弹出窗口

在创建 Facebook 弹出窗口的界面上，您需要填写以下信息：

1. 弹出窗口中显示的消息。 您应该使用号召性用语来鼓励读者互动。 此外，您应该添加图像、横幅，使其更加令人惊叹。
2. 插入 Facebook 网址。
3. 随心所欲地为弹出窗口选择一个布局。 基本上，这些布局并没有太大的不同。 因此，您可以试用它们并选择您最喜欢的一个。
4. 如果需要，请单击此处隐藏共享按钮。

这就是我所拥有的：

将内容添加到图像弹出窗口

在这里你只需要上传图片或插入图片的链接。 此插件支持 JPG、PNG 和 GIF。

这是我自己为我网站的黑色星期五活动制作的漂亮横幅：

将内容添加到 HTML 弹出窗口

将内容添加到 HTML 弹出窗口就像在 WordPress Gutenberg 编辑器中写一篇文章一样。 您可以插入图像、视频、表格、按钮、引号等，或 WordPress 编辑器支持的任何其他内容。 界面有点类似于古腾堡编辑器，所以它非常友好和原生。

这是我在前端的 HTML 弹出窗口：

将内容添加到订阅弹出窗口

在这里，我们有很多内容需要为您的订阅表格填写和自定义。 但是，最需要注意的是表单的字段，例如First name 、 Last name 、 Email ，并自定义它们的Placeholder和Required field 。

之后，向下滚动并根据表单背景选项、输入样式、提交按钮样式自定义表单的显示，使其更加美观并与网站匹配。

值得注意的是，在“订阅成功后”部分，巧妙地选择合适的消息或您希望在用户订阅后显示给他们的信息。 例如，您可以为这些订阅者显示感谢信、优惠券、礼物、礼品卡等。 通过这样做，您可以拖动用户的印象并改善他们的体验。

例如，这是我的订阅电子邮件弹出窗口。 他们提交后，我将展示有关黑色星期五促销活动的通知，敦促客户购物。

转到Popup Builder > 所有订阅者来管理订阅者。

您甚至可以在“时事通讯”选项卡中向订阅者发送电子邮件。

添加内容后，向下滚动。 您将看到许多其他设置选项。 让我们深入研究步骤 4、5、6 中的每个选项。

第三步：设置弹窗的显示位置和条件

设置显示位置

在弹出窗口显示规则部分，我们需要调整弹出窗口将/不会显示的位置。

您可以选择“无处不在”以在每个页面上显示、发布、标记或自定义，或在您想要的特定位置显示它。 您还可以单击 (?) 工具提示以获取更多详细信息。

比如我选择位置为某个页面，选择“是”显示，选择显示页面为“首页” 。 此外，您可以通过选择添加来添加其他位置。

设置显示条件

在弹出事件部分，选择弹出窗口显示的时间（网站加载几秒钟时，用户点击某处时等）。 该插件支持以下显示条件：

• 加载时：从站点加载完成后几秒钟（您可以在“延迟”选项卡中添加秒数）后，弹出窗口将自动显示。

• 按 CC 类设置：允许用户单击某个组件以启用弹出窗口。 该组件将基于它的 ID。 这部分有点复杂，所以你最好仔细阅读文档。

• On click : 类似于Set by CSS class部分，但您不需要使用弹出窗口的 ID 来安装“按钮”来启用它。

相反，如果您在选项部分选择默认，插件将为默认类部分中的弹出窗口创建一个默认类，如下所示。

如果您选择Custom CSS ，请在Custom Class部分填写您自己创建的类。

之后，将弹出窗口的类添加到您想要的组件的 CSS 中。

例如，在这篇文章中，我在附加 CSS 类部分添加了一个按钮和我想要的类。

这是前端的结果：

• 悬停点击：当悬停在一个组件上时，会出现弹出窗口。 您可以执行与“点击”部分相同的操作。

第 4 步：自定义弹出窗口的显示

在第 3 步之后，您就有了一个基本的弹出窗口。 但是，如果您希望它更令人惊叹，请向下滚动到“设计”部分。 在这里，您可以自定义一些组件，如界面、叠加层、背景，使其完美成为您的最爱。

更重要的是，在Dimensions部分，通过选择Custom mode或选择Responsive mode来调整其宽度和长度以使其大小自动匹配其内容。

步骤 5：自定义其他高级设置

这些高级设置允许您以更详细的方式配置显示和与弹出窗口的交互……。

例如，您可以在“关闭设置”部分中选择如何关闭弹出窗口。 有很多方法可以关闭它，例如按Esc ，或添加关闭按钮，……选择一个或多个，这取决于您。

如果您想添加关闭和打开弹出窗口的效果，或调整为一个用户显示的时间，...向下滚动到弹出选项部分。 你只需要点击你想要的选项，你就完成了。

请注意，当使用免费的 Popup Builder 插件时，名为Unlock Option的部分如下图所示为黄色，是专业版的功能。 您必须购买此插件的更多扩展才能使用它们。

最后，在侧边栏上，有一个非常有趣的选项：在网站上添加一个固定按钮以在单击时显示弹出窗口。 这个浮动按钮真的很方便，让人随时随地都能看到。 它的设计也令人愉快而不烦人。

这是网站上的浮动按钮：

或者您可以通过单击禁用来禁用它。

最后，单击“发布”以完成操作。

因此，您在从基本设置到高级设置的 6 个步骤后完成了弹出窗口。 你做得很好！

最后的话

如您所见，向 WordPress 添加弹出窗口并不复杂。 您只需要在自定义其显示时耐心一点，这就是所有艰苦的工作！

此外，还有很多事情可以提高网站的转化率。 如果你想建立一个有效的着陆页，你最好多读一些关于如何创建高转化着陆页，或者如何创建产品页面的文章。

祝你好运！