如何为您的 Divi 存档页面提供砖石布局

为了给你的存档页面一个自定义的砖石布局，我们可以使用 Divi 主题构建器来设计一个自定义的动态存档页面模板。 在 Divi 中，在 Divi Theme Builder 出现之前，开发人员不得不依赖手动自定义存档页面模板主题文件上的 PHP 代码，然后纯粹使用外部 CSS 对页面模板进行样式设置。 这使得创建砖石布局更加困难。 但是现在，有了 Divi Theme Builder，这个过程变得简单而愉快！

在本教程中，我们将向您展示如何创建动态显示存档页面标题、副标题和博客文章的存档页面模板。 而且，使用博客帖子模块，我们可以轻松地以砖石网格布局显示我们的帖子存档。

让我们开始吧！

抢先看

这是我们将在本教程中一起设计的存档页面模板的快速浏览。 在此图像中，它用于显示所有具有“WordPress”类别的帖子。

免费下载存档页面模板

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

下载文件

免费下载

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

下载

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

要将模板布局导入您的网站，您需要转到 Divi 主题构建器并使用可移植性选项将 .json 文件导入主题构建器。

让我们进入教程好吗？

你需要什么开始

首先，您需要执行以下操作：

1. 如果您还没有，请安装并激活已安装的 Divi 主题（如果不使用 Divi 主题，请安装并激活 Divi Builder 插件）。
2. 由于我们将创建一个存档页面模板，如果您想查看结果，您需要在您的网站上创建一些博客文章，并为其分配作者、类别和/或标签。

之后，您就可以开始了。

了解可用于存档页面模板的模块和动态内容

在为 Divi 站点构建存档页面模板时，重要的是了解您可以使用哪些工具，以便您可以有效构建动态显示正确信息的模板。 对于存档页面模板，我们最感兴趣的是每当用户访问存档页面时显示当前页面的帖子。 例如，如果用户单击类别链接“商业”，他们应该看到一个存档页面，其中显示了类别为“商业”的所有帖子。 一些 Divi 模块具有内置选项，可以使在模板上显示动态内容变得简单。

博客模块

博客模块是应该用于显示存档页面模板的主要模块。 这是因为具有显示当前页面的帖子的内置选项。

这基本上是告诉 Divi 显示通常在用户访问页面时生成的帖子。 因此，将选项设置为显示“当前页面的帖子”，用户将能够查看存档页面并正确显示该当前页面的帖子。

帖子/档案标题（动态内容）

显示帖子/存档页面标题的一种更简单的方法是使用常规的 Divi 模块，然后使用所有 Divi 模块中可用的动态内容功能拉入帖子/存档页面标题。

例如，您可以使用文本模块，然后将帖子/存档页面标题作为动态内容添加到正文内容中。 然后，您可以随意设置标题的样式。

现在您了解了创建存档页面模板所需的工具，让我们一起创建一个。

如何使用砌体布局创建 Divi 档案页面模板

要创建具有砖石布局的存档页面模板，您真正需要做的就是使用主题构建器为所有存档页面设计一个新模板。

为所有存档页面创建和分配自定义模板

首先，转到您的 WordPress 仪表板并导航到 Divi > Theme Builder。 然后单击空白的灰色框区域以添加新模板。

接下来，将模板分配给所有存档页面。

向模板添加新的自定义正文区域

要为模板构建自定义主体，请单击“添加自定义主体”区域，然后选择“构建自定义主体”。

然后选择选项“从头开始构建”。

添加动态存档标题

在模板布局编辑器中，使用背景颜色更新默认部分设置。

• 背景颜色：#eeeeee

然后在常规部分内创建一个新的单列行。

然后向该行添加一个文本模块。

删除默认正文内容，然后单击“使用动态内容”图标并选择“发布/存档标题”选项。

发布/存档标题元素到位后，单击齿轮图标打开设置。

然后更新 Before 和 After 输入区域，将内容包裹在 H1 标签中，并在动态标题后添加额外的静态内容，如下所示：

前：

<h1>

后：

</h1>

出于 SEO 的目的，我们需要将标题包装在 H1 标签中。

样式动态存档标题

一旦动态内容就位，我们可以使用以下方式对其进行样式设置：

• 标题字体：Mulish
• 标题字体：重量：重
• 标题文本对齐方式：居中
• 标题文字颜色：#3a405a
• 标题文字大小：70px（桌面），40px（平板电脑和手机）

添加动态存档子标题文本

因为我们可以用自定义 HTML 包装我们的动态存档页面标题，所以我们可以添加一个副标题，将动态存档页面标题拉入副标题文本中。

为此，请在具有标题的前一个文本模块下创建一个新的文本模块。

删除默认的正文文本并将帖子/存档标题动态内容添加到正文（就像我们之前所做的那样）。

打开帖子/存档标题设置并在内容前后添加以下内容。

前：

<h3>Here are the articles on 

后：

 </h3>

现在标题将与前一行文本一致显示。

样式动态存档标题

一旦动态内容就位，我们可以通过更新以下 H3 设置来设置样式：

• 标题 3 字体：Mulish
• 标题 3 文本对齐方式：居中

使用博客模块动态显示当前页面的帖子

有了动态存档页面标题，我们需要添加博客模块来显示当前存档页面的帖子。

添加新部分

在我们添加博客模块之前，让我们向页面添加一个新部分。

添加新的一列行

然后，向新部分添加一个新的单列行。

然后打开行设置并更新以下内容：

• 使用自定义装订线宽度：是
• 天沟宽度：2；
• 宽度：95%

添加博客模块以动态显示当前页面的帖子

现在我们需要向该行添加一个博客模块。

请记住，我们必须确保为 archvie 页面启用当前页面的帖子以提取正确的帖子存档。 更新内容选项如下：

• 当前页面的帖子：是

设计博客模块

内容设置到位后，让我们对设计进行一些更改。 在设计选项卡下，按如下方式更新布局：

• 布局：网格

现在返回内容选项卡并将以下背景颜色添加到网格项：

• 背景颜色：#3a405a

更新标题文本样式

• 标题字体：Mulish
• 标题字体粗细：粗体
• 标题文字颜色：#eee
• 标题文字大小：34px
• 标题行高度：1.3em

更新正文样式

• 正文字体：蒙特塞拉特
• 正文颜色：#ffffff
• 车身线高：2em

更新元文本样式

• 元字体：蒙特塞拉特
• 元文本颜色：#ffb100

更新分页样式

• 分页字体粗细：粗体
• 分页文字颜色：#3a405a

此时，我们的存档页面模板已启动并运行，包括页面标题和博客文章（以砖石布局），它将动态显示当前存档页面的文章。

最后结果

要测试结果，请访问您网站上不同类型的存档页面。

这是一个类别存档页面模板的示例，显示类别“WordPress”的所有帖子。

这是一个作者存档页面模板，显示特定作者的所有帖子。

这是一个标签存档页面，显示所有带有“新闻”标签的帖子。

这是一个日期存档页面模板，显示 2019 年 10 月的所有帖子。

最后的想法

一旦您知道如何使用 Divi 的主题构建器创建新的存档模板，为帖子添加砖石布局就很容易了。 诀窍是使用 Divi 的内置选项将存档页面标题显示为动态内容，然后使用博客模块以砖石网格布局动态显示当前页面的帖子。 希望通过定位那些容易被忽视的存档页面，这将有助于提升您网站的整体设计。

我期待在评论中收到您的来信。

干杯!