幕思城>電商行情>案例>成功案例>淘寶店鋪店招模塊怎么設(shè)置?尺寸是多少?(淘寶店鋪裝修代碼怎么弄?全屏輪換怎么制作?)

    淘寶店鋪店招模塊怎么設(shè)置?尺寸是多少?(淘寶店鋪裝修代碼怎么弄?全屏輪換怎么制作?)

    2023-01-08|12:11|發(fā)布在分類 / 成功案例| 閱讀:51


    淘寶店鋪店招模塊所占據(jù)的區(qū)域并不多,不過店招模塊也是很重要的,能加深買家對店鋪的印象,有的賣家還特地花錢買個店招模板呢,那店招模塊怎么設(shè)置?

    若您是普通會員,您可以通過旺鋪裝修后臺-店鋪裝修-通用設(shè)置-基礎(chǔ)設(shè)置-店鋪招牌設(shè)置,針對店招背景圖進行設(shè)置哦。

    尺寸是多少?

    默認(rèn)的店招圖片尺寸的高度為120像素,寬度為950像素!但是呢,店招的高度是可以自己設(shè)定的!那既然是可以定高度,那我可不可以做個150高度的店招呢?曾經(jīng)有人問我說自己做了個150的高度的店招,傳上去后,卻發(fā)覺店鋪的導(dǎo)航不見了?那這又是怎么一回事呢?

    淘寶店鋪的店招屬于頁頭部分,而店鋪的頁頭呢,包含著店招和導(dǎo)航這兩部分。頁頭默認(rèn)的基本就是150的高度,導(dǎo)航呢,默認(rèn)的一般都是30像素的高度!你做一個150的店招,自然就把頁頭的高度全部占滿了,導(dǎo)航都被店招給擠下去了,超出了頁頭的高度,自然就看不見了!

    全屏店招怎么弄?

    利用頁頭背景圖替換的功能,我們就可以做全屏的店招了!原理就是做一個950的店招,然后再做一個店招的兩邊延伸版,可以做到1920的寬!然后把950的店招放到延伸版店招的最上面,兩者重合起來,看起來就是一個全屏店招了!

    實際上操作起來就是先把950的店招,上傳到店招模塊里去,然后再把店招的延伸版放到頁頭設(shè)置里的背景圖里,然后再選擇背景對齊的模式為居中就可以了!需要注意的是,你的延伸版店招往兩邊的加長的長度要保持一致,這樣當(dāng)設(shè)置背景對齊的模式為居中的時候,店招和頁頭背景圖才不會產(chǎn)生錯位的現(xiàn)象!

    淘寶店鋪店招設(shè)置好發(fā)布至店鋪之后,后期賣家如想修改店招的話,也是比較的簡單,只需要將鼠標(biāo)移至要修改的模塊,然后點擊模塊右上方的編輯按鈕就能修改了。



    淘寶店鋪裝修代碼怎么弄?全屏輪換怎么制作?

    淘寶店鋪必須要搞裝修,就像我們在線下租店面開店一樣,首先要做的就是裝修。很多商家一般都是代碼裝修,這樣更好控制頁面的風(fēng)格,一起來看看怎么弄代碼裝修吧。

    1. 先上全屏輪換的效果圖

    阿里店鋪裝修全屏廣告輪換效果圖

    (由于畫面問題,縮放顯示了,正常寬度是 1920px或100%)

    2.淘寶店鋪裝修中全屏輪換特效的html代碼

    阿里店鋪裝修全屏廣告輪換html代碼

    全屏廣告輪換html代碼解釋:① 屬性的設(shè)置,這里nav(觸發(fā)切換的標(biāo)簽)不使用默認(rèn),對應(yīng)的是.lht_nav里面的li元素,切換的面板設(shè)置為.lht_pane,上下頁按鈕設(shè)置如圖,觸發(fā)動作設(shè)置成點擊觸發(fā)。

    ② li的觸發(fā)標(biāo)簽個數(shù)與lht_pane面板的數(shù)量必須要一致。

    3. 店鋪裝修中全屏輪換特效的CSS代碼

    阿里店鋪裝修全屏廣告輪換css代碼

    全屏廣告特效css部分說明:

    ① 這里涉及到一個css小技巧分享,對觸發(fā)標(biāo)簽容器.lht設(shè)置文本居中,然后子元素設(shè)置為display:inline-block; (內(nèi)聯(lián)塊狀的意思,區(qū)別于float:left),這樣里面的小模塊就會在容器.lht里面居中了,這樣能確保觸發(fā)切換的按鈕能一直畫面中間。

    ② 此處只是外部的箭頭圖片路徑地址。

    ③ .disabled類是當(dāng)上下頁失效(第一頁和最后一頁時)的特定類,小耐這里設(shè)置成不顯示,也可以考慮設(shè)置成透明。

    其實,代碼裝修店鋪還是很簡單的,就這么幾個步驟,就像套模板一樣的套進去就行,且這樣裝修出來,店鋪風(fēng)格更加獨特,不會那么呆板。不會的朋友趕緊學(xué)起來吧。

    這個問題還有疑問的話,可以加幕.思.城火星老師免費咨詢,微.信號是為: msc496。

    難題沒解決?加我微信給你講!【僅限淘寶賣家交流運營知識,非賣家不要加我哈】
    >

    更多資訊請關(guān)注幕 思 城。

    發(fā)表評論

    別默默看了 登錄\ 注冊 一起參與討論!

      微信掃碼回復(fù)「666