Astra 主題菜單設(shè)置詳解:從基礎(chǔ)到超級菜單的全面指南(04)

在之前的文章中,我們詳細(xì)探討了 Astra 主題付費版與模板導(dǎo)入的區(qū)別。本期文章,我們將深入解析 Astra 主題的菜單設(shè)置。對于每一個網(wǎng)站來說,菜單都是至關(guān)重要的導(dǎo)航工具,不僅決定了用戶的瀏覽體驗,還直接影響到網(wǎng)站的整體布局和美觀度。通過 Astra 主題的強大功能,你可以輕松設(shè)置出既美觀又實用的超級菜單,提升你的網(wǎng)站質(zhì)感和用戶體驗。

在之前的各類主題我們都講述了菜單,菜單的設(shè)置都是差不多的,就一個添加的page(頁面),第二個是自定義鏈接,第三個則是你想加入比如產(chǎn)品的分類或者其他項目

步驟:網(wǎng)站后端→Appearance→Menus

圖片[1]-Astra 主題菜單設(shè)置詳解:從基礎(chǔ)到超級菜單的全面指南(04)-光子波動網(wǎng) | 專業(yè)WordPress修復(fù)服務(wù),全球范圍,快速響應(yīng)

為什么頁面顯示Elementor,因為是顯示這個頁面是有Elementor編輯的,沒有顯示的則為默認(rèn)編輯器

圖片[2]-Astra 主題菜單設(shè)置詳解:從基礎(chǔ)到超級菜單的全面指南(04)-光子波動網(wǎng) | 專業(yè)WordPress修復(fù)服務(wù),全球范圍,快速響應(yīng)
圖片[3]-Astra 主題菜單設(shè)置詳解:從基礎(chǔ)到超級菜單的全面指南(04)-光子波動網(wǎng) | 專業(yè)WordPress修復(fù)服務(wù),全球范圍,快速響應(yīng)

還有些頁面會顯示page,這就是設(shè)定的主頁面,比如主頁(home),博客(blog),商店(shop),購物車(cart),結(jié)賬(checkout)

圖片[4]-Astra 主題菜單設(shè)置詳解:從基礎(chǔ)到超級菜單的全面指南(04)-光子波動網(wǎng) | 專業(yè)WordPress修復(fù)服務(wù),全球范圍,快速響應(yīng)

如果你不想顯示的這么單一,想要更美觀更獨特的效果,如下圖

圖片[5]-Astra 主題菜單設(shè)置詳解:從基礎(chǔ)到超級菜單的全面指南(04)-光子波動網(wǎng) | 專業(yè)WordPress修復(fù)服務(wù),全球范圍,快速響應(yīng)
圖片[6]-Astra 主題菜單設(shè)置詳解:從基礎(chǔ)到超級菜單的全面指南(04)-光子波動網(wǎng) | 專業(yè)WordPress修復(fù)服務(wù),全球范圍,快速響應(yīng)
圖片[7]-Astra 主題菜單設(shè)置詳解:從基礎(chǔ)到超級菜單的全面指南(04)-光子波動網(wǎng) | 專業(yè)WordPress修復(fù)服務(wù),全球范圍,快速響應(yīng)

各種各樣的效果,是不是比普通效果好多了,接下來我來教你怎么設(shè)置超級菜單

圖片[8]-Astra 主題菜單設(shè)置詳解:從基礎(chǔ)到超級菜單的全面指南(04)-光子波動網(wǎng) | 專業(yè)WordPress修復(fù)服務(wù),全球范圍,快速響應(yīng)

如上圖,我們在需要需要設(shè)置的二級菜單的主導(dǎo)航名稱下開啟超級菜單選項,鏈接可以設(shè)置為\或者#

圖片[9]-Astra 主題菜單設(shè)置詳解:從基礎(chǔ)到超級菜單的全面指南(04)-光子波動網(wǎng) | 專業(yè)WordPress修復(fù)服務(wù),全球范圍,快速響應(yīng)

如上圖,先打開這個超級菜單按鈕哦

圖片[10]-Astra 主題菜單設(shè)置詳解:從基礎(chǔ)到超級菜單的全面指南(04)-光子波動網(wǎng) | 專業(yè)WordPress修復(fù)服務(wù),全球范圍,快速響應(yīng)

然后選擇合適展示寬度,你可以選擇全屏寬度或者菜單寬度,和自定義寬度,非常的智能

圖片[11]-Astra 主題菜單設(shè)置詳解:從基礎(chǔ)到超級菜單的全面指南(04)-光子波動網(wǎng) | 專業(yè)WordPress修復(fù)服務(wù),全球范圍,快速響應(yīng)

然后你可以設(shè)置菜單背景的顏色,或者放入背景圖片,根據(jù)實際情況調(diào)整

圖片[12]-Astra 主題菜單設(shè)置詳解:從基礎(chǔ)到超級菜單的全面指南(04)-光子波動網(wǎng) | 專業(yè)WordPress修復(fù)服務(wù),全球范圍,快速響應(yīng)

當(dāng)然還有標(biāo)題和文本以及鏈接的顏色調(diào)整

圖片[13]-Astra 主題菜單設(shè)置詳解:從基礎(chǔ)到超級菜單的全面指南(04)-光子波動網(wǎng) | 專業(yè)WordPress修復(fù)服務(wù),全球范圍,快速響應(yīng)

