如何使用 Divi 更改懸停時的漸變背景

創建網站就是要確保每個細節都是正確的。 注意設計中的小細節將迅速增加並提升您網站的質量。 使用 Divi 的新懸停選項，您可以毫不費力地在您的網站上添加小的交互。 懸停選項適用於幾乎所有設計設置。 例如，您可以在懸停時間接更改漸變背景以創建漂亮的過渡。 這正是我們將在這篇博文中向您展示的內容。 除了實現漸變過渡之外，我們還將從頭開始創建一個令人驚嘆的設計示例，您可以自由地將其用於您構建的任何類型的網站。

讓我們開始吧！

預覽

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

靜止的

徘徊

免費下載插圖

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

下載文件

免費下載

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

下載

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

讓我們開始創作吧！

訂閱我們的 YouTube 頻道

添加第 1 節

間距

您需要做的第一件事是創建一個新頁面或打開一個現有頁面並向其中添加一個新的常規部分。 打開設置並添加一些自定義的頂部和底部邊距。

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

添加第 1 行

列結構

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

第 1 列默認背景顏色

尚未添加任何模塊，打開行設置並將以下默認背景色添加到第 1 列：

• 背景顏色：#e7ffa0

第 1 列懸停背景顏色

在懸停時更改此背景顏色。

• 背景顏色：#00020c

第 1 列漸變背景

也向第 1 列添加漸變背景色。 您會注意到我們使用了一種完全透明的顏色。 這種顏色將允許背景顏色顯示出來，然後在懸停時改變。

• 顏色 1：rgba(255,255,255,0)
• 顏色 2：RGBA(16,0,201,0.8)
• 第 1 列漸變類型：線性
• 第 1 列梯度方向：50 度
• 第 1 列起始位置：20%

第 2 列背景顏色

還要添加第 2 列的背景顏色。

• 第 2 列背景顏色：#ffffff

漿紗

然後，轉到設計選項卡並更改大小設置。

• 使用自定義寬度：是
• 單位：PX
• 自定義寬度：2000px
• 使用自定義裝訂線寬度：是
• 天溝寬度：1

間距

繼續在間距設置中添加一些自定義填充值。

• 頂部填充：0px
• 底部填充：0px
• 第 2 列頂部填充：6vw（桌面），120px（平板電腦和手機）
• 第 2 列底部填充：6vw（桌面），120px（平板電腦和手機）
• 第 2 列左填充：5vw（桌面）、80px（平板電腦）、50px（手機）
• 第 2 列右內邊距：5vw（桌面）、80px（平板電腦）、50px（手機）

盒子陰影

並給該行一個微妙的框陰影。

• 框陰影模糊強度：100px
• 框陰影傳播強度：-10px

過渡

最後但並非最不重要的一點是，我們將通過增加高級選項卡中的過渡持續時間來創建平滑的漸變背景過渡。

• 轉換持續時間：1100ms

將圖像模塊添加到第 1 列

上傳圖片

是時候開始添加模塊了！ 將圖像模塊添加到第一列並上傳“ divi-gradient-background-on-hover-illustration-1.png ”文件，您可以在本文開頭下載的壓縮文件夾中找到該文件。

漸變背景

轉到此圖像模塊的背景設置並添加漸變背景。 我們再次使用一種完全透明的顏色來允許其他顏色顯示出來。

• 顏色 1：rgba(50,217,255,0.66)
• 顏色 2：rgba(255,255,255,0)
• 漸變類型：徑向
• 徑向：頂部
• 結束位置：57%

間距

然後，向模塊添加一些自定義頂部填充。

• 頂部填充：14vw

將標題文本模塊添加到第 2 列

添加內容

進入第二列！ 我們需要的第一個模塊是標題文本模塊。 繼續並添加一些選擇的標題內容。

標題文字設置

然後，轉到標題文本設置並進行一些更改。

• 標題字體：Abril Fatface
• 標題文字顏色：#000000
• 標題文字大小：4vw（桌面）、60px（平板電腦）、40px（手機）

將描述文本模塊添加到第 2 列

添加內容

我們需要的第二個模塊是另一個文本模塊。 添加一些選擇的內容。

文字設置

然後，轉到文本設置並更改文本方向。

• 文本方向：對齊

漿紗

調整大小設置中的寬度。

