如何使用 CSS 自定义 Divi 菜单

已发表: 2021-04-08

您是否使用 Divi 并想充分利用您的菜单？在本指南中，我们将向您展示如何使用 CSS 自定义 Divi 菜单，以从竞争对手中脱颖而出并改善您网站上的客户体验。

Divi 拥有超过 300 万用户，是市场上最受欢迎的页面构建器之一。原因之一是它非常灵活，并带有大量自定义选项，即使您是初学者，也可以让您的网站具有专业的外观。但是，要将您的网站设计提升到一个新的水平，您需要使用 CSS 脚本自定义设计。您可以编辑许多内容，但最重要的内容之一是导航菜单。

为什么要编辑 Divi 菜单？

菜单导航栏是任何网站最重要的元素之一。它位于页面顶部，因此它是用户在加载页面时看到的第一个元素。通常，该菜单出现在网站的所有页面上，使其成为用户看到最多的元素。

最重要的是，菜单的主要功能是为访问者提供一种轻松导航和改善用户体验的方法。这就是为什么组织良好且设计良好的导航菜单可以对您的业务产生重大影响的原因。

尽管 Divi 带有许多工具来编辑菜单，但添加自定义代码是最好的方法。但是，如果您不知道如何编码，请不要担心。在本教程中，我们将逐步向您展示如何使用 CSS 自定义 Divi 菜单。

如何使用 CSS 自定义 Divi 菜单

在本节中，我们将向您展示如何使用 CSS 编辑 Divi 菜单以充分利用它。您需要通过转到外观 > 自定义 > 附加 CSS将 CSS 脚本粘贴到 WordPress 定制器中。或者，您可以将它们粘贴到子主题的style.css文件中。

注意：开始之前：

备份：创建站点的完整备份
使用子主题：您可以按照本指南创建一个或使用这些插件中的任何一个

现在让我们看看使用 CSS 脚本自定义 Divi 菜单的不同选项。

1）改变导航栏的背景颜色

Divi 为您提供了编辑菜单背景颜色的选项，但将其应用于整个标题。如果您只想更改导航栏的颜色，请使用以下脚本：

.et_menu_container{background-color:red;}

更改 Divi 菜单导航栏的颜色

2) 更改菜单字体

自定义 Divi 菜单的另一种方法是更改菜单字体。例如，这个 CSS 脚本会将菜单中所有元素的字体更改为 Lucida Console。这包括下拉菜单和菜单容器中显示的任何其他内容。

.et_menu_container{font-family: Lucida Console, Courier, monospace;}

注意：字体系列是一组字体，如上例所示。 您也可以选择一种字体，但首先，您必须将其上传到您的 WordPress 安装中。 要了解有关字体的更多信息，您可以查看以下链接：

如何将 Google 字体添加到 WordPress
更改 WordPress 中的字体
字体系列

3）更改悬停元素上的文本颜色

要在将鼠标悬停在元素上时更改文本的颜色，请使用以下代码：

#top-menu li a:hover{ color:blue; }

当用户将鼠标悬停在导航栏链接上时，这会将导航栏链接的颜色更改为蓝色，但您可以调整代码并使用十六进制代码或 RGBA 格式将其更改为您想要的任何颜色。

4) 更改下拉菜单宽度

为确保 Divi 菜单的每个元素看起来都不错，您可以调整下拉菜单的宽度。例如，要为下拉菜单提供 500 像素的宽度，请使用以下 CSS 脚本：

#top-menu > li > .sub-menu{ width:500px; }

5) 为 Divi 菜单导航栏添加背景图片

除了小调整外，您还可以进行更彻底的更改。例如，假设您想通过将图像显示为导航栏的背景来使用 CSS 自定义 Divi 菜单。为此，只需复制并粘贴以下代码：

.et_menu_container{
background-image:url('http://localhost/Sampler/wp-content/uploads/2020/10/gift4.png');
background-size:cover; }

将图像添加到 Divi 背景菜单导航栏

请注意，我们使用的是以前上传的图像。只需上传您自己的图像并将图像 URL 替换为您要使用的图像。

或者，您也可以使用来自外部 URL 的图像，但我们强烈建议您将图像上传到您网站的媒体库。这样，您可以确保您完全控制图像，并且如果图像所有者决定删除它，则不会有丢失它的风险。

