如何使用 Divi 为您的博客帖子模板创建粘性侧边栏

创建任何类型的网站时，您很有可能偶尔也会在该网站上写博客。 除了需要一个以列表形式显示所有博客文章的博客页面之外，您还需要一个博客文章模板，您可以将其自动分配给您创建的新博客文章。 使用 Divi 的 Theme Builder 设计博客帖子模板非常简单。 现在，借助 Divi 的新粘性选项，您也可以立即将侧边栏设为粘性！ 在今天的教程中，我们将向您展示具体的操作方法，您也可以免费下载博客文章模板的 JSON 文件！

让我们开始吧。

预览

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

桌面

移动的

免费下载粘性边栏博客帖子模板

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

下载文件

免费下载

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

下载

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

https://youtu.be/8hTA3ogf3ZQ

订阅我们的 YouTube 频道

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

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

首先转到 Divi Theme Builder 并添加一个新模板。

在所有帖子上使用模板

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

• 用于：所有帖子

开始构建模板主体

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

2. 开始构建博客文章正文（右侧栏）

部分 #1 设置

渐变背景

进入模板编辑器后，您可以开始构建设计。 打开您可以在模板顶部注意到的部分并应用渐变背景。

• 颜色 1：#8995ff
• 颜色 2：#6163b5
• 梯度方向：150度

间距

转到该部分的设计选项卡并删除所有默认的顶部和底部填充。

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

添加新行

列结构

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

背景颜色

尚未添加任何模块，打开行设置并应用背景颜色。

• 背景颜色：#8995ff

浆纱

转到行的设计选项卡并相应地修改大小设置：

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

间距

接下来添加一些左右填充。

• 左填充：3%
• 右填充：3%

边界

然后，在边框设置中包含一些圆角。

• 所有角落：20px

盒子阴影

也应用框阴影。

• 框阴影模糊强度：50px
• 阴影颜色：rgba(0,0,0,0.08)

转换 翻译

并通过相应地修改转换转换设置来完成行设置：

• 右：50px

将文本模块添加到第 1 列

动态内容

将第一个文本模块添加到第 1 列并选择以下动态内容：

• 动态内容：帖子分类

文字设置

转到模块的设计选项卡并相应地设置文本样式：

• 文字字体：阿拉塔
• 文字颜色：#ffffff
• 文字大小：1rem
• 文字字母间距：1px
• 文本行高：2em

链接文字设置

也更改链接文本颜色。

• 链接文字颜色：#ffffff

克隆文本模块两次并在剩余列中放置重复项

完成第一个文本模块后，您可以克隆整个模块两次，并将重复项放置在该行的其余两列中。

更改动态内容

更改每个重复项的动态内容。

• 第一个重复：发布发布日期

• 第二个重复：发表评论计数
• 之后：评论
• 链接到评论区：是

添加第 2 节

间距

在上一节的正下方添加另一节。 打开部分设置并应用以下顶部和底部填充值：

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

添加新行

列结构

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

浆纱

在不添加任何模块的情况下，打开行设置并相应地修改大小设置：

• 使用自定义装订线宽度：是
• 天沟宽度：2
• 宽度：90%
• 最大宽度：2580px

间距

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

• 上边距：100px
• 底部边距：
  • 桌面：100px
  • 平板电脑和手机：50px

第 1 列设置

间距

然后，打开第 1 列设置并应用一些左右填充。

• 左填充：5%
• 右填充：5%

第 2 列设置

背景颜色

移至第 2 列设置并应用白色背景色。

• 背景颜色：#ffffff

间距

也包括一些自定义填充值。

• 顶部填充：5%
• 底部填充：5%
• 左填充：5%
• 右填充：5%

边界

接下来，转到边框设置并应用以下设置：

• 所有角落：20px
• 顶部边框：
  • 顶部边框宽度：
    • 桌面：0px
    • 平板电脑和手机：5px
  • 顶部边框颜色：#8995ff
• 左边框：
  • 左边框宽度：
    • 桌面：5px
    • 平板电脑和手机：0px
  • 左边框颜色：#8995ff

