如何在 Divi 页面设计中包含主菜单栏

导航是您网站用户体验的重要组成部分。 确保您的访问者可以无缝浏览您的网站，而不必在美学上妥协，这一点很重要。 默认情况下，WordPress 主菜单栏位于每个页面的顶部，并被视为与您选择遵循的页面设计分开。 但是，在许多情况下，在整个页面设计中包含您的菜单可以带来惊人的效果。 它会给你的网站一个更连贯的外观和感觉。

在这篇文章中，我们将向您展示如何在 Divi 页面设计中包含主菜单栏。 这是对主菜单通常显示方式的简单但动态的更改，为任何 Divi 项目带来独特的外观。

让我们开始吧！

订阅我们的 YouTube 频道

预览

让我们首先看看不同屏幕尺寸的最终结果：

主题定制器设置

转到主题定制器

在我们开始构建我们的设计之前，让我们从一些主题定制器更改开始。 转到您的WordPress 仪表板 > 外观 > 自定义。

保存背景图像

由于我们要从顶部分离主菜单栏，我们需要一些东西来覆盖它通常占用的空间。 我们将使用以下背景图片，因此请继续将其保存在您的计算机上：

将背景图像上传到常规设置

然后，转到“常规设置”>“背景”并将图像上传到您网站的背景。

• Strech 背景图像：已启用
• 背景位置：固定

主菜单栏设置

我们还将准备好主菜单栏与我们的 Divi 设计合并。 为此，我们需要先修改主菜单栏设置。 转到标题和导航 > 主菜单栏并使用以下设置：

• 徽标最大高度：100
• 文字大小：18
• 字母间距：-1
• 字体: Poppins
• 文字颜色：#333333
• 活动链接颜色：#f55c83
• 背景颜色：rgba(255,255,255,0)
• 下拉菜单背景颜色：#FFFFFF

添加新页面

页面自定义 CSS

为了使主菜单栏与我们的页面设计重叠，我们需要一些 CSS 代码。 您可以选择是要将重叠应用于整个网站还是仅应用于特定页面。 如果您选择仅将其添加到一页，请将以下 CSS 代码添加到您的页面设置中：

#main-header {
margin-top: 140px;
}

添加新部分

背景颜色

让我们开始设计吧！ 添加一个新页面，切换到 Visual Builder 并添加您的第一部分。 接下来打开部分设置并添加 'rgba(255,255,255,0.81)' 作为背景颜色。 这将允许我们的网站背景图像显示出来。

间距

继续转到间距设置并添加以下自定义边距和填充：

• 上下边距：100px
• 左右边距：60px
• 顶部填充：135px
• 底部填充：0px

圆角

也将“30px”添加到您部分的每个角落。

边界

然后，为您的部分添加一个顶部边框：

• 顶部边框宽度：35px
• 顶部边框颜色：#333333

盒子阴影

最后，添加一个非常微妙的框阴影。

• 框阴影模糊强度：61px
• 框阴影传播强度：-13px

添加第 1 行

列结构

是时候开始添加行和模块了！ 使用两个大小相同的列添加第一行。

浆纱

在不添加任何模块的情况下，打开行设置并更改大小设置：

• 使这一行全宽：是
• 均衡柱高：是

间距

接下来添加一些自定义填充：

• 顶部填充：250 像素（桌面）、50 像素（平板电脑和手机）
• 底部填充：200 像素（桌面）、100 像素（平板电脑）、50 像素（手机）
• 第 1 列左填充：50px（桌面），0px（平板电脑和手机）

将标题文本模块添加到第 1 列

H1 文本设置

我们现在可以开始添加模块了。 我们将从第一列开始，添加一个新的标题文本模块。

• 标题字体： Poppins
• 标题字体粗细：中等
• 标题文字大小：120 像素（桌面）、80 像素（平板电脑）、58 像素（手机）

为副本的一部分添加不同的颜色

通过切换到“文本”选项卡并使用跨度标签为您选择的单词添加颜色，您可以轻松更改标题中单词的颜色。

将描述文本模块添加到第 1 列

文字设置

在上一个文本模块的正下方，继续使用以下文本设置添加描述文本模块：

• 文字字体： Poppins
• 文字字体粗细：常规
• 文字大小：20px（桌面），15px（平板电脑和手机）
• 文本行高：2em

