如何使用 Divi 的主题生成器拆分您的博客帖子模板

创建网站时，您很可能会在其中包含一个博客页面和博客文章。 当然，博客策略最重要的部分是创建高质量的博客文章内容，但其中的设计部分对您的策略成功也起着重要作用。 使用 Divi 创建网站时，您可以通过创建具有动态内容的帖子模板来简化您的博客帖子在 Divi 主题生成器中的外观。 我们一直在我们的博客上分享博客文章模板，以帮助您加快流程，但如果您特别想创建分屏博客文章，您会喜欢这篇文章。 我们将逐步向您展示如何操作，您也可以免费下载模板 JSON 文件！

让我们开始吧。

预览

在我们深入学习教程之前，让我们快速浏览一下不同屏幕尺寸的结果。

桌面

移动的

免费下载分屏博客帖子模板

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

下载文件

免费下载

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

下载

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

1.转到Divi Theme Builder并添加新的帖子模板

转到 Divi 主题生成器并添加新模板

首先转到Divi Theme Builder。 在那里，添加一个新模板。

在所有帖子上使用模板

在您的所有帖子中使用新模板。

• 用于：所有帖子

开始构建模板主体

并开始构建模板主体。

2. 建立博客帖子模板正文

部分设置

间距

进入模板编辑器后，您会注意到一个部分。 打开它的设置，转到设计选项卡并删除所有默认的顶部和底部填充。

• 顶部填充：0px
• 底部填充：0px

添加新行

列结构

继续使用以下列结构添加新行：

浆纱

在不添加任何模块的情况下，打开行设置并修改大小设置如下：

• 使用自定义装订线宽度：是
• 天沟宽度：1
• 均衡柱高：是
• 宽度：100%
• 最大宽度：100%
• 最小高度：100vh（台式机），自动（平板电脑和手机）
• 最大高度：100vh（台式机），无（平板电脑和手机）

间距

接下来删除所有默认的顶部和底部填充。

• 顶部填充：0px
• 底部填充：0px

溢出

并将行的溢出设置为隐藏。

• 水平溢出：隐藏
• 垂直溢出：隐藏

第 1 列设置

渐变背景

然后，打开第 1 列设置并添加渐变背景。

• 颜色 1：rgba(255,255,255,0)
• 颜色 2：#000000
• 渐变类型：线性
• 将渐变放在背景图像上方：是

背景图片

我们使用动态特色图像作为下一列的背景图像。

• 背景图片：特色图片

第 2 列设置

间距

然后，我们将打开第 2 列设置并向间距设置添加一些自定义填充值。

• 顶部填充：8%
• 底部填充：8%
• 左填充：8%
• 右填充：8%

溢出

为了允许人们滚动第二列，即帖子内容和评论框将出现的位置，我们将更改可见性设置中的垂直溢出。

• 垂直溢出：滚动（桌面），可见（平板电脑和手机）

将帖子标题模块添加到第 1 列

元素

是时候添加模块了，从第 1 列中的帖子标题模块开始。禁用元素设置中的特色图像选项。

• 显示特色图片：否

标题文字设置

转到设计选项卡并相应地更改 H1 文本设置：

• 标题标题级别：H1
• 标题字体：Work Sans
• 标题字体粗细：粗体
• 标题文字颜色：#ffffff
• 标题文字大小：60 像素（桌面）、45 像素（平板电脑）、35 像素（手机）
• 标题字母间距：-1px
• 标题行高度：1.2em

元文本设置

接下来修改元文本设置。

• 元字体：Work Sans
• 元字体样式：大写
• 元文本颜色：#eaeaea
• 元字母间距：2px

浆纱

然后，更改不同屏幕尺寸的宽度。

• 宽度：81%（桌面），100%（平板电脑和手机）

间距

接下来添加一些响应式填充值。

• 顶部填充：8%（仅限平板电脑和手机）
• 底部填充：8%（仅限平板电脑和手机）
• 左填充：7%（平板电脑），8%（手机）
• 右填充：7%（平板电脑），8%（手机）

位置

并通过更改位置设置完成模块设置如下：