盒子阴影

通过应用以下框阴影完成列设置：

• 框阴影模糊强度：50px
• 阴影颜色：rgba(0,0,0,0.08)

将文本模块 #1 添加到第 1 列

H1动态内容

是时候添加模块了，从第 1 列中的文本模块开始。选择以下动态内容：

• 动态内容：帖子/档案标题
• 之前：<H1>
• 之后：</H1>

H1 文本设置

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

• 标题字体：Alata
• 标题文字大小：
  • 台式机：4.8rem
  • 平板电脑：3.2rem
  • 电话：2.3rem
• 标题字母间距：-2px

间距

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

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

将文本模块 #2 添加到第 1 列

将内容框留空

将另一个文本模块添加到第 1 列，并将内容框留空。

动态背景图片

相反，我们使用文本模块来展示帖子的动态特色图片作为背景图片。

• 动态背景图片：特色图片
• 背景图片尺寸：封面

间距

转到模块的设计选项卡并应用以下填充值：

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

边界

然后，转到边框设置并添加一些圆角。

• 所有角落：20px

盒子阴影

通过应用以下框阴影设置完成模块设置：

• 框阴影模糊强度：50px
• 阴影颜色：rgba(0,0,0,0.08)

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

正文设置

我们在帖子模板中需要的下一个模块是帖子内容模块。 此模块代表您的动态博客文章内容。 转到模块的设计选项卡并按如下方式更改文本设置：

• 文字字体：Lato
• 文字大小：1.1rem
• 文本行高：2.3em

标题文字设置

也更改标题字体。

• 标题字体：Alata

间距

并删除默认的底部边距。

• 下边距：0px

CSS 类

最后但并非最不重要的是，转到高级选项卡并应用以下 CSS 类：

• CSS 类：博客文章内容

将代码模块添加到第 1 列

为标题和段落内容之间的空间添加 CSS 代码

我们使用分配给 Post Content Module 的 CSS 类在标题和段落之间添加一些空间。 在 Post Content Module 正下方添加一个 Code Module 并将以下 CSS 代码放入模块中：

<style>
.blog-post-content p,
.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 列

布局

进入下一栏。 在那里，我们将添加一个侧边栏模块。 移至模块的设计选项卡并隐藏边框分隔符。

• 显示边框分隔符：否

标题文字设置

接下来更改标题字体。

• 标题字体：阿拉塔

正文设置

随着正文字体。

• 正文字体：Lato

将电子邮件选择模块添加到第 2 列

添加内容

在侧边栏模块的正下方，我们将添加一个电子邮件选项模块。 添加一些您选择的副本。

新增帐户

接下来链接您的电子邮件帐户。

删除背景颜色

然后，去除背景颜色。

字段设置

转到模块的设计选项卡并相应地更改字段设置：

• 字段字体：Lato

• 框阴影：第一个选项
• 阴影颜色：rgba(0,0,0,0.06)

文字设置

我们也在更改文本设置中的文本颜色。

• 文字颜色：深色

标题文字设置

然后，我们将更改标题文本设置。

• 标题标题级别：H3
• 标题字体：阿拉塔
• 标题文字大小：1.5rem

按钮设置

接下来，我们将为按钮设置样式。

• 为按钮使用自定义样式：是
• 按钮文字大小：20px
• 按钮文字颜色：#ffffff
• 渐变色 1：#8995ff
• 渐变色 2：#6163b5
• 渐变类型：线性
• 梯度方向：150度
• 按钮边框宽度：0px

• 按钮边框半径：5px
• 按钮字体：Lato

间距

我们将通过删除间距设置中的默认填充值来完成模块设置。

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

添加第 3 部分

渐变背景

进入下一个和最后一个部分。 添加以下渐变背景：

• 颜色 1：#8995ff
• 颜色 2：#6163b5
• 渐变类型：线性
• 梯度方向：150度

间距

转到该部分的设计选项卡并删除默认的顶部填充。

• 顶部填充：0px

添加新行

列结构

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

背景颜色

尚未添加任何模块，打开行设置并应用背景颜色。

