如何使用 Divi 在懸停選項卡中展示功能

您是否正在尋找新的和創造性的方式來在您的網頁上展示功能和/或產品？ 如果是這樣，請繼續閱讀，因為在這篇文章中，我們將向您展示如何僅使用 Divi 的內置選項在懸停選項卡中顯示功能。 您使用這種方法的可能性是無窮無盡的，它們肯定會讓您更深入地了解 Divi。 選項卡懸停效果只會發生在對懸停友好的桌面環境中。 當從較小的屏幕尺寸查看懸停選項卡時，功能將以其原始形式列出。

讓我們開始吧！

預覽

在我們深入學習本教程之前，讓我們先看看不同屏幕尺寸的結果。

桌面

移動的

讓我們開始創作吧！

訂閱我們的 YouTube 頻道

添加新部分

漸變背景

添加新頁面或打開現有頁面並添加新部分。 打開部分設置並為該部分添加漸變背景。 我們將使用漸變背景來覆蓋懸停選項卡的左側部分，您可以在上面的打印屏幕中看到。

• 顏色 1：#f2f2f2
• 顏色 2：#ffffff
• 梯度方向：87度
• 起始位置：20%
• 結束位置：20%

間距

然後，通過向兩個選項添加“0px”來刪除該部分的自定義頂部和底部填充。

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

添加新行

列結構

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

背景顏色

尚未添加任何模塊，打開行設置並更改背景顏色。

• 背景顏色：#ffffff

行對齊

還要修改行對齊方式。

• 行對齊方式：左

默認大小

並更改大小設置。

• 使用自定義寬度：是
• 單位：PX
• 自定義寬度：400px
• 使用自定義裝訂線寬度：是
• 天溝寬度：1

懸停大小調整

在懸停時修改大小設置中的自定義寬度選項。 這將允許行在懸停時擴展。

• 自定義寬度：2000px

間距

然後，轉到間距設置並刪除默認的頂部和底部填充值。

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

默認邊框

將“20px”添加到該行的右上角，並為該行添加一個左邊框。

• 左邊框寬度：20px
• 左邊框顏色：#6d44ff

懸停邊框

通過添加“0px”來移除懸停時的“20px”右上角圓角。

默認框陰影

最後但並非最不重要的是，添加一個微妙的框陰影。

• 框陰影模糊強度：80px
• 框陰影傳播強度：-10px
• 陰影顏色：rgba(0,0,0,0.11)

懸停框陰影

並在懸停時將陰影顏色修改為完全透明的顏色。

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

將 Blurb 模塊添加到行

添加內容

現在我們已經完成了所有行設置的修改，我們可以繼續向列添加一個 Blurb 模塊。 隨意使用您選擇的任何其他模塊。 添加模塊後，添加一些選擇的內容。

選擇圖標

接下來選擇您選擇的圖標。

圖標設置

並在圖標設置中更改圖標的外觀。

• 圖標顏色：#5323ff
• 圖標位置：頂部
• 使用圖標字體大小：是
• 圖標字體大小：54px

默認標題文本設置

接下來修改標題文本設置。

• 標題字體: Poppins
• 標題文本對齊：居中
• 標題文字顏色：#5323ff
• 標題文字大小：25px
• 標題字母間距：-1px
• 標題行高度：1em

懸停標題文本設置

並在懸停時修改標題行高度。

• 標題行高度：1.5em

默認正文設置

然後，轉到正文設置並進行一些更改。 這包括將文本大小更改為“0px”。 這將幫助我們使正文僅在懸停時顯示。

• 正文字體： Poppins
• 正文字體重量：輕
• 正文對齊方式：居中
• 正文顏色：#000000
• 正文大小：0px（桌面），15px（平板電腦和手機）
• 車身線高：2.2em

懸停正文設置

要確保正文文本出現在懸停時，請更改懸停時的文本大小。

• 正文文字大小：15px

默認間距

為了給模塊一些呼吸的空間，我們為模塊添加了一些自定義的頂部和底部填充。

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

懸停間距

我們將修改懸停時的間距設置。 在退出 Visual Builder 之前您將無法看到最終結果，因為我們將懸停選項應用於行和 Blurb 模塊。

• 頂部填充：80px
• 底部填充：80px
• 左填充：20vw
• 右填充：20vw

克隆行 3 次

完成第一行及其 Blurb 模塊的修改後，您可以根據需要繼續克隆該行任意多次。

更改行和模糊模塊 #2

更改行間距

打開第一個副本並添加一些自定義左邊距。 這將使我們能夠創建樓梯效果，您可以在這篇文章的預覽中看到。

• 左邊距：6vw

更改行邊框顏色

還要更改行的左邊框顏色。

• 左邊框顏色：#00ffcc

更改模糊內容和圖標

然後，打開 Blurb 模塊並更改圖標。

更改模糊模塊圖標顏色

隨著圖標顏色。

• 圖標顏色：#00eda6

更改標題文本顏色

和標題文字顏色。

• 標題文字顏色：#00eda6

更改行和模糊模塊 #3

更改行間距

也向第二個副本添加一些自定義左邊距。

• 左邊距：12vw

更改行邊框顏色

更改左行邊框顏色。

• 左邊框顏色：#afebff

更改模糊內容和圖標

以及簡介圖標和內容。

更改模糊模塊圖標顏色

還要修改圖標顏色。

• 圖標顏色：#68d9ff

更改標題文本顏色

標題文本顏色也是如此。

• 標題文字顏色：#68d9ff

更改行和模糊模塊 #4

更改行間距

繼續下一個也是最後一個副本！ 向該行添加一些自定義左邊距。

• 左邊距：18vw

更改行邊框顏色

還要更改行的左邊框顏色。

• 左邊框顏色：#dd87cf

更改模糊內容和圖標

在行中打開 Blurb Module 並更改模塊的圖標和內容。

更改模糊模塊圖標顏色

隨著圖標顏色。

• 圖標顏色：#dd6aca

更改標題文本顏色

以及標題文本顏色。

• 標題文字顏色：#dd6aca

預覽

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

桌面

移動的

最後的想法

在這篇文章中，我們向您展示瞭如何僅使用 Divi 的內置選項來創建懸停選項卡。 這種方法將幫助您以交互方式共享有關功能或產品的內容。 如果您有任何問題或建議，請務必在下方評論區留言！