首页 / 中文教程 / 教程

Bricks 全站浮动元素:Section 模板 + wp_footer 钩子

需要在全站每页都显示一个浮动元素(回到顶部、悬浮联系按钮等)?用 Section 类型模板 + position: fixed + wp_footer 钩子,一次搭建全站生效,这是 Bricks 社区公认的理想做法。

Ray Chan·2026-08-12·约 1 分钟

场景:全站浮动元素放哪个模板

Bricks Facebook 群里常见提问:我有一个浮动元素(悬浮按钮、回到顶部、浮动客服入口等)要在每个页面、每篇文章、每个 CPT 上都显示,应该把它放进哪个模板?

在 Oxygen 里大家习惯放在主模板(main)里;到了 Bricks,灵活度很高、做法很多,但最理想、最省事的方式是:单独建一个 Section 类型的模板,专门放浮动内容,然后把这个模板挂到 wp_footer 钩子上。这样浮动元素与页头、页脚、正文模板完全解耦,想改浮动内容只动这一个模板。

Step 1:新建 Section 类型模板

后台 Bricks → Templates → Add New,模板名称随意(如 Floating Content),类型选择 Section。用 Bricks 编辑器打开,把浮动内容搭出来:外层一个容器(Container)或 Div,里面放按钮、图标、文案等。

Step 2:给最外层容器设置固定定位

这是整个方案的核心:选中结构里最外层的包装元素,在 STYLE → Position 里设置:

  • position: fixed(固定定位,脱离文档流、不随页面滚动)
  • right / bottom(典型值:020px 等,贴右下角最常见)
  • 视需要补 z-index 保证浮在其他内容之上

如果浮动元素想跟随滚动到中部再吸顶,那是另一套逻辑(position: sticky),本方案针对的是「一直悬浮在屏幕角落」的场景。

点击模板顶部齿轮图标(Settings)→ TEMPLATE SETTINGS → CONDITIONS,选择 Entire website(整个网站),这样所有页面都会加载该模板。

然后在 HOOK 下拉里选择 wp_footer。保存后到前台任意页面查看,浮动元素应该已经出现在右下角了。

Bricks 还有其他可用的钩子位置,比如 bricks_after_footerbricks_after_site_wrapper,但 wp_footer 在这里是最优选——遵循前辈们总结的箴言:Hook late, return early(尽量挂晚、尽早返回),wp_footer 是整页最后执行的动作之一,浮动元素在它里面渲染不会干扰其他内容的输出顺序。

原理说明

  • 模板类型 Section:Bricks 模板分为 Section / Header / Footer / Popup 等类型,Section 类型模板通过 Hook 挂载时会把模板内容渲染到指定钩子位置,适合做「页面级组件」。
  • CONDITIONS 决定作用范围:Entire website 表示全站生效;也可以选 Single posts、特定 CPT、特定分类等,浮动元素就能按需出现在部分页面。
  • position: fixed:相对视口定位,不占文档流空间,因此不会挤压页面内容;配合 right / bottom 即可固定在屏幕角落,滚动时始终可见。
  • Hook late, return early:挂在尽量靠后的钩子,减少与其他模板输出的顺序冲突,也让主题/插件的过早输出不会盖住浮动层。

小结

「Section 模板 + wp_footer」是 Bricks 里做全站浮动元素的推荐套路:建一次、全站复用、条件可控、与页头页脚解耦。以后遇到「每个页面都要有的小部件」——浮动客服按钮、促销浮层、回到顶部——都可以照这个模式处理。

需要帮忙?

用 Bricks 建站?我接客户项目。

从快速营销站到完整的 Bricks 建站,再到从 Elementor 迁移——我都做过。本站每篇教程都来自真实项目经验。告诉我你的需求,一个工作日内回复。

  • Bricks 建站与改版
  • Elementor / Divi → Bricks 迁移
  • Bricks → Astro / headless 性能升级
  • 速度优化,PageSpeed 95+ 目标