如何使用 Divi 創建漂亮且引人入勝的動態博客帖子英雄部分

每次出現新更新時，您的設計可能性都會增加。 例如，結合動態內容和懸停選項可以帶來驚人的結果。 為了證明這一點，我們將向您展示如何僅使用 Divi 的內置選項創建 3 個令人驚嘆的動態博客文章英雄部分。 我們將逐步指導您完成每個示例，這些示例也將激發您創建自己的變體。

讓我們開始吧！

預覽

在我們深入學習本教程之前，讓我們先看看我們將要創建的所有三個示例的最終結果。

示例#1

示例#2

示例 #3

添加新的博客文章

帖子詳情

首先，首先創建一個新的博客文章。 添加標題、選擇的類別和特色圖片。 完成後，啟用 Divi Builder。

分區頁面設置

在切換到 Visual Builder 之前，更改新博客文章右上角的 Divi 頁面設置。

• 頁面佈局：全角
• 文章標題：隱藏

切換到 Visual Builder

是時候切換到 Visual Builder 開始創建不同的示例了！

創建模塊

添加新部分 + 一列行

在我們分別深入研究每個示例之前，我們將首先創建包含動態內容的文本模塊。 在所有三個示例中，我們將使用這些預製模塊來完成設計。 添加新部分後，使用以下列結構為其添加新行：

帖子標題文本模塊

選擇帖子標題動態內容

我們需要的第一個動態模塊將包含帖子標題。 添加一個新的文本模塊並在動態內容列表中選擇帖子標題。

文字設置

然後，轉到文本設置並進行一些更改。

• 文字字體：Lato
• 文字字體粗細：粗體
• 文字顏色：#000000
• 文字大小：58px（桌面）、45px（平板電腦）、35px（手機）
• 文本行高：1em
• 文字方向：居中

間距

也更改間距值。

• 下邊距：50px
• 頂部填充：10px
• 底部填充：10px

發布發布日期文本模塊

選擇發布發布日期動態內容

我們需要的第二個模塊是包含發布後日期的文本模塊。 繼續添加一個並在動態內容列表中選擇發布發布日期。

文字設置

接下來更改此模塊的文本設置。

• 文字字體粗細：輕
• 文字顏色：#000000
• 文字大小：30px（桌面）、20px（平板電腦）、16px（手機）
• 文字字母間距：14px
• 文字方向：居中

間距

添加一些底部邊距。

• 下邊距：50px

帖子分類文本模塊

選擇類別動態內容

我們將添加的最後一個模塊是包含 Post Categories 動態內容的 Text Module。

文字設置

轉到文本設置並更改文本方向。

• 文字方向：居中

鏈接文字設置

然後，對鏈接文本設置應用一些修改。

• 鏈接字體粗細：超粗
• 鏈接字體樣式：大寫
• 鏈接文字顏色：#000000
• 鏈接文字大小：15px
• 鏈接字母間距：5px

間距

接下來添加底部填充。

• 底部填充：20px

邊界

並以微妙的底部邊框結束。

• 底部邊框寬度：1px
• 底部邊框顏色：#000000

創建示例 #1

添加新部分

間距

讓我們開始創建第一個示例！ 在您創建的上一部分的正下方，繼續添加一個新部分。 打開其設置並刪除所有默認的自定義填充。

• 頂部填充：0px
• 底部填充：0px

添加新行

列結構

繼續添加具有以下列結構的新行：

漿紗

打開這一行的大小設置並進行更改。

• 使這一行全寬：是
• 使用自定義裝訂線寬度：是
• 天溝寬度：1
• 均衡柱高：是

間距

接下來添加一些自定義間距值。

• 頂部填充：0px
• 底部填充：0px
• 第 2 列頂部填充：130px
• 第 2 列底部填充：130px
• 第 2 列左填充：50px
• 第 2 列右填充：50px

將圖像模塊添加到第 1 列

選擇特色圖片動態內容

繼續將圖像模塊添加到第一列。 將模塊鏈接到動態特色圖片，而不是上傳圖片。

邊框默認值

我們還在懸停時添加了右邊框。 為此，請先選擇以下默認邊框寬度：

• 右邊框寬度：0px

邊框懸停

並在懸停時添加以下設置：

• 右邊框寬度：24px
• 右邊框顏色：#FFFFFF

框陰影默認

框陰影也是如此，應用以下默認框陰影設置：

• 框陰影垂直位置：0px
• 框陰影模糊強度：0px
• 框陰影傳播強度：80px
• 陰影顏色：rgba(255,255,255,0)

盒影懸停

並在懸停時更改內容：

