• 後台 HTML 編輯器

    • 最後更新 2021-11-03 16:38

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

    網路開店 必懂 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」即可登入。

    網路開店 lmgur 網路圖床說明

    2. 點選上方的「New post」上傳圖片

    網路開店 lmgur 網路圖床說明

    3. 「Browse」按下去可直接從檔案中選擇圖片

    網路開店 lmgur 網路圖床說明

    4. 在上傳好的圖片,點擊滑鼠右鍵👉複製圖片位址

    網路開店 lmgur 網路圖床複製圖片位址

    5. 進入 HTML 編輯器中,點選「插入/編輯圖片」

    網路開店 HTML 編輯器 置入圖片步驟

    將剛剛複製的圖片位址貼上,按「儲存」

    網路開店 HTML 編輯器 置入圖片步驟

    📌 確認所插入的圖片有完整顯示在編輯器中,這樣就完成囉!
    📌 若插入後發現顯示 □,或圖片有無法呈現的狀況,請檢查圖片網址是否有完整複製。

     

     

    方法 2:Funto 雲端圖床

    若後續商店穩定,可購買穩定性高、且有安全加密過的圖床空間,無須複雜的上傳,就像從電腦選擇圖片上傳一樣輕鬆簡單。

    想了解更多可點此進入 FunTo 雲端圖床 介紹

    網路開店 Funto雲端圖床

     

     

    圖片並排顯示怎麼做?

    有些店家希望圖片在電腦和手機裝置中,都可以正常的縮放,整齊的左右並排顯示。

    可以以表格的方式先畫出圖片要呈列的方式,再從表格中插入圖片,排版好的內容就可以縮放自如,不會跑版囉!

     

    1.請先插入表格

    網路開店 HTML 編輯器 插入表格功能教學

    2. 在表格屬性設定「框線寬度為0」,表格在商店顯示時就不會有框線。

    網路開店 HTML 編輯器 插入表格功能教學

    3. 在表格中點擊滑鼠左鍵,游標停在表格中,接著插入圖片。

    網路開店 HTML 編輯器表格置入圖片

    4.  圖片就會以並排的方式呈現在商店中囉!

    網路開店 HTML 編輯器表格置入圖片

     

     

    二、插入影片

    如果要插入影片,必須先將影片上傳到 Youtube ,再以網址或嵌入程式碼的方式插入影片到編輯器中。

    以下有兩種方式可以插入影片:

     

     

    一般影片網址

    使用影片網址插入影片時,在 Youtube 能設定影片開始撥放的時間點。

     

    1. 將影片上傳至 Youtube

    2. 點擊「分享」

    網路開店 HTML 編輯器置入影片方式

    3. 設定「開始處」的時間點,接著複製影片網址

    📌 開始處:影片開始撥放的時間點,通常用於影片長度較長,但希望消費者瀏覽的內容位置在影片中間或尾端時,就可以設定消費者撥放時,開始撥放的時間點,讓消費者可以快速觀看到影片重點。

    網路開店 HTML 編輯器置入影片 設定時間

    4. 進入 HTML 編輯器中,點選「插入/編輯 媒體」

    網路開店 HTML 編輯器置入影片方式

    5. 選擇「一般」,貼上剛剛所複製的影片網址,按「儲存」,即完成影片插入。

    網路開店 HTML 編輯器置入影片方式

     

     

    嵌入碼

    使用嵌入碼插入影片時,可以編輯顯示撥放器控制選項、隱私權加強保護、影片撥放的開始處時間點,下方將會一一說明。

     

    1. 將影片上傳至 youtube

    2. 點擊「分享」

    網路開店 HTML 編輯器置入影片嵌入碼設定

    3. 選擇「嵌入」

    網路開店 HTML 編輯器置入影片嵌入碼設定

     

    4. Youtube 影片設定

    顯示撥放器控制選項:左下角可以點擊連結至 Youtube 觀看影片。

    📌 店家有在經營 Youtube 想推廣頻道,可以勾選這個選項,讓消費者至 Youtube 瀏覽更多的商店影片。

    網路開店 youtube 影片設定

     

    📌 如果想避免消費者至 Youtube 觀看影片後,未回到商店下單,建議可以不要勾選此選項喔!

    網路開店 youtube 影片設定

     

    啟用隱私權加強保護模式:勾選時,只有當消費者在商店中瀏覽影片時,Youtube 才會記錄消費者相關資訊。

    網路開店 youtube 影片設定

     

    開始處:勾選時,影片會從指定的時間點開始撥放,通常用於影片長度較長,但希望消費者瀏覽的內容位置在影片中間或尾端時,就可以設定消費者撥放時,開始撥放的時間點,讓消費者可以快速觀看到影片重點。

    完成影片設定後,「複製」嵌入程式碼,回貼到 WACA 後台。

    網路開店 youtube 影片設定

    5. 進入 HTML 編輯器中,點選「插入/編輯 媒體」

    網路開店 HTML 編輯器置入影片方式

    6. 選擇「嵌入碼」貼上後,並儲存

    網路開店 HTML 編輯器置入影片方式

    📌確認所插入的影片有完整顯示在編輯器中,這樣就完成囉!

    📌若插入後發現顯示 □,或影片有無法呈現的狀況,請檢查影片網址是否有完整複製。

     

     

    三、嵌入Instagram貼文

    找到你想嵌入的IG貼文,點選右上角,選擇「內嵌」

    複製內嵌程式碼

    網路開店 HTML編輯器 嵌入Instagram貼文

    回到後台,點選編輯器上IG的小圖示。

    在編輯視窗中,貼上剛剛複製的內嵌程式碼,點選「確定」。

    貼文就會出現在編輯器中,再點選「儲存」後,就能在商店前台文章中看到內嵌的IG貼文囉!

    網路開店 HTML編輯器 嵌入Instagram貼文

     

     

    四、自行編寫 html tag

    需要注意以下幾點:

    ● HTML編輯器只允許使用html tag,以及HTML編輯器內所提供的樣式排版功能。

    ● 其它如 <script>、 <style>、 <link>、行內css、id、class...等,一律篩選過濾移除,只保留合法的html tag。

    ● 如使用表單功能,只限使用 iframe 方式嵌入,建議使用 google 表單來完成。

     

     

    五、了解其他編輯器功能

    ● 超連結:

    * 使用情況 
    → 文字、圖片點擊後要連結至其他網頁。
    如:line 加入好友 + line 分享邀請連結。

    * 使用方式 
    → 文字、圖片放入 HTML 編輯器後,選擇要加上超連結的內容,點選「超連結」,再把連結網址貼上。

     

     

    ● 消除格式:

    * 使用情況 
    → 原文字資料複製貼上時,夾雜格式排版,想貼上乾淨的 (無格式) 文字時使用。
    → 編輯後,發現商店前台圖片之間有大量空白。

    * 使用方式 
    → 選擇要消除格式的區域後,點選「清除格式」 。

    舉例來說,很多店家會以 Word 等文書軟體編輯商店內容,再貼到 HTML 編輯器中,此時就會有跑版的狀況。

    網路開店 HTML編輯器跑版情況調整說明

    此時請點選「清除格式」,將文書軟體的原始碼移除,再透過 HTML 編輯器重新排版,在商店呈現時,就不會有跑版的狀況。

    網路開店 HTML編輯器跑版情況調整說明

     

     

    ● 智慧斷行:

    * 使用情況
    → 換段落時,下個段落還夾雜著上個段落的格式,無法消除,想要重新開始一個新段落。

    * 使用方式
    → 一段落結尾,點「智慧斷行」,就像是點了 Enter 一樣,會自行清除所有格式換到下一個段落,重新開始。

     


    🥂 WACA 付費商家獨享權益 🥂

    電商充電站】讓您隨時學習不受限!

    ※請使用 WACA 主帳號信箱登入觀看※


     

TOP