本文详解当误用自定义 CSS（如 display: none）导致 Divi 全局页眉/页脚不可见时，如何精准定位并覆盖隐藏样式，重新启用全局模块，并提供更安全的替代方案。
本文详解当误用自定义 css（如 `display: none`）导致 divi 全局页眉/页脚不可见时，如何精准定位并覆盖隐藏样式，重新启用全局模块，并提供更安全的替代方案。
在 Divi 主题中，通过前端构建器（Frontend Builder）为特定页面（如 WooCommerce 结算页）添加 display: none 类似样式来隐藏全局页眉或页脚，是一种常见但高风险的操作。问题在于：这类 CSS 通常作用于动态生成的、由 Divi 主题构建器自动分配的类名（例如 .et_pb_section_0_tb_header），而非固定的 #main-header 或 .et-main-header。因此，简单地在子主题样式表或自定义 CSS 中写入 #main-header { display: block !important; } 往往无效——因为实际被隐藏的并非该 ID 元素，而是主题构建器渲染出的带唯一标识符的 section 类。
✅ 正确的修复方法：定位并覆盖构建器生成的类
Divi 主题构建器（Theme Builder）为每个全局模块（如全局页眉）生成带有唯一后缀的 CSS 类，典型格式为：
.et_pb_section_0_tb_header（页眉）、
.et_pb_section_1_tb_footer（页脚）等。
其中数字（如 0、1）取决于该模块在构建器中的创建顺序。
要恢复被隐藏的全局页眉，请在 Divi → 主题选项 → 自定义 CSS（或子主题 style.css / 外部 CSS 文件）中添加以下代码：
/* 恢复全局页眉显示 */
.et_pb_section_0_tb_header {
display: block !important;
}
/* 如需同时恢复全局页脚，可追加： */
.et_pb_section_1_tb_footer {
display: block !important;
}⚠️ 注意：0 和 1 需根据你实际构建器中页眉/页脚的序号调整。最可靠的方式是：
- 进入 Divi → 主题构建器；
- 点击对应全局页眉模板右侧的「编辑」按钮；
- 切换至「设置 → 高级 → CSS ID & Classes」，查看「CSS Class」字段值（若为空，则浏览器审查元素确认实际 class 名）；
- 或直接在前台打开任意页面 → 右键检查 → 查找
标签，观察其 class 属性（如 et_pb_section et_pb_section_0_tb_header）。
✅ 更推荐的长期方案：避免硬编码隐藏，改用构建器条件规则
与其依赖易出错的自定义 CSS，Divi 主题构建器原生支持按页面类型、URL、用户角色等条件控制全局模块显示/隐藏。例如：
- 编辑全局页眉模板 → 点击右上角「设置」图标（⚙️）→ 「Visibility」选项卡；
- 勾选「Hide on specific pages」→ 添加「Checkout Page」（或选择「WooCommerce Checkout Page」）；
- 保存后，该页眉将仅对结算页自动隐藏，且不干扰其他页面，也无需任何 CSS，后续可随时在此界面一键启用。
此方式完全可视化、可逆性强，且不会导致管理后台元素“消失”，从根本上规避了本问题。
? 总结
| 场景 | 推荐操作 |
|---|---|
| 紧急恢复已隐藏的全局模块 | 使用 .et_pb_section_X_tb_header 类 + display: block !important 覆盖（X 需实测确认） |
| 长期维护与可维护性 | 改用 Theme Builder 的 Visibility 规则，禁用而非隐藏 |
| 调试技巧 | 始终优先通过「主题构建器」后台管理模板，而非前端构建器添加 CSS；审查元素时关注 |
掌握这一机制，不仅能快速解救“失联”的页眉页脚，更能推动你从 CSS 修补式开发，转向 Divi 原生、结构化、可持续的主题管理实践。
