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

已发表: 2019-11-09

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

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

让我们开始吧。

抢先看

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

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

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

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

免费下载模板

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

下载文件
免费下载

免费下载

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

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

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

让我们进入教程好吗？

你需要什么开始

首先，您需要执行以下操作：

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

之后，您就可以开始了。

订阅我们的 YouTube 频道

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

上传主题生成器包 #6

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

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

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

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

在 WordPress 中创建一个新的类别菜单

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

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

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

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

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

在主题生成器界面中，找到已分配给“所有帖子”的模板，然后单击自定义正文区域上的编辑图标。

将新的节和行添加到模板的顶部

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

自定义部分

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

  • 背景颜色：#f92c8b
  • 填充：1vw 顶部，1vw 底部

自定义行

接下来，按如下方式更新行设置：

  • 背景渐变左颜色：#f92c8b
  • 背景渐变右颜色：#ffd625
  • 梯度方向：90度
  • 填充：0px 顶部，0px 底部
  • 圆角：20px

添加菜单模块

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

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

设计菜单模块以匹配模板

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

更新以下设计设置：

  • 风格：居中
  • 菜单字体：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;

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

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

优化手机底部粘性菜单

使用底部定位更新粘性 CSS。

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

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

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

由于菜单将位于移动设备屏幕的底部，因此更改下拉菜单的方向：

  • 下拉菜单方向：向上

添加“类别”菜单标签

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

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。 并且主题生成器使您可以轻松地在站点上的任何位置添加菜单。 此外，您甚至可以为移动设备制作单独的粘性菜单，为您的用户提供最佳体验。 希望这会在您自己的博客或下一个项目中派上用场。

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

干杯!