如何使用 Divi 的粘性選項在不移動的情況下更改滾動樣式

如果您在構建新網站時要採用簡潔的設計風格，您很可能希望找到一種方法來為您的網站添加額外的維度。 本教程將全部與此相關。 我們將向您展示如何使用 Divi 的粘性選項無需移動即可更改粘性樣式。 具體來說，這意味著一旦訪問者滾動經過頁面的某個部分，該部分的樣式就會改變，但元素將保持原樣。 這種類型的效果完全集中在用戶行為上。 粘性樣式的變化只有在人們滾動過去時才會發生，這會產生美麗的結果。 在本教程中，我們將逐步向您展示如何到達那裡。 一旦你掌握了方法，你就可以在你構建的任何類型的設計中使用它！ 您也可以免費下載 JSON 文件。

讓我們開始吧。

預覽

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

桌面

移動的

免費下載佈局

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

下載文件

免費下載

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

下載

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

1. 創建元素結構

添加新部分

能見度

首先向您正在處理的頁面添加一個新部分。 打開部分設置並隱藏高級選項卡中的溢出。 這將有助於確保不會出現水平滾動條。

• 水平溢出：隱藏
• 垂直溢出：隱藏

添加新行

列結構

繼續使用以下列結構向該部分添加新行：

漿紗

不添加任何模塊，打開行設置並相應地修改大小設置：

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

間距

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

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

第 1 列設置

間距

然後，打開第 1 列設置並在不同的屏幕尺寸上應用一些自定義填充值。

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

Z索引

也增加此列的 z 索引。 在本教程的後面，我們將在第 1 列和第 2 列之間創建水平重疊。我們增加 z 索引以確保第 1 列模塊位於第 2 列模塊上方。

• Z指數：11

第 2 列設置

背景顏色

接下來，我們將為第 2 列添加背景顏色。

• 背景顏色：#f9f9f9

間距

我們也將在不同的屏幕尺寸上使用一些自定義填充值。

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

第 3 列設置

間距

最後但並非最不重要的一點是，我們還將向第 3 列添加一些自定義填充值。

• 頂部填充：
  • 桌面：200px
  • 平板電腦：100px
  • 電話：50px
• 底部填充：
  • 桌面：200px
  • 平板電腦：100px
  • 電話：50px
• 左填充：8%
• 右填充：8%

將文本模塊添加到第 1 列

添加副本

是時候添加模塊了，從第 1 列中的文本模塊開始。在內容框中添加一個數字。

背景顏色

接下來更改背景顏色。

• 背景顏色：#efefef

文字設置

轉到設計選項卡並相應地更改文本設置：

• 文字字體：蒙特塞拉特
• 文字顏色：#ffffff
• 文字大小：100px
• 文本行高：1em
• 文本對齊：居中

漿紗

接下來修改寬度。

• 寬度：150px

間距

然後，添加一些自定義的頂部和底部填充。

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

位置

也重新定位模塊。

• 位置：絕對
• 位置：右下角
• 水平偏移：-5%

將文本模塊添加到第 2 列

添加 H3 & H4 副本

進入第二列。 在那裡，我們將添加一個帶有一些 H3 和 H4 副本的文本模塊。

文字設置

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

• 文本對齊：居中
• 文字顏色：深色

H3 文本設置

然後，修改 H3 文本設置。

• 標題 3 字體：Playfair Display
• 標題 3 文本對齊：居中
• 標題 3 文字大小：
  • 桌面：90px
  • 平板電腦：70px
  • 電話：60px

H4 文本設置

也為 H4 文本設置樣式。

• 標題 4 字體：蒙特塞拉特
• 標題 4 字體粗細：輕

漿紗

然後，轉到大小設置並應用“100%”寬度。 這將有助於下一步，即重新定位模塊。

• 寬度：100%

位置

通過進入高級選項卡並修改位置設置來完成模塊設置，如下所示：

• 位置：絕對
• 位置：左下角
• 垂直偏移：20px

