如何使用水平懸停網格和隱藏溢出顯示圖像與 Divi

自從 Divi 的新尺寸選項問世以來，我們創建了一些教程，向您展示如何創建懸停顯示。 在那些教程中，隱藏的內容是垂直放置的。 但是，在某些情況下，您可能希望改為創建水平顯示。 在這篇文章中，我們將向您展示如何使用懸停網格和 Divi 的溢出選項來顯示圖像。 完成這項工作需要一種稍微不同的方法。 我們將使用一列行並將所有模塊放在彼此下方，並在懸停時將列轉換為水平網格。 您也可以免費下載 JSON 文件！

讓我們開始吧。

預覽

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

桌面

移動的

免費下載懸停網格佈局

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

下載文件

免費下載

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

下載

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

讓我們開始重建吧！

訂閱我們的 YouTube 頻道

添加新部分

首先向您正在處理的頁面添加一個新的常規部分。

添加新行

列結構

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

默認漸變背景

尚未添加任何模塊，打開行設置並添加以下漸變背景：

• 顏色 1：#b1ffc4
• 顏色 2：#ffffff
• 漸變類型：徑向
• 徑向：中心
• 起始位置：28%
• 結束位置：28%

懸停漸變背景

更改懸停時的漸變背景。

• 顏色 1：#b1ffc4
• 顏色 2：#ffffff
• 漸變類型：徑向
• 徑向：左
• 起始位置：5%
• 結束位置：5%

間距

繼續進行間距設置，然後更改填充和邊距值。

• 頂部填充：0px
• 底部填充：0px
• 上邊距：50px
• 下邊距：50px

默認邊框

接下來將“50px”邊框半徑添加到右上角和右下角。

懸停邊框

在懸停時將角恢復到“0px”。

默認框陰影

接下來使用以下設置添加一個微妙的框陰影：

• 框陰影模糊強度：50px
• 陰影顏色：rgba(0,0,0,0.09)

懸停框陰影

通過將陰影顏色替換為完全透明的顏色來移除懸停時的框陰影。

• 陰影顏色：rgba(0,0,0,0)

將文本模塊添加到列

添加 H2 內容

是時候開始添加模塊了，從文本模塊開始。 輸入您選擇的一些 H2 含量。

H2 文本設置

轉到設計選項卡並相應地更改 H2 文本設置：

• 標題 2 字體：Acme
• 標題 2 字體樣式：下劃線
• 標題 2 下劃線顏色：#00ff3f
• 標題 2 文本顏色：#000000
• 標題 2 文字大小：3vw

間距

接下來添加一些自定義填充值。

• 頂部填充：6vw
• 底部填充：7vw
• 左填充：2vw

將圖像模塊添加到列

上傳圖片

本專欄中我們需要的第二個模塊是圖像模塊。 上傳您選擇的風景圖片。

燈箱

接下來在鏈接設置中啟用燈箱選項。

• 在燈箱中打開：是

漿紗

並在大小設置中強製圖像全寬。 這將確保圖像在所有屏幕尺寸上都保持響應。

• 強制全角：是

克隆圖像模塊兩次

完成第一個圖像模塊後，您可以繼續克隆它兩次。

更改圖像

更改兩個副本中的圖像。 確保您上傳的圖片具有與第一張圖片相同的尺寸設置。

向行添加懸停效果

漿紗

現在我們已經完成了基本的行和模塊設置，是時候讓懸停效果發生了！ 我們將從修改行的高度和寬度並隱藏溢出開始。 打開行的大小設置並進行以下更改：

• 使用自定義裝訂線寬度：是
• 天溝寬度：1
• 寬度：20%
• 最大寬度：100%
• 高度：15.9vw

懸停大小調整

懸停時將寬度恢復為“100%”。 這將允許圖像在該行懸停時顯示。

• 寬度：100%

能見度

接下來移至高級選項卡並隱藏溢出。 這將確保在訪問者懸停（桌面）或單擊（平板電腦/移動設備）文本模塊之前隱藏圖像。

• 水平溢出：隱藏
• 垂直溢出：隱藏

過渡

我們還在過渡設置中更改過渡持續時間。

• 轉換持續時間：0ms

列懸停主要元素

要在懸停時創建網格，我們將打開列設置，轉到高級選項卡並將以下 CSS 代碼行放置在懸停主元素中：

display: grid;
grid-template-columns: 20% 25% 25% 25%;
grid-gap: 10px;

克隆行兩次

完成第一行後，您可以根據需要多次克隆它。 對於這個特定的設計示例，我們將行克隆兩次。

更改重複行 #1 漸變背景

更改第二行漸變背景的第一個漸變顏色。

• 顏色 1：#ffdc96

更改重複行 #2 漸變背景

對第三行做同樣的事情。

• 顏色 1：#b7c7ff

更改兩個副本的文本模塊複製和下劃線顏色

繼續修改兩個文本模塊副本和副本的下劃線顏色，你就完成了！

• 下劃線顏色 #1：#ffaa00
• 下劃線顏色 #2：#0037ff

預覽

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

桌面

移動的

最後的想法

在這篇文章中，我們向您展示瞭如何使用 Divi 的溢出選項在水平懸停網格中顯示圖像。 一旦將圖像懸停在桌面上並單擊平板電腦/手機，就會顯示這些圖像。 儘管我們顯示了圖像，但您可以通過調整構建器內部的設置來顯示您想要的任何類型的內容。 我們希望本教程也能激發您創建自己的替代懸停網格設計！ 如果您有任何問題或建議，請務必在下方評論區留言！

如果您渴望了解有關 Divi 的更多信息並獲得更多 Divi 免費贈品，請確保訂閱我們的電子郵件時事通訊和 YouTube 頻道，這樣您將永遠是第一批了解此免費內容並從中受益的人之一。