WordPress divi主题

如何在 Divi 中为您的博客模板添加粘性类别菜单

by | May 8, 2022 | Divi主题使用教程 | 0 comments

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

类别菜单是任何博客的一个令人愉快的补充。 它们让博主有机会展示可用的不同类型的主题,以便读者可以快速轻松地获得他们关心的内容。 因此,在您网站中的所有博客相关模板上拥有一个精心设计的类别菜单非常重要。

google广告开户

在本教程中,我们将向您展示如何使用 Divi 的主题生成器将粘性类别菜单添加到您的博客。 我们将介绍如何使用 Divi Builder 创建粘性类别菜单,以及如何将类别菜单添加到网站上构成博客的不同模板中。

让我们开始吧。

抢先看

这是添加到帖子模板的粘性类别菜单

这是移动设备上的底部粘性类别菜单。

这是类别页面模板上的类别菜单。

这是一个快速简单的博客模板,我们将使用粘性类别菜单从帖子滑块下方开始并在滚动时粘贴到页面顶部。

WordPress divi主题

免费下载模板

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

要将布局导入您的页面,只需提取 zip 文件并使用 Theme Builder Portability 选项将其中一个 json 文件添加到 Divi Theme Builder 中。

让我们来看看教程好吗?

你需要什么开始

要开始,您需要执行以下操作:

  1. 如果您还没有,请安装并激活 Divi 主题。
  2. 下载 Theme Builder Pack #6 以开始新设计。

之后,您就可以出发了。

订阅我们的 Youtube 频道

将粘性二级类别菜单添加到您的博客模板

上传 Theme Builder Pack #6

对于本教程,我们将使用 Theme Builder Pack #6。 从博客文章下载包后,转到 WordPress 仪表板并导航到 Divi > Theme Builder。

然后单击右上角的可移植性图标。 在可移植性弹出窗口中,选择导入选项卡并选择 Divi-Theme-Builder-Pack-6-All.json 文件。 然后单击“导入 Divi 主题生成器模板”按钮。

fiverr建站WordPress程序员

这会将所有模板导入主题生成器。

现在我们准备开始创建我们的类别菜单。

在 WordPress 中创建新的类别菜单

可以像 WordPress 中的普通菜单一样创建类别菜单。 在 WordPress 仪表板中,导航到外观 > 菜单。 单击创建新菜单链接,为菜单命名,然后单击“创建菜单”按钮。

独立站选品工具

在菜单项下,打开类别切换并选择要添加到菜单的所有类别/页面。 确保已经为类别项目创建了类别以显示在类别切换中。 类别菜单项将重定向到特定帖子类别的类别页面。

在帖子模板的正文区域设计一个粘性类别菜单。

创建类别菜单后,就该设计我们的类别菜单了。 为此,我们需要将其添加到其中一个模板的正文区域。 我们最终会将类别菜单添加到与博客相关的其他模板中,但现在,让我们将其添加到所有帖子的模板(或帖子模板)中。

打开身体区域模板布局编辑器

在 Theme Builder 界面中,找到已经分配给“所有帖子”的模板,然后单击自定义正文区域上的编辑图标。

高质量外链购买

将新部分和行添加到模板顶部

在模板布局编辑器中,创建一个具有一列行的新部分并将其拖到布局的最顶部。

自定义部分

在添加模块之前,打开部分设置并给它一个背景和一些填充,如下所示:

  • 背景颜色:#f92c8b
  • 填充:1vw 顶部,1vw 底部

JasperAI 10000字免费额度试用

自定义行

接下来,按如下方式更新行设置:

  • 背景渐变左颜色:#f92c8b
  • 背景渐变右颜色:#ffd625
  • 渐变方向:90度
  • 内边距:0px 顶部,0px 底部
  • 圆角:20px

添加菜单模块

在单列行内,添加一个新的菜单模块。

然后,从下拉菜单中选择您之前创建的类别菜单。 选择后,您的菜单项将出现在菜单中。

WordPress备份工具updrafplus

设计菜单模块以匹配模板

删除默认背景颜色,以便显示行背景颜色。

更新以下设计设置:

  • 风格:居中
  • 菜单字体:Ubuntu
  • 菜单字体粗细:粗体
  • 菜单字体样式:TT(大写)
  • 菜单文字颜色:#ffffff
  • 菜单字母间距:2px
  • 菜单行高:2em
  • 下拉菜单背景颜色:#ffffff
  • 下拉菜单行颜色:#f92c8b

  • 下拉菜单文本颜色:#222222
  • 移动菜单文本颜色:#222222
  • 汉堡菜单图标颜色:#ffffff
  • 汉堡菜单图标字体:40px
  • 宽度:90%
  • 模块对齐:中心

部分和行可见性

为了防止任何菜单下拉菜单被隐藏,我们需要确保并将我们的部分和行的可见性设置为可见。 另外,我们还需要给 z 索引一个大的数字,以保持整个菜单顺序高于页面上的所有其他内容。 这将需要最大限度地提高移动设备上下拉菜单和粘性菜单的可见性。

打开部分设置并更新以下内容:

  • 水平溢出:可见
  • 垂直溢出:可见
  • Z指数:999

