如何在 Divi 中使用酷懸停效果按類別佈局設計最近的帖子

我們都習慣於在網站上看到最近的帖子。 它們通常是使用 WordPress 最近發布的小部件或插件生成的，以顯示博客上最近發布的文章。 它們通常出現在博客頁面、帖子底部、側邊欄或登陸頁面的特色部分（類似這樣）。

在本教程中，我們將向您展示如何按類別顯示最近的帖子。 僅使用 Divi Builder（和一些博客模塊），我們將創建一個部分，顯示來自四個不同類別的最新帖子。 最近按類別分類的帖子將包括獨特的類別標籤、動畫和懸停效果——所有這些都沒有插件。

一探究竟！

搶先看

以下是我們將一起構建的按類別佈局的近期帖子的設計和功能的快速瀏覽。

按類別佈局免費下載最近的帖子

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

下載文件

免費下載

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

下載

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

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

讓我們開始教程吧？

你需要什麼開始

首先，您需要執行以下操作：

1. 如果您還沒有安裝並激活 Divi 主題。
2. 在WordPress中新建一個頁面，在前端使用Divi Builder編輯頁面（visual builder）。
3. 此外，最近帖子部分的功能取決於您網站上的實際博客帖子，並為其分配了類別。 因此，如果您使用的是測試站點，請確保您設置了一些模擬博客文章。

之後，您將有一個空白畫布開始在 Divi 中進行設計。

在 Divi 中按類別部分創建最近的帖子

創建一個 4 列的行

要在 Divi Builder 中開始工作，請創建一個 4 列的行。

創建博客模塊 1

四列中的每一列都將包含一個單獨的博客模塊。 將第一個博客模塊添加到第 1 列。

默認情況下，每個博客模塊都會顯示您網站上的最新帖子。 我們要做的就是為該特定博客模塊選擇一個特定類別。 然後我們將帖子數限制為 1，以便只顯示一個帖子。 這將動態地為我們提供該類別的最新博客文章。

博客內容

更新博客內容選項如下：

• 帖子類型：帖子
• 帖子數：1
• 包含的類別：新聞（或您自己的一個）
• 使用帖子摘錄：否
• 摘錄長度：120

元素選項

然後更新元素選項如下：

• 顯示分類： 沒有
• 顯示摘錄：否（桌面），是（懸停和平板電腦）
• 顯示分頁：否

博客設計

然後更新設計如下：

• 背景顏色（桌面）：#ffffff
• 背景顏色（懸停）：#8ac829
• 標題字體粗細：半粗體
• 標題字體樣式：TT
• 標題文字大小：24px
• 標題字母間距：1px
• 標題行高度：1.4em
• 正文顏色：#ffffff
• 元字體重量：輕
• 元字母間距：3px

• 最小高度：450px（桌面），自動（平板）
• 填充：頂部 5%，底部 5%，左側 5%，右側 5%
• 盒子陰影：見截圖
• 動畫風格：縮放

這負責我們第一個博客模塊的設計。 現在我們需要創建我們的自定義類別標籤。

創建類別標籤 1

要創建標籤，請在博客模塊下添加一個新的文本模塊，然後將其拖到博客模塊上方。

文字內容

使用您為博客模塊選擇的類別名稱更新正文內容。 在我的示例中，我將顯示來自新聞類別的最新帖子，因此我將在正文內容中添加“新聞”一詞。

設計類別標籤

在文本設計設置下，更新以下內容：

• 背景顏色：#8ac829
• 文字字體粗細：超粗
• 文字文字顏色：#ffffff
• 文本對齊：居中
• 寬度：120px
• 邊距：頂部 80 像素，底部 -80 像素
• 填充：頂部 10 像素，底部 10 像素
• 動畫風格：淡入淡出
• 動畫延遲：1000ms
• Z指數：1

由於我們使用負邊距將標籤放在博客卡片上，我們需要將 z 索引設置為 1，以便標籤保持在博客模塊上方。

現在我們完成了一篇文章，我們可以部署線框視圖模式並將這些模塊複製到其他列。

複製第 1 列中的文本和博客模塊並將它們粘貼到第 2、3 和 4 列中，以便您在每一列中擁有完全相同的模塊。

對於每個重複的博客模塊，我們需要給它一個新的博客類別和懸停背景顏色。 對於每個重複的類別標籤，我們需要更新類別名稱以與為博客模塊選擇的類別相對應，然後更新背景顏色以匹配博客模塊的懸停背景顏色。

更新第 2 列中的模塊

保持在線框視圖，打開第 2 列中博客模塊的設置，並更新以下內容：

• 包含的類別：企業（或您自己的）
• 背景顏色（懸停）：#f64937

然後更新第 2 列中文本模塊的設置，如下所示：

• 正文：“商業”
• 背景顏色：#f64937

更新第 3 列中的模塊

然後打開第 3 列中博客模塊的設置，並更新以下內容：

• 包含的類別：金錢（或您自己的）
• 背景顏色（懸停）：#6529c7

然後更新第 3 列中文本模塊的設置，如下所示：

• 身體：“錢”
• 背景顏色：#6529c7

更新第 4 列中的模塊

然後打開第 4 列中博客模塊的設置，並更新以下內容：

• 包含的類別：教練（或您自己的）
• 背景顏色（懸停）：#f17809

然後更新第 4 列中文本模塊的設置，如下所示：

• 身體：“教練”
• 背景顏色：#f17809

更新行設置

我們需要對行進行一些調整，包括設置高度和自定義裝訂線寬度。 更新以下行設置：

• 使用自定義裝訂線寬度：是
• 天溝寬度：2
• 寬度：94%
• 最大寬度：1400px
• 高度：540px（桌面），自動（平板）
• 填充：0px 頂部，0px 底部

我們將桌面上的行高設置為 540 像素，以便在將鼠標懸停在博客卡片上時防止行擴展和移動頁面上的其他內容。 確保在平板電腦上將高度設置為自動，這樣您就不會隱藏任何內容。

更新每列的設置

為了給最近的博客文章同時應用到兩個模塊的懸停效果，我們可以將懸停效果添加到包含構成博客文章的兩個模塊的列中。 打開每一列的設置並更新以下內容：

• 變換比例（懸停）：115%

然後將以下自定義 CSS 添加到僅平板電腦顯示器上的主要元素：

transform: none !important

這個小片段將禁用移動設備的變換比例懸停效果。

現在，每當最近的帖子都設置有相應的類別標籤和匹配的背景顏色時，會在將鼠標懸停在卡片上時顯示。 此外，卡片會變大並在懸停時顯示摘錄。

更新部分設置

對於該部分，讓我們給它一個新的背景漸變和一些填充。 打開部分設置並更新以下內容：

• 背景漸變左顏色：#6529c7
• 背景漸變右顏色：#f64937
• 梯度方向：270度
• 填充物：10vw 頂部，10vw 底部

最後結果

就是這樣！ 讓我們看看最終的結果。 此圖像包含一個標題，可以輕鬆添加以完成設計。

這是動畫和懸停效果。

最後的想法

一旦您跳出框框思考，按類別佈局創建最近的帖子確實是一個簡單的過程。 您真正需要做的就是為要顯示的每個類別創建一個博客模塊。 然後將該模塊限制為僅顯示某個類別的最新帖子。 之後，您就可以擁有 Divi 的力量來處理設計。

此佈局可用於您網站上的任何位置，包括主題生成器模板。 因此，請隨時使用可移植性選項將它們導入到任何需要它們的地方。 我希望它對你的下一個項目有用，或者至少給你一點靈感，讓這些輪子轉動以獲得更好的 Divi 設計。

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

乾杯!