在後台可以看到有像這樣的 HTML 編輯器,商家使用電腦、平板、或手機皆可以編輯
許多商家會在這個區域放入文字、插入圖片、或影片等,製作更多吸引人的內容,展示商店特色。
本篇部落格會說明如何使用後台的 HTML 編輯器。
後台哪裡可以看到 HTML 編輯器?
- 「商品登錄」:商品說明
- 「商店設定」:關於、付款方式說明、寄送方式說明、訂單查詢/異動說明、售後服務說明、隱私權條款
- 「商家活動」:商家活動的活動說明、現金積點規則說明
- 「會員管理」:會員權益說明
- 「文章管理」:自訂頁面編輯、部落格編輯
HTML 編輯器可以做什麼事情?
除了文字的編輯、排版功能之外,這個區域還可以...
一、插入圖片
如果要在後台 HTML 編輯器中的插入圖片,必須先將圖片上傳至網路圖床空間 (如:imgur、funto 圖床等),且圖片需要有 SSL 安全憑證加密,才能將圖片以圖片位址的方式,插入到編輯器中。下方將說明不同插入圖片的方法:
方法 1:網路圖床
請先將圖片上傳到網路圖床,再將滑鼠移至圖片上方,接著「點擊滑鼠右鍵👉複製圖片位址」,再接圖片位址貼到後台 HTML 編輯器中,即可完成圖片插入。
📌 插入圖片需使用「圖片位址」,不能使用瀏覽器上方網址列的網址,圖片會無法正常顯示。
📌 圖片位址須以 https:// 開頭,並以 jpg、.gif 等圖檔格式結尾。
📌 如果使用免費的網路圖床,可能會有圖片無法正常顯示或圖片遺失等等的不穩定狀況,建議使用安全、穩定的付費圖床。
以店家常用的 Imgur 免費圖床空間舉例說明
1. 點擊 https://imgur.com/ 網址進入 imgur,從右上角「Sign up」進行註冊 (可直接使用 facebook、google 帳號快速註冊),後續上傳的圖片皆會存在於此帳號中。
完成註冊後,後續登入時,只要點選「Sign in」即可登入。
2. 點選上方的「New post」上傳圖片
3. 「Browse」按下去可直接從檔案中選擇圖片
4. 在上傳好的圖片,「點擊滑鼠右鍵👉複製圖片位址」
5. 進入 HTML 編輯器中,點選「插入/編輯圖片」
將剛剛複製的圖片位址貼上,按「儲存」
📌 確認所插入的圖片有完整顯示在編輯器中,這樣就完成囉!
📌 若插入後發現顯示 □,或圖片有無法呈現的狀況,請檢查圖片網址是否有完整複製。
方法 2:Funto 雲端圖床
若後續商店穩定,可購買穩定性高、且有安全加密過的圖床空間,無須複雜的上傳,就像從電腦選擇圖片上傳一樣輕鬆簡單。
想了解更多可點此進入 FunTo 雲端圖床 介紹。
圖片並排顯示怎麼做?
有些店家希望圖片在電腦和手機裝置中,都可以正常的縮放,整齊的左右並排顯示。
可以以表格的方式先畫出圖片要呈列的方式,再從表格中插入圖片,排版好的內容就可以縮放自如,不會跑版囉!
1.請先插入表格
2. 在表格屬性設定「框線寬度為0」,表格在商店顯示時就不會有框線。
3. 在表格中點擊滑鼠左鍵,游標停在表格中,接著插入圖片。
4. 圖片就會以並排的方式呈現在商店中囉!
二、插入影片
如果要插入影片,必須先將影片上傳到 Youtube ,再以網址或嵌入程式碼的方式插入影片到編輯器中。
以下有兩種方式可以插入影片:
一般影片網址
使用影片網址插入影片時,在 Youtube 能設定影片開始撥放的時間點。
1. 將影片上傳至 Youtube
2. 點擊「分享」
3. 設定「開始處」的時間點,接著複製影片網址
📌 開始處:影片開始撥放的時間點,通常用於影片長度較長,但希望消費者瀏覽的內容位置在影片中間或尾端時,就可以設定消費者撥放時,開始撥放的時間點,讓消費者可以快速觀看到影片重點。
4. 進入 HTML 編輯器中,點選「插入/編輯 媒體」
5. 選擇「一般」,貼上剛剛所複製的影片網址,按「儲存」,即完成影片插入。
嵌入碼
使用嵌入碼插入影片時,可以編輯顯示撥放器控制選項、隱私權加強保護、影片撥放的開始處時間點,下方將會一一說明。
1. 將影片上傳至 youtube
2. 點擊「分享」
3. 選擇「嵌入」
4. Youtube 影片設定
顯示撥放器控制選項:左下角可以點擊連結至 Youtube 觀看影片。
📌 店家有在經營 Youtube 想推廣頻道,可以勾選這個選項,讓消費者至 Youtube 瀏覽更多的商店影片。
📌 如果想避免消費者至 Youtube 觀看影片後,未回到商店下單,建議可以不要勾選此選項喔!
啟用隱私權加強保護模式:勾選時,只有當消費者在商店中瀏覽影片時,Youtube 才會記錄消費者相關資訊。
開始處:勾選時,影片會從指定的時間點開始撥放,通常用於影片長度較長,但希望消費者瀏覽的內容位置在影片中間或尾端時,就可以設定消費者撥放時,開始撥放的時間點,讓消費者可以快速觀看到影片重點。
完成影片設定後,「複製」嵌入程式碼,回貼到 WACA 後台。
5. 進入 HTML 編輯器中,點選「插入/編輯 媒體」
6. 選擇「嵌入碼」貼上後,並儲存
📌確認所插入的影片有完整顯示在編輯器中,這樣就完成囉!
📌若插入後發現顯示 □,或影片有無法呈現的狀況,請檢查影片網址是否有完整複製。
三、嵌入Instagram貼文
找到你想嵌入的IG貼文,點選右上角,選擇「內嵌」
複製內嵌程式碼
回到後台,點選編輯器上IG的小圖示。
在編輯視窗中,貼上剛剛複製的內嵌程式碼,點選「確定」。
貼文就會出現在編輯器中,再點選「儲存」後,就能在商店前台文章中看到內嵌的IG貼文囉!
四、自行編寫 html tag
需要注意以下幾點:
● HTML編輯器只允許使用html tag,以及HTML編輯器內所提供的樣式排版功能。
● 其它如 <script>、 <style>、 <link>、行內css、id、class...等,一律篩選過濾移除,只保留合法的html tag。
● 如使用表單功能,只限使用 iframe 方式嵌入,建議使用 google 表單來完成。
五、了解其他編輯器功能
● 超連結:
* 使用情況
→ 文字、圖片點擊後要連結至其他網頁。
如:line 加入好友 + line 分享邀請連結。
* 使用方式
→ 文字、圖片放入 HTML 編輯器後,選擇要加上超連結的內容,點選「超連結」,再把連結網址貼上。
● 消除格式:
* 使用情況
→ 原文字資料複製貼上時,夾雜格式排版,想貼上乾淨的 (無格式) 文字時使用。
→ 編輯後,發現商店前台圖片之間有大量空白。
* 使用方式
→ 選擇要消除格式的區域後,點選「清除格式」 。
舉例來說,很多店家會以 Word 等文書軟體編輯商店內容,再貼到 HTML 編輯器中,此時就會有跑版的狀況。
此時請點選「清除格式」,將文書軟體的原始碼移除,再透過 HTML 編輯器重新排版,在商店呈現時,就不會有跑版的狀況。
● 智慧斷行:
* 使用情況
→ 換段落時,下個段落還夾雜著上個段落的格式,無法消除,想要重新開始一個新段落。
* 使用方式
→ 一段落結尾,點「智慧斷行」,就像是點了 Enter 一樣,會自行清除所有格式換到下一個段落,重新開始。