💡 應用場景

頁面編輯器的「Instagram 藝廊」元件（下又稱 Instagram gallery），可讓消費者瀏覽和活動主題相關的 Instagram 貼文媒體，提升頁面的視覺效果，增加電商網站的消費者對他們的品牌或商品的信賴感，促進銷售和轉換率。

🔰 基本介紹

一個 Instagram gallery 元件由一格格的貼文組成：
- 每一個 Instagram gallery 只能對應 1 本 Visual UGC 相簿
- 每一本相簿最多可有 50 則貼文
細部元件架構：

⚫
區段 (Section)
⚫
Instagram 藝廊 (Instagram gallery)
⚪
Instagram 貼文 (Instagram Post)

Inline view – default state

Inline view – hover state

Lightbox view – click state

⚪
載入更多按鈕 (Load more button)

Inline view：

Lightbox view：
聯動編輯效果：

在某一格貼文修改元件樣式，會連動修改整串 Instagram gallery 的元件樣式，節省重複編輯的工夫
內容設定：
- 只能選擇 1 本現有的 Visual UGC 相簿，來設定貼文內容（i.e. 以相簿為最小單位）
- 不支援直接從 Visual UGC 媒體來源池挑選貼文
Instagram gallery 的內容是動態 (Dynamic) 的：

在後台編輯器儲存頁面的時候，只會儲存 Gallery 來源的相簿，SDK 活動頁再即時根據這個來源，動態呈現具體的貼文內容，自動更新

定位到 Instagram gallery 這一層元件後，可以在右側面板設定底下貼文的相簿來源。

如果您的網店底下沒有任何 Visual UGC 相簿存在⋯⋯

Case 1：[未綁定 Instagram 帳號] 或 [有綁定 Instagram 帳號但授權已過期]

無法存取 Instagram gallery 的元件面板，會引導去 [Visual UGC > 帳號管理] 綁定帳號
Case 2：[有綁定 Instagram 帳號]

可正常存取 Instagram gallery 的元件面板，但會引導去 [Visual UGC > 媒體來源] 新建相簿（這是因為可以設定的最小單位是「相簿」level）

定位到 Instagram gallery 這一層元件後，可在右側面板的 [設定 tab] 底下，調整整串貼文的展示方式：

輪播 Slider
網格 Grid
拼貼 Collage New✨
- 以「1 大配 N 小」為一組，一格大貼文 = 2x2 格小貼文
- 貼文數量不足以用拼貼形式呈現時，那一組會 fall back 回網格形式呈現

定位到 Instagram post 這一層元件後，可在右側面板的 [設定 tab] 底下，調整點擊貼文後的效果：

定位到 Instagram post 這一層元件後，可在右側面板的 [樣式 tab] 底下，調整「懸浮」狀態的貼文設計：

支援 6 種「顯示元素」的選項，選 A 就不能選 B，項目之間互斥：

定位到 Instagram post 這一層元件後，如果點擊後效果選擇「開啟貼文燈箱」，可在右側面板的 [樣式 tab] 底下，調整燈箱設計：

支援 5 個「顯示元素」的設定項，啟用 A 也可以啟用 B，項目可交集。

會。

就算解綁 Instagram 帳號，已經建立的相簿和底下的 Instagram 貼文還是會繼續存在，因此這些相簿也還是可以在 Campaign Star 活動頁做展示。

但要是手動刪除元件的來源相簿，元件就會出現異常狀態

會。只是這時候因為找不到來源相簿，元件會顯示成異常狀態：

目前尚未支援此功能，所以在 Email HTML 匯出結果看不到 Instagram gallery 元件是正常的。