將文本模塊添加到第 3 列

添加H5和段落內容

進入第三列。 添加帶有您選擇的一些 H5 和段落內容的文本模塊。

文字設置

轉到模塊的設計選項卡並更改文本設置中的字體。

• 文字字體：蒙特塞拉特

H5 文字設置

也為 H5 文本設置樣式。

• 標題 5 字體：蒙特塞拉特
• 標題 5 字體粗細：粗體
• 標題 5 文字大小：
  • 台式機和平板電腦：23px
  • 電話：18px

2. 創造效果的關鍵變化

部分

刪除部分填充

現在我們已經為我們的設計奠定了基礎，我們可以開始創建您可以在這篇文章的預覽中看到的自定義粘性樣式效果。 實現此效果的第一步是確保您的部分的頂部和底部填充值為零。 這樣做將幫助我們確保部分和行在同一點開始和結束。 當我們在接下來的步驟中將粘性位置添加到我們的行時，這一點很重要。 通過將限制設置為該部分的底部，我們不會為該行留下任何移動空間。 但是，該行將在幾秒鐘內變為粘性，並在我們的設計中突出顯示更改後的粘性樣式。

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

排

轉行粘性

打開行設置並將行設置為粘性。 正如在上一步中提到的，確保我們行的底部粘性限制是部分很重要。 由於行尾和節尾之間沒有空間，因此粘性行將保持原位。

• 粘滯位置：粘在頂部
• 粘性頂部偏移：0px
• 底部粘性限制：部分
• 從周圍的粘性元素偏移：是
• 過渡默認和粘性樣式：是

粘性行背景顏色

是時候開始為我們的元素應用一些粘性樣式了！ 從行背景顏色開始。

• 背景顏色：#161616

行轉換

為了確保平滑過渡，我們將在行的高級選項卡中增加過渡持續時間。

• 轉換持續時間：500ms
• 過渡速度曲線：輕鬆

粘性列 2 背景顏色

然後，我們將更改粘性列 2 的背景顏色。

• 背景顏色：#262626

第 1 列中的文本模塊

粘性背景色

我們也將更改第 1 列中文本模塊的背景顏色。

• 背景顏色：#ddc7b5

粘性文本顏色

隨著粘性文本顏色。

• 文字顏色：#0a0a0a

粘性尺寸

我們將在大小設置中增加模塊的寬度。

• 寬度：105%

過渡

我們通過在高級選項卡中修改模塊的過渡持續時間來確保平滑過渡。

• 轉換持續時間：500ms
• 過渡速度曲線：輕鬆

第 2 列中的文本模塊

粘性文本顏色

接下來，我們有第 2 列中的文本模塊。我們將在粘性狀態下將文本顏色更改為淺色。

• 文字顏色：淺

第 3 列中的文本模塊

粘性文本顏色

第 3 列中的文本模塊也是如此。

• 文字顏色：淺

3. 克隆部分重用

現在我們已經完成了第一部分，包括粘性樣式更改效果，我們可以通過克隆它來多次重複使用該部分。

更改所有副本

確保您更改了所有重複的副本。

在第一節添加一些上邊距，在最後一節添加一些下邊距

最後但並非最不重要的一點是，我們將為第一部分添加一些頂部邊距，為最後一部分添加一些底部邊距。 這將幫助我們防止在人們開始滾動之前立即轉換。 就是這樣！

• 上邊距：200px

• 下邊距：200px

預覽

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

桌面

移動的

最後的想法

在這篇文章中，我們向您展示瞭如何使用 Divi 的粘性選項發揮創意。 更具體地說，我們使用了 Divi 粘性選項來更改粘性樣式而不增加運動。 當人們滾動經過頁面的某個部分時，設計的樣式就會發生變化，從而突出顯示頁面的特定部分。 您也可以免費下載 JSON 文件！ 如果您有任何問題或建議，請隨時在下面的評論部分發表評論。

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