X
教學目錄
新手教學指南
網站基本設定
會員教學
訂單教學文件
商品上架教學
行銷教學文件
微商相關
社群媒體串接

動態內容模組教學

2022-01-28
適用商家類型：

文件版更紀錄：

目錄

  • ．設計細節提醒
  • ．動態模組版型介紹
  • ．範例：自行引用操作教學
  • ．動態內容模組【引用】方式操作教學
  • ．動態內容模組【複製】方式操作教學
  • ．動態內容模組【商品模組】操作教學
  • ．動態內容模組【瀑布流】操作教學
  • ．動態內容模組【專欄文章宣傳模組】操作教學
  • ．動態內容模組【計時器】操作教學
  • ．動態內容模組【左、右圖環繞】顯示範例
  • ．圓角、陰影及框線設定
  • ．即時預覽功能
  • ．一鍵快速建置動態模組
  • ．h1標籤功能設定

設計細節提醒

1. 以下模組依照:電腦版寬度 1920px / 手機版寬度 640px 作為換算，設計稿 請以此兩種尺寸設計。
2. 滿版的畫面為:電腦版 1920px / 手機版 640px。 內縮的畫面為:依照裝置畫面左右各內縮 10%。
3. 動態背景圖(視差滾動效果) ※請務必注意圖片的高度，會影響此功能呈現效果。 背景圖須注意重要物件避免放置在邊緣，因載體寬度不同有可能被裁切。
電腦版:建議 1920 x 1080，開啟視差滾動建議 1920 x 2160。 手機版:建議 415 x 415，開啟視差滾動建議 415 x 800。
4. 此文字區塊可自行選擇是否要做設定，以下圖做範例：
提示：
可搭配後台的欄位說明及的設定內容提示進行操作，若有疑問可至電商小幫手詢問。

動態模組版型介紹

動態模板類型共18款：
以下示意圖皆為「內縮版型」，以便顯示橘底滿版背景圖。
提示：
如影片高度大於寬度時，系統將會判斷並進行限高，避免影片於畫面中無法播放。

範例：自行引用操作教學

於自行引用設定點選左上角「新增」按鈕，進行基本資料設定，待設定完成後請先按下左上角的「儲存資料」，以利開啟動態內容模組欄位。
儲存資料後，可開啟動態模組欄位，直接點選左上新增按鈕開始進行設定。
『步驟一』可以依照設計需求，選擇以下功能 : 狀態、裝置、排序、滿版或內縮、模組之間的間距。
『步驟二』選擇模板類型、樣式和效果，下方會依照您所選擇的模板，依序上傳圖片/影片、文字，若沒有適合模組，也可以上傳 HTML 原始碼。
背景資訊 : 開啟動態背景，則當前台滑鼠滾動網頁時，背景圖會跟著移動。

動態內容模組【引用】方式操作教學

適用於已經建立好的模組，直接記錄下 SN，跨主題於新的動態內容模組貼上，無須重複進行設定。

於設定完畢的動態內容模組，查詢模組的 SN。將滑鼠游標滑到模組的右邊「編輯」處上，左下角即會出現SN 編號。
提示：
也可直接於「模組編號」欄位直接查看
至新的模組點選「引用」，來源 SN 填上舊有模組的 SN 編號，可同時複製多筆 SN，請用半形逗號區隔開來即可。
於紅框處輸入 SN 確認後，按下上方確定引用按鈕。
引用的模組會於註記的欄位顯示，「FROM XX SN」。

動態內容模組【複製】方式操作教學

適用於同一個動態內容模組主題中，將欲複製的版型勾選後，點選複製按鈕。

將欲複製的模組勾選起來，點選「複製按鈕」。
提示：
若是設定皆和原本的相同，請勾”不變”即可。
若要將電腦版的版型要複製到手機版，請勾選手機，勾選的項目皆為複製後的設定，其餘下列的【畫面內容】與 【上線狀態】規則相同。
將對應的內容設定完畢後，按下上方確定複製按鈕。
複製的模組會於註記的欄位顯示，「FROM_XXX__copy」。

動態內容模組【商品模組】操作教學

使用此商品模組選擇「商品輪播」或「列表」皆需搭配商品資訊共同使用。
自選商品：
將原有手動輸入商品sn的部分，優化成使用商品卡點選顯示。
點選「選擇商品」按鈕，即可於右上角內輸入簡易商品名稱進行相關搜尋。
出現對應的商品卡時，可直接點選圖片，若點選成功，商品卡會反藍顯示，且上方會同步顯示當前點選商品數量。
選擇完畢後，商品品項會出現在商品設定的欄位中，點選商品進行拖曳，即可調整品項的顯示順序。
前台範例顯示：
自動選取：
可選擇「最新上架(20筆) 」及「十大熱銷(10筆)」兩種商品設定。
另有「帶圖輪播版型」可以選擇，此版型目前僅支援電腦版，可以設定上主圖＋商品模組，同時顯示。
前台顯示範例：
提示：
左邊為主圖，右邊為商品模組。

