🆕 Bricks 2.4 已发布:查询循环性能提升 40%,迁移教程同步更新 →

首页 / 中文教程 / 教程

Bricks 制作页眉 Header 模板

教程:用 Bricks 模板做一次 Header,全站统一顶部品牌区——Logo、导航、CTA,并处理好粘性与手机汉堡菜单。

Ray ChanRay Chan·2026-08-20·约 1 分钟
目录
  1. 1.为什么用模板做页眉
  2. 2.制作步骤
  3. 3.粘性导航与样式
  4. 4.响应式
  5. 5.小结

页眉是每页顶部的品牌区(Logo、导航、CTA)。用 Bricks 模板做一次 Header,全站统一。本文讲制作与导航处理。

为什么用模板做页眉

页眉几乎每页都要。做成 Header 模板后,全站自动调用,改 Logo、加菜单只动一处。

制作步骤

  1. 后台 Bricks → Templates → 新建,类型选 Header
  2. 进编辑器,加 Container 横排:左侧放 Logo(图片元素),右侧放导航菜单(Nav 元素或菜单模块)。
  3. 在导航里选 WordPress 菜单,或用 Bricks 菜单元素手动搭。
  4. 设条件为全站显示,保存。

粘性导航与样式

  • 可设 Header 为「粘性(sticky)」,滚动时固定在顶部。
  • 用悬停态美化菜单项,用 Theme Style 统一配色。

响应式

桌面横排导航,手机常收成汉堡菜单。Bricks 的导航元素一般自带响应式折叠,记得切手机视口检查汉堡展开是否正常。

小结

页眉模板是站点门面:新建 Header 模板 → Logo+导航横排 → 粘性/悬停美化 → 手机汉堡。做好它,全站顶部就稳了。


内容说明(整理稿):本文选题与步骤框架参考自竞对站 trybricks.com / qinbanliang 站的公开教程(源多为截图驱动教程,正文极薄),内容为 BricksWiki 基于 Bricks 官方公开文档与通用实操经验重写整理,非原文逐字翻译,也不构成官方文档。操作入口/路径以你当前 Bricks 版本为准,实操前建议对照官方文档核对。

Ray Chan

站长

Ray Chan

WordPress Developer & Bricks Specialist

WordPress developer with 10+ years of client builds. Switched to Bricks in 2023 — now builds fast WordPress sites and migrates legacy Elementor/Divi projects.

延伸阅读