如何在 Divi 中為抽象懸停效果轉換多個元素

正如您現在已經知道的那樣，Divi 有大量的設計設置，允許您為任何 Divi 元素（部分、行或模塊）創建獨特的懸停效果。 通常，懸停效果僅與一個元素隔離。 例如，如果您在懸停時向模塊添加變換旋轉屬性，則將在懸停在模塊上時激活該旋轉。 但是，如果您向包含模塊的行添加額外的懸停效果，則會在懸停在模塊上時添加另一層懸停效果。 這為一些獨特的抽象懸停效果打開了大門。

在本教程中，我們將探索如何使用 Divi 的內置設置為抽象懸停效果轉換多個元素。 由於我們將在此設計中稍微不同地使用行，我將向您展示如何為您的行創建網格佈局，以便您可以在畫廊中展示這些懸停效果（如果需要）。

讓我們開始吧。

搶先看

免費下載懸停佈局上的變換多個元素

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

下載文件

免費下載

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

下載

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

要將佈局導入您的頁面，只需提取 zip 文件並將 json 文件拖到 Divi Builder 中。

讓我們進入教程好嗎？

入門

訂閱我們的 YouTube 頻道

對於本教程，您將需要以下內容：

1. 已安裝並激活 Divi 主題
2. 幾張圖。 我正在使用可從 Divi Builder 中訪問的預製佈局中的圖像

準備好後，轉到您的 WordPress 儀表板。 然後創建一個新頁面（Pages > Add New），給你的頁面一個標題，然後部署 Divi Builder。 選擇“從頭開始構建”選項。

現在你的空白畫佈在等著你！

圖像的抽象懸停效果

第一個設計將結合行上的傾斜變換懸停效果和圖像模塊，在懸停時為我們的圖像創建扇形效果。 除了看起來很酷之外，這種效果還可以作為有用的 UI 交互，讓用戶知道通過單擊圖像，您將看到更多圖像。 因此，如果您願意，您可以使用該圖像作為您畫廊頁面的鏈接。

這是如何做到的。

首先創建一個具有一列行的新常規部分。

然後將圖像模塊添加到該行。

接下來，將上傳圖像添加到模塊。

添加圖像模塊懸停效果

現在我們可以向圖像添加一些變換懸停效果，這些效果將縮放、旋轉和傾斜圖像。 為此，請轉到轉換選項並更新以下內容：

變換縮放 X 和 Y 軸：110%

Transform 旋轉 Z 軸：9deg

Transform Skew X 軸和 Y 軸：3deg

就是這樣！ 很簡單。 現在我們需要自定義行以添加另一個懸停效果，該效果將在懸停在元素上時激活。

行設置

為了使此設計起作用，該行需要與其中的圖像大小相同，以便兩者的懸停區域相同。 這將允許我們為模塊和將在懸停在模塊上時激活的行（或在這種情況下為圖像）添加不同的懸停效果。 這是有效的，因為將鼠標懸停在一行內的模塊上將激活懸停效果，就像將鼠標懸停在該行上一樣。 而且，因為我們在模塊上有不同的懸停效果，所以當懸停在模塊上時，兩種懸停效果都會激活。 這允許我們使用框陰影、變換傾斜和變換旋轉到行和模塊的抽象懸停效果的組合。

我們已經為我們的圖像設置了模塊懸停效果，現在我們需要調整行的大小。 根據圖像的大小，模塊應該已經跨越行的整個寬度，因此從技術上講，不需要調整行的寬度。 但是對於這個例子，我將縮小行以便為我們的懸停效果騰出空間。

更新行設置如下：

最大寬度：400px

由於我們希望行的高度與其中的圖像相匹配，因此我們需要擺脫默認的頂部和底部填充：

自定義填充：0px 頂部，0px 底部

現在我們需要向行列添加背景圖像。 每當圖像模塊變換懸停效果傾斜和旋轉時，此背景圖像就會出現。

第 1 列背景圖片：[輸入圖片]

繼續更新帶有懸停框陰影的行，如下所示：

盒子陰影：見截圖
框陰影水平位置：0px（默認），-30px（懸停）
框陰影垂直位置：0px（默認），-15px（懸停）
陰影顏色：#002f66

此框陰影添加了出現在行背景圖像後面的另一個圖像的效果，一旦我們添加變換懸停效果，該效果將旋轉並將背景圖像傾斜到視圖中，該效果就會出現。

最後，我們準備添加 skew 變換屬性來為行添加額外的懸停效果。

變換傾斜 X 和 Y 軸：-3deg

最後結果

這是最終結果。

它也將在移動設備上很好地擴展。

號召性用語的抽象懸停效果（示例 1）

行設置

用一列行創建一個新的常規部分。

然後按如下方式更新行設置：

第 1 列背景漸變左顏色：rgba(34,43,58,0.71)
第 1 列背景漸變右顏色：#222b3a
背景圖片：[插入圖片]
最大寬度：400px
自定義填充：0px 頂部，0px 底部

稍後我們將返回行設置以完成我們的抽象懸停效果，但現在，讓我們將調用添加到行中的 Action Module。

號召性用語模塊設置

