WordPress divi主题

如何用微妙的运动形状标记新的 Divi 部分

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

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

有很多方法可以让您的访问者意识到他们正在转到您页面上的另一个部分。 在 Divi 中,您可以立即使用各种分区分隔器。 但是,如果您正在寻找一种更生动的方式来说明问题,那么您会喜欢本教程的。 我们将向您展示如何使用微妙的运动形状标记新的 Divi 部分。 我们将使用 Divi 的内置选项创建这些形状,并使用 Divi 的滚动效果为它们添加运动。 可能性是无穷无尽的,但我们将分享三个您可以立即使用的设计示例。 您还可以免费下载 JSON 文件!

google广告开户

让我们开始吧。

预览

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

示例 #1

桌面

运动形状

移动的

运动形状

示例 #2

桌面

运动形状

移动的

运动形状

示例#3

桌面

运动形状

移动的

运动形状

免费下载微妙的运动形状布局

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

WordPress divi主题

一般步骤

上传艺术画廊登陆页面布局

对于本教程,我们将使用 Art Gallery Layout Pack,但您可以将该技术应用于您正在构建的任何类型的网站。 添加新页面并上传布局包的登录页面。

运动形状

在第 #1 部分的底部添加新行

立柱结构

现在,我们将完成一些适用于本教程开头显示的所有三个示例的基本步骤。 首先,使用以下列结构在页面第一部分的底部添加一个新行:

运动形状

浆纱

打开行设置并更改大小设置,如下所示:

  • 使用自定义装订线宽度:是
  • 天沟宽度:1
  • 宽度:100%
  • 最大宽度:100%

运动形状

间距

修改边距和填充值。

  • 最高边距:10vw
  • 顶部填充:0px
  • 底部填充:0px

运动形状

删除第 #1 节底部填充

为了确保行和运动形状出现在该部分的底部,我们需要删除该部分的底部填充。

运动形状

fiverr建站WordPress程序员

重新创建示例 #1

添加分频器模块 #1

能见度

完成一般步骤后,就该开始重新创建不同的示例了,从第一个示例开始。 添加第一个分频器模块并确保启用了“显示分频器”选项。

运动形状

线

转到模块的设计选项卡并更改线条颜色。

运动形状

浆纱

也修改模块的大小设置。

独立站选品工具
  • 分隔线重量:50px
  • 高度:50 像素

运动形状

间距

然后,转到间距设置并添加一些自定义边距和填充值。

  • 左边距:-200px(仅限平板电脑和手机)
  • 右边距:-200px(仅限平板电脑和手机)
  • 左填充:15vw
  • 右填充:15vw

运动形状

变换倾斜

我们还将通过在变换设置中添加底部倾斜值来稍微变换模块。

运动形状

高质量外链购买

水平运动滚动效果

是时候为我们的模块添加不同的滚动效果了! 首先,我们将添加一些水平运动。

  • 启用水平运动:是
  • 起始偏移量:0
  • 中偏移:0(80%)
  • 结束偏移:
    • 桌面:20(85%)
    • 平板电脑和手机:5(85%)

运动形状

淡入淡出滚动效果

我们也会添加淡入淡出效果。

  • 启用淡入和淡出:是
  • 起始不透明度:0%
  • 中等不透明度:0%(36%)
  • 结束不透明度:100%(40%)

运动形状

放大和缩小滚动效果

我们将通过添加放大和缩小效果来完成模块设置。

JasperAI 10000字免费额度试用
  • 启用向上和向下扩展:是
  • 起始比例:20%
  • 中档:50%(69%)
  • 结束比例:100%(73%)

运动形状

克隆分频器模块 #1

完成分频器模块后,您可以克隆它。

运动形状

修改线条颜色

打开复制模块的设置并更改线条颜色。

运动形状

WordPress备份工具updrafplus

修改间距

修改模块的间距值。

  • 左边距:-200px(仅限平板电脑和手机)
  • 右边距:-200px(仅限平板电脑和手机)
  • 左填充:25vw
  • 右填充:25vw

运动形状

修改水平运动滚动效果

然后,进入高级选项卡中的滚动效果,修改水平运动滚动效果的结束偏移量。

  • 结束偏移:
    • 桌面:-20
    • 平板电脑和手机:-5

