如何使用 Divi 的主题生成器设计博客帖子模板（免费下载）

博客帖子模板可能是您可以添加到博客站点的最重要的模板。 它提供了一种“神奇”地应用于前端所有博客文章的结构和设计，而博主只需要担心在后端写文章。 这通过简化创建过程以将您的帖子快速发布到网络上来大大节省时间。 使用 Divi Theme Builder，您将不必满足于看起来像网络上所有其他博客文章的无聊帖子模板。 您可以创建无数真实的设计（视觉上）并轻松地在整个模板中添加静态和动态内容的不同组合。

在这篇文章中，我们将介绍使用 Divi Theme Builder 构建博客文章模板所需了解的所有内容。 我们将涵盖很多内容，但我想您会惊讶于这些模板在您眼前变得如此简单。

现在让我们开始吧！

抢先看

这是我们将在本教程中创建的博客文章模板的快速浏览。

您可能已经从我们的数字营销布局包中注意到此设计的相似之处。 创建此帖子模板以匹配布局，以便您可以将其与数字营销布局包结合使用。

享受！

免费下载博客帖子模板

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

下载文件

免费下载

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

下载

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

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

什么是博客帖子模板，为什么需要一个？

博客文章模板是一个站点范围的模板，用于您网站上的所有（或部分）单个博客文章。 它是一个预先设计的模板，使用动态内容构建，因此任何新的或现有的帖子都将自动继承指定模板的布局和设计。

使用博客文章模板有几个令人信服的理由。 使用博客帖子模板的主要原因是为了简化博客流程。 拥有已经为您的帖子设计的现成模板可以通过消除动态设计帖子元素的需要并让博主有更多时间做他们最擅长的事情 - 编写内容，从而大大加快创建过程。 但这还不是全部！ 博客帖子模板可以在帖子中加入额外的元素（如评论、分享按钮和电子邮件选项），以提高用户参与度和转化率。

使用 Divi Theme Builder，创建博客帖子模板非常容易。 在 Divi 中构建博客文章模板的秘诀在于了解要使用哪些模块以及如何有效地将动态内容元素合并到模板中。

在我们开始一起构建博客文章模板之前，让我们首先了解一些可用于构建一个的工具。

博客帖子模板的构建块

博客帖子模板可以根据博客的需要而有所不同。 但通常，博客文章模板将由以下结构组成：

• 标题 - 帖子的顶部区域，通常包括帖子标题、特色图片和帖子元数据（类别、标签、作者、发布日期等）
• Post Content – 文章的主要内容。
• 相关帖子 - 指向读者可能感兴趣的其他文章的链接。
• 评论 – 供用户添加和回复有关帖子的评论的部分。
• 号召性用语——通常是电子邮件选择表单、社交分享图标或某种促销优惠。

Divi 模块和动态内容

可以使用 Divi 模块中固有的 Divi 内置动态内容功能在 Divi Theme Builder 中创建博客帖子模板。 有一些专门为帖子构建的 Divi 模块。 但是，大多数 Divi 模块都能够提取与帖子相关的可用动态内容。 以下是在 Divi 中设计博客文章模板时可用的一些选项的细分。

• 为帖子模板构建的 Divi 模块
  • 帖子导航模块 - 有助于提供上一个和下一个帖子的导航链接。
  • 帖子滑块模块 - 有助于提供按最近或按类别组织的帖子库。
  • 帖子标题模块 - 有助于在一个方便的模块中显示带有特色图片的帖子标题。
  • 帖子内容模块 - 帖子模板的必要模块，用于显示帖子内容。 帖子内容模块还包括可用作站点范围帖子内容的默认设计的设计选项。

• 所有 Divi 模块中可用的帖子模板的动态内容元素
  • 帖子/档案标题
  • 帖子摘录
  • 当前的日期
  • 网站标语
  • 作者简介
  • 帖子作者
  • 发布链接
  • 帖子分类
  • 发表评论数
  • 发布日期
  • 自定义字段

现在您对可用的工具有了一个很好的了解，让我们跳到如何从头开始在 Divi 中构建博客文章模板。

你需要什么开始

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

