自2013年7月天貓新旺鋪上線之后，就隨后發(fā)布天貓新旺鋪遷移公告，要求所有的天貓商家在2013年8月31日號之前，完成舊版天貓旺鋪升級到新版天貓旺鋪。8月15日后未升級的天貓商城，淘寶將強(qiáng)制升級店鋪后臺為新旺鋪后臺。意味著天貓店鋪在8月15日后，要想變動編輯店鋪，必須使用新版旺鋪了。這也就意味著天貓新旺鋪的時(shí)代到來了！

天貓新旺鋪的店鋪背景設(shè)置功能，在新旺鋪上有了新的突破。相對于之前的旺鋪拓展版的背景功能，它的設(shè)計(jì)更自由，除了首頁能添加背景外，還能自定義設(shè)計(jì)列表頁的背景哦。既然今天要跟大家分享天貓新旺鋪背景設(shè)置的—些小技巧，那么首先讓我們先來看看官方的基礎(chǔ)教程吧！

天貓新旺鋪支持不同頁面不同背景（除detail頁）

點(diǎn)擊“裝修”——“樣式編輯”——“背景設(shè)置”便可設(shè)置店鋪背景。

點(diǎn)擊”背景設(shè)置”——“頁頭設(shè)置”進(jìn)店招位置的背景設(shè)置。

兩種方式設(shè)置：選擇調(diào)色器或者選擇本地上傳一張圖片。

點(diǎn)擊“選擇要設(shè)置的頁面”——可以選擇不同頁面不同背景。“頁面設(shè)置”同“頁頭設(shè)置”。

除了以上這種最基礎(chǔ)的背景設(shè)置方式，還可以怎樣裝修我們的店鋪背景呢？或許有人會說其他的背景效果不會是要花錢買模板實(shí)現(xiàn)的吧！其實(shí)不然，下面就—起來看看，如何巧妙設(shè)置背景讓店鋪不再單調(diào)！

在開始介紹背景設(shè)置之前，我先向大家介紹一個(gè)天貓新旺鋪的功能：新旺鋪導(dǎo)航是可以更換顏色和式樣的喲！這里需要—些css的小技巧。這一功能和下面介紹的背景設(shè)置技巧密切相關(guān)哦！

進(jìn)入店鋪后臺，選擇導(dǎo)航處的“編輯”；

一、常規(guī)頁面背景設(shè)置，讓背景更清晰

一般情況下首頁背景由于設(shè)計(jì)師在做頁面時(shí)的設(shè)計(jì)需要，整體頁面背景在存儲時(shí)會比較大，所以在上傳時(shí)設(shè)置時(shí)就會被背景圖片200k的大小所限制，從而不得不降低背景圖片的像素顯示，直白的說就是背景會變模糊，圖片質(zhì)量變低。那么如何通過小技巧來解決這一問題呢？

首先就是和最初上傳背景時(shí)一樣的操作步驟，只是在圖片質(zhì)量和圖片大小上盡量保持高品質(zhì)，圖片大小最大可控制在3M以內(nèi)即可，即圖片可上傳至店鋪圖片空間便可。接著就是利用css小代碼來設(shè)定嘍，代碼如下：

body{background:url(http://img04.taobaocdn.com/123.jpg)no-repeat center top transparent;}

親們只需要進(jìn)入“店鋪后臺”選擇導(dǎo)航處的“編輯”，然后將這段代碼復(fù)制到“顯示設(shè)置”，再將編輯上傳的背景圖片地址替換上述代碼中的黃色區(qū)域（即代碼中括號內(nèi)部分）即可，最后確定保存發(fā)布。

利用這一方式上傳的頁面首屏的整體像素得以保證，對于首頁設(shè)計(jì)風(fēng)格較鮮明，色調(diào)較明艷的首屏來說，視覺效果可以得以更好的呈現(xiàn)表達(dá)。

二、長頁面背景設(shè)置，讓頁面整體化

當(dāng)遇到有專題活動或大型活動時(shí)，整體頁面效果要求會更高，頁面策劃內(nèi)容會增加很多，同時(shí)有些需要一些特殊全屏頁面效果，這時(shí)候這小代碼就要默默出現(xiàn)啦！

其操作步驟同上個(gè)頁面設(shè)置，只需上傳對應(yīng)頁面背景圖片，替換圖片鏈接即可。長背景設(shè)置代碼如下：（代碼同上個(gè)頁面代碼）

body{background:url(http://img04.taobaocdn.com/123.jpg)no-repeat center top transparent;}

利用這一方式上傳的頁面呈現(xiàn)效果更為整體，對于活動策劃及呈現(xiàn)來說都是非常有利的，對于專題活動而言，更能烘托活動氣氛，而不是原先那種簡簡單單的單一性的產(chǎn)品呈現(xiàn)方式，對于客戶而言也會是以種新風(fēng)格的體驗(yàn)。

三、固定背景設(shè)置，讓頁面更生動

固定背景應(yīng)用要是情況而定，在日常運(yùn)營中無特殊活動頁面需求或是大型活動時(shí)，可建議采用固定背景來做頁面呈現(xiàn)，—般常規(guī)活動時(shí)可通過固定背景來傳播呈現(xiàn)品牌調(diào)性及風(fēng)格等。

固定背景設(shè)置代碼如下：

body{background:url(http://img04.taobaocdn.com/123.jpg)fixed center repeaty;}

利用一方面這一方式上傳的頁面呈現(xiàn)效果更為生動，一方面視覺動態(tài)效果生動，會讓消費(fèi)者眼前一亮，區(qū)別于其他頁面狀態(tài)的固定樣式，另一方面還可以利用固定樣式傳播店鋪，通過各類二維碼引導(dǎo)傳播手機(jī)店鋪、微淘、微博等其他終端媒體等。

最后還是再來個(gè)溫馨提示：

1、固定背景圖片大小控制在1230px*815px以上尺寸哦！

2、對于常規(guī)首屏背景或長背景的切片，我遇到過很多背景錯(cuò)位的現(xiàn)象，—般情況下該類背景在常規(guī)方式切片處理后，還需要在背景上增加店鋪店招像素高度150px和天貓頁面頂部的像素高度113px（新改版天貓頁面樣式），所以要記得頁面背景切片完成后再增加263px的像素高度哦，切記！

背景切片注意點(diǎn)操作如下：定位選擇“下對齊”，高度數(shù)字出加263像素。

代碼設(shè)置操作如下：進(jìn)入店鋪后臺，選擇導(dǎo)航處的“編輯”，點(diǎn)擊“顯示設(shè)置”將代碼復(fù)制粘貼至框框內(nèi)，用背景圖片鏈接替換下圖中選中區(qū)域的圖片鏈接即可。

最新評論