Divi 插件亮點：Divi MadMenu

Divi Madmenu 是 Divi 的第三方插件，它為 Divi Theme Builder 添加了新的菜單功能。 添加按鈕、Woocommerce 購物車、搜索選項並調整每個元素的位置。 為桌面、平板和手機設計獨立的菜單，並設置斷點。 將標題設置為固定並添加動畫。 每個元素都是可定制的。 在本文中，我們將看看 Divi Madmenu，看看它能做什麼。

帶有 Divi Theme Builder 的 Divi Madmenu

Divi Madmenu 專為與 Divi Theme Builder 配合使用而設計。 安裝插件後，轉到 Divi Theme Builder，單擊Add Global Header ，然後選擇Build Global Header以創建自定義標題。

您將看到一個名為 MadMenu 的新模塊添加到 Divi Builder。 這是您需要使用的唯一模塊，但如果您想添加更多功能，也可以使用其他模塊。

內容

該模塊顯示一個菜單並提供許多自定義選項。 Elements允許您啟用桌面和移動菜單、徽標、搜索、購物車和兩個按鈕等功能。 它們可以以不同的方式排列並獨立設計。

桌面菜單允許您選擇要顯示的菜單，設置斷點以確定何時更改為移動菜單，並設置子菜單動畫和持續時間。

移動菜單允許您為移動設備選擇不同的菜單，並添加選項以折疊子菜單、使父鏈接可點擊以及選擇手風琴模式。 它包括與桌面菜單相同的動畫選項。

移動菜單切換包括圖標和標籤選項，包括切換格式、關閉和打開的標籤以及標籤位置。

如果啟用徽標，您將看到一個選項，用於選擇徽標、提供鏈接 URL 並決定它是否會在同一窗口中打開。

如果啟用了搜索，您可以選擇圖標或圖像。

對於Cart ，您可以顯示圖標、內容或圖標和內容、選擇圖像或顯示徽標、選擇可見性選項、實時更新等。

按鈕 1和按鈕 2是獨立調整的，但它們具有相同的選項。 添加文本、圖標，選擇圖標位置、可見性、鏈接，然後選擇它的打開方式。 在上面的示例中，我向兩個按鈕添加了文本，並在第一個按鈕上添加了一個圖標。

設計

“設計”選項卡為文本、菜單項、桌面和移動菜單、桌面和移動子菜單、徽標、搜索、購物車、按鈕等添加了選項。 下面來看看其中的一些。

Layout General允許您選擇對齊方式。 將其設置為右側、左側、中心、周圍空間、中間空間和均勻空間。 選擇下拉方向並為桌面和移動設置菜單順序。 在這個例子中，我將對齊設置為右並將子菜單的下拉菜單直接設置為向上。

佈局元素可讓您控制菜單、徽標、搜索、購物車、按鈕 1 和按鈕 2 的對齊方式、寬度等。

每個元素都有一個文本設計選項，其中包括普通菜單和固定菜單的設置。 調整活動鏈接顏色、常規鏈接顏色、字體、字體粗細、大小、間距等。上面的例子是文本：桌面菜單。 我改變了顏色、字體大小和間距。

文本

這是文本：桌面子菜單。 我改變了顏色、字體大小，並使文本大寫。

這是文本：移動菜單切換。 它為打開和關閉文本提供文本自定義。 我改變了字體顏色並增加了大小和字母間距。

這是文本：移動菜單。 我改變了字體顏色並使文本大寫。

文本：移動子菜單控制下拉菜單的字體。 我改變了顏色，為每個單詞選擇了一個更大的第一個字母的大寫文本，增加了字體大小，並使文本居中。

文本：按鈕 1 和文本：按鈕 2具有相同的選項並獨立控制它們的按鈕。 我增加了兩個按鈕的字體大小並使按鈕 1 更大。 我也改變了它們的顏色。 對於按鈕 2，我選擇了不同的字體。

文本：購物車控制購物車內容文本的字體。 我更改了字體顏色，增加了大小，將字體設為斜體，使用波浪樣式為字體加下劃線，並更改了下劃線顏色。

菜單

桌面菜單項可讓您控制背景、邊距、填充、角、邊框、框陰影等。我更改了背景顏色、添加了邊距和填充以在菜單項之間添加空間、添加角、邊框和框陰影。

桌面子菜單項為您提供與菜單項相同的控制。 我改變了背景顏色，在每個項目的頂部添加了一個邊框，並添加了一個框陰影。

