Configuración detallada del menú del tema Astra: Una guía completa desde el menú básico hasta el Mega Menú (04)

在之前的文章中,我们详细探讨了 Astra 主题(utilizado como expresión nominal)付费版与模板导入的区别。本期文章,我们将深入解析 Astra 主题的菜单设置。对于每一个网站来说,菜单都是至关重要的导航工具,不仅决定了用户的浏览体验,还直接影响到网站的整体布局和美观度。通过 Astra 主题的强大功能,你可以轻松设置出既美观又实用的超级菜单,提升你的网站质感和用户体验。

在之前的各类主题我们都讲述了菜单,菜单的设置都是差不多的,就一个添加的page(页面),第二个是自定义链接,第三个则是你想加入比如产品的分类或者其他项目

步骤:网站后端→Appearance→Menus

图片[1]-Astra 主题菜单设置详解:从基础到超级菜单的全面指南(04)-光子波动网 | 专业WordPress修复服务,全球范围,快速响应

为什么页面显示Elementor,因为是显示这个页面是有Elementor编辑的,没有显示的则为默认编辑器

图片[2]-Astra 主题菜单设置详解:从基础到超级菜单的全面指南(04)-光子波动网 | 专业WordPress修复服务,全球范围,快速响应
图片[3]-Astra 主题菜单设置详解:从基础到超级菜单的全面指南(04)-光子波动网 | 专业WordPress修复服务,全球范围,快速响应

还有些页面会显示page,这就是设定的主页面,比如主页(home),博客(blog),商店(shop),购物车(cart),结账(checkout)

图片[4]-Astra 主题菜单设置详解:从基础到超级菜单的全面指南(04)-光子波动网 | 专业WordPress修复服务,全球范围,快速响应

如果你不想显示的这么单一,想要更美观更独特的效果,如下图

图片[5]-Astra 主题菜单设置详解:从基础到超级菜单的全面指南(04)-光子波动网 | 专业WordPress修复服务,全球范围,快速响应
图片[6]-Astra 主题菜单设置详解:从基础到超级菜单的全面指南(04)-光子波动网 | 专业WordPress修复服务,全球范围,快速响应
图片[7]-Astra 主题菜单设置详解:从基础到超级菜单的全面指南(04)-光子波动网 | 专业WordPress修复服务,全球范围,快速响应

各种各样的效果,是不是比普通效果好多了,接下来我来教你怎么设置超级菜单

图片[8]-Astra 主题菜单设置详解:从基础到超级菜单的全面指南(04)-光子波动网 | 专业WordPress修复服务,全球范围,快速响应

如上图,我们在需要需要设置的二级菜单的主导航名称下开启超级菜单选项,链接可以设置为\或者#

图片[9]-Astra 主题菜单设置详解:从基础到超级菜单的全面指南(04)-光子波动网 | 专业WordPress修复服务,全球范围,快速响应

如上图,先打开这个超级菜单按钮哦

图片[10]-Astra 主题菜单设置详解:从基础到超级菜单的全面指南(04)-光子波动网 | 专业WordPress修复服务,全球范围,快速响应

然后选择合适展示宽度,你可以选择全屏宽度或者菜单宽度,和自定义宽度,非常的智能

图片[11]-Astra 主题菜单设置详解:从基础到超级菜单的全面指南(04)-光子波动网 | 专业WordPress修复服务,全球范围,快速响应

然后你可以设置菜单背景的颜色,或者放入背景图片,根据实际情况调整

图片[12]-Astra 主题菜单设置详解:从基础到超级菜单的全面指南(04)-光子波动网 | 专业WordPress修复服务,全球范围,快速响应

当然还有标题和文本以及链接的颜色调整

图片[13]-Astra 主题菜单设置详解:从基础到超级菜单的全面指南(04)-光子波动网 | 专业WordPress修复服务,全球范围,快速响应

最后点击保持,你就完成了第一步

图片[14]-Astra 主题菜单设置详解:从基础到超级菜单的全面指南(04)-光子波动网 | 专业WordPress修复服务,全球范围,快速响应

然后我们需要设置超级菜单的标题,也就是第一个,你可以理解为标题

图片[15]-Astra 主题菜单设置详解:从基础到超级菜单的全面指南(04)-光子波动网 | 专业WordPress修复服务,全球范围,快速响应

然后链接地址\或者#,然后在点击超级菜单

图片[16]-Astra 主题菜单设置详解:从基础到超级菜单的全面指南(04)-光子波动网 | 专业WordPress修复服务,全球范围,快速响应

把他设置为标题,这样会比较好区分它和他的子项。同时禁用链接,如果有链接,则在前端鼠标触碰会有动态效果,如果只是展示的话,就禁用链接

图片[17]-Astra 主题菜单设置详解:从基础到超级菜单的全面指南(04)-光子波动网 | 专业WordPress修复服务,全球范围,快速响应

还有一个分隔符的颜色,这人会更容易区分

图片[18]-Astra 主题菜单设置详解:从基础到超级菜单的全面指南(04)-光子波动网 | 专业WordPress修复服务,全球范围,快速响应

当然还有一种分隔符的设置方式,但超级菜单这种的会比较简单,而且自适应

图片[19]-Astra 主题菜单设置详解:从基础到超级菜单的全面指南(04)-光子波动网 | 专业WordPress修复服务,全球范围,快速响应

如上图,通过自定义链接的形式,但这种不好控制长度,所以这只是一种参考

图片[20]-Astra 主题菜单设置详解:从基础到超级菜单的全面指南(04)-光子波动网 | 专业WordPress修复服务,全球范围,快速响应

然后它的子项目就正常添加就行了,无需在动超级菜单,是不是非常的简单

我们讲述另一种超级菜单的设置

图片[21]-Astra 主题菜单设置详解:从基础到超级菜单的全面指南(04)-光子波动网 | 专业WordPress修复服务,全球范围,快速响应
图片[22]-Astra 主题菜单设置详解:从基础到超级菜单的全面指南(04)-光子波动网 | 专业WordPress修复服务,全球范围,快速响应

我们看到前端的效果是不显示标题的,你看到可能会有疑问,其实就在超级菜单的哪里隐藏了标题

图片[23]-Astra 主题菜单设置详解:从基础到超级菜单的全面指南(04)-光子波动网 | 专业WordPress修复服务,全球范围,快速响应

如下图,图片则是在超级菜单的位置加入了图片,其他都是一样的

图片[24]-Astra 主题菜单设置详解:从基础到超级菜单的全面指南(04)-光子波动网 | 专业WordPress修复服务,全球范围,快速响应

如下图,我们需要一步步设置,才能选中图片,否则是没有的

图片[25]-Astra 主题菜单设置详解:从基础到超级菜单的全面指南(04)-光子波动网 | 专业WordPress修复服务,全球范围,快速响应

Resumen:
通过本篇文章的详细讲解,相信你已经掌握了如何在 Astra 主题中设置超级菜单的方法。菜单的设计不仅仅是简单的导航设置,更是提升用户体验和网站专业度的重要一环。下一期,我们将继续探讨 Astra 主题的更多功能,包括幻灯片和其他细节设置,帮助你打造更加出色的网站。


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