手機(jī)網(wǎng)站模板編輯設(shè)計(jì)完整教程

時(shí)間：2023-10-09 10:36:01 | 來(lái)源：網(wǎng)站運(yùn)營(yíng)

時(shí)間：2023-10-09 10:36:01 來(lái)源：網(wǎng)站運(yùn)營(yíng)

手機(jī)網(wǎng)站模板編輯設(shè)計(jì)完整教程：本節(jié)課程主要內(nèi)容：手機(jī)站首頁(yè)講解、會(huì)員中心設(shè)置、產(chǎn)品頁(yè)面設(shè)計(jì)說(shuō)明、文章頁(yè)面設(shè)計(jì)說(shuō)明、空白頁(yè)設(shè)計(jì)說(shuō)明。

一、在手機(jī)網(wǎng)站后臺(tái)設(shè)計(jì)頁(yè)面

• 左側(cè)部分可以添加欄目，修改名稱，添加素材和模塊。
• 中間對(duì)不同欄目頁(yè)面進(jìn)行設(shè)計(jì)具體操作。
  
• 右側(cè)部分可以設(shè)置編輯欄目頁(yè)面的風(fēng)格背景，控件（底部菜單）等。
  

手機(jī)站后臺(tái)工作區(qū)說(shuō)明

手機(jī)站后臺(tái)設(shè)計(jì)頁(yè)面分為三部分：左側(cè)部分：欄目添加修改、模塊、中間部分：欄目頁(yè)面的編輯區(qū)域、右側(cè)風(fēng)格控件。


設(shè)計(jì)頁(yè)面左側(cè)部分-頁(yè)面







設(shè)計(jì)頁(yè)面左側(cè)部分-頁(yè)面-管理

創(chuàng)建好的欄目在哪查看？

查看創(chuàng)建好的欄目，在設(shè)計(jì)頁(yè)面可以從以下地方查看：


第一個(gè)查看的地方：左側(cè)欄目，點(diǎn)擊進(jìn)入后在欄目管理中查看，如左圖中的1。

第二個(gè)查看的地方：點(diǎn)擊“添加頁(yè)面”后面的“管理”，進(jìn)入后查看創(chuàng)建好的欄目。如左圖中的2。

設(shè)計(jì)頁(yè)面左側(cè)部分-頁(yè)面-管理

• 添加欄目。
• 上傳欄目圖標(biāo)。
• 對(duì)欄目名稱進(jìn)行重命名。
• 查看欄目類型。
• 設(shè)置欄目顯示或隱藏狀態(tài)。
• 修改商品，多級(jí)文章欄目的樣式。
• 對(duì)欄目進(jìn)行排序。
• 刪除欄目。

回收站恢復(fù)刪除的欄目或是徹底刪除欄目。

設(shè)計(jì)頁(yè)面左側(cè)部分-素材

我的

“我的”是由自己設(shè)計(jì)的模塊生成的。生成自己的模塊后，這個(gè)模塊可以自由放到其他頁(yè)面。


系統(tǒng)素材

“我的”后面的這些內(nèi)容都是系統(tǒng)做好的素材，您可以直接調(diào)用，調(diào)用后替換為您自己的內(nèi)容即可。













設(shè)計(jì)頁(yè)面左側(cè)部分-模塊

模塊分為常用、列表、營(yíng)銷、組件和高級(jí)模塊。


模塊添加：點(diǎn)擊模塊中的模塊，模塊會(huì)自動(dòng)顯示在中間編輯區(qū)域中。然后在中間區(qū)域點(diǎn)擊模塊進(jìn)行內(nèi)容添加，樣式設(shè)計(jì)等。


模塊編輯設(shè)計(jì)：點(diǎn)擊模塊，模塊上面會(huì)出現(xiàn)多個(gè)小圖標(biāo)，點(diǎn)擊小圖標(biāo)進(jìn)行對(duì)應(yīng)的操作即可。


注：網(wǎng)站頁(yè)頭和系統(tǒng)搜索模塊不可以同時(shí)添加哦！


設(shè)計(jì)頁(yè)面左側(cè)部分-模塊-導(dǎo)航

• 導(dǎo)航欄的編輯中可以創(chuàng)建欄目，查看創(chuàng)建好的欄目，及欄目回收站操作。
• 導(dǎo)航欄模塊的樣式設(shè)計(jì)中可以修改導(dǎo)航欄的樣式：橫向?qū)Ш交蚴歉?dòng)導(dǎo)航。
  

怎么把導(dǎo)航欄設(shè)置為橫向的或是浮動(dòng)的？導(dǎo)航樣式中可以設(shè)置導(dǎo)航為浮動(dòng)或是橫向。




設(shè)計(jì)頁(yè)面左側(cè)部分-模塊-自由容器







使用自由容器模塊后可以做出右側(cè)的效果

