用 Bricks 做网站页眉与页脚：模板、固定页眉与全站应用

Bricks 页眉/页脚模板怎么建

成品主题给的页眉格式固定、不好改，而 Bricks 可以完全自由地做任何布局的页眉。页脚的做法和页眉一模一样，学会了页眉就会页脚。

1. 后台进 Templates，点 Add New。
2. 模板类型选 Header（做页脚时选 Footer）。
3. 按你喜欢的样式，设定容器的数量和宽高（比如常见的三栏：左 Logo、中导航、右按钮）。

桌面端页眉：Logo 与导航菜单

• Logo：用 Image 小部件放站点 Logo。
• 导航菜单：Bricks 的导航菜单需要在 WordPress 的 外观 → 菜单 里先建好菜单，再到 Bricks 里用 Nav Menu 小部件调用。

brickswiki 视角：导航菜单一定要先在「外观 → 菜单」里建好再进 Bricks 调用，很多新手卡住就是漏了这一步。

移动端/平板端分开调

桌面端排好后，别忘了分别切到平板端、手机端的编辑界面单独调整。Bricks 默认断点是：桌面端（≥992px）、平板端（768–991px）、手机横屏（479–767px）、手机纵屏（≤478px）。每个分辨率区间的布局都要手工调到最佳，单纯靠自适应往往不够。

固定页眉（Sticky Header）

想让页眉滚动时吸顶，两步搞定：

1. 点顶部设置进入 模板设置。
2. 打开 Header → Sticky Header & Sticky on scroll，固定页眉就生效了；下方的滚动触发参数按需要自定即可。

页脚做法与全站应用

页脚模板的建法和页眉一致（类型选 Footer）。做完后，进 Template settings → Conditions 选择要应用该页眉/页脚的页面。你可以全站显示同一套页眉页脚，也可以让不同页面各不相同。

PC / 手机用不同 Logo 的小技巧

想在电脑和手机上用不同的 Logo 图片，做法很巧妙：

• 放两个 Logo 小部件；
• 在 PC 端用 display:none 隐藏掉手机端那个，在手机端反过来隐藏 PC 端那个。

这样同一套页眉就能在不同设备上显示各自合适的 Logo。

小结

页眉/页脚都用 Templates → Header / Footer 模板来做，导航菜单先在「外观 → 菜单」建好再调用，分端各自调整，需要吸顶就开 Sticky Header，最后用 Conditions 挂到全站或指定页面。

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

站长

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.

获取报价 →浏览全部教程