如何使用 Divi 的动画设置让你的标题流行起来

您的标题通常是人们访问您的网站时首先阅读的内容。 除了有一个非常好的标题外，让人们注意到并真正阅读您向他们展示的任何内容也很重要。 标题通常不会被忽视，因为它们的大小和在英雄部分的中心位置，但如果你想更进一步，让标题流行起来，本教程适合你。

我们将结合 Divi 的动画设置来创建一个突出并吸引访问者注意力的标题。 我们将标题分成 5 部分并创建一个闪光效果，让您的访问者想要跟随运动并阅读正在分享的内容。

让我们开始吧！

预览

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

桌面

移动的

让我们开始重建吧！

添加新部分

背景颜色

让我们开始创作吧！ 创建一个新页面并向其添加常规部分。 打开部分设置并更改背景颜色。

• 背景颜色：#ededed

间距

然后，转到该部分的间距设置并添加一些自定义底部填充。

• 底部填充：10vw

添加第 1 行

列结构

继续使用以下列结构添加新行：

背景颜色

尚未添加任何模块，打开行设置并更改行背景颜色。

• 背景颜色：#c9c9c9

浆纱

接下来转到大小设置并允许行占据屏幕的整个宽度。

• 使这一行全宽：是
• 使用自定义装订线宽度：是
• 天沟宽度：1

间距

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

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

添加文本模块 #1

添加内容

是时候开始添加模块了！ 我们需要的第一个模块是文本模块。 使用段落文本样式将标题的第一部分输入到内容框中。

背景颜色

然后，转到模块的背景设置并添加背景颜色。

• 背景颜色：#c9c9c9

文字设置

也可以更改设计选项卡中的文本设置。

• 文字字体：Didact Gothic
• 文字字体粗细：粗体
• 文字颜色：#000000
• 文字大小：10vw
• 文本行高：0.9em
• 文字方向：居中

间距

并使用自定义顶部和底部填充创建您想要的形状。

• 顶部填充：10vw
• 底部填充：3vw

动画片

最后但并非最不重要的是，我们将添加一个动画。 确保动画持续时间和开始不透明度为零很重要。 这将允许文本模块以闪光效果显示。

• 动画风格：淡入淡出
• 动画重复：一次
• 动画持续时间：0ms
• 动画延迟：1000ms

克隆文本模块 x4

完成对第一个文本模块的修改后，您可以根据标题的长度继续克隆该模块，次数不限。 对于您希望以闪光效果显示的标题的每个部分，您都需要一个单独的文本模块。 对于这个例子，我们需要 4 个额外的模块。

更改重复 #1

内容

更改第一个副本的副本。

背景颜色

与背景颜色一起。

• 背景颜色：#5900ff

文字颜色

将文本颜色更改为白色。

• 文字颜色：#ffffff

动画片

并在动画设置中增加动画延迟。 这将使您的访问者有足够的时间在此文本模块出现之前阅读上一个文本模块。

• 动画延迟：1500ms

更改重复 #2

内容

接下来更改第二个副本的内容。

背景颜色

与背景颜色一起。

• 背景颜色：#ffb200

文字颜色

还有文字颜色。

• 文字颜色：#ffffff

动画片

同样，我们将确保动画延迟高于前两个模块使用的动画延迟。 我们在每个人之间留出 500 毫秒，让人们有足够的时间阅读。

• 动画延迟：2000ms

更改重复 #3

内容

继续更改第三个副本的内容。

动画片

随着动画延迟。

• 动画延迟：2500ms

更改重复 #4

内容

转到下一个也是最后一个副本。 更改内容。

背景颜色

与背景颜色一起。

• 背景颜色：#000000

文字颜色

也修改文本颜色。

• 文字颜色：#3a3a3a

动画片

并在动画设置中增加动画延迟。

• 动画延迟：3000ms

为除第一个之外的每个文本模块添加负边距

完成自定义所有文本模块后，您可以继续创建重叠。 为了创建这种重叠，我们将为每个重复的文本模块添加一些负上边距。 换句话说，我们确保第一个模块之后的所有模块都出现在第一个文本模块的顶部。

• 最高利润率：-21.98vw

变换行

转换 翻译

继续转换整行，从转换转换设置开始。

• 底部：-35vw

变换旋转

也修改变换旋转值。

• 左：320度

添加第 2 行

列结构

到第二排！ 现在我们已经有了标题效果，我们可以开始添加剩余的模块。 使用以下列结构添加新行：

浆纱

在不添加任何模块的情况下，打开行设置并允许行在大小设置中占据屏幕的整个宽度：

• 使这一行全宽：是
• 使用自定义装订线宽度：是
• 天沟宽度：1

间距

删除下一行的默认顶部填充。

• 顶部填充：0px

将标题文本模块添加到第 2 列

添加H1内容

是时候开始添加模块了！ 我们需要的第一个模块是标题文本模块。 添加一些您选择的 H1 内容。

H1 文本设置

然后，转到设计选项卡并更改 H1 文本设置。

• 标题字体：Didact Gothic
• 标题字体粗细：粗体
• 标题文字大小：1.8vw（桌面）、3.8vw（平板电脑）、4vw（手机）

间距

在间距设置中添加一些自定义边距值。

• 最高边距：-4vw
• 底边距：2vw
• 左边距：30vw
• 右边距：30vw（桌面），15vw（平板电脑和手机）

将分隔模块添加到第 2 列

能见度

我们需要的下一个模块是分频器模块。 确保启用了“显示分隔线”选项。

• 显示分隔线：是

颜色

然后，转到设计选项卡并更改分隔线颜色。

• 颜色：#000000

浆纱

也修改大小设置。

• 分隔线重量：8px
• 宽度：7%

间距

随着间距设置。

• 底边距：1vw
• 左边距：30vw

将描述文本模块添加到第 2 列

添加内容

我们需要的下一个模块是另一个文本模块。 输入您选择的一些内容。

文字设置

然后，修改设计选项卡中的文本设置。

• 文字大小：0.8vw（桌面）、1.3vw（平板电脑）、1.6vw（手机）
• 文本行高：2.2em

间距

在间距设置中也添加一些自定义边距值。

• 底边距：3vw
• 左边距：30vw
• 右边距：30vw（桌面），15vw（平板电脑和手机）

将按钮模块添加到第 2 列

按钮设置

进入下一个也是最后一个模块，即按钮模块。 添加一些您选择的副本并相应地更改按钮设置：

• 为按钮使用自定义样式：是
• 按钮文字大小：1vw（桌面）、1.5vw（平板电脑）、2vw（手机）
• 按钮边框宽度：0px
• 按钮字体： Poppins
• 字体粗细：粗体
• 字体样式：大写

间距

转到间距设置并添加一些自定义边距和填充值，就大功告成了！

• 左边距：30vw
• 顶部填充：1vw
• 底部填充：1vw
• 左填充：3vw
• 右填充：3vw

预览

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

桌面

移动的

最后的想法

在这篇文章中，我们向您展示了如何仅使用 Divi 的内置选项让您的标题流行起来。 这是吸引访问者注意力并以原始方式传达信息的绝佳技巧。 如果您有任何问题或建议，请务必在下方评论区留言！