使用 Divi 在懸停時變換形狀來裝飾您的頁面

創建交互式設計可以立即幫助提升任何網站的外觀和感覺。 借助 Divi 的內置選項，您可以進行多次輪換並創建真正適合您網站的效果。

在這篇文章中，我們將向您展示如何通過在懸停時變換形狀來裝飾您的頁面。 我們將獲得的結果側重於桌面體驗，但在較小的屏幕尺寸上也保持整潔和用戶友好的設計。

讓我們開始吧！

預覽

在我們深入學習本教程之前，讓我們快速瀏覽一下我們將從頭開始重新創建的兩個示例。

示例#1

示例#2

下載形狀圖像疊加

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

下載文件

免費下載

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

下載

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

讓我們開始創作吧！

添加新部分

背景顏色

通過創建新頁面或打開現有頁面來啟動。 向其中添加常規部分，打開部分設置並添加完全黑色的背景色。

• 背景顏色：#000000

溢出

為了在本教程後面切斷形狀圖像覆蓋，我們將通過向部分的主要元素添加一行 CSS 代碼來確保沒有任何內容超出部分容器。

overflow: hidden;

添加新行

列結構

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

漿紗

還沒有添加任何模塊，打開行設置並允許行佔據屏幕的整個寬度。

• 使這一行全寬：是
• 使用自定義裝訂線寬度：是
• 天溝寬度：1

將圖像模塊添加到行

上傳異形圖像疊加

是時候開始添加模塊了！ 我們需要的第一個模塊是圖像模塊。 上傳您可以在下載的文件夾中找到的第一個形狀的圖像疊加層。 您可以通過訪問這篇文章、下載文件、打開 Illustrator 文件並根據您的需要對其進行自定義來找到更多形狀的圖像疊加。 但是，如果您只想重新創建在這篇文章的預覽中共享的示例，那麼您在本文開頭下載的文件夾就可以了。

默認背景顏色

轉到圖像模塊的背景設置並添加以下默認背景顏色：

• 背景顏色：#6a00ff

懸停背景顏色

使用以下顏色代碼更改懸停時的背景顏色：

• 背景顏色：#ffa216

漸變背景

繼續向圖像模塊添加漸變背景。

• 顏色 1：#ff2841
• 顏色 2：rgba(255,255,255,0)
• 漸變方向：168度
• 結束位置：68%

漿紗

轉到設計選項卡並啟用“強制全角”選項。

• 強制全角：是

間距

我們還通過在間距設置中添加一些負上邊距來隱藏形狀圖像覆蓋的一部分。 您會注意到模塊不會超過部分容器，這要歸功於我們在教程開頭添加到部分的一行 CSS 代碼。

• 上邊距：-22vw（台式機和平板電腦），0vw（手機）

默認變換旋轉

我們現在可以開始轉換模塊了！ 將以下默認變換旋轉設置添加到圖像模塊：

• 中心：359度

懸停變換旋轉

並在懸停時更改這些值以創建轉換形狀。

• 左：250度
• 中心：320度

CSS ID

將鼠標懸停在圖像模塊上時，成形的圖像疊加層將與位於其頂部的所有其他模塊重疊。 為了避免這種情況，我們需要在帖子的稍後懸停時修改模塊的 z-index。 為此，您需要將自定義 CSS 類添加到圖像模塊。

過渡

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

• 轉換持續時間：950ms

將文本模塊 #1 添加到行

添加 H2 內容

我們需要的下一個模塊是文本模塊。 添加一些您選擇的 H2 含量。

H2 文本設置

然後，轉到設計選項卡並修改 H2 文本設置。

• 標題 2 字體：Didact Gothic
• 標題 2 字體粗細：粗體
• 標題 2 文本對齊：居中
• 標題 2 文本顏色：#ffffff
• 標題 2 文字大小：7vw
• 標題 2 行高：0.9em

間距

使用一些自定義邊距值在此模塊和圖像模塊之間創建重疊。

• 最高利潤率：-68vw
• 底邊距：8vw
• 左邊距：29vw
• 右邊距：29vw

將文本模塊 #2 添加到行

添加內容

在上一個文本模塊的正下方添加另一個文本模塊，然後輸入您選擇的一些段落內容。

文字設置

然後，轉到設計選項卡並修改文本設置。

• 文字字體：Open Sans
• 文字顏色：#ffffff
• 文字大小：1vw（桌面）、2vw（平板電腦）、3vw（手機）
• 文本行高：1.8em
• 文字方向：居中

間距

添加一些自定義邊距值。

• 下邊距：2vw（桌面）、4vw（平板電腦）、6vw（手機）
• 左邊距：30vw（桌面），10vw（平板電腦和手機）
• 右邊距：30vw（桌面），10vw（平板電腦和手機）

將分隔模塊添加到行

能見度

我們需要的下一個也是最後一個模塊是分頻器模塊。 確保啟用了“顯示分隔線”選項。

• 顯示分隔線：是

顏色

然後，轉到設計選項卡並更改分隔線的顏色。

• 顏色：#ffffff

漿紗

還要修改尺寸值。

• 分隔線重量：7px
• 寬度：15%
• 模塊對齊：居中

間距

並添加一些自定義底部填充。

• 底邊距：5vw

克隆整個部分

進入第二個例子！ 克隆您剛剛完成的部分。

更改圖像模塊

上傳新形狀的圖像疊加

我們需要進行一些更改，從形狀圖像疊加開始。 繼續上傳第二個形狀的圖像疊加層，您可以在本文開頭下載的文件夾中找到它。

更改默認背景顏色

然後，轉到圖像模塊的背景設置並更改默認背景顏色。

• 背景顏色：#2d007c

更改懸停背景顏色

還要更改懸停背景顏色。

• 背景顏色：#008089

更改漸變背景

隨著漸變背景。

• 顏色 1：#0c0c0c
• 顏色 2：rgba(255,255,255,0)
• 漸變方向：168度
• 結束位置：68%

更改默認變換旋轉設置

我們也在改變變換效果。 轉到變換設置並更改默認變換旋轉值。

• 左：270度
• 中心：359度

更改懸停變換旋轉設置

在懸停時修改這些相同的值。

• 左：192度
• 中心：280度
• 右：15度

向頁面添加自定義代碼

打開頁面設置

現在，這篇文章的最後一部分確保轉換形狀在懸停時保持在所有其他模塊的下方。 打開頁面設置。

添加 CSS 代碼

然後轉到高級選項卡並添加以下 CSS 代碼。

.hover-state:hover {
z-index: -99; }

我們正在使用我們在整個教程中分配給各個部分的 CSS 類。

預覽

現在我們已經完成了所有步驟，讓我們最後看看結果。

示例#1

示例#2

最後的想法

在這篇文章中，我們向您展示瞭如何使用 Divi 的轉換選項發揮創意。 更具體地說，我們使用帶有形狀圖像疊加的圖像模塊來創建變換的背景形狀。 如果您有任何問題或建議，請務必在下方評論區留言！