WordPress divi主题

在 Divi 中将旋转滚动效果与圆形元素相结合的创造性方法

| 5月 6, 2022 | Divi主题使用教程 | 0 条评论

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

在设计新网站时,我们一直在寻找新的和创造性的方式来展示特色项目(如产品和服务)。 而且,借助 Divi 的滚动效果,我们打开了新的大门,将您的宣传语布局提升到一个全新的水平。 在本教程中,我们将向您展示如何创建一个在滚动时带有旋转圆形元素的简介模块布局。 这种独特的布局巧妙地使用了多个圆形元素的颜色组合,当用户向下滚动页面时,这些圆形元素会在简介后面旋转。 毫无疑问,这种设计几乎可以用于任何内容。

google广告开户

享受!

抢先看

以下是我们在本教程中构建的带有旋转圆形元素的简介布局。

免费下载旋转圆形元素模糊布局

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

要将布局导入您的页面,只需提取 zip 文件并将 JSON 文件拖到 Divi Builder 中。

让我们进入教程,好吗?

你需要什么开始

扩展角落标签

WordPress divi主题

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

  1. 如果您还没有,请安装并激活 Divi 主题。
  2. 在 WordPress 中创建一个新页面,并使用 Divi Builder 在前端(可视化构建器)编辑页面。
  3. 选择“从头开始构建”选项。

之后,您将有一个空白画布开始在 Divi 中进行设计。

在 Divi 中的 Scroll 上使用旋转圆形元素创建 Blurb 布局

添加行

首先,将三列行添加到该部分。

临时部分边距

接下来,为该部分添加一些顶部和底部边距,以便创建一些滚动空间。

创建旋转圆形元素模糊设计#1

对于我们的第一个设计,我们将创建一个带有三个彩色分隔器模块的简介模块,这些分隔模块将位于简介后面并随着用户滚动而旋转。 这第一个设计将作为我们将添加到其他列的接下来两个设计的一个很好的模板。

这是构建它的方法。

添加模糊模块

在第 1 列中,添加一个简介模块。

fiverr建站WordPress程序员

模糊 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

要使简介变为圆形,请按如下方式更新大小和圆角:

  • 宽度:300 像素
  • 最大宽度:300px
  • 内边距:顶部 25px,底部 25px,左侧 25px,右侧 25px
  • 圆角:50%

等宽和等高与圆角相结合,使宣传语成为圆形。

然后用偏移量更新位置。

高质量外链购买
  • 职位:相对
  • 垂直偏移:25px
  • 水平偏移:25px
  • Z指数:1

这将使我们稍后添加的分隔线中的简介居中。 Z 索引将确保简介也位于其他分隔符之上。

接下来,为简介添加旋转滚动效果。

在旋转效果选项卡下…

  • 启用旋转:是
  • 起始旋转:45 度(在 0% 视口)
  • 中间旋转:0 度(在 40%-60% 视口)
  • 结束旋转:-45 度(在 100% 视口)

JasperAI 10000字免费额度试用

这会将简介稍微旋转到朝向页面中间的直立位置,然后在离开页面顶部时再旋转 45 度。

添加圆形分隔线 #1

现在我们将添加三个分隔模块中的第一个,这将构成我们的旋转圆形元素设计。

在 blurb 模块下添加一个分隔符模块。

分频器 1 设置

打开分隔线设置并更新以下内容:

WordPress备份工具updrafplus
  • 显示分隔线:否
  • 背景渐变左颜色:#311847
  • 背景渐变正确颜色:#ec4067
  • 起始位置:50%
  • 结束位置:50%

现在我们让它循环如下:

  • 宽度:350 像素
  • 最大宽度:350px
  • 高度:350 像素
  • 圆角:50%

请注意,分隔器比简介模块稍大,因此一旦位于简介后面,我们将能够看到分隔器的外缘。
现在我们只需将分隔线的位置更新为绝对位置,它就会完美地位于宣传语后面。

如果您的分隔线位于简介顶部,请确保您已将简介 z 索引更新为 1。

接下来,将以下滚动效果添加到分隔符:

在旋转效果选项卡下…

  • 启用旋转:是
  • 起始旋转:0deg(在 0% 视口)
  • 中间旋转:45 度(在 50% 视口处)
  • 结束旋转:-180 度(在 100% 视口)

