Blocksy主题如何设置粘性页头(Sticky Header)

本文中,牛奇网向您介绍Blocksy主题如何设置粘性页头Sticky Header,如果想更加深入了解该主题,可以查看Blocksy主题——一款轻量多用途WordPress主题。如果您尚未购买Blocksy主题高级版,可以点击下方链接至官网购买。



Blocksy主题设置Sticky Header

如果想设置Blocksy主题的粘性页头(Sticky Header),可以按照以下步骤进行操作:

第一步:登录WordPress后台,点击外观->自定义,进入Blocksy主题的自定义设置界面。

Blocksy主题如何设置粘性页头(Sticky Header)

第二步:进入Blocksy主题设置页面后,点击Header菜单项目。

Blocksy主题如何设置粘性页头(Sticky Header)

第三步:进入Header自定义设置界面后,点击上方的“Headers”选项卡。

Blocksy主题如何设置粘性页头(Sticky Header)

第四步:点击“Global Header”设置,进入更多设置界面。

Blocksy主题如何设置粘性页头(Sticky Header)

第五步:打开“Sticky Functionality”后面的开关,就可以设置Sticky Header了。在这里还有一个“Transparent Functionality”,可以设置透明Header。

Blocksy主题如何设置粘性页头(Sticky Header)

第六步:在Sticky Header选项中,可以选择哪些Header行在滚动时保持固定在屏幕顶部。可以选择以下任意一种组合:All Rows、Main Row、Top & Main Rows、Main & Bottom Rows、Only the Top Row和Only the Bottom Row。

Blocksy主题如何设置粘性页头(Sticky Header)

第七步:设置Sticky Header的动画效果。点击“Effect”下面的菜单,可以选择Sticky Header的动画效果,包括None、Fade、Slide Up和Slide Down等效果。

Blocksy主题如何设置粘性页头(Sticky Header)

第八步:现在,返回网站前端查看Sticky Header的效果。如下图所示,因为Sticky Header的背景为白色,而导航内容的字体也为白色,所以看起来一片白,我们需要重新设置样式效果。

Blocksy主题如何设置粘性页头(Sticky Header)

第九步:在右侧页面下方,点击对应Sticky Header前方的齿轮图标,就会打开该行的设置选项。General是对Header元素进行设置,我们点击后方的“Design”。在这里的“Background”下方,可以对Sticky Header的背景色进行设置,还可以设置该行的边线。

Blocksy主题如何设置粘性页头(Sticky Header)

第十步:如果您想保持将Sticky Header的背景设置为白色,那儿可以选择将字体设置为黑色。点击对应行上面的项目,然后在左侧的“Design”选项卡中进行设置,如下图所示,我们将sticky State设置为暗色调,以和白色背景形成对比。相应的,我们也需要将白色的Logo替换为有对比的颜色,这里略过。

Blocksy主题如何设置粘性页头(Sticky Header)

第十一步:访问网站的前台,然后滚动页面以查看Sticky Header的效果。这里我么没有上传暗色调的Logo,所以看起来Logo还是白色的。

Blocksy主题如何设置粘性页头(Sticky Header)

另外,我们还可以根据不同的设备(桌面、平板或手机)启用或禁用Sticky Header功能。

综上,就是Blocksy主题设置粘性页头(Sticky Header)的操作方法。

作者:牛奇网,本站文章均为辛苦原创,在此严正声明,本站内容严禁采集转载,面斥不雅请好自为之,本文网址:https://www.niuqi360.com/blocksy/how-to-create-sticky-header-with-blocksy-theme/

(0)
牛奇网牛奇网
上一篇 2023年6月6日 下午5:23
下一篇 2023年6月7日 上午9:18

相关推荐

发表回复

登录后才能评论
很多新手不知道如何选择外贸独立站主机,这里推荐一款使用量最大,性价比最高的国外独立站主机Hostinger,立即获取优惠