选择为您的博客文章添加侧边栏完全取决于您。 一些博主选择根本不使用侧边栏。 本教程适用于那些喜欢使用侧边栏但想让它看起来有点不同的人。 通常，侧边栏是静态定位的，但如果帖子内容很长，这意味着读者必须向上滚动才能看到侧边栏。
在此博客文章模板设计中，我们创建了一个全高固定侧边栏，在向下滚动文章内容时保持原位。 在重新创建教程时，请在浏览器中打开两个选项卡：一个用于主题构建器，另一个用于博客文章预览。 通过这种方式，您可以随时查看更改。
让我们开始吧！
预览
在开始之前，我们先来看看全高固定侧边栏。
桌面
移动的
免费下载全高固定侧边栏模板
要使用免费的全高固定侧边栏模板，您首先需要使用下面的按钮下载它。 要访问下载，您需要使用下面的表格订阅我们的 Divi Daily 电子邮件列表。 作为新订阅者，您将在每周一收到更多 Divi 福利和免费的 Divi Layout 包！ 如果您已经在列表中，只需在下面输入您的电子邮件地址，然后单击下载。 您不会被“重新订阅”或收到额外的电子邮件。
创建侧边栏小部件
在开始使用全高固定侧边栏模板之前，请创建一个自定义侧边栏小部件。 稍后，我们将把它包含在模板内的侧边栏中。
打开小部件生成器
单击“外观”并选择“小部件”。
将元素添加到侧边栏小部件
将“Recent Posts”和“Categories”元素拖到侧边栏小部件中。
调整小部件中的元素设置
选择仅显示 3 个最近的帖子并添加标题。 也为类别小部件添加标题，完成后不要忘记单击两个框上的“保存”。
- 最近的帖子标题：阅读更多：
- 分类标题：浏览
2. 开始使用主题生成器
打开主题生成器/添加新模板
是时候开始重新创建固定的全高侧边栏模板了！ 首先，打开您的主题生成器并添加一个新模板。
设置模板设置
在模板设置中，选择“所有博客文章”。 如果您想将模板用于特定类别或标签，请相应地修改模板设置。
添加自定义正文
然后，单击“添加自定义正文”。
选择构建自定义主体
我们将从头开始重新创建此模板，因此请继续选择“构建自定义主体”。
从头开始构建
进入可视化构建器后，再次选择从头开始构建的选项。
使用全高固定侧边栏重新创建模板
部分设置
背景
在模板编辑器中打开现有部分并添加渐变背景。
- 背景渐变
- 颜色1：白色#ffffff
- 颜色2：浅灰色#eaeaea
间距
也添加一些填充。
添加新行
立柱结构
现在添加一个具有 3/4 – 1/4 列结构的行。
浆纱
如下调整行的大小。
- 自定义装订线宽度：2
- 宽度：
- 台式机和平板电脑：90%
- 电话：100%
- 最大宽度：
- 最小高度：100vh
第 1 列设置
间距
添加模块之前，请调整列设置。 首先是第 1 列。
第 2 列设置
背景
然后，将背景颜色添加到第 2 列。
- 背景颜色：白色#ffffff
间距
也包括一些间距。
- 左右填充
- 桌面：3%
- 平板电脑和手机：14%
边界
接下来给列圆角。
自定义 CSS
移至高级选项卡并在主元素中添加一些 CSS 代码行。 这将帮助我们在桌面上创建全高侧边栏。
min-height: 100%;
位置
最后但并非最不重要的一点是，要创建固定侧边栏效果，请在列中添加一个固定位置。
- 位置
- 桌面：固定
- 平板电脑和手机：默认
- 位置：右上角
添加帖子标题模块#1
元素
是时候添加模块了！ 从第 1 列中的第一个帖子标题模块开始，并仅启用标题。
动态背景图片
然后，转到背景设置并将特色图像用作动态背景图像。
标题文本
样式标题文本设置。
- 标题字体：Bai Jamjuree
- 标题字体样式：大写
- 标题文字颜色：#e98074
- 标题文字大小：
- 桌面：45px
- 平板电脑：35px
- 电话：25像素
- 标题字母间距：3px
- 标题行高：1.3em
间距
然后，添加一些自定义顶部和底部填充。
- 顶部填充：20%
- 底部填充：20%
边界
也包括一些圆角。
标题 CSS
并通过在高级选项卡中的模块标题元素中添加三行 CSS 代码来完成模块设置。
background-color: rgba(255,255,255,0.56); padding-top: 2%; padding-bottom: 2%;
添加帖子标题模块#2
元素
现在添加另一个帖子标题模块。 选择以下元素。
- 元
- 作者
- 帖子类别
元文本
打开设计选项卡并设置元文本的样式。
- 字体：Bai Jamjuree
- 重量：中等
- 颜色：灰色#8e8d8a
- 尺寸
- 桌面：20px
- 平板电脑和手机：15px
- 字母间距：2px
浆纱
也调整大小。
- 宽度：90%
- 模块对齐：中心
间距
以一定间距完成此模块的设置。
添加帖子内容模块
背景
接下来添加一个带有白色背景的帖子内容模块。
- 背景颜色：白色#ffffff
文本
现在，为正文设置样式。
- 字体：拉托
- 颜色：灰色#8e8d8a
- 尺寸：16 像素
标题文字
继续设置所有标题文本样式。
- H1
- 字体：Bai Jamjuree
- 重量：中等
- 颜色：珊瑚色#e98074
- 尺寸
- 桌面：45px
- 平板电脑：33px
- 电话：30 像素
- 字母间距：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
- 尺寸：16 像素
- 字母间距：1px
- H6
- 字体：Bai Jamjuree
- 重量：常规
- 颜色：深灰色#606060
- 尺寸：16 像素
- 字母间距：1px
间距
也添加一些间距设置。
- 上边距：40px
- 顶部填充：10%
- 底部填充：10%
- 左填充：10%
- 右填充：10%
边界
最后但同样重要的是，添加一些圆角。
添加评论模块
元素
要完成第一列，请添加评论模块。 启用以下元素：
- 回复按钮
- 评论数
字段
在设计选项卡中，为字段设置样式。
- 背景颜色：浅灰色#f7f7f7
- 文字颜色：灰色#8e8d8a
- 字体：Bai Jamjuree
- 文字大小：17px
- 圆角：15px
评论计数文本
也为评论计数文本设置样式。
- 标题级别：H3
- 字体：Bai Jamjuree
- 颜色：珊瑚色#e98074
- 尺寸：22 像素
- 字母间距：1px
表格标题文本
然后是表格标题。
- 标题级别：H3
- 字体：Bai Jamjuree
- 颜色：珊瑚色#e98074
- 尺寸：18 像素
- 字母间距：1px
元文本
也为元文本设置样式。
- 字体：Bai Jamjuree
- 颜色：#606060
- 尺寸：14 像素
- 字母间距：1px
评论文字
不要忘记评论文本。
- 字体：Bai Jamjuree
- 尺寸：1px
按钮
现在设置按钮样式。
- 自定义样式
- 文字大小：18px
- 文字颜色：白色#ffffff
- 背景颜色：珊瑚色#e98074
- 按钮边框半径：15px
- 按钮字体：Bai Jamjuree
浆纱
也调整行大小。
间距
以及间距设置。
- 顶部填充：8%
- 左右填充：4%
添加人员模块
文本
移动到固定的侧边栏列并添加一个人员模块。
- 名称：动态帖子作者
- 之前： 作者：
标题文本
在设计选项卡中，为标题文本设置如下样式：
- 标题级别：H4
- 字体：Bai Jamjuree
- 颜色：珊瑚色#e98074
- 尺寸：2vh
- 字母间距：2px
浆纱
接下来调整大小。
- 最小高度：
- 台式机：3vh
- 平板电脑和手机：自动
- 最大高度：
- 台式机：3vh
- 平板电脑和手机：自动
间距
也添加一些自定义间距。
- 最高边距
- 台式机：6vh
- 平板电脑和手机：10vh
添加图像模块
图片
现在，添加一个图像模块。 为作者的图片选择动态内容。
- 图片：动态作者简介图片
结盟
移至设计选项卡并选择以下对齐方式：
浆纱
接下来调整模块的大小。
- 最大宽度：15vh
- 模块对齐：左
- 最大高度
边界
最后，在边框设置中添加一些圆角。
添加侧边栏模块
内容
现在是时候使用侧边栏模块添加侧边栏小部件了。
布局
先调整布局。
- 显示边界分隔符：否
标题文本
接下来修改标题文本设置。
- 字体：Bai Jamjuree
- 重量：中等
- 颜色：珊瑚色#e98074
- 尺寸：2vh
- 字母间距：2px
主体
继续正文。
- 字体：Bai Jamjuree
- 重量：轻
- 颜色：深灰色#7f7f7f
- 悬停颜色：珊瑚色#e98074
- 尺寸：1.5vh
- 字母间距：1px
- 行高：1.8em
浆纱
也调整模块的大小。
- 最小高度
- 台式机：12vh
- 平板电脑和手机：自动
- 最大高度
- 台式机：12vh
- 平板电脑和手机：自动
间距
不要忘记添加一些间距。
- 顶部填充
- 台式机：1vh
- 平板电脑和手机：3vh
自定义 CSS
最后但同样重要的是，在高级选项卡中包含一些 CSS 代码行。
- 小部件：填充底部：0vh；
padding-bottom: 0vh;
- 标题：填充底部：2vh；
padding-bottom: 2vh;
添加电子邮件选项
文本
我们在侧边栏中需要的下一个模块是电子邮件选择模块。 添加一些您选择的内容。
- 标题：更新
- 按钮：订阅
电子邮件帐户
接下来将您的电子邮件连接到表单。
- 服务提供商：您的电子邮件提供商
- 列表：您选择的列表
字段
我们只在字段设置中使用名字字段。
背景
然后，关闭默认背景。
布局
转到设计选项卡并修改布局设置。
- 布局：正文在上，表格在下
- 名字全角：否
- 电子邮件全宽：否
字段
然后，按如下方式设置字段样式：
- 背景颜色：浅灰色 #f7f7f7
- 文字颜色：#606060
- 顶部和底部填充：1vh
- 左填充：1vh
- 字体：Bai Jamjuree
- 文字大小：1.5vh
- 字母间距：1px
- 圆角：15px
标题文本
也为标题文本设置样式。
- 标题级别：H4
- 字体：Bai Jamjuree
- 颜色：珊瑚色#e98074
- 尺寸：2vh
- 字母间距：2px
- 行高：1em
按钮
然后，按钮。
- 自定义样式
- 文字大小：1.5vh
- 文字颜色：白色#ffffff
- 背景颜色：珊瑚色#e98074
- 边框半径：15px
- 字母间距：2px
- 字体：Bai Jamjuree
- 顶部和底部填充：1vh
间距
并通过在模块中添加一些自定义间距值来完成模块设置和教程。 就是这样！ 完成创建模板正文后，请确保保存所有主题构建器更改。
- 顶部填充
- 底部填充
- 台式机：2vh
- 平板电脑和手机：6vh
- 左右填充
预览
现在我们已经完成了所有步骤，让我们最终看看不同屏幕尺寸的结果。
桌面
移动的
这是一个包装！
我们已完成为您的博客文章模板重新创建全高固定侧边栏。 如果您从上面的链接下载了模板，请不要忘记设置您的侧边栏小部件，如本教程的第一部分所示。
你是侧边栏还是没有侧边栏的人？ 如果您有任何想法或问题，请在评论中告诉我们！
