WordPress divi主题

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

by | May 4, 2022 | Divi主题使用教程 | 0 comments

5分钟生成10篇英文软文article forge软件试用

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

google广告开户

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

让我们开始吧。

抢先看

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

免费下载布局

要掌握本教程中的设计,您首先需要使用下面的按钮下载它。 要访问下载,您需要使用下面的表格订阅我们的 Divi Daily 电子邮件列表。 作为新订阅者,您将在每周一收到更多 Divi 福利和免费的 Divi Layout 包! 如果您已经在列表中,只需在下面输入您的电子邮件地址,然后单击下载。 您不会被“重新订阅”或收到额外的电子邮件。

要将部分布局导入 Divi 库,请导航到 Divi 库。

单击导入按钮。

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

然后单击导入按钮。

迪维通知框

WordPress divi主题

完成后,部分布局将在 Divi Builder 中可用。

让我们进入教程,好吗?

你需要什么开始

要开始,您需要执行以下操作:

  1. 如果您还没有,请安装并激活 Divi 主题。
  2. 在 WordPress 中创建一个新页面,并使用 Divi Builder 在前端(可视化构建器)编辑页面。
  3. 选择“选择预制布局”选项。
    divi 获胜旋转滚动效果
  4. 选择 Bakery Homepage 布局并单击以使用该布局。
    divi 获胜旋转滚动效果

之后,您将准备好开始在 Divi 中创建具有“获胜旋转”滚动效果的 CTA。

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

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

添加部分、行和列

预制布局已经包含多个包含内容的部分。 我们将在希望 CTA 驻留的页面中添加一个新部分。 对于本教程,在标有“服务”的部分正下方添加一个新的常规部分。

divi 获胜旋转滚动效果

在该部分内,添加两列行。

divi 获胜旋转滚动效果

行设置

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

fiverr建站WordPress程序员
  • 天沟宽度:1
  • 宽度:94%
  • 内边距:顶部 10 像素,底部 10 像素
  • 边框宽度:1px
  • 边框颜色:rgba(0,0,0,0.12)

divi 获胜旋转滚动效果

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

display:flex;
align-items: center;

divi 获胜旋转滚动效果

第 1 列边框

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

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

divi 获胜旋转滚动效果

独立站选品工具

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

接下来,我们将创建旋转箭头和文本,作为指向获胜选择的箭头。

添加模糊模块

在左栏中添加一个新的简介模块。

divi 获胜旋转滚动效果

模糊内容

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

  • 标题:你赢了
  • 图标:右箭头(见截图)

divi 获胜旋转滚动效果

高质量外链购买
模糊设计

在设计选项卡下,更新以下内容:

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

divi 获胜旋转滚动效果

模糊自定义 CSS

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

direction: rtl !important;

然后通过将这个自定义 CSS 添加到 Blurb Title 中取出 Blurb 标题下的默认填充:

padding-bottom: 0px

divi 获胜旋转滚动效果

JasperAI 10000字免费额度试用

使用多个模糊创建奖品选择

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

创建模糊 1

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

divi 获胜旋转滚动效果

打开第 2 列中重复简介的设置并取出主元素的自定义 CSS:

divi 获胜旋转滚动效果

WordPress备份工具updrafplus

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

更新标题和图片

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

  • 标题:免费饼干!
  • 图片:上传图片(大约 100 像素 x 100 像素)

divi 获胜旋转滚动效果

模糊 1 设计

然后更新设计设置如下:

  • 图片宽度:80px(台式机)、50px(平板电脑)、40px(手机)
  • 内容宽度:92%
  • 宽度:100%

divi 获胜旋转滚动效果

变换原点

我们将使用 transform 旋转选项来旋转 blurbs,因此选择一个对 blurbs 应该旋转的方式有意义的变换原点很重要。 我们不打算轮换第一个,但这将作为一个很好的模板。

更新简介的变换原点,如下所示:

  • 变换原点:右中心

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

divi 获胜旋转滚动效果

绝对位置

在高级选项卡下,给出如下所示的简介和绝对位置:

  • 职位:绝对
  • 位置:右中心

divi 获胜旋转滚动效果

创建模糊 2

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

divi 获胜旋转滚动效果

旋转模糊 2

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

  • 变换旋转Z轴:25度

divi 获胜旋转滚动效果

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

创建和旋转模糊 3

要创建第三个简介,请复制简介 2。然后按如下方式更新变换旋转:

  • 变换旋转Z轴:50度

divi 获胜旋转滚动效果

创建和旋转模糊 4

要创建第四个简介,请复制简介 3。然后按如下方式更新变换旋转:

  • 变换旋转Z轴:75度

divi 获胜旋转滚动效果

更新模糊标题和图像

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

divi 获胜旋转滚动效果

列滚动旋转

为了添加滚动效果,我们将旋转包含 4 个旋转的简介的整个列。

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

  • 变换原点:右中心

divi 获胜旋转滚动效果

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

  • 启用旋转:是
  • 起始轮换:-75%(在 15% 时)

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

divi 获胜旋转滚动效果

使用隐藏溢出更新行

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

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

divi 获胜旋转滚动效果

第 2 部分:创建奖品 CTA

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

添加行

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

divi 获胜旋转滚动效果

添加文本模块

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

divi 获胜旋转滚动效果

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

divi 获胜旋转滚动效果

文字设计

更新文本设计如下:

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

divi 获胜旋转滚动效果

添加 CTA 按钮

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

divi 获胜旋转滚动效果

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

divi 获胜旋转滚动效果

行滚动效果

要在“中奖旋转”选择奖品后显示 CTA,打开行设置并更新以下滚动效果:

在淡入和淡出选项卡下…

  • 启用淡入淡出:是
  • 起始不透明度:0%(在 50% 时)
  • 中等不透明度:100%(55%)

divi 获胜旋转滚动效果

最后结果

最后的想法

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

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

干杯!

5分钟生成10篇英文软文article forge软件试用
tiktok
WordPress divi主题