如何使用 CSS 自定義 Divi 菜單

已發表: 2021-04-08

您是否使用 Divi 並想充分利用您的菜單？在本指南中，我們將向您展示如何使用 CSS 自定義 Divi 菜單，以從競爭對手中脫穎而出並改善您網站上的客戶體驗。

Divi 擁有超過 300 萬用戶，是市場上最受歡迎的頁面構建器之一。原因之一是它非常靈活，並帶有大量自定義選項，即使您是初學者，也可以讓您的網站具有專業的外觀。但是，要將您的網站設計提升到一個新的水平，您需要使用 CSS 腳本自定義設計。您可以編輯許多內容，但最重要的內容之一是導航菜單。

為什麼要編輯 Divi 菜單？

菜單導航欄是任何網站最重要的元素之一。它位於頁面頂部，因此它是用戶在加載頁面時看到的第一個元素。通常，該菜單出現在網站的所有頁面上，使其成為用戶看到最多的元素。

最重要的是，菜單的主要功能是為訪問者提供一種輕鬆導航和改善用戶體驗的方法。這就是為什麼組織良好且設計良好的導航菜單可以對您的業務產生重大影響的原因。

儘管 Divi 帶有許多工具來編輯菜單，但添加自定義代碼是最好的方法。但是，如果您不知道如何編碼，請不要擔心。在本教程中，我們將逐步向您展示如何使用 CSS 自定義 Divi 菜單。

如何使用 CSS 自定義 Divi 菜單

在本節中，我們將向您展示如何使用 CSS 編輯 Divi 菜單以充分利用它。您需要通過轉到外觀 > 自定義 > 附加 CSS將 CSS 腳本粘貼到 WordPress 定制器中。或者，您可以將它們粘貼到子主題的style.css文件中。

注意：開始之前：

備份：創建站點的完整備份
使用子主題：您可以按照本指南創建一個或使用這些插件中的任何一個

現在讓我們看看使用 CSS 腳本自定義 Divi 菜單的不同選項。

1）改變導航欄的背景顏色

Divi 為您提供了編輯菜單背景顏色的選項，但將其應用於整個標題。如果您只想更改導航欄的顏色，請使用以下腳本：

.et_menu_container{background-color:red;}

更改 Divi 菜單導航欄的顏色

2) 更改菜單字體

自定義 Divi 菜單的另一種方法是更改菜單字體。例如，這個 CSS 腳本會將菜單中所有元素的字體更改為 Lucida Console。這包括下拉菜單和菜單容器中顯示的任何其他內容。

.et_menu_container{font-family: Lucida Console, Courier, monospace;}

注意：字體系列是一組字體，如上例所示。 您也可以選擇一種字體，但首先，您必須將其上傳到您的 WordPress 安裝中。 要了解有關字體的更多信息，您可以查看以下鏈接：

如何將 Google 字體添加到 WordPress
更改 WordPress 中的字體
字體系列

3）更改懸停元素上的文本顏色

要在將鼠標懸停在元素上時更改文本的顏色，請使用以下代碼：

#top-menu li a:hover{ color:blue; }

當用戶將鼠標懸停在導航欄鏈接上時，這會將導航欄鏈接的顏色更改為藍色，但您可以調整代碼並使用十六進制代碼或 RGBA 格式將其更改為您想要的任何顏色。

4) 更改下拉菜單寬度

為確保 Divi 菜單的每個元素看起來都不錯，您可以調整下拉菜單的寬度。例如，要為下拉菜單提供 500 像素的寬度，請使用以下 CSS 腳本：

#top-menu > li > .sub-menu{ width:500px; }

5) 為 Divi 菜單導航欄添加背景圖片

除了小調整外，您還可以進行更徹底的更改。例如，假設您想通過將圖像顯示為導航欄的背景來使用 CSS 自定義 Divi 菜單。為此，只需複制並粘貼以下代碼：

.et_menu_container{
background-image:url('http://localhost/Sampler/wp-content/uploads/2020/10/gift4.png');
background-size:cover; }

將圖像添加到 Divi 背景菜單導航欄

請注意，我們使用的是以前上傳的圖像。只需上傳您自己的圖像並將圖像 URL 替換為您要使用的圖像。

或者，您也可以使用來自外部 URL 的圖像，但我們強烈建議您將圖像上傳到您網站的媒體庫。這樣，您可以確保您完全控製圖像，並且如果圖像所有者決定刪除它，則不會有丟失它的風險。