运动形状

重新创建示例 #2

添加分频器模块 #1

能见度

如果您想重新创建第二个示例,请继续将第一个 Divider 模块添加到您部分的最后一行。 确保启用了“显示分隔线”选项。

运动形状

线

接下来修改模块的线条颜色。

运动形状

浆纱

也更改大小设置。

  • 分隔线重量:200px
  • 宽度:200 像素
  • 模块对齐:中心
  • 高度:200 像素

运动形状

边界

接下来,我们将通过添加一些边框半径将模块变成一个圆形。

运动形状

水平运动滚动效果

是时候添加滚动效果了! 我们使用的第一个效果是水平运动。

  • 启用水平运动:是
  • 起始偏移量:-2
  • 中偏移:0
  • 结束偏移:
    • 台式机:20
    • 平板电脑和手机:5

运动形状

放大和缩小滚动效果

接下来,我们还将启用放大和缩小效果。

  • 启用向上和向下扩展:是
  • 起始比例:20%
  • 中档:100%
  • 结束比例:100%

运动形状

克隆分割模块

继续克隆整个 Divider Module。

运动形状

更改线条颜色

打开副本并更改线条颜色。

运动形状

修改间距

也添加一些上边距。

运动形状

更改水平运动滚动效果

然后,转到水平运动滚动效果设置并更改结束偏移量。

  • 结束偏移:
    • 桌面:-20
    • 平板电脑和手机:-5

运动形状

重新创建示例 #3

添加行填充

继续下一个也是最后一个示例! 首先打开您在本教程的一般步骤中创建的行,然后更改间距设置中的填充值。

  • 上边距:50px
  • 底部填充:50px

运动形状

添加分频器模块 #1

能见度

将新的分隔线模块添加到您部分的最后一行并隐藏分隔线。

运动形状

渐变背景

接下来添加渐变背景。

  • 颜色1:#ffa100
  • 颜色 2:#f77f00
  • 渐变类型:线性
  • 渐变方向:121度

运动形状

浆纱

转到模块的设计选项卡并更改尺寸设置,如下所示:

  • 宽度:200 像素
  • 模块对齐:中心
  • 高度:0px

运动形状

间距

接下来我们将添加一些自定义顶部和底部填充。

  • 上边距:100px
  • 底部填充:100px

运动形状

水平运动滚动效果

现在,是时候添加滚动效果了,从跨不同屏幕尺寸的一些水平运动开始。

  • 启用水平运动:是
  • 起始偏移量:-1(30% 时)
  • 中偏移:0
  • 结束偏移:
    • 台式机:20
    • 平板电脑和手机:5

运动形状

旋转滚动效果

我们将通过添加旋转滚动效果来完成模块设置。

  • 启用旋转:是
  • 起始旋转:0°(46%)
  • 中间旋转:50°(75%)
  • 结束旋转:90°

运动形状

克隆分割模块

继续克隆整个模块。

运动形状

更改渐变背景

打开副本的设置并更改渐变背景颜色。

  • 颜色1:#24252d
  • 颜色2:#16161c

运动形状

更改间距

添加一些负上边距。

运动形状

更改水平滚动效果

并在滚动效果设置中修改水平运动的结束偏移。

  • 结束偏移:
    • 桌面:-20
    • 平板电脑和手机:-5

运动形状

预览

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

示例 #1

桌面

运动形状

移动的

运动形状

示例 #2

桌面

运动形状

移动的

运动形状

示例#3

桌面

运动形状

移动的

运动形状

最后的想法

在这篇文章中,我们向您展示了如何创建运动形状并使用它们来标记 Divi 页面上的新部分。 使用这种技术将帮助访问者更加意识到他们正在切换到您页面上的另一部分这一事实。 我们重新创建的运动效果非常微妙,可以轻松地为您的网站添加交互。 您还可以免费下载 JSON 文件! 如果您有任何问题或建议,请随时在下面的评论部分发表评论。

如果您渴望了解有关 Divi 的更多信息并获得更多 Divi 免费赠品,请务必订阅我们的电子邮件通讯和 YouTube 频道,这样您将永远是第一批了解并从这些免费内容中受益的人之一。

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