Zibll子比主题-主题导航菜单设置教程

主题菜单分为PC端顶部导航和移动端菜单两个部分,可单独设置

导航菜单样式设置

进入主题设置-顶部导航

电脑端样式

电脑端顶部导航有三种布局可选择,同时您可以设置是否固定在顶部

图片[1]-Zibll子比主题-主题导航菜单设置教程-WordPress主题模板-zibll子比主题

实际显示效果:

图片[2]-Zibll子比主题-主题导航菜单设置教程-WordPress主题模板-zibll子比主题
图片[3]-Zibll子比主题-主题导航菜单设置教程-WordPress主题模板-zibll子比主题
图片[4]-Zibll子比主题-主题导航菜单设置教程-WordPress主题模板-zibll子比主题

手机端样式

移动端顶部导航有两种布局选择,弹出菜单有可选择弹出方向

图片[5]-Zibll子比主题-主题导航菜单设置教程-WordPress主题模板-zibll子比主题

截图展示:

顶部导航支持自定义背景色和前景色,如需了解请点击下方按钮

添加菜单及设置

进入Wordpress后台-外观-菜单

在这里你可以新建菜单-并分别设置移动端和PC端的菜单

图片[9]-Zibll子比主题-主题导航菜单设置教程-WordPress主题模板-zibll子比主题

主题提供PC端菜单和移动端菜单独立设置功能(也可以只设置一个),你可以按需进行设置!为了达到更好的效果,设置菜单有一下几点请注意:

  1. PC端菜单的一级菜单不要太多,太多会导致换行显示错位
  2. 移动端菜单最多只支持二级菜单,如果添加了三级菜单则不会显示
  3. PC端菜单支持多级显示,但建议不要超过二级

菜单使用图标

主题自带了Font Awesome 4.7 图标,你可以在菜单插入任意的 Font Awesome 4.7 图标而无需安装任何插件

第一步:找到你想要插入的图标代码,并复制

你可以使用此网站找到全部的图标代码,选择一个图标并复制图标代码:

图片[10]-Zibll子比主题-主题导航菜单设置教程-WordPress主题模板-zibll子比主题

第二步:粘贴在菜单名称内

图片[11]-Zibll子比主题-主题导航菜单设置教程-WordPress主题模板-zibll子比主题

搞定,保存看看效果吧

图片[12]-Zibll子比主题-主题导航菜单设置教程-WordPress主题模板-zibll子比主题

同时除了主题自带的 Font Awesome 图标之外,您也可以插入其它图标,例如Iconfont-阿里巴巴矢量图标,当然这就需要安装对应的插件或者插入一些自定义代码了。

插入Iconfont图标教程

插入Iconfont图标是十分简单的,阿里巴巴也给出了十分详细的教程。如果您需要在导航菜单中也插入插入Iconfont图标,请点击查看一下教程!

以上添加图标的教程可不仅仅适用于菜单喔!全站任何地方可以使用,同时大部分非子比主题网站也是可以使用的!例如下方的截图

© 版权声明
THE END
文章不错?点个赞呗
点赞26赞赏 分享
评论 共3条

请登录后发表评论