概述和审查 Divi Life 的标题布局包

Divi Life 的 Header Layout Pack 是 Divi Theme Builder 的一组标题，可以设计成适合任何 Divi 网站的样式。 标题通过添加了代码的新样式从人群中脱颖而出。 布局包包括六个标题设计，每个设计具有三种样式。 在本文中，我们将查看标题布局包，以帮助您确定是否适合您的需求。

导入 Divi Life 标题布局包

在将布局与 Divi 主题生成器一起使用之前，您需要将它们导入到您的 Divi 库中。 幸运的是，这是一个简单明了的过程：

1. 下载布局并将其解压缩到计算机上的文件夹中。
2. 转到 WordPress 仪表板菜单中的Divi > Divi 库。
3. 选择屏幕顶部的导入和导出。
4. 在弹出窗口中选择Import ，选择Choose File ，然后导航到要上传的布局（如果要一次上传所有布局，请选择ALL-Divi-Life-Header-Templates 。
5. 单击导入 Divi Builder 布局并等待上传完成。

这些布局现在将在您的库中可用。 在上面的示例中，我选择上传所有模板。 Theme Builder 现在可以访问所有布局。 您只需要对 Header 1 进行代码和菜单调整。其余部分照常工作。

在 Divi Theme Builder 中创建全局标题

打开 Divi Theme Builder 并单击以添加全局标题。 选择从库中添加。

选择名为Your Saved Layouts的选项卡，然后选择所需的布局。 等待它导入。

单击编辑图标以自定义布局。

我选择了 Header-1-a。 这显示了线框视图中的布局。 它包括一个带有自定义 CSS 和 JS 的代码模块。 许多模块包括自定义 CSS 的类 ID。 某些代码可能无法在主题构建器预览中运行。 我建议在前端查看标题。

如果您想进行更改并且不希望在进行更改之前显示标题，那么您可以考虑创建一个测试页面并将标题分配给该页面，然后再将其设置为全局标题。

更改内容和样式

接下来，您只需选择菜单、添加徽标并自定义颜色以匹配您的网站。 标头使用标准模块，因此它的工作方式与任何标头一样。 我在上面的例子中选择了我的菜单。

该按钮已使用自定义样式。 只需添加您设计的颜色和字体。 单击以保存更改。

另外，请确保在主屏幕上保存更改。 我已将标题的一个版本添加到特定帖子，因此我可以在将其放入默认网站模板并使其全局化之前测试标题。

标题示例

下面是模板在我的测试站点上的外观。 6 种布局具有预先设计的浅色、深色和亮色版本。 这样可以更轻松地选择适合您设计的标题，然后根据您的需要进行调整。 它们还有在悬停时改变颜色的按钮。

我们将看看它们具有不同背景颜色和屏幕尺寸的组合。 我正在使用 Pizzeria 布局包中的主页和登录页面布局。

标题 1 布局

标题 1 包括代码模块、菜单、搜索和用于创建 CTA 的按钮。

导入过程不会正确保留值，因此需要更改 CSS 中的三行。

此外，菜单需要重命名，CSS 类需要添加到菜单中。 幸运的是，所有这些调整都很容易做到。 说明在文档中。 这是我在这次审查期间唯一一次需要文档。

结果是一个优雅的菜单，左侧放置了三个主要菜单项的分隔线，右侧放置了菜单的其余部分，一个在搜索字段内带有图标的搜索框和一个大的 CTA 按钮。 这是它在浅色背景下的外观。 阴影将页眉与页面分开。

这是深色背景。 我将鼠标悬停在 CTA 上以显示它会改变颜色。

滚动时标题会降低高度。 元素保持相同的大小。

这是平板电脑视图。 菜单项放置在下拉菜单中。 具有 CSS 类的三个项目包括使它们从其他项目中脱颖而出的样式。

电话视图将 CTA 堆叠在徽标下方，并且还保留了具有 CSS 类的项目的样式。

