畫廊

使用 lightbox 元素在全螢幕模式視窗內顯示影像或影片。

畫廊 組件在全螢幕幻燈片模式視窗中顯示影像(有或沒有描述)或影片。圖庫還可以適應不同的螢幕尺寸,使它們可以輕鬆地在電腦、平板電腦和智慧型手機上展示媒體。

本教程將涵蓋:

  1. 設置畫廊的指南
  2. 將媒體加入圖庫
  3. 使用畫廊組在畫廊之間建立連接

建立畫廊

圖庫圖示縮圖

圖庫包含包含在連結區塊內的可點擊縮圖。當訪客點擊即時網站上的連結邊界時,圖庫會開啟以顯示相關的媒體。

要設置畫廊:

  1. 導航 插入面板 > 先進的
  2. 選擇 畫廊 組件或將其拖曳到 Webflow 畫布上
圖庫元件在「插入」面板中突出顯示。

圖庫縮圖的功能

圖庫包含一個影像元素,其操作方式與任何其他影像元素類似。您可以調整其大小,透過雙擊取代佔位符縮圖,並包含替代文字。閱讀有關圖像元素的更多資訊以進一步探索。

圖庫縮圖的影像設定。

您可以將相同的圖像用於圖庫縮圖和更大的圖庫模式視窗。 Webflow 自動為所有內嵌影像產生適應性版本。探索有關響應式影像的更多資訊以獲取更多詳細資訊。

相同的影像以六種不同的尺寸顯示:原始、2000px、1600px、1080px、800px 和 500px。

使用替代內容變更圖庫縮圖

您可以替換佔位符圖像元素,並在其中插入各種內容(例如標題或任何非連結組件) 畫廊連結.

或者,您可以使用 劃分塊 並使用背景圖像來建立同等大小的圖像縮圖。

圖庫連結包含舊金山蘇特羅浴場的圖像。它具有 H1 標題和一段文字。 H1 文本顯示 Sutro Baths,而該段落詳細介紹了加利福尼亞州舊金山。

提升畫廊外觀

您可以設計圖庫連結及其內容。例如,如果您將文字元素嵌套在圖庫連結中,則可以自訂圖庫連結元件的排版。

儘管無法在單擊圖庫連結時打開的模態視窗中自訂背景疊加層,但您可以插入圖像或影片以及圖像描述(如果需要)。

將媒體加入圖庫

要在圖庫模式視窗中包含圖像和描述:

  1. 選擇 畫廊連結 在畫布上
  2. 訪問 元素設定面板 > 圖庫設定 > 媒體
  3. 點擊 ”新增圖片“ 按鈕
  4. 選擇 選擇圖片
  5. 從中選擇一張影像 資產面板
  6. 在中輸入描述 標題 場地
  7. 選擇 節省

您可以根據需要將大量圖像插入圖庫連結。這些圖像將在圖庫模式視窗中以幻燈片形式展示。

請注意: 目前,圖庫元素不支援圖庫內圖像的替代文字。
「新增影像」按鈕在 Lightbox 設定的「媒體」部分中反白。

若要將影片插入燈箱模式視窗:

  1. 選擇 燈箱連結 在畫布上
  2. 導航 元素設定面板 > 燈箱設定 > 媒體
  3. 按 ”新增影片" 圖示
  4. 將影片的 URL 包含在 網址 場地
  5. 點選 節省
「新增影片」按鈕在燈箱設定的媒體部分中反白。

如何從集合字段媒體形成動態燈箱

可透過從 CMS 或電子商務集合中的媒體集合欄位(例如影像欄位、多重影像欄位或影片欄位)取得縮圖影像和/或燈箱媒體來產生動態燈箱。

若要將動態集合欄位連結到燈箱縮圖:

  1. 整合一個 燈箱 進入動態連結的集合清單或 CMS 集合頁面
  2. 選擇佔位符縮圖
  3. 使用權 元素設定 > 影像設定
  4. 勾選標記為「從下列位置取得影像」的方塊 部落格文章」(集合名稱可能會根據您選擇的集合而有所不同)
  5. 從以下位置選擇一個影像集合字段 選擇字段 落下

接下來,您可以在燈箱和收藏夾欄位之間建立連接,以使您的動態收藏圖像可以在燈箱中存取。若要將動態集合欄位附加到燈箱媒體:

  1. 選擇 燈箱連結
  2. 使用權 元素設定 > 燈箱設定 > 媒體
  3. 勾選標有「從以下位置取得媒體」的方塊 部落格文章」(集合名稱可能會有所不同,具體取決於您選擇的集合)
  4. 從中選擇媒體收藏字段 選擇字段 落下
在圖像設定中選取「從部落格文章取得圖像」checkbox,並在下拉清單中選擇「主圖像」集合欄位。
在燈箱設定中選擇「從部落格文章取得媒體」checkbox,並在下拉清單中反白顯示「部落格圖像」多重圖像集合欄位。

使用燈箱集群連接燈箱單元的步驟

您可以選擇互連多個燈箱以建立投影片庫。一旦訪客點擊連結的燈箱,與關聯燈箱組相關的所有媒體都會顯示。

制定燈箱集群的流程

  1. 選擇 a 中的任意元素 燈箱
  2. 繼續 元素設定 > 燈箱設定
  3. 勾選標示為「與其他燈箱互連」的方塊
  4. 輸入名稱
燈箱設定板具有圖像的附加圖示、影片的包含圖示、檔案標題和帶有刪除符號的微型圖像、已確認的「與其他燈箱互連」的 checkbox 以及名為「2021 公路旅行」的叢集標題」。

將其他燈箱連結到同一集群

若要將其他燈箱連接到集群,請為每個燈箱單獨執行以下步驟:

  1. 選擇其中的任意元素 燈箱
  2. 導航 元素設定 > 燈箱設定
  3. 標記標題為「與其他燈箱互連」的框框
  4. 輸入相同的 叢集名稱
一組展示四張圖像的燈箱,其中展示了舊金山著名的蘇特羅浴場的圖像。附加標題為“舊金山蘇特羅浴場”。

處理集合清單中的燈箱時,在集合項目中建立和連接一個燈箱的操作將自動連結集合清單中存在的所有燈箱。

燈箱設定部分突出顯示了用於「從產品檢索媒體」獲取主圖像的確認框、用於與其他燈箱互連的確認框以及標題為 2021 Road trip 的集群名稱。

在單一頁面上建立多個燈箱集群

當同一頁面上顯示多個燈箱時,您可以透過指派不同的燈箱來隔離它們 叢集名稱.

麥伊凡
Ewan Mak 的最新帖子 (看全部)