技巧教程
Bricks 小技巧合集——Tabs 轮播、手风琴动画、内容切换器、条件输出等即拿即用的代码片段。
Bricks 内容切换器：纯 CSS 方案（radio + :has 实现标签切换）
本教程教你用 100% 纯 CSS 在 Bricks 里实现内容切换器（content switcher）——在多个内容区块间切换显示，典型场景如价格表（pricing tables）切换、功能特性切换，不需要任何 JS…
Bricks Tabs 自动轮播：滚动到可视区后自动切换标签页
给 Tabs (Nestable) 元素加自动轮播：元素进入视口后每隔 3 秒自动切到下一个标签页，离开视口自动暂停。基于 IntersectionObserver 与 setInterval，纯前端实现，免费教程完整代码。
手风琴展开项自动滚动到可视区（解决内容跳动问题）
长内容手风琴切换时页面高度突变、内容乱跳？先判断手风琴是否选错了组件，确需使用时用 20 行 JS 在展开完成后自动滚动到新展开的条目，免费教程完整代码。
Bricks Accordion (Nestable) 图标旋转：展开/收起状态箭头切换
Bricks 的 Accordion (Nestable) 元素展开前后图标完全一样，没有状态反馈。用两行 CSS 让箭头在展开时旋转 90 度，收起时转回，带平滑过渡动画。免费教程完整代码。
Bricks 分类与子分类 Query Loop Tabs：父分类做标签、子分类做内容
用 Bricks Tabs（Nestable）把顶级父分类做成标签页标题、对应子分类列表做成标签内容。付费原文锁定，给出官方钩子补全实现。
在 Bricks Builder 中制作可自定义的 AJAX 加购按钮
在 Brickshttps://brickslabs.com/go/bricks 中，你可以用动态数据/函数 {woo_add_to_cart} 直接创建一个加购按钮。只要在 WooCommerce > Settings…
为 SureCart 产品制作自定义加购按钮（含加载动画与 Tooltip）
Brickshttps://brickslabs.com/go/bricks 对 SureCarthttps://brickslabs.com/go/surecart v3+ 的集成提供了现成的「加购按钮（Add-to-…
Bricks 滚动自定义动画：无需任何插件的 IntersectionObserver 方案
本教程提供一套 JavaScript + CSS 代码，让你在 Bricks Builderhttps://brickslabs.com/go/bricks 里实现滚动进入视口时触发的自定义 CSS 动画，全程不需要任何…
如何在 Bricks 中用 RoughNotation.js 实现滚动标注动画
本教程提供可直接粘贴的 PHP 与 JS 代码，让你在 Brickshttps://brickslabs.com/go/bricks Builder 里用 RoughNotation 库https://github.co…
用 ACF 和 Bricks 创建动态无限 Logo 轮播
本教程提供完整的构建器设置、PHP 与 CSS 代码，教你用纯 CSS 在 Bricks Builderhttps://brickslabs.com/go/bricks 里做出一个无限循环的 Logo 轮播——Logo …
在 Bricks 中创建网格轮播
本教程教你如何在 Brickshttps://brickslabs.com/go/bricks 默认的嵌套轮播（nested slider）里做出多行多列的网格布局。Bricks 的轮播底层用的是 SplideJShtt…
为 Bricks 嵌套轮播添加进度条
本教程教你如何给 Brickshttps://brickslabs.com/go/bricks 的嵌套轮播（nested slider）元素添加进度条，效果参考 SplideJS 官网的轮播进度示例https://spl…
在 Bricks 中使用 IsotopeJS 创建筛选器（第四部分）：AJAX 筛选与无限循环、排序、列表视图与禁用动画
本教程讲解在 Brickshttps://brickslabs.com/go/bricks 构建器里用 Isotope 实现：给无限滚动查询循环容器启用 AJAX 筛选、添加排序功能、添加列表视图切换器，以及禁用筛选时的…
Bricks 中同步两个可嵌套轮播（主轮播 + 缩略图联动）
本教程教你如何在 Bricks 中同步两个可嵌套（nestable）轮播：一个作为主轮播，另一个作为缩略图轮播。
Bricks 手风琴（Nestable）：第一项桌面端展开、移动端收起
在 Bricks Facebook 群https://www.facebook.com/groups/brickscommunity里，有用户提问：
Bricks Masonry 手风琴：Accordion（Nestable）里的瀑布流查询循环
在 Bricks 手风琴（Accordion Nestable）内的文章查询循环里启用 Masonry 瀑布流。付费原文锁定，给出基于 Isotope 的补全实现。
把色板选择器移到颜色弹窗顶部
在 Bricks Facebook 群https://www.facebook.com/groups/brickscommunity/里，有用户提问：
用自定义链接/按钮/Div 打开 Bricks Offcanvas（brxe-toggle 类）
不想用汉堡图标触发 Offcanvas？给任意文本链接、Button 元素或自定义 Div 加上 brxe-toggle 类即可打开侧滑菜单；多个 Offcanvas 时用 data-selector 属性指定目标。免费教程零代码。
用按钮 data 属性填充 BricksExtras 弹窗中的 WS Form 表单字段
本教程演示如何把打开弹窗（Modal）的按钮/链接上的 data- 属性值，填充到 BricksExtrashttps://bricksextras.com/ 的 Modal 内 WS Formhttps://brick…
Bricks 吸顶元素：用 position: sticky 让任意元素滚动吸顶
想让页头或页面中部的某个区块滚动到顶部后吸住？用 CSS position: sticky 三个设置搞定，并借助 WordPress 管理员栏 CSS 变量自动避让工具栏，免费教程零代码。
Bricks 页脚滑动露出效果（Sticky Footer Reveal）
想让 Bricks 网站的页脚做出这种「滑动露出」的效果吗？——平时页脚藏在页面底部看不见，滚动到最底部时它才从下方滑出来，而不是一直占据页面空间。
零代码：ACF Repeater 子字段值做成 Bricks Tabs 标签页
Bricks 的查询循环原生支持 ACF Repeater 和 Meta Box Group，配合可嵌套的 Tabs 元素，可以把 Repeater 的每一行变成标签页——标签标题取一个子字段、内容取另一个子字段，全程不用写一行代码。
Bricks 用 Popup + 交互做 WooCommerce 商品快速预览
不装插件，用 Bricks 自带的 Popup 模板和 Interactions 交互给商品网格加快速预览：点击按钮弹出灯箱，展示图片、价格、简介与加购按钮。
WooCommerce 滚动吸顶 Add to Cart 区块（Bricks）
在 Bricks 中构建一个滚动时吸顶的加入购物车区块，包含产品图、标题、价格、数量与购买按钮，下滑淡入、回顶淡出，纯构建器实现无需插件。