如何使用 Divi 使隱藏行內容出現在懸停上（免費下載！）
已發表: 2019-02-07向您的網站添加微妙的交互可以真正提升訪問者的整體用戶體驗。 讓您的網站看起來更漂亮，同時仍然尊重用戶友好性的一件事是使行內容出現在懸停時。 這是展示服務、產品、功能等的好方法。
在本教程中，我們將向您展示如何創建從 A 到 Z 的特定設計，但是一旦掌握了該方法，您就可以使其適用於您正在處理的任何類型的網站。 在這篇博文的最後，我們還將分享此設計的 JSON 文件，您可以免費下載並不受任何限制地使用。
讓我們開始吧！
預覽
在我們深入學習本教程之前，讓我們快速瀏覽一下不同屏幕尺寸下的結果。
桌面
移動的
讓我們開始創作吧！
添加新部分
默認背景顏色
首先向新頁面或現有頁面添加新部分並更改部分背景顏色。
- 背景顏色：#e0e0e0
懸停背景顏色
在懸停時修改此背景顏色。
- 背景顏色：#000000
間距
轉到設計選項卡並添加一些自定義間距值。 為了使本教程有效，我們將僅使用視口單位。 這將有助於確保一切都保持原位，無論屏幕大小如何。
- 最高利潤率：5vw
- 底邊距：5vw
- 左邊距：3vw
- 右邊距：3vw
- 頂部填充：0px
- 底部填充：0px
添加第 1 行
列結構
繼續使用以下列結構添加新行：
漸變背景
尚未添加任何模塊，打開行設置並添加漸變背景。
- 顏色 1：#ff5b79
- 顏色 2：rgba(255,255,255,0)
- 漸變類型：徑向
- 徑向：中心
- 起始位置：15%
- 結束位置：15%
漿紗
也對行的大小設置進行一些更改。
- 使這一行全寬：是
- 使用自定義裝訂線寬度：是
- 天溝寬度：1
間距
並在間距設置中添加一些自定義填充值。
- 頂部填充：9vw
- 底部填充：9vw
- 第 1 列左填充：5vw
- 第 1 列右填充：5vw
- 第 2 列左填充：5vw
- 第 2 列右填充：5vw
將文本模塊添加到第 1 列
添加內容
是時候開始添加模塊了！ 我們需要的第一個模塊是第 1 列中的文本模塊。添加 H3 內容和鏈接。
鏈接文字設置
然後，轉到鏈接文本設置並對鏈接的外觀進行一些更改。
- 鏈接字體：Didact Gothic
- 鏈接字體樣式：下劃線
- 鏈接下劃線樣式：純色
- 鏈接文字顏色：#ffffff
- 鏈接文字大小：20px
標題文字設置
還要修改 H3 文本設置。
- 標題 3 字體：Didact Gothic
- 標題 3 文本顏色：#ffffff
- 標題 3 文字大小：50px
能見度
最後但並非最不重要的是，禁用桌面上的模塊。 我們只需要這個模塊顯示在較小的屏幕尺寸上。
將分隔模塊添加到第 2 列
能見度
第 1 列中所需的第二個也是最後一個模塊是分頻器模塊。 確保啟用了“顯示分隔線”選項。
- 顯示分隔線：是
顏色
然後，更改分隔線顏色。
- 顏色：#ffffff
間距
也向 Divider 模塊添加一些自定義邊距值。
- 上邊距：11vw（桌面），80px（平板），
- 下邊距：50px（平板電腦和手機）
將文本模塊 #1 添加到第 2 列
添加內容
進入第二列！ 添加帶有一些 H4 內容選擇的文本模塊。
標題文字設置
然後，轉到 H4 文本設置並進行一些更改。
- 標題 4 字體：Didact Gothic
- 標題 4 字體粗細：粗體
- 標題 4 文本顏色：#ffffff
- 標題 4 文字大小：2vw（桌面）、40px（平板電腦）、30px（手機）
將文本模塊 #2 添加到第 2 列
添加內容
在上一個文本模塊的正下方，繼續添加另一個具有某些段落內容的選擇。
文字設置
接下來轉到文本設置並進行一些更改。
- 文字字體：Didact Gothic
- 文字顏色：#ffffff
- 文字大小：0.9vw（桌面），18px（平板電腦和手機）
- 文本行高：2em
間距
也添加一些自定義邊距值。
- 最高利潤率：2vw
- 右邊距：15vw
添加第 2 行
列結構
完成第一行及其所有模塊的修改後，您可以繼續使用以下列結構添加新行：
漿紗
在不添加任何模塊的情況下，打開行設置並對 Sizing 設置進行一些更改。
- 使這一行全寬：是
- 使用自定義裝訂線寬度：是
- 天溝寬度：1
間距
也刪除行間距設置中的所有默認填充。
- 頂部填充：0px
- 底部填充：0px
能見度
最後但並非最不重要的一點是，在平板電腦和手機上隱藏這一行。
將文本模塊添加到列
添加內容
我們在這一行中唯一需要的模塊是文本模塊。 添加一些 H3 內容和鏈接。
默認背景顏色
然後，轉到背景設置並為文本模塊添加背景顏色。
- 背景顏色：#e0e0e0
懸停背景顏色
在懸停時修改此背景顏色。
- 背景顏色：rgba(255,255,255,0)
默認文本設置
接下來，轉到文本設置並進行一些更改。
- 鏈接字體：Didact Gothic
- 鏈接字體樣式：下劃線
- 鏈接下劃線樣式：純色
- 鏈接文字顏色：#ffffff
- 鏈接文字大小：0px
- 鏈接字母間距：-1px
懸停鏈接文本設置
在懸停時修改鏈接文本大小。
- 鏈接文字大小：1.7vw
默認標題文本設置
繼續對 H3 文本設置進行一些更改。
- 標題 3 字體：Didact Gothic
- 標題 3 字體粗細：粗體
- 標題 3 文本顏色：#000000
- 標題 3 文字大小：12vw
- 標題 3 字母間距：-0.8vw
懸停標題文本設置
在懸停時修改一些 H3 文本設置。
- 標題 3 文本顏色：#ffffff
- 標題 3 文字大小：4vw
- 標題 3 字母間距：-0.2vw
間距
然後，轉到間距設置並添加一些自定義邊距和填充值。
- 上邊距：-34.3vw
- 底部邊距：-5vw
- 頂部填充：10vw
- 底部填充：10vw
- 左填充：26.5vw
懸停間距
修改懸停時的間距值。
- 最高利潤率：-34.1vw
- 底部邊距：-5vw
- 頂部填充：12vw
- 底部填充：12vw
- 左填充：11.5vw
過渡
也增加文本模塊的過渡持續時間。
- 轉換持續時間：400ms
克隆部分
完成第一部分後，繼續克隆整個部分，最多可複制多次。 在教程的下一部分中，我們將向您展示需要對每個副本進行的更改。
更改部分懸停背景顏色
您需要修改的第一件事是部分懸停背景顏色。
- 背景顏色：#ff5b79
更改第 1 行漸變背景
也更改第 1 行漸變背景。
- 顏色 1：#000000
更改文本顏色和復制
連同文本顏色和所有副本。
- 標題 3 文本顏色：#ff5b79
更改文本模塊間距
最後但並非最不重要的是，更改第 2 行中文本模塊的左填充。 您需要使用的左填充量取決於您使用的內容的長度。
- 左填充：21vw
免費下載佈局
要將您的手放在佈局上，您首先需要使用下面的按鈕下載它。 要訪問下載，您需要使用下面的表格訂閱我們的 Divi Daily 電子郵件列表。 作為新訂戶，您每週一將收到更多的 Divi 善良和免費的 Divi 佈局包！ 如果您已經在列表中，只需在下面輸入您的電子郵件地址，然後單擊下載。 您不會被“重新訂閱”或收到額外的電子郵件。
免費下載
加入 Divi 時事通訊，我們將通過電子郵件向您發送一份最終的 Divi 登陸頁面佈局包，以及大量其他令人驚嘆的免費 Divi 資源、提示和技巧。 跟隨，您將很快成為 Divi 大師。 如果您已經訂閱，只需在下面輸入您的電子郵件地址，然後單擊下載即可訪問佈局包。
您已成功訂閱。 請檢查您的電子郵件地址以確認您的訂閱並獲得免費的每週 Divi 佈局包！
預覽
現在我們已經完成了所有步驟，讓我們最後看看不同屏幕尺寸的結果。
桌面
移動的
最後的想法
在這篇文章中，我們向您展示瞭如何在懸停時顯示隱藏的行內容。 我們創建的結果僅使用 Divi 的內置選項。 我們還在教程的最後分享了 JSON 文件，希望它也能幫助您創建自己的替代設計。 如果您有任何問題或建議，請務必在下方評論區留言！