如何在 Divi 中設計可滾動的最近帖子小部件區域

Divi 的側邊欄模塊是一個非常有用的工具，可以將自定義小部件區域集成到您的設計中。 這允許您在 Divi 佈局中顯示任何 WordPress 小部件。 在本教程中，我將向您展示如何在 Divi 中創建可滾動的最近帖子小部件區域。 我將設計一個“來自我們的博客”部分，將最近的帖子小部件區域放在博客模塊的右側。 這將非常適合在主頁或登錄頁面上展示您最近的一些博客文章。

讓我們開始吧！

搶先看

這是我們將在本教程中構建的設計的一個小先睹為快。

免費下載可滾動的最近帖子佈局

要了解本教程中可滾動的近期帖子佈局設計，您首先需要使用下面的按鈕下載它。 要訪問下載，您需要使用下面的表格訂閱我們的 Divi Daily 電子郵件列表。 作為新訂戶，您每週一將收到更多的 Divi 善良和免費的 Divi 佈局包！ 如果您已經在列表中，只需在下面輸入您的電子郵件地址，然後單擊下載。 您不會被“重新訂閱”或收到額外的電子郵件。

下載文件

免費下載

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

下載

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

要將佈局導入您的頁面，只需提取 zip 文件並將 json 文件拖到 Divi Builder 中。

讓我們進入教程好嗎？

訂閱我們的 YouTube 頻道

創建最近的帖子小部件區域

由於我們將在我們的 Divi 佈局中添加一個最近的帖子小部件，我們需要做的第一件事是創建一個新的小部件區域（帶有最近的帖子小部件）以與 Divi 的側邊欄模塊一起使用。

要創建最近的帖子小部件區域，請導航到外觀 > 小部件。 然後通過為小部件區域命名（如果需要，可以稱之為“最近的帖子”）並單擊“創建”按鈕來創建一個新的小部件區域。 刷新頁面以查看可用的新小部件區域。

在頁面左側打開 WordPress 附帶的“最近的帖子”小部件的切換開關。 然後從列表中選擇“最近的帖子”小部件區域並單擊添加小部件將小部件添加到小部件區域。

然後打開最近的帖子小部件區域並使用標題更新最近的帖子小部件。 將要顯示的帖子數量設置為大量，以便我們在設計完成時有足夠的帖子滾動瀏覽。

現在我們已經有了我們的小部件區域，我們可以開始我們的 Divi 設計。

使用可滾動的最近帖子小部件區域創建“來自我們的博客”部分

設計標題部分

用一列行創建一個新的常規部分。

在添加模塊之前，請使用以下內容更新該部分：

背景顏色：#333333
自定義填充：底部 0px

然後通過更新行設置取出行的底部填充：

自定義填充：底部 0px

然後向該行添加一個文本模塊。

然後更新以下文本設置：

對於內容，添加以下 h2 標題 html：

<h2>From our Blog</h2>

然後更新以下文本設置：

標題 2 字體：Roboto
標題 2 字體樣式：TT
標題 2 文本顏色：#ffffff
標題 2 文字大小：40px
標題 2 字母間距：2px

這負責我們佈局的標題。 現在是使用專業部分創建佈局的其餘部分的時候了。

創建專業部分

為佈局的其餘部分使用單獨的專業部分將允許我們在可滾動小部件區域的右側有一個專用的側邊欄。 此外，它還允許我們在與側邊欄區域分開的部分左側調整行的大小和样式。

繼續添加一個帶有右側欄列佈局的專業部分，如下所示：

然後向該部分添加一列行。

在添加模塊之前，讓我們更新我們的部分和行設置。

自定義部分設置

打開專業部分的設置並更新以下內容：

背景顏色：#333333
天溝寬度：2
自定義填充：0px 頂部
第 2 列自定義填充：頂部 0px，底部 0px

自定義行設置

接下來打開行設置並更新以下內容：

