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

相关文章

Leave a Reply

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