如何设置WoodMart主题的菜单:详细教程与最佳实践(02)

今天我们讲WoodMart主题的菜单设置,之前的WoodMart主题模版数据导入参考

WoodMart主题菜单功能性比较强,DIY(自定义也多),所以建议新手慢慢理解,简单的菜单功能就无需多讲了,不会的参考Basel主题菜单设置。
欢迎来到我们的详细教程,今天我们将深入探讨如何设置和优化WoodMart主题的菜单。WoodMart主题以其强大的自定义功能和丰富的DIY选项而著称,对于新手用户来说,了解并掌握这些功能可能需要一些时间和耐心。无论您是希望创建简单的导航菜单,还是像图中展示的那样实现美观的超级菜单,这篇文章都将为您提供所需的步骤和技巧。

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

如果想实现上图漂亮的菜单以及图标展示,需要多个功能一起实现

我们会用到Elementor或者WPBakery PageBuilder编辑器,每个模版不一样,所以编辑器也不一样,但大致是一样的,选择WoodMart主题的菜单模版可以参考之前的链接

还需要HTML块实现,当然菜单也需要具备超级菜单的选项

步骤:网站后端→Appearance→Menus

举个列子:下面就是超级菜单的设置

图片[2]-如何设置WoodMart主题的菜单:详细教程与最佳实践(02)-光子波动网 | 专业WordPress修复服务,全球范围,快速响应
图片[3]-如何设置WoodMart主题的菜单:详细教程与最佳实践(02)-光子波动网 | 专业WordPress修复服务,全球范围,快速响应

如上图每个模版的超级菜单都会有点区别,但大致是一样

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

Shop Pages,Product Loop,Single Product,Features这些页面都是在网站的后端HTML Blocks

步骤HTML Blocks→Shop Pages→Edit with Elementor

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

,如上图,找到合适的页面

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

如果找不到可以view(查看)来预览确定

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

如上图,进入编辑页面

具体的看模版搭配什么编辑器,来选择,上图是Elementor编辑器

步骤Shop Pages→Edit with Elementor

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

进去编辑想要的效果,图片内容可能不一样,但操作方式是一样的,根据每个模版不一样操作也会有细微的差别。

但有些模块不会出现在HTML Blocks(HTML块)这个位置,会出现在Layouts(布局)

图片[8]-如何设置WoodMart主题的菜单:详细教程与最佳实践(02)-光子波动网 | 专业WordPress修复服务,全球范围,快速响应

如上图,但方法是一样的

还有一种展示分类的图片的,也很简单,如下图

图片[9]-如何设置WoodMart主题的菜单:详细教程与最佳实践(02)-光子波动网 | 专业WordPress修复服务,全球范围,快速响应

也很简单,也是设置好HTML块,在菜单选择就可以了,如下图

步骤HTML Blocks→新建→Product categories

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

步骤Appearance→Menus→设置产品分类→选择对应的HTMl块

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

也非常简单,做出来的菜单就会比较好看,但最终还是看个人的选择。

总结:

通过本文的教程,您现在应该能够轻松设置并优化WoodMart主题的菜单。无论是使用Elementor还是WPBakery PageBuilder编辑器,每个步骤都经过详细说明,确保您能够实现理想的效果。如果您在操作过程中遇到任何问题,欢迎随时联系我们的支持团队。感谢您的阅读,并祝您网站建设顺利!

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

请登录后发表评论

    暂无评论内容