WordPress divi主题

3 种轻松的滚动运动效果,您可以使用 Divi 添加到标题中

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

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

Divi 的新滚动效果为您构建的页面带来了大量新的设计可能性。 您可以为每个容器添加自定义滚动效果并相应地同步效果。 这种设计自由很容易帮助您以优雅的方式突出某些内容。 在本教程中,我们将向您展示如何在标题中添加滚动动作效果。 这样,您可以更加强调您的标题并让您的访问者参与其中。 您还可以免费下载 JSON 文件!

google广告开户

让我们开始吧。

预览

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

示例 #1

桌面

滚动运动效果

移动的

滚动运动效果

示例 #2

桌面

滚动运动效果

移动的

滚动运动效果

示例#3

桌面

滚动运动效果

移动的

滚动运动效果

免费下载滚动运动效果部分布局

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

WordPress divi主题

1. 在新页面或现有页面上构建您的英雄部分设计

添加新部分

背景颜色

首先向您正在处理的页面添加一个新部分。 打开部分设置并将背景颜色更改为白色。

  • 背景颜色:#FFFFFF

滚动运动效果

间距

转到设计选项卡并修改间距值。

  • 顶部填充:15vw(台式机)、20vw(平板电脑)、25vw(手机)
  • 底部填充:0vw

滚动运动效果

溢出

并且为了确保滚动效果不会导致任何水平滚动条出现,我们还将隐藏该部分的溢出。

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

滚动运动效果

添加第 1 行

立柱结构

继续使用以下列结构向该部分添加新行:

滚动运动效果

浆纱

在不添加任何模块的情况下,打开行设置并在尺寸设置中修改宽度和最大宽度。

  • 宽度:90%
  • 最大宽度:100%

滚动运动效果

fiverr建站WordPress程序员

间距

也删除所有默认的顶部和底部填充。

  • 顶部填充:0px
  • 底部填充:0px

滚动运动效果

将文本模块 #1 添加到列

添加H1内容

我们在这一行中唯一需要的模块是一个带有一些 H1 内容的文本模块。

滚动运动效果

H1 文字设置

相应地更改模块的 H1 文本设置:

独立站选品工具
  • 标题字体:Playfair Display
  • 标题字体粗细:粗体
  • 标题文本对齐:居中
  • 标题文字颜色:#000000
  • 标题文字大小:6vw

滚动运动效果

添加第 2 行

立柱结构

然后,使用以下列结构添加另一行:

滚动运动效果

渐变背景

在不添加任何模块的情况下,打开行设置并使用渐变背景。

  • 颜色 1:#444444
  • 颜色 2:#000000
  • 渐变类型:线性
  • 渐变方向:237度

滚动运动效果

高质量外链购买

浆纱

也修改行的大小设置。

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

滚动运动效果

间距

然后,添加一些自定义顶部和底部填充。

  • 顶部填充:0vw
  • 底部填充:10vw(桌面)、15vw(平板电脑)、20vw(手机)

滚动运动效果

将文本模块 #2 添加到列

添加内容

在这一行中我们需要的第一个模块是一个带有一些内容的文本模块。

JasperAI 10000字免费额度试用

滚动运动效果

文字设置

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

  • 文字字体:Playfair Display
  • 文字颜色:#dddddd
  • 文字大小:6vw
  • 文本行高:1em
  • 文字阴影模糊强度:0.29em
  • 文字阴影颜色:#ffffff
  • 文本对齐:居中

滚动运动效果

将文本模块 #3 添加到列

添加内容

然后,添加另一个带有您选择的描述内容的文本模块。

滚动运动效果

WordPress备份工具updrafplus

文字设置

更改模块的文本设置如下:

  • 文字字体:Open Sans
  • 文字颜色:#e8e8e8
  • 文字大小:0.9vw(桌面)、2vw(平板电脑)、2.5vw(手机)
  • 文本行高:2em
  • 文本对齐:居中

滚动运动效果

浆纱

也修改大小设置。

  • 宽度:40%(桌面)、90%(平板电脑和手机)
  • 模块对齐:中心

滚动运动效果

间距

并在不同的屏幕尺寸上包括一些顶部和底部边距。

  • 最高边距:10vw(台式机)、15vw(平板电脑)、20vw(手机)
  • 底部边距:3vw(桌面)、8vw(平板电脑)、13vw(手机)

滚动运动效果

将按钮模块添加到列

添加副本

我们需要的下一个也是最后一个模块是按钮模块。 添加一些您选择的副本。

滚动运动效果

结盟

继续更改设计选项卡中的按钮对齐方式。

滚动运动效果

按钮设置

然后,按如下方式设置按钮样式:

  • 为按钮使用自定义样式:是
  • 按钮文字大小:0.8vw(桌面)、1.5vw(平板电脑)、2.5vw(手机)
  • 按钮文字颜色:#ffffff
  • 按钮边框颜色:#ffffff
  • 按钮边框半径:1px
  • 按钮字体:Open Sans
  • 按钮字体粗细:粗体
  • 按钮字体样式:大写

滚动运动效果

间距

并包括一些跨不同屏幕尺寸的自定义填充值。

  • 顶部填充:1vw(桌面)、2vw(平板电脑)、3vw(手机)
  • 底部填充:1vw(桌面)、2vw(平板电脑)、3vw(手机)
  • 左填充:2.5vw(桌面)、5vw(平板电脑)、8vw(手机)
  • 右填充:2.5vw(桌面)、5vw(平板电脑)、8vw(手机)

