返回支援 內容和媒體 區塊 圖庫區塊

圖庫區塊

你可以使用圖庫區塊同時顯示多張相片。圖庫區塊包含個別的圖片區塊來顯示每張圖片,並以美觀的方式排列這些圖片。

教學課程影片

新增圖庫區塊

若要新增封面區塊,請按一下「+ 區塊插入工具」圖示,然後搜尋「圖庫」,接著按一下即可將區塊加入文章或頁面。

💡

你也可以在新的一行用鍵盤輸入 /gallery,然後按 Enter 快速新增圖庫區塊

GIF 顯示輸入 /gallery 插入圖庫區塊的過程。

此處有新增區塊的詳細說明。 

新增圖片

新增圖庫區塊時,有兩個選項可選擇:「上傳」和「選取圖片」:

圖庫區塊顯示兩個選項:「上傳」和「選取圖片」。

上傳」可讓你從電腦上傳一張新圖片或多張圖片到網站。

選取圖片」可讓你從媒體庫選擇過去上傳的圖片,或從 Google 相簿Pexels 免費相片圖庫或 Openverse 選擇圖片。

新增圖片到現有圖庫

若要新增更多圖片到已建立的圖庫,你可以按照以下步驟操作:

步驟 1:選取圖庫區塊。你有多種選取圖庫區塊的方式。

你可以按一下圖庫區塊中的圖片,然後按一下圖片上方工具列的「選取圖庫」圖示。

或者你也可以按一下編輯器左上角的「清單檢視」,然後從大綱中選取圖庫區塊。

步驟 2:按一下圖庫區塊上方工具列的「新增」,以新增更多圖片。

按一下「新增」後,你可以選取「開啟媒體庫」新增已上傳的圖片 (或存取免費媒體選項),也可以選取「上傳」,上傳新圖片到圖庫。

區塊工具列

按一下區塊會出現選項工具列:

已選取圖庫並展開對齊選項。
圖庫工具列支援多種對齊方式,包括寬幅和全寬 (視佈景主題而異)。

圖庫區塊的工具列有以下幾個選項:

📌

如果你的佈景主題支援將區塊寬度變更為寬幅或全寬的選項,但你卻沒看到這些選項,這可能是因為區塊已加入到群組區塊中。你可以在此深入瞭解群組區塊。

區塊設定

按一下區塊,右側邊欄會出現其他區塊設定。如果沒有出現側邊欄,你可能需要按一下右上角的 ⚙️ (齒輪) 圖示叫出設定。

區塊設定位於右側邊欄中。
區塊設定

按一下圖庫中的圖片,等於選取圖庫中的個別圖片區塊。如需返回圖庫區塊設定,可以執行以下幾種操作:

  1. 按一下圖片之間的空白區域。
  2. 使用清單檢視選取圖庫區塊
  3. 從畫面底部的階層連結選取「Gallery」:
顯示編輯器畫面底部的階層連結,並用箭頭標示出圖庫。

圖庫區塊有以下設定:

欄位

你可以選擇圖庫區塊所包含的欄位數量。

你可以選取 1 個到 8 個欄位,但只能選取與圖片數量相同的欄位數量。如果你新增了 4 張圖片,則最多只能選擇 4 個欄位。此數字會隨著你新增更多圖片而增加,並以 8 個欄位為上限。

系統會根據你選取的欄位數量,自動以最佳配置排列你的圖片。不妨試著變更欄位數量,看看怎麼做效果最好。

裁切圖片

你可以選擇是否要裁切圖庫圖片。如果你有不同大小和形狀的圖片,建議使用此選項。

如果圖庫中的圖片大小不同,裁切圖片將可顯示整齊的外觀,如下所示。如果你不想裁切圖片,但仍想讓圖片以相同大小顯示,請上傳大小相同的圖片檔案。

已裁切圖片的圖庫:

裁切圖片的圖庫範例,其中顯示的所有圖片均為相同大小。

未裁切圖片的圖庫:

未裁切圖片的圖庫範例,其中顯示的圖片為不同大小。
連結設定

圖庫區塊設定中,有三種連結圖庫的選項:

另一方面,如果你想要將圖庫中的個別圖片各自連結到不同頁面,可以按照以下步驟來連結圖片:

  1. 按一下要連結的圖片。
  2. 在出現的工具列中,按一下連結圖示 (看起來像一節鏈條):圖片工具列,特別標示出連結圖示
  3. 按一下鉛筆圖示編輯連結。
  4. 貼上想要連結圖片的 URL,或使用搜尋方塊選取網站中已發表的頁面。
  5. 按下鍵盤上的 Enter 鍵確認變更。

若要深入瞭解如何連結個別圖片,請參閱我們的圖片區塊指南

重新排列圖庫中的圖片

圖片會依選取順序加入圖庫。選取圖片時,你會在每張圖片旁看到編號,即代表圖片在圖庫區塊中顯示的順序。

GIF 顯示如何重新排序圖庫中的圖片

你也可以在建立圖庫後重新排序圖庫圖片。若要重新排序,請隨意按一張圖庫圖片,然後使用左/右箭頭重新排序:

GIF 顯示使用左/右箭頭重新排序圖庫區塊中的圖片

或者,你也可以按一下圖片並選擇工具列中的拖曳選項 (六個點組成的圖示) 來移動圖片:

箭頭標示圖片工具列中的拖曳選項。
使用工具列中的拖曳選項移動圖片。

若要複製、重製或刪除圖片,請按一下工具列右上角的三個點,然後選取需要的選項。

圖片顯示在選取圖片區塊後,按下「…」展開更多設定,並為「複製」選項加上醒目提示。
使用展開的工具列設定複製、重製或刪除圖片。

新增圖片說明

新增圖片到圖庫後,你可以依序按一下圖片和「新增說明文字」區域,為每張圖片附上說明:

圖庫區塊圖片,說明文字方塊以橘色方框醒目提示。

若你先為媒體庫中的圖片撰寫說明文字後才新增圖庫區塊,則圖庫區塊會顯示你撰寫的說明文字。不過,如果你在新增圖庫區塊之後才新增媒體庫圖片的說明文字,則該說明文字不會在圖庫區塊中顯示。這種情況下,你可以手動在圖庫區塊輸入說明文字,或者移除該區塊後再重新新增,就可以在區塊中使用媒體庫的說明文字。

進階

進階分頁可讓你將 CSS 類別新增至區塊,以便編寫自訂 CSS,並視需要設定區塊樣式。深入了解

進階區段可讓你新增 CSS 類別到區塊。
進階區段可讓你新增 CSS 類別到區塊。

Copied to clipboard!