魏艾斯笔记Mega菜单（超级菜单）是 Avada主题中一个好看又实用的设计，既可以当做导航菜单用，又能充分体现产品特点，访客看着很明了，很直观，特别受到国外用户喜欢。为了制作 mega菜单是需要花费一些精力和时间的，在大家充分理解了 wordpress菜单的内在设计逻辑之后，现在老魏在本文中分享 Avada主题设置mega超级菜单的详细图文过程。
更多关于Avada主题的内容请看Avada专题
学习选择 1核2g配置的服务器，建站选择 2核4g配置会更流畅。
国内服务器：阿里云、腾讯云（都有代金券，付款时抵用省钱） 不知道如何选择地域、配置请在页面右侧+老魏的联系方式，我们一起研究。
外贸、B2C/C2C等网站建议在国外注册域名。打开namesilo官网，在搜索框里输入并选择好后注册，记得使用优惠码省钱。优惠码点击国外域名商Namesilo域名注册教程获取。
外贸网站建议选择Hostinger虚拟主机，价格便宜，性价比极高！Hostinger专题
SiteGround虚拟主机价格适中服务好！SiteGround专题
WordPress添加页面做产品分类
为了效果好看老魏特意新建了 3个产品分类，products A，products B，products C，都是 products产品下的子级分类（一级分类）。并且新建了外贸英文站的多个基本页面，包括常见的 home，about us，Services，contact us等等。今天的重点是 product A ~C这三个产品分类，其他都是陪衬。
如下图所示已经在【页面】新建了多个外贸网站常见栏目名称，添加到右侧菜单结构中，排序，记得一定要保存，否则就白干了。
WordPress添加小工具
在 wordpress后台 > 外观 > 小工具，如下图所示点击 add new widget area 添加小工具，分别起名 A，B，C。
你打算新建几个一级产品分类这里就添加几个小工具。
后面会在这些小工具里面添加内容。
WordPress设置 Mega菜单
我们回到【菜单】【菜单结构】，找到 products 这个主菜单，点击 avada menu options，开始设置 mega菜单了。
这里面主要是三项要设置如下：
Fusion Mega Menu超级菜单：on开启；
Mega Menu Wrapper Width超级菜单宽度：max width最大宽度还是 fit content适合内容，这个你可以每一个都试试，看看效果怎么样，对比后再做选择；
Mega Menu Number of Columns超级菜单列数：你想添加几列 mega菜单？老魏这里是 3列，最多可以 6列。
设置完后一定要记得回到【菜单结构】这个页面的右侧点击【保存菜单】，否则这一步都白干了，每次改动菜单后都要保存，老魏就不啰嗦了。
这时候我们来看下首页菜单的变化，如下图所示一级菜单都横过来排列了，也按照上面设置的分成了 3列。
有同学不喜欢上图中一级菜单中间的灰色分隔线，可以去 avada > options > menu > mega menu > mega menu item divider中修改为 off。
制作图片链接代码
为了小工具中添加图片链接，我们随便找一个page页面，添加一张产品图片。这里的图片为了统一尺寸美观一些，建议尺寸 ps成一样的。把 3张产品图片都上传到“媒体库”中。
这里要注意 page页面仅仅是生成图片链接代码用的，并不实际保存，有点“借鸡生蛋”的意思。
插入图片设置有两种方法，下面开始操作了。
第一种方法是在page页面中添加媒体库中的 1张产品图片，在媒体库插入图片界面的右侧，下拉就看到下图所示【附件显示设置】
- 对齐方式：居中；
- 链接到：自定义url；
- URL：添加这个图片对应的一级产品分类链接地址，比如 你的域名/products/products-a/；
- 尺寸：完整尺寸，本来超级菜单那里也不要大图片，所以一开始ps图片时也往小一点做；
点击【插入至页面】
如果手太快上面忘记设置了，也可以按照下面的第二种方法设置。
在page编辑页面点击图片一下，看到上面的“铅笔”图标点击进入图片编辑状态，
在图像详情中如下设置和上面第一种方法一样。
接下来切换到这个页面的【文本】模式，复制这些代码，如下图所示。
添加代码到小工具
来到【外观】【小工具】，从左侧拖拽一个【文本】到右侧已经添加好的小工具A中，小工具A 切换到文本模式，粘贴代码，再切换到可视化模式，看到居中的图片，没问题了就保存。
另外两个小工具B 和小工具C，也是像小工具A这么添加，到新建页面中依次添加另外两张产品图片，添加一级产品分类链接，复制代码，拖拽【文本】到右侧，切换文本模式，粘贴，查看。
为超级菜单添加小工具
接下来进入到最后一步了，为 mega菜单添加小工具。
我们回到【外观】【菜单】，在菜单结构中找到一级产品分类：products A，点击【avada menu options】，在弹窗中找到 mega menu widget area超级菜单小工具，选择上面添加好的小工具A。
products B和products C也都依次添加小工具B 和小工具C。
记得都要保存。
Avada主题超级菜单效果
让我们来看看效果如何，下图就是本文案例 mega menu超级菜单的效果。
老魏只是举例子抛砖引玉，如果你做外贸网站的话这个超级菜单还得精雕细琢一下，比如图片处理的干不干净，一级菜单文字大小，字体，背景颜色，上面的绿色横条要不要，要的话什么颜色，间距等等，主菜单和一级菜单中太多东西都需要后期慢慢调整了，耐心点你也能做出漂亮的网页超级菜单。
以上就是avada主题制作mega menu超级菜单的图文详细教程，感兴趣的同学可以照着制作一下，主要是前期搞明白 wordpress菜单的逻辑关系，然后你看本文就不会迷糊了。