Divi 插件亮點：Divi Mobile

Divi Mobile 是 Divi 的第三方插件，可以輕鬆為 Divi 網站創建自定義移動菜單。 所有設置都可以在主題定制器中找到，因此您可以查看移動菜單設計的實時預覽。 這是一個易於使用的插件，它可以創建您可能需要的幾乎任何類型的菜單。 在這個 Divi 插件亮點中，我們將逐步介紹 Divi Mobile 的功能，以幫助您決定是否在 Divi 工具箱中需要它。

默認 Divi 移動菜單

為了進行比較，這裡是 Divi 的默認移動菜單。 菜單會自動更改以顯示漢堡菜單。 單擊菜單會顯示一個包含所有鏈接的下拉菜單。 這不能與標準菜單分開調整。

主題定制器

一個名為 Divi Mobile 的主題定制器中添加了一個新菜單。 它是深藍色和綠色文字，所以很突出。 所有調整都在此菜單中完成。 我正在使用財務顧問佈局包。

在移動視圖中，例如上面示例中的平板電腦視圖，菜單會自動設置為 Divi Mobile 默認設置。 它包括一個深藍色圓圈內的白色漢堡包菜單。 我將鼠標懸停在 Divi Mobile 菜單上，該菜單現在已交換顏色。

單擊漢堡菜單會打開菜單，該菜單從側面滑入並覆蓋屏幕的整個側面。 我已經在主題定制器中打開了菜單來顯示選項卡。 其他項目將根據您選擇的選項出現。 讓我們看看主要的調整。

菜單樣式和設置

菜單樣式和設置有多個用於選擇菜單的選項。 佈局選項包括從屏幕外部顯示的菜單（默認視圖）、從形狀展開和底部導航。 外部屏幕菜單樣式將打開的動畫和完全打開的樣式添加到菜單中。 三種佈局中的每一種都包括不同的選項。

上面的示例顯示了與前一個示例相同的菜單，但我為菜單樣式選擇了全屏。 預覽模式設置默認顯示的模式。 我喜歡這個，因為它使背景光。

從形狀擴展覆蓋從右上角開始的整個屏幕。 它也可以從頂部向下伸展。 這會在背景上添加圖標並將鏈接放置在背景之外，就像我在上面的示例中那樣。 您可以在另一個名為“圓形拉伸設置”的菜單中調整其他設置中的顏色和圖標。

底部導航在屏幕底部顯示圖標。 這在另一個名為底部導航設置的菜單中進行了調整。

通過調整斷點，您可以讓它在桌面上顯示移動菜單。

自定義標題

自定義標題可讓您完全控制標題。 第一部分是標題外觀。 添加一個新的標誌，調整其大小，調整背景顏色、陰影長度、模糊半徑、陰影顏色等。我在這個例子中添加了一個新標誌並更改了背景顏色。

下一部分是 Scroll 上的標題外觀。 將菜單設置為固定，調整高度、標誌大小、漢堡圖標位置和背景顏色。 我對這些設置中的每一個都進行了更改。

標題元素允許您將元素添加到標題並調整它們的位置、大小和顏色。 我已將徽標移至右側並將其設置為比正常情況略低（您可以將其設置為與標題或內容重疊的程度）。 我還添加了 WooCommerce 購物車，啟用了搜索圖標，將它們放在左側，將它們更改為紅色，並增加了它們的大小。

選擇漢堡菜單

選擇漢堡菜單為您提供了漢堡菜單圖標上的許多選項。 設置向右或向左，從三個圖標（三行、兩行或三點）中選擇，並選擇動畫樣式，並選擇動畫方向。 我把它放在左邊並選擇了兩行。

Burger Menu General 可讓您調整菜單高度，設置漢堡圖標與邊緣和頂部的距離，並調整其懸停不透明度。 在這個例子中，我已經改變了這些調整中的每一個。

