如何使用 5 个全局预设优化 Divi 的菜单模块（免费下载）

菜单是任何网站的重要组成部分，因此花一些额外的时间和精力来确保它们正确显示是有意义的。 在 Divi 中，我们可以使用 Divi 的 Menu 模块快速构建自定义菜单，该模块提供了许多我们需要的样式选项。 但通过事先准备一些菜单全局预设，它总是有助于简化设计网站标题的过程。 这将允许您通过单击按钮部署自定义菜单样式框架，以便您可以花更多时间调整设计以匹配您网站的品牌。 例如，如果您想要一个带有徽标和看起来像按钮的链接的居中菜单，您可以使用全局预设通过单击部署该框架。 这为您节省了宝贵的时间和精力。

在本教程中，我们将分享 5 个菜单模块全局预设，您可以在构建自定义 Divi 标头时使用它们。 除了包含所有 5 个预设的免费下载外，我们还将引导您完成从头开始创建这些预设的过程。

让我们开始吧！

抢先看

这是我们将在本教程中构建的设计的快速浏览。

免费下载布局

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

下载文件

免费下载

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

下载

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

要在全局标题上使用这些菜单全局预设，您必须首先将布局（及其预设）导入 Divi 库，如下所示：

1. 转到 Divi > Divi 库。
2. 单击页面顶部的导入/导出按钮。
3. 在可移植性弹出窗口中选择导入选项卡
4. 选择要导入的布局JSON文件
5. 选择导入预设
6. 单击导入按钮

然后转到主题构建器并编辑全局标题。 在您希望徽标所在的位置添加一个菜单模块，并使用预设来相应地设计和放置菜单。

让我们进入教程，好吗？

你需要什么开始

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

1. 如果您还没有安装并激活 Divi 主题。
2. 在WordPress中新建一个页面，在前端使用Divi Builder编辑页面（visual builder）。
3. 选择“从头开始构建”选项。

之后，您将有一个空白画布开始在 Divi 中进行设计。

在 Divi 中创建 5 个菜单模块全局预设

#1 – 带有徽标的居中按钮链接

对于我们的第一个菜单样式全局预设，我们将设计一个具有等宽按钮链接的菜单，以便菜单看起来对称。 我们甚至会包括与菜单按钮链接的活动状态相匹配的悬停状态。

要创建第一个菜单全局预设，请向常规部分添加一列行。

然后向该行添加一个菜单模块。

打开菜单设置并向模块添加菜单。

然后将站点徽标作为动态内容添加到模块中。

在设计选项卡下，更新以下内容：

• 风格：居中

• 菜单字体： Poppins
• 菜单字体粗细：粗体
• 菜单字体样式：TT
• 菜单文字大小：14px（桌面），24px（平板电脑和手机）
• 菜单字母间距：0.15em
• 菜单行高：1.3em（桌面），1.8em（平板电脑和手机）

• 标志最大高度：60px

• 边距：0px 底部

在高级选项卡下，我们将添加一些自定义菜单链接样式，以便它们显示为按钮。

菜单链接 CSS

将以下自定义 CSS 添加到菜单链接：

在桌面上...

min-width: 10em;
padding: 1em !important;
justify-content:center;
background: #f8f8f8;
border-radius: 10px;

在悬停…

background: #333333;
color: #ffffff;
opacity: 1;

活动菜单链接 CSS

background: #333333;
color: #ffffff;
opacity: 1;

菜单标志 CSS

margin-bottom: 10px;

样式 1 结果

这是最终的结果……

添加菜单样式 1 作为全局预设

重复部分

在我们将菜单样式添加为全局预设之前，复制包含菜单模块的整个部分，以便我们可以使用菜单样式来快速启动下一个设计。

从当前样式创建新预设

要添加全局预设，请打开我们创建的原始菜单模块的设置，然后单击预设下拉链接。

选择从当前样式创建新预设。

为新预设命名（“带徽标的居中按钮链接”），然后保存预设。

#2 – 带有按钮链接的内嵌居中徽标

要创建第二个菜单全局预设，请打开先前设计中复制菜单模块的设置。

在设计选项卡下，更新样式：

• 样式：内嵌中心标志

由于继承自先前模块样式的自定义 CSS，菜单链接保持按钮设计，而徽标完美地位于中心。 自定义按钮链接样式允许菜单链接保持漂亮的对称设计。

在高级选项卡下，更新菜单徽标 CSS，如下所示：

margin-bottom: 0px;

样式 2 结果

这是最终结果。

将菜单样式 2 添加为全局预设

重复部分

在我们将菜单样式添加为全局预设之前，复制包含菜单模块（样式 2）的整个部分，以便我们可以使用菜单样式来快速启动下一个设计。

从当前样式创建新预设

要添加全局预设，请打开我们创建的样式 2 的原始菜单模块的设置，然后单击预设下拉链接。

选择从当前样式创建新预设。

为预设命名（“带有按钮链接的内联居中徽标”）并保存预设。

#3 – 带有移动标签的全居中大众间隔菜单

对于下一个菜单样式，我们将设计一个没有徽标的全宽居中菜单，菜单文本的大小和间距以 vw 长度单位缩放，以便与浏览器宽度成比例。 它还将在移动设备上的汉堡包图标上方有一个“菜单”标签。

