HTML的全稱是超文本語言(Hyper Text Markup Language)。雖然這個名字聽起來像是專業技術人員才能操作的,但事實上HTML是最簡單的代碼形式之一并且應用很廣泛。
簡而言之,HTML可以允許亞馬遜賣家對產品描述進行排版(比如說添加粗體和斜體,換行,以及加入bullet points等),讓買家能更清晰了解產品的賣點。
看到這里,你可能會問了:沒有用HTML寫出來的產品描述就不能用了嗎?
答案是當然可以的,但是我們來對比一下不用HTML(圖1)與使用HTML(圖2)的產品描述的效果差異:
▲圖片來源:亞馬遜Bosch
▲圖片來源:亞馬遜Bosch
是不是看到沒有用HTML的產品描述時只覺得雜亂無章,想要馬上關掉這個頁面呢?而用了HTML的產品描述更有條理,看起來更專業,可以讓顧客很快地找到自己需要了解的內容。
在這個信息碎片化的時代,大家對同一件事情的注意力不會持續太久,沒有人有耐心去讀堆在一起的文字。如果顧客沒有很快地得到自己想要的信息,他們會立馬關閉頁面去瀏覽別人更清晰明了的listing。因此,賣家需要用更好的listing內容來留住客戶,吸引消費者下單購買。
想用HTML卻對代碼一無所知的賣家不用慌,你只需花幾分鐘了解最基礎的HTML代碼,就可以對自己的產品描述進行HTML編碼了。如果賣家不想自己手動寫HTML代碼,還可以使用相關軟件直接對自己的產品描述內容自動進行HTML編碼。
那有了自動編碼的軟件,我們為什么還要推薦手動的呢?
因為亞馬遜平臺對HTML代碼有諸多限制,很多代碼經過我們的測試,是不被亞馬遜支持的。
賣家使用手動編碼軟件來編寫自己的產品描述會確保HTML編碼的準確度和后續的順利上傳。所以對于到底是手動編碼還是使用自動編碼軟件,賣家要根據自己的需求和具體情況來決定。
手動編寫HTML
賣家只需了解以下這幾個HTML代碼就可以上手寫產品描述了:
- <h1>標題</h1>
- <p>段落</p>
- <br> = 換行
- <b>粗體</b>
- <li> = 列表項
- <i>斜體</i>
- <ul></ul> = 無序列表
- <ol></ol> = 有序列表
使用這些代碼時,要注意代碼的完整性與準確性。比如說<b> </b>,不要只使用一部分。<b> 代表粗體開始的地方,</b>代表粗體結束,如果使用不完整,可能會造成無法對文字進行粗,或者所有字體都變成粗體。
在這里,我們推薦大家一個寫HTML的免費工具W3 Schools(www.w3schools.com)。
網上可以找到很多免費的HTML編輯器,但是W3 Schools非常簡單便捷,運行速度快,而且也不會像有些編輯器一樣產生亂碼現象。
那么怎么使用工具寫出HTML格式的產品描述呢?
▲ 打開 W3 Schools HTML Editor。
▲ 將你為產品寫的非HTML的文字描述粘貼到左側框,再加入相應的代碼進行排版(當然賣家也可以邊寫內容邊用HTML代碼排版,不過這樣可能會擾亂思路):
1. 將標題加入<h1></h1>中間
2. 每個段落的開頭加<p>,結尾加</p>
3. 將<br>放到需要換行的文字前,想要換幾次行就輸入幾個<br>即可
4. 將需要加粗的文字放到<b></b>中間
5. 將需要變成斜體的文字放到<i> </i>中間
6. 在bullet points的所有的內容前面添加上<ul>;然后在每一個bullet point之前要加入<li>;在bullet points內容后添加</ul>(如下圖所示)
▲編碼界面
▲顯示界面
7.在有序列表的所有內容前添加<ol>;然后在每項之前要加入<li>;在有序列表內容后添加</ol>(如下圖所示)
▲編碼界面
▲顯示界面
▲ 編排完內容后,點擊RUN就可以在右側看到你編排好的產品內容預覽了。
▲ 仔細檢查,確認無誤之后,就可以將左側欄中的內容復制粘貼到你的賣家平臺上了。
□ 使用軟件自動編寫HTML
如果賣家選擇用相關工具將產品描述自動變成HTML格式,我們推薦大家使用Html-Online工具(html-online.com/editor/)
下面用圖片為大家進行簡單地演示:
可以看到,賣家只需要在左側輸入產品內容再進行相應排版,即能在右側得到HTML的代碼,再將這些代碼直接復制并粘貼到賣家平臺進行保存,買家瀏覽時就會看到和左側框的一模一樣的內容版式,是不是非常簡單方便呢?
在這里,經過我們的測試,亞馬遜的賣家需要注意:在亞馬遜上打造listing過程中,修改字體顏色、字體背景、添加表情、添加下劃線、修改字體類型、調整字體大小、添加特殊符號、添加超鏈接和添加圖片現在是不被允許的。但是我們都知道,亞馬遜的規則實時都在變化,因此關注這些規則,收藏好這篇文章和工具以備未來之需!
毫無疑問,如果賣家進行了品牌注冊并可以做EBC(A+)的話是最好不過了,但是如果你還沒有在亞馬遜上注冊品牌或者還在等待品牌注冊的商標申請,那么HTML將會是你提升產品內容描述的有力幫手!
如果您還想要了解各類編輯HTML的工具,我們在同名微信公眾號上添加了福利噢!在公眾號后臺回復【HTML】即可免費領取HTML工具測評匯總!
般的企業官網都會有產品展示欄或者公司簡介展示欄等這些模塊,然而在這些模塊中為了增強用戶體驗,也往往會添加一些觸發特效,比如鼠標點擊出現遮罩層、鼠標經過觸發彈層等等,這些效果一般都是源生寫比較好,有些為了方便也可以借助于一些現成插件。今天小編就來講解一個鼠標經過緩慢過渡的CSS3實現的動畫效果!有興趣的小伙伴可以參考,有不足之處可以互動!
先上實現的效果圖:
(圖一)鼠標未移上去前
(圖二)鼠標移上去后
當鼠標移入內容區域后,圖二種的紅色框區域由上往下、有無顯示到右顯示的過渡到邊框底部!
下面來看看如何實現
直接上代碼:
html代碼:
(圖三)
因為項目中做的是三個展示位,所以這里也展示了3個展示位的代碼,練習的時候你們可以用一個列就好!
CSS樣式:
(圖四)
起主要效果作用的css為圖四中的箭頭指向處,大家可以跟著測試該例子,希望對你們有幫助,如有錯誤可以指出來!非常感謝!
<script src="https://lf6-cdn-tos.bytescm.com/obj/cdn-static-resource/tt_player/tt.player.js?v=20160723"></script>
1.Tab欄切換有2個大的模塊
2.上面的模塊選項卡,點擊某一個,當前的底色就會變紅色,其余不變(排他思想)修改類名的方式。
3.下面的模塊內容,會跟隨上面的選項卡變化。所以下面模塊變化寫到點擊事件里面。
4.下面的模塊顯示內容和上面的選項卡一一對應,想匹配。
5.思路:給上面的tab_list里面所以的小li添加自定義屬性,屬性值從0開始編號。
6.當我們點擊tab_list里面的某個小li,讓tab_con里面對應序號的內容顯示,其余隱藏(排他思想)。
*請認真填寫需求信息,我們會在24小時內與您取得聯系。