高度：640px
頂部邊框寬度：8px
頂部邊框顏色：#444444
底部邊框寬度：8px
底部邊框顏色：#444444

自定義 640 像素高度與我們將添加到專業部分側邊欄的可滾動最近帖子小部件區域的高度相匹配。 這將確保兩者俱有相同的高度，以獲得更美觀的設計。

添加博客模塊

在左側的一列行中，添加一個博客模塊。

然後更新博客模塊設置如下：

帖子數：2

佈局：網格
標題字體：Roboto
元字體：Roboto
元字體重量：輕
元字體樣式：TT
分頁字體：Roboto
分頁字體樣式：TT
分頁文字顏色：#ffffff
分頁文字大小：18px
分頁字母間距：2px

添加可滾動的最近帖子小部件區域

最後，是時候將可滾動的近期帖子添加到我們的佈局中了。 為此，請將側邊欄模塊添加到右側專業部分的側邊欄區域。

然後通過從內容選項卡下的小部件區域下拉列表中選擇您之前創建的“最近的帖子”小部件區域。

然後更新 Title 和 Body 文本設計如下：

標題字體：Roboto
標題字體樣式：TT
標題文字顏色：#ffffff
標題字母間距：2px
正文字體：Roboto
正文字體樣式：下劃線

接下來，隱藏邊框分隔符，如下所示：

顯示邊框分隔符：否

然後給側邊欄模塊一個最大高度和自定義填充如下：

最大高度：640px
自定義填充：頂部 30 像素，底部 30 像素，右側 5%

640 像素的最大高度與相鄰行的 640 像素自定義高度相匹配。

現在我們已經為側邊欄模塊提供了 640 像素的最大高度，我們需要將垂直溢出設置為滾動以獲得我們的可滾動功能。 為此，請轉到“高級”選項卡並更新以下內容：

垂直溢出：滾動

最後結果

就是這樣！ 現在讓我們看看最終的結果。

額外選項：將自定義 CSS 添加到設計滾動條（並非所有瀏覽器都支持）

如果您想要跨瀏覽器支持，在 WordPress 中設置滾動條樣式會有點麻煩。 因此，在大多數情況下，您會希望將其保留為瀏覽器的默認樣式並收工。 但是如果您確實想自定義滾動條以匹配您的頁面設計，您可以添加一些自定義 CSS。 不幸的是，瀏覽器支持僅限於支持 ::webkit 前綴 CSS 屬性的瀏覽器（基本上只有 Safari 和 Chrome）。 這是如何做到的。

打開專業部分的設置並添加以下 CSS 類：

CSS 類：cust-scroll

然後打開頁面設置模式並將以下自定義 CSS 添加到頁面。

/* width */
.cust-scroll ::-webkit-scrollbar {
  width: 8px;
}

/* Track */
.cust-scroll ::-webkit-scrollbar-track {
  background: #444444; 
}
 
/* Handle */
.cust-scroll ::-webkit-scrollbar-thumb {
  background: #888888; 
}

/* Handle on hover */
.cust-scroll ::-webkit-scrollbar-thumb:hover {
  background: #ffffff;
}

這會將滾動條的寬度更改為 8px 並調整軌道和手柄的顏色。 隨意嘗試更多的設計和顏色。

如果您想知道，其他瀏覽器的後備將是瀏覽器滾動條的默認樣式。

最後的想法

每當您想讓用戶選擇在有限空間內查看更多內容時，向內容添加垂直滾動確實會派上用場。 可滾動的最近帖子小部件區域是一個很好的例子，說明垂直滾動可以很好地工作。 當然，您可以用文本模塊替換本教程中使用的側邊欄模塊，並為您想要的任何內容添加垂直滾動。 相同的定制將適用於任何模塊。

關於滾動條的樣式，我確信還有其他插件或 Javascript 解決方案可以提供更多跨瀏覽器的解決方案。 如果您知道任何好的，請隨時與我們分享。

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

乾杯!