動態內容模組教學

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。
圓角型範例:
方圓型範例:
圓型/橢圓形範例:
區塊陰影範例:
區塊設置
框線設定:

框線顯示範例:
提示:
框線範例為:粗細20px,此設定無數值上限。

即時預覽功能

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

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

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


一鍵快速建置動態模組

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

h1標籤功能設定

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

設定方式:
於動態模組的主標題設定完後,將後方的「將此標題設為h1標籤」選項勾選即可。

h1標籤電腦版顯示:
h1標籤手機版顯示: