在 WooCommerce 中创建 Elementor 弹出窗口

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

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

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

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

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

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

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

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

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

一旦你点击添加新的弹出窗口（这是不言自明），您会被要求给它一个名称，然后选择从预制的前一个模板amp莱显示。 各种模板可用于多种用途； 有些适用于公告，有些适用于促销折扣，有些适用于鼓励用户注册某些东西。 甚至有前amp莱的警告cookie的使用或其他GDPR通知用户。 找到喜欢的内容后，单击它以查看更大的预览，然后按“插入”按钮。

单击此按钮后，您将被带到 WordPress 后端中的弹出式构建器。

如果您过去曾与 Elementor 合作过，那么您会对界面、选项以及一切为您安排的方式感到宾至如归。 它本质上与在 WordPress 中创建 Elementor 页面模板的过程相同。

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

弹出窗口的配置

 这是您应该看到弹出窗口的预览 - 空白板或您选择的模板。

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

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

• 模态弹出窗口是一种模态窗口。
• 幻灯片、通知栏等。

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

“设置”选项卡上提供以下选项：

• 更改图像的高度和宽度。
• 更改对象的垂直或水平方向（为前amp嘞，你可以把它固定在顶部或底部创建一个通知栏）
• 做出决定是否或不使用叠加（这可以让你有前amp文件，为灰色的背景时，弹出激活）
• 禁用浏览器上的关闭按钮。
• 包括入口动画。

您可以在“样式”选项卡上执行以下操作：

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

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

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

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

位置为窗口右下角时的样子

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

您还可以使用 Elementor 中的可视化构建器创建弹出窗口

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

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

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

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

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

发布首选项

当您对自己的创作感到满意时，您就会想要与全世界分享。 按下发布按钮后，您将看到一系列问题。 举例说明：

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

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

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

按照您希望的方式完成设置，然后单击“保存并关闭”。 你会被带到作为amp的弹出式窗口将是什么样子单击此按钮后乐。

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

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

我们回到流程的 ADD NEW POPUP 阶段，在这里我们可以指定标题并再次选择模板。

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

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

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

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

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

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

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

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

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