1. 如果您还没有安装并激活 Divi 主题（如果不使用 Divi 主题，则安装并激活 Divi Builder 插件）。
2. 确保您至少创建了一些博客文章，以便查看我们将构建的博客文章模板的结果。 确保在每个帖子中包含尽可能多的内容（即特色图片、类别等），以便您拥有真实帖子的好例子。

之后，您就可以开始为 Divi 中的博客文章构建新模板了。

如何在 Divi Theme Builder 中构建博客帖子模板

订阅我们的 YouTube 频道

与所有模板一样，博客文章模板是在 Divi Theme Builder 中创建的，这将允许您利用 Divi Builder 的强大功能完全从头开始构建模板。

创建新模板

从 WordPress 仪表板，导航到 Divi > Theme Builder。 然后点击“添加新模板”空白方块。

将模板分配给所有博客文章

添加新模板后，将弹出模板设置框，允许您将模板分配给整个网站的页面和/或帖子。 由于我们要为站点范围内的所有博客文章创建一个博客文章模板，因此选择“所有文章”并单击创建模板按钮。

创建自定义身体区域布局

接下来，单击模板的“添加自定义正文”区域，为帖子模板创建一个新的正文区域。 然后选择“构建自定义主体”。

选择“从头开始构建”选项以开始构建过程。

为帖子模板构建自定义正文布局

启动模板布局编辑器后，您可以使用 Divi Builder 自由地从头开始构建博客文章模板的整个主体。

首先，向默认的常规部分添加一列行。

然后，在添加模块之前，使用背景设计和一些填充更新部分设置，如下所示：

• 背景渐变左颜色：#8624e1
• 背景渐变右颜色：#3607a6
• 梯度方向：130度
• 起始位置：25%
• 背景图片：插入图片
• 使用视差效果：是
• 填充：7vw 顶部，7vw 底部

使用文本模块将帖子标题创建为动态内容

在单列行内，添加一个文本模块。

然后在将鼠标悬停在正文内容区域上时单击动态内容图标。

从列表中选择 Post/Archive Title 元素。

然后，单击 Post/Archive Title 元素上的齿轮图标并使用 h1 标签更新前后输入区域，如下所示：

前：

<h1>

后：

</h1>

现在使用以下设计设置设计标题：

• 文字字体：Roboto
• 文字文字大小：16px
• 文本行高：1.8em
• 文本对齐：居中
• 标题字体：Roboto
• 标题字体粗细：粗体
• 标题文字大小：60 像素（桌面）、40 像素（平板电脑）、32 像素（手机）
• 标题线高度：1.2em

使用图像模块添加特色图像作为动态内容

标题部分到位后，让我们为帖子模板添加特色图片。 为此，请添加另一个具有三分之二和三分之一列布局的常规部分。

然后在左栏中添加一个图像模块。

然后为图像添加特色图像动态内容元素。

设计图像模块

跳转到设计选项卡并按如下方式自定义图像：

• 图像对齐：居中
• 边距：-9vw（桌面），0vw（平板）
• 圆角：8px
• 盒子阴影：见截图
• 框阴影垂直位置：16px
• 框阴影模糊强度：96px
• 框阴影传播强度：-24px

将 Post Author 和 Author Bio 添加到 Blurb 模块作为动态内容

接下来，我们将使用博客模块添加 Post Author 和 Post Author Bio。 因此，继续将博客模块添加到右列。

在简介设置中，将鼠标悬停在标题输入框上，然后单击动态内容图标。 然后为 Title 内容添加 Post Author 动态内容元素。

接下来，打开 Post Author 设置并更新 before 输入，如下所示：

• 之前：作者

对于简介模块的正文内容，单击动态内容图标并从列表中选择“作者简介”动态内容元素。

对于blurb模块的Image，添加“Post Author Profile Picture”作为动态内容。

Design Post Author 和 Bio Blurb 模块

现在优化图片的设计如下：

• 图像/图标放置：左
• 图像圆角：50%
• 标题字体：Roboto
• 标题字体粗细：粗体
• 标题行高度：1.3em
• 正文字体：Lato
• 车身线高：1.4em
• 图片宽度：50px

将帖子类别作为动态内容添加到 Blurb 模块

在刚刚创建的 Author 和 Author Bio Module 下，在其下添加另一个简介模块并为 Title 选择 Post Categories 动态内容元素。

