使用懸停文本陰影與 Divi 創建交互式內容

讓您的網站從類似網站中脫穎而出可能很困難，但是一旦您設法做到了，幾乎總是值得投入的努力和想法。 為了幫助您獲得靈感，我們將向您展示如何在使用 Divi 構建網站時創建交互式內容。

我們將在本教程中重新創建的示例將特別適用於您正在處理的任何關於頁面。 您將能夠使用 Divi 的內置文本陰影選項在懸停時共享事實或公司信息。 我們還確保這些懸停效果不適用於較小的屏幕尺寸，因此信息和移動體驗不會丟失。

讓我們開始吧！

預覽

在我們深入學習本教程之前，讓我們快速瀏覽一下您可以預期的結果。

桌面

移動的

我們確保所有這些懸停交互都不適用於較小的屏幕尺寸。 在使用相同的部分和模塊時，我們將得到以下簡單的結果：

方法

• 我們將重新創建的示例非常適用於 about 頁面，但您可以使用任何 5 個字符或 6 個字符的單詞（與列結構匹配）
• 每個字符都將專用於一個單獨的文本模塊
• 我們使用具有足夠多列的行來連接單詞的不同字符，並使它們看起來好像是在同一個模塊中創建的
• 默認情況下，我們將使文本模塊的文本顏色與部分背景顏色相匹配
• 為確保字符保持可讀性，我們還將對字符應用白色文本陰影
• 一旦您將鼠標懸停在字符上，文字陰影就會消失，文字顏色也會發生變化，讓您感覺文字正在填滿
• 懸停角色時，還會顯示一些附加信息
• 在較小的屏幕尺寸上，公司事實和/或信息將從一開始就存在

讓我們開始重建吧！

訂閱我們的 YouTube 頻道

添加新部分

背景顏色

打開一個新頁面或現有頁面並向其添加常規部分。 打開部分設置並更改背景顏色。

• 背景顏色：#03006d

間距

然後，轉到該部分的間距設置並添加一些自定義的頂部和底部填充。

• 頂部填充：50px
• 底部填充：50px

添加新行

列結構

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

漿紗

然後，轉到大小設置並允許行佔據屏幕的整個寬度。 這是重要的一步，因為它允許我們使用視口單位手動確定距離。

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

間距

在上一步中，我們已經擺脫了新行附帶的所有默認大小設置。 但是，我們確實需要手動添加一些填充。 在這裡，我們使用視口單位來確保結果在所有桌面屏幕尺寸中保持相同。

• 左填充：9vw（台式機），5vw（平板電腦和手機）
• 右填充：5vw（平板電腦和手機）

將文本模塊添加到第 1 列

添加內容

完成修改行設置後，您可以繼續將第一個文本模塊添加到第 1 列。將第一個字符添加為段落文本，並將您希望懸停時顯示的內容添加為列表文本。

默認文本設置

然後，轉到設計選項卡並修改默認段落文本設置。 確保文本和部分背景使用相同的顏色。

• 文字字體粗細：超粗
• 文字顏色：#03006d
• 文字大小：27vw（桌面），0vw（平板電腦和手機）
• 文本行高：1.1em
• 文字陰影模糊強度：0.01em
• 文字陰影顏色：#ffffff
• 文本方向：左

懸停文本設置

要創建漂亮的懸停效果，我們需要在懸停時修改這些段落文本設置。 請注意我們現在如何使用完全透明的文本陰影顏色使其消失。

• 文字顏色：#ffffff
• 文字陰影顏色：rgba(255,255,255,0)

默認列表文本設置

繼續轉到列表文本設置。 這些設置的一個重要部分是確保桌面上的文本大小為“0px”，但添加“18px”作為較小屏幕尺寸的文本大小。 這將確保列表文本顯示在較小的屏幕尺寸上，但不會在沒有懸停的情況下顯示在桌面上。

• 無序列表字體粗細：輕
• 無序列表文本顏色：#ffffff
• 無序列表文本大小：0px（桌面），18px（平板和手機）
• 無序列表文本陰影顏色：rgba(255,255,255,0)
• 無序列表樣式類型：圓形
• 無序列表樣式位置：外
• 無序列表項縮進：0px

懸停列表文本設置

我們確實希望列表文本出現在懸停時。 這就是為什麼我們將在懸停時更改文本大小的原因。 確保您在懸停時使用的文字大小與您在較小屏幕尺寸上使用的文字大小相同。 這將有助於確保在較小的屏幕尺寸上沒有懸停效果。

• 無序列表文本大小：18px

間距

繼續轉到模塊的間距設置並在那裡進行一些更改。

• 下邊距：50px（平板電腦和手機）
• 右邊距：-4vw（台式機），0vw（平板電腦和手機）

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

現在我們已經完成了第 1 列中的第一個模塊的修改，我們可以繼續克隆該模塊四次，並將每個重複項放置在剩餘的列中。 在接下來的步驟中，我們將修改每個重複項以與新角色匹配。

更改第 2 列中的文本模塊

更改內容

打開第 2 列中的副本並更改內容。

更改間距

然後，轉到間距設置並更改自定義邊距值。

• 下邊距：50px（平板電腦和手機）
• 左邊距：-2vw（台式機），0vw（平板電腦和手機）
• 右邊距：-2vw（台式機），0vw（平板電腦和手機）

更改第 3 列中的文本模塊

更改內容

還要更改第 3 列中重複項的內容。

更改間距

以及設計選項卡中的間距設置。

• 下邊距：50px（平板電腦和手機）
• 左邊距：-5.5vw（台式機），0vw（平板電腦和手機）
• 右邊距：1.5vw（台式機），0vw（平板電腦和手機）

更改第 4 列中的文本模塊

更改內容

繼續打開第 4 列中的文本模塊並更改此處的內容。

更改間距

然後轉到設計選項卡並在間距設置中更改自定義邊距值。

• 下邊距：50px
• 左邊距：-6vw（桌面），0vw（平板電腦和手機）
• 右邊距：2vw（桌面），0vw（平板電腦和手機）

更改第 5 列中的文本模塊

更改內容

到最後一個副本。 更改內容框中的內容。

更改間距

隨著自定義間距設置。

• 下邊距：50px
• 左邊距：-7vw（台式機），0vw（平板電腦和手機）
• 右邊距：3vw（桌面），0vw（平板電腦和手機）

預覽

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

桌面

移動的

最後的想法

我們知道讓您的網站從其他網站中脫穎而出是多麼重要。 借助 Divi 的內置選項，您可以隨心所欲地發揮創意。 這篇文章是一個示例，說明如何在懸停時創建交互式內容，同時確保在較小的屏幕尺寸上一切都保持簡單。 您可以使用我們為您當前正在處理的任何關於頁面重新創建的示例。 這是在與訪問者進行互動的同時分享有關您公司的一些事實和其他信息的好方法。 如果您有任何問題或建議，請務必在下方評論區留言！