WordPress divi主题

如何使用 Divi 的主题生成器分屏您的博客文章模板

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

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

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

google广告开户

让我们开始吧。

预览

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

桌面

分屏博客文章模板

移动的

分屏博客文章模板

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

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

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

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

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

分屏博客文章模板

在所有帖子上使用模板

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

分屏博客文章模板

WordPress divi主题

开始构建模板主体

并开始构建模板主体。

分屏博客文章模板

2.构建博客文章模板正文

部分设置

间距

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

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

分屏博客文章模板

添加新行

立柱结构

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

分屏博客文章模板

浆纱

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

  • 使用自定义装订线宽度:是
  • 天沟宽度:1
  • 均衡柱高:是
  • 宽度:100%
  • 最大宽度:100%
  • 最小高度:100vh(桌面),自动(平板电脑和手机)
  • 最大高度:100vh(桌面),无(平板电脑和手机)

分屏博客文章模板

间距

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

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

分屏博客文章模板

fiverr建站WordPress程序员

溢出

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

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

分屏博客文章模板

第 1 列设置

渐变背景

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

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

分屏博客文章模板

分屏博客文章模板

独立站选品工具

背景图片

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

  • 背景图片:特色图片

分屏博客文章模板

第 2 列设置

间距

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

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

分屏博客文章模板

分屏博客文章模板

高质量外链购买

溢出

为了允许人们滚动浏览第二列,其中将显示帖子内容和评论框,我们将更改可见性设置中的垂直溢出。

  • 垂直溢出:滚动(桌面)、可见(平板电脑和手机)

分屏博客文章模板

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

元素

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

分屏博客文章模板

标题文本设置

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

JasperAI 10000字免费额度试用
  • 标题标题级别:H1
  • 标题字体:Work Sans
  • 标题字体粗细:粗体
  • 标题文字颜色:#ffffff
  • 标题文字大小:60px(桌面)、45px(平板电脑)、35px(手机)
  • 标题字母间距:-1px
  • 标题行高度:1.2em

分屏博客文章模板

元文本设置

接下来修改元文本设置。

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

分屏博客文章模板

浆纱

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

  • 宽度:81%(桌面)、100%(平板电脑和手机)

分屏博客文章模板

WordPress备份工具updrafplus

间距

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

  • 顶部填充:8%(仅限平板电脑和手机)
  • 底部填充:8%(仅限平板电脑和手机)
  • 左侧填充:7%(平板电脑)、8%(手机)
  • 右侧填充:7%(平板电脑)、8%(手机)

分屏博客文章模板

位置

并通过更改位置设置来完成模块设置,如下所示:

  • 位置:绝对(桌面),默认(平板电脑和手机)
  • 位置:底部中心
  • 垂直偏移:10%

分屏博客文章模板

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

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

分屏博客文章模板

标题文字设置

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

  • 标题字体:Work Sans
  • 标题字体粗细:半粗体
  • 标题文字大小:
    • H2:40像素
    • H3:30像素
    • H4:25像素
    • H5:16 像素
    • H6:14像素
  • 标题字母间距:-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%

分屏博客文章模板

间距

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

分屏博客文章模板

评论正文 CSS

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

margin-top: 50px

分屏博客文章模板

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

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

分屏博客文章模板

分屏博客文章模板

预览

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

桌面

分屏博客文章模板

移动的

分屏博客文章模板

最后的想法

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

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

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