使用 Divi 在懸停時將文本模塊轉換為獨特的人物描述
已發表: 2018-12-05尋找到的描述信息添加到圖像創造性地？ 借助 Divi 的內置懸停選項，現在比以往任何時候都更容易。 您可以在您的網站上將這種方法用於各種目的，從推薦到團隊成員描述等等。 在本教程中，我們將介紹 4 個不同的示例，它們將幫助您實現令人驚嘆的網頁設計。 我們僅使用 Divi 的內置選項創建所有四個示例。
讓我們開始吧！
預覽
在我們深入研究分步教程之前，讓我們快速瀏覽一下不同屏幕尺寸的最終結果。
桌面
移動的
一般步驟
添加新部分
為了使本教程更容易理解，我們將從一些常規步驟開始。 之後，我們將處理每個示例獨有的步驟。 首先向新頁面或現有頁面添加新的常規部分。
添加行
列結構
繼續並選擇以下列結構（您也可以使用其他列結構進行此操作）：
第 1 列背景圖像
尚未添加任何模塊，打開行設置並將背景圖像添加到第一列。
- 第 1 列背景圖像重複：無重複
漿紗
繼續更改行的大小設置。
- 使這一行全寬：是
- 使用自定義裝訂線寬度：是
- 天溝寬度：1
間距
然後添加一些自定義填充值。
- 頂部填充：150px
- 底部填充：150px
將文本模塊添加到第 1 列
添加內容
為了顯示懸停時的描述，我們將為四個示例中的每一個使用一個文本模塊。 繼續將此文本模塊添加到您添加背景圖像的同一列。
默認文本設置
然後，轉到文本設置並進行一些更改。
- 文字顏色：rgba(255,255,255,0)
- 文字大小：0.7vw（桌面），12px（平板電腦和手機）
- 文本方向：對齊
懸停文本設置
更改懸停時的文本顏色。
- 文字顏色：#000000
默認標題文本設置
還要更改 H3 文本設置。
- 標題 3 字體粗細：超粗體
- 標題 3 字體樣式：大寫
- 標題 3 文本顏色：rgba(255,255,255,0)
- 標題 3 文字大小：2.5vw（桌面）、40px（平板電腦）、30px（手機）
- 標題 3 行高：2.2em
懸停標題文本設置
並在懸停時應用不同的 H3 文本顏色。
- 標題 3 文本顏色：#000000
克隆行 3 次
現在我們已經完成了所有的一般步驟，我們可以繼續克隆我們創建的行 3 次，這將允許我們為四個示例中的每一個都有一行。 確保在每個示例的開頭，您移動到下一行。
示例#1
更改文本模塊
默認背景顏色
讓我們從第一個例子開始吧！ 打開第一列中的文本模塊並添加背景顏色。
- 背景顏色：rgba(255,255,255,0)
懸停背景顏色
在懸停時更改此背景顏色。
- 背景顏色：rgba(255,255,255,0.73)
默認間距
接下來添加一些自定義邊距和填充。
- 上邊距：-500px
- 下邊距：500px
- 頂部填充：250px
- 底部填充：250px
- 左填充：70px
- 右填充：70px
懸停間距
更改懸停時的值。
- 上邊距：0px
- 下邊距：0px
- 頂部填充：100px
- 底部填充：100px
過渡
最後，通過增加高級選項卡中的過渡持續時間來創建平滑過渡。
- 轉換持續時間：1000ms
示例#2
更改文本模塊
默認背景顏色
繼續下一個例子！ 打開第一列中的文本模塊並添加背景顏色。
- 背景顏色：rgba(255,255,255,0)
懸停背景顏色
更改懸停時的背景顏色。
- 背景顏色：rgba(226,246,255,0.85)
默認間距
接下來添加一些自定義邊距和填充值。
- 上邊距：100px
- 下邊距：100px
- 頂部填充：150px
- 底部填充：150px
- 左填充：70px
- 右填充：70px
懸停間距
在懸停時更改這些值。
- 上邊距：200px
- 下邊距：-200px
- 左邊距：50px
- 頂部填充：100px
- 底部填充：100px
默認邊框
繼續向文本模塊添加邊框。
- 左邊框寬度：0px
- 左邊框顏色：#ffffff
懸停邊框
並在懸停時更改邊框寬度。
- 左邊框寬度：8px
過渡
最後但並非最不重要的一點是，增加過渡持續時間以實現平滑過渡。
- 轉換持續時間：500ms
示例 #3
克隆文本模塊
繼續第三個例子！ 對於此示例，我們需要為較小的屏幕尺寸創建一個單獨的版本。 克隆第一列中的文本模塊。
添加第 1 列漸變背景
然後，打開行設置並使用以下設置向第一列添加漸變背景：
- 顏色 1：RGBA(43,135,218,0)
- 顏色 2：#ffffff
- 第 1 列漸變類型：徑向
- 第 1 列徑向：中心
- 第 1 列起始位置：59%
- 第 1 列結束位置：59%
- 第 1 列將漸變置於背景圖像上方：是
更改文本模塊 #1
漸變背景
打開第 1 列中的第一個文本模塊。這將是出現在桌面上的描述。 添加漸變背景。
- 顏色 1：rgba(239,239,239,0.65)
- 顏色 2：rgba(255,255,255,0)
- 漸變類型：徑向
- 徑向：中心
- 起始位置：70%
- 最終位置：71%
默認間距
然後，添加一些自定義邊距和填充值。
- 最高利潤率：6vw
- 底邊距：6vw
- 頂部填充：9vw
- 底部填充：9vw
- 左填充：2vw
- 右填充：2vw
懸停間距
在懸停時更改邊距值。
- 左邊距：15vw
- 右邊距：-15vw
能見度
並在平板電腦和手機上禁用該模塊。
過渡
也增加過渡持續時間。
- 轉換持續時間：500ms
更改文本模塊 #2
漸變背景
第 1 列中的第二個模塊是將出現在較小屏幕尺寸上的說明。 首先添加漸變背景。
- 顏色 1：rgba(239,239,239,0.65)
- 顏色 2：rgba(255,255,255,0)
- 漸變類型：徑向
- 徑向：中心
- 起始位置：70%
- 最終位置：71%
默認間距
接下來添加一些自定義邊距和填充值。
- 上邊距：95px
- 下邊距：95px
- 頂部填充：170px
- 底部填充：170px
- 左填充：20px
- 右填充：20px
懸停間距
在懸停時更改邊距值。
- 上邊距：250px
- 下邊距：-200px
能見度
並禁用桌面上的模塊。
更改兩個文本模塊的文本方向
最後但並非最不重要的一點是，請確保同時更改兩個模塊的文本方向以實現所需的結果。
- 文字方向：居中
示例 #4
更改文本模塊
默認背景顏色
繼續第四個也是最後一個例子！ 將以下背景顏色添加到第 1 列中的文本模塊：
- 背景顏色：rgba(255,255,255,0)
懸停背景顏色
在懸停時更改此背景顏色。
- 背景顏色：rgba(255,255,255,0.72)
默認間距
接下來轉到間距設置並在那裡添加一些自定義邊距和填充值。
- 左邊距：-200px
- 右邊距：200px
- 頂部填充：250px
- 底部填充：250px
- 左填充：70px
- 右填充：70px
懸停間距
在懸停時修改這些值。
- 左邊距：0px
- 右邊距：0px
- 頂部填充：300px
- 底部填充：300px
過渡
最後但並非最不重要的一點是，增加過渡持續時間以實現平滑過渡。
- 轉換持續時間：1200ms
預覽
現在我們已經完成了所有步驟，讓我們最後看看不同屏幕尺寸的結果。
桌面
移動的
最後的想法
在這篇文章中，我們向您展示瞭如何創造性地使用 Divi 的懸停選項來展示懸停時的人物描述。 通過這四個示例，您可以將任何推薦或團隊成員描述轉換為頁面上的交互式設計元素。 如果您有任何問題或建議，請務必在下方評論區留言！