如何使用 Divi 創建漂亮的漸變背景懸停過渡
已發表: 2019-07-13最近，Divi 中添加了一些額外的懸停選項——讓您無需觸摸一行代碼即可創建更酷的效果。 例如，您現在可以創建驚人的漸變背景懸停過渡。 通過組合列、行和截面漸變，您可以實現獨特的設計。 在本教程中，我們將向您展示如何做到這一點。 我們將通過一些一般步驟開始。 完成後，我們將分別關註三個設計示例。 您還可以免費下載 JSON 文件！
讓我們開始吧。
預覽
在我們深入學習本教程之前，讓我們快速瀏覽一下我們將在本教程中重新創建的三個不同示例。
示例#1
示例#2
示例 #3
免費下載英雄章節
訂閱我們的 YouTube 頻道
要了解這些免費的英雄部分，您首先需要使用下面的按鈕下載它們。 要訪問下載，您需要使用下面的表格訂閱我們的 Divi Daily 電子郵件列表。 作為新訂戶，您每週一將收到更多的 Divi 善良和免費的 Divi 佈局包！ 如果您已經在列表中，只需在下面輸入您的電子郵件地址，然後單擊下載。 您不會被“重新訂閱”或收到額外的電子郵件。
免費下載
加入 Divi 時事通訊，我們將通過電子郵件向您發送一份最終的 Divi 登陸頁面佈局包，以及大量其他令人驚嘆的免費 Divi 資源、提示和技巧。 跟隨，您將很快成為 Divi 大師。 如果您已經訂閱，只需在下面輸入您的電子郵件地址，然後單擊下載即可訪問佈局包。
您已成功訂閱。 請檢查您的電子郵件地址以確認您的訂閱並獲得免費的每週 Divi 佈局包！
一般步驟
添加新部分
間距
讓我們從執行一些一般步驟開始。 向您正在處理的頁面添加一個新部分並刪除所有默認填充。 刪除所有頂部和底部填充將在稍後幫助我們組合列、行和部分漸變背景。
- 頂部填充：0px
- 底部填充：0px
添加新行
列結構
繼續使用以下列結構添加新行：
漿紗
在不添加任何模塊的情況下，打開行設置並允許行佔據部分容器的整個寬度。
- 寬度：100%
- 最大寬度：100%
間距
轉到間距設置並刪除所有默認的頂部和底部填充。
- 頂部填充：0px
- 底部填充：0px
將文本模塊 #1 添加到列
添加H1內容
讓我們開始添加模塊吧！ 我們需要的第一個是帶有一些 H1 內容的文本模塊。
H1 文本設置
轉到設計選項卡並相應地更改 H1 文本設置：
- 標題字體：蒙特塞拉特
- 標題文本對齊方式：居中
- 標題文字顏色：#000000
- 標題文字大小：3vw（桌面），6vw（平板電腦和手機）
- 標題字母間距：0.7vw
漿紗
接下來打開大小設置並更改寬度以及模塊對齊方式。
- 寬度：48%（桌面），60%（平板電腦和手機）
- 模塊對齊：居中
間距
通過添加一些頂部邊距來完成模塊的設計。
- 最高利潤率：10vw
將分隔模塊添加到列
能見度
進入下一個模塊！ 添加分隔線模塊並確保啟用“顯示分隔線”選項。
- 顯示分隔線：是
線
接下來更改線條顏色。
- 線條顏色：#000000
漿紗
繼續調整大小設置並應用以下設置：
- 分頻器重量：0.1vw
- 寬度：10%（桌面）、16%（平板）、25%（手機）
- 模塊對齊：居中
間距
還可以在不同的屏幕尺寸中添加一些自定義填充值。
- 頂部填充：2vw（桌面）、4vw（平板電腦）、6vw（手機）
- 底部填充：2vw（桌面）、4vw（平板電腦）、6vw（手機）
將文本模塊 #2 添加到列
添加內容
進入下一個模塊，這是另一個文本模塊。 添加一些您選擇的段落內容。
文字設置
轉到設計選項卡並相應地更改文本設置：
- 文字字體：Open Sans
- 文本對齊：對齊
- 文本行高：2.3em
漿紗
接下來在大小設置中修改寬度和模塊對齊方式：
- 寬度：30%（桌面）、54%（平板）、70%（手機）
- 模塊對齊：居中
將按鈕模塊添加到列
添加副本
我們在列中需要的下一個也是最後一個模塊是按鈕模塊。 添加一些您選擇的副本。
結盟
移至設計選項卡並更改按鈕對齊方式。
- 按鈕對齊：居中
按鈕設置
還要修改按鈕設置。
- 為按鈕使用自定義樣式：是
- 按鈕文字大小：0.8vw（桌面）、2vw（平板電腦）、2.8vw（手機）
- 按鈕文字顏色：#000000
- 按鈕邊框寬度：1px
- 按鈕邊框半徑：1px
- 按鈕字體：蒙特塞拉特
間距
並在不同的屏幕尺寸中添加一些自定義間距值。
- 上邊距：2vw（台式機），8vw（平板電腦和手機）
- 底邊距：10vw
- 頂部填充：1vw（桌面）、2vw（平板電腦）、3vw（手機）
- 底部填充：1vw（桌面）、2vw（平板電腦）、3vw（手機）
- 左填充：3vw（桌面）、6vw（平板電腦）、8vw（手機）
- 右填充：3vw（桌面）、6vw（平板電腦）、8vw（手機）
克隆部分兩次
完成該部分後，您可以將其克隆兩次； 每個示例一個。
重新創建漸變背景懸停過渡 #1
部分
默認漸變背景
讓我們開始創建第一個懸停過渡！ 打開部分設置並添加以下默認漸變背景：
- 顏色 1：#d1d1ff
- 顏色 2：#f7f7f7
- 梯度方向：90度
- 起始位置：50%
- 結束位置：50%
懸停漸變背景
修改懸停時的漸變背景。
- 顏色 1：#f7f7f7
- 顏色 2：#ffc1c7
- 梯度方向：90度
- 起始位置：50%
- 結束位置：50%
排
默認漸變背景
接下來打開行設置並應用以下默認漸變背景設置：
- 顏色 1：#7032ff
- 顏色 2：rgba(255,255,255,0)
- 梯度方向：90度
- 起始位置：10%
- 結束位置：10%
懸停漸變背景
修改懸停時的漸變背景。
- 顏色 1：rgba(255,255,255,0)
- 顏色 2：#ff324a
- 梯度方向：90度
- 起始位置：90%
- 結束位置：90%
重新創建漸變背景懸停過渡 #2
部分
默認漸變背景
進入第二個例子！ 打開部分設置並添加以下漸變背景：
- 顏色 1：#f7f7f7
- 顏色 2：#eceaff
- 梯度方向：156deg
- 起始位置：50%
- 結束位置：50%
懸停漸變背景
在懸停時添加不同的漸變背景：
- 顏色 1：#ffeaec
- 顏色 2：#f7f7f7
- 梯度方向：204deg
- 起始位置：50%
- 結束位置：50%
排
默認漸變背景
接下來打開行設置並應用以下漸變背景設置：
- 顏色 1：#a932ff
- 顏色 2：rgba(255,255,255,0)
- 漸變類型：徑向
- 徑向：左下
- 起始位置：14%
- 結束位置：14%
懸停漸變背景
相應地更改懸停時的行漸變背景：
- 顏色 1：#ff324a
- 顏色 2：rgba(255,255,255,0)
- 漸變類型：徑向
- 徑向：左上角
- 起始位置：14%
- 結束位置：14%
柱子
默認漸變背景
移至列設置並添加以下漸變背景：
- 顏色 1：#a932ff
- 顏色 2：rgba(255,255,255,0)
- 漸變類型：徑向
- 徑向：右上
- 起始位置：14%
- 結束位置：14%
懸停漸變背景
修改懸停時的列漸變背景：
- 顏色 1：#ff324a
- 顏色 2：rgba(255,255,255,0)
- 漸變類型：徑向
- 徑向：右下
- 起始位置：14%
- 結束位置：14%
重新創建漸變背景懸停過渡 #3
部分
默認漸變背景
繼續下一個也是最後一個例子！ 打開部分設置並應用以下漸變背景：
- 顏色 1：#ffc1c7
- 顏色 2：#ffffff
- 漸變類型：徑向
- 徑向：頂部
- 起始位置：45%
- 結束位置：45%
懸停漸變背景
在懸停時修改部分漸變背景。
- 顏色 1：#ffc1c7
- 顏色 2：#ffffff
- 漸變類型：徑向
- 徑向：左
- 起始位置：20%
- 結束位置：20%
排
默認漸變背景
接下來打開行設置並添加以下漸變背景：
- 顏色 1：#d3dff
- 顏色 2：rgba(255,255,255,0)
- 漸變類型：徑向
- 徑向：底部
- 起始位置：45%
- 結束位置：45%
懸停漸變背景
相應地修改漸變背景：
- 顏色 1：#d3dff
- 顏色 2：rgba(255,255,255,0)
- 漸變類型：徑向
- 徑向：右
- 起始位置：20%
- 結束位置：20%
柱子
默認漸變背景
最後但並非最不重要的是，添加一個列漸變背景，你就完成了！
- 顏色 1：#f7f7f7
- 顏色 2：rgba(255,255,255,0)
- 漸變類型：徑向
- 徑向：中心
- 起始位置：41%
- 最終位置：41%
預覽
現在我們已經完成了所有步驟，讓我們最後看看我們在本教程中重新創建的所有三個示例的結果！
示例#1
示例#2
示例 #3
最後的想法
在這篇文章中，我們向您展示瞭如何創造性地使用 Divi 的附加漸變背景懸停選項，僅使用 Divi 的內置選項創建漂亮的懸停過渡。 我們從一些一般步驟開始，然後重新創建三個示例中的每一個。 如果您有任何問題或建議，請務必在下方評論區留言！
如果您渴望了解有關 Divi 的更多信息並獲得更多 Divi 免費贈品，請確保訂閱我們的電子郵件時事通訊和 YouTube 頻道，這樣您將永遠是第一批了解此免費內容並從中受益的人之一。