使用 Divi 的全角菜單模塊與常規菜單模塊
已發表: 2022-06-06任何網站經常被忽視但必不可少的部分是導航菜單。 導航是創造令人愉悅的用戶體驗的關鍵要素。 如果操作正確，菜單可以極大地改善用戶體驗，並使訪問者可以輕鬆瀏覽網站。
Divi 帶有 2 種不同類型的導航模塊； 全角菜單和常規菜單。 在本文中，我們將討論和演示 Divi 全角菜單模塊與常規菜單模塊之間的一些差異。 如果您曾經想知道為您的網站使用哪個模塊，希望本文能幫助您了解這些模塊的主要區別和用例。 我們還將為您提供逐步說明來自定義全角菜單和常規菜單模塊的設計。
讓我們開始吧！
搶先看
桌面：全角菜單模塊
桌面：常規菜單模塊
移動：全角菜單模塊
移動：常規菜單模塊
Divi 的全角菜單模塊和常規菜單模塊之間的主要區別
以下是全角菜單模塊和常規菜單模塊之間主要區別的概述。
常規與全寬部分容器
全角菜單模塊需要 Divi 中的全角部分。 因為該部分是全角的，所以您添加的任何模塊都將佔據頁面的整個寬度。 與常規菜單部分不同，您不能並排放置多個模塊。 如果您希望菜單跨越頁面的寬度並且不需要任何其他模塊，則全角菜單模塊非常有用。
常規菜單模塊需要 Divi 中的常規部分。 常規部分有許多不同的行佈局，您可以將任何佈局與常規菜單模塊一起使用。 這允許您使用其他行在菜單旁邊包含其他內容以創建更複雜的菜單欄。 由於 Divi 的許多行選項，您可以使用常規菜單模塊輕鬆地為您的菜單欄創建獨特的佈局。
內置寬度設置與編輯行容器
常規菜單和全角菜單之間的另一個關鍵區別是它們有不同的方式來編輯模塊的寬度和間距。
全角菜單模塊帶有一些用於編輯寬度的內置設置。 您可以使用“使菜單鏈接全角”選項使菜單文本全角。 這會將全角菜單模塊擴展到默認內容寬度之外。
要使用常規菜單模塊獲得類似的外觀，您需要改為編輯包含行的設置。 例如，編輯包含常規菜單的行的寬度、最大寬度和對齊方式，以將常規菜單模塊擴展到默認內容寬度之外。
使用 Divi 的全角菜單模塊與常規菜單模塊
你需要什麼開始
如果您想學習本教程，請安裝並激活 Divi 主題，並確保您的網站上有最新版本的 Divi。
現在，您可以開始了！
設計全角菜單模塊
向您的網站添加一個新頁面並為其命名，然後選擇使用 Divi Builder 選項。
對於本教程，我們將從頭開始構建設計，因此選擇“開始構建”選項。
當您第一次創建空白頁面時，它會預加載一個常規部分。 首先在常規部分下方添加一個全角部分。
然後，從頁面中刪除常規部分。
將全角菜單模塊添加到全角行。
為全寬菜單添加背景顏色。
- 背景：#4e7560
將徽標添加到全角菜單。
接下來，導航到“設計”選項卡下的“菜單文本”選項。
- 菜單字體：Poppins
- 菜單文字顏色：#FFFFFF
- 菜單文字大小：20px
接下來，導航到下拉菜單設置。
- 下拉菜單背景顏色：#FFFFFF
- 下拉菜單行顏色：#7EAD70
- 下拉菜單文本顏色：#000000
設置移動菜單背景和文本顏色。
- 移動菜單背景顏色：#FFFFFF
- 移動菜單文本顏色：#000000
接下來，更改漢堡菜單設置。
- 漢堡菜單圖標顏色：#FFFFFF
- 漢堡菜單圖標字體大小：40px
最後，添加一些頂部和底部填充。
- 上邊距：10px
- 填充底部：10px
現在您的全角菜單模塊已完成！
設計常規菜單模塊
向您的網站添加一個新頁面並為其命名，然後選擇使用 Divi Builder 選項。
選擇開始構建從頭開始構建。
該頁面預裝了一個空的常規部分。 在此部分中，添加背景顏色。
- 背景：#4e7560
接下來，刪除頂部和底部填充。
- 上邊距：0px
- 填充底部：0px
使用如下所示的佈局添加一個新行。
在行設置中，使列高相等。
- 均衡柱高：是
在高級選項卡下的主元素 CSS 設置中，添加以下自定義 CSS。
align-items:center;
在最左邊的列中添加一個文本模塊。 我們將使用它來顯示網站名稱，而不是上傳徽標。 這是常規菜單模塊的獨特優勢，因為您可以將其與其他模塊一起使用，以向菜單欄添加額外的元素。
- H1 文本：“Divi 博客”
在桌面上將文本對齊設置為左對齊。
- 文本對齊 - 桌面：左
將文本對齊設置為在平板電腦和移動設備上居中。
- 文本對齊 - 平板電腦：居中
- 文本對齊-移動：居中
接下來，導航到標題文本設置。
- 標題字體：Poppins
- 標題字體粗細：粗體
- 標題文字顏色：#FFFFFF
- 標題文字大小：40px
現在“Divi Blog”標題已經完成，讓我們將常規菜單模塊添加到中心列。
去除背景顏色。
- 背景：無
接下來，導航到設計選項卡。 在佈局下，將樣式更改為居中。
- 風格：居中
現在我們可以修改菜單文本樣式。
- 菜單字體：Poppins
- 菜單文字顏色：#FFFFFF
- 菜單文字大小：20px
修改下拉菜單樣式。
- 下拉菜單行顏色：#7EAD70
- 下拉菜單文本顏色：#000000
接下來，更改移動菜單設置。
- 移動菜單背景顏色：#FFFFFF
- 移動菜單文本顏色：#000000
最後，修改漢堡菜單設置。
- 漢堡菜單圖標顏色：#FFFFFF
- 漢堡菜單圖標字體大小：40px
這樣就完成了常規菜單模塊的樣式。 為了完成菜單設計，讓我們在右欄中添加一個號召性用語按鈕。 首先，添加按鈕模塊。
更改按鈕文本。
- 按鈕：“30 天免費試用”
將按鈕對齊設置為居中。
- 按鈕對齊方式：居中
將“為按鈕使用自定義樣式”設置為是並修改文本顏色。
- 為按鈕使用自定義樣式：是
- 按鈕文字顏色：#FFFFFF
設置按鈕背景。
- 按鈕背景：#7EAD70
將懸停時的按鈕背景設置為橙色。
- 懸停時的按鈕背景：#D19929
接下來，設置按鈕邊框寬度、半徑和字體。
- 按鈕邊框寬度：0px
- 按鈕邊框半徑：40px
- 按鈕字體：Poppins
最後，設置左右填充。
- 填充-左：30px
- 填充-右：30px
最後結果
現在讓我們看看我們的菜單模塊的最終結果。
桌面：全角菜單模塊
桌面：常規菜單模塊
移動：全角菜單模塊
移動：常規菜單模塊
最後的想法
希望本文能幫助您了解 Divi 全角菜單模塊和常規菜單模塊之間的一些主要區別。 兩者都非常容易定制，為您的網站創建美觀的菜單。 全角菜單模塊佔據頁面的寬度，並帶有用於修改和調整寬度的內置選項。 另一方面，常規菜單模塊可以與其他模塊一起使用，並且包含在一行中，可以調整寬度和其他大小選項。 您在您的網站上使用全角菜單模塊還是常規菜單模塊？ 我們很樂意在評論中收到您的來信！