【Divi教學】如何製作WordPress網站選單&多排下拉選單

by

【Divi教學】如何製作WordPress網站選單&多排下拉選單

by

許多人會透過安裝「多層次選單」的外掛,來將數量過多、導致選單長度過長的子選單分成好幾排,但如果你使用的是Divi主題,Divi本身就已經有內建多層次選單的功能,而這篇文章除了會教你如何製作選單以外,還會教你如何不透過外掛,製作多層次的選單

建立選單

首先,開啟WordPress網站後台,點選外觀>選單,開始製作選單。

外觀>選單

接著,點擊「建立選單」。

Add menu

輸入「選單名稱」後,如果要指定選單顯示的位置,請勾選下方的「指定編輯中選單的顯示位置」:

  • Primary Menu:網站主要選單
  • Secondary Menu:第二選單(通常會顯示在網站最上方,又稱為頂邊欄)
  • Footer Menu:底邊欄(顯示於在網站最下方)

最後點選「建立選單」即可。

Type menu name and select menu position

現在,就可以透過左邊的「新增選單項目」,增加選單內的選項,可以新增「頁面、文章、自訂連結、分類」。

新增頁面連結

「頁面、文章、分類」這三種選項都是找到想加入的連結,勾選後點擊「新增至選單」,就會顯示在右邊的選單內容中。

Add page link

新增文章連結

Add post link

新增分類連結

Add category link

新增自訂連結

而自訂連結除了透過直接輸入「網址」及「連結文字」加入選單,若你想要加入一些「沒有連結」的選項到選單,可以在網址部分輸入「#」字號,就可以有一個空的選項了。

Add custom link

製作子選單

如果需要讓選單顯示第二層選單,只要使用滑鼠左鍵長按,向右邊移動,如以下圖示示範,「關於我們」的頁面,就會成為「首頁」的子選單囉。

Create child menu

製作多排下拉選單

回到外觀>選單內,我將子選單非常多的選單(左圖),利用空的自訂連結,整理成好幾個分類(右圖)。

將選單分層

接著,點選右上角的「顯示項目設定」,將「CSS類別」勾選起來,接著在每個選項打開時,就會出現一個新的欄位「CSS類別」。

Tick CSS code

請在需要顯示多層次選項的連結內,輸入「mega-menu」到CSS類別中,

Add mega-menu code to CSS blank

點選右下角「儲存選單」,回到網站頁面,就會看到已經成功分成好幾排的選單囉!

Menu finish

如果你對於這篇文章有任何疑問或者建議,都歡迎你在底下留言給我喔:)

本文作者 – LiLing

90後的台灣女生,目前正於紐西蘭擔任多媒體設計師,擅於利用Wordpress建立網站,分享各種不必使用程式語法,也可以架設網站的101種方法。

相關文章

👋

Hi, I’m LiLing

在紐西蘭任職多媒體設計師,擅於利用Wordpress建立網站,搭配Divi主題,分享各種不必使用程式語法,也可以設計網站的101種方法。

🙌

社團交流

歡迎你加入Divi使用者討論平台,有任何問題都歡迎在上面向我提問:)

👩🏻‍💻

免費領取Divi入門手冊

領取Divi新手設計入門手冊

0 Comments

Submit a Comment

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *