您的标题通常是人们在访问您的网站时首先阅读的内容。 除了有一个非常好的标题之外，让人们注意到并实际阅读您向他们展示的任何内容也很重要。 标题通常不会因为它们的大小和在英雄部分的中心位置而被忽视，但如果你想更进一步并真正让标题流行，本教程适合你。
我们将结合 Divi 的动画设置来创建一个引人注目的标题并吸引您的访问者的注意力。 我们将标题分成 5 部分，并创建一个闪光效果，让您的访问者想要跟随运动并阅读正在共享的内容。
让我们开始吧！
预览
在我们深入教程之前，让我们快速浏览一下不同屏幕尺寸的结果。
桌面
移动的
让我们开始重建吧！
添加新部分
背景颜色
让我们开始创作吧！ 创建一个新页面并向其中添加一个常规部分。 打开部分设置并更改背景颜色。
- 背景颜色：#ededed
间距
然后，转到该部分的间距设置并添加一些自定义底部填充。
添加第 1 行
立柱结构
继续使用以下列结构添加新行：
背景颜色
尚未添加任何模块，打开行设置并更改行背景颜色。
- 背景颜色：#c9c9c9
浆纱
接下来进入尺寸设置，让行占据屏幕的整个宽度。
- 使这一行全宽：是
- 使用自定义装订线宽度：是
- 天沟宽度：1
间距
也删除该行的默认顶部和底部填充。
- 顶部填充：0px
- 底部填充：0px
添加文本模块 #1
添加内容
是时候开始添加模块了！ 我们需要的第一个模块是文本模块。 使用段落文本样式将标题的第一部分输入到内容框中。
背景颜色
然后，转到模块的背景设置并添加背景颜色。
- 背景颜色：#c9c9c9
文字设置
更改设计选项卡中的文本设置。
- 文字字体：Didact Gothic
- 文字字体粗细：粗体
- 文字颜色：#000000
- 文字大小：10vw
- 文本行高：0.9em
- 文本方向：中心
间距
并使用自定义顶部和底部填充创建您想要的形状。
- 顶部填充：10vw
- 底部填充：3vw
动画片
最后但同样重要的是，我们将添加一个动画。 确保动画持续时间和开始不透明度为零很重要。 这将允许文本模块以闪光效果显示。
- 动画风格：淡入淡出
- 动画重复：一次
- 动画时长：0ms
- 动画延迟：1000ms
克隆文本模块 x4
完成第一个文本模块的修改后，您可以根据标题的长度继续复制该模块任意多次。 对于要以 Flash 效果显示的标题的每个部分，您都需要一个单独的文本模块。 对于这个例子，我们需要 4 个额外的模块。
更改重复 #1
内容
更改第一个副本的副本。
背景颜色
连同背景颜色。
- 背景颜色：#5900ff
文字颜色
将文本颜色更改为白色。
动画片
并在动画设置中增加动画延迟。 这将使您的访问者有足够的时间在此文本模块出现之前阅读上一个文本模块。
更改重复 #2
内容
接下来更改第二个副本的内容。
背景颜色
连同背景颜色。
- 背景颜色：#ffb200
文字颜色
还有文字颜色。
动画片
同样，我们将确保动画延迟高于用于前两个模块的动画延迟。 我们在每篇文章之间留出 500 毫秒，以便让人们有足够的时间阅读。
更改重复 #3
内容
继续更改第三个副本的内容。
动画片
随着动画延迟。
更改重复 #4
内容
到下一个和最后一个副本。 改变内容。
背景颜色
连同背景颜色。
- 背景颜色：#000000
文字颜色
也修改文本颜色。
动画片
并在动画设置中增加动画延迟。
为除第一个之外的每个文本模块添加负边距
完成自定义所有文本模块后，您可以继续创建重叠。 为了创建这种重叠，我们将为每个重复的文本模块添加一些负上边距。 换句话说，我们确保第一个模块之后的所有模块都出现在第一个文本模块的顶部。
变换行
转换翻译
继续转换整行，从转换转换设置开始。
变换旋转
也修改变换旋转值。
添加第 2 行
立柱结构
上第二排！ 现在我们已经有了标题效果，我们可以开始添加剩余的模块。 使用以下列结构添加新行：
浆纱
在不添加任何模块的情况下，打开行设置并在尺寸设置中允许行占据屏幕的整个宽度：
- 使这一行全宽：是
- 使用自定义装订线宽度：是
- 天沟宽度：1
间距
删除下一行的默认顶部填充。
将标题文本模块添加到第 2 列
添加H1内容
是时候开始添加模块了！ 我们需要的第一个模块是标题文本模块。 添加一些您选择的H1内容。
H1 文字设置
然后，转到设计选项卡并更改 H1 文本设置。
- 标题字体：Didact Gothic
- 标题字体粗细：粗体
- 标题文字大小：1.8vw（桌面）、3.8vw（平板电脑）、4vw（手机）
间距
在间距设置中添加一些自定义边距值。
- 最高边距：-4vw
- 底边距：2vw
- 左边距：30vw
- 右边距：30vw（桌面），15vw（平板电脑和手机）
将分隔模块添加到第 2 列
能见度
我们需要的下一个模块是一个分频器模块。 确保启用了“显示分隔线”选项。
颜色
然后，转到设计选项卡并更改分隔线颜色。
浆纱
也修改大小设置。
- 分隔线重量：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 的内置选项使您的标题流行起来。 这是一种很好的技术，可以吸引访问者的注意力并以原始方式传达您的信息。 如果您有任何问题或建议，请务必在下面的评论部分发表评论！
