WordPress divi主题

如何使用 Divi 动态创建简单的 UX 友好型博客文章模板

by | May 8, 2022 | Divi主题使用教程 | 0 comments

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

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

google广告开户

让我们开始吧。

预览

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

桌面

帖子模板

移动的

帖子模板

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

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

订阅我们的 Youtube 频道

1. 前往 Divi Theme Builder 并创建新模板

转到 Divi 主题生成器

首先转到 Divi Theme Builder。

帖子模板

WordPress divi主题

创建新模板

创建一个新模板并将其用于您的所有帖子。

帖子模板

帖子模板

2.开始构建博客文章正文

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

帖子模板

将第 1 行添加到现有部分

立柱结构

在模板编辑器中,使用以下列结构向已存在的部分添加新行:

帖子模板

浆纱

在不添加任何模块的情况下,打开行设置并更改大小设置,如下所示:

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

帖子模板

第 1 列和第 2 列边框

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

fiverr建站WordPress程序员
  • 右边框宽度:1px(桌面),0px(平板电脑和手机)
  • 右边框颜色:#333333

帖子模板

将文本模块添加到每一列

动态内容

继续向每列添加一个文本模块,并为每个模块单独选择一些动态内容。

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

帖子模板

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

帖子模板

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

帖子模板

独立站选品工具

文字设置

转到每个模块的设计选项卡并更改文本设置,如下所示:

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

帖子模板

添加第 2 行

立柱结构

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

帖子模板

将文本模块 #1 添加到列

动态内容

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

高质量外链购买
  • 动态内容:帖子标题

帖子模板

  • 之前:

  • 之后:

帖子模板

H1 文字设置

转到模块的设计选项卡并更改 H1 文本设置,如下所示:

  • 标题字体:Playfair Display
  • 标题文本对齐:居中
  • 标题文字大小:6.2rem(桌面)、3.2rem(平板电脑)、2.3rem(手机)

帖子模板

间距

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

JasperAI 10000字免费额度试用
  • 上边距:50px
  • 下边距:100px

帖子模板

将文本模块 #2 添加到列

动态内容

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

  • 动态内容:帖子摘录

帖子模板

文字设置

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

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

帖子模板

WordPress备份工具updrafplus

添加第 3 行

立柱结构

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

帖子模板

展示

通过将一行 CSS 代码添加到行的主要元素,确保列彼此相邻。

display: flex;

帖子模板

将图像模块添加到第 1 列

动态内容

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

  • 动态内容:作者头像

帖子模板

结盟

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

帖子模板

浆纱

接下来修改宽度。

帖子模板

间距

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

  • 右边距:20px(平板电脑和手机)

帖子模板

边界

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

帖子模板

将文本模块添加到第 2 列

动态内容

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

  • 动态内容:帖子作者

帖子模板

文字设置

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

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

帖子模板

间距

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

  • 上边距:15px
  • 左边距:20px(平板电脑和手机)

帖子模板

添加第 4 行

立柱结构

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

帖子模板

将文本模块添加到列

将内容框留空

将文本模块添加到列中,并确保将内容框留空。

帖子模板

动态背景图片

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

  • 动态内容:特色图片

帖子模板

浆纱

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

  • 宽度:800px(台式机)、500px(平板电脑)、300px(手机)
  • 模块对齐:中心

帖子模板

间距

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

  • 顶部填充:400 像素(桌面)、250 像素(平板电脑)、150 像素(手机)
  • 底部填充:400 像素(桌面)、250 像素(平板电脑)、150 像素(手机)

帖子模板

边界

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

帖子模板

添加新部分

进入下一个常规部分。

帖子模板

添加第 1 行

立柱结构

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

帖子模板

将帖子内容模块添加到列

文字设置

将发布内容模块添加到列中,转到模块的设计选项卡并相应地更改文本设置:

  • 文字字体: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 行

立柱结构

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

帖子模板

间距

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

帖子模板

将评论模块添加到列

字段设置

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

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

帖子模板

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

帖子模板

图像设置

更改图像设置。

帖子模板

标题文本设置

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

  • 标题标题级别:H2
  • 标题字体:Playfair Display
  • 标题文字大小:3rem(桌面)、2rem(平板电脑和手机)
  • 标题行高:1.4em

帖子模板

元文本设置

也为元文本设置样式。

  • 元字体:Playfair 显示
  • 元文本大小: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 频道,这样您将永远是第一批了解并从这些免费内容中受益的人之一。

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