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

 

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

 

 

选择后效果如下:

 


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

 

 

 

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

 

 

 

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

 

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

 

 

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

 

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

 

 

 

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

 

 

 

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

 

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

 

 

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

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

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

 

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

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

 

 

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

 

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

 

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

深度阅读:

在wordpress中增加富文本编辑框功能按钮 wordpress自带的编辑器很不给力,好多功能按钮都没有,所以安装TinyMCE这个插件让你的rich editor编辑器增加许多按钮!快点使用TinyMCE来给你的wordpress自带默认的rich editor富文本编辑器添加新功能吧!...
如何隐藏wordpress更新提醒 wordpress总是更新,一个月来两次有木有! 看到更新信息很讨厌,或者你不希望你的客户看到更新信息然后手痒去点击,导致新版本的wordpress和已经安装的插件不兼容,结果整个网站崩溃掉... 所以你最好使用Hide update reminder这个插件阻止wordpress更新!...
使用updraftPlus来定期备份wordpress网站,并且同步上传到FTP服务器 作为一家专业的WordPress开发公司,WP花园帮助了无数高端客户定制和开发了他们的WordPress官网,这个时候,就需要对我们的客户网站定期实行备份和维护。为了管理众多网站,我们采取updrafPlus插件来定期备份所有客户的网站,这篇文章主要涉及2个方面:如何使用updr...
WordPress插件教程 – 如何使用Regenerate Thumbnails来重置缩略图改变产品显示的实际大小 在上传产品图片时,如果我们需要统一设置产品图片的大小尺寸,我们应该去哪里寻找设置呢? (1)找到WooCommerce-设置        (2)点击产品-显示 ...
自定义页面布局 Page Builder绝对是一款逆天插件,是我这个月发现的最给力的插件之一! Page Builder这款插件能够让你在不修改任何代码的情况下,自定义修改你的网站布局! 友情提醒一下,这款Page Builder插件配合小工具(weidget)一起使用,更加强大!!...
如何使用插件将谷歌字体下载到自己的WordPress网站 不少 WordPress主题和插件都会使用到谷歌的字体,对于国内环境来说,很影响速度。使用 Self-Hosted Google Fonts 插件来实现自主托管所有网站使用的Google字体。Self-Hosted Google Fonts 将扫描您网站上的所有CSS,并自动下载必要的Google ...
【WP可视化编辑器】i悬停-iHover 预览地址: https://ultimate.brainstormforce.com/ihover/ 作用: 通过hover事件做出相应需要的动画效果,效果样式繁多,炫酷 预览效果:后台: ...
国企WordPress网站也可以做的如此好看?!不服来战! 近期,上海浩拓网络科技有限公司与隧道股份进行了互联网项目的合作。为上海隧道工程旗下的大型国资控股公司进行企业官网的深度定制开发。在此期间,我们对国内大型国企官网进行了调研分析。结果发现,多数大型国企的官网存在各种问题。不论从技术还是设计方面均已被时代所淘汰,甚至有的官网已无法打开。我...

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

  1. 大将军 says:

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

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

发表评论

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.