fbpx
了解 Elementor 編輯器最新優惠

WordPress 圖庫區塊 | 統一相片排列

如果你已經瞭解《圖片區塊元素》的基礎應用,那麼應該會對如何使用和新增《圖庫區塊 Gallery Block》感到興趣,WordPress 區塊編輯器 提供不少的選項供你調整和修改。透過調整圖片和部署它們的「排列方式」和「圖片外觀」設定,可以讓很小的版面空間,呈現令人觀艷的視覺效果。但這並不需要額外安裝任何強化功能外掛,讓我們一起瞭解這個常用的區塊應用吧。

如何新增圖庫 Gallery Block (方法一)?

如何新增圖片圖庫 Gallery Block (方法一)?
如何新增圖庫 Gallery Block (方法一)?

步驟一:

在新段落區塊中輸入 /圖庫 並按下 Enter 鍵,以快速新增圖片區塊。

步驟二:

點擊「圖庫」區塊即可。

如何新增圖庫 Gallery Block (方法二)?

WordPress 圖庫區塊 | 統一相片排列
WordPress 圖庫區塊 | 統一相片排列

步驟一:

在右下方點擊 [+] 符號。

步驟二:

在彈出視窗裡的輸入欄位,輸入「圖庫」字串。

步驟三:

發現「圖庫」區塊,請按圖示即可。

新增「圖庫 Gallery」和設定

新增「圖庫 Gallery」和設定
新增「圖庫 Gallery」和設定

這跟一般我們玩的 Facebook 社交平台操作相同,點擊「上傳」按鈕後會彈出上傳視窗,不過要注意圖片格式的支援和檔案大小。另外,關於如何操作 WordPress 的媒體庫,可以參考下方的推薦延伸教學,在此不在累贅詳述。


推薦延伸閱讀:

什麼是 WordPress 媒體庫? | 新增、編輯和管理

身為專業的網站管理員,他們都對負責管理網站裡的所有「圖片 Image」、「影片 Video」、「音訊 Audio」和「文件 Documents」資源非常重視,整齊有序的圖片管理是成功的關鍵之一。


轉換成其他類型區塊

轉換成其他類型區塊
轉換成其他類型區塊

常見轉換項目包含圖片、欄位和群組等等。這依據不同區塊的特性而定,善用轉換的功能,可以讓你自由在不同的區塊之間遊走,增加效率和彈性。

圖庫的對齊方式

圖庫的對齊方式
圖庫的對齊方式

圖庫預設的對齊是寬度 100%,填滿左右兩邊的空間,這符合基礎的現代美學而實用性。

步驟一:選取「對齊圖示」

對齊圖示 icon 會依據你的選擇而改變,往後你應該可以從圖示直接判斷對齊的方式。

步驟二:圖庫對齊模式

選取「圖庫對齊模式 Image Alignment」的符號。提供 5 種方式,分別是 (圖庫靠左對齊)、(圖庫置中對齊)、(圖庫靠右對齊)、(圖庫寬幅寬度) 和 (圖庫全幅寬度) 。

選擇「上傳圖片」或「套用媒體庫」

選擇「上傳圖片」或「套用媒體庫」
選擇「上傳圖片」或「套用媒體庫」

這跟一般我們玩的 Facebook 社交平台操作相同,點擊「上傳」按鈕後會彈出上傳視窗,不過要注意圖片格式的支援和檔案大小。

步驟一:上傳圖片

從你的電腦硬碟裡的圖片庫,上傳 (Upload) 至你現在的 WordPress 網站,是最典型的方式。

步驟二:從媒體庫選取圖片

從網站的「媒體庫」裡提取圖片資源,所以你不需要每次使用圖片時都「重新上傳」一次圖片。

從「媒體庫」裡挑選合適的圖片素材

從「媒體庫」裡挑選合適的圖片素材
從「媒體庫」裡挑選合適的圖片素材

和「圖片區塊」相比,圖庫當然是指顯示大量圖片於單一細小空間,所以你需要選取適量的圖片數量,要注意例如版面的工整。例如兩欄位就選 4 張圖片,反之三欄位就選 3 的倍數圖片數量,不要有缺少圖片或左右不平衡的狀態出現。

