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

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

20250410173207455-image

Below Header 的结构布局

Below Header 提供两种布局:

  • 第一种为左右双区结构,可将内容分布在左侧与右侧,适合需要展示多组信息的场景
20250410173228560-image
  • 第二种为居中单区结构,集中展示一项内容,例如公告、促销语或提示信息
20250410173237393-image

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

可插入的内容类型

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

20250410173301853-image
20250410173322280-image

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

20250410173328320-image

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

20250410173334272-image

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

20250410173342576-image
20250410173352693-image

外观设置选项

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

20250410173415986-image
20250410173422711-image

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

20250410173452941-image

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

20250410173458413-image

移动端优化功能

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

  • 可选择内容排列方式(横排或堆叠)
  • 若显示菜单,可为汉堡图标添加标签,提示内容归属
20250410173519524-image
  • 可以启用菜单合并功能,将下方菜单并入主菜单结构中,保持导航栏的简洁统一
20250410173509535-image

总结

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

相关文章



了解 宝藏号 的更多信息

订阅后即可通过电子邮件收到最新文章。

© 版权声明

相关文章

暂无评论

none
暂无评论...

了解 宝藏号 的更多信息

立即订阅以继续阅读并访问完整档案。

继续阅读