当通过自定义 css（如 display: none）意外隐藏 divi 全局页眉/页脚后，前端编辑器无法显示对应模块，本文提供精准 css 修复方案、安全替代方法及关键注意事项。
当通过自定义 css（如 display: none）意外隐藏 divi 全局页眉/页脚后，前端编辑器无法显示对应模块，本文提供精准 css 修复方案、安全替代方法及关键注意事项。
在 Divi 主题中，使用「主题构建器（Theme Builder）」创建的全局页眉（Global Header）和页脚（Global Footer）本质上是通过动态生成的 CSS 类名注入到页面中的——而非传统的 #main-header 或 #main-footer ID。因此，当你在某个页面的区块设置中添加了 display: none 的自定义 CSS，尤其是作用于整个页眉区域时，实际可能覆盖了由 Theme Builder 渲染的特定类选择器（例如 .et_pb_section_0_tb_header），导致其不可见且无法在前端编辑器中选中、编辑或删除该样式。
此时，尝试用旧式 ID 选择器（如 #main-header { display: block !important; }）往往无效，因为 Theme Builder 构建的页眉不依赖 #main-header ID，而是使用带哈希后缀的动态类名（如 .et_pb_section_0_tb_header、.et_pb_section_1_tb_footer 等），这类类名在不同站点或更新后可能变化，但结构规律稳定：et_pb_section_{N}_tb_header 表示第 N+1 个主题构建器页眉模块。
✅ 正确的恢复方式是使用对应的主题构建器专用类名，并显式重置显示状态：
/* 恢复全局页眉（通常为第一个主题构建器页眉） */
.et_pb_section_0_tb_header {
display: block !important;
}
/* 恢复全局页脚（通常为第一个主题构建器页脚） */
.et_pb_section_0_tb_footer {
display: block !important;
}⚠️ 注意：若你创建了多个页眉/页脚模板（例如针对不同设备或页面类型），请检查实际 HTML 源码确认准确类名（右键 →「查看网页源代码」→ 搜索 tb_header），将 0 替换为对应序号（如 1、2）。
? 更推荐的长期实践：避免使用 display: none 隐藏全局组件。Divi 主题构建器原生支持「条件显示（Conditions）」功能——你可直接为某一页（如 WooCommerce 结账页）设置「排除此页头/页脚」，无需任何 CSS。操作路径如下：
- 进入 Divi → Theme Builder；
- 点击对应页眉/页脚模板右侧的 ⚙️ 编辑；
- 在右侧设置面板中展开 Conditions → Pages；
- 勾选 « Hide on the following pages »，然后添加 /checkout/ 或选择「WooCommerce Checkout Page」；
- 保存并发布。
该方式完全无侵入性、可逆性强，且不影响前端编辑器的可见性与可操作性，是官方推荐的最佳实践。
? 小结：
- 不要依赖 #main-header 等传统 ID 修复 Theme Builder 组件；
- 使用 .et_pb_section_{N}_tb_header/footer 类名 + display: block !important 快速恢复；
- 优先采用 Theme Builder 内置的「Conditions」功能实现按需隐藏，兼顾安全性与可维护性；
- 修改前建议启用浏览器开发者工具（F12）实时验证类名与样式生效状态。
