• 主页
  • 文章
  • 主题
  • 如何向自定义 Divi 标题中的菜单项添加“新”或“特色”角标签

如何向自定义 Divi 标题中的菜单项添加“新”或“特色”角标签

已发表: 2020-06-24

在构建网站标题时，特别注意访问者的行为有助于提高点击率。 您的标题不仅应该看起来不错，而且还应该有助于引导访问者访问您网站上最重要的页面。 一种常用的技术是在全局标头中添加号召性用语，但这并不是唯一的选择。 您还可以选择要放在聚光灯下的菜单项上的角标签。 在本教程中，我们将向您展示如何向特定菜单项添加“特色”或“新”标签。 这些角落标签将有助于强调列表中的菜单项，这会增加您的访问者的好奇心和点击率。 您还可以下载全局标题模板！

让我们开始吧。

预览

在我们深入学习教程之前，让我们快速浏览一下不同屏幕尺寸的教程概念。

角标

免费下载全局标题模板

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

下载文件
免费下载

免费下载

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

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

1. 为 WordPress 菜单项添加标签

转到外观菜单

本教程的第一部分致力于在 WordPress 菜单中设置标签。 为此，请导航到您的 WordPress 仪表板 > 菜单 > 打开您正在使用的主菜单或创建一个新菜单。

角标

为特色菜单项添加标签

接下来，我们将通过将标签 HTML 标签放置在菜单项前面，向我们选择的菜单项添加特色标签。 

  • <label class="menu-label featured-label">Featured</label>

    服务

角标

将标签添加到新菜单项

我们将对我们选择的另一个菜单项执行相同的操作，并更改标签内的 CSS 类以及标签副本。 

  • <label class="menu-label new-label">New</label>

    免费课程

角标

2.转到Divi Theme Builder

转到 Divi 主题生成器并添加全局标题

现在标签已经设置好，是时候切换到 Divi 了。 导航到您网站的 Divi Theme Builder，然后单击“添加全局标题”。

角标

从头开始构建

然后，选择“Build Global Header”以重定向到模板编辑器。

角标

3. 构建全局标题

部分设置

背景颜色

进入模板编辑器后，您会注意到一个部分。 打开该部分并添加背景颜色。 我们将构建的页眉设计与 Tutor Layout Pack 相得益彰，但您可以随意创建您想要的任何页眉设计，只要您在其中包含代码模块（稍后）。

  • 背景颜色：#2a3749

角标

间距

转到该部分的设计选项卡并删除间距设置中的所有默认顶部和底部填充。

  • 顶部填充：0px
  • 底部填充：0px

角标

能见度

由于我们将添加到行中的重叠（正如您在预览中所注意到的），我们需要将部分的溢出设置为可见。

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

角标

添加新行

列结构

继续使用以下列结构向该部分添加新行：

角标

背景颜色

尚未添加任何模块，打开行设置并应用白色背景色。

  • 背景颜色：#FFFFFF

角标

浆纱

转到设计选项卡并相应地修改尺寸设置：

  • 使用自定义装订线宽度：是
  • 天沟宽度：1

角标

间距

我们也会将一些自定义填充值应用于间距设置。

  • 顶部填充：25px
  • 底部填充：25px
  • 左填充：50px
  • 右填充：50px

角标

边界

还有一些圆角。

  • 所有角：6px

角标

盒子阴影

还有一个微妙的盒子阴影。

  • 框阴影垂直位置：16px
  • 阴影颜色：rgba(0,0,0,0.07)

角标

转换 翻译

接下来，我们将使用设计选项卡中的变换转换设置重新定位行。

  • 变换 向右平移：50px

角标

溢出

为了确保我们的下拉菜单出现在较小的屏幕尺寸上，我们将通过将溢出设置为可见来完成行设置。

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

角标

将菜单模块添加到列

选择菜单

是时候添加菜单模块了。 选择您在本教程第一部分中编辑过的菜单。

角标

上传标志

接下来上传徽标。

角标

菜单文字设置

然后，转到设计选项卡并按如下方式更改菜单文本设置：

  • 菜单字体：PT Sans
  • 菜单文字颜色：#000000
  • 菜单文字大小：16px
  • 文本对齐：右

角标

下拉菜单设置

也修改下拉菜单行颜色。

  • 下拉菜单行颜色：#007aff

角标

图标

继续更改图标设置中的汉堡菜单图标颜色。

  • 汉堡菜单图标颜色：#007aff

角标

浆纱

并通过为大小设置分配徽标最大宽度来完成模块设置。

  • 徽标最大宽度：40%

角标

将代码模块添加到列

完成菜单模块的整体外观后，继续在其下方添加代码模块。

角标

添加 CSS 代码

以下 CSS 代码将帮助我们单独设置菜单标签的样式并创建响应式设计： 

<style>
 
.menu-label {
text-transform: uppercase;
color: #fff;
letter-spacing: 1px;   
border-radius: 5px;    
font-size: 10px;  
padding: 5px 10px;  
}  
  
.featured-label {
background-color: #F9654D;
}
.new-label {
background-color: #007AFF;
}
 
.et_pb_menu .et_pb_menu__menu, 
.et_pb_menu .et_pb_menu__menu>nav, 
.et_pb_menu--style-left_aligned.et_pb_text_align_right .et_pb_menu__menu>nav>ul {
width: 100% !important;
}

.et_pb_menu .et_pb_menu__menu>nav>ul>li
{
padding-left: 15px !important;
padding-right: 15px !important;
}

@media all and (min-width: 980px) {
.menu-label {  
position: absolute;
top: -10px;  
padding: 8px 15px;
}

}
@media all and (max-width: 980px) {  
.menu-label {
position: relative;
float: right;
font-size: 12px;  
padding: 5px 20px;   
}
}
  
</style>

角标

4. 保存所有主题生成器更改并预览结果

完成标题设计后，请确保在您的网站上查看结果之前保存所有 Divi Theme Builder 更改！

角标

角标

预览

现在我们已经完成了所有步骤，让我们快速浏览一下不同屏幕尺寸的结果。

角标

最后的想法

在这篇文章中，我们向您展示了如何突出显示 Divi 构建的全局标题中的特定菜单项。 更具体地说，我们在 WordPress 菜单中包含了角标签，这些标签显示在菜单模块中。 这是在菜单中突出显示不同菜单项的好方法，而不会造成大量的导航旅程。 您也可以免费下载 JSON 文件！ 如果您有任何问题或建议，请随时在下面的评论部分发表评论。

如果您渴望了解有关 Divi 的更多信息并获得更多 Divi 免费赠品，请确保订阅我们的电子邮件时事通讯和 YouTube 频道，这样您将永远是第一批了解此免费内容并从中受益的人之一。