如何使用Elementor的子菜單功能

在我們做外貿(mào)獨(dú)立站的過程中，往往需要在不同的位置增添更多的菜單功能，以實(shí)現(xiàn)我們網(wǎng)站內(nèi)頁之間的相互跳轉(zhuǎn)，讓網(wǎng)站各個(gè)頁面內(nèi)容之間的聯(lián)系更加緊密。但是在傳統(tǒng)觀念中，我們所熟知的網(wǎng)站菜單就是網(wǎng)頁頂部的主導(dǎo)航菜單。當(dāng)然有的同學(xué)會(huì)說，如果是為了頁面之間的跳轉(zhuǎn)，那用頁面內(nèi)的錨文本不就可以實(shí)現(xiàn)了嗎？

從某種角度上來說，頁面內(nèi)錨文本確實(shí)能夠?qū)崿F(xiàn)網(wǎng)站內(nèi)不同頁面之間的跳轉(zhuǎn)，但在具體的實(shí)現(xiàn)樣式上并沒有導(dǎo)航菜單豐富。為了解決這一問題，Elementor編輯器的開發(fā)團(tuán)隊(duì)專門設(shè)置了一項(xiàng)功能叫做“Nav Menu”。使用這個(gè)元素，我們可以在很大程度上按照自己的網(wǎng)頁設(shè)計(jì)思路對(duì)子導(dǎo)航菜單進(jìn)行個(gè)性化定制。接下來，Jack老師和同學(xué)們一起來認(rèn)真學(xué)習(xí)?如何使用Elementor的子菜單功能 。

第一步：將Elementor編輯器中的“Nav Menu”功能元素添加到內(nèi)容編輯版塊

如上圖所示，在箭頭1所指的地方找到“Nav Menu”功能元素，然后鼠標(biāo)左鍵按住不松開拖動(dòng)到箭頭2所指的內(nèi)容編輯版塊，直到內(nèi)容編輯版塊外邊界線由灰色虛線變成藍(lán)色虛線的時(shí)候再松開鼠標(biāo)左鍵，這時(shí)候我們才真正的將Nav Menu元素成功的添加到了內(nèi)容編輯區(qū)域，接下來就是對(duì)他的相關(guān)配置。

第二步：對(duì)Elementor編輯器中的“Nav Menu”功能元素進(jìn)行主體功能設(shè)置

2.1、“Menu”：指的是子菜單的內(nèi)容來源，它是一個(gè)下拉選項(xiàng)框，需要說明的是，這個(gè)下拉框中的菜單選項(xiàng)需要我們自己提前在wordpress的外觀中找到菜單，然后新建子菜單并對(duì)其命名，這樣才能出現(xiàn)在上圖的menu下拉框選項(xiàng)中

2.2、“Layout”：指的是子菜單的展現(xiàn)形式，有三種選擇，分別是Horizontal橫向分布、Vertical豎向分布和Dropdown點(diǎn)擊下拉菜單

2.3、“Align”：指的是子菜單的對(duì)齊方式，有左對(duì)齊、居中對(duì)齊、右對(duì)齊和拉伸分布，你也可以簡(jiǎn)單的理解為兩端對(duì)齊

2.4、“Pointer”：這個(gè)英文單詞的意思是指針，我們可以理解為當(dāng)鼠標(biāo)懸停到子菜單中的某一菜單項(xiàng)目上出現(xiàn)的效果，Elementor編輯器默認(rèn)給出了Underline、Overline、Doubleline、Framed、Background、text等多種預(yù)設(shè)效果，還是比較有意思的，同學(xué)們根據(jù)自己的需要進(jìn)行選擇！

2.5、“Anination”：指的是鼠標(biāo)懸停在菜單項(xiàng)目上的動(dòng)態(tài)效果，因?yàn)槭莿?dòng)態(tài)效果我沒法截圖給同學(xué)們觀看，只能同學(xué)們自己去研究和琢磨了，這個(gè)功能很有意思哦，千萬不要忽略！

2.6、“Submenu Indicator”：意思是子菜單指示器，不過這個(gè)功能我也沒有研究透徹，對(duì)其更改操作之后，子菜單并沒有發(fā)生什么明顯的變化

2.7、“Breakpoint”：意思是斷點(diǎn)，就是說在平板或者手機(jī)端觀看的時(shí)候，因?yàn)檫@兩者的顯示器寬度沒有pc端這么大，所以這里設(shè)置了一個(gè)斷點(diǎn)值，單顯示器屏幕寬度小于這個(gè)斷點(diǎn)值的時(shí)候，橫向一行顯示的子菜單就會(huì)變成橫向多行顯示的子菜單

2.8、“Full Width”：指的是斷點(diǎn)之后子菜單的菜單項(xiàng)目是否以整行寬度進(jìn)行顯示，一般情況下我是不建議整行顯示的

2.9、“Align”：就是對(duì)齊方式，有aside（居左）和center（居中）兩種選擇

2.10、“Toggle Button”：意思是開關(guān)按鈕，如果你選擇了none，那么子菜單就是從上到下排布，如果你選擇了hamburger，那么默認(rèn)情況下它是一個(gè)縮略圖標(biāo)，點(diǎn)擊之后就會(huì)彈出子菜單

