如何為您的下一個 Divi 項目創建一個充滿活力的 Hover 團隊頁面

團隊頁面經常被低估。 在購買產品或僱用服務之前，許多用戶導航到團隊或關於頁面，以更好地了解公司及其背後的人員。 如果您的團隊頁面給人留下了積極的第一印象，則可能會帶來更高的轉化率。 現在，有很多方法可以使用 Divi 創建漂亮的團隊頁面，但是如果您正在為下一個項目尋找靈感，那麼您會喜歡這篇文章。 我們將重新創建一個充滿活力的懸停團隊頁面，在懸停時觸發成員簡歷。

讓我們開始吧！

預覽

在我們深入學習教程之前，讓我們快速瀏覽一下不同屏幕尺寸的結果。

桌面

移動的

訂閱我們的 YouTube 頻道

1.從一個常規部分+標題的一列行開始

打開一個新頁面並將頁面屬性設置為“空白頁面”。 完成後，進入 Divi Builder 並添加一個包含一列行的部分。

添加文本和分隔線模塊。

2.將內容添加到文本模塊並為其設置樣式

向文本模塊添加一些 H1 內容。

轉到設計選項卡並相應地設置 H1 文本設置的樣式：

• 標題字體： Poppins
• 標題字體粗細：輕
• 標題文本對齊方式：居中
• 標題文字顏色：黑色 #000000
• 標題文字大小：
  • 桌面 = 6vw
  • 平板電腦 = 9vw
  • 電話 = 11vw
• 標題字母間距：-0.4vw

3. 設計分隔線

進入下一個模塊，即分頻器模塊。 將分隔線顏色更改為黑色並修改大小設置。

• 分隔線顏色：黑色#oooooo
• 分隔線重量：12px
• 寬度：14%
• 模塊對齊：居中

4.使用常規部分+三列行創建團隊簡歷

現在我們已經完成了標題部分，我們準備開始構建團隊簡介。 首先添加一個具有三列行的新常規部分。

5. 調整行大小設置

通過修改大小設置，允許行佔據節容器的整個寬度。

• 使用自定義裝訂線寬度：是
• 天溝寬度：1
• 寬度：100%
• 最大寬度：100%

6. 調整行距設置

添加一些自定義的頂部和底部填充。

• 頂部填充：2vw
• 底部填充：2vw

7. 將圖像和模糊模塊添加到第一列

我們將用於創建最終效果的兩個主要模塊是圖像和模糊模塊。 首先，添加圖像模塊，然後添加簡介。

8. 上傳圖片並設置樣式

您的懸停團隊頁面都是關於展示團隊成員的。 打開圖像模塊並添加其中一個的照片。 我們將使用我們的 Divi 圖片之一。 確保您的圖片尺寸為 612 像素 X 612 像素。

結盟

移至設計選項卡並更改圖像對齊方式。

• 圖像對齊：居中

漿紗

也修改大小設置。

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

間距

並添加一些負上邊距。

• 利潤：
  • 桌面 = -3vw
  • 平板電腦和手機 = -13vw

邊界

要將圖像變成圓形，我們將更改邊框設置。

• 圓角：20vw 所有四個角
• 邊框樣式：所有四個邊
• 邊框寬度：12px
• 邊框顏色：白色#ffffff
• 邊框樣式：雙

盒子陰影

我們還通過應用微妙的框陰影為圖像添加了一些深度。

• 框陰影：第一個選項
• 框陰影模糊強度：50px

Z索引

在前面的步驟之一中，我們添加了一些負上邊距。 為了確保圖像保持在列的頂部，即使它超過它，我們將增加可見性設置中的 z 索引。

• Z指數：3

9. 添加內容到模糊和样式

將自定義 CSS 添加到頁面設置

在我們做任何其他事情之前，我們將添加一些自定義 CSS 以擺脫模糊內圖標的默認底部邊距。 將以下 CSS 代碼行添加到頁面設置中：

.blurb-icon .et_pb_main_blurb_image
{
margin-bottom: 0px;
}

給 Blurb 一個 CSS 類

接下來打開 blurb 模塊並添加匹配的 CSS 類。

• CSS 類：模糊圖標

添加內容

我們將使用佔位符文本，但您可以插入團隊成員的實際姓名和描述。

選擇圖標

接下來選擇一個加號圖標。

• 使用圖標：是
• 圖標：圓圈內的加號

風格背景

轉到背景設置，在懸停時添加白色默認背景顏色和漸變背景。

• 背景：白色#ffffff
• 懸停背景：漸變
• 漸變色一：#00ffa1
• 漸變色二：#29c4a9
• 漸變類型：線性
• 梯度方向：154deg
• 起始位置：0
• 最終位置：46%

