Astra 主题菜单设置详解:从基础到超级菜单的全面指南(04)

在之前的文章中,我们详细探讨了 Astra 主题付费版与模板导入的区别。本期文章,我们将深入解析 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修复服务,全球范围,快速响应

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

© 版权声明
THE END
喜欢就支持一下吧
点赞0 分享
评论 抢沙发

请登录后发表评论

    暂无评论内容