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

相关文章

Leave a Reply

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