如何將重疊與 Divi 的粘性選項相結合以創建輕鬆的過渡
已發表: 2021-01-25隨著技術的不斷發展，設計也在不斷發展。 您比以往任何時候都可以遇到讓您驚訝並想知道它們是如何創建的網站。 儘管進行滾動交互的網站並不適合所有類型的業務，但知道如何加倍努力對於留下良好印象特別有幫助。 使用 Divi，許多事情已經成為可能，而無需接觸任何一行代碼。 今天的教程幫助你從另一個角度理解Divi。 我們將向您展示如何將 Divi 的粘性選項與其他內置設置相結合，以創建輕鬆的過渡。 您也可以免費下載 JSON 文件！
讓我們開始吧。
預覽
在我們深入學習教程之前，讓我們快速瀏覽一下不同屏幕尺寸的結果。
桌面
移動的
免費下載佈局
要使用免費佈局，您首先需要使用下面的按鈕下載它。 要訪問下載，您需要使用下面的表格訂閱我們的 Divi Daily 電子郵件列表。 作為新訂戶，您每週一將收到更多的 Divi 善良和免費的 Divi 佈局包！ 如果您已經在列表中，只需在下面輸入您的電子郵件地址，然後單擊下載。 您不會被“重新訂閱”或收到額外的電子郵件。
免費下載
加入 Divi 時事通訊，我們將通過電子郵件向您發送一份最終的 Divi 登陸頁面佈局包，以及大量其他令人驚嘆的免費 Divi 資源、提示和技巧。 跟隨，您將很快成為 Divi 大師。 如果您已經訂閱，只需在下面輸入您的電子郵件地址，然後單擊下載即可訪問佈局包。
您已成功訂閱。 請檢查您的電子郵件地址以確認您的訂閱並獲得免費的每週 Divi 佈局包！
1. 重新創建設計結構
添加新部分
間距
在本教程的第一部分，我們將專注於在 Divi 中重新創建設計結構。 然後，在第二部分中，我們將花時間瀏覽所有粘性選項，以實現您可以在本文預覽中看到的效果。 首先向您正在處理的頁面添加一個新部分。 打開部分設置，轉到設計選項卡並添加一些底部填充。
- 底部填充：100vh
添加第 1 行
列結構
繼續使用以下列結構添加新行：
漿紗
還沒有添加模塊，打開行設置，轉到設計選項卡並相應地更改大小設置：
- 寬度：90%
- 最大寬度：100%
Z索引
也將 az 索引分配給該行。
- Z指數：1
將圖像模塊添加到列
將圖像框留空
是時候添加模塊了，從圖像模塊開始。 將內容框留空。
改用背景圖片
並使用您選擇的背景圖像代替。
- 背景圖片尺寸：封面
漿紗
接下來更改模塊的寬度。
- 寬度：100%
間距
然後，將一些自定義的頂部和底部填充應用於間距設置。
- 頂部填充：40vh
- 底部填充：40vh
將文本模塊添加到列
添加 H2 內容
進入下一個模塊，這是一個包含您選擇的一些 H2 內容的文本模塊。
H2 文本設置
相應地更改模塊的 H2 文本設置：
- 標題 2 字體：蒙特塞拉特
- 標題 2 文本對齊：居中
- 標題 2 文本顏色：#ffffff
- 標題 2 文字大小：
- 台式機：10vw
- 平板電腦：14vw
- 電話：15vw
- 標題 2 字母間距：-0.5vw
漿紗
確保模塊也是“100%”。
- 寬度：100%
位置
並在高級選項卡中重新定位模塊。
- 位置：絕對
- 地點：中心
添加第 2 行
列結構
進入下一行。 使用以下列結構：
漿紗
還沒有添加模塊，打開行設置，轉到設計選項卡並更改大小設置如下：
- 使用自定義裝訂線寬度：是
- 天溝寬度：1
- 寬度：90%
- 最大寬度：100%
Z索引
也將 az 索引分配給該行。
- Z指數：2
第 1 列間距
通過打開第一列設置並分配一些左右填充來完成行設置。
- 左填充：5%
- 右填充：5%
將文本模塊添加到第 1 列
添加H3內容
現在行設置已經到位，是時候添加模塊了。 使用您選擇的一些 H3 內容將文本模塊添加到第 1 列。
H3 文本設置
轉到模塊的設計選項卡並相應地更改 H3 文本設置：
- 標題 3 字體：蒙特塞拉特
- 標題 3 字體樣式：下劃線
- 標題 3 下劃線顏色：#ffffff
- 標題 3 下劃線樣式：純色
- 標題 3 文本顏色：#ffffff
- 標題 3 文字大小：
- 台式機：4vw
- 平板電腦和手機：10vw
- 標題 3 字母間距：-3px
間距
在較小的屏幕尺寸上添加一些正確的填充。
- 右填充：20%（僅限平板電腦和手機）
將文本模塊添加到第 2 列
添加內容
將另一個文本模塊添加到第 2 列，其中包含您選擇的一些描述內容。
背景顏色
接下來更改背景顏色。
- 背景顏色：#ffffff
文字設置
然後，修改文本設置如下：
- 文字字體：Playfair Display
- 文本字體樣式：斜體
- 字體大小：
- 台式機：1.6vw
- 平板電腦：3vw
- 電話：4vw
- 文本行高：1.5em
間距
也應用一些自定義填充值。
- 頂部填充：10vh
- 底部填充：10vh
- 左填充：10%
- 右填充：10%
將按鈕模塊添加到第 2 列
添加副本
我們將添加的下一個也是最後一個模塊是第 2 列的按鈕模塊。添加一些您選擇的副本。
按鈕設置
轉到模塊的設計選項卡並按如下方式更改按鈕設置：
- 為按鈕使用自定義樣式：是
- 按鈕文字大小：
- 台式機：1.2vw
- 平板電腦：2.5vw
- 電話：3.5vw
- 按鈕文字顏色：#000000
- 按鈕背景顏色：#ffffff
- 按鈕邊框寬度：0px
- 按鈕邊框半徑：0px
- 按鈕字體：蒙特塞拉特
- 按鈕字體樣式：下劃線
- 按鈕下劃線顏色：#000000
- 按鈕下劃線樣式：純色
間距
也添加一些自定義填充值。
- 頂部填充：20px
- 底部填充：20px
- 左填充：50px
- 右填充：50px
位置
並在高級選項卡中重新定位模塊。
- 位置：絕對
- 位置：右下角
2. 應用粘性效果
第 1 行中的圖像模塊
粘性設置
現在我們已經建立了我們的設計基礎，是時候開始應用自定義粘性效果了。 打開第 1 行中的圖像模塊並按如下方式將模塊粘住：
- 粘滯位置：粘在頂部
- 底部粘性限制：部分
- 從周圍的粘性元素偏移：否
粘性尺寸
一旦應用了粘性設置，我們也可以更改模塊的粘性樣式。 我們要做的第一件事是在粘性狀態下更改寬度。
- 粘性寬度：80%
粘性間距
接下來，我們將修改粘性頂部和底部填充。
- 粘性頂部填充：50vh
- 粘性底部填充：50vh
粘性漸變背景
我們還將為我們的模塊應用粘性漸變背景。
- 顏色 1：#00336b
- 顏色 2：rgba(41,196,169,0)
- 漸變類型：線性
- 梯度方向：90度
- 將漸變放在背景圖像上方：是
過渡
並且為了確保平滑過渡，我們將增加模塊的過渡持續時間。
- 轉換持續時間：1500ms
第 2 行中的第 2 列
第 2 列粘性設置
接下來，我們還將把第二行的第二列設為粘性。
- 粘滯位置：粘在頂部
- 粘性頂部偏移：150px
- 底部粘性限制：部分
- 從周圍的粘性元素偏移：否
- 過渡默認和粘性樣式：否
粘性列中的文本模塊
粘性背景色
現在，第 2 行的第 2 列已變為粘性，我們可以將一些粘性樣式應用於此列內的文本模塊。 首先更改粘性狀態下的背景顏色。
- 粘性背景顏色：#333333
粘性文本顏色
接下來，修改粘性狀態下的文本顏色。
- 粘性文本顏色：#ffffff
過渡
並通過在高級選項卡中增加過渡持續時間來完成模塊設置。 就是這樣！
- 轉換持續時間：1000ms
預覽
現在我們已經完成了所有步驟，讓我們最後看看不同屏幕尺寸的結果。
桌面
移動的
最後的想法
在這篇文章中，我們向您展示瞭如何使用 Divi 的粘性選項發揮創意。 更具體地說，我們向您展示瞭如何將重疊與 Divi 的粘性選項結合起來，以創建輕鬆的過渡。 一旦您掌握了本教程中使用的方法，您將能夠創建無窮無盡的不同變體。 您也可以免費下載 JSON 文件！ 如果您有任何問題或建議，請隨時在下面的評論部分發表評論。
如果您渴望了解有關 Divi 的更多信息並獲得更多 Divi 免費贈品，請確保訂閱我們的電子郵件時事通訊和 YouTube 頻道，這樣您將永遠是第一批了解此免費內容並從中受益的人之一。