WordPress教程

用Elementor创建Sticky Header

Elementor收费版自带Sticky Header,但免费版也能很简单的实现这个效果。只需要安装两个插件,基本对所有主题都适用,即便像Astra主题这种自带header Footer Builder的,也能用elementor重建header。

soalgirl.net - 用Elementor创建Sticky Header最终效果
在astra主题上用elementor创建菜单,并实现sticky效果

需要安装两个插件

Elementor肯定必装,排除了,还需要装下面这俩:

先创建一个菜单

Dashboard > Appearance > Elementor Header & Footer Builder菜单下,点击Add New创建一个新的header,填写标题、type of template选择header。

接下来用elementor编辑,简单的header选择两栏设计,左边放Logo(Image Element),右边放菜单(Navigation Menu Element)即可,这里不赘述方法,看看插件视频介绍就行了。

开启Sticky Header功能

找到最外层的Section Element,打开Advanced选项卡,里面有一个子选项卡叫做Sticky Header Effects,这里就是开启sticky header的地方。

solablog - 开启Elementor Sticky Header

Enable On:控制sticky功能在哪些尺寸下显示。

Scroll Distance:填写一个大于自己header高度数值即可。

Background Color:菜单进入sticky状态后的背景色。

Border Bottom:给菜单加底部线条,如果这个是阴影效果可能会更好。

Shrink Logo:sticky后缩小logo,这样能减小菜单的高度。

Blur Background:sticky菜单下的背景虚化,需要将background color设置为半透明的颜色才能看出来。

根据需要设定选项,你就能获得一个工作良好的elementor sticky header。

留言

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