WordPress divi主题

如何为您的 Divi 存档页面提供砌体布局

| 4月 26, 2022 | Divi主题使用教程 | 0 条评论

5分钟生成10篇英文软文article forge软件试用

要为您的存档页面提供自定义砌体布局,我们可以使用 Divi 主题构建器来设计自定义动态存档页面模板。 在 Divi 中,在 Divi Theme Builder 出现之前,开发人员必须依靠手动自定义存档页面模板主题文件上的 PHP 代码,然后纯粹使用外部 CSS 设置页面模板的样式。 这使得创建砌体布局变得更加困难。 但是现在,有了 Divi Theme Builder,这个过程变得简单而愉快!

google广告开户

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

让我们开始吧!

抢先看

这是我们将在本教程中共同设计的存档页面模板的快速浏览。 在这张图片中,它被用来显示所有“WordPress”类别的帖子。

具有砖石布局的 divi 存档页面模板

免费下载存档页面模板

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

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

具有砖石布局的 divi 存档页面模板

具有砖石布局的 divi 存档页面模板

让我们来看看教程好吗?

WordPress divi主题

你需要什么开始

要开始,您需要执行以下操作:

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

之后,您就可以出发了。

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

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

博客模块

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

具有砖石布局的 divi 存档页面模板

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

帖子/存档标题(动态内容)

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

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

具有砖石布局的 divi 存档页面模板

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

fiverr建站WordPress程序员

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

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

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

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

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

具有砖石布局的 divi 存档页面模板

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

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

独立站选品工具

具有砖石布局的 divi 存档页面模板

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

具有砖石布局的 divi 存档页面模板

添加动态存档标题

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

  • 背景颜色:#eeeeee

具有砖石布局的 divi 存档页面模板

高质量外链购买

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

具有砖石布局的 divi 存档页面模板

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

具有砖石布局的 divi 存档页面模板

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

JasperAI 10000字免费额度试用

具有砖石布局的 divi 存档页面模板

一旦 Post/Archive Title 元素就位,通过单击齿轮图标打开设置。

具有砖石布局的 divi 存档页面模板

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

前:

WordPress备份工具updrafplus
<h1>

后:

</h1>

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

具有砖石布局的 divi 存档页面模板

样式动态存档标题

一旦动态内容就位,我们可以使用以下设置样式:

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

具有砖石布局的 divi 存档页面模板

添加动态存档子标题文本

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

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

具有砖石布局的 divi 存档页面模板

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

具有砖石布局的 divi 存档页面模板

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

前:

<h3>Here are the articles on 

后:

 </h3>

具有砖石布局的 divi 存档页面模板

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

样式动态存档标题

动态内容到位后,我们可以通过更新以下 H3 设置来设置样式:

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

具有砖石布局的 divi 存档页面模板

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

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

添加新部分

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

具有砖石布局的 divi 存档页面模板

添加新的一列行

然后,将新的一列行添加到新部分。

具有砖石布局的 divi 存档页面模板

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

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

具有砖石布局的 divi 存档页面模板

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

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

具有砖石布局的 divi 存档页面模板

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

  • 当前页面的帖子:是

具有砖石布局的 divi 存档页面模板

设计博客模块

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

具有砖石布局的 divi 存档页面模板

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

  • 背景颜色:#3a405a

具有砖石布局的 divi 存档页面模板

更新标题文本样式
  • 标题字体:Mulish
  • 标题字体粗细:粗体
  • 标题文字颜色:#eee
  • 标题文字大小:34px
  • 标题行高:1.3em

具有砖石布局的 divi 存档页面模板

更新正文文本样式
  • 正文字体:蒙特塞拉特
  • 正文文本颜色:#ffffff
  • 车身线高:2em

具有砖石布局的 divi 存档页面模板

更新元文本样式
  • 元字体:蒙特塞拉特
  • 元文本颜色:#ffb100

具有砖石布局的 divi 存档页面模板

更新分页样式
  • 分页字体粗细:粗体
  • 分页文字颜色:#3a405a

具有砖石布局的 divi 存档页面模板

至此,我们的存档页面模板启动并运行,页面标题和博客帖子(在砌体布局中)将动态显示当前存档页面的帖子。

最后结果

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

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

具有砖石布局的 divi 存档页面模板

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

具有砖石布局的 divi 存档页面模板

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

具有砖石布局的 divi 存档页面模板

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

具有砖石布局的 divi 存档页面模板

最后的想法

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

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

干杯!

5分钟生成10篇英文软文article forge软件试用
tiktok
WordPress divi主题