• 位置：绝对（桌面），默认（平板电脑和手机）
• 位置：底部中心
• 垂直偏移：10%

将帖子内容模块添加到第 2 列

进入下一栏。 在那里，我们需要的第一个模块是 Post Content Module。 此模块将动态显示您的帖子内容。

标题文字设置

对模块的标题文本设置进行一些更改。

• 标题字体：Work Sans
• 标题字体粗细：半粗体
• 标题文字大小：
  • H2：40px
  • H3：30px
  • H4：25px
  • H5：16px
  • H6：14px
• 标题字母间距：-1px（H2、H3 和 H4）

CSS 类

并添加一个 CSS 类。 在本教程的下一步中，我们将使用这个 CSS 类在标题和段落之间生成一些空间。

• CSS 类：博客文章内容

将代码模块添加到第 2 列

为段落和标题之间的空格添加 CSS 代码

在 Post Content Module 正下方添加一个 Code Module 并添加以下 CSS 代码行以在标题和段落之间生成空格：

<style>
.blog-post-content h1,
.blog-post-content h2,
.blog-post-content h3,
.blog-post-content h4,
.blog-post-content h5,
.blog-post-content h6
{
margin-top: 20px;
margin-bottom: 20px;
}
</style>

将评论模块添加到第 2 列

字段设置

我们在第 2 列中完成本教程所需的下一个也是最后一个模块是评论模块。 相应地更改模块的字段设置：

• 字段背景颜色：#ffffff
• 字段文本颜色：#000000
• 字段顶部填充：30px
• 字段底部填充：30px
• 字段左填充：30px
• 字段右填充：30px
• 字段字体：Work Sans

• 字段字体样式：大写
• 字段文本大小：15px
• 字段字母间距：3px
• 字段圆角：10px（所有角落）

• 字段框阴影模糊强度：30px
• 字段框阴影颜色：rgba(0,0,0,0.06)

评论计数文本设置

然后，更改评论计数文本设置。

• 评论计数字体：Work Sans
• 评论计数字体粗细：粗体

表单标题文本设置

也修改表单标题文本设置。

• 表格标题标题级别：H3
• 表单标题字体：Work Sans
• 表格标题字体粗细：半粗体

元文本设置

接下来，我们将对元文本设置进行一些更改。

• 元字体：Work Sans
• 元字体粗细：半粗体
• 元文本颜色：#000000

按钮设置

然后，我们将相应地设置按钮样式：

• 为按钮使用自定义样式：是
• 按钮文字大小：16px
• 按钮文字颜色：#ffffff
• 按钮背景颜色：#000000
• 按钮边框宽度：0px
• 按钮边框半径：100px

• 按钮字母间距：2px
• 按钮字体：Work Sans
• 按钮字体样式：大写

• 按钮顶部填充：2%
• 按钮底部填充：2%
• 底部左填充：5%
• 按钮右侧填充：5%

间距

我们也会添加一些上边距。

• 最高利润率：15%

评论正文 CSS

我们将通过在高级选项卡的模块注释正文中添加一行 CSS 代码来完成模块设置。

margin-top: 50px

3. 保存主题生成器更改并查看结果

现在我们已经完成了博客文章模板，剩下要做的就是保存所有 Divi Theme Builder 更改并在我们的博客文章中查看结果！

预览

现在我们已经完成了所有步骤，让我们最后看看不同屏幕尺寸的结果。

桌面

移动的

最后的想法

在这篇文章中，我们向您展示了为您的 Divi 网站创建博客帖子模板的不同方法。 更具体地说，我们向您展示了如何使用 Divi 的主题生成器和动态内容创建分屏博客帖子模板设计。 我们已逐步指导您完成整个过程，并添加了一个 JSON 文件，您也可以免费下载该文件！ 如果您有任何问题或建议，请随时在下面的评论部分发表评论。

如果您渴望了解有关 Divi 的更多信息并获得更多 Divi 免费赠品，请确保订阅我们的电子邮件时事通讯和 YouTube 频道，这样您将永远是第一批了解此免费内容并从中受益的人之一。