如何使用 Divi 的粘性選項觸發圖像轉換

Divi 的粘性選項的多功能性不僅僅是使用粘性標題的設置。 您也可以使用它來觸發設計中的更改。 例如，在本教程中，我們將使用 Divi 的粘性選項來觸發圖像過渡。 一旦訪問者接近滾動中的圖像，圖像轉換就會發生。 我們將從頭開始重新創建兩個不同的示例，但是一旦您掌握了方法，您就可以僅使用 Divi 的內置選項創建自己獨特的圖像過渡。 您也可以免費下載 JSON 文件！

讓我們開始吧！

預覽

在我們深入學習教程之前，讓我們最後看看不同屏幕尺寸的結果。

桌面

移動的

免費下載佈局

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

下載文件

免費下載

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

下載

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

1. 一般步驟

添加第 1 節

間距

在本教程的第一部分，我們將構建我們的設計基礎。 一旦到位，我們就可以專注於應用正確的設置來實現本文預覽中的兩個示例。 向您正在處理的頁面添加一個新部分，在該部分的設計選項卡上移動並刪除所有默認的頂部和底部填充。

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

添加新行

列結構

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

漿紗

還沒有添加模塊，打開行設置並修改大小設置如下：

• 最大寬度：1480px
• 行對齊：居中

間距

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

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

Z索引

並在位置設置中設置az index。 這將幫助我們確保該行保持在我們稍後在教程中添加的下一行的下方。

• Z指數：1

列溢出

接下來，打開列設置並將溢出設置為隱藏。

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

將圖像模塊添加到列

將圖像框留空

我們在這一行中唯一需要的模塊是圖像模塊。 將圖像框留空。

背景圖片

並使用您選擇的背景圖像代替。

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

間距

為了讓圖像顯示出來，我們將在不同的屏幕尺寸上使用一些自定義填充值。

• 頂部填充：
  • 桌面：300px
  • 平板電腦和手機：150px
• 底部填充：
  • 桌面：300px
  • 平板電腦和手機：150px

添加第 2 節

間距

在上一節的正下方添加另一節。 打開部分設置並刪除間距設置中的默認頂部填充。

• 頂部填充：0px

添加新行

列結構

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

Z索引

也為此行添加 az 索引。

• Z指數：2

將號召性用語模塊添加到列

添加內容

在這一行中，我們唯一需要的模塊是 Call to Action 模塊。 添加您選擇的內容。

添加按鈕鏈接

連同按鈕鏈接。

背景顏色

然後，添加白色背景色。

• 背景顏色：#ffffff

文字設置

移至設計選項卡並更改文本設置。

• 文本對齊方式：左
• 文字顏色：深色

標題文字設置

標題文本的樣式。

• 標題字體：Playfair Display
• 標題字體樣式：斜體
• 標題文字大小
  • 桌面：45px
  • 平板電腦：40px
  • 電話：35px
• 標題字母間距：1px

正文設置

以及正文。

• 正文字體：Karla
• 車身線高：2em

按鈕設置

然後，設置按鈕樣式。

• 為按鈕使用自定義樣式：是
• 按鈕文字大小：18px
• 按鈕文字顏色：#000000
• 漸變色 1：#ffffff
• 漸變色 2：#ffdc91
• 漸變類型：線性
• 起始位置：50%
• 結束位置：50%

• 按鈕邊框寬度：0px
• 按鈕邊框半徑：0px
• 按鈕字體：Karla
• 按鈕字體樣式：大寫
• 顯示按鈕：是

• 按鈕圖標位置：左
• 僅在懸停按鈕時顯示圖標：否
• 頂部填充：10px
• 底部填充：10px
• 左填充：15%
• 右填充：15%

漿紗

我們也在修改不同屏幕尺寸的尺寸設置。

• 寬度：
  • 台式機：65%
  • 平板電腦：80%
  • 電話：100%
• 模塊對齊：居中

間距

接下來，我們將向間距設置添加一些自定義邊距和填充值。

• 最高保證金：
  • 桌面：-150px
  • 平板電腦：-50px
  • 電話：0px
• 下邊距：50px
• 頂部填充：150px
• 底部填充：150px

盒子陰影

我們將通過添加一個微妙的框陰影來完成模塊設置。

• Box Shadwo 模糊強度：30px
• 陰影顏色：rgba(0,0,0,0.11)

2. 對行應用粘性效果

在第 #1 部分中打開行

現在我們已經為我們的設計奠定了基礎，是時候應用粘性效果了。 當人們滾動經過元素時，這種粘性效果將幫助我們改變樣式。 我們將添加粘滯效果的元素是第一部分中包含圖像的行。

應用粘性效果

確保將底部粘性限制設置為部分非常重要。 我們行的開始和結束點與該部分的相同，這確保該行實際上不會變得粘滯，但會應用粘滯樣式。 粘性頂部偏移確定過渡開始發生的點。 例如，如果此值為零，則意味著瀏覽器的頂部必須觸摸行的頂部才能開始轉換。 通過將粘性頂部偏移設置為“300px”，我們可以更早地創建該過渡。

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

確保第一部分上方的頂部偏移量相等

由於我們已將粘性頂部偏移設置為“300px”，因此我們需要頁面頂部的空間來實現這一點。 如果您在頁面中間的某個地方使用此設計，則不必擔心這一步。 但是，如果您在頁面頂部使用這種方法，則必須修改粘性頂部偏移量或在頂部添加足夠的空間。 我們將在第一部分添加一些上邊距以生成該空間。

• 上邊距：400px

3. 將 Ken Burn 效果應用到圖像模塊

現在我們的行已經變成了粘性，我們可以開始將粘性樣式應用於該行及其所有子元素。 儘管可能性無窮無盡，但我們向您展示了兩個不同的示例以及如何實現它們。 為了更輕鬆地處理這兩個不同的示例，我們將克隆兩個部分一次並將它們放在第一個部分的下方。

示例#1

粘性行設置

盒子陰影

要重新創建示例 #1（您可以在本文的預覽中看到），請打開行設置並應用以下框陰影設置：

• 框陰影垂直位置：0px
• 框陰影傳播強度：0px
• 陰影顏色：rgba(0,0,0,0)

• 粘性垂直位置：100px
• 粘性陰影顏色：#ffdc91

過渡

在高級選項卡中也包括平滑過渡。

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

粘滯圖像模塊設置

變換比例

接下來，打開圖像模塊並在粘性狀態下應用變換縮放效果。

• 兩者：100%

• 兩者都粘：130%

過渡

通過相應地修改模塊的過渡設置來確保平滑過渡：

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

示例#2

粘性行設置

轉換 翻譯

進入第二個例子！ 打開行設置並應用以下轉換轉換設置：

• 正確：20%

• 粘性權利：0%

過渡

也修改行的過渡設置。

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

粘滯圖像模塊設置

過濾器

然後，打開圖像模塊並在默認和粘性狀態下使用過濾器。

• 飽和度：0%
• 亮度：50%

• 粘性飽和度：100%
• 粘性亮度：100%

過渡

通過如下更改過渡設置來完成模塊設置和本教程：

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

預覽

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

桌面

移動的

最後的想法

在這篇文章中，我們向您展示瞭如何使用 Divi 的粘性選項發揮創意。 更具體地說，我們向您展示瞭如何觸發圖像轉換。 一旦人們滾動經過圖像，圖像的樣式就會發生變化，從而產生美麗的過渡。 我們已經處理了兩個不同的例子，但可能性是無窮無盡的。 您也可以免費下載 JSON 文件！ 如果您有任何問題或建議，請隨時在下面的評論部分發表評論。

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