本文详解在 Divi 主题中因误用 display: none 隐藏全局页眉/页脚后，如何精准定位并恢复显示，提供可靠 CSS 选择器、替代方案及预防建议。
本文详解在 divi 主题中因误用 `display: none` 隐藏全局页眉/页脚后，如何精准定位并恢复显示，提供可靠 css 选择器、替代方案及预防建议。
在 Divi 主题中，通过前端构建器（Frontend Builder）为某页面（如 WooCommerce 结账页）的「全局页眉（Global Header）」或「全局页脚（Global Footer）」添加自定义 CSS（例如 display: none;）是一种常见操作，但极易引发“隐藏后无法再编辑”的困境——因为页眉/页脚区域完全不可见，导致无法进入模块设置界面删除该 CSS。此时，单纯尝试 #main-header { display: block !important; } 往往无效，原因在于：Divi 通过主题构建器（Theme Builder）生成的全局元素并非使用传统 ID（如 #main-header），而是采用动态生成的类名（如 .et_pb_section_0_tb_header）进行渲染。
✅ 正确的恢复方案
若您的全局页眉是通过 Divi Theme Builder 创建（即在「Divi → Theme Builder」中配置的模板），请使用以下精准 CSS 覆盖隐藏规则：
.et_pb_section_0_tb_header {
display: block !important;
}
.et_pb_section_0_tb_footer {
display: block !important;
}? 提示：.et_pb_section_0_tb_header 是 Divi 为首个主题构建器页眉区块生成的标准类名；同理，页脚对应 .et_pb_section_0_tb_footer。若您创建了多个全局页眉/页脚模板，类名中的序号（如 _1_, _2_）可能变化，请通过浏览器开发者工具（右键 → 检查）定位实际生效的类名（通常含 tb_header 或 tb_footer 关键字）。
将上述 CSS 添加至：
- Divi → Theme Options → Custom CSS（推荐），或
- WordPress 后台 → 外观 → 自定义 → 额外 CSS，保存后刷新前台即可立即恢复可见性，随后可正常进入前端构建器编辑并移除原始隐藏代码。
⚠️ 更安全的替代方案（推荐长期使用）
避免直接用 display: none 隐藏全局组件——这会破坏可编辑性且易出错。Divi 原生支持按页面/条件禁用全局区域：
- 进入 Divi → Theme Builder；
- 找到应用到目标页面（如结账页）的模板（如 “WooCommerce Pages” 模板）；
- 点击该模板右侧的 ⚙️ 编辑 → 在「Header」或「Footer」区域，点击「Disable」按钮；
- 保存模板。
此方式由 Divi 内核控制渲染逻辑，不依赖 CSS，既保证页面无头尾，又保留模板完全可编辑性，且兼容未来更新。
? 总结与建议
- ❌ 避免在模块设置中对全局页眉/页脚区块添加 display: none —— 它绕过 Divi 的模板机制，造成“失联”风险；
- ✅ 优先使用 Theme Builder 的「Disable」功能实现页面级隐藏；
- ? 若已误操作，用 .et_pb_section_*_tb_header/footer 类选择器强制恢复，再及时清理错误 CSS；
- ?️ 养成习惯：修改前备份当前模板（Theme Builder → 模板右侧「⋯」→ Duplicate），或启用子主题管理 CSS 更安全。
掌握这一机制，您将彻底告别“隐藏即失联”的 Divi 编辑窘境。
