如何修复 Divi 中的跳头？ （3种方法）

Divi 中的跳头有问题吗？ 你来对地方了。 在本指南中，我们将逐步向您展示 3 种方法来轻松解决 Divi 中的跳头问题。

Divi 跳跃头球

Divi 在全球拥有数百万用户，是最受欢迎的 WordPress 主题之一。 它具有许多功能，可让您隐藏标题、自定义 WooCommerce 产品页面，甚至在商店页面中包含“添加到购物车”按钮。 但是，Divi 也有一些常见问题。 我们已经了解了如何解决联系表单的问题，今天我们将向您展示如何解决跳标问题。

许多用户在 Divi 中遇到标题问题，因此在本指南中，我们将了解如何解决它。 在我们进入指南之前，让我们了解这个问题导致的问题以及它发生的原因。

什么是 Divi 跳头？

有时，当您访问一些使用 Divi 的网站时，您会注意到当页面加载时，标题不在顶部。 相反，它会跳转直到页面完全加载，这就是为什么它被称为 Divi 跳转标题。

为什么会出现跳头？

Divi 中的跳头是由于 CSS 和 JavaScript 之间的冲突而发生的。 当您使用定制器将更改应用到您的网站时，Divi 使用 JavaScript 并使用 CSS 通过样式属性将这些更改添加到您的 padding-top 和 top 值。 问题是浏览器在 JavaScript 之前渲染 CSS，而这种加载时间的延迟会产生跳跃的标题错觉。

要修复 Divi 中的跳跃标头，您需要找到 padding-top 和 top 值并检查使用 Javascript 注入的填充。 然后，只需将它们添加到您的样式表中。 让我们来看看如何做到这一点。

如何修复 Divi 中的跳头？

解决 Divi 中的跳头问题的最佳方法是通过style.css文件或 WordPress 定制器手动提及 padding-top 和其他一些 CSS 类值。 让我们一步一步来看看如何做到这一点。

注意：为避免在您的站点上造成任何问题，我们建议您首先在暂存模式下测试这些更改。 一些 WordPress 托管公司默认有一个暂存环境，但如果您的托管服务提供商没有，您也可以创建一个本地暂存环境。

第 1 步：检查

首先，在浏览器中打开您的网站并在您的标题上运行检查工具。 只需将鼠标放在标题上，右键单击，然后选择检查元素（或简单地在其他浏览器中检查）。

在 Inspector 选项卡中，查找 2 个 CSS 值。

• 填充顶部
• 最佳

正如您在我们的示例中看到的那样，padding-top 是80 px ，top 是32 px 。 这些尺寸是由服务器自动生成的，所以我们需要在我们网站的style.css文件中提及它们。

第 2 步：将 CSS 添加到 Divi

修复 Divi 中的跳转标题问题的下一步是将 CSS 代码添加到您的主题中。 只需复制以下 CSS 代码。

 #页面容器{
填充顶部：80px；
}

#主标题{
顶部：32px；
}

这些是我们网站的值，但您的网站可能会有所不同，因此请记住相应地替换这些值。 现在，您需要将此代码添加到您的站点。 有 3 种方法可以做到这一点：

1. 使用 Divi 主题编辑器
2. 来自 WordPress 定制器
3. 使用代码片段

方法一：Divi 主题编辑器

Divi 主题带有一个内置的主题编辑器，您可以在Divi > Theme Options > Custom CSS下找到它。

到达那里后，粘贴您刚刚复制的代码并保存更改。

而已！ 你的跳头应该是固定的！

方法 2：WordPress 定制器 - 附加 CSS

第二个选项是使用 WordPress 定制器。 在您的 WordPress 仪表板中，转到外观 > 自定义。 然后，转到Additional CSS部分并粘贴您在上一步中复制的 CSS 代码。

之后，发布更改，就是这样！

方法 3：代码片段

如果您不喜欢直接将代码添加到主题文件中，您可以使用 Code Snippets，这是一种将 HTML、PHP、CSS 和 JavaScript 代码片段添加到您的站点的出色工具。

首先，在您的WordPress 仪表板中，转到Plugins > Add New并查找Code Snippets 。 在您的网站上安装并激活它。

激活插件后，您将在 WordPress 管理部分看到插件的设置。

代码片段允许您添加或编辑您网站上的现有代码。 对于这个演示，我们将编辑现有的 CSS 片段。 默认情况下，该插件带有一个可以激活的虚拟 CSS 片段。

只需单击片段即可对其进行编辑。 然后重命名它并添加您在上一步中复制的 CSS 代码。

之后，只需保存修改，您就可以开始了。

第 3 步：清除缓存

在您的网站上应用更改后，您需要清除缓存。 市场上有许多 WordPress 缓存插件。 如果您不确定要使用哪一个，请从此列表中选择您最喜欢的。

安装并激活您选择的缓存插件后，您需要清除缓存。 例如，我们正在使用 WP Fastest Cache，因此在我们的 WordPress 仪表板中，我们只需转到插件的设置并按一个按钮即可清除整个 WordPress 网站缓存。

而已！ 现在您在 Divi 中的标题不会再跳了。

结论

总而言之，Divi中的跳头问题非常普遍。 好消息是它也很容易解决。 在本指南中，我们向您展示了如何通过在您的 WordPress 安装中添加几行 CSS 代码来解决此问题。 有 3 种不同的方法可以做到这一点：

• 将代码添加到 WordPress 主题的 style.css 文件中
• 使用 WordPress 定制器添加代码
• 使用代码片段

所有这些方法都将解决跳头问题，因此请选择最适合您的方法。 此外，如果在添加 CSS 代码后您的标头仍然跳转，请记住清除您的缓存（本地、浏览器和 DNS 缓存）。 您还可以从另一台计算机或使用隐身模式访问您的站点。

有关 Divi 的更多教程，请查看以下指南：

• 如何使任何 Divi 元素具有粘性
• Divi 联系表不起作用：如何解决
• 如何修复 Divi 超时错误

最后，我们希望这篇文章对您有所帮助。 如果你这样做了，请在社交媒体上分享这篇文章。 您在使用 Divi 时遇到过任何问题吗？ 您在遵循本指南时遇到任何问题吗？ 在下面的评论部分让我们知道。