打开行设置并更新以下内容:

  • 水平溢出:可见
  • 垂直溢出:可见

使部分(包含菜单)具有粘性

这当然是可选的,但要创建粘性类别菜单,请打开部分设置并将以下自定义 CSS 添加到主元素:

position: -webkit-sticky !important;
position: sticky !important;
top: 0px;

复制部分以创建底部类别菜单

为了在移动设备上获得更好的用户体验,我们可以创建另一个粘贴在页面底部的类别菜单。 要创建菜单,只需复制包含刚刚创建的菜单的部分。

优化移动底部粘性菜单

使用底部定位更新 Sticky CSS。

由于我们只需要将此菜单“粘贴”在移动设备上,因此打开部分设置并删除桌面的自定义 CSS。 然后在平板选项卡下添加以下自定义 CSS。

position: -webkit-sticky !important;
position: sticky !important;
bottom: 0px;

更改底部类别菜单的下拉菜单方向

因为菜单将位于移动设备屏幕的底部,所以更改下拉菜单的方向:

  • 下拉菜单方向:向上

添加“类别”菜单标签

要在移动菜单图标旁边添加标签,请在菜单设置的高级选项卡下,将以下自定义 CSS 添加到之前元素:

position: absolute !important;
color: #ffffff!important;
font-size: 16px;
content: "Categories";
line-height: 2em;
left: 50%;
margin-left: -110px;

这是迄今为止在移动设备上的菜单。

在移动设备上隐藏顶部菜单

为避免移动设备上的标题过于拥挤,请禁用手机和平板电脑上的顶部菜单。 这只会在桌面上显示顶部的粘性菜单。

将两个菜单/行保存到 Divi 库。

我们已完成为布局创建两个类别菜单。 为了便于将它们添加到其他模板,我们可以将它们保存到我们的 Divi 库中。 要保存顶部菜单,请从部分菜单中选择“添加到库”图标。 然后给布局命名并单击“保存到库”按钮。

重复相同的过程,将底部菜单也保存到库中。 只要确保并给它起一个你会记住的名字。

博客文章模板的最终结果

让我们看看使用我们新的粘性类别菜单的实时帖子是什么样的。

桌面视图(顶部菜单)

移动视图(底部菜单)

将粘性次要类别菜单添加到类别页面模板

由于我们已将菜单部分添加到 Divi 库中,因此我们可以将它们添加到任何模板布局中。 我们要添加类别菜单的下一个模板是类别页面模板。

编辑类别页面模板的正文区域

找到分配给“所有类别页面”的模板,然后单击自定义正文区域上的编辑图标。

从库中添加顶级类别菜单

在模板布局编辑器中,单击蓝色加号图标以添加新部分。 然后选择从库选项卡添加并从列表中选择顶部类别菜单。

然后将该部分移动到模板布局的顶部。

从库中添加底部类别菜单

接下来,单击以将新部分添加到布局的最底部。 然后从库中添加底部类别菜单。

更新菜单的活动链接颜色

对于此模板,更新活动链接颜色是个好主意,因为菜单项将包含指向使用此模板的类别页面的链接。 打开顶部菜单设置并更新以下内容:

  • 活动链接颜色:#4160fd

现在,当您访问类别页面时,活动链接将显示为蓝色。

类别页面模板的最终结果

将粘性类别菜单添加到博客页面模板

我们还可以将粘性类别菜单添加到我们网站的博客页面。 博客页面基本上是您博客的主页,通常显示您所有博客文章的提要。 使用 Divi Theme Builder,我们可以为博客页面创建模板并轻松添加类别菜单。

创建博客模板

首先,复制类别页面模板。

然后将重复的模板分配给博客。

编辑博客模板的自定义正文。

自定义博客模板布局

使用模板布局编辑器来设计博客模板。 现在,让我们在页面顶部给它一个漂亮的全角帖子滑块。 为此,请创建一个新的全角部分。

添加全宽帖子滑块

然后在该部分添加一个全角 Post Slider 模块。

设置内容以提取“当前页面的帖子”。 然后将确保它为博客页面提取正确的动态内容。

更新全角帖子滑块设置,如下所示:

  • 标题字体:Ubuntu
  • 标题字体粗细:中
  • 正文字体:Ubuntu

在帖子滑块下移动菜单

对于此布局,让我们将帖子滑块拖动到页面顶部,以便顶部粘性类别菜单位于滑块下方。

创建和分配帖子(或博客)页面

确保您在 WordPress 中指定了一个博客页面。 为此,请转到设置 > 阅读。 然后对于主页显示,选择一个静态页面。 然后选择要用于“帖子”页面的页面。

博客页面模板的最终结果

请注意类别菜单在到达页面顶部时是如何变得粘滞的。

最后的想法

粘性类别菜单可以真正将您的博客提升到一个新的水平。 构建一个实际上只是使用 Divi Builder。 主题生成器可以轻松地将菜单添加到您网站上的任何位置。 此外,您甚至可以为移动设备制作单独的粘性菜单,为您的用户提供最佳体验。 希望这将在您自己的博客或下一个项目中派上用场。

我期待在评论中收到您的来信。

干杯!

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