幕思城>電商行情>多多開店>多多運營>淘寶店鋪裝修代碼怎么弄?全屏輪換怎么制作?(2021淘寶店鋪裝修教程,新旺鋪裝修看這里)

    淘寶店鋪裝修代碼怎么弄?全屏輪換怎么制作?(2021淘寶店鋪裝修教程,新旺鋪裝修看這里)

    2023-01-13|10:34|發(fā)布在分類 / 多多運營| 閱讀:62


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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



    2021淘寶店鋪裝修教程,新旺鋪裝修看這里

    店鋪裝修是大事情,商家在找貨源的同時,就要著手準備店鋪的裝修。如果自己沒有專業(yè)的功底,建議請專業(yè)人士來做。2021年淘寶店鋪裝修和往年有些不一樣,來看看裝修教程吧。

    一、新舊旺鋪裝修流程簡述

    舊旺鋪首頁裝修流程:

    新建首頁→拖入模塊→編輯模塊→保存模塊→保存頁面→發(fā)布頁面

    新旺鋪首頁裝修流程:

    模式①:新建首頁→拖入淘寶旺鋪容器→創(chuàng)建模塊→放置模塊→保存頁面→發(fā)布頁面(類似舊旺鋪)

    模式②:創(chuàng)建模塊→新建首頁→拖入容器→放置模塊→保存頁面→發(fā)布頁面(全新的流程)

    二、新版旺鋪首頁裝修方式完整步驟(模式①)

    將所需的模塊容器拖動到相應位置

    如沒有模塊,點擊"創(chuàng)建模塊"

    先保存模塊

    發(fā)布模塊后,選中該模塊并點擊"確認"

    這樣一個模塊就裝修進頁面了

    存在多個時即自動"千人千面

    檢查頁面內(nèi)容后,點擊"預覽"或"發(fā)布"

    三、新版旺鋪首頁裝修方式完整步驟(模式②)

    點擊左側"模塊管理",進入模塊庫

    這里是模塊類型

    這里是已有模塊

    如沒有所需的模塊,點擊"創(chuàng)建模塊"

    找到所需的模塊,并點擊

    先保存模塊

    這就是剛剛創(chuàng)建的模塊

    點擊"新建頁面"

    創(chuàng)建后找到該頁面,點擊裝修頁面

    將所需的模塊容器拖動到相應位置

    選中容器后,在右側點擊"添加模塊內(nèi)容"

    選擇剛才已創(chuàng)建好的模塊

    然后點擊"確認"

    這樣提前創(chuàng)建好的模塊就裝修進頁面了

    存在多個時即自動"千人千面

    檢查頁面內(nèi)容后,點擊"預覽"或"發(fā)布"

    上面就是2021年裝修店鋪的詳細步驟,看起來非常簡單,但是,要將店鋪裝修好,在店鋪風格設計方面和圖片的選擇方面,是要多思考多費心血的。店鋪裝修得好,對產(chǎn)品的轉(zhuǎn)化率的提高也是有幫助的。

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

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

    更多資訊請關注幕 思 城。

    發(fā)表評論

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

      微信掃碼回復「666