• 框陰影水平位置：600px
• 框陰影垂直位置：0px
• 框陰影模糊強度：0px
• 框陰影傳播強度：80px
• 陰影顏色：#E4BAC7

過渡

要創建平滑過渡，請在高級選項卡中更改過渡持續時間。

• 轉換持續時間：1200ms

在第 2 列中放置動態模塊

完成此示例剩下要做的唯一一件事就是將我們在本教程第一部分中創建的模塊放在第二列中。

創建示例 #2

添加新部分

頂部分隔線默認值

進入下一個！ 添加具有以下頂部分隔符的新部分：

• 分隔線樣式：在列表中查找
• 分隔線顏色：#FFFFFF
• 分隔線高度：50px
• 分隔線安排：在部分內容的頂部

頂部分隔線懸停

在懸停時更改分隔線高度。

• 分隔線高度：174px

間距

刪除下一節的所有自定義填充。 這將允許行和部分在接下來的步驟之一中發生衝突。

• 頂部填充：0px
• 底部填充：0px

過渡

要創建平滑的分隔線過渡，請在高級選項卡中更改過渡持續時間。

• 轉換持續時間：500ms

添加新行

列結構

現在，繼續使用以下列結構向您的部分添加一行：

背景顏色默認

為其添加以下背景顏色：

• 背景顏色：#FFFFFF

背景顏色懸停

更改懸停時的背景顏色。

• 背景顏色：rgba(255,255,255,0.56)

特色圖片 動態背景圖片

上傳特色圖片作為動態行背景圖片。 執行此操作後，更改背景圖像混合。

• 背景圖像混合：屏幕

漿紗

通過更改大小設置，允許行佔據屏幕的整個寬度。

• 使這一行全寬：是
• 使用自定義裝訂線寬度：是
• 天溝寬度：1

間距

並添加一些自定義填充間距值。

• 頂部填充：200px
• 底部填充：200px
• 左內邊距：100 像素（桌面）、50 像素（平板電腦）、20 像素（手機）
• 右內邊距：100 像素（桌面）、50 像素（平板電腦）、20 像素（手機）

過渡

最後但並非最不重要的一點是，通過更改過渡持續時間來創建平滑過渡。

• 轉換持續時間：700ms

在列中放置動態模塊

您現在可以將所有動態模塊放在行的列中，第二個示例就完成了！

創建示例 #3

添加新部分

特色圖片 動態背景圖片

繼續最後一個例子！ 添加一個新部分並選擇特色圖片作為部分背景圖片。

默認間距

然後，刪除該部分的所有默認自定義填充。

• 頂部填充：0px
• 底部填充：0px

間距懸停

在懸停時添加一些自定義邊距以創建縮小效果。

• 左內邊距：150 像素（桌面）、50 像素（平板電腦）、30 像素（手機）
• 右內邊距：150 像素（桌面）、50 像素（平板電腦）、30 像素（手機）

過渡

還要更改過渡持續時間。

• 轉換持續時間：500ms

添加新行

列結構

完成修改部分設置後，繼續添加具有以下列結構的新行：

背景顏色默認

添加以下背景顏色：

• 背景顏色：#ffffff

背景顏色懸停

更改懸停時的背景顏色。

• 背景顏色：rgba(255,255,255,0.46)

漸變背景

添加徑向漸變背景。

• 顏色 1：RGBA(41,196,169,0)
• 顏色 2：#ffffff
• 漸變類型：徑向
• 起始位置：29%
• 結束位置：29%

漿紗

更改下一行的大小設置。

• 使這一行全寬：是
• 使用自定義裝訂線寬度：是
• 天溝寬度：1

間距

並添加一些自定義填充值。

• 頂部填充：200px
• 底部填充：200px
• 左內邊距：100 像素（桌面）、50 像素（平板電腦）、20 像素（手機）
• 右內邊距：100 像素（桌面）、50 像素（平板電腦）、20 像素（手機）

過渡

最後但並非最不重要的是，更改過渡持續時間以實現平滑過渡。

• 轉換持續時間：500ms

在列中放置動態模塊

繼續並將所有預製模塊放在行的列中。

更改所有模塊的文本方向

關於這些模塊，您唯一需要更改的是文本方向，您就大功告成了！

• 文本方向：左

預覽

現在我們已經完成了所有步驟，讓我們最後看看我們創建的所有三個示例。

示例#1

示例#2

示例 #3

最後的想法

在這篇文章中，我們向您展示瞭如何將動態內容與 Divi 的懸停選項相結合，以創建令人驚嘆的博客文章英雄部分。 這些示例無疑會激勵您創建自己的變體並個性化您發布的博客文章。 如果您有任何問題或建議，請務必在下方評論區留言！