如何修復Divi中的跳躍標題？ （3種方法）

[ad_1]

Divi中的跳躍頭有問題嗎？ 您來對地方了。 在本指南中，我們將逐步向您展示3種方法，以輕鬆解決Divi中的跳躍標頭問題。

Divi Jumping頁眉

Divi在全球擁有數百萬用戶，是其中最受歡迎的WordPress主題之一。 它具有許多功能，可讓您隱藏標題，自定義WooCommerce產品頁面，甚至在「商店」頁面中包括「添加到購物車」按鈕。 但是，Divi也有一些常見問題。 我們已經了解了如何使用聯繫表單解決問題，今天我們將向您展示如何解決跳轉標題問題。

許多用戶在Divi中遇到標題問題，因此在本指南中，我們將介紹如何修復它。 在進入指南之前，讓我們了解此問題的原因以及發生的原因。

什麼是Divi跳躍頭？

有時，當您訪問某些使用Divi的網站時，您會注意到在頁面載入時，標題不在頂部。 相反，它會跳轉到頁面完全載入為止，這就是為什麼它被稱為Divi跳轉標題。

為什麼發生跳標頭？

Divi中的跳躍標頭是由於CSS和JavaScript之間的衝突而發生的。 當您使用定製程序將更改應用於網站時，Divi使用JavaScript並使用CSS通過樣式屬性將這些更改添加到padding-top和top值中。 問題在於，瀏覽器在JavaScript之前渲染CSS，並且載入時間的這種延遲會導致跳轉標頭錯覺。

要修復Divi中的跳躍標題，您需要找到padding-top和top值，並檢查使用Javascript注入的padding。 然後，只需將它們添加到樣式表中即可。 讓我們看看如何執行此操作。

如何修復Divi中的跳躍標題？

解決Divi中跳躍標頭問題的最佳方法是通過style.css文件或WordPress定製程序手動提及padding-top和其他一些CSS類值。 讓我們看看如何逐步執行此操作。

注意：為避免在您的站點上引起任何問題，我們建議您首先在登台模式下測試這些更改。 某些WordPress託管公司默認情況下具有暫存環境，但是如果您的主機沒有暫存環境，則還可以創建本地暫存環境。

步驟1：檢查

首先，在瀏覽器上打開您的網站，然後在標題上運行「檢查」工具。 只需將滑鼠放在標題上，單擊滑鼠右鍵，然後選擇Inspect元素（或在其他瀏覽器中只是Inspect）。

在「檢查器」選項卡中，查找2個CSS值。

如您在示例中所見，padding-top為80 px，頂部為32 px。 這些大小由伺服器自動生成，因此我們需要在我們網站的style.css文件中提及它們。

步驟2：將CSS添加到Divi

解決Divi中跳躍標頭問題的下一步是將CSS代碼添加到主題中。 只需複製以下CSS代碼。

＃page-container {padding-top：80px; }＃main-header {頂部：32px; }

這些是我們網站的值，但在您的網站上可能有所不同，因此請記住相應地替換這些值。 現在，您需要將此代碼添加到您的站點。 有3種方法可以做到這一點：

1. 使用Divi主題編輯器
2. 從WordPress定製器
3. 使用代碼段

方法1：Divi主題編輯器

Divi主題帶有一個內置主題編輯器，您可以在Divi>主題選項>自定義CSS下找到該編輯器。

到達之後，粘貼剛剛複製的代碼並保存更改。

而已！ 您的跳躍標題應該是固定的！

方法2：WordPress定製程序–其他CSS

第二個選項是使用WordPress定製程序。 在WordPress信息中心中，轉到外觀>自定義。 然後，轉到「其他CSS」部分，並粘貼在上一步中複製的CSS代碼。

之後，發布更改，僅此而已！

方法3：代碼段

如果您不滿意將代碼直接添加到主題文件中，可以使用 代碼段，這是將HTML，PHP，CSS和JavaScript代碼段添加到您的網站的出色工具。

首先，在WordPress信息中心中，轉到「插件」>「添加新項」，然後查找「代碼片段」。 安裝並在您的網站上激活它。

激活插件後，您將在WordPress管理部分中看到插件的設置。

代碼段允許您添加或編輯站點上的現有代碼。 對於此演示，我們將編輯現有的CSS代碼段。 默認情況下，此插件隨附一個虛擬CSS片段，您可以激活該片段。

只需單擊該片段即可對其進行編輯。 然後將其重命名並添加在上一步中複製的CSS代碼。

之後，只需保存修改，您就可以開始了。

步驟3：清除快取

在網站上應用更改後，您需要清除緩存。 市場上有許多WordPress緩存插件。 如果不確定要使用哪一個，請從此列表中選擇自己喜歡的。

安裝並激活您選擇的緩存插件後，您將需要清除緩存。 例如，我們使用的是WP Fastest Cache，因此在WordPress儀錶板中，我們只需轉到插件的設置，然後按一個按鈕即可清除整個WordPress網站緩存。

而已！ 現在，您在Divi中的標題將不再跳轉。

結論

總而言之，Divi中的跳躍標頭問題非常普遍。 好消息是解決起來也很簡單。 在本指南中，我們展示了如何通過在WordPress安裝中添加幾行CSS代碼來解決此問題。 您可以通過3種不同的方式執行此操作：

• 將代碼添加到WordPress主題的style.css文件中
• 使用WordPress定製程序添加代碼
• 使用代碼段

所有這些方法同樣可以解決跳轉標頭問題，因此請選擇最適合您的方法。 此外，如果在添加CSS代碼後標頭仍然跳轉，請記住清除緩存（本地，瀏覽器和DNS緩存）。 您還可以從另一台計算機或使用隱身模式訪問您的站點。

有關Divi的更多教程，請查看以下指南：

最後，我們希望本文對您有所幫助。 如果您這樣做，請在社交媒體上分享此信息。 您在Divi遇到任何問題嗎？ 遵循本指南是否有任何問題？ 在下面的評論部分讓我們知道。