要创建第三个菜单全局预设，我们需要一个全角行。 打开保存重复菜单的行设置并更新以下内容：

• 天沟宽度：1
• 宽度：100%
• 最大宽度：100%

打开菜单模块的设置，删除标志。

在设计选项卡下，更新样式：

• 风格：居中

然后使用以下 VW 长度单位更新文本大小，以便文本大小随浏览器宽度缩放。

• 菜单文字大小：1.5vw（桌面）

要为移动菜单创建“菜单”标签，我们可以向 Tablet 显示上的 Before Psuedo 元素添加一些自定义 CSS，如下所示：

在 CSS 之前

content: "MENU";
font-family: poppins;
font-size:12px;
position: absolute;
top:0;
left:50%;
transform: translate(-50%, -100%);

请注意，字体系列设置为“poppins”以匹配菜单链接使用的字体。 如果您使用不同的字体，则需要更新它。

注意：这可能会也可能不会显示在可视化构建器上。 您可能需要加载实时页面才能看到结果。

接下来，我们将在悬停时添加一些额外的间距和菜单链接边框。 继续添加以下自定义 CSS：

菜单链接 CSS（桌面）：

min-width: 10em;
justify-content:center;
text-align:center;
padding: .3em;
margin-bottom: 8px;
border: 1px solid transparent;

菜单链接 CSS（悬停）：

color: #333;
border: 1px solid #333;
opacity:1;

活动菜单链接 CSS ：

color: #333;
border: 1px solid #333;
opacity:1;

样式 3 结果

将菜单样式 3 添加为全局预设

重复部分

在我们将菜单样式添加为全局预设之前，复制包含菜单模块（样式 3）的整个部分，以便我们可以使用菜单样式来快速启动下一个设计。

从当前样式创建新预设

要将样式 3 添加为全局预设，请打开我们创建的样式 3 的原始菜单模块的设置，然后单击预设下拉链接。

选择从当前样式创建新预设。

为预设命名（“带有移动标签的全中心大众间隔菜单”）并保存预设。

#4 – 带有移动标签的右间距菜单

要创建第四个菜单全局预设，我们需要使用 0ne-fourth 四分之三布局更新行的列布局。 这将模仿自定义标题布局，其中包括右侧的菜单模块和左侧栏中的徽标图像的单独位置。

确保菜单在右栏中。 然后打开菜单设置并更新元素选项以显示购物车图标和搜索图标。

在设计选项卡下，更新样式：

• 样式：左对齐

接下来更新以下链接样式和文本对齐方式：

• 活动链接颜色：#ac3cf7
• 菜单文字大小（桌面）：14px
• 文本对齐：右

现在我们手机上的汉堡包图标将在右侧，我们需要调整菜单标签在手机上的位置。 然后我们将添加一些菜单链接 CSS 以确保链接间隔开并与列/行的右侧齐平。

添加以下自定义 CSS：

CSS 之前（平板电脑）

content: "MENU";
position: absolute;
font-family:poppins;
font-size:12px;
line-height:1em;
top:0px;
right:6px;
transform: translateY(-100%);

菜单链接 CSS：

min-width: 8em;
padding: 0.3em;
margin-bottom: 8px;
justify-content:flex-end;

样式 4 结果

这是我们右对齐菜单的最终结果。 我在行中添加了浅灰色背景，以便您可以更好地查看对齐方式。

添加菜单样式 4 作为全局预设

重复部分

在我们将菜单样式添加为全局预设之前，复制包含菜单模块（样式 4）的整个部分，以便我们可以使用菜单样式来快速启动下一个设计。

从当前样式创建新预设

要将样式 4 添加为全局预设，请打开我们创建的样式 4 的原始菜单模块的设置，然后单击预设下拉链接。

选择从当前样式创建新预设。

为预设命名（“带移动标签的右间距菜单”）并保存预设。

#4 – 带有移动标签的左间距菜单

要创建第四个菜单全局预设，我们需要使用 0ne-fourth 四分之三的布局更新行的列布局。 这将模仿自定义标题布局，该布局将在左侧包含一个菜单模块，并在右侧列中包含一个单独的徽标图像（或 CTA）位置。

打开菜单设置并更新菜单链接的文本对齐方式：

• 文本对齐方式：左

然后我们需要调整移动菜单标签，使其位于左侧的汉堡导航上方。 通过在平板电脑上添加“direction:rtl”，我们将确保移动图标也将在移动设备的左侧对齐。

在高级选项卡下，更新以下自定义 CSS：

CSS（平板电脑）之前：

content: "MENU";
position: absolute;
font-family:poppins;
font-size:12px;
line-height:1em;
top:0px;
left:6px;
transform: translateY(-100%);

主要元素（平板电脑）：

direction:rtl;

菜单链接 CSS：

min-width: 8em;
padding: 0.3em;
margin-bottom: 8px;
justify-content:flex-end;

这是最终结果。

最终结果

最后的想法

虽然这些菜单模块的外观风格是基本的，但菜单布局的内部框架设计对于启动创作过程非常有帮助。 此外，对这些框架进行全局预设只会进一步加快进程。 随意探索更多自定义菜单模块的方法，并为您的下一个项目添加独特的预设。

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

干杯!