如何通过“Winning Spin”滚动效果提升您的 CTA

赢得奖品总是很有趣。 这就是公司通过赠送免费东西来在线营销他们的产品和服务的原因。 它可以是您第一次订购时的免费甜点优惠券，或订阅电子邮件列表时的免费电子书。 但有时，即使是免费赠品也会在网络上被忽略。 添加优雅的“获胜旋转”滚动效果可能是一种很好的方式，可以让您的 CTA 获得应有的关注，同时为访问者创建引人入胜的互动。

在本教程中，我们将向您展示如何在 Divi 中使用“获胜旋转”滚动效果来提升您的 CTA。 当用户向下滚动页面时，中奖的奖品会旋转进入视野，以独特的方式显示免费优惠。 您可以使用它来推广您能想到的几乎所有免费优惠。

让我们开始吧。

抢先看

这是我们将在本教程中构建的设计的快速浏览。

免费下载布局

要亲身体验本教程中的设计，您首先需要使用下面的按钮下载它。 要访问下载，您需要使用下面的表格订阅我们的 Divi Daily 电子邮件列表。 作为新订户，您每周一将收到更多的 Divi 善良和免费的 Divi 布局包！ 如果您已经在列表中，只需在下面输入您的电子邮件地址，然后单击下载。 您不会被“重新订阅”或收到额外的电子邮件。

下载文件

免费下载

加入 Divi 时事通讯，我们将通过电子邮件向您发送一份最终的 Divi 登陆页面布局包，以及大量其他令人惊叹的免费 Divi 资源、提示和技巧。 跟随，您将很快成为 Divi 大师。 如果您已经订阅，只需在下面输入您的电子邮件地址，然后单击下载即可访问布局包。

下载

您已成功订阅。 请检查您的电子邮件地址以确认您的订阅并获得免费的每周 Divi 布局包！

要将部分布局导入您的 Divi 库，请导航到 Divi 库。

单击导入按钮。

在可移植性弹出窗口中，选择导入选项卡并从您的计算机中选择下载文件。

然后点击导入按钮。

完成后，分区布局将在 Divi Builder 中可用。

让我们进入教程，好吗？

你需要什么开始

首先，您需要执行以下操作：

1. 如果您还没有安装并激活 Divi 主题。
2. 在WordPress中新建一个页面，在前端使用Divi Builder编辑页面（visual builder）。
3. 选择“选择预制布局”选项。
   
4. 选择 Bakery Homepage Layout 并单击以使用该布局。
   

之后，您就可以开始在 Divi 中创建具有“获胜旋转”滚动效果的 CTA。

第 1 部分：创建“Winning Spin”滚动效果

首先，从 Divi Builder 中的底部设置菜单部署图层视图。 这将有助于更好地管理我们的设计元素。

添加节、行和列

预制布局带有多个内容部分。 我们将向希望 CTA 所在的页面添加一个新部分。 在本教程中，直接在标有“服务”的部分下添加一个新的常规部分。

在该部分内，添加一个两列的行。

行设置

在添加任何模块之前，打开行设置，并更新以下内容：

• 天沟宽度：1
• 宽度：94%
• 填充：顶部 10 像素，底部 10 像素
• 边框宽度：1px
• 边框颜色：rgba(0,0,0,0.12)

在高级选项卡下，将以下自定义 CSS 添加到主元素：

display:flex;
align-items: center;

第 1 列边框

完成行设置后，打开第 1 列的设置并添加右边框，如下所示：

• 右边框宽度：1px
• 右边框颜色：rgba(0,0,0,0.12)

使用模糊模块创建微调箭头和文本

接下来，我们将创建微调箭头和文本，作为指向获胜选择的箭头。

添加模糊模块

向左列添加一个新的模糊模块。

模糊内容

然后使用新标题和图标更新简介内容。

• 标题：你赢了
• 图标：右箭头（见截图）

模糊设计

在设计选项卡下，更新以下内容：

• 图标颜色：#a06d51
• 图像/图标放置：左
• 图标字体大小：80px（桌面）、50px（平板电脑）、40px（手机）
• 标题字体：Patua One
• 标题字体粗细：粗体
• 标题文字大小：40 像素（桌面）、25 像素（平板电脑）、20 像素（手机）
• 标题字母间距：1px
• 标题行高度：2em

模糊自定义 CSS

