在 WooCommerce 中创建 Elementor 弹出窗口

我们都是 WooCommerce 的忠实粉丝。设置和定制非常简单。该软件包中包含的功能使创建和管理动态且强大的电子商务商店变得简单。

然而，创建一个成功的电子商务页面不仅仅是添加流行产品。所有页面也必须具有视觉吸引力。您的网站越具有视觉吸引力和用户友好性，就越有可能吸引更多客户。

• 弹出窗口的配置
• 您还可以使用 Elementor 中的视觉生成器创建弹出窗口
• 发布首选项

尽管 WooCommerce 在您构建网站时为您创建购物车和结帐页面，但 Elementor 通过自定义它们使它们更具吸引力。

您可以选择重新设计它们或从头开始。您可以对网站上的所有其他页面重复此过程。

通过创建热情的“感谢”页面并更新“我的帐户”和“服务条款”页面，您可以赢得客户的青睐。

Elementor 的拖放功能与本教程相结合，将确保您在创建页面时拥有无障碍的体验。

设置 wooCommerce 商店后，您可能希望使其对访客和客户更具吸引力。添加弹出窗口会给用户带来另一种印象，并产生留在您商店的新愿望。

 要创建弹出窗口，请转到菜单栏中的模板 > 弹出窗口。您将看到所有弹出窗口的列表，如果您尚未创建弹出窗口，您将看到类似于以下内容的内容：

单击“添加新弹出窗口”（这是非常不言自明的）后，系统会要求您为其命名，然后从显示的amp示例中选择一个模板。多种模板可供多种用途使用；有些适合公告，有些适合促销折扣，有些适合鼓励用户注册某些东西。甚至还有警告用户 cookie 使用或其他 GDPR 通知的amp。找到喜欢的内容后，请单击它以查看更大的预览，然后按“插入”按钮。

单击此按钮后，您将进入 WordPress 后端的弹出窗口生成器。

如果您过去使用过 Elementor，您会对界面、选项以及一切为您布置的方式感到宾至如归。这与在 WordPress 中创建 Elementor 页面模板的过程本质上相同。

屏幕右侧是主画布，其中显示您当前正在处理的内容的预览。您可以通过选择每个元素并选择“编辑”>“编辑元素”来单独编辑和自定义每个元素。完成后，您将看到左侧边栏中显示的控件和首选项，以及发布您的作品的选项。

弹出窗口的配置

 此时您应该看到弹出窗口的预览 - 要么是空白板，要么是您选择的模板。

弹出窗口设置默认始终打开，允许您自定义弹出画布本身的功能。它们如下：

• 这是您最想花费时间的地方，因为您可以在其中创建不同类型的弹出窗口。也就是说，通过调整这些设置，你将能够做出以下效果：

• 模态弹出窗口是模态窗口的一种。
• 滑入式、通知栏等。

此外，您还可以自定义其他几个重要设置。

设置选项上提供以下选项：

• 更改图像的高度和宽度。
• 更改对象的垂直或水平方向（amp，您可以将其固定到顶部或底部以创建通知栏）
• 决定是否使用覆盖（amp，这可以让您在弹出窗口处于活动状态时使背景变灰）
• 禁用浏览器上的关闭按钮。
• 包括入口动画。

“样式”上执行以下操作：

• 您可以更改背景颜色、使其成为渐变或使用图像作为背景。
• 如果启用了覆盖，请对其进行配置。
• 如果启用了关闭按钮，则必须对其进行配置。

最后，“高级”选项卡包含一些杂项导入设置，允许您执行以下操作：

• 显示关闭按钮或让弹出窗口在一段时间后自动关闭。
• 通过单击覆盖层或按退出键，您可以防止窗口关闭。

• 禁用向下滚动页面的功能。
• 避免多个弹出窗口（如果您将多个弹出窗口定位到同一页面，这将防止您的访问者感到烦恼）。

“位置”为窗口右下角时的外观

看看弹出窗口现在是如何永久固定在右下角的。将滚动触发器与入口动画结合使用，您可以实现漂亮、谨慎的滑入效果。

您还可以使用 Elementor 中的视觉生成器创建弹出窗口

一旦完成基本的弹出窗口设置，您就可以通过将元素拖放到可视拖放界面中来开始设计弹出窗口的实际内容。

您可以使用任何您想要的 Elementor 小部件，这使您可以对最终设计进行大量控制。表单小部件是您绝对必须包含的唯一内容，因为它是唯一允许您创建电子邮件选择加入表单的小部件。

使用表单小部件，您可以完全控制要提供的字段以及提交按钮的文本和外观。amp：

除此之外，我强烈建议您熟悉 Elementor 的所有小部件和设计选项。

如前所述，您对网站的外观有很大的控制权，并且您还可以访问一些有用的小部件，这些小部件可以帮助您提高转化率。

发布首选项

当您对自己创建的内容感到满意时，您会想与世界分享。按下“发布”按钮后，您将看到一系列问题。举例来说：

是否可以指定您希望弹出窗口出现的条件？您可以选择在搜索结果中包含或排除哪些页面。您可以拥有任意数量的条件。

那么，导致弹出窗口出现的事件是什么？您可以选择是否在页面加载、滚动或用户滚动到特定元素时立即显示弹出窗口，以及其他可能性。所有这些选项都有其设置，允许完全自定义。

最后但并非最不重要的一点是，您将看到一些高级规则，例如仅向回访者显示弹出窗口，仅显示弹出窗口一定次数，或者仅当访问者从特定位置引用到您的网站时才显示弹出窗口网址。还有一些。这些选项可以显着改善弹出窗口的用户体验，使您能够以真正的完整性和对用户的考虑来设计它。

按照您想要的方式完成设置，然后单击“保存并关闭”。单击此按钮后，您将看到弹出窗口的amp内容。

弹出窗口可以自定义，并且可以向其中添加动态内容。

让事情更上一层楼，好吗？到目前为止，我们已经选择了一个模板并调整了一两次，仅此而已。考虑我们想要进一步自定义弹出窗口的场景。

我们回到该过程的“添加新弹出窗口”阶段，在这里我们可以指定标题并再次选择模板。

之后，我们可以选择它，对基本设置进行必要的更改，然后再次点击“发布”。

好吧，事情开始变得有趣了。我们可以使用 Elementor 从 WordPress 安装中获取动态数据，并将其插入到弹出窗口中。我们可以包含用户名、页面标题等信息。

考虑以下场景：我们正在运行 WooCommerce，我们希望通知用户他们当前正在查看的特定产品有折扣。首先，从模板中选择一段文本，然后单击侧栏中的“动态”：

我们有多种选项可供选择，包括帖子本身的信息、整个网站的信息、媒体信息、作者信息，甚至 WooCommerce 信息。我们将选择一个产品标题，它将作为我们选择的结果添加到我们的文本内容块中。

假设未正确检索数据库详细信息。在这种情况下，可以在文本之前指定一些文本，在文本之后指定一些文本，以及后备文本（如果未正确检索数据库详细信息）。

因此，让我们为按钮复制此过程，该按钮将显示产品的价格。我们可以将前面的文字表述为“立即购买”，以向我们提供令人信服的行动号召：

我们甚至可以更进一步，使用产品图像作为弹出窗口本身的背景。

当我们按下 PUBLISH 时，我们会再次看到发布设置，允许我们指定只希望弹出窗口出现在 WooCommerce 页面上。我们将计时器设置为 15 秒不活动作为触发器。最终的结果是这样的：

尽管设计还可以改进，但您可以看到我们正在显示产品名称、价格和产品图像作为弹出窗口的背景。杰出的！