Divi 插件亮點 - Divi 時間線模塊

顯示時間順序信息的最有趣的方法之一是使用時間線。 無論是分步說明、簡歷的經驗列表、投資組合的項目列表，還是博客文章，時間表都可以使信息具有視覺吸引力。 您可以使用名為 Divi Timeline Module 的插件在 Divi Builder 中創建自己的時間線。

Divi Timeline Module 是 Tortoise IT 通過 Elegant Marketplace 的第三方插件，向 Divi Builder 添加了幾個新模塊（主模塊和三個配套模塊），以創建兩種不同類型的響應時間線：

1. 一種為時間軸上的每個點創建內容的地方。 時間線中的每個項目都可以有自己的內容、鏈接、顏色、字體、圖標等。
2. 使用來自頁面、帖子、媒體或項目的現有內容。

在本概述中，我將逐步製作兩種類型的時間線，然後我將展示一個構建博客頁面的示例。 對於此概述，我使用來自 Unsplash.com 的免費圖片。 讓我們開始吧。

安裝 Divi 時間軸模塊插件

安裝很簡單。 只需上傳插件並像使用任何插件一樣激活即可。 無需其他設置。

創建時間線

有四個模塊： (Post) – Vertical 、 Content 、 Featured Image和Vertical 。 雖然它適用於多列佈局，但單列佈局效果最好。 時間線 - 垂直或時間線（帖子） -將在頁面內使用垂直。 其餘部分將用於創建佈局。

時間軸垂直

將Timeline – Vertical模塊添加到單列行。

在常規設置中，我們可以添加一個新的時間線項目，為時間線提供標題，並選擇時間線的顏色。 單擊添加新時間線項目以創建每個時間線元素。

單擊添加新時間線項目將打開一個內容編輯器，其中包含文本、媒體、標籤、顯示更多按鈕、圖標、圖標顏色、背景顏色和圖像/圖標動畫。 它還包括所有標準的高級設計設置以及自定義 CSS 。

根據需要添加任意數量的時間線元素。 您可以在此處看到我添加了五個元素並將中心線顏色更改為綠色。 在時間線元素中，我為每個元素選擇了圖標和顏色。

時間軸垂直結果

這是我製作的快速時間表。 它有五個項目——每個項目都有自己的內容和圖標。 我為線條選擇的顏色也添加到內容窗口的底部。 我在包含模塊的部分添加了背景圖像。

當然，通過使用高級設計設置，模塊的樣式可以與頁面相匹配，因此您不必使用白色背景或這些字體。

這是編號說明、簡歷、產品列表、產品組合等步驟的絕佳選擇。

發佈時間軸

您還可以根據您的內容創建時間線。 這包括帖子、頁面、媒體或項目。 它的工作原理可能有點複雜，但很容易創建。

你需要做兩件事：

1. 創建佈局
2. 創建頁面並選擇該佈局

包括創建佈局和頁面所需的所有模塊。 讓我們使用示例博客文章創建一個示例。

創建佈局

首先，創建佈局。 在儀表板中，轉到Divi 、 Divi Library ，然後選擇Add New 。 為佈局指定一個對您有意義的名稱（我選擇了發佈時間線佈局）。 選擇佈局作為模板類型。 不選中Global 。 單擊提交。

您創建的佈局將顯示帖子（或您選擇的帖子類型）。 將此視為創建自己的博客模塊，只有您可以設計帖子的佈局。 不是這樣，但那個例子幫助我很容易地理解它。 嗯，有點像，但不是真的。 繼續。

此佈局是使用插件中包含的Timeline Content 、 Featured Image和Post Title模塊構建的。

要創建佈局，請選擇兩列佈局並將時間軸 – 精選圖像模塊放在右側，將時間軸 – 帖子標題和時間軸 – 內容模塊放在左側。 當然，您可能想稍微嘗試一下佈局，例如僅使用圖像或標題，或者將它們放置在不同的配置中，但讓我們先構建常規佈局。

注意 - 這些模塊不像大多數 Divi Builder 模塊那樣在頁面內使用。 它們旨在用於由Timeline (Posts) – Vertical模塊調用的佈局中。