動態內容模組【瀑布流】操作教學

瀑布流模組優化使用方式：
1.可自行選擇每列圖片數量
2.可自行設定圖片之間的間距
3.可自行調整瀑布流切齊位置
提示：
可搭配後台的欄位說明及的設定內容提示進行操作，若有疑問可至電商小幫手詢問。
使用瀑布流模組，最多可上傳30張圖片檔，
且為維持良好的網站體驗，建議每張圖片以不超過 250KB 為主。
將圖片上傳完成後，開啟「切換至排序模式」可確認到此下方畫面，使用拖曳的方式即可調整圖片排列順序。
提示：
且每張圖檔皆可單獨設定「圖片標題」、「圖片敘述」及「圖片連結」。

動態內容模組【專欄文章宣傳模組】操作教學

此專欄文章宣傳模組，顯示的專欄文章為「隨機」顯示，無法編輯排序顯示順序，且該專欄文章需開啟『加強宣傳』設定才會進行此模組的啟用。
新增文章來源可下拉選擇特定分類。
「電腦版」滑動展示：
「電腦版」兩欄列表：
「手機版」滑動展示：
「手機版」單欄列表：

動態內容模組【計時器】操作教學

對應欄位設定上截止的日期及時間，計時器就會在前台開始倒數計時
提示：
計時器模組，系統目前僅支援單一色系、大小及置中位置呈現。
電腦版樣式呈現：
使用情境 (一) 可在任何頁面上，使用背景圖片加上計時器模組搭配使用，可用於公告活動開始 or 結束資訊給會員訪客
手機版樣式呈現：
電腦版樣式呈現：
使用情境 (二) 可將促銷折扣日期相同的商品，使用商品模組與計時器的結合應用，以利提升會員的促購效益
手機版樣式呈現：

動態內容模組【左、右圖環繞】顯示範例

「電腦版」左圖環繞示範：
「手機版」左圖環繞示範：
「電腦版」右圖環繞示範：
「手機版」右圖環繞示範：

圓角、陰影及框線設定

圓型/橢圓形選項會依圖片本身尺寸比例變化成圓形或橢圓形，若希望為圓型請將圖片尺寸比例改為1:1。
圓角型範例：
方圓型範例：
圓型/橢圓形範例：
區塊陰影範例：
區塊設置
框線設定：
框線顯示範例：
提示：
框線範例為：粗細5px，此設定無數值上限。

即時預覽功能

使用動態模組時，需先點選上方儲存按鈕，該頁面上方區塊才會出現即時的預覽畫面。
「電腦版」文繞圖模組顯示範例：
提示：
需先點選上方儲存按鈕，該頁面上方區塊才會出現即時的預覽畫面。
「手機版」文繞圖模組顯示範例：
提示：
預覽模式上方有「開啟 / 關閉預覽區塊」按鈕，可自行選擇是否開啟或關閉使用。

「電腦版」影片模組顯示範例：
提示：
可搭配後台的欄位說明及的設定內容提示進行操作，若有疑問可至電商小幫手詢問。

「手機版」影片模組顯示範例：
提示：
影片模組及文繞影片模組的預覽畫面時都可正常點選播放。
此預覽『實際顯示大小需以手機裝置的寬度呈現為主』。

一鍵快速建置動態模組

在新建置模組時，新增一併建立的選項，可一併新建電腦版 / 手機版同類型模組，但目前不支援「瀑布流模組」以及「嵌入模組」。
電腦版新增手機版示範：
提示：
電腦及手機由於裝置顯示的不同，故有些模組樣式無法同步新增。
內容設定後，按下「儲存資料」按鈕，即可於列表頁確認到剛剛一併建立完成的手機版模組。
手機版新增電腦版示範：
一樣將內容設定後，按下「儲存資料」按鈕，即可於列表頁確認到剛剛一併建立完成的電腦版模組。

h1標籤功能設定

此部分設定如果當前頁面有使用動態內容模組，且有設置h1標籤，則會將主標題設置h1。如無動態內容模組或未設置h1標籤則會使用系統預設h1進行標籤設定。
此動態模組標籤設定，不支援專欄文章模式，因為專欄文章的主標題本來就會是顯h1標籤。

設定方式：
於動態模組的主標題設定完後，將後方的「將此標題設為h1標籤」選項勾選即可。
h1標籤電腦版顯示：
h1標籤手機版顯示：
© 2022 美萃思電商 All Rights Reserved. M2微商城 基於LINE微商而生的平台系統
分享文章