Astra Pro 页面页眉（Page Header）功能详解

Astra Pro 插件提供了 Page Headers 模块，可为网站创建页面标题区域，包括标题样式、面包屑导航、背景设置、布局方式等，适配多种页面结构和展示需求。

前提条件

使用此模块需先安装 Astra 主题和 Astra Pro 插件，并在后台启用 Page Headers 模块。

开启步骤

• 安装并激活 Astra Pro 插件
• 进入后台 > Astra > Astra Pro Modules，启用 Page Headers 模块

• 点击“Settings”按钮，进入 Page Headers 设置界面

页面页眉设置流程

• 点击“Add New”添加新页眉并命名

• 配置 Page Header、Site Header 和 Display Rules
• 保存发布，立即生效

页面标题布局

Page Header
页面标题和面包屑上下排列，居中显示

Inline
标题和面包屑分别显示在左右两侧

面包屑导航

启用后可显示当前位置路径，帮助访问者快速返回上级内容

标题与面包屑颜色

可分别设置文字颜色，适应页面配色风格

背景设置

自定义尺寸
设置上下内边距，自由控制页眉高度

全屏模式
将页眉区域显示为全屏背景

颜色与图片背景
可设置纯色背景或上传背景图片

叠加色
为图片添加透明叠加色，增强对比度

特色图像替换背景图
自动使用文章或页面中的特色图像作为背景

视差滚动
背景在滚动时以不同速度移动，提升页面视觉动感

网站页眉（Site Header）相关设置

合并页眉
启用后，页面页眉与站点页眉合并显示，并自动将背景应用于整个页眉区域
页面顶部视觉更统一，适合透明导航设计风格

Logo 配置
支持上传与站点不同的 Logo，可单独设置普通版与 Retina 高清版，并设置宽度

菜单设置

主菜单颜色
可自定义背景颜色、链接颜色、悬停颜色等

子菜单颜色（v2.5.0 起）
提供主菜单与上下页眉区域的子菜单颜色设置

选择菜单内容
可替换默认主菜单，选择其他菜单进行展示

添加自定义菜单项
可在菜单末尾添加文字、HTML、按钮、搜索图标、小工具等内容

移动端独立显示菜单项
自定义菜单项可在移动端与主菜单分离展示，便于响应式布局

显示控制

页面条件显示
可选择在哪些页面、文章或分类中显示特定页眉

按用户角色显示
可设置不同用户角色对应的显示范围，例如访客与已登录用户看到不同内容

总结

Page Header 模块为Astra页面标题设计提供了高度灵活的控制项，适合应用于博客首页、服务页面、品牌介绍等场景。配合背景图、布局样式和菜单定制，能够打造出具有视觉吸引力的页面首屏。

相关文章