在不同斷點處更改 Divi Gallery 模塊中的列數

已發表: 2019-02-23

Divi Gallery 模塊允許您在響應式網格佈局中創建漂亮的圖片庫。圖庫被認為是響應式的，因為它會根據不同的瀏覽器寬度縮放圖像的大小並調整網格中的列數。

默認情況下，gallery 模塊具有三個斷點（樣式在特定瀏覽器寬度發生變化的點），用於調整網格中的列數。它將在桌面上以四列顯示您的圖片庫，然後在平板電腦上分成三列，在小型平板電腦（和大型手機）上分成兩列，在手機上分成一列。

此默認設置通常適用於大多數情況，但有時您可能需要對某些瀏覽器寬度上顯示的列數進行更多控制。這就是為什麼在本教程中，我將向您展示如何完成 Divi Gallery 模塊中顯示的列數，不僅適用於桌面，還適用於三個額外的瀏覽器斷點。

搶先看

這是我們將在本教程中構建的內容的先睹為快。請注意不同瀏覽器寬度上圖片庫的不同列數。

準備您的設計元素

訂閱我們的 YouTube 頻道

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

為 Divi Gallery 模塊實現自定義間距

設置新頁面

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

創建圖片庫

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

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

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

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

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

調整行設置以製作沒有裝訂線寬度的全寬畫廊

為了讓我們的新列結構正常工作，我們需要做的主要事情是擺脫圖庫中圖像之間存在的默認間距/邊距。為此，我們需要做的就是將裝訂線寬度設置為 1。此外，作為一個選項，您可以使行全寬，以使圖片庫跨越瀏覽器的整個寬度。為此，請打開行設置並更新以下內容：

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

如果要在圖庫中的圖像之間添加間距，我建議使用此方法，因為我們需要將裝訂線寬度設置為 1。

默認情況下，圖庫如何響應不同的瀏覽器寬度

如前所述，默認情況下，Divi 圖庫模塊會在桌面上以四列顯示您的圖片庫，然後在平板電腦上分成三列，在小平板電腦（和大手機）上分成兩列，在手機上顯示一列。

但是，我們將使用一些自定義 CSS 片段將其更改為在某些斷點處包含自定義數量的列。

為所有瀏覽器大小設置特定數量的列

如果您想更改圖庫中顯示的列數，以便所有瀏覽器尺寸上的列數保持不變，有一種簡單的方法可以做到這一點。如果您只想在一列、兩列或三列中顯示您的畫廊，這可能會有所幫助。這樣你就可以在桌面上擁有非常大的圖像，在移動設備上擁有較小的圖像，同時保持列號相同。擁有四列或更多列可能不起作用，因為圖像對於手機顯示器來說太小了。

假設您想在所有瀏覽器尺寸上顯示三列。為此，請打開您的 Divi 畫廊模塊設置並將以下自定義 CSS 添加到畫廊項目：

width: 33.33% !important;
margin: 0 !important;
clear: none !important;

現在，您的圖庫將在所有瀏覽器尺寸上保留三列結構。

如果您想要所有瀏覽器尺寸的 2 列佈局，您需要做的就是將 width 屬性值更改為 50%。

如果您想要 1 列佈局，只需將寬度更新為 100%。

就是這樣。

但是，如果您想在某些斷點處更好地控制列數，請繼續閱讀。

更改特定斷點的列數

如果您想完全控制瀏覽器到達特定斷點時顯示的列數，我們可以使用一些 CSS 片段以及針對特定瀏覽器寬度的媒體查詢。

將 CSS 類添加到 Divi Gallery 模塊

在我們添加自定義 CSS 之前，首先我們需要給我們的畫廊模塊一個自定義 CSS 類，以便我們可以在我們的 CSS 中引用該特定類。這將確保我們的 css 只應用於這個特定的畫廊模塊。為此，請打開圖庫模塊設置並在高級選項卡下添加以下 CSS 類：

CSS 類：col-width

如果你添加了，不要忘記把本文上一節中添加到Gallery Item的自定義css取出來。

之後，保存您的設置。

將自定義 CSS 添加到頁面設置

準備好 CSS 類後，您就可以添加自定義 CSS。通過單擊頁面底部頁面設置欄中的齒輪圖標打開頁面設置（或者您可以使用鍵盤快捷鍵“o”）。

然後在高級選項卡下添加以下自定義 CSS。

/** Desktop **/
@media (min-width: 981px){
.col-width .et_pb_gallery_item {
width: 16.66% !important; /*six columns*/
clear: none !important;
}
}

/** Tablet **/
@media (max-width: 980px){
.col-width .et_pb_gallery_item {
width: 25% !important; /*four columns*/
clear: none !important;
}
}

/** Small Tablet and Large Phone **/
@media (max-width: 767px){
.col-width .et_pb_gallery_item {
width: 33.33% !important; /*three columns*/
clear: none !important;
}
}

/** Phone **/
@media (max-width: 479px){
.col-width .et_pb_gallery_item {
width: 50% !important; /*two columns*/
clear: none !important;
}
}