如何更改 Divi 博客模塊中的列數

Divi 的博客模塊可以以全角或網格佈局顯示博客文章。 如果選擇網格佈局，則最多可以擁有三列。 在本教程中，我們將探索將 CSS Grid 的強大功能與 Divi 博客模塊相結合，以創建您想要的任意數量的列。 只需幾個 CSS 片段，您的博客就會變成漂亮的多列網格佈局。 此外，這些列將在所有瀏覽器尺寸下流暢響應，因此無需擔心更新這些媒體查詢或響應設置。 在 CSS Grid 魔術之後，您仍然可以使用內置的博客模塊設置來直觀地設計博客，而無需任何自定義 CSS。 因此，如果您正在為您的 Divi 博客尋找更多的專欄，這將起到作用，而且更多。

搶先看

下面是我們將在本教程中構建的設計的快速瀏覽。

這是一個代碼筆，展示了我們將添加到博客模塊中的 CSS 網格佈局。

免費下載佈局

要掌握本教程中的博客模塊設計，您首先需要使用下面的按鈕下載它。 要訪問下載，您需要使用下面的表格訂閱我們的 Divi Daily 電子郵件列表。 作為新訂閱者，您將在每週一收到更多 Divi 福利和免費的 Divi Layout 包！ 如果您已經在列表中，只需在下面輸入您的電子郵件地址，然後單擊下載。 您不會被“重新訂閱”或收到額外的電子郵件。

下載文件

免費下載

加入 Divi 時事通訊，我們將通過電子郵件向您發送終極 Divi 登陸頁面佈局包的副本，以及大量其他令人驚嘆的免費 Divi 資源、提示和技巧。 跟隨，您將立即成為 Divi 大師。 如果您已經訂閱，只需在下面輸入您的電子郵件地址，然後單擊下載以訪問佈局包。

下載

您已成功訂閱。 請檢查您的電子郵件地址以確認您的訂閱並獲得免費的每週 Divi 佈局包！

訂閱我們的 Youtube 頻道

要將部分佈局導入 Divi 庫，請導航到 Divi 庫。

單擊導入按鈕。

在可移植性彈出窗口中，選擇導入選項卡並從您的計算機中選擇下載文件。

然後單擊導入按鈕。

完成後，部分佈局將在 Divi Builder 中可用。

讓我們進入教程，好嗎？

如何使用 CSS Grid 更改 Divi 博客模塊中的列數

為什麼選擇 CSS 網格？

有很多方法可以使用 CSS 為博客模塊製作列佈局。 但是對於這種情況，使用 CSS Grid 是最有意義的。 CSS Grid 屬性是一種流行的方式，只需幾行 CSS，即可為內容創建可預測的響應式網格佈局。 有了它，我們可以將所有博客模塊卡片組織成一個完全響應的網格。 簡而言之，它提供了一個簡單而完整的解決方案，可以為您的 Divi 博客添加您想要的任何列佈局。 事實上，我們還使用它為 Divi 模塊構建了網格佈局。

現在，讓我們將注意力轉向博客模塊。

設置具有全角佈局的博客模塊

Divi 博客模塊可用於在您網站的任何位置添加博客。 這使得在 Divi 中構建博客頁面變得非常容易。 您需要做的就是使用 Divi Builder 將博客模塊添加到頁面。

對於本教程，我們將使用我們的一個免費佈局包中的預製博客頁面模板，該模板已經有一個帶有一些基本樣式的博客模塊。 要將預製的博客頁面佈局加載到您的頁面，請打開底部的設置菜單，然後打開從庫中添加彈出窗口。 從那裡，搜索並找到時尚設計博客頁面佈局並將其加載到頁面。

加載佈局後，找到用於顯示博客文章的博客模塊並打開博客模塊設置。

設置帖子計數

在博客設置中，更新內容以將帖子數限制為 10。（這主要是出於審美原因，因為我們的網格最終會在桌面上包含兩行五篇博文。）

• 帖子數：10

選擇全角佈局

由於我們將使用 CSS Grid 為我們的博客創建列佈局，因此我們需要確保博客模塊佈局是全角的（而不是網格）。 這將確保博客文章按照文檔/頁面的正常順序垂直堆疊。

要更改博客模塊的佈局，請打開博客模塊設置，然後在設計選項卡下，打開佈局下拉菜單並選擇全寬。

現在每篇博文都應該跨越列（或父容器）的整個寬度。

只是為了好玩，讓我們為博客文章添加一個邊框，以便我們可以更好地了解添加 CSS 時網格佈局的外觀。 更新邊框選項如下：

• 邊框寬度：1px
• 邊框顏色：rgba(150,104,70,0.35)

將自定義 CSS 類添加到博客模塊

為了使用我們的 CSS 有效地針對這個特定的博客模塊（沒有其他），我們需要給我們的模塊一個自定義的 CSS 類。 在高級選項卡下，添加以下 CSS 類：

• CSS 類：et-blog-css-grid

使用 CSS Grid 創建多列佈局

