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

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

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（典型值：0 或 20px 等，贴右下角最常见）

• 视需要补 z-index 保证浮在其他内容之上

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

Step 3：条件设为整个网站并挂到 wp_footer

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

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

Bricks 还有其他可用的钩子位置，比如 bricks_after_footer、bricks_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：挂在尽量靠后的钩子，减少与其他模板输出的顺序冲突，也让主题/插件的过早输出不会盖住浮动层。

相关阅读：

• Bricks 内容切换器：纯 CSS 方案（radio + :has 实现标签切换）

• Bricks 用 ACF Checkbox 字段渲染自定义 SVG 图标列表

• Bricks 按 ACF Gallery 图片数量做动态条件输出

常见误区

几个坑：一是固定定位（fixed）后忘了给 Header 留位或设 z-index，浮动元素盖住导航或内容钻到下面；二是只挂到 wp_footer 却没设 Conditions 为整站，结果某些页面没有浮动元素；三是移动端没做收起/位置调整，小屏上挡住正文或按钮。浮动元素（客服/回到顶部/促销条）适合全站常驻，但位置、层级、移动端表现要一起定，别只图「浮起来」。

小结

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

延伸阅读

• 想要现成外贸独立站，从零搭出能收询盘的站？看 铲子铺 chanzipu 的外贸建站教程（同用 Bricks）

常见问题（FAQ）

浮动元素为什么挂 wp_footer？ 挂到 footer 钩子能保证它出现在所有页面底部之后，配合 fixed 定位常驻视口。

盖住导航怎么办？ 给浮动元素设合适的 z-index，并确认 Header 层级不低于它；必要时给 Header 也提 z-index。

只让部分页面显示？ 在模板 Conditions 里选范围，别用「整站」就能限定出现页面。

移动端怎么不挡内容？ 断点下把浮动元素缩小、移到角落或默认收起，别占正文区域。

• 相关阅读：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.

获取报价 →浏览全部教程