Bricks 页眉页脚制作教程：全站通用的 Header / Footer 怎么搭

页眉页脚的本质：Header / Footer 模板

在 Bricks 里，页眉页脚不是“每个页面复制一遍”，而是做成模板，然后通过“条件（Conditions）“决定它出现在哪些页面。你只要做一次，全站自动套用。

Bricks 的模板类型里专门有 Header 和 Footer 两种。它们会被自动塞进网站正确的 HTML 位置（<header> 和 <footer>），页面正文夹在中间。所以你完全不用管“怎么把页眉拼到每个页面顶部”——Bricks 帮你包好了。

第一步：新建 Header 模板

进后台 Bricks → Templates → Add New（新建模板）：

1. Template name：随便起，比如“全站页眉”

2. Template type：选 Header

3. 点 Create template，进入 Bricks 编辑器

小知识：如果你用的是较老的工作流，也有人用“Section”类型模板 + 条件来当页眉。但 1.5+ 版本直接用 Header 类型最省事，渲染位置更标准，语义化更好。

第二步：往里塞 Logo、菜单、CTA

接着就是上一课学的 Container 布局了。在 Header 模板里：

步骤 1：拖一个 Container 当横梁 → Direction row，Justify space-between，Align center，Gap 24，Width 用 Contained、最大宽度 1200（让内容居中）。

步骤 2：横梁里放三块：

• Site Logo 元素（或 Image 元素）放 Logo，链接指向首页

• Nav Menu 元素：在 外观 → 菜单 先建好一个菜单（比如“主导航”），这里直接选它。Bricks 会自动渲染成横向菜单

• Button 元素：写“立即咨询 / 获取报价”，链接到联系页或表单页——这就是 CTA（行动号召）

如果你想自己完全控制菜单样式（不用 WP 菜单），也可以不放 Nav Menu，而是放一个 Container（row + space-evenly）里面塞几个 Text Link（文本链接） 元素，每个指向一个页面。灵活度更高，但维护菜单项时要手动改。

第三步：用 Conditions 让它全站生效

模板做完了，还得告诉 Bricks“在哪些页面显示”。在模板编辑器右上角点 Conditions（条件）：

• 条件类型选 Entire Website（整站） → 所有页面、文章、归档页都套这个页眉

• 或者更精细：选 Post type = Page 只给页面用，Post type = Post 给文章用

保存后，前台随便打开一个页面，页眉就乖乖在顶部了。

踩坑提醒：条件里如果只选了“首页”，那其他页面是没有页眉的，很多新手以为“模板坏了”，其实是条件没配全。做全站页眉，直接选 Entire Website 最稳。

Footer 页脚怎么做

Footer 套路一样：

1. 新建模板，类型选 Footer

2. 外层 Container 用 column（竖着堆）或 row（多列并排）

3. 常见结构：左边放 Logo + 一句话简介，中间放“产品 / 关于 / 博客”链接列，右边放联系方式或订阅框

4. 底部再加一个窄 Container 放版权文字（“© 2026 你的公司名”），用 Direction row + space-between

Footer 一般背景色深一点、字小一点，和页眉区分开。

进阶：吸顶 sticky 与移动端

吸顶（sticky）页眉：想让页眉滚动时一直贴在屏幕顶部？选中页眉那根横梁 Container，到 Style → Layout → Position 设成 Sticky，Top 填 0。这样往下滚页面，页眉会一直挂着。

移动端收起菜单：手机屏幕窄，横排菜单会挤爆。两个思路：

• 简单版：在手机断点把横梁 Direction 改成 column，菜单变成竖排（虽然占地方但能用）

• 进阶版：用 Bricks 的响应式 + 一个“汉堡按钮 + 抽屉菜单”的交互（需要一点 JS 或现成插件），适合对体验要求高的站

/* 吸顶页眉的最小 CSS（Position 在 Bricks 里设即可，这里只是让你看懂原理） */
.site-header {
  position: sticky;
  top: 0;
  z-index: 999;      /* 保证盖在内容上面 */
  background: #fff;  /* 吸顶后内容从下面滚过，得有底色挡住 */
}

注意：sticky 页眉一定要给底色，否则滚动时后面的内容会“透”上来，字叠字。

页眉页脚的常见误区

几个高频翻车：把 Header 做成普通页面元素、忘了设 Conditions，结果只有首页有导航，内页没有；移动端菜单没单独做，桌面导航直接挤成一团；sticky 吸顶后没给 Header 加背景色或 z-index，滑下去内容从底下钻出来；Footer 里塞了 Query Loop 文章列表却忘了限制数量，页脚越滚越长。Header/Footer 一定要走模板系统、用 Conditions 全站挂载，才不会出现「有的页面没导航」。

常见翻车点

1. 页眉页脚没出现在页面上 → 99% 是 Conditions 没配。去模板里检查一下条件范围。

2. 某个落地页不想要页眉 → 在那个页面的 Bricks 设置里，把“Header / Footer”关掉，或单独建一个无页眉的模板并只对该页面生效。

3. sticky 后内容被遮住 → 没设 z-index 或没底色，按上面的 CSS 补上。

4. 菜单改了不生效 → 你是在 WP 的“外观 → 菜单”里改的吗？Nav Menu 元素只读取 WP 菜单，得去那边加项目，不是改 Bricks 元素。

页眉页脚这一课下来，你的站已经有了“框”。接下来我们往框里填内容——先做单篇文章页。

延伸阅读（同主题深挖）

• Bricks 页眉 Header 模板怎么建？全站页眉实战教程
• Bricks 页脚 Footer 模板怎么建？全站页脚实战教程
• 想要现成外贸独立站，从零搭出能收询盘的站？看 铲子铺 chanzipu 的外贸建站教程（同用 Bricks）

常见问题（FAQ）

Header 怎么全站生效？ 建 Header 模板后在 Conditions 选「整站 / 所有页面」，它就会自动挂到每个页面顶部。

移动端菜单怎么处理？ Bricks 的 Nav 元素自带响应式，断点下收成汉堡菜单；也可单独做一个移动端 Nav，用可见性控制在小屏显示。

sticky 吸顶后内容穿透怎么办？ 给 Header 设背景色并提高 z-index（比如 999），避免正文盖到导航上。

Footer 也能全站挂吗？ 能，Footer 模板同样用 Conditions 全站挂载，和 Header 是两套独立模板。

• 相关阅读：Bricks Setup Guide

站长

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.

获取报价 →浏览全部教程