HTML5自助建站下怎么設(shè)置產(chǎn)品分類導(dǎo)航

當(dāng)我們的商城網(wǎng)站產(chǎn)品比較多的時(shí)候，為了讓用戶快速找到想要的分類，錨點(diǎn)定位已經(jīng)不夠用了，我們就需要為商城網(wǎng)站添加產(chǎn)品分類導(dǎo)航。像京東商城這樣的產(chǎn)品分類導(dǎo)航，借助建站寶盒V9，毫無(wú)代碼基礎(chǔ)的情況下也能做。

在京東的產(chǎn)品分類導(dǎo)航中，主要分為左側(cè)主欄目大類，右側(cè)擴(kuò)展二級(jí)欄目，再到詳細(xì)的類別分類三級(jí)欄目，右側(cè)還除了了品牌的廣告欄。對(duì)比建站寶盒V9模板網(wǎng)站的產(chǎn)品分類導(dǎo)航效果：

要做一個(gè)這樣的產(chǎn)品分類導(dǎo)航，其實(shí)很簡(jiǎn)單。小耐今天給大家分享幾個(gè)簡(jiǎn)單步驟，看一遍就能自己動(dòng)手做！

操作過(guò)程：

1、添加模塊>產(chǎn)品模塊>產(chǎn)品分類，這里有很多風(fēng)格可以選擇，小耐選擇第一種。

直接把模塊拖拽出來(lái)。大家拖出來(lái)的效果可能是只看到左側(cè)橙色部分，我們需要橫向和縱向拉伸，因?yàn)橄到y(tǒng)默認(rèn)模塊是縮略顯示，需要拉伸后才能看到整體效果。

2、雙擊模塊，在屬性框中可以看到勾選的產(chǎn)品分類，這些就是要在分類導(dǎo)航中顯示的內(nèi)容。

這里的設(shè)置需要在系統(tǒng)設(shè)置中的產(chǎn)品系統(tǒng)下進(jìn)行。

比如想在手機(jī)數(shù)碼主欄目下添加一個(gè)新二級(jí)欄目：品牌手機(jī)。選擇添加產(chǎn)品>添加分類，設(shè)置一個(gè)“品牌手機(jī)”分類，并把上級(jí)分類選為最頂級(jí)的“手機(jī)/運(yùn)營(yíng)商/數(shù)碼”。

品牌手機(jī)欄目下若要新增多個(gè)品牌分類，選擇添加產(chǎn)品>添加分類，設(shè)置一個(gè)“華為”分類，并把上級(jí)分類選為最頂級(jí)的“品牌手機(jī)”。

這時(shí)候可以順便把產(chǎn)品的具體信息補(bǔ)充完整，都是直接上傳圖片、添加文字的簡(jiǎn)單操作。

3、所有分類添加完成后，我們可以在產(chǎn)品管理>產(chǎn)品分類下查看我們已經(jīng)設(shè)置好的欄目。

回到網(wǎng)站編輯頁(yè)面，可以發(fā)現(xiàn)產(chǎn)品分類已經(jīng)自動(dòng)展現(xiàn)了新增的內(nèi)容。

4、這時(shí)候，如果不喜歡目前的展示風(fēng)格，可以直接在屬性框中切換樣式，已經(jīng)修改的產(chǎn)品分類不會(huì)改變。

5、下圖的橫向展示怎么設(shè)置呢？在屬性框中的類別屬性中開啟分類主菜單內(nèi)容顯示，可以添加8個(gè)選項(xiàng)。

小耐新增了三個(gè)，可以對(duì)選項(xiàng)設(shè)置頁(yè)面跳轉(zhuǎn)。刷新頁(yè)面預(yù)覽即可看到效果。

6、右側(cè)滾動(dòng)廣告欄怎么設(shè)置？同樣在屬性框的類別屬性中開啟右側(cè)廣告位。選擇自定義，自由上傳圖片，設(shè)置跳轉(zhuǎn)。

7、刷新后預(yù)覽即可顯示最終效果。

由于建站寶盒是H5響應(yīng)式建站，在電腦站頁(yè)面設(shè)置了分類導(dǎo)航后，手機(jī)站無(wú)需重復(fù)設(shè)置，預(yù)覽手機(jī)站的時(shí)候我們會(huì)看到這樣一個(gè)按鈕：

點(diǎn)擊后就是手機(jī)展示效果啦！

有沒(méi)有很簡(jiǎn)單？一遍不會(huì)，看多幾遍就能輕松設(shè)置啦！當(dāng)然，有用戶會(huì)覺(jué)得這樣的設(shè)置還是有點(diǎn)麻煩，但和一個(gè)個(gè)代碼敲出來(lái)相比，這已經(jīng)是對(duì)小白最友好的設(shè)置辦法了。想零基礎(chǔ)做出精美商城網(wǎng)站的，不妨試試建站寶盒V9。

免費(fèi)體驗(yàn)地址：http://www.www.testsystem.com.cn/special/v9special/index.php?s=yuqiuping

H5響應(yīng)式建站寶盒V9線上發(fā)布會(huì)火熱報(bào)名中，全程免費(fèi)還有互動(dòng)大獎(jiǎng)，想深入了解建站寶盒V9的你千萬(wàn)不要錯(cuò)過(guò)！報(bào)名：http://www.www.testsystem.com.cn/video/?s=yuqiuping