接下来，通过将以下自定义 CSS 添加到主元素，切换模糊内容的顺序，使箭头在右侧而不是左侧：

direction: rtl !important;

然后通过将这个自定义 CSS 添加到 Blurb Title 中，去掉 Blurb 标题下的默认填充：

padding-bottom: 0px

使用多个 Blurb 创建奖品选择

在右栏中，我们将添加我们的奖品选择，这些奖品将旋转并最终确定获胜者。 为此，我们将创建并放置 4 个带有标题和图像的模糊模块。

创建模糊 1

要在第 2 列中创建我们的第一个简介，请复制第 1 列的简介并将其拖到第 2 列中。

打开第 2 列中重复模糊的设置，取出主元素的自定义 CSS：

这将使我们的图标回到左侧。

更新标题和图片

然后更新标题和图片如下：

• 标题：免费饼干！
• 图片：上传图片（大约 100 像素 x 100 像素）

模糊 1 设计

然后更新设计设置如下：

• 图片宽度：80px（桌面）、50px（平板）、40px（手机）
• 内容宽度：92%
• 宽度：100%

变换原点

我们将使用变换旋转选项旋转宣传语，因此选择一个对宣传语应该旋转的方式有意义的变换原点很重要。 我们不会轮换第一个，但这将作为一个很好的模板。

更新模糊的变换原点，如下所示：

• 变换原点：右中

您也应该取出图像/图标动画。

绝对位置

在高级选项卡下，给出模糊和绝对位置如下：

• 位置：绝对
• 位置：右中

创建模糊 2

要创建第二个简介，请复制简介 1。

旋转模糊 2

然后添加一个变换旋转如下：

• 变换旋转 Z 轴：25deg

您将看到简介现在已旋转到行的查看区域之外。

创建和旋转 Blurb 3

要创建第三个模糊，请复制模糊 2。然后按如下方式更新变换旋转：

• 变换旋转 Z 轴：50 度

创建和旋转 Blurb 4

要创建第四个模糊，请复制模糊 3。然后按如下方式更新变换旋转：

• 变换旋转 Z 轴：75 度

更新 Blurb 标题和图像

完成添加 4 个简介后，返回并根据需要更新每个简介的标题和图像。

列滚动旋转

为了添加滚动效果，我们将旋转包含 4 个旋转模糊的整个列。

打开第 2 列的设置并更新以下内容：

• 变换原点：右中

在高级选项卡下，打开旋转滚动效果选项卡并更新以下内容：

• 启用旋转：是
• 起始轮换：-75%（在 15% 时）

然后将运动效果触发器更新为“元素顶部”。

使用隐藏溢出更新行

现在返回行设置并通过更新以下行设置来隐藏内容的溢出：

• 水平溢出：隐藏
• 垂直溢出：隐藏

第 2 部分：创建奖品 CTA

对于本教程的最后一部分，我们将创建一个 CTA 来显示有关奖品和按钮的信息。 并且，我们将添加滚动效果以在“获胜旋转”动画完成后显示 CTA。 这将模仿一种惊喜类型的效果。

添加行

首先，在我们刚刚创建的行的正下方添加一个单列行。

添加文本模块

要添加 CTA 的内容，我们将从页面上的预制布局中复制一个文本模块。 找到并复制标题为“Shop Online”的文本模块。

然后将其粘贴到您刚刚创建的行中。

文字设计

更新文字设计如下：

• 文字字体：PT Sans
• 文字字体粗细：粗体
• 文字文字大小：16px
• 文本行高：2em
• 文本对齐：居中

添加 CTA 按钮

接下来找到预制布局顶部的按钮并复制它。

然后直接粘贴到文本模块下。

行滚动效果

要在“获胜旋转”选择奖品后显示 CTA，请打开行设置并更新以下滚动效果：

在淡入淡出选项卡下...

• 启用淡入淡出：是
• 起始不透明度：0%（50%）
• 中等不透明度：100%（55%）

最后结果

最后的想法

希望这种“获胜旋转”滚动效果为您提供了一些关于如何在您自己的网站上设计更具吸引力的 CTA 的新想法。 使用 Divi 的变换选项和滚动效果来构建它需要一些技巧。 但是一旦完成，布局真的很容易用您自己的独特内容进行更新。

我期待在评论中收到您的来信。

干杯!