如何在博客帖子模板中包含全高固定侧边栏

已发表: 2020-07-09

选择在您的博客文章中添加侧边栏完全取决于您。一些博主选择根本不使用侧边栏。本教程适用于那些喜欢使用侧边栏但想让它看起来有点不同的人。通常，侧边栏是静态定位的，但如果帖子内容很长，这意味着读者必须向上滚动才能看到侧边栏。

在此博客帖子模板设计中，我们创建了一个全高固定侧边栏，可在向下滚动帖子内容时保持原位。在重新创建教程时，请在浏览器中打开两个选项卡：一个用于主题构建器，另一个用于博客文章预览。通过这种方式，您可以随时查看更改。

让我们开始吧！

预览

在开始之前，我们先来看看全高固定侧边栏。

桌面

固定侧边栏

移动的

固定侧边栏

免费下载全高固定侧边栏模板

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

下载文件

免费下载

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

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

创建侧边栏小部件

在开始使用全高固定侧边栏模板之前，创建一个自定义侧边栏小部件。稍后，我们会将其包含在模板内的侧边栏中。

打开小部件生成器

单击“外观”并选择“小部件”。

将元素添加到侧边栏小部件

将“最近的帖子”和“类别”元素拖到侧边栏小部件中。

在小部件中调整元素设置

选择仅显示 3 个最近的帖子并添加标题。也为类别小部件添加标题，完成后不要忘记在两个框中单击“保存”。

最近的帖子标题：阅读更多：
分类标题：浏览

固定侧边栏

2. 开始使用主题生成器

打开主题生成器/添加新模板

是时候开始重新创建固定的全高侧边栏模板了！首先，打开您的主题构建器并添加一个新模板。

设置模板设置

在模板设置中，选择“所有博客文章”。如果您喜欢将模板用于特定类别或标签，请相应地修改模板设置。

添加自定义正文

然后，单击“添加自定义正文”。

固定侧边栏

选择构建自定义主体

我们将从头开始重新创建此模板，因此请继续选择“构建自定义主体”。

从头开始构建

进入可视化构建器后，再次选择从头开始构建的选项。

使用全高固定侧边栏重新创建模板

部分设置

背景

在模板编辑器中打开现有部分并添加渐变背景。

背景渐变
- 颜色 1：白色 #ffffff
- 颜色 2：浅灰色 #eaeaea

间距

也添加一些填充。

顶部填充：55px

添加新行

列结构

现在添加具有 3/4 – 1/4 列结构的行。

固定侧边栏

浆纱

如下调整行的大小。

自定义天沟宽度：2
宽度：
- 台式机和平板电脑：90%
- 电话：100%
最大宽度：
- 桌面：1920px
最小高度：100vh

第 1 列设置

间距

在添加模块之前，请调整列设置。首先是第 1 列。

左右填充
- 平板电脑：2%
- 电话：8%

第 2 列设置

背景

然后，为第 2 列添加背景颜色。

背景颜色：白色#ffffff

间距

也包括一些间距。

左右填充
- 台式机：3%
- 平板电脑和手机：14%

边界

接下来给列圆角。

圆角
- 平板电脑和台式机：15px

自定义 CSS

移至高级选项卡并向主元素添加一些 CSS 代码行。这将帮助我们在桌面上创建全高侧边栏。

主要元素
- 最小高度：100%

min-height: 100%;

固定侧边栏

位置

最后但并非最不重要的是，要创建固定侧边栏效果，请向列添加固定位置。

位置
- 桌面：固定
- 平板电脑和手机：默认
位置：右上角

固定侧边栏

添加帖子标题模块 #1

元素

是时候添加模块了！从第 1 列中的第一个帖子标题模块开始，并仅启用标题。

节目名称：是

固定侧边栏

动态背景图片

然后，转到背景设置并将特色图像用作动态背景图像。

固定侧边栏

标题文字

设置标题文本设置的样式。

标题字体：Bai Jamjuree
标题字体样式：大写
标题文字颜色：#e98074
标题文字大小：
- 桌面：45px
- 平板电脑：35px
- 电话：25px
标题字母间距：3px
标题行高度：1.3em

固定侧边栏

间距

然后，添加一些自定义的顶部和底部填充。

顶部填充：20%
底部填充：20%

固定侧边栏

边界

也包括一些圆角。

所有角落：15px

固定侧边栏

标题 CSS

并通过在高级选项卡中向模块的标题元素添加三行 CSS 代码来完成模块设置。

background-color: rgba(255,255,255,0.56);
padding-top: 2%;
padding-bottom: 2%;

固定侧边栏

添加帖子标题模块 #2

元素

现在添加另一个帖子标题模块。选择以下元素。

元
作者
帖子分类

元文本

打开设计选项卡并设置元文本样式。

字体: Bai Jamjuree
重量：中等
颜色：灰色#8e8d8a
尺寸
- 桌面：20px
- 平板电脑和手机：15px
字母间距：2px

浆纱

也调整大小。

宽度：90%
模块对齐：居中

固定侧边栏

间距

以一定的间距完成此模块的设置。

顶部填充：15px

固定侧边栏

添加帖子内容模块

背景

接下来添加一个白色背景的帖子内容模块。

背景颜色：白色#ffffff

文本

现在，设置正文的样式。

字体：拉托
颜色：灰色#8e8d8a
尺寸：16px

标题文字

继续为所有标题文本样式设置样式。

H1
- 字体: Bai Jamjuree
- 重量：中等
- 颜色: 珊瑚色#e98074
- 尺寸
  - 桌面：45px
  - 平板电脑：33px
  - 电话：30px
- 字母间距：1px
H2
- 字体: Bai Jamjuree
- 重量：中等
- 颜色: 珊瑚色#e98074
- 尺寸
  - 桌面：35px
  - 平板电脑和手机：25px
- 字母间距：1px
H3
- 字体: Bai Jamjuree
- 重量：常规
- 颜色：深灰色#606060
- 尺寸
  - 桌面：25px
  - 平板电脑和手机：22px
- 字母间距：1px
H4
- 字体: Bai Jamjuree
- 重量：常规
- 颜色：深灰色#606060
- 尺寸
  - 桌面：22px
  - 平板电脑：20px
  - 电话：18px
- 字母间距：1px
H5
- 字体: Bai Jamjuree
- 重量：中等
- 颜色：深灰色#606060
- 尺寸：16px
- 字母间距：1px
H6
- 字体: Bai Jamjuree
- 重量：常规
- 颜色：深灰色#606060
- 尺寸：16px
- 字母间距：1px