然后使用图标更新简介，如下所示：

• 使用图标：是
• 图标：见截图

设计后期分类模糊模块

更新设计设置如下：

• 图标颜色：#dddddd
• 图像/图标放置：左
• 使用图标字体大小：是
• 图标字体大小：20px
• 标题字体：Roboto
• 标题字体粗细：中等
• 标题文字颜色：#f92c8b
• 标题文字大小：16px
• 标题行高度：20px
• 填充：左16px

将评论计数作为动态内容添加到 Blurb 模块

要为博客帖子模板添加帖子评论计数，请复制刚刚创建的模糊模块。

然后使用 Post Comment Count 动态内容元素更新 Title 内容。

由于评论计数只显示一个数字，我们需要在数字后用一些添加文本来补充数字。 为此，请打开 Post Comment Count 设置并更新以下内容：

之后：评论

然后更新图标如下：

• 使用图标：是
• 图标：见截图

将发布发布日期作为动态内容添加到 Blurb 模块

对于最后一段元数据，复制带有评论计数的模糊模块。 然后使用“发布发布日期”动态内容元素更新标题内容。

提示：您可以随时打开 Post Publish Date 动态元素的设置来更改日期显示的格式。

然后更新图标如下：

• 使用图标：是
• 图标：见截图

添加带有内容设计设置的帖子内容模块

有了帖子标题、特色图片、帖子作者和元数据，我们就可以准备主要帖子内容了。

添加具有一列布局的新行。

然后将帖子内容模块添加到该行。

此帖子内容模块将显示帖子的主要内容。 此外，我们可以更新设计设置，以便为使用默认编辑器输入的所有帖子内容建立默认设计。 我们可以像更新任何其他模块一样更新 Post Content Module 的设置。 并且我们可以在更新模块时查看模块提供的模拟内容。

打开帖子内容模块设置并更新以下图像设置：

• 图片圆角：8px
• 图像框阴影：见截图
• 框阴影垂直位置：16px
• 框阴影模糊强度：96px
• 框阴影传播强度：-24px

接下来，当用户使用默认编辑器创建博客文章时，我们需要为所有可能的文本内容元素设置设计。 打开文本选项组切换，显示文本设计类型的 5 个不同选项卡——段落、链接、无序列表、有序列表和块引用。

然后更新每个选项卡下的以下选项。

继续更新每个标题级别的标题文本设置 - h1、h2、h3、h4、h5、h6。

• 标题字体：Roboto
• 标题字体粗细：粗体
• 标题文字大小 (h1)：56 像素（桌面）、42 像素（平板电脑）、28 像素（手机）
• 标题文字大小 (h2)：45 像素（桌面）、35 像素（平板电脑）、24 像素（手机）
• 标题文字大小 (h3)：40 像素（桌面）、30 像素（平板电脑）、20 像素（手机）
• 标题文字大小 (h4)：32 像素（桌面）、24 像素（平板电脑）、18 像素（手机）
• 标题文字大小 (h5)：28 像素（桌面）、20 像素（平板电脑）、16 像素（手机）
• 标题文字大小 (h6)：24 像素（桌面）、18 像素（平板电脑）、14 像素（手机）

添加帖子导航模块

在 Post Content Module 下，添加一个带有 Post Navigation Module 的新的单列行。

更新上一个和下一个链接文本如下：

• 上一个链接： 上一个： %title
• 下一个链接： 下一个： %title

然后更新帖子导航设计如下：

• 链接字体：Roboto
• 链接字体粗细：粗体
• 链接文字颜色：#f92c8b

添加相关帖子部分

在帖子导航之后，我们准备将“相关帖子”部分添加到我们的博客帖子模板中。 这将有助于根据正在查看的帖子的当前类别为用户提供建议的帖子。

使用文本模块添加相关帖子标题

在添加博客模块以拉入相关帖子之前，我们需要为该部分创建一个静态标题。 为此，请创建一个具有一列行的新部分。 然后向该行添加一个文本模块。

使用以下 H2 标题更新文本内容：

<h2>You May Also Like...</h2>

然后更新标题文字设计如下：

• 标题 2 字体：Roboto
• 标题 2 文字大小：48 像素（桌面）、38 像素（平板电脑）、28 像素（手机）

