正在寻找一种经典但富有创意的方式在您的网站上显示博客文章？ 如果是这样，你会喜欢这个 Divi 免费赠品。 我们设计了一个受打字机启发的经典博客文章模板，可自动应用于您网站上的所有博客文章！ 在整篇文章中，我们还将逐步展示如何在 Theme Builder 中从头开始重新创建设计。

让我们开始吧！

预览

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

桌面

移动的

免费下载受打字机启发的博客帖子模板

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

下载文件

免费下载

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

下载

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

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

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

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

在所有帖子上使用模板

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

• 用于：所有帖子

开始构建模板主体

并开始构建新模板的主体。

2. 开始构建博客帖子正文

部分设置

背景颜色

进入模板编辑器后，您会注意到一个部分。 打开该部分并更改背景颜色。

• 背景颜色：#fff4d8

间距

接下来添加一些自定义的顶部和底部填充。

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

边界

并通过添加边框来完成部分设置。

• 边框宽度：100 像素（桌面）、20 像素（平板电脑和手机）
• 边框颜色：#ffffff

添加第 1 行

列结构

继续使用以下列结构向该部分添加新行：

间距

在不添加任何模块的情况下，打开行设置并删除所有默认的顶部和底部填充。

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

将图像模块添加到列

上传图片

然后，将图像模块添加到行的列并上传您选择的插图。 我们在本教程中使用的插图可以在本教程开头的可下载文件夹中找到。

间距

移至模块的设计选项卡并按如下方式修改间距值：

• 上边距：-150px
• 左边距：-12vw（桌面），0px（平板和手机）

添加第 2 行

列结构

进入下一行。 使用以下列结构：

将文本模块添加到第 1 列

动态内容

将文本模块添加到行的第一列并使用以下动态内容：

• 正文：发布日期

• 日期格式：08/06/1999 m/d/Y

文字设置

相应地更改文本设置：

• 文字字体：特殊精英
• 文字字体粗细：粗体
• 文字颜色：#000000
• 文字大小：1.4rem

克隆文本模块三次

完成文本模块的设置后，您可以克隆整个模块 3 次。

更改动态内容

修改重复模块的动态内容如下：

• 重复 #1：发布类别
• 重复 #2：帖子作者
• 重复 #3：发表评论数
  • 之后：评论
  • 链接到评论区：是

在第 2 列中放置两个文本模块

继续将最后两个文本模块放在行的第二列中，

更改类别和评论计数的链接文本颜色

必要时也修改链接文本颜色。

• 链接文字颜色：#000000

更改第 2 列中模块的文本方向

并通过修改不同屏幕尺寸的文本对齐方式来完成第 2 列中的文本模块。

• 文本对齐：右（桌面），左（平板电脑和手机）

添加第 3 行

列结构

进入下一行！ 使用以下列结构：

将文本模块添加到列

动态内容

将文本模块添加到行的列并使用以下动态内容：

• 正文：帖子/档案标题

• 前：

• 后：

H1 文本设置

转到模块的设计选项卡并按如下方式更改 H1 文本设置：

• 标题字体：特殊精英
• 标题文字颜色：#000000
• 标题文字大小：3.5rem（桌面）、2.5rem（平板电脑）、2rem（手机）
• 标题线高度：1.5em

间距

添加一些自定义的顶部和底部边距。

• 上边距：150px
• 下边距：150px

将帖子内容模块添加到列

文字设置

进入下一个模块，即发布内容模块。 相应地修改文本设置：

• 文字字体：特殊精英
• 文字大小：1.2rem
• 文本行高：2.5em

标题文字设置

也更改不同的标题文本设置。

• 标题字体：特殊精英
• 标题文字颜色：#000000
• 标题 2 文字大小：2rem (H2)、1.9rem (H3)、1.8rem (H4)、1.7rem (H5)、1.6rem (H6)

CSS ID

并为模块分配一个 CSS ID。

• CSS ID：后内容模块

将代码模块添加到列

添加标题 CSS 代码

现在，要为不同的标题添加一些自定义边距，我们将以下自定义 CSS 添加到代码模块：

<style>
#post-content-module h2, h3, h4, h5, h6 {
margin-top: 70px;
margin-bottom: 70px;
}
</style>

添加第 2 节

背景颜色

将另一个部分添加到帖子模板，打开部分设置并更改该部分的背景颜色。

• 背景颜色：#fff4d8

边界

也加个边框。

• 边框宽度：100 像素（桌面）、20 像素（平板电脑和手机）
• 顶部边框宽度：0px
• 边框颜色：#ffffff

添加新行

列结构

继续使用以下列结构向该部分添加新行：

将评论模块添加到列

字段设置

我们在这一行中唯一需要的模块是 Comments Module。 相应地更改字段设置：

• 字段背景颜色：rgba(0,0,0,0)
• 字段文本颜色：#000000
• 字段底部填充：50px
• Fields 字体：特殊精英
• 字段文本大小：1.2rem

• 字段底部边框宽度：1px
• 字段底部边框颜色：#000000

评论计数文本设置

随着评论计数文本设置。

• 评论计数标题级别：H2
• 评论计数字体：特殊精英
• 评论计数文本颜色：#000000
• 评论计数文字大小：2rem

表单标题文本设置

也对表单标题文本设置进行一些更改。

• 表格标题标题级别：H3
• 表格标题字体：特殊精英
• 表单标题文本颜色：#000000
• 表格标题文字大小：1.5rem

元文本设置

然后，更改元文本设置。

• 元字体：特殊精英
• 元文本颜色：#000000
• 元文本大小：1.5rem

评论文本设置

我们还将对评论文本设置进行一些更改。

• 评论字体：特殊精英
• 评论文字大小：1.2rem
• 评论行高：2.5em

按钮设置

继续按如下方式设置按钮样式：

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

• 按钮字体：特殊精英

评论正文 CSS

并通过在高级选项卡的评论正文中添加一些上边距来完成模块的设置。

margin-top: 100px;

3. 保存所有主题生成器更改和预览结果

创建模板的自定义博客文章正文后，您可以保存所有更改并查看博客文章的结果！

预览

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

桌面

移动的

最后的想法

在这篇文章中，我们分享了一个受打字机启发的经典博客文章模板，您可以免费下载并用于下一个 Divi 项目！ 我们也从头开始重新创建了帖子模板设计。 如果您有任何问题或建议，请随时在下面的评论部分发表评论。

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