在创建Divi网站时，了解如何向Divi全局标题添加动态网站标题和标语将很有用。 这样做有几个充分的理由。 一方面，并非所有站点都有徽标。 网站标题是很好的徽标替代。 另一个原因是通过在您的网站上包含所有人都可以看到的重要信息来提升您的品牌。
在本教程中，我们将向您展示如何向Divi全局标题添加动态网站标题和标语。 该解决方案将从WordPress后端动态提取网站标题和标语。 此外，您将拥有Divi的所有强大设计选项，可根据需要自定义标题和口号！
可能的结果
这是我们将在本教程中构建的设计的预览。
请注意网站标题和标语在动态显示的标题的顶部中间。
免费下载
加入 Divi Newlsetter，我们将通过电子邮件向您发送 Divi Ultimate Landing Page Layout Pack 的副本，以及更多内容 RESSOURCES，免费和惊人的 Divi 提示和技巧。 跟随它，您将立即成为Divi Master。 如果您已经订阅，只需在下面输入您的电子邮件地址，然后单击下载以访问布局包。下载
要导入模板，请转至Divi>主题生成器。
单击页面右上方的可移植性图标。
在可移植性弹出窗口中，选择导入选项卡，然后从计算机中选择下载文件。
然后点击导入按钮。
完成后，整体标题模板将在Divi Theme Builder中可用。
接下来，我们将继续进行设计。
网站标题和WordPress标语
每个WordPress网站都有一个网站标题和一个标语。 网站标题基本上是网站的名称，标语是一个简短的短语，通常可以解释它的含义。
在安装WordPress时添加站点标题并忘记它的情况并不少见。
而且，有些人甚至没有意识到标语的存在，更不用说花时间更新它了。 此外，当使用 Divi主题，默认情况下，网站标题和标语在您的网站上是不可见的，因此很容易忽略它们。 但是，网站标题和标语是网站的基本要素，会被搜索引擎识别。
您可以随时通过转到WordPress仪表板并导航到“设置”>“常规”来在WordPress中查找和更新网站标题和标语。
或者，您可以使用主题定制器采用其他方法来更新常规设置下的网站标题。
现在我们知道了网站标题和标语在WordPress后端的位置，让我们探索如何将它们添加到Divi标头中！
如何在Divi中将动态网站标题和标语添加到全局标题中
导入预先设计的全局标题模板
在本教程中，我们将专注于如何将动态网站标题和标语添加到现有标题中，而不是从头开始创建完整的标题。 这将节省您的时间并提高清晰度。 因此，为了开始此标题设计，我们将从我们的模板中导入预定义的全局标题模板 第四主题生成器包 .
一旦有了 下载了 创建 主题 ，解压文件，找到JSON文件 网站模板 默认。
然后转到Divi> Theme Builder。
单击右上角的可移植性图标。 在弹出的可移植性窗口中，从中选择 JSON 文件 网站模板 默认，然后单击“导入”按钮。
将模板添加到主题构建器后，删除页脚模板，然后单击以编辑整体页眉。
在标题中添加动态网站标题和标语
在模板布局编辑器内部，您将看到已经设计好的预制标头。 我们可以立即开始进行自定义。
移动徽标
首先，将显示徽标的图像模块（动态）从顶行的中间列拖动到顶行的左列。
添加号召性用语模块以显示网站标题和标语
然后将一个新的号召性用语模块添加到第一行的中间列（徽标所在的位置）。
我们将使用号召性用语模块显示网站标题和标语。
但是在开始添加内容之前，请先选择“否”以使用背景色。
添加动态网站标题
在内容设置下，将鼠标悬停在标题输入框上，然后单击“使用动态内容”图标。 然后从列表中选择“站点标题”。
添加动态网站口号
然后，将鼠标悬停在正文区域上，然后选择“使用动态内容”图标。 然后从列表中选择“网站标语”。
添加动态首页链接
网站标题通常会在单击时重定向到主页，尤其是在替换徽标时。 要将整个课程重定向到主页，请将主页链接作为动态内容添加到课程链接URL。
网站标题和口号的文字设计
现在，网站标题和标语将动态显示在标题上。 我们现在要做的就是添加一些样式。 记住，我们需要自定义标题文本来设计站点标题，而正文文本来设计标语。
跳转到“设计”选项卡，并更新以下内容：
- 标题字体：Heebo
- 标题字体重量：粗体
- 标题字体样式：TT
- 标题文字大小：32像素（桌面），24像素（平板电脑和手机）
- 标题字母间距：0.3em
- 身体字体：Roboto
- 身体字体样式：斜体
- 正文文字颜色：
- 正文文字大小：13px
- 正文字母间距：0.1em
- 车身高度：1em
为了帮助居中，请通过在促销说明中添加以下自定义CSS来去除正文文本下方的默认填充：
padding-bottom：0px
其他设计调整
对于本教程的最后一部分，我们将对标题进行一些其他设计调整，以确保项目在每一列中保持垂直居中，并为按钮提供独特的设计。 我们还将在波浪线前后添加一条波浪线（仅用于踢球）。
垂直居中列/内容
现在，第一行是活动的“均衡列高”，它使用flex属性。 我们可以通过添加一个小的CSS片段来利用这一点，以确保所有列在行内保持垂直居中。 为此，请打开第一行的设置，然后将以下CSS添加到Main Element：
align-items：居中;
使用按钮更新列
接下来，打开第一行中第3列的设置，并取出背景颜色和填充。
更新按钮背景
然后打开按钮模块设置，并使用新的背景渐变更新背景，如下所示：
- 渐变背景左侧颜色：#ffffff
- 右侧背景渐变颜色：＃1dbf73
- 渐变方向：135deg
- 开始位置：10％
- 结束位置：0％
在标语之前和之后添加字符
可以通过点击齿轮图标来更改每个动态内容项。 要在标语中添加字符之前和之后，请打开包含标语的号召性用语模块的设置，然后单击网站标语动态内容上的编辑图标。 然后将字符添加到条目之前和之后。
最终结果
要查看结果，请打开网站上的任何页面。 您应该会看到动态站点标题和标语显示精美！
最后的想法
您可以自定义带有动态网站标题和标语的整体标题，这真是太好了。 这似乎对许多站点都有用。 我也喜欢这样的想法，除了徽标之外还包括网站标题和标语，以更强大地代表品牌。
Sumber: 优雅的主题
