如何在 Divi 中創建垂直粘性時間線佈局

當用戶向下滾動頁面時，創建垂直粘性時間線對於按年和/或月對內容進行分類非常有用。 粘性日期元素在內容旁邊保持固定，以方便用戶提升用戶體驗。

在本教程中，我們將向您展示如何在 Divi 中創建完整的垂直粘性時間線佈局。 此設計的關鍵是 (1) 為您的列提供自定義寬度，以便日期元素不會在移動設備上佔用過多的水平空間，以及 (2) 使年和月具有粘性，並對該部分具有粘性限制（年份）和行（月份）。

儘管此佈局具有多方面的應用程序，但我們將構建一個時間線佈局來展示按月和年分類的照片畫廊。

讓我們開始吧！

搶先看

這是我們將在本教程中構建的設計的快速瀏覽。

免費下載佈局

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

下載文件

免費下載

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

下載

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

要將部分佈局導入您的 Divi 庫，請導航到 Divi 庫。

單擊導入按鈕。

在可移植性彈出窗口中，選擇導入選項卡並從您的計算機中選擇下載文件。

然後點擊導入按鈕。

完成後，分區佈局將在 Divi Builder 中可用。

讓我們進入教程，好嗎？

你需要什麼開始

首先，您需要執行以下操作：

1. 如果您還沒有安裝並激活 Divi 主題。
2. 在WordPress中新建一個頁面，在前端使用Divi Builder編輯頁面（visual builder）。
3. 選擇“從頭開始構建”選項。

之後，您將有一個空白畫布開始在 Divi 中進行設計。

第 1 部分：構建棒標題

我們要設計的第一個元素是粘性標題，它將在滾動時保持固定在頁面頂部。

添加行

首先，向該部分添加五分之二五分之三的列佈局。

左標題文本

在左欄中，我們將添加位於頁面左側的時間線的標題。 為此，請將文本模塊添加到左列。

然後將文本“時間軸”添加到文本模塊的正文中。

在設計選項卡下，更新以下文本樣式：

• 文字字體：氧氣
• 文字字體粗細：粗體
• 文字字體樣式：TT
• 文字文字顏色：#666666
• 文字大小：50px（桌面）、30px（平板電腦）、18px（手機）
• 文本行高：1em
• 文本對齊：右

然後也更新填充：

• 內邊距：5px 頂部

右標題文本

要為頁面右側的圖庫內容創建標題，請複制左欄中的文本模塊並將其粘貼到右欄中。

然後打開重複的文本模塊設置並更新以下內容：

• 文字文字顏色：#c22969
• 文本對齊方式：左（桌面），左（平板）

行設置

為了給我們在移動設備上需要的房間，我們需要按如下方式更新行設置：

• 天溝寬度：1
• 寬度：100%
• 最大寬度：1280px
• 填充：頂部 10 像素，底部 10 像素

在高級選項卡下，將以下自定義 CSS 添加到平板電腦上的主元素：

display:flex;
flex-wrap:nowrap;

左欄設置

因為我們使用的行間距寬度為 1，所以列之間沒有間距。 要添加足夠的間距，請打開第 1 列的設置並按如下方式更新填充：

• 填充（桌面）：頂部 10 像素，底部 10 像素，左側 20 像素，右側 20 像素
• 填充（平板電腦）：底部 10 像素，左側 10 像素，右側 10 像素

接下來，我們要覆蓋平板電腦和手機上的默認左列寬度，使其為行寬的 30%。 這將匹配我們要添加到下面時間線中的列的列寬。

為此，請打開左列 (column1) 的設置並將以下 CSS 添加到平板電腦上的主要元素：

width: 30% !important;

對於右列，我們要添加與第 1 列相同的填充。我們將向列添加左邊框作為分隔線，如下所示：

• 填充（桌面）：頂部 10 像素，底部 10 像素，左側 20 像素，右側 20 像素
• 填充（平板電腦）：底部 10 像素，左側 10 像素，右側 10 像素
• 左邊框寬度：2px
• 左邊框顏色：#333333

我們還希望右列的寬度為行寬度的 70%。 要更新列寬，請打開第 2 列的設置並將以下 CSS 添加到平板電腦上的主要元素：

width: 70% !important;

部分設置

要完成標題設計，請打開部分設置，並更新背景顏色：

• 背景顏色：#222222

然後更新部分填充：

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

要使該部分具有粘性，請轉到“高級”選項卡並更新以下內容：