步驟一:挑選合適的圖片素材

編輯介面和一般圖片庫沒有太多差異,但「每張圖片」的右方上有個小方格,是指可以多重選取的意思。

步驟二:勾選合適的圖片和數量

從網站的「媒體庫」裡提取圖片資源,所以你不需要每次使用圖片時都「重新上傳」一次圖片。

圖片預設的外觀樣式

圖片預設的外觀樣式
圖片預設的外觀樣式

選取了圖片組合之後,就會看到初步的「圖庫」外觀,預設是簡約整齊。WordPress 預設的外觀比較「死板」和「單調」,期望往後開放更多像拼圖或不規則的圖片組合。

圖庫的「欄位」數量和自動裁剪圖片

圖庫的「欄位」數量和自動裁剪圖片
圖庫的「欄位」數量和自動裁剪圖片

這兩個選項是非常重要,也是這區塊的核心設定,站長可以隨心所欲地調整。

步驟一:選擇圖庫的欄位

市場上主流的欄位是「2」或「3」之間,這非常好平衡在電腦版和手機版之間的差異,一些比較進階的區塊外掛如 Stackable 可以依據手機、平板和電腦版設定不同的欄位數目和外觀樣式。

步驟二:是否裁剪圖片

建議打開這個功能,除非你的圖片都非常工整和預先處理好尺寸的問題。

圖片連結的目的地和圖片尺寸設定

圖片連結的目的地和圖片尺寸設定
圖片連結的目的地和圖片尺寸設定

這兩項設定建議維持預設值即可,依據 WordPress 官方建議的常用值。

步驟一:圖片連結的目的地

一般推薦是使用「無」目的地的選擇,不需要額外連結的《附件頁面》和《媒體檔案》。

步驟二:圖片尺寸設定

推薦使用「縮圖尺寸」,這可以自動符合跨平台的需要。

HTML 錨點和附加的 CSS 類別

HTML 錨點和附加的 CSS 類別
HTML 錨點和附加的 CSS 類別

在進階設定頁面,這裡資料並非必須要填寫,站長可以自行衡量需求。

步驟二:HTML 錨點

圖片區塊裡的「HTML 錨定」是一個建立頁面躍點的實用工具,如果將區塊切換至其 HTML 檢視,你會發現系統以 CSS ID 的形式將「HTML 錨點」輸入內容新增至標題標籤。你也會在區塊 HTML 中看到 CSS 類別。

步驟三:附加的 CSS 類別

進階面板讓你將 CSS 類別新增至區塊,以便編寫自訂 CSS,並視需要設定區塊樣式,建議具備 CSS 程式碼的基本知識後再使用此功能。

常見問題 FAQ

WordPress 圖庫的外觀設定和選擇太少?

這屬正常,如果需要更完整和功能強大的「圖庫」功能,請參考其他《區塊組合套件》外掛提供的額外強化項目,例如 Stackable BlocksKadence BlocksGenerate BlocksQubely Blocks,大部分這類免費外掛都提供不錯的升級效果,一般都能滿足市場上主流的進階需求。

圖庫區塊無法滿足我的需求?

WordPress 區塊編輯器 一直不停改進之中,你可以發現更多愈來愈強的功能加入進這個工具之中。如果希望探索更多圖庫的可能性和應用,你可以前往研究 WordPress 頁面編輯器 的應用和教學。

參考資料和引用文獻:

我們提供市場上最新的網站架設新聞、教學和相關知識,我們不會向用戶發送垃圾和推廣內容,而你可以隨時「取消訂閱」。

學員人數:6,600+ 人(持續增加之中)

中文語系的 WordPress - Facebook 社團列表

發表您的留言

加入我們的免費 WordPress 學習社團免費的教學資源、交流和解決問題!

是否覺得孤軍作戰和學習很無趣味?
何不加入學習社團和其他
熱愛網站設計的朋友交流?
分享您建站的喜與樂
學習最新的知識和技術