今天我们讲WoodMart主题的菜单设置,之前的WoodMart主题模版数据导入参考
WoodMart主题菜单功能性比较强,DIY(自定义也多),所以建议新手慢慢理解,简单的菜单功能就无需多讲了,不会的参考Basel主题菜单设置。
欢迎来到我们的详细教程,今天我们将深入探讨如何设置和优化WoodMart主题的菜单。WoodMart主题以其强大的自定义功能和丰富的DIY选项而著称,对于新手用户来说,了解并掌握这些功能可能需要一些时间和耐心。无论您是希望创建简单的导航菜单,还是像图中展示的那样实现美观的超级菜单,这篇文章都将为您提供所需的步骤和技巧。
![如何设置WoodMart主题的菜单:详细教程与最佳实践(02)](https://www.361sale.com/wp-content/themes/justnews/themer/assets/images/lazy.png)
如果想实现上图漂亮的菜单以及图标展示,需要多个功能一起实现
我们会用到Elementor或者WPBakery PageBuilder编辑器,每个模版不一样,所以编辑器也不一样,但大致是一样的,选择WoodMart主题的菜单模版可以参考之前的链接
还需要HTML块实现,当然菜单也需要具备超级菜单的选项
步骤:网站后端→Appearance→Menus
举个列子:下面就是超级菜单的设置
![如何设置WoodMart主题的菜单:详细教程与最佳实践(02)](https://www.361sale.com/wp-content/themes/justnews/themer/assets/images/lazy.png)
![如何设置WoodMart主题的菜单:详细教程与最佳实践(02)](https://www.361sale.com/wp-content/themes/justnews/themer/assets/images/lazy.png)
如上图每个模版的超级菜单都会有点区别,但大致是一样
![如何设置WoodMart主题的菜单:详细教程与最佳实践(02)](https://www.361sale.com/wp-content/themes/justnews/themer/assets/images/lazy.png)
Shop Pages,Product Loop,Single Product,Features这些页面都是在网站的后端HTML Blocks
步骤HTML Blocks→Shop Pages→Edit with Elementor
,如上图,找到合适的页面
![如何设置WoodMart主题的菜单:详细教程与最佳实践(02)](https://www.361sale.com/wp-content/themes/justnews/themer/assets/images/lazy.png)
如果找不到可以view(查看)来预览确定
![如何设置WoodMart主题的菜单:详细教程与最佳实践(02)](https://www.361sale.com/wp-content/themes/justnews/themer/assets/images/lazy.png)
如上图,进入编辑页面
具体的看模版搭配什么编辑器,来选择,上图是Elementor编辑器
步骤Shop Pages→Edit with Elementor
![如何设置WoodMart主题的菜单:详细教程与最佳实践(02)](https://www.361sale.com/wp-content/themes/justnews/themer/assets/images/lazy.png)
进去编辑想要的效果,图片内容可能不一样,但操作方式是一样的,根据每个模版不一样操作也会有细微的差别。
但有些模块不会出现在HTML Blocks(HTML块)这个位置,会出现在Layouts(布局)
![如何设置WoodMart主题的菜单:详细教程与最佳实践(02)](https://www.361sale.com/wp-content/themes/justnews/themer/assets/images/lazy.png)
如上图,但方法是一样的
还有一种展示分类的图片的,也很简单,如下图
![如何设置WoodMart主题的菜单:详细教程与最佳实践(02)](https://www.361sale.com/wp-content/themes/justnews/themer/assets/images/lazy.png)
也很简单,也是设置好HTML块,在菜单选择就可以了,如下图
步骤HTML Blocks→新建→Product categories
![如何设置WoodMart主题的菜单:详细教程与最佳实践(02)](https://www.361sale.com/wp-content/themes/justnews/themer/assets/images/lazy.png)
步骤Appearance→Menus→设置产品分类→选择对应的HTMl块
![如何设置WoodMart主题的菜单:详细教程与最佳实践(02)](https://www.361sale.com/wp-content/themes/justnews/themer/assets/images/lazy.png)
也非常简单,做出来的菜单就会比较好看,但最终还是看个人的选择。
总结:
通过本文的教程,您现在应该能够轻松设置并优化WoodMart主题的菜单。无论是使用Elementor还是WPBakery PageBuilder编辑器,每个步骤都经过详细说明,确保您能够实现理想的效果。如果您在操作过程中遇到任何问题,欢迎随时联系我们的支持团队。感谢您的阅读,并祝您网站建设顺利!
联系我们 |
---|
文章看不懂?联系我们为您免费解答!免费助力个人,小企站点! |
① 电话:020-2206-9892 |
② QQ咨询:1025174874 |
③ 邮件:info@361sale.com |
④ 工作时间:周一至周五,9:30-18:30,节假日休息 |