淘寶店鋪裝修對于每個新手賣家來說都是首要做的工作,一個裝修好的店鋪時間能更好吸引買家、提升顧客信賴感、甚至對寶貝轉化率都會有所影響,對我們做銷量是很大幫助的。
不知道是大家看到那些大店鋪里面的裝修是不是都特別羨慕那些到“高大上”的裝修,其實這些裝修樣式我們都是可以做到的,只是圖片的創(chuàng)意設計,沒有美工基礎的話就不是我們能夠設計好的,但是網(wǎng)上提供這大把素材我們只需要去下載好,來制作好就行,關于網(wǎng)店的各種“高大上風格”裝修方法我們舉出四個;
全屏海報
全屏輪播
全屏店招
固定背景
這四個都是我們在做好淘寶店鋪裝修最經(jīng)常遇到的問題:
1)全屏海報制作方法:
<div style="height:550px;">
<div class="footer-more-trigger" style="left:50%;top:auto;border:none;padding:0;">
<div class="footer-more-trigger" style="left:-960px;top:auto;border:none;padding:0;">
<a href="圖片鏈接" target="_blank" style="width:1920px;height:550px;display:block;">
<img src="圖片地址" border="0" alt="全屏海報" /></a>
</div>
</div>
</div>
前提我們把我們的海報做好之后,上傳到我們自己的圖片空間里面,然后可以復制海報圖片的鏈接,放到上面代碼把紅色的圖片鏈接替換掉,然后我們點擊海報跳轉的頁面鏈接把下面紅色的圖片地址替換掉,接下來去裝修后臺,在店招下面部分添加一個自定義模塊(相信這個應該都會吧)。
添加之后最上面一排顯示標題后面選中“不顯示”,第二排選中那個兩個小箭頭的按鈕,下面文本框里面,把我們改動之后的代碼復制粘貼進去,然后點擊確定,發(fā)布一下就完成了。圖片根據(jù)自己需要的圖片比例去做好了。
2)全屏輪播制作方法:
有的人感覺全屏海報還不給力,想要全屏弄幾張圖片,讓圖片輪播,可以多展示幾個寶貝,其實這個代碼也不麻煩,代碼如下:
<div class="footer-more-trigger" style="width:1920px;height:550px;padding:0px;border:none;left:-960px;">
<div data-widget-config="{'contentCls': 'taobaoux-com','navCls': 'bbs-taobaoux-com','effect': 'scrollx','easing':
'easeOutStrong','prevBtnCls':'prev1920','nextBtnCls':'next1920','autoplay': true,'viewSize':[1920],'circular': true}" data-widget-type="Carousel" class="J_TWidget">
<div class="J_TWidget" data-widget-config="{'trigger':'.ux1920','align':{'node':'.ux1920','offset':[-500,0],'points':['cc','cc']}}" data-widget-
type="Popup" style="display:none;">
</div>
<div class="J_TWidget" data-widget-config="{'trigger':'.ux1920','align':{'node':'.ux1920','offset':[500,0],'points':['cc','cc']}}" data-widget-type="Popup"
style="display:none;">
</div>
<div style="height:550px;width:1920px;overflow:hidden;padding:0px;margin:0px;" class="ux1920">
<ul class="taobaoux-com" style="height:550px;width:1920px;padding:0px;margin:0px;">
<li style="width:1920px;height:550px;padding:0px;margin:0px;">
<a target="_blank" href="圖片一鏈接" style="padding:0px;margin:0px;">
<img src="圖片一地址" width="1920px" height="550px" border="0px"></a></li>
<li style="width:1920px;height:550px;padding:0px;margin:0px;">
<a target="_blank" href="圖片二鏈接" style="padding:0px;margin:0px;">
<img src="圖片二地址" width="1920px" height="550px" border="0px"></a></li>
<li style="width:1920px;height:550px;padding:0px;margin:0px;">
<a target="_blank" href="圖片三鏈接" style="padding:0px;margin:0px;">
<img src="圖片三地址" width="1920px" height="550px" border="0px"></a></li>
</ul>
</div>
<div class="footer-more-trigger" style="padding:0px;border:none;left:50%;">
<div class="footer-more-trigger" style="width:1920px;height:50px;padding:0px;border:none;left:-960px;background: url() repeat;top:500px;">
<ul class="bbs-taobaoux-com" style="width:950px;height:50px;margin:0 auto;text-align: center;">
<li style="display: inline;margin: 0 5px;cursor:pointer;line-height: 50px;">
<img src="圖片一地址" width="137px" height="46px" border="0px" style="vertical-align:middle;margin:5px 0;" /></li>
<li style="display: inline;margin: 0 5px;cursor:pointer;line-height: 50px;">
<img src="圖片二地址" width="137px" height="46px" border="0px" style="vertical-align:middle;margin:5px 0;" /></li>
<li style="display: inline;margin: 0 5px;cursor:pointer;line-height: 50px;">
<img src="圖片三地址" width="137px" height="46px" border="0px" style="vertical-align:middle;margin:5px 0;" /></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<ul class="ks-switchable-nav" style="display:none;"></ul>
</div>
注意:代碼的任何一個標點不能漏。
代碼使用方法與我們上面說的全屏海報的方法差不多的,首先高度我就不強調(diào)了,與第一點的一樣,把hight后面的550改成自己的圖片的高度就行,這個輪播,我用的三張海報的,把海報傳到自己的圖片空間,三張海報地址與海報對應的跳轉鏈接分別按照順序替換代碼中的圖片一地址、圖片一鏈接,圖片二地址、圖片二鏈接,圖片三地址、圖片三鏈接,圖片鏈接就是點擊海報我們想要跳轉的頁面鏈接。這些完成之后保存代碼,同樣在店招導航下面添加自定義模塊,與第一點講的一樣,把改好的代碼復制粘貼進去,確定,發(fā)布,再看吧,成功了。來看看效果吧
3)固定背景如何設置:
我們?nèi)ヒ恍┐蟮昕吹臅r候,他們的背景不會隨著我們的頁面拉動而改變,兩邊有著我們不論怎么拉動頁面都可以看到的一些促銷文案,二維碼圖片等等,其實這個也不難,我們只需要做一張寬1920,高一般700左右的就可以圖片,然后,兩邊均勻加上我們想要加的東西,例如:微淘,二維碼,促銷信息。這點就需要大家用一下ps了,我們加的具體位置呢,是保證我們頁面中間950兩邊,不然會被中間的模塊遮擋住。圖片做好之后,依然是上傳到圖片空間,代碼如下:
body{background-image:url(圖片地址);background-repeat:no-repeat;background-position:center;background-attachment:fixed;}
就這一句,復制圖片鏈接,替換這句代碼中的圖片地址,然后放在
編輯導航,顯示設置下面的文本框,代碼放進去,確定,然后發(fā)布一下就好了。(圖片中代碼是我自己的,不要照抄)
4)全屏店招制作方法:
其實這個就不用代碼了,想要達到全屏的效果,首先我們得把圖片做成1920*150的,然后存為jpg格式的圖片,然后我們把中間1920*120的店鋪招牌裁剪下來,上傳到圖片空間,放進店招里面,
點擊保存,下一步
選擇我們的配色,根據(jù)自己的喜歡,點擊保存,左邊點擊背景設置:
頁頭背景,下面有個選擇圖片上傳,就把我們保存在電腦上面的1920*150的圖片上傳(注意,保存圖片的時候一定注意圖片大小不能超過200kb),然后右邊選項:頁頭下邊距10像素,選擇關閉,背景設置,選擇不平鋪,背景對其:選擇居中,頁頭背景,不選擇。
然后點擊保存,最后保存發(fā)布就完成了。
不知道是大家看到那些大店鋪里面的裝修是不是都特別羨慕那些到“高大上”的裝修,其實這些裝修樣式我們都是可以做到的,只是圖片的創(chuàng)意設計,沒有美工基礎的話就不是我們能夠設計好的,但是網(wǎng)上提供這大把素材我們只需要去下載好,來制作好就行,關于網(wǎng)店的各種“高大上風格”裝修方法我們舉出四個;
全屏海報
全屏輪播
全屏店招
固定背景
這四個都是我們在做好淘寶店鋪裝修最經(jīng)常遇到的問題:
1)全屏海報制作方法:
<div style="height:550px;">
<div class="footer-more-trigger" style="left:50%;top:auto;border:none;padding:0;">
<div class="footer-more-trigger" style="left:-960px;top:auto;border:none;padding:0;">
<a href="圖片鏈接" target="_blank" style="width:1920px;height:550px;display:block;">
<img src="圖片地址" border="0" alt="全屏海報" /></a>
</div>
</div>
</div>
前提我們把我們的海報做好之后,上傳到我們自己的圖片空間里面,然后可以復制海報圖片的鏈接,放到上面代碼把紅色的圖片鏈接替換掉,然后我們點擊海報跳轉的頁面鏈接把下面紅色的圖片地址替換掉,接下來去裝修后臺,在店招下面部分添加一個自定義模塊(相信這個應該都會吧)。
添加之后最上面一排顯示標題后面選中“不顯示”,第二排選中那個兩個小箭頭的按鈕,下面文本框里面,把我們改動之后的代碼復制粘貼進去,然后點擊確定,發(fā)布一下就完成了。圖片根據(jù)自己需要的圖片比例去做好了。
2)全屏輪播制作方法:
有的人感覺全屏海報還不給力,想要全屏弄幾張圖片,讓圖片輪播,可以多展示幾個寶貝,其實這個代碼也不麻煩,代碼如下:
<div class="footer-more-trigger" style="width:1920px;height:550px;padding:0px;border:none;left:-960px;">
<div data-widget-config="{'contentCls': 'taobaoux-com','navCls': 'bbs-taobaoux-com','effect': 'scrollx','easing':
'easeOutStrong','prevBtnCls':'prev1920','nextBtnCls':'next1920','autoplay': true,'viewSize':[1920],'circular': true}" data-widget-type="Carousel" class="J_TWidget">
<div class="J_TWidget" data-widget-config="{'trigger':'.ux1920','align':{'node':'.ux1920','offset':[-500,0],'points':['cc','cc']}}" data-widget-
type="Popup" style="display:none;">
</div>
<div class="J_TWidget" data-widget-config="{'trigger':'.ux1920','align':{'node':'.ux1920','offset':[500,0],'points':['cc','cc']}}" data-widget-type="Popup"
style="display:none;">
</div>
<div style="height:550px;width:1920px;overflow:hidden;padding:0px;margin:0px;" class="ux1920">
<ul class="taobaoux-com" style="height:550px;width:1920px;padding:0px;margin:0px;">
<li style="width:1920px;height:550px;padding:0px;margin:0px;">
<a target="_blank" href="圖片一鏈接" style="padding:0px;margin:0px;">
<img src="圖片一地址" width="1920px" height="550px" border="0px"></a></li>
<li style="width:1920px;height:550px;padding:0px;margin:0px;">
<a target="_blank" href="圖片二鏈接" style="padding:0px;margin:0px;">
<img src="圖片二地址" width="1920px" height="550px" border="0px"></a></li>
<li style="width:1920px;height:550px;padding:0px;margin:0px;">
<a target="_blank" href="圖片三鏈接" style="padding:0px;margin:0px;">
<img src="圖片三地址" width="1920px" height="550px" border="0px"></a></li>
</ul>
</div>
<div class="footer-more-trigger" style="padding:0px;border:none;left:50%;">
<div class="footer-more-trigger" style="width:1920px;height:50px;padding:0px;border:none;left:-960px;background: url() repeat;top:500px;">
<ul class="bbs-taobaoux-com" style="width:950px;height:50px;margin:0 auto;text-align: center;">
<li style="display: inline;margin: 0 5px;cursor:pointer;line-height: 50px;">
<img src="圖片一地址" width="137px" height="46px" border="0px" style="vertical-align:middle;margin:5px 0;" /></li>
<li style="display: inline;margin: 0 5px;cursor:pointer;line-height: 50px;">
<img src="圖片二地址" width="137px" height="46px" border="0px" style="vertical-align:middle;margin:5px 0;" /></li>
<li style="display: inline;margin: 0 5px;cursor:pointer;line-height: 50px;">
<img src="圖片三地址" width="137px" height="46px" border="0px" style="vertical-align:middle;margin:5px 0;" /></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<ul class="ks-switchable-nav" style="display:none;"></ul>
</div>
注意:代碼的任何一個標點不能漏。
代碼使用方法與我們上面說的全屏海報的方法差不多的,首先高度我就不強調(diào)了,與第一點的一樣,把hight后面的550改成自己的圖片的高度就行,這個輪播,我用的三張海報的,把海報傳到自己的圖片空間,三張海報地址與海報對應的跳轉鏈接分別按照順序替換代碼中的圖片一地址、圖片一鏈接,圖片二地址、圖片二鏈接,圖片三地址、圖片三鏈接,圖片鏈接就是點擊海報我們想要跳轉的頁面鏈接。這些完成之后保存代碼,同樣在店招導航下面添加自定義模塊,與第一點講的一樣,把改好的代碼復制粘貼進去,確定,發(fā)布,再看吧,成功了。來看看效果吧
3)固定背景如何設置:
我們?nèi)ヒ恍┐蟮昕吹臅r候,他們的背景不會隨著我們的頁面拉動而改變,兩邊有著我們不論怎么拉動頁面都可以看到的一些促銷文案,二維碼圖片等等,其實這個也不難,我們只需要做一張寬1920,高一般700左右的就可以圖片,然后,兩邊均勻加上我們想要加的東西,例如:微淘,二維碼,促銷信息。這點就需要大家用一下ps了,我們加的具體位置呢,是保證我們頁面中間950兩邊,不然會被中間的模塊遮擋住。圖片做好之后,依然是上傳到圖片空間,代碼如下:
body{background-image:url(圖片地址);background-repeat:no-repeat;background-position:center;background-attachment:fixed;}
就這一句,復制圖片鏈接,替換這句代碼中的圖片地址,然后放在
編輯導航,顯示設置下面的文本框,代碼放進去,確定,然后發(fā)布一下就好了。(圖片中代碼是我自己的,不要照抄)
4)全屏店招制作方法:
其實這個就不用代碼了,想要達到全屏的效果,首先我們得把圖片做成1920*150的,然后存為jpg格式的圖片,然后我們把中間1920*120的店鋪招牌裁剪下來,上傳到圖片空間,放進店招里面,
點擊保存,下一步
選擇我們的配色,根據(jù)自己的喜歡,點擊保存,左邊點擊背景設置:
頁頭背景,下面有個選擇圖片上傳,就把我們保存在電腦上面的1920*150的圖片上傳(注意,保存圖片的時候一定注意圖片大小不能超過200kb),然后右邊選項:頁頭下邊距10像素,選擇關閉,背景設置,選擇不平鋪,背景對其:選擇居中,頁頭背景,不選擇。
然后點擊保存,最后保存發(fā)布就完成了。
樂發(fā)網(wǎng)超市批發(fā)網(wǎng)提供超市貨源信息,超市采購進貨渠道。超市進貨網(wǎng)提供成都食品批發(fā),日用百貨批發(fā)信息、微信淘寶網(wǎng)店超市采購信息和超市加盟信息.打造國內(nèi)超市采購商與批發(fā)市場供應廠商搭建網(wǎng)上批發(fā)市場平臺,是全國批發(fā)市場行業(yè)中電子商務權威性網(wǎng)站。
本文內(nèi)容整合網(wǎng)站:百度百科、知乎、淘寶平臺規(guī)則
本文來源: 全屏海報、輪播、店招、固定背景制作方法集合