• 粘滯位置：粘在頂部

第 2 部分：創建粘性時間線

設計的下一部分是我們創建佈局的粘性時間線部分的地方。 這裡的關鍵是設計第一個部分、行和模塊，所有元素都到位。 然後我們可以根據需要復制每個部分或行。

添加部分

首先，在我們剛剛完成的標題部分下添加一個新的常規部分。

在我們開始添加行和內容之前，打開部分設置並更新以下內容：

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

添加行、行樣式和列結構

接下來，為該部分創建五分之一五分之三的列行。

要快速啟動行的設計，請複制上面標題部分中的行樣式並將其粘貼到新行中。

然後打開新行的設置並更新以下內容：

• 填充：頂部 50 像素，底部 50 像素

然後將自定義 CSS 添加到平板電腦上的主元素，如下所示：

display:flex;
flex-wrap:nowrap;

創造粘​​性年

時間線的第一個粘性日期元素將是年份。 這個“年份”文本元素將粘在滾動部分的頂部。

要創建年份文本元素，請將新文本模塊添加到第 1 列。

然後在正文中添加文本“2020”。

在設計選項卡下，更新文本樣式如下：

• 文字字體：氧氣
• 文字字體粗細：粗體
• 文字 文字大小：40px（桌面）、24px（平板電腦）、18px（手機）
• 文字對齊：右

要使年份保持在該部分的頂部，請更新以下內容：

• 粘滯位置：粘在頂部
• 粘性頂部偏移：50px
• 底部粘性限制：部分

創建粘性月份

要創建粘性月份文本，請複制包含粘性年份的文本模塊並將其粘貼到第 2 列中。

然後打開第 2 列中新文本模塊的設置，並使用“dec”（月份縮寫）更新文本正文。

月份文本需要粘在行的頂部而不是部分，因此更新粘滯限制如下：

• 底部粘性限制：行

添加圖庫內容

在最右側的列（​​第 3 列）中，我們將添加與特定月/年相關的內容。 在這種情況下，我們將添加一個畫廊模塊來顯示圖像畫廊。

要創建圖庫，請在第 3 列中添加圖庫模塊。

然後將至少 6 張圖像添加到圖庫（或您想要的任意數量）並更新以下內容：

• 圖片數量：6
• 顯示標題和說明：否
• 如何分頁：否

在設計選項卡下，更新以下內容：

• 填充：左 3%，右 3%

要在圖庫項之間創建一些自定義間距，請將以下自定義 CSS 添加到圖庫項 CSS：

padding: 0 1% 2% 1%;

更新列寬和間距

就像我們對標題部分中的列所做的一樣，我們將為我們的列提供自定義間距和寬度（一個移動設備），以便它們與標題對齊並在平板電腦和手機上看起來很好。

第 1 欄

打開第 1 列的設置並更新以下內容：

• 填充：左 1%，右 2%

在高級選項卡下，將以下自定義 CSS 添加到平板電腦上的主元素：

width: 15% !important;

然後打開第 2 列的設置並添加相同的填充和 CSS，如下所示：

• 填充：左 1%，右 2%

主要元素 CSS（平板電腦）：

width: 15% !important;

然後打開第 3 列的設置並更新填充和主元素 CSS，如下所示：

• 填充：左 1%，右 2%

主要元素 CSS（平板電腦）：

width: 70% !important;

複製額外月份的行

第一行完成後，我們可以將該行複制幾個月。

複製該行。

在重複行中，取出年份的文本。 我們每個部分只需要一年，因為年份將粘在該部分的頂部和底部。

然後打開月份的文本並用新月份更新月份縮寫。

複製額外年份的部分

以同樣的方式，我們將行複制幾個月，我們可以復制整個部分額外的年份。

繼續複製我們剛剛為 2020 內容創建的部分。

在重複部分中，使用年份“2019”更新第 1 行第 1 列中的年份文本。

您可以繼續此過程，根據時間線佈局的需要構建額外的年份和月份。

最後結果

查看最終結果。

最後的想法

此時間線佈局的設計工作首當其衝是通過提供文本大小和列寬移動特定樣式來使其響應。 但是，使用 Divi 的內置選項，日期元素的粘性定位非常容易。 希望這對未來的項目有用。 我可以看到這有助於展示關於頁面甚至資源頁面、下載頁面或產品更新的歷史時間線。

我期待在評論中收到您的來信。

乾杯!