wordpress建站教程：DIVI主題超級菜單設置

繼續分享wordpress建站教程。之前幫一個客戶修改網站，她用的是DIVI主題，這個主題我之前只是聽過，雖然名氣挺大的，但我沒怎么用過。客戶的其中一個需求是修改超級菜單，但我在主題設置中沒找到，后來通過搜索找到了DIVI主題超級菜單的開啟和設置方法，不需要額外的插件。

步驟一：開啟DIVI超級菜單

進入wordpress建站后臺，打開Appearance>Menus。然后點開Screen Options，勾選CSS Classes。

接下來點開需要開啟超級菜單的菜單項目，在里面的CSS Classes(optional)里面填寫【mega-menu】即可開啟DIVI自帶的超級菜單功能。開啟之后，它下面的二級菜單會默認按4列顯示。

步驟二：調整DIVI超級菜單顯示列數

@media (min-width: 981px) {
#top-menu li.mega-menu>ul>li {
width: 20%;
}
 
#top-menu li.mega-menu>ul>li:nth-of-type(4n) {
clear: unset;
}
 
#top-menu li.mega-menu>ul>li:nth-of-type(4n+1) {
clear: unset;
}
}

如果需要修改DIVI超級菜單的列數，則可以通過上面的CSS代碼來修改，上面的【width: 20%】可以用來控制列數顯示，如果想顯示兩列，則修改為50%即可。代碼添加到【Divi主題選項>常規>自定義 CSS】中，然后保存即可生效。

最終修改的效果如上圖所示。

總結

悅然wordpress建站對DIVI主題不是太熟悉，不過主題的折騰步驟一般就那些，只要花些時間使用是沒什么問題的。個人使用下來感覺DIVI在國內使用可能有點水土不服，總是感覺比較卡，頁面編輯時有些控制菜單總是彈不出來，使用體驗不是很好，當然也可能是我不太會用。如果大家想學wordpress建站，想學習一款好用且通用的頁面編輯器，個人更建議去學elementor，后面有空我也會錄一些elementor的課程。