如何使用 Divi 的 Blurb 模塊創建時間線

在這篇文章中，我們將向您展示如何使用 Divi 的 Blurb 模塊輕鬆創建簡單而優雅的時間線。 我們將結合模塊和行提供的不同選項來實現您可以在下面查看的結果。 我們將分享的示例僅基於內置的 Divi 選項，這意味著您無需添加任何額外的 CSS 代碼！ 我們還確保它在桌面和移動設備上看起來都不錯。

結果

時間線的外觀是通過兩個設計元素實現的； 穿過所有三個 Blurb 模塊和數字的線。 桌面版本如下所示：

移動版本如下所示：

讓我們開始吧！

如何使用 Divi 的 Blurb 模塊創建時間線

訂閱我們的 YouTube 頻道

添加標準部分

部分背景顏色

首先添加一個新的標準部分並使用“rgba(0,0,0,0.12)”作為其背景顏色。

部分填充

轉到“設計”選項卡並使用“300px”的頂部填充。

添加三列行（時間軸）

列背景

創建該部分後，向其添加一個三列行。 在該行的“內容”選項卡中，使用“#e09900”作為第 1 列的背景色、“#0c71c3”作為第 2 列的背景色和“#8300e9”作為第 3 列的背景色。

漿紗

轉到“設計”選項卡，並為“尺寸”子類別使用以下設置：

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

自定義邊距和填充

接下來，將以下自定義填充和自定義邊距添加到該行：

• 頂部填充：1px
• 底部填充：0px
• 下邊距：-200px

並將“3px”添加到每列的頂部和底部填充。

在平板電腦和手機上禁用

最後，在平板電腦和手機上禁用該行。

添加另一個三列行（模糊模塊）

列漸變背景

創建第一個三列行後，您可以繼續在其正下方創建第二個行（它們共享相同的部分）。 每一列都需要具有相同設置但具有不同第一種顏色的漸變背景：

• 第一種顏色：#e09900（第 1 列）、#0c71c3（第 2 列）、#8300e9（第 3 列）
• 第二種顏色：rgba(255, 255, 255, 0)
• 漸變類型：線性
• 梯度方向：180度
• 起始位置：73%
• 結束位置：92%

使行全寬

然後，轉到“設計”選項卡並啟用“使此行全寬”選項。

行自定義填充

打開間距子類別並為行使用以下自定義填充和自定義邊距：

• 頂部填充：0px
• 右填充：60px
• 底部填充：100px
• 左填充：60px
• 上邊距：-100px

還將“5px”添加到每列的頂部填充。

模糊模塊

完成行設置後，您可以向剛創建的行的第一列添加一個 Blurb 模塊。 在內容選項卡的圖像和圖標子類別中，啟用“使用圖標”選項並選擇一個圖標。

向下滾動相同的選項卡並使用“#f4f4f4”作為背景顏色。

轉到“設計”選項卡並對“圖像和圖標”子類別進行以下調整：

• 圖標顏色：#e09900
• 圖像/圖標放置：左
• 使用圖標字體大小：是
• 圖標字體大小：50px

在文本子類別中，確保啟用了左側文本方向。

標題文本子類別的選項如下：

• 標題字體：Crete Round
• 標題文本對齊方式：左
• 標題字體大小：32px
• 標題行高度：1em

然後，打開正文子類別並使用以下設置：

• 正文對齊方式：左
• 正文字體大小：12px
• 車身線高：1.7em

我們還將使用具有以下設置的邊框：

• 使用邊框：是
• 邊框顏色：#000000
• 邊框寬度：2px
• 邊框樣式：虛線

接下來，打開 Sizing 子類別並使用“279px”作為內容寬度和“100%”作為寬度。

最後，將“30px”添加到頂部、右側、底部和左側填充。

文本模塊

添加和修改 Blurb 模塊後，繼續並在其正下方添加一個文本模塊。 文本模塊也需要漸變背景：

• 第一種顏色：#e09900
• 第二種顏色：rgba(255, 255, 255, 0)
• 漸變類型：徑向
• 徑向：中心
• 起始位置：20%
• 結束位置：24%

轉到“設計”選項卡並為“文本”子類別使用以下設置：

• 文字字體大小：21px
• 文字顏色：#FFFFFF
• 文本行高：1.7em
• 文字方向：居中

打開 Sizing 子類別，使用“48%”的寬度並選擇正確的 Module Alignment。

最後，使用“-100px”的頂部邊距並將“50px”添加到頂部和底部填充。

克隆模糊和文本模塊

完成第一列後，您可以克隆兩個模塊並將它們放在其他兩列中。 您唯一需要更改的是第二列的“#0c71c3”和最後一列的“#8300e9”的文本模塊的模糊圖標、模糊顏色和第一個漸變顏色。

在平板電腦和手機上禁用

完成第二行後，請確保也為手機和平板電腦禁用它。

克隆三列行（平板電腦和手機）

平板電腦和手機上的時間線版本略有不同。 使用您在本文前一部分中創建的簡介克隆該行，然後按照後續步驟使其適合手機和平板電腦。

添加行漸變背景

平板電腦和手機上的行將需要以下漸變背景：

• 第一種顏色：rgba(0,0,0,0.7)
• 第二種顏色：rgba(255, 255, 255, 0)
• 漸變類型：線性
• 梯度方向：90度
• 起始位置：1%
• 結束位置：0%

行填充

刪除桌面版本中使用的所有自定義填充和邊距，並將“100px”添加到頂部填充。

在桌面上禁用

最後，不要在手機和平板電腦上禁用該行，而是在桌面上禁用它。

結果

按照帖子中的所有步驟操作後，您應該能夠在桌面上獲得以下結果：

平板電腦和手機上的結果如下：

最後的想法

在這篇文章中，我們向您展示瞭如何只使用內置的 Divi 選項來創建 Blurb 模塊的簡單時間線。 有助於將 Blurb 模塊識別為時間線的兩個因素是連接所有三個 Blurb 模塊和數字的線。 如果您有任何問題或建議； 確保您在下面的評論部分發表評論！

請務必訂閱我們的電子郵件通訊和 YouTube 頻道，這樣您就不會錯過重大公告、有用提示或 Divi 免費贈品！