标题 2 布局

Header 2 使用带有 CSS 和 JS、blurb、图像、文本、社交媒体、菜单和按钮模块的代码模块。

这是标题 2A。 这是它在深色页面上的外观。 标题不覆盖网站的整个宽度。 顶部菜单是透明的，包括社交按钮。 底部有 CTA 和联系信息。 电话号码是可点击的。

这是浅色页面上的设计。 我喜欢这个 CTA 的突出之处。

滚动后，顶部菜单随页面滚动，底部菜单贴在顶部。

这是平板电脑视图。 顶部菜单随页面滚动而底部菜单保持不变。

这是电话视图。 CTA 堆叠在菜单下方。 标题随页面一起滚动。

标题 3 布局

标题 3 的模块包括代码、社交媒体关注、菜单和按钮。

这是带有浅色背景的标题 3B。 顶部包括社交按钮和搜索，而底部则添加 CTA。

这是它在深色背景下的外观。

顶部菜单随页面滚动而底部菜单粘在屏幕顶部。

这是平板电脑视图。

以下是手机视图堆叠元素的方式。

标题 4 布局

标题 3 包括代码、几个简介、一个按钮、菜单和社交媒体关注模块。

这是浅色背景下的 Header 3C。 顶部包括联系信息和 CTA，而底部显示社交按钮。

这是它在深色背景下的外观。 在这种背景下，原始颜色看起来很棒。 在此示例中，我将鼠标悬停在 CTA 上。

这是滚动后的样子。 顶部部分随站点滚动，底部部分固定。

这是平板电脑视图。

电话视图堆叠元素。

标题 5 布局

标题 5 包括一个代码模块、几个简介、社交媒体关注和菜单模块。

这是深色背景下的 Header 5C。 顶部包括可点击的电话号码、社交按钮和联系表格的链接。 红色和深灰色非常突出。

它在浅色背景下看起来也不错。 盒子阴影更明显。

当下半部分粘在屏幕顶部时，菜单的上半部分继续滚动。

这是平板电脑视图。

这是手机视图。 我喜欢顶部部分内容的堆叠方式。

标题 6 布局

标题 6 包括一个代码模块、4 个简介、一个社交媒体关注模块和一个菜单模块。

这是深色背景下的标题 6B。 这个有三个部分：顶部是社交按钮，中间是联系信息，底部是菜单链接。

这是浅色背景下的标题。

标题的顶部 2 部分滚动而底部是粘性的。 当它粘在屏幕顶部时，它会在底部菜单中添加一个框阴影。

这是平板电脑视图。 它将电话号码移到顶部。

这是手机视图中的设计。

购买

Header Layout Pack 可从 Divi Life 以 49 美元的价格购买（全年剩余时间以 5 美元的价格出售）。 它供您和您的客户在无限站点上使用，并包括对所有未来更新的访问。 它还包括支持和文档。

结束的想法

Divi Theme Builder 的标题布局包是一组有趣的布局。 CSS 和 JavaScript 添加了通常在标题中不可用的样式。 这有助于使标题具有与标准标题大不相同的外观。 由于每个设计都有多个预样式选项，因此很容易找到适合您网站的内容，而无需进行大量修改。 样式已经适合 ET 的免费 Divi 布局。

标题看起来确实经过专业设计，我发现它们易于使用。 我只看过其中的几个。 使用 Header 1 是唯一需要复杂步骤的布局。 如果您阅读说明（猜猜我是怎么知道的），这并不难。 请记住，它确实需要比其他步骤更多的步骤。

如果您对 Divi Theme Builder 的专业设计标题感兴趣，Divi Life 的标题布局包值得一看。

我们希望听到您的意见。 您是否尝试过 Divi Life 的 Header Layout Pack？ 请在评论中告诉我们您对此的看法。

精选图片来自 PureSolution/shutterstock.com