最后，请注意我们正在使用该属性，以便图像覆盖整个可用空间。还有一些其他选项，例如重复、自动、包含等，因此请选择您喜欢的选项。有关如何在您的网站上打印图像的更复杂选项，请查看此网站。

如何将 CSS 应用于单个元素

上面的示例编辑菜单导航栏中的所有元素，但这不是使用 CSS 代码自定义 Divi 菜单的唯一方法。您还可以将 CSS 脚本应用于单个元素。但是，在我们开始讨论之前，让我们更好地了解 CSS 的工作原理以及我们如何创建脚本。

CSS 单行称为规则，由选择器、属性和值组成。

使用 CSS 自定义 Divi 菜单

由于属性和值具有不言自明的名称，我们将重点关注选择器。

选择器是指向被属性和值修改的元素的代码。选择器可以引用多个或单个元素。

当我们不指定单个元素时，CSS 会将规则应用于它的所有“子”元素。这遵循声明此行为的 CSS 的继承原则。

将 CSS 应用于单个元素

要将 CSS 应用于单个元素，您需要使用浏览器控制台并为该元素选择特定的选择器。为此，请转到要编辑的页面并右键单击或按 F12 打开浏览器控制台。

你会看到这样的东西：

如何使用 CSS 自定义 Divi 菜单

那是很多代码！不用担心，它可能看起来让人不知所措，但是一旦你习惯了它就很容易处理。

当您打开 HTML 标签<body> 、 <header> 、 <div>并将鼠标悬停在它们上方时，您将看到这些元素是如何在您的网页上突出显示的。通过这种方式，您可以查看您指向的元素并获取您需要在 CSS 代码中使用的 HTML 类或 ID。

单击要更改的元素，您将看到 CSS 选择器

使用浏览器开发工具选择 CSS 选择器

要复制它，请右键单击它并选择复制 > CSS 选择器。现在您已经复制了 CSS 选择器，转到您的 WordPress 仪表板，前往Customizer > Additional CSS并粘贴它：

#top-menu > li:nth-child(1)

该选择器指向我们示例网站上的“主页”链接，因此现在我们可以使用任何 CSS 属性并将其仅应用于菜单的“主页”链接。例如，要将背景颜色更改为红色，您将使用如下内容：

#top-menu > li:nth-child(1){background-color:red;}

请注意， :nth-child(1)伪类告诉我们这是同一层次结构中的第一个 (1) 列表元素。

现在您知道如何使用浏览器检查器复制选择器，您可以将 CSS 样式应用于网站的任何元素。

结论

总而言之，编辑站点菜单是改善站点导航和改善站点用户体验的绝佳方式。尽管 Divi 有几个选项，但最好的方法是使用 CSS 脚本自定义 Divi 菜单。

在本教程中，我们已经看到了几种逐步编辑菜单的方法，即使您没有编码技能，也可以帮助您将网站提升到一个新的水平。到目前为止，您应该知道如何：

更改菜单的背景颜色
修改字体
更改悬停元素上的文本颜色
更改下拉菜单的宽度
将背景图像添加到菜单

此外，我们还了解了如何将 CSS 应用于单个元素、将图标添加到菜单以及隐藏任何元素。我们建议您以这些脚本为基础，尝试并自定义它们以适应您的站点。

有关如何充分利用 Divi 的更多指南，请查看以下指南：

在 Divi 中自定义产品页面
如何在 Divi 商店页面中添加添加到购物车按钮
如何在 Divi 中隐藏/删除页脚
Divi 联系表不起作用 - 如何修复它

您是否尝试过使用 CSS 编辑网站的菜单？你改变了什么？在下面的评论部分让我们知道！

如何使用 CSS 自定义 Divi 菜单

为什么要编辑 Divi 菜单？

如何使用 CSS 自定义 Divi 菜单

1）改变导航栏的背景颜色

2) 更改菜单字体

3）更改悬停元素上的文本颜色

4) 更改下拉菜单宽度

5) 为 Divi 菜单导航栏添加背景图片

如何将 CSS 应用于单个元素

将 CSS 应用于单个元素

更多示例 CSS 脚本

向菜单元素添加图标

使用 CSS 隐藏菜单的任何元素

结论