如何使用 Divi 和 Divi 時間線模塊插件為您的婚禮日程創建時間線

這篇文章是我們迷你係列中的第 5 部分如何使用 Divi 創建一個優雅的婚禮網站。 在本系列中，我們將指導您完成為自己或 Divi 客戶創建婚禮網站的最重要部分。

在迷你係列的前四部分中，我們向您展示瞭如何創建：

• 優雅的婚禮公告頁面
• 一個畫廊頁面
• 禮品清單頁面
• 以及如何在您的婚禮網站上使用 Automatic Divi Testimonials 插件。

我們創建的佈局風格一致且易於創建。

在迷你係列的最後一部分中，我們將向您展示如何使用 Elegant Marketplace 的 Divi 時間線模塊插件為您的婚禮網站製作時間線。 我們將為您提供一個示例，說明如何創建一個漂亮的垂直時間線，讓您的婚禮賓客及時了解新婚夫婦的重要日子將要發生的事情。

示例垂直時間線

我們正在創建的佈局將類似於下面顯示的示例。 我們將討論最重要的步驟，這些步驟將幫助您找到時間線。 閱讀這篇文章後，您可以快速入門，創建自己的婚禮網站並為您的婚禮網站增添更多魅力。

購買插件

如果您還沒有 Divi Timeline Module 插件，則需要在 Elegant Marketplace 的網站上購買。 該插件售價 11 美元。 在他們的網站上購買插件後，您將收到包含要添加到網站的新模塊的 ZIP 文件。

安裝插件

登錄您的 WordPress 網站，然後轉到插件部分中的“添加新”。

上傳您從購買中收到的 ZIP 文件。

激活插件，你就可以開始了。 該插件現在會自動將時間軸模塊添加到您的 Divi 構建器。

在您的網站上使用 Divi 時間線模塊的兩種不同方式

顯示婚禮日程

您的婚禮網站上的時間表確實可以為您的網站帶來額外的附加值。 您可以使用時間線來展示婚禮當天的樣子。 這種在線透明度可以幫助您的客人在婚禮繁忙的日程中找到自己的方式。

您只需要記住提前與您的客人分享您的婚禮網站的鏈接。 這樣，他們就可以隨時隨地訪問信息。

您可以為時間線製作一個單獨的頁面，或決定將其包含在您的其他頁面之一中。 由於時間線在屏幕上佔據了很多位置，我們建議您將一個全新的頁面專用於時間線。

顯示新婚夫婦的關係時間表

除了使用插件製作婚禮日程外，您還可以使用時間線模塊來展示新婚夫婦的關係時間線。 通過包括這對夫婦的相遇方式以及他們在關係中所經歷的不同階段，您可以更多地與客人互動並將故事放在那裡。

不同類型的推薦模塊

下載插件時，您會注意到模塊列表中出現了四個額外的模塊。 所有這些都是時間線，但重點不同。

你有一個帖子、內容、特色圖片、帖子標題和一個普通的垂直一個。 對於我們將在這篇文章中創建的時間線示例，我們將只使用時間線 - 垂直的。 該模塊允許我們立即在內容框中寫下信息，而無需鏈接到網站上的任何其他內容，例如您的帖子。

開始

我們將逐步向您展示如何創建以下時間線：

該模塊響應迅速，在您的桌面以及手機或平板電腦上看起來都不錯。 讓我們開始吧！

添加時間線和時間線項目

由於時間軸模塊是第三方插件，我們將無法使用 Visual Builder 進行任何視覺修改。 這就是為什麼我們將留在網站的後端部分進行所需的更改。

首先添加一個新頁面，專門用於您的時間線。 在該頁面中，您當然需要一個英雄部分。 但是，除此之外，您只需要一個標準的時間線部分。 向頁面添加一個帶有全角行的新標準部分。 接下來，將時間軸 - 垂直模塊放在該全角行中。

現在，在時間線 - 垂直模塊的設置中，您將能夠將不同的時間線項目添加到您正在創建的時間線中。

通常在婚禮期間遵循標準流程。 我們將為以下每個事件創建一個新的時間線項目：

• 新娘的頭髮和化妝
• 婚禮拍攝
• 儀式前
• 儀式
• 雞尾酒時間
• 晚餐開始
• 吐司
• 第一支舞
• 跳舞時間
• 沙漠
• 最後感謝詞

當然，這一切都取決於您如何計劃婚禮當天。 您可以根據需要添加任意數量的時間線項目。

時間軸模塊修改

但在添加時間線項目之前，讓我們通過時間線 - 垂直模塊進行需要應用於所有時間線項目的修改。 轉到時間軸的內容選項卡 - 垂直模塊，並將背景子類別中的中心線顏色更改為“#fae4de”。 這種顏色將應用於時間軸模塊中的所有線條，這些線條讓不同的時間軸項目相互交互。

接下來，轉到“設計”選項卡。 首先，打開 Text 子類別並進行以下更改：

• 文字字體：Raleway Light
• 文本字體樣式：粗體
• 文字字體大小：14px
• 文字顏色：#9b857b
• 文本行高：1em

向下滾動相同的選項卡並對項目標籤文本子類別進行以下更改：

• 物品標籤字體：Raleway Light
• 項目標籤字體樣式：粗體
• 項目標籤字體大小：39px
• 項目標籤文本顏色：#9b857b
• 物品標籤線高：1.5em

此外，對標題文本子類別進行以下更改：

• 標題字體：Tangerine
• 標題字體大小：70px（桌面和平板電腦），60px（平板電腦）
• 標題文字顏色：#9b857b
• 標題行高：1.5em

上面提到的所有修改都將適用於每個時間線項目。 單擊保存並退出。

時間線項目修改

當您查看到目前為止的結果時，您會注意到對整個圖片進行了修改。 現在，我們必須對時間線項目進行個別更改。 首先只添加一個時間線項目。 然後，轉到該時間線項目的“內容”選項卡。 繼續為背景子類別中的時間線項目添加標題。

接下來，添加您希望出現在內容框中的內容（包括斜體時間）並在時間軸標籤字段中寫入一天中的時間。 如果需要，您還可以在同一字段中添加位置。

時間線項目內容

當有人使用桌面訪問您的網站時，在該字段中記錄的內容將顯示在時間軸的另一側。 當有人在手機上查看您的時間線時，不會顯示此標籤。 這就是為什麼我們建議將您想要共享的實用信息也放在內容框中的項目標籤中。 這樣，通過電話訪問網站的人也可以看到信息。

向下滾動相同的選項卡並在項目圖標列表中查找心形圖標，將圖標顏色更改為“#9b857b”，將圖標背景顏色更改為“#fae4de”。

單擊保存，時間線項目將添加到您的時間線。 在我們製作的示例中，我們對所有時間線項目使用相同的設置。 因此，為什麼我們建議您只克隆第一個時間軸項目並相應地進行進一步調整。

根據需要創建盡可能多的時間線項目，以使婚禮日程盡可能清晰地呈現給婚禮賓客。 每次添加新的時間線項目時，它都會自動位於上一個時間線項目的另一側，而無需進行任何手動調整。

包起來

這是迷你劇《如何用 Divi 創建優雅的婚禮網站》的最後一部分。 我們希望這是一系列有價值的帖子，可以幫助您為自己或您的客戶創建一個優雅而令人驚嘆的婚禮網站。 如果您對本教程有任何疑問，或者您對未來的教程/迷你劇有任何要求； 請確保您在此博文的評論部分發表評論，以便我們回复您！

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