Tag: Astra 主题菜单设置

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

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

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

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

    步骤:网站后端→Appearance→Menus

    图片[1]-361Sale WordPress Care

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

    图片[2]-361Sale WordPress Care
    图片[3]-361Sale WordPress Care

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

    图片[4]-361Sale WordPress Care

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

    图片[5]-361Sale WordPress Care
    图片[6]-361Sale WordPress Care
    图片[7]-361Sale WordPress Care

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

    图片[8]-361Sale WordPress Care

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

    图片[9]-361Sale WordPress Care

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

    图片[10]-361Sale WordPress Care

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

    图片[11]-361Sale WordPress Care

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

    图片[12]-361Sale WordPress Care

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

    图片[13]-361Sale WordPress Care

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

    图片[14]-361Sale WordPress Care

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

    图片[15]-361Sale WordPress Care

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

    图片[16]-361Sale WordPress Care

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

    图片[17]-361Sale WordPress Care

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

    图片[18]-361Sale WordPress Care

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

    图片[19]-361Sale WordPress Care

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

    图片[20]-361Sale WordPress Care

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

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

    图片[21]-361Sale WordPress Care
    图片[22]-361Sale WordPress Care

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

    图片[23]-361Sale WordPress Care

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

    图片[24]-361Sale WordPress Care

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

    图片[25]-361Sale WordPress Care

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