本文中,牛奇网向您介绍Blocksy主题如何设置粘性页头(Sticky Header),如果想更加深入了解该主题,可以查看Blocksy主题——一款轻量多用途WordPress主题。如果您尚未购买Blocksy主题高级版,可以点击下方链接至官网购买。
Blocksy主题设置Sticky Header
如果想设置Blocksy主题的粘性页头(Sticky Header),可以按照以下步骤进行操作:
第一步:登录WordPress后台,点击外观->自定义,进入Blocksy主题的自定义设置界面。
![Blocksy主题如何设置粘性页头(Sticky Header)](https://www.niuqi360.com/wp-content/uploads/2021/02/2021022710242555.png)
第二步:进入Blocksy主题设置页面后,点击Header菜单项目。
![Blocksy主题如何设置粘性页头(Sticky Header)](https://www.niuqi360.com/wp-content/uploads/2021/02/2021022710242555.png)
第三步:进入Header自定义设置界面后,点击上方的“Headers”选项卡。
![Blocksy主题如何设置粘性页头(Sticky Header)](https://www.niuqi360.com/wp-content/uploads/2021/02/2021022710242555.png)
第四步:点击“Global Header”设置,进入更多设置界面。
![Blocksy主题如何设置粘性页头(Sticky Header)](https://www.niuqi360.com/wp-content/uploads/2021/02/2021022710242555.png)
第五步:打开“Sticky Functionality”后面的开关,就可以设置Sticky Header了。在这里还有一个“Transparent Functionality”,可以设置透明Header。
![Blocksy主题如何设置粘性页头(Sticky Header)](https://www.niuqi360.com/wp-content/uploads/2021/02/2021022710242555.png)
第六步:在Sticky Header选项中,可以选择哪些Header行在滚动时保持固定在屏幕顶部。可以选择以下任意一种组合:All Rows、Main Row、Top & Main Rows、Main & Bottom Rows、Only the Top Row和Only the Bottom Row。
![Blocksy主题如何设置粘性页头(Sticky Header)](https://www.niuqi360.com/wp-content/uploads/2021/02/2021022710242555.png)
第七步:设置Sticky Header的动画效果。点击“Effect”下面的菜单,可以选择Sticky Header的动画效果,包括None、Fade、Slide Up和Slide Down等效果。
![Blocksy主题如何设置粘性页头(Sticky Header)](https://www.niuqi360.com/wp-content/uploads/2021/02/2021022710242555.png)
第八步:现在,返回网站前端查看Sticky Header的效果。如下图所示,因为Sticky Header的背景为白色,而导航内容的字体也为白色,所以看起来一片白,我们需要重新设置样式效果。
![Blocksy主题如何设置粘性页头(Sticky Header)](https://www.niuqi360.com/wp-content/uploads/2021/02/2021022710242555.png)
第九步:在右侧页面下方,点击对应Sticky Header前方的齿轮图标,就会打开该行的设置选项。General是对Header元素进行设置,我们点击后方的“Design”。在这里的“Background”下方,可以对Sticky Header的背景色进行设置,还可以设置该行的边线。
![Blocksy主题如何设置粘性页头(Sticky Header)](https://www.niuqi360.com/wp-content/uploads/2021/02/2021022710242555.png)
第十步:如果您想保持将Sticky Header的背景设置为白色,那儿可以选择将字体设置为黑色。点击对应行上面的项目,然后在左侧的“Design”选项卡中进行设置,如下图所示,我们将sticky State设置为暗色调,以和白色背景形成对比。相应的,我们也需要将白色的Logo替换为有对比的颜色,这里略过。
![Blocksy主题如何设置粘性页头(Sticky Header)](https://www.niuqi360.com/wp-content/uploads/2021/02/2021022710242555.png)
第十一步:访问网站的前台,然后滚动页面以查看Sticky Header的效果。这里我么没有上传暗色调的Logo,所以看起来Logo还是白色的。
![Blocksy主题如何设置粘性页头(Sticky Header)](https://www.niuqi360.com/wp-content/uploads/2021/02/2021022710242555.png)
另外,我们还可以根据不同的设备(桌面、平板或手机)启用或禁用Sticky Header功能。
综上,就是Blocksy主题设置粘性页头(Sticky Header)的操作方法。
作者:牛奇网,本站文章均为辛苦原创,在此严正声明,本站内容严禁采集转载,面斥不雅请好自为之,本文网址:https://www.niuqi360.com/blocksy/how-to-create-sticky-header-with-blocksy-theme/