• 背景颜色：#8995ff

浆纱

移至行的设计选项卡并按如下方式更改大小设置：

• 使用自定义装订线宽度：是
• 天沟宽度：2
• 宽度：90%
• 最大宽度：2580px

间距

相应地修改填充值：

• 顶部填充：100px
• 底部填充：100px
• 左填充：5%
• 右填充：5%

边界

然后，添加一些圆角。

• 所有角落：20px

盒子阴影

我们也将添加一个框阴影。

• 框阴影模糊强度：50px
• 阴影颜色：rgba(0,0,0,0.08)

转换 翻译

我们将通过应用以下转换转换值来完成行设置：

• 右：-100px

将评论模块添加到列

字段设置

我们在该行中唯一需要的模块是 Comments Module。 转到模块的设计选项卡并设置字段样式：

• 字段背景颜色：rgba(255,255,255,0.09)
• 字段文本颜色：#ffffff
• 字段字体：Lato

• 字段圆角：10px（所有角落）
• 字段底部边框宽度：5px
• 字段底部边框颜色：#ffffff

• 字段框阴影：第一个选项
• 阴影颜色：rgba(0,0,0,0.06)

图像设置

也更改图像设置。

• 图像圆角：100px（所有角）

文字设置

然后，在文本设置中修改文本颜色。

• 文字颜色：浅

评论计数文本设置

我们也在修改评论计数文本设置。

• 评论计数标题级别：H2
• 评论计数字体：Alata
• 评论计数文字大小：2rem
• 评论计数行高：1.4em

表单标题文本设置

随着表单标题文本设置。

• 表格标题标题级别：H3
• 表格标题字体：Alata

元文本设置

然后，元文本设置。

• 元字体：Alata
• 元文本大小：1.2rem

评论文本设置

我们还将修改评论文本设置。

• 评论字体：Lato
• 评论文字大小：1.1rem
• 评论行高：2em

按钮设置

我们将相应地设置按钮样式：

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

• 按钮字母间距：1px
• 按钮字体：Lato

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

评论正文 CSS

最后但并非最不重要的一点是，我们将通过将以下 CSS 代码行应用于高级选项卡中的评论正文来完成模块设置：

margin-top: 50px;

3. 对侧边栏应用粘性效果

打开侧边栏

现在我们的博客文章模板的设计已经完成，我们将使用 Divi 的粘性选项将侧边栏栏设为粘性。 打开第 2 列设置。

应用粘性效果

移至列的高级选项卡并应用以下粘性设置：

• 粘性位置：
  • 桌面：坚持到顶部
  • 平板电脑和手机：请勿粘贴
• 底部粘性限制：行
• 从周围的粘性元素偏移：是
• 过渡默认和粘性样式：是

4. 将侧边栏放在左侧

将侧边栏列拖到第 1 列上方

如果您想将侧边栏放在模板的左侧，请打开行设置并将第二列拖到顶部。

更改侧边栏列边框

打开包含侧边栏的列并相应地修改边框设置：

• 右边框宽度：
  • 桌面：5px
  • 平板电脑和手机：0px
• 右边框颜色：#8995ff
• 左边框宽度：无

如果需要，应用列反转

如果您决定在博客帖子模板的左侧使用粘性侧边栏，您可能希望将侧边栏放在较小屏幕上的帖子内容下方。 为此，您可以使用本 Divi 教程中的第二种方法，了解如何反转 Divi 的列堆叠顺序。

预览

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

桌面

移动的

最后的想法

在这篇文章中，我们向您展示了如何充分利用您使用 Divi 的 Theme Builder 构建的博客文章模板设计。 更具体地说，我们已经逐步向您展示了如何包含一个粘性侧边栏，这是由 Divi 的粘性选项实现的。 粘性侧边栏将在访问者阅读帖子内容时跟随他们，这使他们可以查看相关帖子、您的电子邮件选项或您决定放置在粘性侧边栏中的任何其他内容。 您还可以免费下载模板 JSON 文件！ 如果您有任何问题或建议，请随时在下面的评论部分发表评论。

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