如何使用 Divi 的粘性選項在滾動上堆疊行

自從 Divi 的粘性選項問世以來，我們已經向您展示瞭如何在整個網站構建中使用不同功能的方法，尤其是在標題內部。 但是有很多方法可以使用粘性選項來增強人們在您網站上的用戶體驗並使您的網站大放異彩。 例如，在今天的教程中，我們將向您展示如何使用 Divi 的粘性選項在滾動時堆疊行。 只要一行觸及視口的頂部，它就會開始移到下一行的下方，這會產生看起來很漂亮的堆疊效果。 我們將從頭開始重新創建設計，您也可以免費下載該部分的 JSON 文件！

讓我們開始吧。

預覽

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

桌面

移動的

免費下載行堆疊佈局

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

下載文件

免費下載

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

下載

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

1. 創建第一行概念

添加新部分

間距

在本教程的第一部分，我們將開始奠定第一行的基礎。 一旦我們完成了第一行元素的樣式，我們就可以完全重用它來創建行堆疊效果。 向您正在處理的頁面添加一個新部分。 打開部分設置並在不同的屏幕尺寸上應用一些自定義填充值。

• 頂部填充：
  • 桌面：100px
  • 平板電腦：40px
  • 電話：25px
• 底部填充：
  • 桌面：100px
  • 平板電腦：40px
  • 電話：25px

添加新行

列結構

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

漿紗

尚未添加任何模塊，打開行設置並應用以下大小設置：

• 使用自定義裝訂線寬度：是
• 天溝寬度：1
• 均衡柱高：是
• 寬度：90%
• 最大寬度：2580px

間距

接下來，刪除所有默認的頂部和底部填充。

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

第 1 列設置

背景顏色

然後，打開第 1 列設置並應用您選擇的背景顏色。

• 背景顏色：#2b343b

背景圖片

也使用背景圖像。 如果您想使用本教程中顯示的那些，請下載教程開頭的壓縮文件夾並將背景圖像上傳到您的媒體庫。

• 背景圖片尺寸：適合

間距

轉到列的設計選項卡，然後在不同的屏幕尺寸上應用以下填充值：

• 頂部填充：
  • 台式機：25%
  • 平板電腦：40%
  • 電話：50%
• 底部填充：
  • 台式機：25%
  • 平板電腦：40%
  • 電話：50%
• 左填充：5%
• 右填充：5%

第 2 列設置

背景顏色

然後，打開第二列並在那裡使用背景顏色。

• 背景顏色：#394751

間距

以及一些自定義填充值。

• 頂部填充：13%
• 底部填充：13%
• 左填充：8%
• 右填充：8%

盒子陰影

還有一個盒子陰影。

• 框陰影垂直位置：20px
• 框陰影模糊強度：50px
• 陰影顏色：rgba(0,0,0,0.14)

將文本模塊添加到第 1 列

添加 H2 內容

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

H2 文本設置

轉到模塊的設計選項卡並相應地設置 H2 文本設置的樣式：

• 標題 2 字體：Alata
• 標題 2 字體粗細：粗體
• 標題 2 文本對齊：居中
• 標題 2 文本顏色：#ffffff
• 標題 2 文字大小：
  • 桌面：200px
  • 平板電腦：150px
  • 電話：100px
• 標題 2 字母間距：-1px

位置

也在高級選項卡中重新定位模塊。

• 位置：絕對
• 位置：左上角
• 垂直偏移：2%
• 水平偏移：2%

將按鈕模塊添加到第 1 列

添加副本

我們在第 1 列中需要的下一個也是最後一個模塊是按鈕模塊。 添加一些您選擇的副本。

按鈕設置

轉到模塊的設計選項卡並相應地設置按鈕樣式：

• 為按鈕使用自定義樣式：是
• 按鈕文字大小：20px
• 按鈕文字顏色：#ffffff
• 按鈕背景顏色：#83a5bf
• 按鈕邊框寬度：0px
• 按鈕邊框半徑：1px
• 按鈕字體：Alata

間距

接下來添加一些自定義填充值。

• 頂部填充：20px
• 底部填充：20px
• 左填充：50px
• 右填充：50px

位置

並在高級選項卡中重新定位模塊。

• 位置：絕對
• 位置：右下角

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

添加H3內容

進入第二列。 添加帶有您選擇的一些 H3 內容的第一個文本模塊。

H3 文本設置

轉到模塊的設計選項卡並應用以下 H3 文本樣式：

• 標題 3 字體：Alata
• 標題 3 字體粗細：粗體
• 標題 3 文本顏色：#ffffff
• 標題 3 文字大小：40px

將分隔模塊添加到第 2 列

能見度

在第一個文本模塊下方，我們將添加一個分隔線模塊。 確保啟用了“顯示分隔線”選項。

• 顯示分隔線：是

線路設置

移至模塊的設計選項卡並更改線條顏色。

• 線條顏色：#f3f0ee

漿紗

也修改大小設置。

• 分隔線重量：5px
• 寬度：19%
• 高度：5px

間距

並通過在間距設置中添加一些底部邊距來完成模塊設置。

• 底邊距：20%

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

添加內容

在分隔線模塊正下方添加另一個文本模塊。 輸入您選擇的一些描述內容。

文字設置

相應地設置模塊文本的樣式：

• 文字字體：蒙特塞拉特
• 文字顏色：#ffffff
• 字體大小：
  • 桌面：15px
  • 平板電腦和手機：14px
• 文本行高：2em

2. 將行變成堆疊元素

行設置

Z索引

現在我們有了第一行，是時候應用粘性行堆疊設置了。 我們將在克隆我們的行以供重用之前應用這些設置，以便自動發生堆疊效果。 打開行設置，轉到高級選項卡並應用 1 的 z 索引。此 z 索引將幫助我們確保每一行都放在前一行的頂部。

• Z指數：1

粘性設置

然後，我們將轉到滾動效果設置並應用以下粘性設置：

• 粘性位置：
  • 桌面：堅持到頂部
  • 平板電腦和手機：請勿粘貼
• 底部粘性限制：部分
• 從周圍的粘性元素偏移：否

3. 重用同一節中的堆疊行

克隆行 x3

現在已經應用了我們的粘性選項，我們可以根據需要多次重複使用整行。

一般變化

更改所有副本

確保在每個副本中更改副本

更改第 1 列背景顏色和圖像

連同第 1 列的背景顏色和圖像。

• 重複 1：#edc1b6
• 重複 2：#efe7e2
• 重複 3：#f7f6f4

更改第 2 列的背景顏色

我們也為每個重複行的第二列使用不同的顏色。

• 重複 1：#ffd1c1
• 重複 2：#fff8f2
• 重複 3：#fffaf7

更改按鈕背景顏色

接下來，我們將更改每個重複行中的按鈕背景顏色。

• 重複 1：#c18a7a
• 重複 2：#bab5b2
• 重複 3：#c98f7d

對淺色背景行的更改

更改文本顏色

最後但並非最不重要的一點是，我們將更改具有較淺背景顏色的行中每個文本模塊的文本顏色。 就是這樣！

• 文字顏色：#2b343b

預覽

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

桌面

移動的

最後的想法

在這篇文章中，我們向您展示瞭如何在頁面設計中使用 Divi 的粘性選項來發揮創意。 更具體地說，我們向您展示瞭如何堆疊行以創建吸引人的設計和用戶體驗。 我們從頭開始重新創建了一個漂亮的設計示例，您也可以免費下載 JSON 文件！ 如果您有任何問題或建議，請隨時在下面的評論部分發表評論。

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