制作可变色的悬浮网站头部-wordpress区块主题教程
WordPress区块主题教程
可变色的悬浮头部是可以让网站的头部保持2个配色的风格，在一些设计较为大气磅礴的站点中经常会出现
可变色的网站头部：当访问网站时，进入网站未开始滚动的时候，网站的头部采用和顶部banner融合一体的风格，而当开始滚动访问网站下屏的内容时，网站头部会悬浮顶部跟随滚动而位置不变，并且使用新的配色让网站的头部不至于因透明度和配色看不清。
如下图。在首屏时，我们的导航是文字和logo均为白色，底色为一个透明度为10%的黑色底色。
当滚动到下一屏幕时，网站的头部会进行悬浮跟随滚动位置不变，如果还是保持上图的风格，导航则看不清了，因此，滚动悬浮的头部则采用白底，绿色的配色：
看完上图的说明，下面我们开始说明这个变色功能如何进行。
可变色的网站头部风格设置教程
首先你需要升级超级区块WordPress主题-标准版 到2.11版本，此版本我们更新了网站头部区块的变色功能。
你可以编辑网站头部区块模板，如果你没有使用网站头部区块模板来制作头部，那么你需要挂载一个头部区块模板到头部
如下图，你可以看到新增了一个下拉悬浮状态风格，导航样式设置是设置默认首屏的风格，而这个新增的选项则是可设置下拉悬浮状态时的配色和风格。
这个选项你可以上传新的配色的logo、以及背景色、字体颜色和背景透明度
这样你就可以分别设置出来悬浮和默认状态的风格了。
需要值得注意的是，这个悬浮状态的风格设置只能用于单页，而不能用于分类列表、标签和文章页，因此如果需要使用这个功能，需要创建2个网站头部区块模板。
单页需要变色的头部区块模板，以及公共头部区块模板
创建好了之后，我们的分类、标签和文章页使用公共的头部区块模板：
设置的地方在后台—外观—自定义—PC网站头部设置，找到挂载区块模板的选项：
而需要使用变色头部的单页面，则编辑页面，在页面选项中找到挂载头部区块模板的选项：
ps.每个单页都可以单独指定额外的头部风格。
这样我们的变色头部就可以完整的设置好了，如果你想要这样的风格，也可以直接用样板库中的头部风格新建一个头部区块模板（网站头部样板10号）
声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。