200

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

時間: 2017-02-17 11:02:14   點(diǎn)擊數(shù): 31718   來源: 耐思智慧

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


 


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



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

 

操作過程:

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


直接把模塊拖拽出來。大家拖出來的效果可能是只看到左側(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ù)碼主欄目下添加一個新二級欄目:品牌手機(jī)。選擇添加產(chǎn)品>添加分類,設(shè)置一個“品牌手機(jī)”分類,并把上級分類選為最頂級的“手機(jī)/運(yùn)營商/數(shù)碼”。


 

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

 

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

 

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

 

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

 

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

 

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

 

 

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

 

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

 

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

 

 

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

 

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

 

 

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

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

 

H5響應(yīng)式建站寶盒V9線上發(fā)布會火熱報名中,全程免費(fèi)還有互動大獎,想深入了解建站寶盒V9的你千萬不要錯過!報名:http://www.xpj18992.com/video/?s=yuqiuping

上一篇:HTML5下如何讓網(wǎng)站logo實(shí)現(xiàn)自適應(yīng)? 下一篇:用建站寶盒V9在HTML5網(wǎng)頁中設(shè)置錨點(diǎn)定位的簡單方法

旗下網(wǎng)站:耐思智慧 - 淘域網(wǎng) - 我的400電話 - 中文域名:耐思尼克.cn 耐思尼克.top

耐思智慧 © 版權(quán)所有 Copyright © 2000-2024 IISP.COM,Inc. All rights reserved

備案號碼: 粵ICP備09063828號  公安備案號: 公安備案 粵公網(wǎng)安備 44049002000123號  域名注冊服務(wù)機(jī)構(gòu)許可:粵D3.1-20240003 CN域名代理自深圳萬維網(wǎng)

聲明:本網(wǎng)站中所使用到的其他各種版權(quán)內(nèi)容,包括但不限于文章、圖片、視頻、音頻、字體等內(nèi)容版權(quán)歸原作者所有,如權(quán)利所有人發(fā)現(xiàn),請及時告知,以便我們刪除版權(quán)內(nèi)容

本站程序界面、源代碼受相關(guān)法律保護(hù), 未經(jīng)授權(quán), 嚴(yán)禁使用; 耐思智慧 © 為我公司注冊商標(biāo), 未經(jīng)授權(quán), 嚴(yán)禁使用

法律顧問:珠海知名律師 廣東篤行律師事務(wù)所 夏天風(fēng) 律師