如何使用 Divi 动态创建一个简单的用户体验友好的博客帖子模板

在您的网站上分享新的博客文章时，重要的是要让访问者的阅读体验尽可能轻松。 这意味着消除尽可能多的干扰，同时仍然匹配您网站上的品牌。 允许访问者通过他们的浏览器控制文本大小也很重要，这就是相对 rem 字体单位派上用场的地方。 它允许人们调整浏览器中显示的字体大小。 在本教程中，我们将构建一个美观且简单的博客帖子模板，高度考虑用户体验。 您也可以免费下载 JSON 文件！

让我们开始吧。

预览

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

桌面

移动的

免费下载简单的用户体验友好的博客帖子模板

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

下载文件

免费下载

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

下载

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

订阅我们的 YouTube 频道

1.转到Divi Theme Builder并创建新模板

转到 Divi 主题生成器

首先转到Divi Theme Builder。

创建新模板

创建一个新模板并在您的所有帖子中使用它。

• 用于：所有帖子

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

然后，开始构建帖子模板的自定义正文。

将第 1 行添加到现有部分

列结构

在模板编辑器中，使用以下列结构向已有的部分添加一个新行：

浆纱

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

• 使用自定义装订线宽度：是
• 天沟宽度：1

第 1 列和第 2 列边框

接下来为第一列和第二列添加右边框。

• 右边框宽度：1px（桌面），0px（平板电脑和手机）
• 右边框颜色：#333333

将文本模块添加到每列

动态内容

继续向每列添加一个文本模块，并分别为每个模块选择一些动态内容。

• 第 1 列中的文本模块：帖子类别

• 第 2 列中的文本模块：发布后日期

• 第 3 列中的文本模块：发表评论计数
• 之后：评论

文字设置

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

• 文字字体：Lato
• 文字大小：1.1rem
• 文字字母间距：1px
• 文本行高：2em

添加第 2 行

列结构

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

将文本模块 #1 添加到列

动态内容

添加文本模块并选择帖子标题动态内容。

• 动态内容：帖子标题

• 之前：<H1>
• 之后：</H1>

H1 文本设置

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

• 标题字体：Playfair Display
• 标题文本对齐方式：居中
• 标题文字大小：6.2rem（桌面）、3.2rem（平板电脑）、2.3rem（手机）

间距

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

• 上边距：50px
• 下边距：100px

将文本模块 #2 添加到列

动态内容

在上一个文本模块的正下方添加另一个文本模块，然后选择帖子摘录动态内容。

• 动态内容：帖子摘录

文字设置

更改模块的文本设置如下：

• 文字字体：Lato
• 文字大小：1.1rem
• 文字字母间距：1px
• 文本行高：2em
• 文本对齐：居中

添加第 3 行

列结构

使用以下列结构向该部分添加另一行：

展示

通过向行的主要元素添加一行 CSS 代码，确保列保持彼此相邻。

display: flex;

将图像模块添加到第 1 列

动态内容

继续向第 1 列添加图像模块并选择作者个人资料图片动态内容。

• 动态内容：作者头像

结盟

转到模块的设计选项卡并更改图像对齐方式。

• 图像对齐：右

浆纱

接下来修改宽度。

• 宽度：50px

间距

在平板电脑和手机上添加一些右边距。

• 右边距：20px（平板电脑和手机）

边界

并通过在边框设置中添加一些边框半径来完成模块的设置。

• 所有角落：100px

将文本模块添加到第 2 列

动态内容

在第二列中，我们需要一个文本模块。 选择帖子作者动态内容。

• 动态内容：帖子作者

文字设置

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

• 文字字体：Lato
• 文字大小：1.1rem
• 文字字母间距：1px

间距

接下来添加一些自定义边距值。

• 上边距：15px
• 左边距：20px（平板电脑和手机）

添加第 4 行

列结构

使用以下列结构向该部分添加另一行：

将文本模块添加到列

将内容框留空

向该列添加一个文本模块，并确保将内容框留空。

动态背景图片

接下来将特色图片动态内容添加到模块的背景图片中。

• 动态内容：特色图片

浆纱

继续修改模块在不同屏幕尺寸上的尺寸设置。

• 宽度：800px（桌面）、500px（平板）、300px（手机）
• 模块对齐：居中

间距

在不同的屏幕尺寸上添加一些自定义的顶部和底部填充。

• 顶部填充：400 像素（桌面）、250 像素（平板电脑）、150 像素（手机）
• 底部填充：400 像素（桌面）、250 像素（平板电脑）、150 像素（手机）

边界

并在边框设置中添加一些边框半径，将模块变成圆形。

• 所有角落：500px

添加新部分

进入下一个常规部分。

添加第 1 行

列结构

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

将帖子内容模块添加到列

文字设置

将 Post Content Module 添加到该列，转到模块的设计选项卡并相应地更改文本设置：

• 文字字体：Lato
• 文字大小：1.1rem
• 文字字母间距：1px
• 文本行高：2.3em

标题文字设置

也修改标题文本设置。

• 标题字体：Playfair Display
• H2 文字大小：3.5rem（桌面），2rem（平板电脑和手机）
• H3 文字大小：2.5rem（桌面），1.5rem（平板电脑和手机）
• H4 文字大小：2.3rem（桌面），1.3rem（平板电脑和手机）
• H5 和 H6 文本大小：2rem（桌面），1rem（平板电脑和手机）

添加第 2 行

列结构

使用以下列结构向该部分添加另一行：

间距

向该行添加一些自定义上边距。

• 上边距：100px

将评论模块添加到列

字段设置

我们在这一行中唯一需要的模块是评论模块。 更改字段设置如下：

• 字段背景颜色：#ffffff
• 字段字体：Lato
• 字段文本大小：1.1rem

• 所有角：0px
• 字段边框宽度：1px
• 字段边框颜色：#000000

图像设置

也更改图像设置。

• 所有角落：100px

标题文字设置

然后，修改标题文本设置。

• 标题标题级别：H2
• 标题字体：Playfair Display
• 标题文字大小：3rem（桌面），2rem（平板电脑和手机）
• 标题行高度：1.4em

元文本设置

也为元文本设置样式。

• 元字体：Playfair Display
• 元文本大小：1.4rem

评论文本设置

我们对评论文本设置使用以下设置：

• 评论字体：Lato
• 评论文字大小：1.1rem
• 评论字母间距：1px
• 评论行高：2em

按钮文字设置

并通过按如下方式设置按钮样式来完成模块的设置：

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

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

3. 保存模板和主题生成器更改

完成模板设计后，保存所有 Divi Theme Builder 更改并预览帖子的结果！

预览

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

桌面

移动的

最后的想法

在这篇文章中，我们向您展示了如何创建一个漂亮而简单的博客帖子模板，该模板专注于访问者在阅读时的用户体验。 使用 Divi 的内置选项修改此帖子模板，使其与您网站的品牌相匹配。 您还可以免费下载模板 JSON 文件！ 如果您有任何问题或建议，请随时在下面的评论部分发表评论。

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