Astra Pro 插件中的 Above Header 模块为站点顶部内容提供了一个灵活可定制的展示区域。它位于主导航之上,常用于展示联系电话、社交图标、额外菜单、搜索功能等。结合 Astra 的 Header Builder,可轻松在桌面和移动设备上设置不同布局和内容,增强网站结构清晰度与信息传递效率。
Above Header 的布局选项
Astra 提供两种基础布局:
布局一:将 Above Header 分为左右两个部分,左侧为 Section 1,右侧为 Section 2,适合双内容展示
布局二:仅保留中间区域,集中显示一项核心内容,如促销信息、公告等
在 Header Builder 中,Above Header 实际为第一行元素,可自由拖放需要的组件。
支持添加的内容类型
菜单导航
可以将菜单分配至上方页眉位置。在“外观 > 自定义 > 菜单”中创建菜单后,选择“Above Header 菜单”作为显示位置,适合展示附加导航。
搜索按钮
可启用搜索图标,点击图标后显示搜索框,提升用户快速查找内容的效率。
文本或 HTML 内容
支持自定义文本及 HTML,例如插入邮箱、联系电话、按钮等,适用于展示关键信息。
小工具组件
支持添加 WordPress 默认小工具或第三方插件生成的内容,例如登录窗口、语言切换、天气组件等。设置入口为“外观 > 自定义 > 小工具”。
外观样式设置
边框与高度
可自定义底部边框颜色与宽度,使 Above Header 更具层次感;同时可通过滑块调节整体高度,满足不同设计需求。
颜色与背景
进入“外观 > 自定义 > 头部 > Above Header”,可设置背景颜色、文字颜色、链接颜色、悬停颜色等内容,保持风格统一。
移动端响应式设置
对齐方式:可将 Section 1 和 Section 2 设置为“并排”或“堆叠”显示,适配不同屏幕宽度菜单标签:为移动端菜单添加文字标签,提升导航清晰度
合并菜单功能:将上方菜单合并至主导航,在小屏幕下集中展示所有导航选项,节省空间
总结
Above Header 是 Astra Pro 提供的高级功能模块,为网站顶部信息展示提供了丰富的布局与内容配置方式。无论是插入辅助菜单、联系方式、搜索框,还是展示促销信息,都可以通过 Above Header 灵活实现。结合响应式设置和样式自定义功能,让站点在不同设备上都保持一致的视觉与结构表现。