最后點擊保持,你就完成了第一步

圖片[14]-Astra 主題菜單設(shè)置詳解:從基礎(chǔ)到超級菜單的全面指南(04)-光子波動網(wǎng) | 專業(yè)WordPress修復(fù)服務(wù),全球范圍,快速響應(yīng)

然后我們需要設(shè)置超級菜單的標(biāo)題,也就是第一個,你可以理解為標(biāo)題

圖片[15]-Astra 主題菜單設(shè)置詳解:從基礎(chǔ)到超級菜單的全面指南(04)-光子波動網(wǎng) | 專業(yè)WordPress修復(fù)服務(wù),全球范圍,快速響應(yīng)

然后鏈接地址\或者#,然后在點擊超級菜單

圖片[16]-Astra 主題菜單設(shè)置詳解:從基礎(chǔ)到超級菜單的全面指南(04)-光子波動網(wǎng) | 專業(yè)WordPress修復(fù)服務(wù),全球范圍,快速響應(yīng)

把他設(shè)置為標(biāo)題,這樣會比較好區(qū)分它和他的子項。同時禁用鏈接,如果有鏈接,則在前端鼠標(biāo)觸碰會有動態(tài)效果,如果只是展示的話,就禁用鏈接

圖片[17]-Astra 主題菜單設(shè)置詳解:從基礎(chǔ)到超級菜單的全面指南(04)-光子波動網(wǎng) | 專業(yè)WordPress修復(fù)服務(wù),全球范圍,快速響應(yīng)

還有一個分隔符的顏色,這人會更容易區(qū)分

圖片[18]-Astra 主題菜單設(shè)置詳解:從基礎(chǔ)到超級菜單的全面指南(04)-光子波動網(wǎng) | 專業(yè)WordPress修復(fù)服務(wù),全球范圍,快速響應(yīng)

當(dāng)然還有一種分隔符的設(shè)置方式,但超級菜單這種的會比較簡單,而且自適應(yīng)

圖片[19]-Astra 主題菜單設(shè)置詳解:從基礎(chǔ)到超級菜單的全面指南(04)-光子波動網(wǎng) | 專業(yè)WordPress修復(fù)服務(wù),全球范圍,快速響應(yīng)

如上圖,通過自定義鏈接的形式,但這種不好控制長度,所以這只是一種參考

圖片[20]-Astra 主題菜單設(shè)置詳解:從基礎(chǔ)到超級菜單的全面指南(04)-光子波動網(wǎng) | 專業(yè)WordPress修復(fù)服務(wù),全球范圍,快速響應(yīng)

然后它的子項目就正常添加就行了,無需在動超級菜單,是不是非常的簡單

我們講述另一種超級菜單的設(shè)置

圖片[21]-Astra 主題菜單設(shè)置詳解:從基礎(chǔ)到超級菜單的全面指南(04)-光子波動網(wǎng) | 專業(yè)WordPress修復(fù)服務(wù),全球范圍,快速響應(yīng)
圖片[22]-Astra 主題菜單設(shè)置詳解:從基礎(chǔ)到超級菜單的全面指南(04)-光子波動網(wǎng) | 專業(yè)WordPress修復(fù)服務(wù),全球范圍,快速響應(yīng)

我們看到前端的效果是不顯示標(biāo)題的,你看到可能會有疑問,其實就在超級菜單的哪里隱藏了標(biāo)題

圖片[23]-Astra 主題菜單設(shè)置詳解:從基礎(chǔ)到超級菜單的全面指南(04)-光子波動網(wǎng) | 專業(yè)WordPress修復(fù)服務(wù),全球范圍,快速響應(yīng)

如下圖,圖片則是在超級菜單的位置加入了圖片,其他都是一樣的

圖片[24]-Astra 主題菜單設(shè)置詳解:從基礎(chǔ)到超級菜單的全面指南(04)-光子波動網(wǎng) | 專業(yè)WordPress修復(fù)服務(wù),全球范圍,快速響應(yīng)

如下圖,我們需要一步步設(shè)置,才能選中圖片,否則是沒有的

圖片[25]-Astra 主題菜單設(shè)置詳解:從基礎(chǔ)到超級菜單的全面指南(04)-光子波動網(wǎng) | 專業(yè)WordPress修復(fù)服務(wù),全球范圍,快速響應(yīng)

總結(jié):
通過本篇文章的詳細(xì)講解,相信你已經(jīng)掌握了如何在 Astra 主題中設(shè)置超級菜單的方法。菜單的設(shè)計不僅僅是簡單的導(dǎo)航設(shè)置,更是提升用戶體驗和網(wǎng)站專業(yè)度的重要一環(huán)。下一期,我們將繼續(xù)探討 Astra 主題的更多功能,包括幻燈片和其他細(xì)節(jié)設(shè)置,幫助你打造更加出色的網(wǎng)站。


聯(lián)系我們
教程看不懂?聯(lián)系我們?yōu)槟赓M解答!免費助力個人,小企站點!
客服微信
客服微信
電話:020-2206-9892
QQ咨詢:1025174874
郵件:info@361sale.com
工作時間:周一至周五,9:30-18:30,節(jié)假日休息
? 轉(zhuǎn)載聲明
本文作者:Harry
THE END
喜歡就支持一下吧
點贊0 分享
評論 搶沙發(fā)

請登錄后發(fā)表評論

    暫無評論內(nèi)容