樣式圖標

接下來應用以下圖標設置：

• 圖標顏色：
  • 默認值：#29c4a9
  • 懸停：透明 rgba(255,255,255,0)
• 使用圖標字體大小：是
• 圖標字體大小：
  • 桌面 = 2vw
  • 平板電腦 = 4vw
  • 電話 = 6vw

結盟

轉到文本設置並更改文本對齊方式。

• 文本對齊：居中

樣式標題文本

然後，打開標題文本設置並在不同的屏幕尺寸上進行一些更改。

• 標題：H4
• 標題字體: Poppins
• 標題字體：粗體
• 標題文字顏色：白色#ffffff
• 標題文字大小：
  • 台式機：1.5vw
  • 平板電腦：2.5vw
  • 電話：3.5vw

樣式正文

對正文設置執行相同的操作。

• 正文顏色：白色#ffffff
• 正文大小：
  • 桌面 = 0.8vw
  • 平板電腦 = 1.9vw
  • 電話 = 2.6vw
• 車身線高：
  • 桌面 = 2vw
  • 平板電腦 + 手機 = 3vw

漿紗

接下來，我們將更改模糊模塊的大小設置。

• 內容寬度：100%
• 寬度：81%
• 模塊對齊：居中

間距

我們還將在不同的屏幕尺寸上應用一些自定義邊距和填充值。

• 最高保證金：
  • 桌面 = -4vw
  • 平板電腦 + 手機 = -9vw
• 底部邊距：
  • 桌面 = 3.5vw
  • 平板電腦 + 手機 = 10vw
• 頂部和底部填充：
  • 桌面 = 7.1vw
  • 平板電腦 = 30vw
  • 電話 = 28vw
• 左右填充
  • 桌面 = 2vw
  • 平板電腦 + 手機 = 8vw

邊界

通過添加一些邊框半徑將模糊模塊變成一個圓圈。

• 圓角：50vw 所有四個角

盒子陰影

並通過添加出現在懸停時出現的框陰影來完成模糊模塊設計。

• 盒子陰影：第五風格
• 框陰影水平位置：0vw
• 框陰影垂直位置：
  • 桌面 + 懸停 = -14vw
  • 平板電腦 = -44vw
  • 電話 = -46vw
• 箱影擴散強度：
  • 桌面 + 懸停 = -6vw
  • 平板電腦 + 手機 = -19vw
• 框陰影顏色：
  • 懸停 = RGBA(0,0,0,0.05)

10. 樣式第一列

現在我們已經將所有需要的模塊添加到第一列，是時候設置列的樣式了。

背景

打開第一列背景設置並應用以下漸變背景：

• 背景樣式：漸變
• 漸變色一：#00ffa1
• 漸變色二：#29c4a9
• 漸變類型：班輪
• 梯度方向：282度

邊界

移至設計選項卡並通過添加一些邊框半徑將列變成圓形。

• 圓角：50vw

溢出

為了確保圖像出現在列上方，我們將更改可見性設置中的水平和垂直溢出。

• 水平和垂直溢出：可見

11.刪除空列並複制第一列兩次

我們已經完成了第一列和其中的所有模塊。 為了節省一些時間，我們將刪除空列並克隆第一列兩次。

刪除第二列和第三列

返回主行設置並單擊第二列和第三列的垃圾桶圖標。

複製一列兩次

刪除第二列和第三列後，第一列會在一秒鐘內看起來很奇怪，但是一旦您克隆該列兩次，所有這些都會發生變化。

12. 更改第二列的內容和顏色

現在是時候為其他兩個團隊成員設計新列的樣式了。

第二欄

打開第二列的設置並更改漸變背景

• 背景漸變色一：#00eeff
• 背景漸變色二：#309ce5

也上傳不同的圖像。

繼續打開模糊模塊並更改漸變背景。

• 懸停背景顏色一：#00eeff
• 懸停背景顏色二：#309ce5

還要更改圖標顏色。

• 默認圖標顏色：#309ce5

第三欄

打開第三列的設置並更改漸變背景。

• 背景漸變色一：#ff91ec
• 背景漸變顏色二：#a500ff

接下來更改模糊漸變背景。

• 懸停背景顏色一：#ff91ec
• 懸停背景顏色二：#a500ff

隨著圖標顏色。

• 默認圖標顏色：#a500ff

預覽

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

桌面

移動的

這是一個包裹！

在這篇文章中，我們向您展示瞭如何使用彩色懸停選項創建充滿活力的懸停團隊頁面。 隨意在您的下一個 Divi 項目中使用此設計。 在團隊頁面或貢獻者目錄中嘗試一下。 如果您有任何想法，請在評論中告訴我們。