Avada 主题教程 2：创建带图文的超级菜单（导航菜单）

Avada 带有一个超级菜单功能，基本是在 WP 原有的基础上扩充的。功能还是挺好用，下面说下如何创建比较漂亮的超级菜单。

此文内容主要在于理解超级菜单和其他项目的逻辑关系。搞清楚它的逻辑你就好操作了。

整体思路

Avada 的超级菜单，实际上是通过调用小工具来实现的效果，所以下文中你会看到我们会创建一些小工具。并且在超级菜单设置里选择上要显示的小工具。

本教程中超级菜单延时我们创建 3 二级菜单。这样能铺满整个顶部好看一些。教程只演示第一个，其他的操作相同。

其他须知

下面的话有点绕，但是很多小白不给他写出来的话。他就是不知道怎么回事，有一定经验的可以跳过本段内容。

为了能够实时预览到超级菜单的显示效果，实际上我们先随便搞了一下网站的全局顶部内容。在菜单中随便先创建一个菜单。并选择显示位置为“Main Navigation”这个导航主菜单。

然后在 Avada 设置中将全局顶部显示超级菜单。

上面截图这一步中的 head 是我创建的一块内容，类似于页面。他会显示到网站所有顶部中。所以你可以直接理解为是个导航栏。

实际上这个 head 类似于一个页面，只不过布局是导航类型。我们类似于将一个页面显示到了网站全局顶部。

创建菜单

我们正常创建一个菜单。

这个菜单将要被我们显示到网站全局顶部导航。所以你可以思考下要显示哪些导航内容。

开启超级菜单

我们一级菜单需要设置下开启超级菜单，设置为 3 列。

添加小工具

这里博主准备创建一个带有 3 个图片的二级导航。所以添加 3 个小工具，具体数量根据自己情况决定。

给小工具添加内容

小工具的内容我们随便新建一个页面，然后使用 avada 编辑器编辑。

添加新容器，容器列数选择 1 列。

点击“element”添加元素，元素选择分隔器。因为我们图片是有一定高度的，为了显示好看，我们加一个分隔器，在图片上部分隔出来一段空白，让文字显示在图片下半部分。

分隔器让他只显示再大屏幕上，防止小屏幕上显示错乱。这一点需要慢慢调整分隔器的大小参数。本文受长度限制就不进行小屏幕的细调了。

分隔器参数中，我们设置让他距离底部 10%。分隔器颜色给他选择全透明的。右侧透明度拉到底即可。

你也可以直接填入：rgba(255,255,255,0)

然后点“默认编辑器”我们添加一些文本。（在默认编辑器添加文本最后出来的代码比较简洁）

点击“文本”查看他的代码，将其复制下来。

回到我们小工具设置页面，给 menu-1 小工具添加一个文本小工具。

把前面我们的内容，复制到小工具文本里。

设置背景图像和小工具

因为我们要创建带有图片的导航。所以这里的图片大小以及风格最好统一。

图片大小不限，建议是长宽比例 1:2 左右。大致符合你的展示情况即可。

示例图片：

打开菜单编辑页面，我们给作品集下面添加一些自定义链接。

添加后我们需要把里面的 URL 再删掉！

点击“Avada 菜单选项”。添加背景图像。

设置好了背景图像，我们再选择一下要显示的小工具。这里选择 menu-1 小工具。

然后超级菜单列标题需要关闭！

完成后保存菜单！！

到这里我们超级图文菜单第一个二级菜单就完成了，其他两个操作方法相同。依次添加即可。

3 个都添加完成后效果如下。

可能感觉还是一般，具体的细节需要自己微调了。

主要还是调整填入小工具中的代码。具体可以自己摸索下，也可以添加本站 QQ 群交流。