如何使用 Divi 的粘性選項在滾動上構建交互式列表

Divi 的粘性選項讓您可以毫不費力地為您創建和設計的頁面添加交互。 如果您正在尋找一種方法來提及多個項目，而不僅僅是創建靜態列表，那麼您會喜歡本教程。 今天，我們將向您展示如何使用 Divi 的粘性選項在滾動上構建交互式列表。 當人們向下滾動該部分時，左側的列表中會添加不同的項目。 這有助於保持概覽。 您還可以下載免費的 JSON 文件！

讓我們開始吧。

預覽

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

桌面

移動的

免費下載佈局

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

下載文件

免費下載

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

下載

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

創建元素結構

添加新部分

背景顏色

首先向您正在處理的頁面添加一個新部分。 為該部分添加背景顏色。

• 背景顏色：#f2f2f2

添加行

列結構

繼續使用以下列結構添加新行：

漿紗

在不添加模塊的情況下，打開行設置並按如下方式更改大小設置：

• 寬度：100%
• 最大寬度：100%

第 1 列背景顏色

然後，打開第 1 列設置並添加背景顏色。

• 背景顏色：#f2f2f2

第 1 列間距

接下來修改列的間距設置。

• 頂部填充：
  • 平板電腦：20px
  • 電話：20px
• 底部填充：
  • 平板電腦：20px
  • 電話：20px
• 左填充：3%
• 右填充：3%

第 1 列 Z 索引

並在高級選項卡中增加列的 z 索引。

• Z指數：12

將文本模塊 #1 添加到第 1 列

添加內容

是時候添加模塊了，從第 1 列中的第一個文本模塊開始。添加一些您選擇的內容。

文字設置

轉到模塊的設計選項卡並按如下方式更改文本設置：

• 文字字體：Playfair Display
• 文字字體粗細：粗體
• 文本字體樣式：斜體
• 文字顏色：#bfbfbf
• 字體大小：
  • 台式機：2vw
  • 平板電腦：5vw
  • 電話：8vw
• 文本行高：1em

將文本模塊 #2 添加到第 2 列

添加H3內容

將另一個文本模塊添加到具有您選擇的一些 H3 內容的列中。

H3 文本設置

轉到模塊的設計選項卡並按如下方式更改 H3 文本設置：

• 標題 3 字體：Playfair Display
• 標題 3 字體粗細：粗體
• 標題 3 文本顏色：#000000
• 標題 3 文字大小：
  • 台式機：3vw
  • 平板電腦：10vw
  • 電話：12vw

間距

接下來添加一些自定義的頂部和底部邊距。

• 最高邊距：2vh
• 底邊距：2vh

變換比例

然後，應用一些自定義變換比例設置。

• 兩者：300%

轉換 翻譯

並通過應用以下轉換轉換設置來完成模塊設置：

• 底部：30%

將分頻器模塊添加到第 1 列

能見度

我們在第 1 列中需要的最後一個模塊是分頻器模塊。 確保啟用了“顯示分隔線”選項。

• 顯示分隔線：是

線

轉到模塊的設計選項卡並相應地更改線路設置：

• 線條顏色：#000000
• 線型：實心
• 線路位置：頂部

漿紗

也修改模塊的大小設置。

• 分隔線重量：4px
• 分隔線高度：4px

將圖像模塊添加到第 2 列

將圖像框留空

在第 2 列中，我們將添加的第一個模塊是圖像模塊。 將圖像框留空。

背景圖片

改用背景圖像。

• 背景圖片尺寸：封面
• 背景圖片位置：中心

間距

為了讓背景圖像顯示出來，我們將修改間距設置如下：

• 最高保證金：
  • 台式機：15vh
  • 平板電腦和手機：0vh
• 頂部填充：33vh
• 底部填充：33vh

將文本模塊添加到第 2 列

添加內容

我們需要的下一個也是最後一個模塊是圖像模塊下方的文本模塊。 添加一些您選擇的描述內容。

文字設置

轉到模塊的設計選項卡並按如下方式更改文本設置：

• 文字字體：小屋
• 文字顏色：#000000
• 字體大小：
  • 台式機：1.2vw
  • 平板電腦：2.3vw
  • 電話：3.4vw
• 文本行高：1.6em

間距

通過相應地更改模塊的間距設置來完成模塊設置：

• 左填充：
  • 平板電腦和手機：5%
• 右填充：5%

應用粘性效果

將第 1 列變為粘性

現在所有元素都已就位，我們可以開始應用粘性設置。 打開第 1 列設置並在高級選項卡中使用以下響應式粘性設置：

• 粘滯位置：粘在頂部
• 底部粘性限制
  • 桌面：部分
  • 平板電腦和手機：行
• 從周圍的粘性元素偏移：
  • 台式機：是
  • 平板電腦和手機：否
• 過渡默認和粘性樣式：是

第 1 列中的文本模塊 #1：粘性設置

高度

現在第 1 列已變為粘性，我們可以開始對該列內的元素應用一些粘性設置。 我們將從第一個文本模塊的高度開始。

• 高度：0px
• 粘性高度：自動

不透明度

我們也在修改不透明度。

• 不透明度：0%
• 粘性不透明度：100%

第 1 列中的文本模塊 #2：粘性設置

變換比例

接下來，我們將打開第 1 列中的第二個文本模塊。在粘性狀態下將變換比例值恢復為“100%”。

• 兩者都粘：100%

轉換 翻譯

也更改粘性轉換翻譯設置。

• 粘底：0%

過渡

並通過在高級選項卡中增加過渡持續時間來完成模塊設置。

• 過渡：1000ms

分隔線模塊：粘性設置

最大寬度

最後但並非最不重要的一點是，我們還將修改分隔線模塊的最大寬度。

• 最大寬度：0px
• 粘性最大寬度：120px

克隆行兩次

完成第一行後，您可以將其克隆兩次。

更改所有內容和圖像

確保您更改了所有內容和圖像，就大功告成了！

預覽

現在我們已經完成了所有步驟，讓我們最後看看不同屏幕尺寸的結果。

桌面

移動的

最後的想法

在這篇文章中，我們向您展示瞭如何使用 Divi 的粘性選項發揮創意。 更具體地說，我們向您展示瞭如何在滾動時構建交互式列表。 當人們向下滾動部分設計時，列表中的不同項目會收集在左側。 這提供了結構化的概述並幫助您創建交互式設計。 您可以將此方法用於要在頁面上共享的任何類型的列表！ 您也可以免費下載 JSON 文件。 如果您有任何問題或建議，請隨時在下面的評論部分發表評論。

如果您渴望了解有關 Divi 的更多信息並獲得更多 Divi 免費贈品，請確保訂閱我們的電子郵件時事通訊和 YouTube 頻道，這樣您將永遠是第一批了解此免費內容並從中受益的人之一。