现在我们的标题已经到位，我们准备添加我们的相关帖子。

使用博客模块为当前类别的帖子添加相关帖子

在包含标题的文本模块下，添加一个新的博客模块。

然后更新博客模块内容如下：

• 帖子数：3
• 包含的类别：当前类别
• 摘录长度：120
• 显示作者：NO
• 显示分类： 没有
• 显示分页：否

这些设置最重要的方面是“当前类别”选择。 这将允许帖子模板提取与当前帖子共享同一类别的最新帖子。

博客模块内容设置到位后，跳转到设计设置并更新以下内容：

• 布局：网格
• 标题字体：Roboto
• 标题文字大小：14px
• 标题行高度：1.3em
• 正文字体：Lato
• 元字体：Lato
• 元文本颜色：#f92c8b
• 元文本大小：13px
• 网格布局圆角：20px

继续更新带有框阴影的设计，如下所示：

• 网格布局边框宽度：0px
• 盒子阴影：见截图
• 框阴影垂直位置：16px
• 框阴影模糊强度：96px
• 框阴影传播强度：-24px

添加评论模块

此博客文章模板的最后一部分将包含评论。 要向帖子添加评论，只需创建一个新的一列行并将评论模块放入其中。

设计评论模块

现在剩下要做的就是自定义评论模块的设计以匹配我们的模板。 更新以下设计设置：

• 背景颜色：#f2f5f9
• 字段背景颜色：#ffffff
• 字段焦点背景颜色：#ffffff
• 字段焦点文本颜色：#222222
• 字段边距：底部 3px
• 字段填充：顶部 18px，底部 18px
• 字段字体：Lato
• 字段文本大小：16px
• 字段线高：1.4em

继续更新设置如下：

• 图像圆角：60px
• 标题字体：Roboto
• 标题文字大小：26 像素（桌面）、20 像素（平板电脑）、15 像素（手机）
• 标题行高度：1.3em
• 元字体：Lato
• 评论字体：Lato
• 评论文字颜色：#222222
• 填充：顶部 5%，底部 5%，左侧 5%，右侧 5%

最后，自定义评论的按钮样式如下：

• 按钮文字大小：14px
• 按钮边框宽度：0px
• 按钮边框半径：4px
• 按钮字母间距：5px（桌面），5.5px（悬停）
• 按钮字体：Roboto
• 按钮字体粗细：粗体
• 按钮字体样式：大写 (TT)
• 按钮填充：顶部 16 像素，底部 16 像素

将节分隔符添加到页眉

在设计帖子模板时，不要忘记您可以使用的所有惊人的设计选项。 例如，我们可以给标题部分一个分隔线设计。 为此，请返回页面顶部并打开包含标题的顶部部分的设置。 然后更新以下内容：

• 底部分隔线样式：见截图
• 分隔线颜色：#ffffff
• 分频器高度：10vw
• 分隔线翻转：水平

不要忘记保存布局和主题生成器的设置，以便保存您的更改。

就是这样！ 让我们看看最终的结果。

最后结果

要查看最终结果，我们可以打开 Divi 站点中的任何博客文章（因为模板已分配给所有博客文章）。

这是从后端的帖子编辑器查看时的示例帖子。

这是前端的帖子，我们的博客帖子模板就位。

这是在平板电脑和手机显示屏上：

使用 Divi Builder 创建带有博客帖子模板的博客帖子

如果您愿意，您可以轻松部署 Divi Builder 以使用像这样的博客文章模板来设计博客文章。 使用 Divi Builder 创建和设计的任何内容都将显示在模板的发布内容模块区域内。

最后的想法

我希望本教程可以作为使用 Divi Builder 从头开始​​创建自己的博客文章模板的一个很好的起点。 不要忘记花时间考虑所有可用的工具以及您希望如何构建帖子模板布局。 在整个博客帖子模板中使用尽可能多的动态内容元素始终很重要，以便更好地简化与博客相关的创建过程。 有了漂亮的模板，博主就可以真正专注于内容创建，而模板会自动完成所有繁重的设计工作。

您是否使用 Divi Theme Builder 构建了博客文章模板？ 让我们知道您的想法。

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

干杯!