导航在一个网页站点中就像领路人一样重要,在使用WordPress建站的过程中,了解并熟悉导航的显示样式及位置特别重要,这篇文章主要介绍了“主题选项>顶部栏&导航栏”中一些常见站点的设置,包括导航的布局及一些类似社交账号端口的添加等选项设置,可以能帮助我们快速设置和导航相关的选项。

 

1.1在“主题选项>顶部栏&导航栏>布局”视图下包含6种导航栏布局、菜单位置及样式: 

 

 

选择后效果如下:

 


选择布局后可在顶部栏添加“微型小工具”,设置这些小工具的显示样式、位置、边距

 

 

 

在“主题选项>顶部栏&导航栏>顶部栏”可以设置顶部栏的:字体、背景色及背景图像、边距等效果。

 

 

 

1.2可以在“导航栏”选项卡中进行以下设置:

 

  •  设置导航栏的背景色或背景图像,更改美化效果;
  • “点击导航”标头和“移动菜单”的背景叠加

 

 

1.3可以在“菜单”选项卡中进行以下设置:

 

  • 设置主菜单字体,字号,颜色,边框半径;
  • 设置鼠标经过和激活时菜单项的样式;

 

 

 

  • 启用/禁用下一级指示符图标;
  • 设置菜单项边距和填充及分隔线的效果;
  • 设置菜单项点击范围的大小:

 

 

 

1.4在“子菜单”选项卡中进行以下设置:

 

  • 设置子菜单字体,字号,颜色,背景及背景图;
  • 设置鼠标经过和激活时菜单项的样式;
  • 设置菜单项边距和填充;

 

 

1.5可添加的“微型小工具”包括:

  • 联系方式(地址,电话,电子邮件,Skype,工作时间);
  • 登录;
  • 文字区;
  • 自定义菜单;
  • 社交图标;
  • 允许指定特定微件区域的字体系列,大小和颜色:

该选项卡中可以设置微型小工具中字体和字号。

 

1.6在“浮动导航”选项卡中,可以进行一下设置:

  • 启用/禁用浮动导航
  • ;效果:淡化滚动、滑动滚动、置顶;
  • 设置标题在在滚动一定的距离后显示;
  • 设置浮动导航的美化风格。

 

 

1.7在“移动端导航”选项卡中,可以进行一下设置(响应式):

 

  • 设置第一个导航切换点(用于平板电脑)和第二个导航切换点(用于手机);
  • 平板电脑和手机的标题高度和布局:
  • 启用或禁用浮动移动导航;
  • 设置字体,字号和颜色,包括悬停/活动菜单项;
  • 移动端菜单背景和滑出方式:

 

专业网站开发网页设计公司

深度阅读:

用wordpress做网站怎么样,能够做企业网站吗? 公司在选择一个建站程序的时候,往往会面临许多选择,什么dede、drupal、帝国CMS之类的,很多朋友会问我哪个建站程序比较好,用WordPress做网站效果怎么样?用WordPress做建站公司的过程中做参考: 1.WordPress程序是开源免费的,源码可以直接下载 如果你是一个技术爱好者...
如何在wordpress中添加自定义字段 advanced custom fieldswordpress中最著名的插件之一,简称ACF,你安装wordpress中很强大的一个插件,可以说,任何一个成熟的...
【WP可视化编辑器】花式文字-Fancy Text-Slideup 预览地址: https://ultimate.brainstormforce.com/text-slideup-effect/ 作用: 对文字做的一些处理加入了滚动的动画,可以用在一些数据上,对数据进行滚动,或是用在用户量上,给用户一种更直观地体验。 预览效果:后台:...
怎么拓展外贸小语种客户?建立多语言网站你必须要了解的12个注意事项 如果你决定给自己的网站添加一门新的语言,比如英语,那么恭喜你,你富有远见的眼光让你超越了80%的竞争者。 可是做一个多语言网站,不仅仅是简单的翻译文字而已有很多细节需要在你开始搭建网站前就要考虑好,以免让你的多语言网站漏洞百出。 我们做了很多跨国外贸企业的网站项目,给你罗列出12条搭建多...
Visual Composer元素细化举例分析:修改和润色VC中元素字体大小、间距和样式 VC中存在非常多的元素。每个元素的功能都不尽相同。对于一个新手来说,看到这么多元素,会出现很多疑惑,不知道什么元素能实现什么功能,什么元素实用,是否要掌握其中所有的元素用法。但其实你只需要掌握其中10%的元素用法,就可以掌握剩余90%的元素用法。每个元素间的设置、用法道理均是相通的。...
邮箱从godaddy转到腾讯企业邮箱的过程中遇到的坑 最近帮一个客户,把他的邮件从godaddy邮箱转到腾讯QQ邮箱,中间遇到了很多问题,也尝试了许多方案,甚至还购买了一个西部数码的美国主机,和阿里云主机,但是效果都不是很好。 症状是:程序文件在阿里云服务器上能够顺利发送邮件,但是迁移到godaddy上就不行了,之所以不用阿里...
【WP可视化编辑器】lightbox-lightbox-M 预览地址: http://massive.mpcthemes.net/lightbox/ 作用:

3 thoughts on “WordPress The 7主题使用教程2.7-顶部栏&导航栏设置

  1. 大将军 says:

    如何解决首页中导航栏和下方内容的留白? 我现在革命滑块和导航栏之间就是大段的空白,想了不少办法,拿不掉。
    求教

  2. Pingback: 【已解决】给wordpress顶部主菜单底部加上指示条表示当前所处页面 – 在路上

发表评论

电子邮件地址不会被公开。 必填项已用*标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据

wechat logo