如何在 Divi 中為團隊成員 Bios 添加懸停效果

眾所周知，關於頁面非常適合在您的網站上創建點擊率。 這也是一種頁面，可以強調網站背後公司的人性化部分。 了解這一點使我們意識到關注頁面的結構方式、共享的信息類型以及創建交互的方式非常重要。 您可以做的一件事來提升關於頁面的體驗，就是提供一個團隊成員部分，讓您的員工成為人們關注的焦點。 最重要的是，您可以僅使用 Divi 的內置選項為團隊成員照片添加生物懸停效果。 這將允許您節省您正在處理的頁面上的空間，並在您和訪問者之間創建懸停交互。

在本教程中，我們將逐步向您展示如何到達那裡。 一旦掌握了方法，您就可以根據自己的需要自定義設計風格。

讓我們開始吧！

預覽

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

桌面

移動的

讓我們開始重建

訂閱我們的 YouTube 頻道

添加新部分

間距

創建一個新頁面或打開一個現有頁面並使用以下自定義填充值添加一個新部分：

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

添加第 1 行

列結構

完成將自定義填充添加到部分後，您可以關閉部分設置並僅使用一列添加新行。

添加文本模塊

添加 H2 內容

將標題文本模塊添加到帶有一些 H2 副本的列中。

H2 文本設置

然後，轉到 H2 文本設置並對副本的外觀進行一些更改。

• 標題 2 字體：Cinzel
• 標題 2 字體樣式：小型大寫字母
• 標題 2 文本對齊：居中
• 標題 2 文字大小：70px

添加分頻器模塊

能見度

繼續在標題文本模塊正下方添加一個新的分隔線模塊。

• 顯示分隔線：是

分隔線顏色

轉到設計選項卡，打開顏色設置並相應地更改分隔線的顏色：

• 分隔線顏色：#333333

漿紗

接下來，我們將減小分隔線的大小並將其居中。

• 寬度：26%
• 模塊對齊：居中

添加第 2 行

列結構

在您添加的前一行的正下方，繼續使用三個相同大小的列添加一個新行。

漿紗

在不添加任何模塊的情況下，打開行設置並對大小設置進行一些調整。

• 使用自定義寬度：是
• 單位：PX
• 自定義寬度：2000px
• 使用自定義裝訂線寬度：是
• 天溝寬度：1
• 均衡柱高：是

間距

然後，轉到間距設置並添加自定義邊距和填充值。

• 上邊距：50px
• 下邊距：50px
• 頂部填充：10px
• 底部填充：10px
• 左填充：5px
• 右填充：5px
• 第 1、2 和 3 列左填充：5px
• 第 1、2 和 3 列右填充：5px

盒子陰影

我們還通過使用以下設置向其添加框陰影來為我們的行添加一些深度：

• 框陰影模糊強度：80px
• 框陰影擴散強度：-14px
• 陰影顏色：rgba(0,0,0,0.3)

將圖像模塊添加到第 1 列

上傳圖片到圖片模塊

是時候開始添加模塊了！ 為了實現生物懸停效果，我們總共需要兩個模塊； 一個圖像模塊和一個模糊模塊。 圖像模塊將保存您要展示的團隊成員的圖像。 另一方面，Blurb 模塊將用於將圖標添加到左下角，並在懸停時添加生物。 使用正方形大小的圖像將圖像模塊添加到第一列。

過濾器

我們正在創建的設計完全是灰度的。 要將此灰度添加到我們的圖像中，請轉到過濾器設置並刪除所有飽和度。

• 飽和度：0%

將 Blurb 模塊添加到第 1 列

添加內容

繼續在第 1 列中的圖像模塊正下方添加一個新的 Blurb 模塊。將團隊成員的姓名添加到標題字段，並在內容框中輸入有關團隊成員的更多信息。

選擇圖標

接下來我們要做的是選擇一個首選圖標，向訪問者展示它不僅僅是一張圖片。

默認背景顏色

然後，我們將選擇一個完整的透明背景色。

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

懸停背景顏色

我們將在懸停時更改該顏色。

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

默認圖標設置

我們想要一個引人注目的圖標，以幫助訪問者了解他們可以將其懸停。 更改圖標設置以實現這樣的圖標。

• 圖標顏色：#ffffff
• 圓形圖標：是
• 圓圈顏色：#000000
• 圖標位置：左
• 使用圖標字體大小：是
• 圖標字體大小：50px

懸停圖標設置

但是，我們不希望圖標出現在懸停時。 這就是為什麼我們將使用完全透明的顏色。

• 圖標顏色：rgba(255,255,255,0)
• 圓圈顏色：rgba(255,255,255,0)

默認標題文本設置

接下來，轉到標題文本設置並進行一些更改。

• 標題字體：Cinzel
• 標題字體粗細：粗體
• 標題字體樣式：小型大寫字母
• 標題文字顏色：#000000
• 標題文字大小：0px

懸停標題文本設置

在懸停時修改文本大小。

• 標題文字大小：30px

默認正文設置

還要修改正文設置。

• 正文字體：Open Sans
• 正文顏色：#000000
• 正文文字大小：0px
• 車身線高：1.8em

懸停正文設置

再次，在懸停時更改正文文本大小。

• 正文文字大小：14px

默認間距

最後但並非最不重要的一點是，我們需要使用負上邊距在 Blurb 模塊和圖像模塊之間創建重疊。

• 最高邊距：-3.7vw（台式機），-9vw（平板電腦和手機）
• 下邊距：1.5vw（平板電腦），2vw（手機）

懸停間距

懸停時更改自定義邊距和填充值。

• 上邊距：-11.38vw
• 頂部填充：20px
• 底部填充：20px
• 右填充：50px

克隆兩個模塊兩次並在剩餘列中放置重複項

我們已經完成了我們的第一個生物懸停效果的創建。 為了節省時間，我們可以簡單地將第 1 列中的兩個模塊克隆兩次，並將重複項放在剩餘的兩列中。

更改 Blurb 模塊的圖像和內容

記得更改圖像模塊中的圖像和模糊模塊中的副本以完成團隊成員部分！

預覽

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

桌面

移動的

最後的想法

在這篇文章中，我們向您展示瞭如何僅使用 Divi 的內置選項在懸停團隊成員照片時創建生物懸停效果。 我們已經提到創建好的頁面是多麼重要，因為它們是訪問量最大的頁面網站之一。 為團隊成員照片使用生物懸停效果不僅可以讓您的關於頁面更上一層樓，還可以與訪問者建立互動。 如果您有任何問題或建議，請務必在下方評論區留言！