提供基于WordPress外贸建站·技术支持·SEO咨询服务!
文章分类
文章标签

如何使用Astra主题制作透明和固定页眉?

文章导航

本文介绍如何使用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 主题的,通过后台上传插件完成安装并启用。

image 84 - 如何使用Astra主题制作透明和固定页眉? - NUTSWP

启用之后取激活Astra Pro主题,进入Astra Option进行激活主题

image 85 - 如何使用Astra主题制作透明和固定页眉? - NUTSWP

输入激活码进行激活。

image 86 - 如何使用Astra主题制作透明和固定页眉? - NUTSWP

2、启用Astra的Sticky Header模块

在Astra option中启用Sticky Header模块

使用Astra主题制作透明和固定页眉

3、设置固定页眉

进入Appearance的Customize

image 88 - 如何使用Astra主题制作透明和固定页眉? - NUTSWP

进入Header Builder

image 89 - 如何使用Astra主题制作透明和固定页眉? - NUTSWP

进入sticky Header

image 90 - 如何使用Astra主题制作透明和固定页眉? - NUTSWP

设置固定页眉效果如下:

image 91 - 如何使用Astra主题制作透明和固定页眉? - NUTSWP

当然你还可以按照自己的想法进行设置,比如:

开启Stick Above Header:让主Header上面的内容也固定

开启Stick Below Header:让主Header下面的内容也固定

开启Hide When Scrolling Down:当用户下滑时隐藏固定页眉

开启 Different Logo For Stiky Header:设置固定页眉使用不同的LOGO

设置完成之后点击发布生效。

image 92 - 如何使用Astra主题制作透明和固定页眉? - NUTSWP

4、设置透明页眉

在自定义的Header Buider中进入Transparent Header

image 93 - 如何使用Astra主题制作透明和固定页眉? - NUTSWP

设置透明页眉

image 94 - 如何使用Astra主题制作透明和固定页眉? - NUTSWP
image 95 - 如何使用Astra主题制作透明和固定页眉? - NUTSWP

5、设置透明和固定页眉的风格样式

在Transparent Header设置中进入Design选项,这里的样式设置都是针对透明页眉进行设置的。

image 96 - 如何使用Astra主题制作透明和固定页眉? - NUTSWP

设置透明页眉的底部边框大小和颜色

image 97 - 如何使用Astra主题制作透明和固定页眉? - NUTSWP

设置透明页头背景覆盖

image 98 - 如何使用Astra主题制作透明和固定页眉? - NUTSWP

设置透明页头的网站标题文字颜色

image 99 - 如何使用Astra主题制作透明和固定页眉? - NUTSWP

设置透明页头的菜单颜色和背景颜色

image 100 - 如何使用Astra主题制作透明和固定页眉? - NUTSWP

设置透明页头的二级菜单颜色和背景

image 101 - 如何使用Astra主题制作透明和固定页眉? - NUTSWP

设置透明页头中社交图标的颜色和背景

image 102 - 如何使用Astra主题制作透明和固定页眉? - NUTSWP

设置透明页眉中搜索的图标颜色、搜索框背景以及文字颜色

image 103 - 如何使用Astra主题制作透明和固定页眉? - NUTSWP

设置透明页眉中按钮的文字颜色和背景颜色

image 104 - 如何使用Astra主题制作透明和固定页眉? - NUTSWP

设置透明页眉中分割线的颜色

image 105 - 如何使用Astra主题制作透明和固定页眉? - NUTSWP

设置透明页眉中移动端菜单按钮的图标颜色、背景及边框颜色

image 106 - 如何使用Astra主题制作透明和固定页眉? - NUTSWP

色湖之透明页眉中HTML文字的和链接颜色

image 107 - 如何使用Astra主题制作透明和固定页眉? - NUTSWP

以上所有的设置都是针对全局而言,你还可以针对不同页面通过Astra设置做单独设置。

6、如何在在单独的页面中控制是否使用透明和固定页眉?

进入到页面编辑,注意是普通编辑窗口,不是Elementor编辑窗口,点击Astra设置

image 108 - 如何使用Astra主题制作透明和固定页眉? - NUTSWP

设置该页面的Header选项

image 109 - 如何使用Astra主题制作透明和固定页眉? - NUTSWP

Transparent Header有三个选项,Customizer Setiing代表默认设置(也就是你在自定义里面做好的设置),Enabled代表启用透明页眉设置,Disabled代表不启用透明页眉设置。

image 110 - 如何使用Astra主题制作透明和固定页眉? - NUTSWP

Sticky HeaderTransparent Header设置逻辑一样。

image 111 - 如何使用Astra主题制作透明和固定页眉? - NUTSWP

文章分类
文章标签
文章导航

搜索你想找的内容

建站咨询请联系企业微信
感谢你的信任!
咨询和购买请通过微信和我联系!