我喜歡每個項目都可以單獨設計。 我已經在主菜單、菜單項和搜索中添加了框陰影，並且我已經圓了它們的角。 我還更改了字體和背景的顏色。

這是我為我的測試站點創建的一個。 我添加了帶有框陰影、主菜單、搜索、購物車和兩個按鈕的徽標。 按鈕的樣式為白色背景和黑色邊框。 我還使用佈局中的顏色添加了底部邊框。

通過深入研究演示，我們可以更好地了解菜單可以做什麼。

Divi Madmenu 演示

該插件附帶 10 個 Madmenu 演示，您可以將其上傳到 Divi 庫。 一些演示在其文件夾中包含圖像。 您需要將它們上傳到媒體庫。

要在 Theme Builder 中使用演示，請單擊以構建全局標題。 單擊以插入一個部分，然後選擇從庫中添加。 現在您可以選擇任何要使用的演示。

使用演示作為起點來創建設計或只是添加您的徽標和菜單。 他們充分利用了背景顏色、徽標選項、搜索選項和 CTA 按鈕。 讓我們看看我的測試站點的一些演示。 它們包括針對台式機、平板電腦和手機接頭的不同設計。

演示 1

演示 1 使用站點標題、菜單和按鈕 1。菜單使用居中對齊。 子菜單包括帶有框陰影和邊框的樣式以分隔鏈接。 我將鼠標懸停在第二個鏈接上。

Mobile 增加了字體的大小，並為主菜單和子菜單使用了相同的樣式。 它還使用帶有打開和關閉按鈕圖標的文本，並用徽標替換站點的標題。

演示 2

演示 2 添加了一個標誌、一個帶有邊框的圓形圖標搜索、居中的菜單、購物車和按鈕。 兩個按鈕都顯示社交媒體徽標。 子菜單項的樣式與背景無關。

移動菜單將所有圖標居中，將菜單文本替換為打開的圖標，並為菜單添加淡藍色。

演示 3

演示 3 使用了有趣的按鈕。 按鈕 1 包含用於登錄或註冊的文本，它具有懸停效果，可在懸停時移除背景。 按鈕 2 使用畫線的心形圖像。

對於移動設備，打開/關閉按鈕包括圖標和圖標下方的文本。 按鈕的圖標使用 space-between 等距分佈在標題上。 該站點的標題被替換為向右移動的徽標。

演示 5

演示 5 使用 space-between 佈局並將按鈕顯示為 CTA。 兩個按鈕都使用不同顏色的背景來突出顯示。

移動菜單將按鈕放在最右側和最左側，並添加圖標。 帶有文本和圖標的徽標和打開/關閉按鈕位於中心。

演示 7

演示 7 將按鈕放在標題的兩側，菜單位於中心。 徽標位於站點名稱上方。 菜單包括帶有文本的打開和關閉圖標。 下拉菜單中的項目彼此分開，因此部分背景可以顯示出來。

移動版本將按鈕保留在原位，並用圖標替換文本。 該網站的標題也被刪除。

演示 8

演示 8 包括粗體黃色，左側有下拉菜單和標題，右側有按鈕菜單。 每個按鈕都包含圖形。

移動菜單將按鈕放在左側，將徽標和菜單圖標放在右側。

演示 10

演示 10 使用漸變作為背景，並在每個圖標後面放置一個較暗的背景。 按鈕包括文本和圖標。 下拉菜單中的每個鏈接彼此分開，活動鏈接更暗。 徽標位於左側。

移動菜單會刪除除搜索圖標之外的所有圖標。 菜單由打開/關閉圖標代替，徽標位於中央。 下拉菜單看起來相同。

購買 Divi Madmenu

Divi Madmenu 可以在 Divi Marketplace 中以每年 39 美元的價格購買，無限制使用以及一年的更新和支持。

結束的想法

Divi Theme Builder 的 Divi Madmenu 具有許多功能和自定義功能，可以輕鬆設計您可能需要的幾乎任何類型的標題。 設計選項卡中的大量調整起初可能會令人困惑，但它們使用起來很簡單，很快就會掌握控制什麼的竅門。 使用這兩個按鈕以及向搜索和購物車按鈕添加圖像和圖標打開了許多設計可能性。 如果您有興趣使用單個模塊創建有趣的菜單，Divi Madmenu 值得一看。

我們希望聽到您的意見。 你試過 Divi Madmenu 嗎？ 請在下面的評論中告訴我們您對此的看法。

精選圖片來自 venimo/shutterstock.com