WordPress divi主题

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

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

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

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

google广告开户

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

让我们开始吧!

预览

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

桌面

固定侧边栏

移动的

固定侧边栏

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

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

创建侧边栏小部件

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

打开小部件生成器

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

WordPress divi主题

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

将“Recent Posts”和“Categories”元素拖到侧边栏小部件中。

调整小部件中的元素设置

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

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

固定侧边栏

2. 开始使用主题生成器

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

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

设置模板设置

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

添加自定义正文

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

固定侧边栏

fiverr建站WordPress程序员

选择构建自定义主体

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

从头开始构建

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

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

部分设置

背景

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

独立站选品工具
  • 背景渐变
    • 颜色1:白色#ffffff
    • 颜色2:浅灰色#eaeaea

间距

也添加一些填充。

添加新行

立柱结构

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

固定侧边栏

高质量外链购买

浆纱

如下调整行的大小。

  • 自定义装订线宽度:2
  • 宽度:
    • 台式机和平板电脑:90%
    • 电话:100%
  • 最大宽度:
  • 最小高度:100vh

第 1 列设置

间距

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

第 2 列设置

背景

然后,将背景颜色添加到第 2 列。

JasperAI 10000字免费额度试用
  • 背景颜色:白色#ffffff

间距

也包括一些间距。

  • 左右填充
    • 桌面:3%
    • 平板电脑和手机:14%

边界

接下来给列圆角。

WordPress备份工具updrafplus

自定义 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
  • 左右填充

预览

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

桌面

固定侧边栏

移动的

固定侧边栏

这是一个包装!

我们已完成为您的博客文章模板重新创建全高固定侧边栏。 如果您从上面的链接下载了模板,请不要忘记设置您的侧边栏小部件,如本教程的第一部分所示。

你是侧边栏还是没有侧边栏的人? 如果您有任何想法或问题,请在评论中告诉我们!

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