在 Divi 中将旋转滚动效果与圆形元素相结合的创造性方法
已发表: 2020-03-12在设计新网站时，我们一直在寻找新的和创造性的方式来展示特色项目（如产品和服务）。 而且，借助 Divi 的滚动效果，新的大门已经打开，可以将您的简介布局提升到一个全新的水平。 在本教程中，我们将向您展示如何在滚动时创建带有旋转圆形元素的模糊模块布局。 这种独特的布局巧妙地使用了多个圆形元素的颜色组合，当用户向下滚动页面时，这些圆形元素会在导语后面旋转。 毫无疑问，这种设计几乎可以为任何内容提供大量应用。
享受！
抢先看
这是我们在本教程中构建的带有旋转圆形元素的模糊布局的快速浏览。
免费下载旋转圆形元素模糊布局
要亲身体验本教程中的设计，您首先需要使用下面的按钮下载它。 要访问下载，您需要使用下面的表格订阅我们的 Divi Daily 电子邮件列表。 作为新订户，您每周一将收到更多的 Divi 善良和免费的 Divi 布局包！ 如果您已经在列表中，只需在下面输入您的电子邮件地址，然后单击下载。 您不会被“重新订阅”或收到额外的电子邮件。
免费下载
加入 Divi 时事通讯，我们将通过电子邮件向您发送一份最终的 Divi 登陆页面布局包，以及大量其他令人惊叹的免费 Divi 资源、提示和技巧。 跟随，您将很快成为 Divi 大师。 如果您已经订阅，只需在下面输入您的电子邮件地址，然后单击下载即可访问布局包。
您已成功订阅。 请检查您的电子邮件地址以确认您的订阅并获得免费的每周 Divi 布局包！
要将布局导入您的页面，只需提取 zip 文件并将 JSON 文件拖到 Divi Builder 中。
让我们进入教程，好吗？
你需要什么开始
首先，您需要执行以下操作：
- 如果您还没有安装并激活 Divi 主题。
- 在WordPress中新建一个页面，在前端使用Divi Builder编辑页面（visual builder）。
- 选择“从头开始构建”选项。
之后，您将有一个空白画布开始在 Divi 中进行设计。
在 Divi 中使用滚动的圆形元素创建 Blurb 布局添加行
首先，向该部分添加三列行。
临时部分边距
接下来，为该部分添加一些顶部和底部边距，以创建一些滚动空间。
创建旋转圆形元素 Blurb 设计 #1
对于我们的第一个设计，我们将创建一个带有三个彩色分隔模块的简介模块，这些模块将位于简介后面并随着用户滚动而旋转。 第一个设计将作为我们将添加到其他列的接下来两个设计的良好模板。
这是构建它的方法。
添加模糊模块
在第 1 列中，添加一个模糊模块。
模糊 1 内容
打开模糊模块的设置并使用以下内容更新正文内容：
<p>Your content goes here. Edit or remove this text inline or in the module Content settings.</p>
然后添加您选择的图标来替换默认图像。
模糊 1 设计设置
在设计选项卡下，更新以下内容：
- 背景颜色：#121212
- 图标颜色：#41828d
- 使用图标字体大小：是
- 图标字体大小：75px
- 文本对齐：居中
- 标题字体：Oswald
- 标题字体样式：TT
- 标题文字颜色：#ffffff
- 标题文字大小：22px
- 正文颜色：#ffffff
要使宣传语为圆形，请按如下方式更新大小和圆角：
- 宽度：300px
- 最大宽度：300px
- 填充：顶部 25 像素，底部 25 像素，左侧 25 像素，右侧 25 像素
- 圆角：50%
等宽和高度的组合与圆角相结合，使宣传语成为圆形。
然后用偏移量更新位置。
- 职位：相对
- 垂直偏移：25px
- 水平偏移：25px
- Z指数：1
这将使我们稍后添加的分隔线内的简介居中。 Z 索引将确保宣传语也位于其他分隔线上方。
接下来，为简介添加旋转滚动效果。
在旋转效果选项卡下...
- 启用旋转：是
- 开始旋转：45 度（在 0% 视口处）
- 中间旋转：0度（在 40%-60% 视口处）
- 结束旋转：-45deg（在 100% 视口下）
这会将简介稍微旋转到朝向页面中间的垂直位置，然后在离开页面顶部时再旋转 45 度。
添加圆形分隔线 #1
现在，我们将添加构成旋转圆形元件设计的三个分隔器模块中的第一个。
在blurb模块下添加一个divider模块。
分频器 1 设置
打开分隔线设置并更新以下内容：
- 显示分隔线：否
- 背景渐变左颜色：#311847
- 背景渐变右颜色：#ec4067
- 起始位置：50%
- 结束位置：50%
现在我们让它循环如下：
- 宽度：350px
- 最大宽度：350px
- 高度：350px
- 圆角：50%
请注意，分隔线比宣传模块稍大，因此一旦位于宣传片后面，我们将能够看到分隔线的外缘。
现在我们只需将分隔线的位置更新为绝对位置，它就会完美地位于简介后面。
- 位置：绝对
如果您的分隔线位于广告的顶部，请确保您已将广告的 z 索引更新为 1。
接下来，将以下滚动效果添加到分隔线：
在旋转效果选项卡下...
- 启用旋转：是
- 开始旋转：0deg（在 0% 视口处）
- 中间旋转：45 度（在 50% 视口处）
- 结束旋转：-180 度（在 100% 视口下）
添加圆形分隔线 2
要创建第二个圆形分隔线，请通过单击设置菜单中的图层图标打开图层框。 然后复制分隔器模块以创建一个新的分隔器模块。
更新分频器 2 设计设置
对于这个分隔线，让我们给它一个不同的渐变背景颜色，如下所示：
- 背景渐变左颜色：rgba(160,26,125,0.5)
- 背景渐变右侧颜色：rgba(255,255,255,0)
注意：重要的是在此处使用半透明颜色以暴露其背后的背景。 这创造了美丽的颜色组合。
接下来，更新滚动效果如下：
在旋转效果选项卡下...
- 中间旋转：90 度（在 50% 视口处）
- 结束旋转：180 度（在 100% 视口下）
添加圆形分隔线 3
继续相同的过程，通过复制分隔符 2 创建第三个也是最后一个分隔符。
更新分隔线 3 设计设置
对于这个分隔线，我们也给它一个不同的渐变背景色，如下所示：
- 背景渐变左颜色：rgba(255,255,255,0)
- 背景渐变右颜色：rgba(41,196,169,0.5)
然后更新滚动效果如下：
在旋转效果选项卡下...
- 中间旋转：180 度（在 50% 视口处）
- 结束旋转：360 度（在 100% 视口下）
在“放大和缩小”选项卡下...
- 启用向上和向下扩展：是
- 起始比例：110%（在 0% 视口处）
- 中比例：110%（在 50% 视口处）
- 结束比例：100%（在 100% 视口下）
创建旋转圆形元素 Blurb 设计 #2
由于我们已经在第 1 列中完成了设计，让我们通过复制整个第一列来快速启动第二个设计。 这也将延续四个模块。 您将需要删除空列之一以保留三列布局。
更新 Blurb 模块设计
对于此设计，我们将使用白色宣传语背景，以便我们可以使用屏幕滤镜效果来显示宣传语文字背后的移动颜色。 我们还将添加缩放滚动效果以使后分隔符更大。
这是如何做到的。
打开第 2 列中的模糊模块的设置并更新以下内容：
- 背景：#ffffff
然后将标题和正文文本颜色更改为黑色。
- 标题文字颜色：#000000
- 正文颜色：#000000
然后添加以下混合模式：
- 混合模式：屏幕
更新分隔线 1 滚动效果
直接打开第2列blurb模块下的divider模块的设置，更新如下滚动效果：
在放大和缩小效果选项卡下...
- 启用向上和向下扩展：是
- 起始比例：100%（在 0% 视口处）
- 中比例：120%（在 40%-60% 视口）
- 结束比例：100%（在 100% 视口下）
当用户向下滚动页面时，这将导致分隔线在中间增加 20% 的原始大小。
创建旋转圆形元素模糊设计 #3
对于最后一个设计，我们将创建一个类似于第 1 列中的旋转圆形模糊。但是，我们将添加不同的混合模式，以通过深色背景上的白色文本显示颜色。
这是如何做到的。
重复第 1 列
由于我们已经在第 1 列中完成了设计，让我们通过复制整个第一列并使用图层框将其移动到第三列位置来快速启动第三个设计。 然后删除多余的空列。
更新模糊模块设置
首先，让我们添加乘法混合模式，通过白色文本显示分隔线颜色，如下所示：
- 混合模式：多个
然后将图标颜色也更新为白色。
- 图标颜色：#ffffff
更新分隔线 3 设置
现在让我们去掉第 3 列中最后一个（第三个）分隔符的缩放滚动效果。
打开第三个分隔符的设置并更新以下内容：
在放大和缩小效果选项卡下...
- 启用向上和向下扩展：否
在移动设备上调整第 2 列的位置
现在，这三种宣传语设计将在平板电脑和手机显示屏上与屏幕左侧对齐。 为了平衡设计，我们可以使用变换比例轻松地将中间列向右移动。
打开第 2 列的设置并更新以下内容：
Transform Scale X Axis：40%（在平板电脑上），15%（在手机上）
最后结果
就是这样！ 让我们在实时页面上查看最终结果。
这是用户滚动布局时桌面上的设计。
这是平板电脑上的设计。
这是在电话上。
最后的想法
这种布局的最佳功能之一是您可以通过滚动效果和颜色组合获得多少创意，使用 Divi 的内置选项可以轻松调整每一种效果。 一旦你更好地掌握了如何合并滤镜效果，事情就会真正开始流行起来。 希望这将为您创建的下一个简介布局提供一些灵感。
我期待在评论中收到您的来信。
干杯!