如何使用 Divi Gallery 模塊創建全角圖像庫

全寬圖像畫廊在網站上看起來總是很棒。 全角畫廊跨越瀏覽器窗口的整個寬度。 額外的空間允許圖像保持更大的尺寸，這對用戶體驗很有好處。 網格佈局提供了一種美學設計，將圖像組織成列，可以在所有瀏覽器寬度上很好地調整。

在本教程中，我將向您展示如何使用 Divi Gallery 模塊創建全角圖像庫。 您可能會驚訝於在 Divi 中這樣做是多麼容易。 我還將提到幾種方法，您可以使用自定義間距來更好地控制移動設備上的全角畫廊。

讓我們開始吧。

之前和之後

這是帶有 12 張圖像的默認 Divi Gallery 模塊。

這是您可以輕鬆創建的示例全角圖片庫。

準備您的設計元素

對於本教程，您需要安裝並激活 Divi 主題。 您還需要將 12 張圖片添加到您的媒體庫中，以用於構建圖片庫。 對於使用網格佈局的 Divi 畫廊模塊，如果您計劃在燈箱顯示中打開圖像，則圖像的大小應該在 1500 像素 x 800 像素左右，以便它在大多數桌面上很好地填充屏幕。

對於本教程，我將使用 Divi Builder 中免費提供的 Restaurant Gallery Page 預製佈局中的圖像。 您可以在本文底部下載所有圖片。

實現全寬 Divi Gallery 模塊

訂閱我們的 YouTube 頻道

設置新頁面

首先，創建一個新頁面，為頁面命名，然後部署 Divi Builder。 選擇“從頭開始構建”選項，然後發布您的頁面。 然後在前端點擊構建。

創建圖片庫

部署 Divi Builder 後，繼續創建一個具有一列行的新常規部分，並向該行添加一個 Divi Gallery 模塊。

Divi 將使用您的媒體庫中的一些圖像以網格顯示方式填充庫模塊，如下所示：

在 Divi 畫廊模塊設置中，單擊灰色加號圖標將 12 張圖像添加到畫廊。

然後更新Divi Gallery模塊設置如下：

圖片數量：12
顯示標題和說明：否
顯示分頁：否

為圖庫創建全角佈局

要為圖庫創建全角佈局，讓我們暫時保存圖庫設置並打開行設置。 在設計選項卡下，更新以下內容：

使這一行全寬：是
天溝寬度：1

這是啟動和運行全角圖片庫的最簡單方法。 選擇“Make This Row Fullwidth”與將裝訂線寬度設置為“1”相結合將使圖庫跨越該部分的全寬（在所有瀏覽器尺寸上）並去除圖像之間的間距。

畫廊也將繼續在移動設備上覆蓋整個頁面。

自定義圖像懸停疊加選項

要完成全角圖片庫的設計，自定義 Divi Gallery 模塊設置中內置的圖像懸停疊加選項會有所幫助。 您可以更改縮放圖標、圖標顏色和疊加顏色。 為此，請打開圖庫設置並更新以下內容：

縮放圖標顏色：#ffffff
懸停疊加顏色：#333d48
懸停圖標：見截圖

現在讓我們看看最終的設計。

更多全寬圖像庫間距選項

使用裝訂線寬度間距創建全寬佈局

在 Divi Gallery Module 中自定義圖像間距的最簡單方法是調整其父行的裝訂線寬度。 裝訂線寬度是指列之間的間距。 對於任何 Divi Row 元素，裝訂線寬度的可選值範圍為 1 到 4。

1 表示列之間的零邊距。
2 表示列之間有 3% 的右邊距。
3 表示列之間的右邊距為 5.5%。
4 表示列之間有 8% 的右邊距。

由於我們使用的是 Divi Gallery 模塊，因此裝訂線寬度也指的是畫廊項目之間的間距。 因此，向行添加裝訂線寬度將調整圖庫模塊中圖庫項目/圖像的間距。

使用自定義寬度更好地控制移動設備上的間距

如果“使此行全寬”選項設置為 YES 並且裝訂線寬度為 2 或更多（除 1 之外的任何值），Divi 將自動調整行的寬度以提供額外的外部間距。 這是必要的，因為裝訂線寬度僅適用於列/畫廊項目之間的間距，而不適用於行本身。 但是，這可能會增加比您在移動設備上想要的更多的邊距。 例如，如果您啟用了“使此行全寬”選項並使用 2 個裝訂線寬度，則您的行在移動設備上的實際寬度將為 89%（不是 100%）。 因此，如果您希望該行在移動設備上跨度為 100%，則可以改用“自定義寬度”選項。 通過為行指定 100% 的自定義寬度，行的寬度將保持 100%，而不管裝訂線寬度值如何。 現在，您可以使用行填充簡單地添加行的外部間距。 這將使您更好地控制台式機、平板電腦和智能手機上的外部間距。

這是一個如何工作的示例。 打開行設置並更新以下內容：

自定義寬度：100%
天溝寬度：2

請注意畫廊的右側或左側沒有邊距。

現在將以下自定義填充添加到行：

自定義填充（桌面）：頂部 5%，底部 5%，左側 5%，右側 5%
自定義填充（智能手機）頂部 5%，底部 5%，左側 0%，右側 0%

桌面（和平板電腦）上的 5% 填充將提供我們需要匹配畫廊項目之間的間距的外部間距。

通過去掉智能手機的左右自定義填充，圖像將跨越瀏覽器的整個寬度，使圖像更具可見性。

為沒有裝訂線寬度的圖庫項目添加自定義間距

如果您想更好地控制 Divi Gallery 模塊的間距，您實際上可以在畫廊項目之間添加自己的自定義間距，而不是使用 Gutter Width。 為此，您需要將裝訂線寬度設置為 1，然後在 Divi 畫廊模塊設置中的畫廊項目之間添加間距。 有關更多信息，請查看有關使用 Divi Gallery 模塊創建具有自定義間距的圖像庫的完整教程

了解有關 Divi Gallery 模塊的更多信息

查看以下教程，了解更多自定義 Divi Gallery 模塊的方法：

• Divi Gallery 模塊圖像的 6 種獨特邊框設計
• 在不同斷點處更改 Divi Gallery 模塊中的列數
• 使用 Divi Gallery 模塊創建自定義間距的圖庫
• 如何使用 Divi 的圖庫模塊創建從黑白變為彩色的圖庫

最後的想法

希望本教程將幫助您了解如何使用 Divi Gallery Module 在您的下一個項目中創建一些漂亮的全寬圖像畫廊。 不要忘記探索 Divi 的所有內置設計選項和懸停效果，讓您的圖片庫更加突出。

我期待在下面的評論中收到您的來信。

乾杯!