如何使用导航菜单创建 Elementor 混合标题

已发表: 2022-09-08

作为网站用户,您一定已经看过 Elementor 混合标头并出于您的目的反复使用它。 如果是这样,您就非常清楚它的重要性。 它不仅节省了屏幕空间,而且使页面视图美观。

Elementor 混合标头是标头的重要组成部分,使用户在浏览网站时轻松自如。 我们将讨论使用导航菜单创建混合标题的过程。

开始吧!

什么是 Elementor 混合标头

navbar illustration 03 - BdThemes

现在,让我们找出什么是 Hybrid 标头。 当我们将鼠标悬停在菜单上时,菜单列表会出现在其下方,这是主标题。 接下来,当我们将鼠标悬停在主标题中的其中一个菜单上时,会出现一个带有菜单列表的子菜单。 这称为混合标头。

使用更少的空间来显示更多的菜单项

正如您了解了 Elementor 混合标题一样,您现在知道它有助于减少查看菜单的空间。 它让全球广大用户的屏幕看起来整洁干净。

因此,您最好借助混合标题来使用更少的空间向访问者显示更多菜单项。 当您在您的网站上使用它时,您会发现它非常有用,并且访问者会非常喜欢它。

从一个地方轻松浏览所有内容

这是一件了不起的事情! 您可以使用 Elementor 混合标头从一个位置导航所有内容,从而轻松进行冲浪。 主菜单包括一个混合标题及其子菜单,让您有宾至如归的感觉。 这是一件了不起的事情,体验很棒! 当您获得此选项时,它对您来说非常棒。

紧凑的接头设计可能性

如上所述,我们可以说紧凑型接头设计有很多可能性。 紧凑的接头设计包括以下可能性:

  • 我们可以保证用户对它感到轻松。
  • 该设计将使您可以轻松前往任何地方。
  • 访客不会被误导。
  • 它在屏幕上占用一点空间。
  • 菜单的所有选项都包含在这里。
  • 它可以带来更多的流量。

仅使用一个小部件在 Elementor 中创建混合标题

因此,您已经了解什么是混合标头及其重要性。 现在,我们将在 Elementor 中创建一个混合标头。 在这里,我们将使用 Element Pack Pro 提供的名为 NavBar 的小部件。 但首先,让我们看看什么是 NavBar 及其示例。

介绍导航栏

navbar illustration 01 - BdThemes

正如我们上面提到的,NavBar 是 Element Pack Pro 提供的一个小部件,它有助于创建菜单的根目录,您可以从中浏览和浏览网站或页面并完成工作。

导航栏标题的几个示例

下面是一些 NavBar 标题示例。

navbar illustration 02 - BdThemes

逐步创建您自己的混合标头

让我们按照这些步骤开始创建一个混合标头。

第 1 步:转到“菜单”选项

create hybrid header with Nav menu

首先,转到菜单栏,然后​​转到外观,然后转到菜单。 之后,从下拉列表中选择多级菜单。

第 2 步:自定义混合标头

Part 02 GIF - BdThemes

接下来,转到自定义链接,然后输入 URL 和链接文本,然后单击添加到菜单按钮。 之后,将新菜单拖动到主菜单。

步骤 3:查看屏幕上的效果

view the hybrid menu

现在,转到 Elementor 小部件菜单,然后将 NavBar 小部件拖放到文本区域中。 之后,转到编辑图像,然后从内容选项卡下的下拉列表中选择多级菜单。 接下来,查看如图所示的混合菜单。

观看教程视频以了解更多信息。

在 Element Pack Pro 中找到更多令人惊叹的小部件,例如导航栏

我们已经讨论了使用导航菜单创建 Elementor 混合标题的过程。 Element Pack Pro 中还有其他令人惊叹的小部件,例如 NavBar。 找出这些小部件并在您的网站上实施它们。

我们希望这对您使用其他小部件(如 NavBar)有很大帮助。 感谢您阅读本文。 祝你今天过得愉快。