2.11、“Toggle Align”：這里特指的是圖標(biāo)的顯示位置，是居左還是居中還是居右！注意要和上面的2.9項(xiàng)目Align有區(qū)別，上面的align指的是子菜單項(xiàng)目的對(duì)齊方式

第三步：對(duì)Elementor編輯器中的“Nav Menu”功能元素進(jìn)行樣式設(shè)置

3.1、“Dropdown”項(xiàng)目配置

首先Main Menu分為三大版塊：NORMAL/HOVER/ACTIVE 也就是正常顯示狀態(tài)、鼠標(biāo)懸停狀態(tài)和鼠標(biāo)點(diǎn)擊之后的狀態(tài)，這三部分主要針對(duì)的是子菜單文字顏色的修改。Pointer color指的是懸?；蛘呤髽?biāo)點(diǎn)擊之后，該行的子菜單背景顏色的變化

“Horizontal Padding”：指的是每一行的子菜單項(xiàng)目距離左邊開頭位置的距離

“Vertical Padding”：指的是每一行的子菜單項(xiàng)目距離自己這一行上下邊界線的距離

“Space Between”：指的是每一行子菜單與相鄰子菜單，行與行之間的距離

“Border Radius”：指的是每一行子菜單四個(gè)邊角的圓弧度，數(shù)值越大越圓潤(rùn)

我們要注意Elementor給出了這樣一段話：On desktop, this will affect the submenu. On mobile, this will affect the entire menu.翻譯過來就是：在桌面上，這將影響子菜單。在手機(jī)上，這將影響整個(gè)菜單。所以在配置的時(shí)候我們要相對(duì)仔細(xì)一些。

“NORMAL”、“HOVER”、“ACTIVE”這三者的設(shè)置都是一樣的，只有三個(gè)配置選項(xiàng)，分別是text color、 background 和排版

text color不僅更改了下拉子菜單的所有菜單項(xiàng)目文字顏色，而且連折疊菜單的項(xiàng)目圖標(biāo)都改變成了相同的顏色

background更改的是下拉菜單的子菜單項(xiàng)目每一行的顏色，但是在active中我們可以更改點(diǎn)擊之后的顯示背景顏色

邊框類型：只對(duì)整個(gè)下拉菜單的大外框進(jìn)行部署，也就是說不對(duì)子菜單每一行都有邊框，而是只有點(diǎn)開子菜單之后，子菜單的大外框才有邊框線

Border Radius：指的是在上面設(shè)置了邊框線之后，這個(gè)邊框線的4個(gè)之間變成圓弧角的角度

影子盒子：指的是整個(gè)子菜單下拉之后出現(xiàn)一個(gè)影子效果，讓下拉菜單更加的立體化

“Horizontal Padding”：指的是下拉菜單的子菜單項(xiàng)目的行內(nèi)間距，如果同學(xué)們?cè)谥斑x擇的是居中顯示，那么這里的操作是不會(huì)有任何變化的

“Vertical Padding”：指的是下拉菜單的子菜單每一行與相鄰行之間的間距

“Divider”：指的是分隔器，就是說下拉菜單打開后，每個(gè)菜單項(xiàng)目之間的分隔線

“Distance”：指的是下拉菜單中每個(gè)菜單項(xiàng)目之間的間隔距離

3.2、“Toggle Button”項(xiàng)目配置

這部分設(shè)置的對(duì)象就是下拉菜單的縮略圖標(biāo)，Normal和hover項(xiàng)目都有一個(gè)color和background color選項(xiàng)

color：指的是下拉菜單縮略圖標(biāo)中的三個(gè)橫線（默認(rèn)狀態(tài)下）的顏色

background color：指的是下拉菜單縮略圖的背景顏色

size：指的是下拉菜單縮略圖標(biāo)的尺寸大小

Border width：指的是縮略圖標(biāo)外邊框線的粗細(xì)

Border Radius：指的是縮略圖標(biāo)外邊框線4個(gè)直角的圓弧程度，數(shù)值越大越圓潤(rùn)，甚至我們可以將縮略圖標(biāo)變成圓形，只要將數(shù)值設(shè)置為50即可

好了，以上就是本章關(guān)于?如何使用Elementor的子菜單功能?的情報(bào)內(nèi)容，子菜單功能經(jīng)常被應(yīng)用于外貿(mào)建站的前端頁面設(shè)計(jì)中，能夠?yàn)槲覀儎?chuàng)建更多個(gè)性化的導(dǎo)航菜單。提升客戶在頁面的訪問效率和網(wǎng)站點(diǎn)擊深度，有助于我們做谷歌SEO優(yōu)化。

如果還有不理解的地方，請(qǐng)使用百度或者谷歌瀏覽器搜索關(guān)鍵詞--“Jack外貿(mào)建站”，排名首頁首位的就是我的網(wǎng)站，網(wǎng)站上有更多外貿(mào)建站、谷歌SEO優(yōu)化、外貿(mào)客戶開發(fā)等實(shí)操干貨內(nèi)容在等著你哦!