現在我們的博客模塊設置了全角佈局，我們準備添加我們的自定義 CSS。 現在，我們將使用代碼模塊將 CSS 添加到頁面中。 但是，當我們完成後，您始終可以將 CSS 移動到您喜歡的位置（例如主題選項中的自定義 CSS 或您的子主題的 style.css）。

在博客模塊下添加一個新的代碼模塊。

在代碼輸入框中，添加必要的樣式標籤，以包裝添加到頁面的任何 CSS 代碼。

在樣式標籤內，粘貼以下 CSS 片段：

.et-blog-css-grid > div {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 20px;
}

CSS 的第一行根據 CSS 網格模塊對內容（或模塊）進行佈局。

顯示：網格；

CSS 的第二行定義了網格的列模板。

網格模板列：重複（自動填充，最小最大（200px，1fr））；

第三行確定網格項目之間的間隙間距（如裝訂線寬度）。

間隙：20px；

CSS 網格列如何工作

在這種情況下，網格會根據需要重複添加列，以填滿網格容器的剩餘空間。 每列的最小寬度為 200px，最大寬度為 1fr（與 auto 完全相同）。 這意味著當父容器（Divi 行/列）的最大寬度為 1080 像素時，網格將有 5 列。 每列的寬度為 200 像素（最小寬度），等於 1000 像素。 添加 4 個 20px 的網格間隙，總共得到 1080px。 一旦視口將網格壓縮到 1080 像素以下，CSS 網格的魔力就會接管並用博客文章填充每個可用空間，直到它們達到 200 像素寬度。 默認情況下，新行將在需要時自動創建。

要獲得更多列，您可以將 200px minmax 值更改為更小的值，或者將 Divi 行的最大寬度增加到大於 1080px 的值。

這是一個演示我們在此處添加的 CSS 網格佈局功能的代碼筆。

至此，五列響應式網格已準備就緒。 事實上，你不打算為你的博客文章使用分頁或邊框，你可以在這裡停下來。

這是迄今為止的結果。

設置博客帖子卡片（或網格項目）的樣式

接下來，我們可以添加幾行針對網格項目（或博客明信片）的 CSS，以便它們與每一行的頂部對齊並有一點填充。

.et-blog-css-grid .et_pb_post {
  align-self: start;
  padding: 15px;
}

從網格中刪除分頁

目前，如果您在博客模塊上啟用了分頁，它將被視為 CSS 網格中的最後一個網格項。 要將分頁完全從網格中移除，我們可以給它一個絕對位置並將其直接放在博客模塊下。 為此，請添加以下 CSS：

.et-blog-css-grid > div > div {
  width: 100%;
  position: absolute;
  bottom: 0;
  transform: translate(0%, 150%);
}

現在分頁鏈接安全地位於網格之外，因此它不會在不同的視口寬度上移動。

讓我們看看到目前為止的結果！

額外提示：調整所有特色圖像（或縮略圖）的大小

此時，您可能會注意到每張博客明信片上的特色圖片的高度不一致。 如果您想讓它們都具有相同的高度，您也可以使用額外的 CSS 來做到這一點。

.et-blog-css-grid .entry-featured-image-url {
  padding-top: 56.25%;
}
.et-blog-css-grid .entry-featured-image-url img {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  object-fit: cover;
}

第一個片段以特色圖像容器為目標，並添加了一個基本調整圖像容器高度的填充百分比。 但是第一個片段在我們定位特色圖像使其完全適合圖像容器的中心之前不起作用。 為此，我們給圖像一個絕對位置，並使用“object-fit:cover”使圖像跨越容器的整個寬度和高度。

使用 56.25% 的頂部填充，我們應該為所有圖像獲得 16:9 的縱橫比。

隨意調整圖像容器上的填充以獲得圖像所需的縱橫比。

最後結果

這是我們添加到代碼模塊的整個 CSS 的另一個視圖，並帶有一些註釋。

/* create css grid column template */
.et-blog-css-grid > div {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 20px;
}
/* style css grid item or blog post */
.et-blog-css-grid .et_pb_post {
  align-self: start;
  padding: 15px;
}

/* remove pagination from blog module grid with absolute position */
.et-blog-css-grid > div > div {
  width: 100%;
  position: absolute;
  bottom: 0;
  transform: translate(0%, 150%);
}

/* Resize Featured Image Thumbnails */
.et-blog-css-grid .entry-featured-image-url {
  padding-top: 56.25%;
}
.et-blog-css-grid .entry-featured-image-url img {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  object-fit: cover;
}

這是我們的博客模塊的最後一次展示，其中包含我們的新列和網格佈局。

最後的想法

使用 CSS Grid 只需幾行 CSS 就能完成的事情總是讓我感到驚訝。 在這種情況下，我們能夠將整個 Divi 博客模塊重組為流暢的五列佈局。 最好的部分是您不必擔心使用媒體查詢！ 希望這可以節省您的時間，並為您提供更多選擇來構建漂亮的博客頁面。

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

乾杯!