使用 Divi 的人模塊獲得創意的 5 種方法

過去幾個月發生的所有新 Divi 功能更新無可否認地擴展了您在設計網站時的可能性範圍。 在本教程中，我們創建了 5 種不同的方式來使用 Divi Person Module 獲得創意，而無需使用任何額外的 CSS 代碼。 這篇文章的主要目標是在開始下一個 Divi 項目之前激勵你。 人員模塊通常用於分享有關團隊成員的更多信息或分享推薦信。 有了這 5 個不同的示例，您就可以為您的頁面提升設計感了。

讓我們開始吧！

預覽

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

桌面

移動的

訂閱我們的 YouTube 頻道

重新創建示例 #1

添加新部分

讓我們開始創建第一個示例！ 打開一個新的或現有的頁面並添加一個常規部分。

添加新行

列結構

在不修改部分設置的情況下，使用以下列結構添加新行：

漿紗

打開行設置並對大小設置進行一些更改。

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

間距

接下來，打開間距設置並添加一些自定義填充值。

• 頂部填充：100 像素（桌面）、80 像素（平板電腦和手機）
• 底部填充：100px（桌面），80px（平板電腦和手機）
• 左內邊距：100 像素（桌面）、30 像素（平板電腦）、25 像素（手機）
• 右內邊距：100 像素（桌面）、30 像素（平板電腦）、25 像素（手機）

將圖像模塊添加到第 1 列

上傳圖片

是時候開始添加模塊了！ 將圖像模塊添加到第一列並上傳所選的方形圖像。

盒子陰影

繼續轉到設計選項卡並應用微妙的框陰影。

過濾器

您還可以使用過濾器設置來為圖像添加效果。

• 飽和度：40%
• 對比度：130%

將人員模塊 #1 添加到第 2 列

添加內容

我們需要的下一個模塊是 Person 模塊。 繼續向第二列添加一個並填寫姓名和職位字段。

漸變背景

向該模塊添加漸變背景。

• 顏色 1：RGBA(11,15,229,0.41)
• 顏色 2：RGBA(45,237,255,0.87)
• 梯度方向：150度

標題文字設置

然後，更改設計選項卡中的標題文本設置。

• 標題字體：Baloo
• 標題文字顏色：#ffffff
• 標題文字大小：20px

正文設置

還要修改正文設置。

• 正文字體重量：輕
• 正文顏色：#ffffff

間距

並在間距設置中添加一些自定義邊距和填充值。

• 左邊距：-4vw（桌面和平板電腦），0vw（手機）
• 右邊距：8vw（桌面和平板電腦），0vw（手機）
• 頂部填充：25px
• 底部填充：25px
• 左填充：20px

邊界

我們還為模塊添加了一個微妙的左邊框。

• 左邊框寬度：3px
• 左邊框顏色：#ffffff

盒子陰影

連同可幫助您在頁面上創建深度的框陰影。

• 框陰影模糊強度：80px

將人員模塊 #2 添加到第 2 列

添加內容

在上一個模塊的正下方添加另一個人員模塊。 我們使用這個模塊來顯示社交媒體資料和描述。

圖標設置

轉到設計選項卡並在圖標設置中更改圖標顏色。

• 圖標顏色：#50e8fe

間距

最後但並非最不重要的是，打開間距設置並添加一些自定義填充值。

• 頂部填充：30px
• 左填充：30px（桌面和平板電腦），0px（手機）

重新創建示例 #2

添加新部分

繼續下一個例子！ 向您的頁面添加一個新部分。

添加新行

列結構

使用以下列結構向此部分添加一個新行。

第 2 列背景顏色

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

• 第 2 列背景顏色：#f4f4f4

漿紗

然後，轉到設計選項卡並對尺寸設置進行一些更改。

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

間距

在間距設置中添加一些自定義填充值。

• 頂部填充：100 像素（桌面）、80 像素（平板電腦和手機）
• 底部填充：100px（桌面），80px（平板電腦和手機）
• 左內邊距：100 像素（桌面）、30 像素（平板電腦）、25 像素（手機）
• 右內邊距：100 像素（桌面）、30 像素（平板電腦）、25 像素（手機）

將圖像模塊添加到第 1 列

上傳圖片

是時候開始添加模塊了！ 我們需要的第一個模塊是第 1 列中的圖像模塊。上傳選擇的圖像。

盒子陰影

然後，為圖像添加框陰影。

• 框陰影模糊強度：160px

過濾器

您還可以使用過濾器設置。

• 飽和度：40%
• 對比度：130%

將人員模塊 #1 添加到第 2 列

添加內容

在第二列中，我們需要的第一個模塊是 Person 模塊。 填寫姓名和職位字段。

