如何使用 Divi 為您的個人網站創建一個漂亮的英雄部分

創建個人網站既有趣又具有挑戰性。 您希望您的網站看起來足夠吸引人和個性化，以講述您的故事。 同時，您希望擁有一個美麗而真實的網站，以表明您知道自己在做什麼。

為了幫助您完成創建此類個人網站的創作過程，我們創建了一個精美的英雄部分，絕對會讓您的網站脫穎而出。 在這篇文章中，我們將逐步向您展示如何僅使用 Divi 的每個步驟的內置設置來創建該結果。 在深入本教程之前，讓我們先看看結果。

桌面上的結果

桌面上的結果如下所示：

手機上的結果

而在手機上訪問網站的訪問者將看到以下結果：

如何使用 Divi 為您的個人網站創建一個漂亮的英雄部分

訂閱我們的 YouTube 頻道

創建部分

首先在您的 WordPress 網站上創建一個新頁面，啟用 Divi Builder，切換到 Visual Builder 並向其添加一個新部分。

漸變背景

在此部分中，您唯一需要更改的是背景。 此背景將適用於我們將在本文的後續步驟中添加的所有行。 打開背景子類別並向其添加以下漸變背景：

• 第一種顏色：#c2c6f3
• 第二種顏色：#cea5b9
• 漸變類型：徑向
• 徑向：中心
• 起始位置：45%
• 結束位置：45%

添加第一行

然後，繼續將第一行添加到該部分。 此行將僅包含您可以在佈局頂部看到的文本模塊。

列結構

接下來，選擇具有一列的列結構。

漿紗

移至行設置的“設計”選項卡，並為“大小調整”子類別使用以下設置：

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

文本模塊

如前所述，這一行只需要一個文本模塊。

文字設置

輸入要在“內容”選項卡中顯示的文本後，轉到“設計”選項卡，並將以下設置應用於“文本”子類別：

• 文字字體：Arizonia
• 文字字體粗細：常規
• 文字大小：150（桌面）、80（平板）、70（手機）
• 文字顏色：rgba(255,255,255,0.39)
• 文字方向：居中

添加第二行

完成第一行後，繼續向同一部分添加第二行。

列結構

與前一行一樣，這一行也只有一列。

背景圖片

打開行設置並添加要用作第一列背景圖像的個人圖像。 確保圖像位置也設置為“中心”。

漿紗

然後，打開 Sizing 子類別並進行以下更改：

• 使用自定義寬度：是
• 自定義寬度：557px

間距

接下來，使用“0px”作為行的頂部、底部、右側和左側填充。

盒子陰影

最後，應用以下框陰影：

• 框陰影水平位置：0px
• 框陰影垂直位置：2px
• 框陰影模糊強度：53px
• 框陰影傳播強度：10px
• 陰影顏色：rgba(0,0,0,0.3)
• 陰影位置：外陰影

文本模塊

完成行設置後，繼續向列添加文本模塊。

背景顏色

首先，這個文本模塊需要一個帶有“rgba(0,0,0,0.66)”顏色的背景顏色。

文字設置

然後，轉到“設計”選項卡並對“文本”子類別進行以下更改：

• 文字字體：安迪卡
• 文字字體粗細：粗體
• 文本字體樣式：大寫
• 文字大小：78px（桌面）、70px（平板電腦）、50px（手機）
• 文字顏色：#c2c6f3
• 文本行高：1em
• 文字方向：居中

邊界

接下來，打開 Border 子類別並使用以下邊框：

• 使用邊框：是
• 邊框顏色：#c2c6f3
• 邊框寬度：8px
• 邊框樣式：純色

間距

繼續，添加以下邊距和填充：

• 上、右、下、左邊距：50px
• 頂部填充：200px
• 底部填充：200px

盒子陰影

最後，對文本模塊使用以下框陰影：

• 框陰影水平位置：0px
• 框陰影垂直位置：0px
• 框陰影模糊強度：0px
• 框陰影傳播強度：50px
• 陰影顏色：rgba(206,165,185,0.41)
• 框陰影位置：外陰影

添加第三行

如前所述，我們只使用本教程的一個部分。 這背後的原因是我們希望該部分的漸變背景分佈在所有正在共享的不同內容上。 繼續添加一個新行。

列結構

為該行選擇兩列。

漿紗

然後，啟用“使用自定義寬度”選項並應用“663px”的寬度。

間距

最後，添加“50px”的頂部和底部邊距。

第一個文本模塊

將第一個文本模塊添加到行的第一列。

文字設置

然後，轉到“設計”選項卡，使用“Andika”作為文本字體，使用“Regular”作為文本字體粗細。

克隆文本模塊並將其放在第二列

第二列中的文本模塊具有完全相同的設置，所以繼續，克隆文本模塊並將其放置在第二列中。

添加第四行

在設計完成之前，還有一行要添加到該部分。

列結構

這個新行也有兩列。

漿紗

打開 Row Settings 並將以下設置應用於 Sizing 子類別：

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

間距

然後，添加 20px 的頂部填充。

第一個圖像模塊

繼續將第一個圖像模塊添加到最後一行的第一列。

盒子陰影

並向其添加以下 Box Shadow：

• 框陰影水平位置：-6px
• 框陰影垂直位置：2px
• 框陰影模糊強度：53px
• 框陰影傳播強度：10px
• 陰影顏色：rgba(0,0,0,0.3)
• 框陰影位置：外陰影

克隆圖像模塊並放置在第二列

最後，克隆這個圖像模塊並將它放在第二列中以完成這一行。

結果

完成我們添加到本文的所有步驟後，您應該能夠獲得以下結果：

在桌面上

在移動

最後的想法

Divi 為您帶來無限可能。 您可以使用可視化生成器實時顯示更改，從而使您的網站看起來完全符合您的要求。 特別是對於這篇文章，我們向您展示瞭如何為個人網站創建一個漂亮的英雄部分。 本教程僅使用 Divi 的內置選項。 如果您有任何問題或建議； 確保您在下面的評論部分發表評論！

請務必訂閱我們的電子郵件通訊和 YouTube 頻道，這樣您就不會錯過重大公告、有用提示或 Divi 免費贈品！