使用技巧

如何使用CSS自定义Divi菜单

如何使用CSS自定义Divi菜单

您是否使用Divi并想充分利用菜单? 在本指南中,我们将向您展示如何使用CSS自定义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,等宽;}

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

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

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

#top-menu li a:hover {
颜色:蓝色;
}

用户将鼠标悬停在导航栏链接上时,这会将导航栏链接的颜色更改为蓝色,但是您可以使用hexacode或RGBA格式调整代码并将其更改为所需的任何颜色。

4)更改下拉菜单宽度

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

#top-menu> li> .sub-men {
宽度:500像素;
}

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

除了细微的调整之外,您还可以进行更根本的更改。 例如,假设您要通过使用CSS来定制Divi菜单,方法是将图像显示为导航栏的背景。 为此,只需复制并粘贴以下代码:

.et_menu_container {
background-image:url(’http://localhost/Sampler/wp-content/uploads/2020/10/gift4.png’);
背景尺寸:cover;
}

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

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

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

最后,请注意,我们正在使用该属性,以便图像覆盖整个可用空间。 还有一些其他选项,例如repeat,auto,contain等,因此请选择一个您喜欢的选项。 有关图像在您网站上的打印方式的更复杂的选择,请查看 这个网站

如何将CSS应用于单个元素

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

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

使用CSS自定义Divi菜单

由于属性和值具有不言自明的名称,因此我们将重点介绍选择器。

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

当我们不指定单个元素时,CSS会将规则应用于其所有“子”元素。 这是继 CSS的继承原理 说明这种行为。

将CSS应用于单个元素

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

您将看到如下内容:

如何使用CSS自定义Divi菜单

大量的代码! 别担心,它似乎势不可挡,但是一旦您习惯了它就很容易处理。

打开HTML标签,

并将鼠标悬停在元素上时,您将看到元素在网页上如何突出显示。 这样,您可以查看所指向的元素,并获取需要在CSS代码中使用的HTML类或ID。

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

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

要复制它,请右键单击它,然后选择复制> CSS选择器。 既然您已经复制了CSS选择器,请转到WordPress仪表板,转到“定制器”>“其他CSS”,然后将其粘贴:

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

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

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

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

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

更多示例CSS脚本

您还可以做很多事情来使用CSS自定义Divi菜单。 让我们看看更多示例。

向菜单元素添加图标

要使用Font Awesome图标,首先,您需要将它们上传到您的网站。 之后,您可以粘贴以下脚本以在菜单的第一个元素旁边打印图标:

#top-menu> li:nth-​​child(1)a :: before {

padding-right:10像素;

字体家族:“ Font Awesome 5 Free”;

字体粗细:900; 内容:“ f015”;

}

将图标添加到菜单项Divi

如果看到损坏的字体,则表示未加载Font Awesome。

要加载图标集,请将此行插入标题部分中的“ Divi选项”>“高级”。

包括Font Awesome到Divi模板

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

一旦有了正确的CSS选择器,就可以对其应用任何CSS属性。 display:none;是最常见和最有用的一种。 这样您就可以从菜单中删除任何元素。 例如,要从菜单导航栏中隐藏购物车元素,请粘贴以下代码:

.et-cart-info {display:none;}

结论

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

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

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

此外,我们已经看到了如何将CSS应用于单个元素,如何向菜单添加图标以及隐藏任何元素。 我们建议您以这些脚本为基础,试用并自定义它们以使其适合您的站点。

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

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