如何使用 Divi 为您的全局标题设置动画

已发表: 2019-12-20

您的标题是您网站上最重要的部分之一。它连接您的页面、帖子和号召性用语。这也是您的访问者自动寻找的内容之一，因此他们不会浪费任何时间来查找他们正在寻找的内容。如果您正在寻找一种强调标题的方法，那么您会喜欢这篇文章。我们将向您展示如何使用 Divi 的 Theme Builder 为您定制的全局标题设置动画。可能性是无限的，但我们将向您展示两个动画示例，您可以立即开始使用它们。您也可以免费下载 JSON 文件！

让我们开始吧。

预览

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

示例#1

桌面

动画全局标题

移动的

动画全局标题

示例#2

桌面

动画全局标题

移动的

动画全局标题

免费下载动画全局标题

要使用免费动画全局标题，您首先需要使用下面的按钮下载它。要访问下载，您需要使用下面的表格订阅我们的 Divi Daily 电子邮件列表。作为新订户，您每周一将收到更多的 Divi 善良和免费的 Divi 布局包！如果您已经在列表中，只需在下面输入您的电子邮件地址，然后单击下载。您不会被“重新订阅”或收到额外的电子邮件。

下载文件

免费下载

加入 Divi 时事通讯，我们将通过电子邮件向您发送一份最终的 Divi 登陆页面布局包，以及大量其他令人惊叹的免费 Divi 资源、提示和技巧。跟随，您将很快成为 Divi 大师。 如果您已经订阅，只需在下面输入您的电子邮件地址，然后单击下载即可访问布局包。

您已成功订阅。请检查您的电子邮件地址以确认您的订阅并获得免费的每周 Divi 布局包！

订阅我们的 YouTube 频道

1.转到Divi Theme Builder并开始构建全局标题

转到 Divi 主题生成器

首先转到 WordPress 后端中的 Divi Theme Builder。

动画全局标题

从头开始构建全局标题

单击“添加全局标题”并继续选择“构建全局标题”。

动画全局标题

2. 构建全局标题块设计

部分设置

间距

进入模板编辑器后，您可以开始构建全局标题。我们正在确保我们有一个“块”设计，以便我们稍后可以将动画添加到两个不同的容器中；列+模块。打开您可以在模板编辑器中看到的部分并删除所有默认的顶部和底部填充。

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

动画全局标题

盒子阴影

接下来添加一个框阴影。

框阴影模糊强度：80px
阴影颜色：rgba(13,60,216,0.24)

动画全局标题

Z索引

并确保您也在高级选项卡中增加了该部分的 z 索引。这将确保全局标题内容将出现在所有页面/帖子内容的顶部。

Z指数：99999

动画全局标题

添加新行

列结构

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

动画全局标题

浆纱

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

使用自定义装订线宽度：是
天沟宽度：1
均衡柱高：是
宽度：100%
最大宽度：100%

动画全局标题

间距

接下来删除所有默认的顶部和底部填充。

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

动画全局标题

能见度

确保您也将行的溢出设置为“可见”。

水平溢出：可见
垂直溢出：可见

动画全局标题

列设置（所有三个）

背景颜色

完成行设置后，您还需要设置列的样式。打开每一列并相应地更改它们的背景颜色：

第 1 列背景颜色：#efefef
第 2 列背景颜色：#ffcb0f
第 3 列背景颜色：#2848ff

动画全局标题

间距

还为每列添加一些自定义的顶部和底部填充。

顶部填充：0.5vw（台式机），1vw（平板电脑和手机）
底部填充：0.5vw（台式机），1vw（平板电脑和手机）

动画全局标题

主要元素

为了确保所有列内容垂直居中，我们将向每列的主要元素添加三行 CSS 代码。

display: flex;
flex-direction: column;
justify-content: center;

动画全局标题

第 1 列 Z 索引

最后但并非最不重要的一点是，打开第 1 列设置并在可见性设置中增加 z 索引。

Z指数：10

动画全局标题

将菜单模块添加到第 1 列

选择菜单

是时候添加模块了，从第 1 列中的菜单模块开始。选择您选择的菜单。

动画全局标题

上传标志

接下来上传您的徽标。

动画全局标题

删除背景

继续删除模块的背景色。

动画全局标题

布局

转到设计选项卡并确保以下设置适用于布局：

样式：左对齐
下拉菜单方向：向下

动画全局标题

菜单文字设置

接下来设置文本设置的样式：

菜单字体：蒙特塞拉特
菜单文字颜色：#000000
菜单文字大小：0.7vw（桌面）、2vw（平板电脑）、3vw（手机）

动画全局标题

下拉菜单设置

随着下拉菜单设置。

下拉菜单行颜色：#ffffff

动画全局标题

图标设置

并更改汉堡菜单图标颜色。

汉堡菜单图标颜色：#2848ff

动画全局标题

浆纱

继续更改不同屏幕尺寸的徽标最大宽度。

徽标最大宽度：6vw（桌面）、9vw（平板电脑）、13vw（手机）

动画全局标题

间距

并通过添加一些左右边距来完成模块的设置。

左边距：2vw
右边距：2vw

动画全局标题

将代码模块添加到第 1 列

为大众响应性插入 CSS 代码

现在，在菜单模块中，我们已将视口宽度单位用于文本大小和间距值。我们这样做是为了确保您可以在不同的桌面屏幕尺寸上放置最多 8 个菜单项，而不会分成两行。我们需要确保菜单项之间的空间也是用 vw 单元创建的。为此，我们将向第 1 列添加一个代码模块并插入以下 CSS 代码行：

<style>
.et-menu>li {
padding-left: 1vw !important;
padding-right: 1vw !important;
}
</style>

动画全局标题

将社交媒体关注模块添加到第 2 列

添加社交网络

在下一栏，我们需要一个社交媒体关注模块。添加您选择的社交网络。

动画全局标题

单独重置社交网络风格

继续重置每个网络的设置。

动画全局标题

结盟

通过更改模块对齐来完成模块的设置。

模块对齐：居中

动画全局标题

将按钮模块添加到第 3 列

添加副本

转到下一列和最后一列。在那里，我们只需要一个按钮模块。添加一些您选择的副本。

动画全局标题

结盟

移至设计选项卡并更改按钮对齐方式。

按钮对齐：居中

动画全局标题

按钮设置

通过设置按钮样式来完成模块的设置。

为按钮使用自定义样式：是
按钮文字大小：1vw（桌面）、1.2vw（平板电脑）、2vw（手机）
按钮文字颜色：#ffffff
按钮边框宽度：0px

动画全局标题

按钮边框半径：0px
按钮字体：蒙特塞拉特
按钮字体粗细：超粗
按钮字体样式：大写

动画全局标题

3. 为元素添加匹配动画

全局标题动画组合 #1

动画全局标题

第 1 列动画

现在我们已经构建了全局标题，是时候添加动画了！要重新创建第一个动画，请打开第 1 列设置并添加以下动画：

动画风格：缩放
动画方向：向上
动画开始不透明度：100%

动画全局标题

第 2 列动画

接下来将以下动画设置添加到第 2 列：

动画风格：缩放
动画方向：下
动画延迟：500ms
动画开始不透明度：100%

动画全局标题

第 3 列动画

通过将以下动画分配给第 3 列来完成列设置：

动画风格：缩放
动画方向：向上
动画延迟：1000ms
动画开始不透明度：100%

动画全局标题

模块动画（所有三个模块）

完成列设置后，单独打开每个模块并为它们使用以下动画：

动画风格：淡入淡出
动画延迟：1500ms

动画全局标题