• 後台 HTML 編輯器

    • 最後更新 2021-09-10 11:13

    在後台可以看到有像這樣的 HTML 編輯器,商家使用電腦、平板、或手機皆可以編輯

     

    許多商家會在這個區域放入文字、插入圖片、或影片等,製作更多吸引人的內容,展示商店特色。

    本篇部落格會說明如何使用後台的 HTML 編輯器。

     

    後台哪裡可以看到 HTML 編輯器?

    ● 「商品登錄」:商品說明

    ● 「商店設定」:關於、付款方式說明、寄送方式說明、訂單查詢/異動說明、售後服務說明、隱私權條款

    ● 「行銷推廣」:行銷活動的活動說明、現金積點規則說明

    ● 「會員管理」:會員權益說明

    ● 「文章管理」:自訂頁面編輯、部落格編輯

     

    HTML 編輯器可以做什麼事情?

    除了文字的編輯、排版功能之外,這個區域還可以...

    一、插入圖片

    二、插入影片

    三、嵌入Instagram貼文

    四、自行編寫 html tag

    五、了解其他編輯器功能

     


     

     

    一、插入圖片

    如果要在後台 HTML 編輯器中的插入圖片,必須先將圖片上傳至網路圖床空間 (如:imgurfunto 圖床等),且圖片需要有 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 一樣,會自行清除所有格式換到下一個段落,重新開始。