Cómo configurar menús y mega menús en el tema Avada: tutorial detallado (02)

欢迎大家来到本期教程,今天我们将为大家详细讲述如何在 Avada 主题中设置普通菜单和超级菜单(Mega Menu)。尽管普通菜单的设置比较简单,我们不再赘述,想了解的朋友可以参考 Basel 主题的菜单设置。本次重点讲解的是超级菜单,Avada 新版更新后的超级菜单让设置变得更加方便和灵活。无论你是新手还是有一定经验的用户,这篇文章都会为你提供实用的操作步骤和技巧。

步骤:网站后端→Appearance→Menus

图片[1]-如何设置Avada主题中的菜单和超级菜单:详细教程(02)-光子波动网 | 专业WordPress修复服务,全球范围,快速响应

那么Avada的超级菜单怎么设置了,有两种方法,在Avada更新后,新的超级菜单更方便

步骤:网站后端→Avada->工作室(studio)->超级菜单(Mega Menus)

图片[2]-如何设置Avada主题中的菜单和超级菜单:详细教程(02)-光子波动网 | 专业WordPress修复服务,全球范围,快速响应

地方我都圈起来了,你应该不会找不到的。(如上图)

图片[3]-如何设置Avada主题中的菜单和超级菜单:详细教程(02)-光子波动网 | 专业WordPress修复服务,全球范围,快速响应

选择一个你喜欢的模版,导入就行了,是不是很方便

创建超级菜单

我知道很多新手完全不会创建超级菜单,所以咱们直接导入一个超级菜单(Mega Menu)

图片[4]-如何设置Avada主题中的菜单和超级菜单:详细教程(02)-光子波动网 | 专业WordPress修复服务,全球范围,快速响应

选择一个合适的,这是我随机挑选的一个

图片[5]-如何设置Avada主题中的菜单和超级菜单:详细教程(02)-光子波动网 | 专业WordPress修复服务,全球范围,快速响应

调整好后,导入就行

修改超级菜单

导入后你可能还是找不到超级菜单在哪进入前台来修改。

步骤:Avada→Library→Mega Menu(type)

图片[6]-如何设置Avada主题中的菜单和超级菜单:详细教程(02)-光子波动网 | 专业WordPress修复服务,全球范围,快速响应

不用管超级菜单的名字,如上图,这是我创建的,如果你导入的是那个模版就是显示模版的名称

让前端显示超级菜单

做好一个超级菜单,可不能直接显示在前台,还需要我们在后台的菜单里面简单设置一下。

由于我想让这个超级菜单显示在Product center下,也就是你看到网站上的图片,所以点击图中位置

图片[7]-如何设置Avada主题中的菜单和超级菜单:详细教程(02)-光子波动网 | 专业WordPress修复服务,全球范围,快速响应

接下来,选择你想要的超级菜单,最后保存整个菜单,这样你的网站前台就可以显示出超级菜单了,是不是很简单。

不过要吐槽一下,如果你使用的是 Elementor,在购买了超级菜单插件后,还需要手动逐步添加和修改样式,确实有些麻烦!

图片[8]-如何设置Avada主题中的菜单和超级菜单:详细教程(02)-光子波动网 | 专业WordPress修复服务,全球范围,快速响应
图片[9]-如何设置Avada主题中的菜单和超级菜单:详细教程(02)-光子波动网 | 专业WordPress修复服务,全球范围,快速响应

其他的选项大家根据需要调整,如果导入的是模版,为了不破坏模版的效果,修改图片和文字即可。点击保持(SAVE)

图片[10]-如何设置Avada主题中的菜单和超级菜单:详细教程(02)-光子波动网 | 专业WordPress修复服务,全球范围,快速响应

最后点击保持(Save Menu)菜单

旧版超级菜单

这里根据你的需要来,你要问我有什么区别,那就是新版就是导入模版修改,旧版需要你自己一个一个调出来

有的朋友可能还想用原来的超级菜单,说:哎呀,我就喜欢原来的小工具,一点点做出来的超级菜单,那你就可以点击性能,然后打开旧版的超级菜单。

步骤Avada→Performance(表现)→Features(特征)→Legacy Mega Menu(旧版超级菜单)

图片[11]-如何设置Avada主题中的菜单和超级菜单:详细教程(02)-光子波动网 | 专业WordPress修复服务,全球范围,快速响应

具体怎么创建呢?如下图,打比方这有三个二级菜单

图片[12]-如何设置Avada主题中的菜单和超级菜单:详细教程(02)-光子波动网 | 专业WordPress修复服务,全球范围,快速响应

我们把1,2,3比作A,B,C,来到Widgets(小工具)这里先创建

图片[13]-如何设置Avada主题中的菜单和超级菜单:详细教程(02)-光子波动网 | 专业WordPress修复服务,全球范围,快速响应

然后回到菜单,点击Avada Menu Options(超级菜单)

图片[14]-如何设置Avada主题中的菜单和超级菜单:详细教程(02)-光子波动网 | 专业WordPress修复服务,全球范围,快速响应
图片[15]-如何设置Avada主题中的菜单和超级菜单:详细教程(02)-光子波动网 | 专业WordPress修复服务,全球范围,快速响应

这里面主要是三项要设置如下:
Fusion Mega Menu超级菜单:on开启;
Mega Menu Wrapper Width超级菜单宽度:max width最大宽度还是 fit content适合内容,这个你可以每一个都试试,看看效果怎么样,对比后再做选择:
Mega Menu Number of Columns超级菜单列数:你想添加几列 mega菜单?图片这里是 3列,最多可以 6列。
设置完后一定要记得回到【菜单结构】这个页面的右侧点击【保存菜单】,否则这一步都白干了,每次改动菜单后都要保存,就不多讲了

图片[16]-如何设置Avada主题中的菜单和超级菜单:详细教程(02)-光子波动网 | 专业WordPress修复服务,全球范围,快速响应

来到【外观】【小工具】,从左侧拖拽一个【文本】到右侧已经添加好的小工具A中,小工具A 切换到文本模式,粘贴代码,再切换到可视化模式,看到居中的图片,没问题了就保存。,另外两个也是一样的

最后做一个说一下总结

新手直接选用新版的超级菜单就行了,简单直接好看

如果对于Avada的老用户来说,还是习惯老版的超级菜单,可以去用,但效果还是差点的

resúmenes

通过本次教程,我们详细讲解了如何在 Avada 主题中设置和修改超级菜单,无论你选择导入现有模板还是使用旧版的手动设置方式,都可以轻松创建适合自己网站的菜单布局。希望这些方法能够帮助你快速上手。如果你是新手,建议直接使用新版超级菜单,简单又高效。感谢你的阅读,下一期我们将为大家带来更多关于 Avada 主题的实用技巧,敬请期待!


Contacte con nosotros
¿No puede leer el artículo? ¡Póngase en contacto con nosotros para obtener una respuesta gratuita! Ayuda gratuita para sitios personales y de pequeñas empresas
Tel: 020-2206-9892
QQ咨询:1025174874
(iii) Correo electrónico: info@361sale.com
Horario de trabajo: de lunes a viernes, de 9:30 a 18:30, días festivos libres
© Declaración de reproducción
Este artículo fue escrito por Harry
EL FIN
Si le gusta, apóyela.
felicitaciones0 compartir (alegrías, beneficios, privilegios, etc.) con los demás
comentarios compra de sofás

Por favor, inicie sesión para enviar un comentario

    Sin comentarios