容器中僅可以添加文本、圖片和按鈕模塊。容器中的文字，圖片，按鈕可以獨(dú)立移動(dòng)。

設(shè)計(jì)頁(yè)面左側(cè)部分-模塊-標(biāo)簽容器

設(shè)計(jì)頁(yè)面左側(cè)部分-模塊-滾動(dòng)圖標(biāo)

• 滾動(dòng)圖標(biāo)模塊可以設(shè)置多頁(yè)并支持一行顯示幾個(gè)，顯示幾行。
• 需手動(dòng)翻到第二頁(yè)及后面查看。暫時(shí)不支持自動(dòng)滾動(dòng)。
  

設(shè)計(jì)頁(yè)面左側(cè)部分-模塊-短視頻

• 一個(gè)頁(yè)面可以添加多個(gè)短視頻模塊。
• 短視頻是需要在商家助手app中上傳，網(wǎng)站后臺(tái)視頻模塊調(diào)用商家助手中的短視頻。
• 支持“手動(dòng)選擇短視頻”和“根據(jù)規(guī)則調(diào)用”兩種方式調(diào)取短視頻內(nèi)容。
• 可將短視頻模塊自定義添加到支持設(shè)計(jì)的網(wǎng)站頁(yè)面內(nèi)。

圖一為短視頻模塊的大圖展示效果。圖二為短視頻模塊的瀑布流展示效果。

設(shè)計(jì)頁(yè)面中間編輯區(qū)域




模塊添加：點(diǎn)擊模塊，模塊會(huì)自動(dòng)顯示在中間編輯區(qū)域中。然后在中間區(qū)域點(diǎn)擊模塊進(jìn)行內(nèi)容添加，樣式設(shè)計(jì)等。

模塊編輯設(shè)計(jì)：點(diǎn)擊模塊，模塊上面會(huì)出現(xiàn)多個(gè)小圖標(biāo)。點(diǎn)擊小圖標(biāo)進(jìn)行對(duì)應(yīng)的操作即可。


設(shè)計(jì)頁(yè)面右側(cè)控件






設(shè)計(jì)頁(yè)面右側(cè)控件-風(fēng)格

• 可以對(duì)當(dāng)前打開(kāi)的欄目頁(yè)面進(jìn)行整個(gè)頁(yè)面背景色或是背景圖片設(shè)置。
• 可以設(shè)置網(wǎng)站模板的色系。
  

設(shè)計(jì)頁(yè)面左側(cè)部分-右側(cè)控件部分-底部菜單

• 底部菜單最多顯示5個(gè)。
• 最多支持5個(gè)自定義底部菜單。
• 可以對(duì)底部菜單進(jìn)行名稱重命名、位置移動(dòng)、圖標(biāo)上傳等。
• 設(shè)置浮動(dòng)菜單是否在內(nèi)容顯示。

注意：底部菜單重命名時(shí)名稱需要跟這個(gè)菜單的功能一致。避免不一致，誤導(dǎo)用戶使用。

想要點(diǎn)擊底部菜單進(jìn)入的頁(yè)面如左側(cè)圖那樣顯示，怎么設(shè)置呢？






操作方法：

1、在底部菜單點(diǎn)擊添加，創(chuàng)建一個(gè)自定義鏈接欄目，鏈接到產(chǎn)品欄目。

2、創(chuàng)建好的底部菜單設(shè)置為顯示。

3、鏈接的產(chǎn)品欄目列表展示效果設(shè)置為抽屜型的。




設(shè)計(jì)頁(yè)面左側(cè)部分-右側(cè)控件部分-底部菜單-分類

點(diǎn)擊底部菜單“分類”后面的編輯圖標(biāo)進(jìn)入分類設(shè)置頁(yè)面。




分類頁(yè)面不顯示產(chǎn)品，顯示的是產(chǎn)品欄目、產(chǎn)品欄目下的大類和小類。

標(biāo)簽管理中對(duì)欄目下的大類和小類進(jìn)行圖標(biāo)上傳、圖標(biāo)顏色修改和分類排序。

注：大類圖標(biāo)僅支持風(fēng)格二顯示。

欄目設(shè)置中設(shè)置哪些產(chǎn)品欄目顯示在分類菜單中。

注意：當(dāng)欄目管理中產(chǎn)品欄目設(shè)置為不顯示時(shí)，分類菜單欄目設(shè)置為顯示時(shí)不起作用的。




設(shè)計(jì)頁(yè)面左側(cè)部分-右側(cè)控件部分-浮動(dòng)客服




高級(jí)設(shè)置中設(shè)置一級(jí)分類、二級(jí)分類、品牌及品牌圖標(biāo)的顯示與否。

設(shè)計(jì)頁(yè)面左側(cè)部分-右側(cè)控件部分-系統(tǒng)