打開 Call to Action Module 設置並更新內容如下：

作品名：積分旅行
按鈕文字：點擊這裡
內容：限時
按鈕鏈接 URL：#（現在只是為了激活按鈕）
使用背景顏色：否

然後更新模塊的文本和間距的設計設置。

標題字體：Gilda Display
按鈕文字大小：16px
按鈕文字顏色：#ffb238
按鈕背景顏色：rgba(0,0,0,0)
按鈕邊框寬度：0px

自定義填充：頂部 20%，底部 20%

現在為模塊添加邊框。

邊框寬度：2px
邊框顏色：#222b3a

這照顧了我們的默認設計。 現在是有趣的部分了。 請記住，因為我們的行和模塊的大小（高度和寬度）基本相同，所以兩者的懸停區域將相同。 換句話說，我們添加到行和模塊的懸停效果在懸停在元素上時都會激活。 這允許我們使用框陰影、變換傾斜和變換旋轉到行和模塊的抽象懸停效果的組合。

讓我們從行懸停效果開始。

行懸停效果

首先，我們可以在懸停時向我們的行添加一個框陰影。 打開行設置並更新以下內容：

盒子陰影：見截圖
框陰影水平位置：0px（默認），90px（懸停）
框陰影垂直位置：0px（默認），80px（懸停）
框陰影傳播強度：0px（默認），-40px（懸停）

陰影顏色：#ffb238

請記住，框陰影也將繼承我們接下來要添加的變換選項。

現在讓我們在懸停時添加一個旋轉和傾斜變換屬性。

Transform 旋轉 X 軸（懸停）：10deg
Transform Skew X 軸（懸停）：-4deg
變換傾斜 Y 軸（懸停）：-4deg

這會處理行懸停效果。 現在我們需要將懸停效果添加到將完成設計的號召性用語模塊。

號召性用語模塊懸停效果

打開號召性用語模塊設置，給它一個框陰影懸停效果，如下所示：

盒子陰影：見截圖
框陰影水平位置：0px
框陰影垂直位置：0px（默認），30px（懸停）
陰影顏色：#ffffff

最後，在懸停時添加縮放、旋轉和傾斜變換屬性，如下所示：
變換縮放 X 和 Y 軸（懸停）：115%
Transform 旋轉 Z 軸（懸停）：9deg
Transform Skew X 軸（懸停）：3deg
Transform Skew Y 軸（懸停）：3deg

在懸停時使用縮放來增加模塊的大小將有助於最大限度地減少用戶僅懸停在行元素而不是模塊上的機會。

最後結果

這是抽象懸停效果的最終結果。 請注意行懸停效果和模塊懸停效果如何在懸停時激活以傾斜抽象設計的元素。

這是懸停效果在移動設備上的樣子。 但是，由於大多數移動瀏覽器需要點擊來激活懸停效果，您可能希望在移動設備上禁用懸停效果，以避免用戶在使用模塊作為鏈接時必須雙擊。

號召性用語的抽象懸停效果（示例 2）

為了快速啟動下一個抽象懸停效果的設計，讓我們複製包含第一個示例的部分。 現在我們需要做的就是對設計和懸停效果進行一些細微的調整，以獲得獨特的設計。

更新行設置

首先，更新行設置如下：

Transform 旋轉 Z 軸：-5deg
變換傾斜 X 和 Y 軸：-4deg

更新號召性用語模塊設置

現在讓我們調整模塊設置如下：

首先，取出邊界……

邊框寬度：0px

然後更新框陰影如下：

框陰影水平位置：0px
框陰影垂直位置：110px
（確保並禁用從您複製的先前設計繼承的懸停效果）
陰影顏色：#ffb238

現在我們可以更新我們的變換屬性懸停效果。 在這裡，我們基本上減少了比例，並為我們之前的旋轉和傾斜變換屬性添加了負值，以在懸停時向相反方向移動元素。

更新以下轉換選項：

變換縮放 X 和 Y 軸（懸停）：110%
變換旋轉 Z 軸（懸停）：-9deg
Transform Skew X 軸（懸停）：-3deg
Transform Skew Y 軸（懸停）：-3deg

為您的行創建網格佈局

由於這種設計要求父行環繞模塊並具有相同的高度和寬度，因此您實際上無法像通常那樣創建列佈局，但是，您可以使用 flex 屬性來對齊行在網格佈局中水平放置。

為此，首先將包含您的模塊的行複制幾次，以便在一個部分中有三行。

然後為每一行添加自定義邊距：

自定義邊距：頂部 50 像素，底部 50 像素

然後打開部分設置並簡單地將以下自定義 CSS 添加到主元素。

display: flex;
flex-wrap: wrap;

現在您有三列將響應您的瀏覽器大小的行。

最後的想法

在懸停時轉換多個元素確實提供了您可以探索的另一個層次的創造力。 本教程中的示例旨在向您展示什麼是可能的，但您可以隨意調整您自己項目的設計。 正如您所料，如果您願意，您可以變得非常古怪。 但是您也可以更加保守地創建一個微妙的交互設計元素，例如本教程中的圖像模塊示例。

我期待在評論中收到您的來信。

乾杯!