這是在 Divi Builder 中的佈局。 正如預期的那樣，這些模塊中的每一個都有自己的選項，包括General Settings 、 Advanced Design Settings和Custom CSS 。

我使用的是 1/3、2/3 佈局，但 1/2、1/2 也可以。 這將部分取決於您要使用的特色圖像的大小和要顯示的內容量，以及其他設置，例如字體大小。

放置模塊並選擇所有設置後，選擇Publish右側的Update 。

讓我們仔細看看每個模塊。

特色圖像模塊

特色圖片模塊完全符合您的期望 - 它顯示帖子的特色圖片。 它包括一個下拉框，您可以在其中選擇圖像大小。 它還包括替代文本、標題、在燈箱中打開、鏈接 URL、在同一窗口或新選項卡中打開、動畫、刪除圖像下方的空間、對齊、禁用設備和管理標籤。

我選擇中等圖像尺寸並關閉動畫。

帖子標題模塊

帖子標題模塊可讓您鏈接到內容並更改管理標籤和設置 CSS 設置。 我建議將Link to Content設置保留為Yes 。 我將其餘設置保留為默認值。

內容模塊

內容模塊允許您選擇顯示專家或內容，並顯示“閱讀更多”按鈕。 我將其設置為顯示摘錄和閱讀更多按鈕。

創建頁面

使用 Divi Builder 創建一個新頁面並將時間軸（帖子）-垂直模塊放入單列佈局中。

時間軸（帖子）垂直模塊設置

此模塊將調用您創建的佈局。 在這裡你有很多選項，包括標題、佈局、中心線顏色、時間線上項目的圖標、顯示數字或圖標、圖標/數字顏色和背景顏色、動畫、分頁、帖子類型、要顯示的帖子數量、帖子偏移量（以哪個帖子開頭）、分類法和管理標籤。

為了調用您創建的佈局，請從名為Loop Layout的下拉列表中選擇它。 向下滾動並選擇帖子作為帖子類型以顯示博客帖子。

做出所有選擇後，發布頁面。

發佈時間線結果

結果是一個博客頁面，其中包含我在時間線上的最新帖子。 我已將時間線放在背景圖像上（該圖像已添加到該部分）。 使用此模塊，圖標是全局的。 我已將時間線設置為藍色，帶有棕褐色圖標背景和藍色圖標。 可以使用高級設計設置進一步設置帖子模塊的樣式以匹配頁面。

博客示例

時間線可用於其他佈局。 我想創建一個博客佈局，在頂部顯示一些帖子，然後在時間軸內顯示其餘帖子。

我在單列中創建了一個佈局，頂部是圖像，中間是內容，底部是標題。

然後我創建了一個包含博客模塊和時間軸（帖子）——垂直模塊的頁面。 我將博客模塊設置為在網格中顯示三個帖子。 我將時間軸模塊的偏移量設置為 3，因此它將忽略博客模塊將顯示的帖子並從帖子編號 4 開始。我在它們之間放置了一個文本模塊，並帶有一條消息，提醒訪問者博客下方的內容帖子仍然是博客的一部分。

博客頁面結果

這是博客頁面。 結果是一個乾淨的佈局，引導讀者瀏覽內容。 當然，這不僅僅是一個博客頁面。 這也可用於展示投資組合頁面、藝術品、服務等的項目。

最後的想法

時間線是顯示時間順序或數字數據的絕佳設計元素。 Divi Timeline Module 將此功能添加到 Divi Builder，提供了一種創建自定義時間線或使用頁面、帖子、媒體或項目等內容創建按時間順序排列的時間線以在您的佈局中顯示的簡單方法。

該插件易於使用，您期望從任何 Divi 模塊中獲得的所有設計設置都在這裡。 學習和創建佈局和頁面不需要很長時間，就像使用 Divi Builder 一樣快速和簡單。 如果您想為您的網站添加時間線，Divi Timeline Module 是一個不錯的選擇。

我們想听聽您的意見。 您是否使用過 Divi 時間軸模塊？ 請在評論中告訴我們您的體驗。

精選圖片來自 Ollie The Designer / shutterstock.com