200

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

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

當(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)手做!

 

操作過程:

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ù)碼主欄目下添加一個(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ī)展示效果啦!

 

 

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

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

 

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

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

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

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

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

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

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

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