• 寬度：73%（桌面），100%（平板電腦和手機）

間距

最後，向模塊添加一些自定義的頂部和底部邊距以創建空白。

• 上邊距：2.5vw（桌面），50px（平板電腦和手機）
• 下邊距：2.5vw（桌面），50px（平板和手機）

將按鈕模塊添加到第 2 列

添加副本

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

按鈕設置

接下來修改按鈕設置。

• 為按鈕使用自定義樣式：是
• 按鈕文字大小：1.2vw（桌面），14px（平板電腦和手機）
• 按鈕文字顏色：#ffffff
• 漸變色 1：#9ea6ff
• 漸變色 2：rgba(16,0,201,0.8)
• 梯度方向：78度
• 按鈕邊框寬度：0px
• 按鈕邊框半徑：30px
• 按鈕字母間距：-1px
• 字體粗細：超粗
• 字體樣式：大寫

間距

添加一些自定義填充值。

• 頂部填充：10px
• 底部填充：10px
• 左填充：40px
• 右填充：40px

盒子陰影

並在按鈕上應用一個微妙的框陰影。

• 框陰影模糊強度：40px

添加第 2 節

間距

現在我們已經完成了第一部分，我們將進入下一部分。 使用以下自定義填充值添加新的常規部分：

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

添加第 2 行

列結構

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

第 1 列背景顏色

尚未添加任何模塊，打開行設置並將以下背景顏色添加到第 1 列：

• 第 1 列背景顏色：#ffffff

第 2 列默認背景顏色

將以下背景顏色添加到第 2 列。

• 第 2 列背景顏色：#ffffff

第 2 列懸停背景顏色

並在懸停時更改此背景顏色。

• 第 2 列背景顏色：#3d02ff

第 2 列漸變背景

也向列添加漸變背景。

• 顏色 1：rgba(255,255,255,0)
• 顏色 2：#ff7700
• 第 2 列起始位置：20%

漿紗

然後，轉到大小設置並進行一些更改。

• 使用自定義寬度：是
• 單位：PX
• 自定義寬度：2000px
• 使用自定義裝訂線寬度：是
• 天溝寬度：1

間距

繼續在間距設置中添加自定義填充值。

• 頂部填充：0px
• 底部填充：0px
• 第 1 列頂部填充：6vw（桌面），120px（平板電腦和手機）
• 第 1 列底部填充：6vw（桌面），120px（平板電腦和手機）
• 第 1 列左填充：5vw（桌面）、80px（平板電腦）、50px（手機）
• 第 1 列右內邊距：5vw（桌面）、80px（平板電腦）、50px（手機）

盒子陰影

並為這一行添加一個微妙的框陰影。

• 框陰影模糊強度：100px
• 框陰影傳播強度：-10px

過渡

最後但並非最不重要的一點是，通過增加高級選項卡中的過渡持續時間來創建平滑過渡。

• 轉換持續時間：1100ms

第 1 行的重複文本模塊和按鈕模塊

由於我們已經擁有上一節中需要的所有模塊，因此我們將通過克隆它們來節省時間。

在第 2 行的第 1 列中放置重複項

並將重複項放在新行的第一列中。

更改內容

確保更改模塊的內容。

更改按鈕漸變背景

更改按鈕漸變背景。

• 顏色 1：#ff653f
• 顏色 2：#0066ff
• 梯度方向：39度

第 2 行的克隆圖像模塊

克隆您也可以在前一行的第一列中找到的圖像模塊。

在第 2 行的第 2 列中放置重複項

並將副本放在新行的第二列中。

更改圖像

將圖像更改為“ divi-gradient-background-on-hover-illustration-2.png ”文件，您可以在本文開頭下載的壓縮文件夾中找到該文件。

更改漸變背景

最後但並非最不重要的是，更改圖像模塊的漸變背景。

• 顏色 1：RGBA(0,2,12,0.66)
• 顏色 2：rgba(255,255,255,0)
• 結束位置：57%

預覽

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

靜止的

徘徊

最後的想法

在這篇文章中，我們向您展示瞭如何使用 Divi 更改懸停時的漸變背景。 我們還使用這種方法從頭開始創建了一個令人驚嘆的設計示例。 您可以自由地將設計和插圖用於您正在構建的任何類型的網站。 如果您有任何問題或建議，請務必在下方評論區留言！