添加圆形分隔线 2

要创建第二个圆形分隔线,请通过单击设置菜单中的图层图标打开图层框。 然后复制分隔器模块以创建一个新的。

更新分隔线 2 设计设置

对于这个分隔线,让我们给它一个不同的渐变背景颜色,如下所示:

  • 背景渐变左颜色:rgba(160,26,125,0.5)
  • 背景渐变右颜色:rgba(255,255,255,0)

注意:在这里使用半透明颜色以暴露其背后的背景很重要。 这创造了一个美丽的颜色组合。

接下来,更新滚动效果如下:

在旋转效果选项卡下…

  • 中间旋转:90 度(在 50% 视口)
  • 结束旋转g:180 度(在 100% 视口)

添加圆形分隔线 3

继续相同的过程,通过复制分隔线 2 创建第三个也是最后一个分隔线。

更新分隔线 3 设计设置

对于这个分隔线,我们也给它一个不同的渐变背景颜色,如下所示:

  • 背景渐变左颜色:rgba(255,255,255,0)
  • 背景渐变右颜色:rgba(41,196,169,0.5)

然后更新滚动效果如下:

在旋转效果选项卡下…

  • 中间旋转:180 度(在 50% 视口)
  • 结束旋转g:360 度(在 100% 视口)

在放大和缩小选项卡下…

  • 启用向上和向下扩展:是
  • 起始比例:110%(视口为 0%)
  • 中比例:110%(在 50% 视口)
  • 结束比例:100%(在 100% 视口)

创建旋转圆形元素模糊设计#2

由于我们已经在第 1 列中完成了设计,让我们通过复制整个第一列来启动第二个设计。 这也将继承四个模块。 您需要删除其中一列空列以保留三列布局。

更新 Blurb 模块设计

对于这个设计,我们将使用白色背景,这样我们就可以使用屏幕过滤效果来显示背景文本后面的移动颜色。 我们还将添加缩放滚动效果以使后分隔线更大。

这是如何做到的。

打开第 2 列中的简介模块的设置并更新以下内容:

然后将标题和正文文本颜色更改为黑色。

  • 标题文字颜色:#000000
  • 正文文本颜色:#000000

然后添加以下混合模式:

更新 Divider 1 滚动效果

打开第2列blurb模块正下方的divider模块的设置,更新如下滚动效果:
在“放大和缩小效果”选项卡下……

  • 启用向上和向下扩展:是
  • 起始比例:100%(在 0% 视口)
  • 中比例:120%(在 40%-60% 视口)
  • 结束比例:100%(在 100% 视口)

当用户向下滚动页面时,这将导致分隔线在中途增长 20% 的原始大小。

创建旋转圆形元素模糊设计#3

对于最后一个设计,我们将创建一个类似于第 1 列中的旋转圆形简介。但是,我们将添加不同的混合模式以通过深色背景上的白色文本显示颜色。

这是如何做到的。

重复列 1

由于我们已经在第 1 列中完成了设计,让我们通过复制整个第一列并使用图层框将其移动到第三列位置来启动第三个设计。 然后删除多余的空列。

更新 Blurb 模块设置

首先,让我们添加乘法混合模式以通过白色文本显示分隔线颜色,如下所示:

然后将图标颜色也更新为白色。

更新分频器 3 设置

现在让我们在第 3 列的最后一个(第三个)分隔符上取出缩放滚动效果。
打开第三个分隔线的设置并更新以下内容:

在“放大和缩小效果”选项卡下…

  • 启用向上和向下扩展:否

在移动设备上调整第 2 列的位置

现在,这三个简介设计将在平板电脑和手机显示屏的屏幕左侧对齐。 为了平衡设计,我们可以使用变换比例轻松地将中间列向右移动。

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

变换比例 X 轴:40%(在平板电脑上),15%(在手机上)

最后结果

就是这样! 让我们在实时页面上查看最终结果。

这是用户滚动浏览布局时桌面上的设计。

这是平板电脑上的设计。

这是在电话上。

最后的想法

此布局的最佳功能之一是您可以通过滚动效果和颜色组合获得多大的创意,使用 Divi 的内置选项可以轻松调整每一个。 一旦你更好地掌握了如何合并滤镜效果,事情就真的开始流行起来了。 希望这将为您创建的下一个简介布局提供一些灵感。

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

干杯!

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