如何使用 Divi 為推薦創建獨特的懸停重疊

推薦對許多網站來說都是一筆巨大的交易。 他們展示了專業知識，如果訪客想了解一個公司或個人的可信度，他們通常會尋找他們。 這就是為什麼重要的是要考慮在您的網站上以視覺方式呈現推薦的方式。

使用 Divi，您可以完全按照您想要的方式展示您的推薦。 為了激發您的靈感，我們將向您展示如何使用懸停重疊創建一種令人驚嘆的獨特方式來展示推薦。

讓我們開始吧！

預覽

在我們深入學習本教程之前，讓我們先看看最終結果。

添加新部分

讓我們開始吧！ 添加新頁面或打開現有頁面並添加新的常規部分。

添加新行 1

列結構

繼續使用以下列結構添加新行：

漿紗

在不添加任何模塊的情況下，打開行設置並更改大小設置。

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

間距

添加一些自定義間距值。

• 頂部填充：0px
• 底部填充：0px
• 第 2 列左填充：2vw（桌面）、3vw（平板電腦和手機）
• 第 2 列右填充：11vw（台式機）、3vw（平板電腦和手機）

將圖像模塊添加到第 1 列

上傳圖片

是時候開始添加各種模塊了！ 從第一列中的圖像模塊開始。 上傳選擇的肖像圖像。

圖像對齊

打開圖像設置並更改圖像對齊方式。

• 圖像對齊：左

漿紗

接下來更改大小設置。

• 寬度：78%（桌面），70%（平板電腦和手機）
• 模塊對齊：左

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

添加內容

在圖像模塊的正下方，添加一個文本模塊。 將人的詳細信息放在內容框中。

默認背景

繼續添加背景顏色。

• 背景顏色：rgba(255,255,255,0)

懸停背景

在懸停時添加另一種背景顏色。

• 背景顏色：#0f1bff

默認文本設置

然後，更改文本設置。

• 文字顏色：#ffffff
• 文字大小：0px
• 文本行高：0px

懸停文本設置

對懸停時的文本設置進行一些調整。

• 文字大小：19px
• 文本行高：2em

默認標題文本設置

標題文本設置也需要修改。

• 標題 3 字體粗細：超粗體
• 標題 3 字體樣式：大寫
• 標題 3 文本顏色：#ffffff
• 標題 3 文字大小：0px
• 標題 3 行高：0em

懸停標題文本設置

在懸停時添加不同的值。

• 標題 3 文字大小：35px
• 標題 3 行高：1.1em

間距

接下來，轉到間距設置並添加一些值。

• 上邊距：-100px
• 左邊距：50px
• 右邊距：50px
• 頂部填充：40px
• 底部填充：60px

更改文本方向

返回文本設置並更改文本方向。

• 文字方向：居中

默認框陰影

然後，向文本模塊添加默認框陰影。 這個盒子陰影將成為整體設計的一部分。

• 框陰影水平位置：1000px
• 框陰影垂直位置：-400px
• 框陰影模糊強度：0px
• 框陰影傳播強度：250px
• 陰影顏色：rgba(175,175,175,0.13)

懸停框陰影

要創建特殊的懸停重疊效果，還要添加懸停框陰影。

• 框陰影水平位置：-73px
• 框陰影垂直位置：-49px
• 框陰影模糊強度：0px
• 框陰影傳播強度：10px
• 陰影顏色：rgba(255,182,12,0.53)

過渡

要創建平滑過渡，請在高級選項卡中更改過渡持續時間。

• 轉換持續時間：1000ms

將推薦文本模塊添加到第 2 列

添加內容

在第二列中，我們首先需要的是標題文本模塊。 繼續並添加推薦摘要。

標題文字設置

然後，更改標題文本設置。

• 標題 3 字體：Goudy 小冊子 1911
• 標題 3 文本對齊方式：左
• 標題 3 文字大小：3.5vw（桌面）、40px（平板電腦）、30px（手機）
• 標題 3 行高：1.1em