• 可以設(shè)置浮動(dòng)客服的開(kāi)啟與不開(kāi)啟。
• 對(duì)浮動(dòng)客服添加內(nèi)容。
• 移動(dòng)客服的上下位置。
• 可以設(shè)置所顯示的內(nèi)頁(yè)。
• 客服和電話最多添加5個(gè)。

可以查看、下載手機(jī)站的二維碼。

注：當(dāng)網(wǎng)站沒(méi)有綁定自己的獨(dú)立域名時(shí)，不要把手機(jī)站二維碼宣傳使用，可以查看微信關(guān)注二維碼。


注：需網(wǎng)站對(duì)接認(rèn)證服務(wù)號(hào)。

二、會(huì)員中心設(shè)置

舊版會(huì)員中心，可以自助添加模塊，新版會(huì)員中心不支持設(shè)計(jì)，都是 系統(tǒng)默認(rèn)的樣式。







舊版會(huì)員中心頁(yè)面

系統(tǒng)默認(rèn)模塊設(shè)計(jì)調(diào)整：舊版會(huì)員中心頁(yè)面，點(diǎn)擊模塊，模塊上面會(huì)出現(xiàn)圖標(biāo)，可以進(jìn)行簡(jiǎn)單的設(shè)計(jì)調(diào)整。

自主添加模塊設(shè)計(jì)：舊版會(huì)員中心頁(yè)面，可以點(diǎn)擊頁(yè)面左側(cè)部分的模塊，點(diǎn)擊模塊添加到會(huì)員中心頁(yè)面。從而實(shí)現(xiàn)自主設(shè)計(jì)。













點(diǎn)擊會(huì)員模塊的編輯圖標(biāo)，進(jìn)入后可以設(shè)置背景圖、設(shè)置顯示參數(shù)。




新版會(huì)員中心

新版會(huì)員中心頁(yè)面效果不支持設(shè)計(jì)。

功能組件顯示個(gè)數(shù)及內(nèi)容，可以在網(wǎng)站后臺(tái)設(shè)計(jì)。

• 點(diǎn)擊添加后，可以自定義添加功能組件項(xiàng)目。
• 功能名稱，圖標(biāo)，鏈接都是必填項(xiàng)。
• 鏈接可以添加外鏈，也可以是內(nèi)鏈，外鏈需是http開(kāi)頭。

三、產(chǎn)品頁(yè)面設(shè)計(jì)說(shuō)明

點(diǎn)擊此圖標(biāo)，可以切換產(chǎn)品列表頁(yè)面的展示樣式。

點(diǎn)擊樣式設(shè)計(jì)，可以設(shè)置這三個(gè)圖標(biāo)隱藏。

• 點(diǎn)擊此圖標(biāo)進(jìn)入后可以選擇不同的展示效果及高級(jí)設(shè)置。
• 產(chǎn)品列表頁(yè)面的抽屜效果就是在此設(shè)置。

在產(chǎn)品欄目頁(yè)面編輯區(qū)域，可以點(diǎn)擊模塊，選擇任意模塊添加到頁(yè)面中，設(shè)置自己想要的頁(yè)面效果。

注意：手機(jī)站的產(chǎn)品詳情頁(yè)面是不支持自主設(shè)計(jì)，是系統(tǒng)默認(rèn)的效果。

四、文章頁(yè)面設(shè)計(jì)說(shuō)明

多級(jí)文章頁(yè)面設(shè)計(jì)說(shuō)明

樣式設(shè)計(jì)中隱藏右上角的會(huì)員中心和分享。

點(diǎn)此進(jìn)入設(shè)置文字列表內(nèi)容的展示效果及數(shù)據(jù)加載方式。

左側(cè)素材和模塊下的內(nèi)容都可以添加到文字列表頁(yè)面進(jìn)行自主設(shè)計(jì)。

注意：手機(jī)站的文章詳情頁(yè)面是不支持自主設(shè)計(jì)，是系統(tǒng)默認(rèn)的效果。

無(wú)分類文章頁(yè)面設(shè)計(jì)說(shuō)明

• 點(diǎn)擊可以設(shè)置會(huì)員中心你和分享隱藏。
• 點(diǎn)此圖標(biāo)，進(jìn)入后可以此頁(yè)面列表項(xiàng)的背景，文字等。
• 無(wú)分類文章列表頁(yè)面也可以使用系統(tǒng)模塊自主搭建。

五、空白頁(yè)頁(yè)面設(shè)計(jì)說(shuō)明

空白頁(yè)設(shè)計(jì)跟首頁(yè)設(shè)計(jì)是一樣的，都是使用系統(tǒng)模塊自主設(shè)計(jì)。空白頁(yè)是手機(jī)站唯一支持復(fù)制的欄目，空白頁(yè)右上角的分享是無(wú)法隱藏的。

來(lái)源：鳴蟬建站