如何使用 Divi 顯示 Hover 上的列內容（免費下載！）

在最新的 Divi 帖子之一中，我們向您展示瞭如何在懸停時顯示隱藏的行內容。 今天，我們將向您展示如何使用相同類型的方法來顯示列內容。 我們將處理的方法是類似的，它允許您創建在桌面上具有良好懸停效果的各種設計，但也適用於沒有懸停選項的較小屏幕尺寸。

我們希望本教程能激發您為您構建的網站創建各種交互設計！ 在文章的最後，您將能夠下載 JSON 文件並根據需要對其進行調整。

讓我們開始吧！

預覽

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

桌面

正如您在下面的 GIF 中所注意到的，我們有一個平滑的懸停過渡，可以在懸停時顯示列內容。

移動的

另一方面，在較小的屏幕尺寸上，無需懸停即可顯示列內容。

讓我們開始重建吧！

訂閱我們的 YouTube 頻道

添加新的常規部分

間距

打開一個新頁面或現有頁面並向其添加常規部分。 打開部分設置並在間距設置中添加一些頂部和底部自定義填充。

• 頂部填充：10vw
• 底部填充：15vw

添加新行

列結構

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

漿紗

在不添加任何模塊的情況下，打開行設置並對大小設置進行一些更改。 這些設置將允許行佔據屏幕的整個寬度，它還有助於刪除列之間的所有空間。

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

間距

轉到下一行的間距設置。 在這裡，我們將通過添加自定義填充值來替換我們在上一步中刪除的空間。

• 左填充：8vw
• 右填充：8vw
• 第 1 列右填充：2vw
• 第 2 列左填充：1vw
• 第 2 列右填充：1vw
• 第 3 列左填充：2vw

將文本模塊 #1 添加到第 1 列

添加內容

是時候開始添加模塊了！ 從第 1 列中的文本模塊開始。添加一些所選的 H3 內容。

H3 文本設置

然後，轉到標題文本設置並對 H3 內容的外觀進行一些更改。

• 標題 3 字體：Didact Gothic
• 標題 3 字體粗細：粗體
• 標題 3 文本對齊：居中
• 標題 3 文本顏色：#3567ff
• 標題 3 文字大小：1.2vw（桌面），20px（平板電腦和手機）

間距

接下來向文本模塊添加一些自定義間距值。

• 底邊距：4vw
• 頂部填充：4vw
• 底部填充：4vw

盒子陰影

並給模塊一個微妙的盒子陰影。

• 框陰影垂直位置：36px
• 框陰影模糊強度：60px
• 陰影顏色：rgba(0,0,0,0.06)

將文本模塊 #2 添加到第 1 列

添加內容

繼續在上一個文本模塊的正下方添加另一個文本模塊。 添加一些選擇的段落內容。

文字設置

然後，轉到設計選項卡並對文本設置進行一些更改。

• 文字字體：Open Sans
• 文字大小：0.8vw（桌面），14px（平板電腦和手機）
• 文字字母間距：-0.05vw
• 文本行高：2.2em
• 文本方向：兩端對齊
• 文字顏色：深色

間距

在間距設置中也使用自定義邊距和填充值。

• 底邊距：3vw
• 頂部填充：2vw
• 底部填充：2vw
• 左填充：4vw
• 右填充：4vw

邊界

並使用以下設置為模塊添加左右邊框：

• 右邊框寬度：1px
• 右邊框顏色：#e5e5e5

將按鈕模塊添加到第 1 列

添加副本

第一列中我們需要的下一個模塊是按鈕模塊。 添加一些您選擇的副本。

結盟

然後，轉到設計選項卡並將按鈕對齊更改為居中。

• 按鈕對齊：居中

按鈕設置

繼續打開按鈕設置並更改按鈕的外觀，使其與我們要實現的整體設計相匹配。