間距

繼續添加一些自定義間距值。

• 上邊距：7vw（桌面）、100px（平板電腦）、50px（手機）

將描述文本模塊添加到第 2 列

添加內容

添加另一個文本模塊，在標題文本模塊的正下方添加完整的推薦。

文字設置

添加推薦後，請繼續更改文本設置。

• 文本行高：2.2em
• 文本方向：左

間距

添加一些自定義上邊距。

• 上邊距：4vw（桌面），50px（平板電腦和手機）

添加新行

列結構

現在我們已經完成了第一行，讓我們使用以下列結構添加第二行：

漿紗

打開行設置並更改大小設置。

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

間距

接下來添加一些自定義間距值。

• 上邊距：100px
• 頂部填充：0px
• 底部填充：0px
• 第 1 列左填充：11vw（桌面）、3vw（平板電腦和手機）
• 第 1 列右側填充：2vw（台式機）、3vw（平板電腦和手機）

克隆上一行的文本模塊並放置在第 1 列中

返回上一行並克隆第 2 列中的兩個模塊。完成後，將重複項放在新行的第一列中。

更改文本方向

更改兩個模塊的文本方向。

• 文字方向：右

將圖像模塊添加到第 2 列

上傳圖片

接下來，將圖像模塊添加到第二列並上傳新的肖像圖像。

圖像對齊

更改模塊的圖像對齊方式。

• 圖像對齊：右

漿紗

繼續更改大小設置。

• 寬度：78%（桌面），70%（平板電腦和手機）
• 模塊對齊：右

間距

添加一些自定義間距值。

• 上邊距：50px（平板電腦和手機）

將懸停重疊文本模塊添加到第 2 列

添加內容

我們需要完成此設計的最後一個模塊是圖像模塊下方的文本模塊。 在內容框中添加此人的詳細信息。

默認背景

然後，向模塊添加背景圖像。

• 背景顏色：rgba(255,255,255,0)

懸停背景

更改懸停時的背景顏色。

• 背景顏色：#690cff

默認文本設置

接下來更改文本設置。

• 文字顏色：#ffffff
• 文字大小：0px
• 文本行高：0px
• 文字方向：居中

懸停文本設置

對懸停進行一些調整。

• 文字大小：19px
• 文本行高：2em

默認標題文本設置

還要更改標題文本設置。

• 標題 3 字體粗細：超粗體
• 標題 3 文本顏色：#ffffff
• 標題 3 文字大小：0px
• 標題 3 行高：0em

懸停標題文本設置

在懸停時進行一些小調整。

• 標題 3 文字大小：35px
• 標題 3 行高：1.1em

間距

繼續轉到間距設置並添加一些自定義值。

• 上邊距：-80px
• 左邊距：50px
• 右邊距：50px
• 頂部填充：40px
• 底部填充：60px

默認框陰影

向文本模塊添加默認框陰影。

• 框陰影水平位置：-1000px
• 框陰影垂直位置：-420px
• 框陰影模糊強度：0px
• 框陰影傳播強度：250px
• 陰影顏色：rgba(175,175,175,0.13)

懸停框陰影

並在懸停時更改框陰影。

• 框陰影水平位置：-73px
• 框陰影垂直位置：-49px
• 框陰影模糊強度：0px
• 框陰影傳播強度：10px
• 陰影顏色：rgba(12,255,238,0.53)

過渡

最後但並非最不重要的一點是，通過更改過渡持續時間來創建平滑過渡。

• 轉換持續時間：1000ms

預覽

現在我們已經完成了所有步驟，讓我們最後看看最終結果！

最後的想法

我們希望這篇文章能激發您使用懸停重疊創建令人驚嘆的推薦部分！ 它們確實可以幫助您為網站添加另一個維度，而無需花費大量時間編碼或解決問題。 如果您有任何問題或建議，請務必在下方評論區留言！