如何使用 Divi 创建 WooCommerce Lucky Wheel Optin 表单

每周，我们都会为您提供新的免费 Divi 布局包，您可以将其用于下一个项目。 对于其中一个布局包，我们还分享了一个用例，可帮助您将网站提升到一个新的水平。

本周，作为我们正在进行的 Divi 设计计划的一部分，我们将向您展示如何使用 Divi 和 WP Optin Wheel 插件创建 WooCommerce 幸运轮选择表单。 本教程有望帮助您提高 optin 表单的转换率。 幸运轮选择表单的游戏化功能将允许您与访问者互动，并用他们可以在网上购买时使用的折扣代码奖励他们。

让我们开始吧！

预览

在我们深入学习本教程之前，让我们快速浏览一下不同屏幕尺寸下的结果。

安装 WooCommerce

搜索插件并安装

如果您还没有安装 WooCommerce，您需要做的第一件事就是在您的 WordPress 网站上安装 WooCommerce。 我们还假设您已经在您正在使用的 Divi 网站上设置了硬件商店布局包。

转到您的插件并搜索 WooCommerce。 找到后，单击“立即安装”按钮。

启用

确保立即激活 WooCommerce 插件。

设置 WooCommerce

然后，WooCommerce 会自动将您重定向到其设置表单。 在这里，您必须填写所有详细信息，以准备您的商店上线。 完成此过程后，所有需要的 WooCommerce 页面都将自动添加到您的网站。

安装 WP Optin Wheel 插件

搜索插件并安装

为了创建幸运轮选择表单，我们将使用一个名为 WP Optin Wheel 的免费游戏化插件。 返回您的插件并搜索 WP Optin Wheel 插件。 然后，单击“立即安装”按钮。

启用

继续激活插件。

将产品添加到 WooCommerce

添加新产品

如果您已经在运营电子商务网站，则可以跳过此部分。 但是，如果您只是尝试一下，我们建议您向 WooCommerce 插件添加一些产品。 这将帮助您在之后测试幸运轮选择表单。 要添加新产品，请转到产品 > 添加新产品。

添加产品详细信息

填写所有产品详细信息。 这包括但不限于产品名称、描述、特色图片、价格和类别。 添加完这些详细信息后，发布产品页面。

对每个产品重复

对要添加到网站的每一种产品重复相同的步骤。

向 WooCommerce 添加优惠券

前往优惠券

现在是添加优惠券的时候了。 在这篇文章的后面，我们将使用我们在幸运轮选择表单中创建的优惠券。 转到您的WordPress 仪表板 > WooCommerce > 优惠券。 到达那里后，继续并开始创建您的第一张优惠券。

添加优惠券 #1：5% 的折扣

一般的

在 12 个切片的幸运轮中，您可以决定多少个切片包含奖品。 例如，您可以提供 4 个奖品，并为每个奖品创建不同的优惠券。 您还可以将优惠券用于车轮上的多个位置。 创建第一张优惠券后，请继续并在页面顶部输入优惠券代码。 然后，修改常规设置：

• 折扣类型：百分比折扣
• 优惠券金额：5
• 优惠券到期日：输入选择的日期

使用限制

继续切换到使用限制选项卡。 在这里，您可以决定是否有与优惠券相关的最低和最高支出。 您还可以勾选以下框：

• 如果优惠券不能与其他优惠券一起使用，请选中此框。
• 如果优惠券不适用于特价商品，请选中此框。 每件商品的优惠券仅在商品未打折时有效。 每个购物车的优惠券只有在购物车中有未销售的商品时才有效。

对其他 3 张优惠券重复步骤

按照上述相同步骤创建任意数量的优惠券。 您不仅限于提供百分比折扣。 您还可以创建提供固定购物车或产品折扣的优惠券，并将其包含在幸运轮中。

创建幸运轮选择表单

转到插件设置

现在我们已经完成了使幸运轮选择表单工作的所有必要步骤，我们可以开始创建一个！ 转到您的 WordPress仪表板 > WP Optin Wheel 。

添加 MailChimp API 密钥

在开始创建幸运轮之前，您必须添加 MailChimp API 密钥。 WP Wheel Optin 插件的免费版本仅提供与 MailChimp 的集成。 如果您想将幸运转盘链接到其他提供商，则必须切换到高级版本。

创建新轮子

选择主题

让我们开始创建轮子吧！ 选择您选择的调色板。 在本教程中，我们选择橙色，因为它与 Hardware Store Layout Pack 的调色板很相配。

设置机会

创建幸运轮选择表单的下一步是选择获胜变化百分比。 这个百分比表明人们在旋转轮子时赢得一些东西的频率。 在这种情况下，每个旋转轮子的访问者都有 70% 的机会赢得优惠券代码。

设置切片

继续设置 12 个不同的切片。 您可以将每个切片专用于以下三个选项之一：

• 没有奖品：访客没有赢得任何东西
• 优惠券代码：访客赢取优惠券代码
• 链接：例如，访问者赢得电子书

在此示例中，我们使用 12 个切片中的 4 个来添加优惠券代码。 我们还为这些切片中的每一个单独设置了机会。

设置表单生成器

下一步可帮助您构建 optin 表单本身。 您会注意到那里已经有一个电子邮件字段。 您可以添加到选择表单的唯一其他类型的字段是复选框。 他们专门添加了此类字段以使表单符合 GDPR。

内容设置

继续，您将能够设置幸运轮选择表单的书面内容。 继续更改所有内容以使其与您的网站相匹配。

设计设置

接下来打开设计设置并为背景图案选项选择“无图案”。

行为设置

您还可以选择幸运轮选择表单何时出现在行为设置中。

GDPR

最后但并非最不重要的一点是，您可以确保访问者共享的数据不会被保存，除非他们在您的 optin 表单中勾选了不同的框，然后您就完成了！ 保存幸运轮选择表单并转到您的网站进行测试。

预览

现在我们已经完成了所有步骤，让我们最后看看不同屏幕尺寸的结果。

最后的想法

本教程是我们正在进行的 Divi 设计计划的一部分，我们每周都会尝试在您的工具箱中添加一些额外的东西。 我们希望本教程能够帮助您以交互方式更快地构建电子邮件列表。 如果您有任何问题或建议，请务必在下方评论区留言！