Astra Below Header 模块介绍：扩展主导航下方内容展示

Astra Pro 插件提供的 Below Header 模块为网站顶部结构提供了额外的布局空间。这个灵活的内容区域位于主导航下方，适合放置菜单、联系信息、按钮、社交图标或其他附加内容，可自由添加多种实用元素，增强导航辅助功能。

Below Header 的结构布局

Below Header 提供两种布局：

• 第一种为左右双区结构，可将内容分布在左侧与右侧，适合需要展示多组信息的场景

• 第二种为居中单区结构，集中展示一项内容，例如公告、促销语或提示信息

在 Astra 3.0 及以上版本中，该模块已整合进 Header Builder 的最下方区域。用户可直接在编辑器中调整顺序和内容类型。

可插入的内容类型

菜单
在外观设置中创建菜单后，将其分配至 Below Header 区域，即可在该区域展示辅助导航。

搜索功能
添加搜索图标，点击后展开输入框，提升信息检索能力。

文本或 HTML
可添加邮箱、电话、提示信息或按钮，适合展示短内容。

小工具
支持默认组件与第三方插件生成的组件，如语言切换、表单或通知功能。路径为：外观 > 自定义 > 小工具。

外观设置选项

边框与高度
可以设置底部边框的颜色与宽度，增强区域分隔感。区域高度也可通过滑块进行调整。

颜色配置
进入自定义器中的 Below Header 设置区域，可修改背景色、文字色、链接色与悬停时的颜色，匹配整体配色方案。

排版设置
支持设置字体家族、字号、字重等参数，保持文字清晰度与整体风格协调。

移动端优化功能

Below Header 支持移动设备显示优化：

• 可选择内容排列方式（横排或堆叠）
• 若显示菜单，可为汉堡图标添加标签，提示内容归属

• 可以启用菜单合并功能，将下方菜单并入主菜单结构中，保持导航栏的简洁统一

总结

Below Header 模块让网站顶部具备更丰富的信息展示能力。它的双区与单区布局适应多种场景需求，配合颜色、排版与移动端设置，构建统一而清晰的导航层次。对于需要突出顶部内容的网站来说，这一模块提供了便捷而灵活的配置方式。

相关文章