• 為按鈕使用自定義樣式：是
• 按鈕文字大小：1vw（桌面），15px（平板電腦和手機）
• 按鈕文字顏色：#000000
• 按鈕邊框寬度：1px
• 按鈕邊框顏色：#dddddd
• 按鈕邊框半徑：0px
• 按鈕字母間距：-0.05vw
• 字體粗細：粗體
• 字體樣式：大寫

間距

也可以使用按鈕模塊的間距值。

• 下邊距：100px（平板電腦和手機）
• 頂部填充：0.8vw（桌面），10px（平板電腦和手機）
• 底部填充：0.8vw（桌面），10px（平板電腦和手機）
• 左填充：3.5vw（桌面），50px（平板電腦和手機）
• 右填充：3.5vw（桌面），50px（平板電腦和手機）

克隆第 1 列中的模塊兩次並在剩餘列中放置重複項

將三個不同的模塊添加到第 1 列後，您可以繼續克隆每個模塊兩次。 將重複項放置在剩餘的兩列中，以在每一列中實現相同的設計。

更改第 2 列中文本模塊 #1 的文本顏色

打開第 2 列中的第一個文本模塊並更改文本顏色。

• 標題 3 文本顏色：#6d28c1

更改第 3 列中文本模塊 #1 的文本顏色

對第三列中的第一個文本模塊執行相同的操作。

• 標題 3 文本顏色：#15668e

將疊加文本模塊添加到第 1 列

添加內容

現在我們擁有了所有需要的列內容，我們可以添加重疊元素，在懸停之前隱藏內容。 為了實現這一點，我們將使用另一個文本模塊。 繼續將另一個添加到第一列。 確保這是列中的最後一個模塊。 添加一些您選擇的內容。

漸變背景

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

• 顏色 1：#6a30ff
• 顏色 2：#3567ff
• 梯度方向：124度

文字設置

接下來更改文本設置。

• 文字字體：Didact Gothic
• 文字顏色：#ffffff
• 文字大小：2vw
• 文字方向：居中

間距

並通過添加一些自定義填充值從模塊中創建一個形狀。 我們還添加了一些負上邊距以創建此模塊和列內容之間的重疊。 您隱藏在文本模塊後面的內容將無法點擊。 這就是為什麼保持號召性用語（例如我們示例中的按鈕）在沒有懸停的情況下可見很重要的原因。

• 上邊距：-38vw
• 頂部填充：15vw
• 底部填充：15vw

邊界

接下來為文本模塊添加一些圓角。

盒子陰影

伴隨著微妙的盒子陰影。

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

默認過濾器

然後，轉到過濾器設置並確保默認情況下不透明度為“100%”。

• 不透明度：100%

懸停過濾器

將懸停時的不透明度更改為“0%”。 這將使模塊消失，並允許所有列內容出現。

• 不透明度：0%

自定義 CSS

要確保文本模塊始終位於所有列內容之上，請在文本模塊的高級選項卡中添加兩行 CSS 代碼。

z-index: 99;
position: relative

能見度

並將整個模塊隱藏在平板電腦和手機上。 如本文開頭所述，我們將在較小的屏幕尺寸上顯示所有列內容，以確保訪問者擁有良好的用戶體驗。

克隆覆蓋文本模塊兩次並在剩餘列中放置重複項

完成修改覆蓋文本模塊後，繼續並克隆它兩次。 將每個重複項放在剩餘的兩列中。

更改第 2 列中疊加文本模塊的漸變背景

更改第一個副本的漸變背景顏色。

• 顏色 1：#d530ff
• 顏色 2：#6d28c1

更改第 3 列中疊加文本模塊的漸變背景

對第二個副本也做同樣的事情。

• 顏色 1：#41ff30
• 顏色 2：#15668e

免費下載該部分

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

下載文件

免費下載

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

下載

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

預覽

桌面

移動的

最後的想法

在這篇文章中，我們向您展示瞭如何在懸停時顯示列內容。 您可以將這種方法用於您創建的任何類型的網站，以添加額外的交互級別。 如果您有任何問題或建議，請務必在下方評論區留言！