WordPress divi主题

为 Divi 下载免费的经典打字机灵感博客帖子模板

| 5月 7, 2022 | Divi主题使用教程 | 0 条评论

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

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

google广告开户

让我们开始吧!

预览

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

桌面

受打字机启发的博客文章模板

移动的

受打字机启发的博客文章模板

免费下载受打字机启发的博客文章模板

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

1. 前往 Divi Theme Builder 并添加新模板

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

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

受打字机启发的博客文章模板

在所有帖子上使用模板

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

受打字机启发的博客文章模板

WordPress divi主题

开始构建模板主体

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

受打字机启发的博客文章模板

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

部分设置

背景颜色

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

  • 背景颜色:#fff4d8

受打字机启发的博客文章模板

间距

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

  • 上边距:200px
  • 底部填充:200px

受打字机启发的博客文章模板

边界

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

  • 边框宽度:100 像素(桌面)、20 像素(平板电脑和手机)
  • 边框颜色:#ffffff

受打字机启发的博客文章模板

添加第 1 行

立柱结构

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

受打字机启发的博客文章模板

fiverr建站WordPress程序员

间距

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

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

受打字机启发的博客文章模板

将图像模块添加到列

上传图片

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

受打字机启发的博客文章模板

间距

转到模块的设计选项卡并修改间距值,如下所示:

独立站选品工具
  • 上边距:-150px
  • 左边距:-12vw(桌面),0px(平板电脑和手机)

受打字机启发的博客文章模板

添加第 2 行

立柱结构

到下一行。 使用以下列结构:

受打字机启发的博客文章模板

将文本模块添加到第 1 列

动态内容

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

受打字机启发的博客文章模板

高质量外链购买
  • 日期格式:08/06/1999 m/d/Y

受打字机启发的博客文章模板

文字设置

相应地更改文本设置:

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

受打字机启发的博客文章模板

克隆文本模块三次

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

受打字机启发的博客文章模板

JasperAI 10000字免费额度试用

更改动态内容

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

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

受打字机启发的博客文章模板

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

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

受打字机启发的博客文章模板

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

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

WordPress备份工具updrafplus

受打字机启发的博客文章模板

更改第 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

受打字机启发的博客文章模板

添加新行

立柱结构

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

受打字机启发的博客文章模板

将评论模块添加到列

字段设置

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

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

受打字机启发的博客文章模板

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

受打字机启发的博客文章模板

评论计数文本设置

连同评论计数文本设置。

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

受打字机启发的博客文章模板

表单标题文本设置

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

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

受打字机启发的博客文章模板

元文本设置

然后,更改元文本设置。

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

受打字机启发的博客文章模板

评论文字设置

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

  • 评论字体:Special Elite
  • 评论文字大小:1.2rem
  • 评论行高度:2.5em

受打字机启发的博客文章模板

按钮设置

继续设置按钮的样式,如下所示:

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

受打字机启发的博客文章模板

  • 按钮字体:特殊精英

受打字机启发的博客文章模板

评论正文 CSS

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

margin-top: 100px;

受打字机启发的博客文章模板

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

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

受打字机启发的博客文章模板

受打字机启发的博客文章模板

预览

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

桌面

受打字机启发的博客文章模板

移动的

受打字机启发的博客文章模板

最后的想法

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

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

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