漢堡菜單圖標調整讓您可以為關閉和打開位置調整漢堡圖標上線條或點的大小和顏色。 您還可以控制行高、邊框半徑和行間距。 這是關閉位置。 我已將線條的顏色設置為紅色。

我已將打開圖標的顏色設置為金色。

對於這一點，我將菜單圖標放在右側並選擇了三行。 我已經調整了三行的顏色、行高、邊框半徑和位置。

您還可以添加文本。 它使您可以完全控製文本，包括水平和垂直位置、字體大小、顏色和样式。 此示例包括帶有三個點的選項。

Burger Menu Background 和 Burger Menu Background Shadow 提供類似於 Divi 按鈕的設置。 它們包括顏色、寬度、高度、邊框半徑、陰影水平和垂直長度、模糊半徑和模糊顏色。 我已經調整了本示例中的大部分設置，使圖標成為方形而不是圓形。

注入佈局

Inject Layouts 允許您從 Divi 庫中選擇佈局以注入到標題的不同位置。 將佈局放置在菜單上方、菜單下方或移動自定義標題上方。

在本示例中，我添加了佈局包中的部分，用於在菜單上方放置聯繫表單並在菜單下方放置聯繫信息。 我已將菜單設為全屏，以便更容易查看。

菜單外觀

菜單外觀讓您可以更改背景顏色、鏈接位置、字體大小、系列、顏色、懸停顏色、顯示的屏幕一側以及菜單區域的寬度。 我已將菜單移至左側，更改了背景，增加了字體大小，更改了鏈接出現位置的頂部位置並將鏈接居中。

對於這個，我縮小了菜單區域，提高了鏈接，右對齊鏈接，並調整了字體懸停顏色。

在這個中，我將菜單移回右側，使其更寬，文本左對齊，更改顏色，並在菜單下方注入了一個聯繫表單。

子菜單外觀

有多種顯示子菜單的樣式。 這是折疊嵌套樣式。 我保留了默認設置。 您還可以調整外觀、移除邊框和更改圖標。

這是重疊滑入。 你可以調整字體大小、顏色、高度、懸停顏色、內容區域等。我已經在這個例子中調整了大部分設置。

這是子菜單樣式並排。 它放置一個箭頭圖標，指向子菜單項。 您可以調整打開和關閉圖標的高度、位置、顏色等。 我已經調整了打開圖標的設置。

停止堆疊

注入佈局的問題之一是模塊會堆疊。 Divi Mobile 包含一個 Divi 模塊，您可以將其添加到佈局中，以防止其堆疊。 上面的示例是具有堆疊元素的佈局。

只需將模塊添加到行中。 不需要其他任何東西。

列不再堆疊。 根據您的佈局，您可能需要調整菜單的寬度以使所有內容都適合您想要的方式。 它也適用於其他菜單佈局和設計。 這是製作大型菜單的好方法。

購買地點

Divi Mobile 可從開發人員的網站獲得。 有多種許可證可供選擇：

年度的

• 1 個站點 12 英鎊
• 2 – 5 個站點 36 英鎊
• 無限£64

壽命

• 1 個站點 40 英鎊
• 無限£196

它包括 1 年的支持。 只要許可證在您的網站上激活，您就會獲得更新。

結束的想法

這就是我們對 Divi Mobile 插件的看法。 這是用於設計移動菜單的出色插件。 我只是觸及了它可以做的事情的表面。 它易於使用，並有很多調整可供選擇。 我喜歡它使用主題定制器來實時查看更改。

有幾次我不得不保存並重新加載頁面才能看到更改，但這可能是我的服務器。 我想看到一個默認的重置按鈕，這樣你就可以像使用標準的 Divi 控件一樣輕鬆地恢復到默認設置。 不過，這可能不需要。

我對 Divi Mobile 的功能印象深刻。 如果您對創建自定義移動菜單的 Divi 插件感興趣，Divi Mobile 值得一看。

我們希望聽到您的意見。 您是否嘗試過 Divi Mobile？ 請在評論中告訴我們您對此的看法。

精選圖片來自 venimo/shutterstock.com