最後，請注意我們正在使用該屬性，以便圖像覆蓋整個可用空間。還有一些其他選項，例如重複、自動、包含等，因此請選擇您喜歡的選項。有關如何在您的網站上打印圖像的更複雜選項，請查看此網站。

如何將 CSS 應用於單個元素

上面的示例編輯菜單導航欄中的所有元素，但這不是使用 CSS 代碼自定義 Divi 菜單的唯一方法。您還可以將 CSS 腳本應用於單個元素。但是，在我們開始討論之前，讓我們更好地了解 CSS 的工作原理以及我們如何創建腳本。

CSS 單行稱為規則，由選擇器、屬性和值組成。

使用 CSS 自定義 Divi 菜單

由於屬性和值具有不言自明的名稱，我們將重點關注選擇器。

選擇器是指向被屬性和值修改的元素的代碼。選擇器可以引用多個或單個元素。

當我們不指定單個元素時，CSS 會將規則應用於它的所有“子”元素。這遵循聲明此行為的 CSS 的繼承原則。

將 CSS 應用於單個元素

要將 CSS 應用於單個元素，您需要使用瀏覽器控制台並為該元素選擇特定的選擇器。為此，請轉到要編輯的頁面並右鍵單擊或按 F12 打開瀏覽器控制台。

你會看到這樣的東西：

如何使用 CSS 自定義 Divi 菜單

那是很多代碼！不用擔心，它可能看起來讓人不知所措，但是一旦你習慣了它就很容易處理。

當您打開 HTML 標籤<body> 、 <header> 、 <div>並將鼠標懸停在它們上方時，您將看到這些元素是如何在您的網頁上突出顯示的。通過這種方式，您可以查看您指向的元素並獲取您需要在 CSS 代碼中使用的 HTML 類或 ID。

單擊要更改的元素，您將看到 CSS 選擇器

使用瀏覽器開發工具選擇 CSS 選擇器

要復制它，請右鍵單擊它並選擇複製 > CSS 選擇器。現在您已經復制了 CSS 選擇器，轉到您的 WordPress 儀表板，前往Customizer > Additional CSS並粘貼它：

#top-menu > li:nth-child(1)

該選擇器指向我們示例網站上的“主頁”鏈接，因此現在我們可以使用任何 CSS 屬性並將其僅應用於菜單的“主頁”鏈接。例如，要將背景顏色更改為紅色，您將使用如下內容：

#top-menu > li:nth-child(1){background-color:red;}

請注意， :nth-child(1)偽類告訴我們這是同一層次結構中的第一個 (1) 列表元素。

現在您知道如何使用瀏覽器檢查器複製選擇器，您可以將 CSS 樣式應用於網站的任何元素。

結論

總而言之，編輯站點菜單是改善站點導航和改善站點用戶體驗的絕佳方式。儘管 Divi 有幾個選項，但最好的方法是使用 CSS 腳本自定義 Divi 菜單。

在本教程中，我們已經看到了幾種逐步編輯菜單的方法，即使您沒有編碼技能，也可以幫助您將網站提升到一個新的水平。到目前為止，您應該知道如何：

更改菜單的背景顏色
修改字體
更改懸停元素上的文本顏色
更改下拉菜單的寬度
將背景圖像添加到菜單

此外，我們還了解瞭如何將 CSS 應用於單個元素、將圖標添加到菜單以及隱藏任何元素。我們建議您以這些腳本為基礎，嘗試並自定義它們以適應您的站點。

有關如何充分利用 Divi 的更多指南，請查看以下指南：

在 Divi 中自定義產品頁面
如何在 Divi 商店頁面中添加添加到購物車按鈕
如何在 Divi 中隱藏/刪除頁腳
Divi 聯繫表不起作用 - 如何修復它

您是否嘗試過使用 CSS 編輯網站的菜單？你改變了什麼？在下面的評論部分讓我們知道！

如何使用 CSS 自定義 Divi 菜單

為什麼要編輯 Divi 菜單？

如何使用 CSS 自定義 Divi 菜單

1）改變導航欄的背景顏色

2) 更改菜單字體

3）更改懸停元素上的文本顏色

4) 更改下拉菜單寬度

5) 為 Divi 菜單導航欄添加背景圖片

如何將 CSS 應用於單個元素

將 CSS 應用於單個元素

更多示例 CSS 腳本

向菜單元素添加圖標

使用 CSS 隱藏菜單的任何元素

結論