如何使用 Divi 創建令人驚嘆的英雄部分

英雄部分； 它們用於各種目的。 它們是訪問者訪問您網站時首先看到的東西，它們會立即顯示您網站的風格，並影響訪問者在您網站上的感受和行為方式。 我們已經習慣了那裡的各種英雄部分，但其中大多數都包括英雄形象、標語和號召性用語。 不過，還有其他可能性。 在這篇文章中，我們將向您展示關於英雄部分的另一種方法，我們將跟進一個您可以使用 Divi 重新創建的示例。

例子

我們將向您展示如何使用 Divi 重新創建的示例在桌面上如下所示：

在手機上是這樣的：

如何讓你的英雄部分脫穎而出

在我們向您展示如何重新創建示例之前，讓我們先看一下區分此英雄部分與其他部分的一些因素。

1. 大型、描述性和集中的標誌

我們在我們的示例中使用的第一件事是幫助使我們的英雄部分脫穎而出，是一個居中的標題格式而不是默認格式。 除此之外，我們還使用了一個透明菜單，這將有助於將菜單項與英雄部分設計重疊。 使用透明背景時，徽標、菜單和網站之間的鏈接會更加​​清晰，因為英雄部分內的分隔較少。

2. 集中書面內容

您可以做的另一件事使您的英雄部分脫穎而出，那就是集中您擁有的書面內容。 這樣，您就會將訪問者的注意力吸引到屏幕上的某個位置，從而增加他們閱讀的機會。 另一方面，如果您在整個英雄部分中劃分書面內容，則更改更有可能錯過您試圖帶來的部分信息。

3.突出獨特的銷售主張

通常，英雄部分包含共享產品或公司標語的普通文本模塊。 但是，您也可以在英雄部分中使用 Blurb 模塊。 如果您想立即分享您的產品或服務的獨特銷售主張，這些 Blurb 模塊是完美的。 最重要的是，您還可以選擇是否要立即在其中包含號召性用語。 在我們的示例中，這些對操作的調用內置於模糊模塊本身中。

4. 清潔產品圖片

最重要的是，為了平衡您提供的書面內容，我們建議使用乾淨的產品圖片作為您的英雄部分背景圖片。 您希望您的英雄形象盡可能具有定性和不言自明，而無需接管整個英雄部分。

如何使用 Divi 創建令人驚嘆的英雄部分

訂閱我們的 YouTube 頻道

使用 Divi 重新創建示例

現在我們已經討論了理論方面，是時候開始重新創建它了。

標題格式

您需要做的第一件事是通過轉到WordPress 儀表板 > 自定義 > 標題和導航 > 標題格式 > 並選擇“居中”作為標題樣式，選擇“居中”作為標題樣式。

主菜單欄設置

然後，返回Header & Navigation > Primary Menu Bard > 並進行以下調整：

• 菜單高度：211px
• 標誌最大高度：100px
• 文字大小：16
• 字母間距：2
• 字體: Lato Light
• 字體樣式：大寫
• 文字顏色：#FFFFFF
• 活動鏈接顏色：#FFFFFF
• 背景顏色：rgba(255,255,255,0)
• 下拉菜單背景顏色：rgba(255,255,255,0)

添加新部分

完成後，添加一個新頁面，啟用 Divi Builder，啟用 Visual Builder 並添加一個新的標準部分。

漸變背景

本節使用以下漸變背景：

• 第一種顏色：#e2e2e2
• 第二種顏色：rgba(255,255,255,0)
• 漸變類型：線性
• 梯度方向：180度
• 起始位置：40%
• 結束位置：40%

背景圖片

接下來，上傳背景圖像並選擇“乘法”作為背景圖像混合。

添加兩列行

背景顏色

將兩列行添加到您剛剛創建的部分並使用“#b7afa1”作為背景顏色。

第 1 列漸變背景

向下滾動並為第一列使用以下漸變背景：

• 第一種顏色：rgba(255,255,255,0.43)
• 第二種顏色：rgba(255,255,255,0)
• 第 1 列漸變類型：徑向
• 第 1 列漸變方向：左上角
• 第 1 列起始位置：49%
• 第 1 列結束位置：49%

第 2 列漸變背景

並為第二列使用以下漸變背景：

• 第一種顏色：rgba(255,255,255,0.43)
• 第二種顏色：rgba(255,255,255,0)
• 第 2 列漸變類型：徑向
• 第 2 列徑向：右下角
• 第 2 列起始位置：49%
• 第 2 列結束位置：49%

漿紗

轉到“設計”選項卡，啟用“使用自定義裝訂線寬度”選項並使用“1”作為裝訂線寬度。

間距

打開間距子類別並使用以下填充和邊距：

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

第一個模糊模塊

啟用圖標

將 Blurb 模塊添加到行的第一列，啟用“使用圖標”選項並選擇一個圖標。

圖標設置

然後，轉到設計設置並對圖像和圖標子類別進行以下更改：

• 圖標顏色：#FFFFFF
• 圖像/圖標放置：左
• 使用圖標字體大小：是
• 圖標字體大小：40px

標題文本設置

然後，將以下設置應用於標題文本子類別：

• 標題字體：Roboto Light
• 字體樣式：粗體
• 標題字體大小：25px
• 標題文本顏色：#FFFFFF
• 標題行高度：1.5em

正文設置

Body Text 子類別需要進行以下更改：

• 正文字體：Lato Light
• 正文字體大小：13px
• 正文顏色：#FFFFFF

漿紗

接下來，使用“300px”作為內容寬度。

間距

最後，為 Blurb 模塊使用以下邊距和填充：

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

克隆 Blurb 模塊並放置在第二列中

繼續克隆之前製作的 Blurb 模塊並將其放置在另一列中。

更改背景顏色

在此克隆的 Blurb 模塊中，您必須更改的第一件事是背景顏色。 將其更改為'rgba(89,60,31,0.5)'。

更改圖標

您需要更改的下一件也是最後一件事情是內容選項卡中的圖標。

額外：將 Divi 的新框陰影選項添加到 Row

通過最近的更新，您現在還可以向行、模塊和部分添加框陰影。 在本例中，我們將向該行添加一些框陰影。 這將有助於在我們的英雄部分創建一些深度並強調書面內容。

• 框陰影水平位置：-3px
• 框陰影垂直位置：31px
• 框陰影模糊強度：79px
• 框陰影擴散強度：-4px
• 陰影顏色：#424242
• 框陰影位置：外陰影

結果

讓我們快速獲取另一個結果，看看您應該能夠在遵循這篇文章後在桌面上實現的結果：

在手機上：

最後的想法

在這篇文章中，我們向您展示了英雄部分的不同方法。 我們為您提供了一些提示，並通過向您展示如何重新創建我們預先使用 Divi 製作的示例來詳細說明這些提示。 如果您有任何問題或建議； 確保您在下面的評論部分發表評論！

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

特色圖片由 Ellagrin/shutterstock.com 提供