本文介绍如何使用Astra主题制作透明和固定页眉,Astra Pro提供在自定义中编辑和设置网站页面的功能,我们可以轻松实现网站的透明页眉和固定页眉设置。
如果你使用Hello Elementor主题和Elementor Pro也可以实现透明和固定页眉,你可以阅读《如何使用Elementor制作透明和固定页眉》了解是如何实现的。
Astra主题的透明和固定页眉需要安装激活Astra Pro,本站提供Astra官方 Astra Pro Essential Bundle授权,1个站点终身159元,如有需要可以通过右下角微信联系获取。
1、安装激活Astra Pro Addon 插件
Astra Pro Addon 插件是用来激活Astra Pro 主题的,通过后台上传插件完成安装并启用。
启用之后取激活Astra Pro主题,进入Astra Option进行激活主题
输入激活码进行激活。
2、启用Astra的Sticky Header模块
在Astra option中启用Sticky Header模块
3、设置固定页眉
进入Appearance的Customize
进入Header Builder
进入sticky Header
设置固定页眉效果如下:
当然你还可以按照自己的想法进行设置,比如:
开启Stick Above Header:让主Header上面的内容也固定
开启Stick Below Header:让主Header下面的内容也固定
开启Hide When Scrolling Down:当用户下滑时隐藏固定页眉
开启 Different Logo For Stiky Header:设置固定页眉使用不同的LOGO
设置完成之后点击发布生效。
4、设置透明页眉
在自定义的Header Buider中进入Transparent Header
设置透明页眉
5、设置透明和固定页眉的风格样式
在Transparent Header设置中进入Design选项,这里的样式设置都是针对透明页眉进行设置的。
设置透明页眉的底部边框大小和颜色
设置透明页头背景覆盖
设置透明页头的网站标题文字颜色
设置透明页头的菜单颜色和背景颜色
设置透明页头的二级菜单颜色和背景
设置透明页头中社交图标的颜色和背景
设置透明页眉中搜索的图标颜色、搜索框背景以及文字颜色
设置透明页眉中按钮的文字颜色和背景颜色
设置透明页眉中分割线的颜色
设置透明页眉中移动端菜单按钮的图标颜色、背景及边框颜色
色湖之透明页眉中HTML文字的和链接颜色
以上所有的设置都是针对全局而言,你还可以针对不同页面通过Astra设置做单独设置。
6、如何在在单独的页面中控制是否使用透明和固定页眉?
进入到页面编辑,注意是普通编辑窗口,不是Elementor编辑窗口,点击Astra设置
设置该页面的Header选项
Transparent Header有三个选项,Customizer Setiing代表默认设置(也就是你在自定义里面做好的设置),Enabled代表启用透明页眉设置,Disabled代表不启用透明页眉设置。
Sticky Header和Transparent Header设置逻辑一样。