主题菜单分为PC端顶部导航和移动端菜单两个部分,可单独设置
导航菜单样式设置
进入主题设置-顶部导航
电脑端样式
电脑端顶部导航有三种布局可选择,同时您可以设置是否固定在顶部
![图片[1]-Zibll子比主题-主题导航菜单设置教程-WordPress主题模板-zibll子比主题](https://oss.zibll.com/zibll.com/2020/03/image-28.png)
实际显示效果:
![图片[2]-Zibll子比主题-主题导航菜单设置教程-WordPress主题模板-zibll子比主题](https://oss.zibll.com/zibll.com/2020/03/image-29.png)
![图片[3]-Zibll子比主题-主题导航菜单设置教程-WordPress主题模板-zibll子比主题](https://oss.zibll.com/zibll.com/2020/03/image-30.png)
![图片[4]-Zibll子比主题-主题导航菜单设置教程-WordPress主题模板-zibll子比主题](https://oss.zibll.com/zibll.com/2020/03/image-31.png)
手机端样式
移动端顶部导航有两种布局选择,弹出菜单有可选择弹出方向
![图片[5]-Zibll子比主题-主题导航菜单设置教程-WordPress主题模板-zibll子比主题](https://oss.zibll.com/zibll.com/2020/03/image-32.png)
截图展示:
![图片[6]-Zibll子比主题-主题导航菜单设置教程-WordPress主题模板-zibll子比主题](https://oss.zibll.com/zibll.com/2020/03/image-34.png)
![图片[7]-Zibll子比主题-主题导航菜单设置教程-WordPress主题模板-zibll子比主题](https://oss.zibll.com/zibll.com/2020/03/image-35.png)
![图片[8]-Zibll子比主题-主题导航菜单设置教程-WordPress主题模板-zibll子比主题](https://oss.zibll.com/zibll.com/2020/03/image-33.png)
顶部导航支持自定义背景色和前景色,如需了解请点击下方按钮
添加菜单及设置
进入Wordpress后台-外观-菜单
在这里你可以新建菜单-并分别设置移动端和PC端的菜单
![图片[9]-Zibll子比主题-主题导航菜单设置教程-WordPress主题模板-zibll子比主题](https://oss.zibll.com/zibll.com/2020/03/添加菜单-1.jpg)
主题提供PC端菜单和移动端菜单独立设置功能(也可以只设置一个),你可以按需进行设置!为了达到更好的效果,设置菜单有一下几点请注意:
- PC端菜单的一级菜单不要太多,太多会导致换行显示错位
- 移动端菜单最多只支持二级菜单,如果添加了三级菜单则不会显示
- PC端菜单支持多级显示,但建议不要超过二级
菜单使用图标
主题自带了Font Awesome 4.7
图标,你可以在菜单插入任意的 Font Awesome 4.7 图标而无需安装任何插件
第一步:找到你想要插入的图标代码,并复制
你可以使用此网站找到全部的图标代码,选择一个图标并复制图标代码:
![图片[10]-Zibll子比主题-主题导航菜单设置教程-WordPress主题模板-zibll子比主题](https://oss.zibll.com/zibll.com/2020/03/image-37.png)
第二步:粘贴在菜单名称内
![图片[11]-Zibll子比主题-主题导航菜单设置教程-WordPress主题模板-zibll子比主题](https://oss.zibll.com/zibll.com/2020/03/image-39.png)
搞定,保存看看效果吧!
![图片[12]-Zibll子比主题-主题导航菜单设置教程-WordPress主题模板-zibll子比主题](https://oss.zibll.com/zibll.com/2020/03/image-41.png)
同时除了主题自带的 Font Awesome 图标之外,您也可以插入其它图标,例如Iconfont-阿里巴巴矢量图标,当然这就需要安装对应的插件或者插入一些自定义代码了。
插入Iconfont图标教程
插入Iconfont图标是十分简单的,阿里巴巴也给出了十分详细的教程。如果您需要在导航菜单中也插入插入Iconfont图标,请点击查看一下教程!
以上添加图标的教程可不仅仅适用于菜单喔!全站任何地方可以使用,同时大部分非子比主题网站也是可以使用的!例如下方的截图
![图片[13]-Zibll子比主题-主题导航菜单设置教程-WordPress主题模板-zibll子比主题](https://oss.zibll.com/zibll.com/2020/03/image-44.png)
![图片[14]-Zibll子比主题-主题导航菜单设置教程-WordPress主题模板-zibll子比主题](https://oss.zibll.com/zibll.com/2020/03/image-45.png)
© 版权声明
分享是一种美德,转载请保留原链接
THE END
- 最新
- 最热
只看作者