滚动运动效果

2.应用滚动效果

示例 #1

滚动运动效果

文本模块 #1

水平运动

现在我们已经设计了英雄部分的整体外观和感觉,是时候对我们的副本应用不同的滚动运动效果了。 要重新创建第一个示例,请打开第一个文本模块并使用以下水平运动:

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

滚动运动效果

淡入淡出

我们还将添加淡入淡出效果。

  • 启用淡入和淡出:是
  • 起始不透明度:100%
  • 中等不透明度:100%
    • 0% – 70%(桌面)
    • 0% – 95%(平板电脑和手机)
  • 结束不透明度:0%

滚动运动效果

文本模块 #2

水平运动

然后,打开部分中​​的第二个文本模块并应用以下水平运动:

  • 启用水平运动:是
  • 起始偏移量:10
  • 中偏移:0
    • 10% – 70%(桌面)
    • 10% – 95%(平板电脑和手机)
  • 结束偏移:10

滚动运动效果

淡入淡出

以及匹配的淡入淡出效果:

  • 启用淡入和淡出:是
  • 起始不透明度:0%
  • 中等不透明度:100%
    • 35% – 60%(桌面)
    • 35% – 95%(平板电脑和手机)
  • 结束不透明度:0%

滚动运动效果

示例 #2

滚动运动效果

文本模块 #1

垂直运动

想要重新创建第二个滚动运动效果吗? 打开您部分中的第一个文本模块并添加以下垂直运动:

  • 启用垂直运动:是
  • 起始偏移量:0
  • 中偏移:0
    • 90%(桌面)
    • 95%(平板电脑和手机)
  • 结束偏移:-8

滚动运动效果

放大和缩小

添加放大和缩小效果。

  • 启用向上和向下扩展:是
  • 起始比例:20%
  • 中档:100%
    • 20% – 80%(桌面)
    • 20% – 95%(平板电脑和手机)
  • 结束比例:20%

滚动运动效果

文本模块 #2

垂直运动

然后,打开第二个文本模块并使用以下垂直运动设置:

  • 启用垂直运动:是
  • 起始偏移量:0
  • 中偏移:0
    • 15% – 70%(桌面)
    • 15% – 90%(平板电脑和手机)
  • 结束偏移:-8

滚动运动效果

放大和缩小

接下来添加放大和缩小效果。

  • 启用向上和向下扩展:是
  • 起始比例:0%
  • 中档:100%
    • 30% – 70%(桌面)
    • 30% – 90%(平板电脑和手机)
  • 结束比例:100%

滚动运动效果

模糊

并通过向您部分的第二个文本模块添加模糊效果来完成滚动效果。

  • 启用模糊:是
  • 开始模糊:10px
  • 中度模糊:0px
    • 40% – 73%(桌面)
    • 40% – 95%(平板电脑和手机)
  • 结束模糊:100px

滚动运动效果

示例#3

滚动运动效果

文本模块 #1

水平运动

最后但同样重要的是,我们将向您展示如何重新创建第三个滚动运动效果。 打开该部分的第一个文本模块并添加水平运动效果。

  • 启用水平运动:是
  • 起始偏移量:0
  • 中偏移:0
  • 结束偏移:10

滚动运动效果

淡入淡出

也为此模块使用淡入淡出效果。

  • 启用淡入和淡出:是
  • 起始不透明度:100%
  • 中等不透明度:100%
    • 0% – 90%(桌面)
    • 0% – 95%(平板电脑和手机)
  • 结束不透明度:0%

滚动运动效果

旋转

我们还将应用旋转效果。

  • 启用旋转:是
  • 起始旋转:0°
  • 中间旋转:0°
    • 0% – 90%(桌面)
    • 0% – 95%(平板电脑和手机)
  • 结束旋转:90°

滚动运动效果

文本模块 #2

水平运动

然后,在您的部分中打开第二个文本模块并应用以下水平运动设置:

  • 启用水平运动:是
  • 起始偏移量:0
  • 中偏移:0
  • 结束偏移:-10

滚动运动效果

淡入淡出

继续使用淡入和淡出滚动运动效果。

  • 启用淡入和淡出:是
  • 起始不透明度:100%
  • 中等不透明度:100%
    • 0% – 80%(桌面)
    • 0% – 95%(平板电脑和手机)
  • 结束不透明度:0%

滚动运动效果

旋转

并通过添加旋转滚动效果来完成模块的设置。

  • 启用旋转:是
  • 起始旋转:0°
  • 中间旋转:0°
    • 0% – 80%(桌面)
    • 0% – 90%(平板电脑和手机)
  • 结束旋转:-90°

滚动运动效果

预览

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

示例 #1

桌面

滚动运动效果

移动的

滚动运动效果

示例 #2

桌面

滚动运动效果

移动的

滚动运动效果

示例#3

桌面

滚动运动效果

移动的

滚动运动效果

最后的想法

在这篇文章中,我们向您展示了如何使用 Divi 的新滚动效果为您的标题添加滚动运动效果。 我们已经处理了三个不同的示例,但可能性确实是无穷无尽的。 您还可以免费下载 JSON 文件! 如果您有任何问题或建议,请随时在下面的评论部分发表评论。

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

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