背景顏色

轉到背景設置並添加透明背景色。

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

文字設置

然後，在文本設置中更改文本方向。

• 文字方向：居中

標題文字設置

還要更改標題文本設置。

• 標題字體：Abril Fatface
• 標題文字顏色：#000000
• 標題文字大小：40px

正文設置

隨著正文文本設置。

• 正文字體重量：輕
• 正文顏色：#000000
• 正文文字大小：15px

間距

我們通過在間距設置中使用一些負左邊距來創建重疊。

• 左邊距：-21.64vw（桌面），-46.1vw（平板），0vw（手機）
• 頂部填充：30px
• 底部填充：30px

盒子陰影

我們也應用了一個微妙的盒子陰影。

• 框陰影模糊強度：80px

將人員模塊 #2 添加到第 2 列

添加內容

我們在第 2 列中需要的第二個模塊是另一個 Person 模塊。 在這裡，我們添加了社交媒體鏈接和描述。

圖標設置

繼續轉到設計選項卡並在圖標設置中更改圖標顏色。

• 圖標顏色：#000000

間距

添加一些自定義邊距和填充值。

• 最高利潤率：3vw
• 頂部填充：30px
• 底部填充：30px
• 左填充：30px
• 右填充：30px

重新創建示例 #3

添加新部分

繼續第三個例子！ 向您的頁面添加一個新部分。

添加新行

列結構

然後，使用以下列結構向該部分添加一個新行：

漿紗

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

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

間距

添加一些自定義填充值。

• 頂部填充：100 像素（桌面）、80 像素（平板電腦和手機）
• 底部填充：100px（桌面），80px（平板電腦和手機）
• 左內邊距：100 像素（桌面）、30 像素（平板電腦）、25 像素（手機）
• 右內邊距：100 像素（桌面）、30 像素（平板電腦）、25 像素（手機）

將人員模塊 #1 添加到第 1 列

添加內容

是時候開始添加模塊了！ 將第一個人員模塊添加到第 1 列並填寫姓名和職位字段。

背景顏色

然後，為模塊添加背景顏色。

• 背景顏色：#ffffff

標題文字設置

還要修改標題文本設置。

• 標題字體粗細：超粗
• 標題文字顏色：#000000
• 標題文字大小：40px
• 標題字母間距：-4px

正文設置

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

• 正文字體重量：輕
• 正文顏色：#000000
• 正文文字大小：15px

間距

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

• 上邊距：40px（桌面），0px（平板和手機）
• 頂部填充：30px
• 底部填充：30px
• 左填充：30px
• 右填充：30px

邊界

在邊框設置的左上角也添加“20px”。

盒子陰影

並給模塊一個彩色的盒子陰影。

• 框陰影模糊強度：140px
• 陰影顏色：rgba(31,15,255,0.66)

將人員模塊 #2 添加到第 1 列

添加內容

轉到第 1 列中的第二人稱模塊！ 使用此模塊顯示社交媒體鏈接和說明。

背景顏色

然後，轉到背景設置並添加白色背景色。

• 背景顏色：#ffffff

圖標設置

還要更改圖標顏色。

• 圖標顏色：#000000

間距

繼續在間距設置中添加一些自定義間距值。

邊界

並在左下角添加“20px”。

盒子陰影

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

• 框陰影垂直位置：50px
• 框陰影模糊強度：140px
• 框陰影傳播強度：-10px
• 陰影顏色：rgba(2,219,219,0.26)

將圖像模塊添加到第 2 列

上傳圖片

我們需要的下一個模塊是圖像模塊。 繼續將一個添加到第二列並上傳選擇的圖像。

邊界

在邊框設置中給這個模塊“20px”的圓角。

盒子陰影

並添加一個微妙的框陰影。

過濾器

再次，隨意使用過濾器設置來更改圖像的外觀。

重新創建示例 #4

添加新部分

繼續第四個例子！ 向您的頁面添加一個新部分。

添加新行

列結構

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

漿紗

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

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

間距

也更改間距設置。

• 頂部填充：100 像素（桌面）、80 像素（平板電腦和手機）
• 底部填充：100px（桌面），80px（平板電腦和手機）
• 左內邊距：100 像素（桌面）、30 像素（平板電腦）、25 像素（手機）
• 右內邊距：100 像素（桌面）、30 像素（平板電腦）、25 像素（手機）

將人員模塊添加到第 1 列

添加內容

是時候開始添加模塊了！ 將人員模塊添加到第 1 列並填寫所有字段。

圖標設置

然後，轉到圖標設置並更改圖標顏色。

• 圖標顏色：#000000

文字設置

