Astra Pro 页面页眉(Page Header)功能详解

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

20250411102808654-image

前提条件

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

开启步骤

  • 安装并激活 Astra Pro 插件
  • 进入后台 > Astra > Astra Pro Modules,启用 Page Headers 模块
20250411103359681-image
  • 点击“Settings”按钮,进入 Page Headers 设置界面
20250411103407258-image

页面页眉设置流程

  • 点击“Add New”添加新页眉并命名
20250411103528205-image
  • 配置 Page Header、Site Header 和 Display Rules
  • 保存发布,立即生效

页面标题布局

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

20250411103538767-image
20250411103625164-image

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

20250411103637646-image
20250411103653970-image

面包屑导航

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

20250411103701103-image

标题与面包屑颜色

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

20250411103707812-image
20250411103748462-image

背景设置

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

20250411103800372-image
20250411103807802-image

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

20250411103819782-image
20250411103824567-image

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

20250411103909890-image
20250411104013435-image

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

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

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

网站页眉(Site Header)相关设置

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

20250411104026186-image
20250411104038793-image

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

菜单设置

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

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

20250411104055525-image

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

20250411104103146-image

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

20250411104113785-image

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

20250411104136636-image

显示控制

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

20250411104218442-image

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

20250411104226981-image

总结

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

相关文章



了解 宝藏号 的更多信息

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

© 版权声明

相关文章

暂无评论

none
暂无评论...

了解 宝藏号 的更多信息

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

继续阅读