下載使用 Divi 的轉換選項製作的免費時間線部分

在構建內容時，創建時間線是讓信息對訪問者保持趣味性和吸引力的好方法。 它還可以幫助他們更快地瀏覽和處理他們閱讀的信息。 當您使用漂亮的設計時，它也會提升頁面的整體外觀和感覺。 在這篇文章中，我們將向您展示如何使用 Divi 的轉換選項創建令人驚嘆的時間線部分。 我們將重新創建的設計將在較小的屏幕尺寸上保持響應。

讓我們開始吧！

預覽

在我們深入學習教程之前，讓我們快速瀏覽一下不同屏幕尺寸的結果。

桌面

移動的

免費下載時間線部分佈局

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

下載文件

免費下載

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

下載

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

讓我們開始重建吧！

訂閱我們的 YouTube 頻道

添加新部分

間距

創建一個新頁面或打開一個現有頁面並向其中添加一個常規部分。 打開部分設置，轉到間距設置並添加一些自定義的頂部和底部填充。

• 頂部填充：12vw
• 底部填充：0vw

添加第 1 行

列結構

繼續使用以下列結構向該部分添加新行：

漿紗

尚未添加任何模塊，打開行設置。 轉到設計選項卡中的大小設置，並允許行佔據屏幕的整個寬度。

• 使用自定義裝訂線寬度：是
• 天溝寬度：1
• 寬度：100%
• 最大寬度：100%

能見度

我們將使用這一行在接下來的步驟中添加插圖。 不過，我們只需要在桌面上使用該插圖。 這就是我們將在平板電腦和手機上隱藏整行的原因。

添加圖像模塊

上傳插圖

正如在這篇文章的上一步中提到的，我們需要這一行的唯一原因是添加時間線插圖。 您可以在本文開頭下載的文件夾中找到它。 找到它後，將其上傳到新的圖像模塊。

漿紗

為了確保所有屏幕尺寸的所有內容都保持響應，我們將在圖像模塊的尺寸設置中啟用“強制全寬”選項。

• 強制全角：是

添加第 2 行

列結構

繼續向該部分添加第二行，使用以下列結構：

漿紗

還沒有添加任何模塊，打開行設置並允許行佔據屏幕的整個寬度。

• 使用自定義裝訂線寬度：是
• 天溝寬度：1
• 寬度：100%
• 最大寬度：100%

間距

然後，轉到間距設置。 在這裡，我們希望通過刪除所有自定義頂部和底部填充來限制行（在桌面上）佔用的空間。 我們在較小的屏幕尺寸上保留了一些頂部和底部填充。

• 頂部填充：0px（桌面），15vw（平板電腦和手機）
• 底部填充：0px（桌面），15vw（平板電腦和手機）

將 Blurb 模塊添加到第 1 列

添加內容

是時候開始添加模塊了！ 將 Blurb 模塊添加到第 1 列。輸入您選擇的一些內容。

選擇圖標

繼續選擇您選擇的圖標。

漸變背景

還要添加漸變背景。

• 顏色 1：#a5c4ff
• 顏色 2：#ffffff
• 起始位置：40%
• 結束位置：40%

圖標設置

然後，轉到設計選項卡並更改圖標設置。

• 圖標顏色：#ffffff
• 圖標位置：頂部
• 使用圖標字體大小：是
• 圖標字體大小：5vw（桌面）、17vw（平板電腦）、18vw（手機）

標題文字設置

轉到標題文本設置並相應地修改選項：

• 標題字體：Didact Gothic
• 標題字體粗細：粗體
• 標題文本對齊：居中
• 標題文字大小：1.1vw（桌面）、2.7vw（平板電腦）、4vw（手機）
• 標題行高度：2.8em

正文設置

對正文設置做同樣的事情。

• 正文字體：Open Sans
• 正文對齊方式：居中
• 正文大小：0.7vw（桌面）、1.5vw（平板電腦）、2.1vw（手機）
• 車身線高：2em

間距

我們還添加了一些自定義邊距和填充值，我們將根據不同的屏幕尺寸進行自定義。

• 左邊距：3vw
• 右邊距：3vw
• 下邊距：5vw（平板電腦），7vw（手機）
• 頂部填充：2vw（台式機），6vw（平板電腦和手機）
• 底部填充：2vw（台式機），6vw（平板電腦和手機）
• 左填充：3vw（台式機）、9vw（平板電腦和手機）
• 右填充：3vw（台式機）、9vw（平板電腦和手機）

邊界

移至邊框設置並為每個角添加“20px”。

盒子陰影

最後但並非最不重要的一點是，通過向 Blurb 模塊添加微妙的框陰影在頁面上創建一些深度。

• 框陰影模糊強度：80px
• 陰影顏色：rgba(0,0,0,0.1)

克隆 Blurb 模塊三次並在剩餘列中放置重複項

完成創建和自定義 Blurb 模塊後，您可以將其克隆 3 次。 將重複項放在行的其餘列中。

更改副本 #1 的漸變背景

打開第一個副本（第 2 列中的模糊模塊）並修改漸變背景的第一種顏色。

• 顏色 1：#ffa5ae

更改副本 #2 的漸變背景

對第 3 列中的 Blurb 模塊執行相同的操作。

• 顏色 1：#f7e3a0

更改副本 #3 的漸變背景

並修改最後一個 Blurb Module 的漸變背景。

• 顏色 1：#caa5ff

將變換設置添加到 Blurb 模塊

將 Transform Translate 添加到 Blurb 模塊 #1

現在我們擁有了所有需要的設計元素，我們可以開始改變它們的位置了！ 為此，我們將使用轉換轉換選項。 打開第 1 列中的 Blurb 模塊並相應地修改值：

• 底部：2vw（台式機），0vw（平板電腦和手機）
• 右：-106vw（台式機），0vw（平板電腦和手機）

將 Transform Translate 添加到 Blurb 模塊 #2

轉到第二個 Blurb 模塊並相應地更改變換平移值：

• 底部：16.6vw（底部），0vw（平板電腦和手機）
• 右：-78vw（右），0vw（平板電腦和手機）

將 Transform Translate 添加到 Blurb 模塊 #3

接下來打開第 3 列中的 Blurb 模塊，並使用以下變換平移值：

• 底部：17vw（台式機），0vw（平板電腦和手機）
• 右：-46vw（台式機），0vw（平板電腦和手機）

將 Transform Translate 添加到 Blurb 模塊 #4

對最後一個 Blurb 模塊執行相同的操作，使用以下值：

• 底部：-66vw（台式機），0vw（平板電腦和手機）
• 右：-24vw（台式機），0vw（平板電腦和手機）

將負下邊距添加到第 2 行

使用變換平移選項不會刪除最初由行中的 Blurb 模塊佔用的空間。 為了擺脫這個空間，我們可以在行中添加一些負底邊距，我們就完成了！

• 下邊距：-15vw（台式機），0vw（平板電腦和手機）

預覽

現在我們已經完成了所有步驟，讓我們最後看看結果。

桌面

移動的

最後的想法

在這篇文章中，我們向您展示瞭如何使用 Divi 的新變換選項創建漂亮的時間線部分。 在教程開始時，您可以免費下載 JSON 文件和插圖！ 這應該可以幫助您立即開始。 如果您有任何問題或建議，請務必在下面的評論部分留言。