也可以在文本設置中更改文本方向。

• 文字方向：居中

標題文字設置

然後，打開標題文本設置並進行一些更改。

• 標題字體粗細：超粗
• 標題文字顏色：#000000
• 標題文字大小：40px
• 標題字母間距：-4px

正文設置

還要修改正文設置。

• 正文字體重量：輕
• 正文顏色：#000000
• 正文文字大小：15px
• 車身線高：2em

間距

並使用間距設置中的自定義填充值創建一個形狀。

• 頂部填充：280 像素（桌面）、200 像素（平板電腦）、50 像素（手機）
• 底部填充：280 像素（桌面）、200 像素（平板電腦）、50 像素（手機）
• 左內邊距：200 像素（桌面）、150 像素（平板電腦）、20 像素（手機）
• 右內邊距：200 像素（桌面）、150 像素（平板電腦）、20 像素（手機）

邊界

通過向邊框設置中的每個角添加“700px”來創建一個圓圈，並添加一個微妙的邊框。

• 邊框寬度：1px
• 邊框顏色：#333333

將圖像模塊添加到第 2 列

上傳圖片

繼續向第二列添加圖像模塊並上傳所選的方形圖像。

間距

修改此模塊的間距設置。

• 上邊距：7vw（桌面）、-15vw（平板電腦）、-5vw（手機）
• 左邊距：-5vw（台式機），0vw（平板電腦和手機）

邊界

通過向模塊的每個角添加“1000px”，從該圖像中創建一個圓形。

盒子陰影

添加一個微妙的框陰影。

• 框陰影模糊強度：160px
• 框陰影傳播強度：-10px

過濾器

並通過調整圖像的過濾器設置來完成設計。

• 飽和度：0%
• 對比度：130%

重新創建示例 #5

添加新部分

繼續下一個也是最後一個例子！ 向您的頁面添加一個新部分。

添加新行

列結構

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

第 1 列漸變背景

打開行設置並添加第 1 列漸變背景。

• 顏色 1：#dddddd
• 顏色 2：#ffffff
• 第 1 列梯度方向：90 度
• 第 1 列起始位置：40%
• 第 1 列結束位置：40%

漿紗

然後，轉到大小設置並進行一些更改。

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

間距

也向該行添加一些自定義填充值。

• 頂部填充：100 像素（桌面）、80 像素（平板電腦和手機）
• 底部填充：100px（桌面），80px（平板電腦和手機）
• 左內邊距：100 像素（桌面）、30 像素（平板電腦）、25 像素（手機）
• 右內邊距：100 像素（桌面）、30 像素（平板電腦）、25 像素（手機）

將人員模塊添加到第 1 列

添加內容

是時候開始添加模塊了！ 將人員模塊添加到第 1 列並填寫所有字段。

圖標設置

然後，在圖標設置中更改圖標顏色。

• 圖標顏色：#000000

文字設置

也可以在文本設置中更改文本方向。

• 文字方向：右

標題文字設置

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

• 標題字體：陳拉
• 標題文字顏色：#000000
• 標題文字大小：50px
• 標題字母間距：-1px

正文設置

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

• 正文字體重量：輕
• 正文顏色：#000000
• 正文文字大小：15px
• 車身線高：2em

間距

繼續向模塊的間距設置添加一些自定義填充值。

• 頂部填充：200 像素（桌面）、100 像素（平板電腦和手機）
• 底部填充：200 像素（桌面）、100 像素（平板電腦和手機）
• 左內邊距：500 像素（桌面）、250 像素（平板電腦）、50 像素（手機）
• 右內邊距：200 像素（桌面）、100 像素（平板電腦）、50 像素（手機）

邊界

最後，為模塊添加邊框。

將圖像模塊添加到第 2 列

上傳圖片

我們需要的下一個模塊是第 2 列中的圖像模塊。繼續上傳所選的方形圖像。

間距

然後，對該模塊的間距設置進行一些更改。

• 最高邊距：7vw（桌面），-2vw（平板電腦和手機）
• 左邊距：-10vw（台式機），0vw（平板電腦和手機）

盒子陰影

也給圖像模塊一個框陰影。

• 框陰影模糊強度：160px
• 框陰影傳播強度：-10px

過濾器

最重要的是，玩弄過濾器設置。

• 飽和度：50%
• 對比度：130%

預覽

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

桌面

移動的

最後的想法

在這篇文章中，我們向您展示了 5 種不同的方式來利用 Divi 人模塊發揮創意。 您可以將這些示例用於您正在構建的任何網站，並通過調整每個設計元素的設置來創建您自己的替代版本。 如果您有任何問題或建議，請務必在下方評論區留言！