如何在 Divi 中為您的網格佈局創建擴展懸停效果

向您的網格佈局添加擴展懸停效果是一種吸引觀眾與您的頁面內容進行交互的獨特方式。 這個想法是從網格的緊湊顯示開始，然後當用戶將鼠標懸停在 Divi 中的元素上時擴展該網格以將網格內容帶到最前面。 這對於擴展圖像庫以在懸停時顯示更大的畫廊（帶有更大的圖像）非常有用。 您還可以擴展一組宣傳語，以吸引訪問者探索您的服務。

讓我們開始吧。

搶先看

這是我將在本教程中介紹的擴展懸停效果示例的先睹為快。

入門

對於本教程，您真正需要的只是 Divi。 我們還將使用 Divi Builder 中可用的 Design Agency About Page 預製佈局來啟動設計。

首先，創建一個新頁面，為頁面命名，然後單擊以使用 Divi Builder。 接下來選擇選擇預製佈局的選項。 從加載庫彈出窗口中，選擇 Design Agency Layout Pack，然後單擊以使用 Design Agency About Page。

將佈局加載到頁面後，發布它。 對於本教程，我將在前端使用 Divi 構建器。 為此，您需要做的就是單擊後端頁面編輯器頂部的“在前端構建”按鈕。

現在您可以開始了！

懸停時擴展模糊

對於第一個示例，我將向您展示如何擴展此佈局的第二部分中顯示所提供服務的簡介。

將 Blurb 模塊移動到僅佔據一排

目前該部分由兩個三列的行組成，每列都有一個簡介。

由於我們要將懸停效果添加到單行，因此我們需要將底行中的模糊效果移動到頂行。 確保頂行中的每一列都有兩個簡介。

然後刪除空的底行。

自定義 Blurb 模塊

接下來，我們將使用多選來選擇所有六個模糊，以便我們可以同時將相同的設計應用於所有這些。 為此，請按住 ctrl（或 cmd）並單擊每個模糊模塊，直到全部被選中。 然後單擊其中一個簡介上的設置圖標以打開元素設置模式。

繼續取出在內容框中找到的內容，然後按如下方式更新設計設置：

標題文字大小 16px
寬度：150px
模塊對齊：居中
自定義填充：10px 頂部，默認底部，默認左側，默認右側

為模塊提供 150 像素的自定義寬度，可以在我們展開行時將標題文本鎖定到位。

保存更改並單擊多選。

使中心模糊更明顯

接下來，打開標題為“品牌標識”的第二列中頂部宣傳語的宣傳語模塊設置。 然後更新以下內容：

圖標字體大小：120px
標題文字大小：18px（默認）

這只是使中心宣傳語更加明顯，因為其他宣傳語將從其向外擴展的中心部分。

自定義行以在懸停時展開

為了在懸停時擴展我們的模塊，我們將調整行的大小和間距。 打開行設置並更新以下內容：

自定義寬度：750px
天溝寬度：4
自定義填充（默認）：左 150 像素，右 150 像素
自定義填充（懸停）：0px 左，0px 右
自定義填充（平板電腦）：0px 左，0px 右

懸停時內邊距值的變化是產生擴大懸停效果的原因。 該行將向右擴展 150 像素，向左擴展 150 像素。

查看最終結果。

製作圓形網格

如果您想創建一個可擴展的圓形網格佈局，只需稍作調整即可。

首先複製一個外部簡介並將其拖動到第二列的大簡介上方。 然後用大圖標刪除中間的標題文本。

要垂直對齊簡介，您可以添加一小段自定義 CSS。 打開行設置並將以下自定義 CSS 添加到主元素：

align-items: center;

現在看看結果。

向右擴展網格

您還可以選擇向左或向右擴展網格。 只需組織您的模塊，然後更新您的行的自定義填充。 例如，如果您想將內容向右展開，請將您的默認自定義填充設置為左 0px 和右 300px。

它在移動設備上的樣子

以下是平板電腦和智能手機上的設計。 擴展懸停效果也不會在移動設備上激活。

向圖片庫添加擴展懸停效果

您還可以使用畫廊模塊在懸停時擴展圖像畫廊，以展示具有更大圖像的更大網格佈局。 為此，請找到靠近設計機構關於頁面佈局標題“我們的工作”底部的部分。

然後在包含三個圖像的行下添加一個新的一列行。 在行內，添加一個畫廊模塊。

更新圖庫模塊設置如下：

將 4 個具有相同尺寸的圖像添加到圖庫，使它們在行中看起來相同。

圖片數量：4
顯示標題和說明：否
顯示分頁：否

接下來，轉到設計選項卡並更新以下內容：

縮放圖標顏色：#353740
懸停疊加顏色：rgba(252,210,29,0.92)

寬度（桌面）：40%
寬度（懸停）：100%
寬度（平板電腦）：100%

在懸停時更改畫廊模塊的寬度是創建擴展懸停效果的原因。 將平板電腦寬度設置為 100% 還可以防止在移動設備上發生懸停效果。

這是到目前為止的樣子。

我們仍然需要更新我們的行設置以稍微改進功能並匹配佈局。

打開行設置並更新以下內容：

自定義寬度：80%
天溝寬度：2
均衡柱高：是

阻止將內容向下推的擴展懸停效應

如果您希望在不向下推頁面內容的情況下擴展圖片庫，您可以通過為您的行設置 min-height 來實現。 這將有一個更好的用戶體驗，尤其是在畫廊正下方的按鈕。

轉到行設置並在主元素中添加以下自定義 CSS：

min-height: 350px

然後在列主元素中添加以下自定義 CSS：

margin: auto;

均衡列高會激活後端的“display: flex” css 屬性，它允許“margin: auto”將列的內容對齊到行內垂直居中，現在最小高度為 350px。 在我們關於如何在 Divi 中垂直對齊內容的完整文章中了解有關此概念的更多信息。

查看最終結果。

向圖庫中添加更多圖像

您還可以向圖庫添加另外 4 張圖像，並將行的最小高度增加到 475 像素以獲得以下結果。

它在移動設備上的樣子

這是畫廊在移動設備上的樣子。 擴展懸停效果未激活。

最後的想法

給出的示例只是您使用 Divi 為整個網格內容創建擴展懸停效果的幾種方法。 但我相信您可以將它用於無數其他用例。 您可以擴展投資組合模塊、商店模塊，甚至博客模塊。 因此，發揮創造力並享受自己探索各種可能性的樂趣。

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

乾杯!