如何在 Divi 中恢复被隐藏的全局页眉与页头

本文详解当误用自定义 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 需根据你实际构建器中页眉/页脚的序号调整。最可靠的方式是：

1. 进入 Divi → 主题构建器；
2. 点击对应全局页眉模板右侧的「编辑」按钮；
3. 切换至「设置 → 高级 → CSS ID & classes」，查看「CSS Class」字段值（若为空，则浏览器审查元素确认实际 class 名）；
4. 或直接在前台打开任意页面 → 右键检查 → 查找
   
   标签，观察其 class 属性（如 et_pb_section et_pb_section_0_tb_header）。

✅ 更推荐的长期方案：避免硬编码隐藏，改用构建器条件规则

与其依赖易出错的自定义 CSS，Divi 主题构建器原生支持按页面类型、URL、用户角色等条件控制全局模块显示/隐藏。例如：

• 编辑全局页眉模板 → 点击右上角「设置」图标（⚙️）→ 「Visibility」选项卡；
• 勾选「Hide on specific pages」→ 添加「Checkout Page」（或选择「WooCommerce Checkout Page」）；
• 保存后，该页眉将仅对结算页自动隐藏，且不干扰其他页面，也无需任何 CSS，后续可随时在此界面一键启用。

此方式完全可视化、可逆性强，且不会导致管理后台元素“消失”，从根本上规避了本问题。

? 总结

掌握这一机制，不仅能快速解救“失联”的页眉页脚，更能推动你从 CSS 修补式开发，转向 Divi 原生、结构化、可持续的主题管理实践。