间距

我们需要为这个文本模块留一些额外的边距：

• 上下边距：50px

将按钮模块添加到第 1 列

按钮设置

此列中的最后一个模块是按钮模块。 添加 CTA 副本后，更改按钮样式：

• 为按钮使用自定义样式：是
• 按钮文字颜色：#FFFFFF
• 渐变色 1：#f45085
• 渐变色 2：#f88c7e
• 梯度方向：137deg
• 按钮边框宽度：0px
• 按钮边框半径：40px
• 按钮字体： Poppins
• 按钮字体粗细：常规
• 字体样式：大写

间距

接下来打开间距设置并为您的按钮添加一些边距和填充：

• 下边距：100px（桌面），20px（平板和手机）
• 顶部和底部填充：15px
• 左右填充：50px

盒子阴影

最后但并非最不重要的是，我们将使用一个非常微妙的框阴影在我们的页面上创建更多的深度：

• 框阴影模糊强度：55px
• 框阴影扩散强度：-4px
• 阴影颜色：rgba(84,84,84,0.25)

将图像模块添加到第 2 列

保存并上传图片

第二列只包含一个图像模块。 我们使用的模型是 Divi 数字营销布局包的一部分。 继续并将下面的图像保存到您的计算机。 执行此操作后，将其添加到第二列中的图像模块。

添加第 2 行

列结构

是时候添加第二行了！ 为其选择以下列结构：

第 1 列背景颜色

然后，打开行设置并添加“#FFFFFF”作为第 1 列的背景颜色。

复制按钮渐变背景

我们将节省一些时间并复制我们已经用于按钮模块的渐变。 为此，打开按钮模块，转到按钮设置，右键单击渐变背景并复制它。

在第 2 列中粘贴渐变背景

然后，返回到您的行设置并将渐变背景粘贴到第二列中。

第 3 列背景颜色

对于第三列，我们使用“#FFFFFF”背景色。

浆纱

接下来转到大小设置并更改设置：

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

间距

我们还需要一些额外的填充：

• 顶部和底部填充：0px
• 列顶部和底部填充：30px

盒子阴影

最后但并非最不重要的是，我们将使用一个微妙的框阴影：

• 框阴影模糊强度：61px
• 框阴影传播强度：-20px

添加模糊模块 #1

选择图标

我们总共需要三个 Blurb 模块。 我们将从一个开始，然后克隆它以节省时间。 继续向第一列添加一个新的 Blurb 模块。 添加内容后，选择一个图标。

图标设置

相应地更改图标的设置：

• 图标颜色：#f55c83
• 图标位置：左
• 使用图标字体大小：是
• 图标字体大小：88px（桌面和平板电脑），50px（手机）

标题文字设置

接下来打开标题文本设置并进行一些更改：

• 标题字体: Poppins
• 标题字体粗细：中等
• 标题文字大小：34px（桌面和平板电脑），23px（手机）

正文设置

正文也需要修改：

• 正文字体： Poppins
• 正文字体重量：常规
• 正文大小：16px（桌面），14px（平板电脑和手机）
• 车身线高：2em

间距

为了创建更具美感的设计，添加一些填充：

• 顶部填充和底部填充：100px
• 左右填充：50px（桌面和平板电脑），10px（手机）

克隆 Blurb 模块两次并放置在剩余的列中

继续克隆您的 Blurb 模块两次。 执行此操作后，将它们放在剩余的列中。

更改第 2 列中的模糊模块

更改图标颜色

第三个 Blurb Modules 不需要任何更改，但是第二个需要。 首先将图标颜色更改为白色。

更改文本颜色

接下来打开文本设置并将文本颜色更改为“浅色”。

禁用固定导航

为了确保主菜单栏在设计中保持其位置，我们还需要禁用固定导航栏。 为此，请转到您的WordPress 仪表板 > Divi > 主题选项 > 禁用“固定导航栏”选项并保存设置。

预览

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

最后的想法

在这篇文章中，我们向您展示了如何在整体 Divi 页面设计中创造性地包含主菜单栏。 这种方法将帮助您在网站上创建更加连贯的外观和感觉。 我们也从头开始创建了一个示例。 如果您有任何问题或建议，请务必在下方评论区留言！