Astra Above Header 模块详解：灵活扩展页首信息展示

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 灵活实现。结合响应式设置和样式自定义功能，让站点在不同设备上都保持一致的视觉与结构表现。

相关文章

联系我们
教程看不懂？联系我们为您免费解答！免费助力个人，小企站点！	客服微信
① 电话：020-2206-9892
② QQ咨询：1025174874
③ 邮件：[email protected]
④ 工作时间：周一至周五，9:30-18:30，节假日休息