如何創造性地使用 Divi 的行邊框來創建令人驚嘆的英雄部分設計

您頁面的英雄部分通常為頁面的其餘部分設置標準。 它還對訪客的第一印象起著重要作用。 使用 Divi，您可以僅使用內置選項創建令人驚嘆的英雄部分。 現在，如果您正在尋找一種方法來讓您的下一個英雄部分脫穎而出，那麼您會喜歡這篇文章的。 我們將向您展示如何在玩弄 Divi 的行邊框的同時創建一個有效且漂亮的英雄部分設計。 您也可以免費下載設計 JSON 文件！

讓我們開始吧。

預覽

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

免費下載英雄部分佈局

要了解免費的英雄部分佈局，您首先需要使用下面的按鈕下載它。 要訪問下載，您需要使用下面的表格訂閱我們的 Divi Daily 電子郵件列表。 作為新訂戶，您每週一將收到更多的 Divi 善良和免費的 Divi 佈局包！ 如果您已經在列表中，只需在下面輸入您的電子郵件地址，然後單擊下載。 您不會被“重新訂閱”或收到額外的電子郵件。

下載文件

免費下載

加入 Divi 時事通訊，我們將通過電子郵件向您發送一份最終的 Divi 登陸頁面佈局包，以及大量其他令人驚嘆的免費 Divi 資源、提示和技巧。 跟隨，您將很快成為 Divi 大師。 如果您已經訂閱，只需在下面輸入您的電子郵件地址，然後單擊下載即可訪問佈局包。

下載

您已成功訂閱。 請檢查您的電子郵件地址以確認您的訂閱並獲得免費的每週 Divi 佈局包！

讓我們開始重建吧！

訂閱我們的 YouTube 頻道

添加新部分

漸變背景

繼續創建一個新頁面或打開一個現有頁面。 添加新的常規部分，打開部分設置並添加以下漸變背景：

• 顏色 1：#7e2dff
• 顏色 2：#ffffff
• 起始位置：63%
• 結束位置：63%

間距

轉到設計選項卡並在不同的屏幕尺寸上添加一些自定義的頂部和底部填充。

• 頂部填充：6vw（桌面）、13vw（平板電腦）、32vw（手機）
• 底部填充：6vw（桌面）、10vw（平板電腦）、20vw（手機）

添加第 1 行

列結構

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

漿紗

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

• 最大寬度：100%

間距

也刪除行的默認頂部和底部填充。

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

將圖像模塊添加到列

上傳圖片

是時候開始添加模塊了！ 我們需要的第一個模塊是圖像模塊。 上傳您可以在本教程開頭下載的壓縮文件夾中找到的圖像。 如果您更喜歡使用其他圖片，請確保您使用的是 1160 像素的寬度和 1385 像素的高度。

漿紗

轉到圖像模塊的設計選項卡並啟用“強制全寬”選項。

• 強制全角：是

間距

接下來修改間距設置。

• 在圖像下方顯示空間：否
• 左填充：17vw

邊界

並在圖像模塊的右上角添加“50vw”。

過濾器

我們還更改了圖像的顏色以匹配我們的調色板。 打開過濾器設置並應用以下設置：

• 色相：211deg
• 飽和度：600%
• 亮度：67%
• 對比度：112%
• 反轉：18%

將文本模塊 #1 添加到列

添加H1內容

我們在這一行中需要的第二個模塊是帶有一些 H1 內容的文本模塊。

H1 文本設置

轉到設計選項卡並相應地更改 H1 文本設置：

• 標題字體：蒙特塞拉特
• 標題字體粗細：半粗體
• 標題文字顏色：#ffffff
• 標題文字大小：5vw
• 標題字母間距：-2px

漿紗

接下來修改模塊的寬度。

• 寬度：70%

間距

並使用一些負上邊距在此模塊和上一個模塊之間創建重疊。

• 最高邊距：-57vw（桌面）、-75vw（平板電腦）、-91vw（手機）

將分隔模塊添加到列

能見度

我們需要的下一個模塊是分頻器模塊。 確保啟用了“顯示分隔線”選項。

• 顯示分隔線：是

線

接下來更改線條顏色。

• 線條顏色：#00dcff

漿紗

還要修改大小設置。

• 分頻器重量：0.8vw
• 寬度：27%

將文本模塊 #2 添加到列

添加段落內容

繼續添加一個新的文本模塊，其中包含您選擇的一些段落內容。

文字設置

轉到設計選項卡並相應地更改文本設置：

• 文字字體：Open Sans
• 文字顏色：#ffffff
• 文字大小：1vw（桌面）、2vw（平板電腦）、2.5vw（手機）
• 文本行高：1.8em

漿紗

還要修改模塊的寬度。

• 寬度：53%（桌面）、65%（平板）、100%（手機）

將按鈕模塊添加到列

添加副本

我們在這一行中需要的下一個也是最後一個模塊是按鈕模塊。 添加一些您選擇的副本。

按鈕設置

接下來轉到按鈕設置並相應地更改按鈕的樣式：

• 為按鈕使用自定義樣式：是
• 按鈕文字大小：1vw（桌面）、2vw（平板電腦）、3vw（手機）
• 按鈕文字顏色：#ffffff
• 按鈕背景顏色：#000000
• 按鈕邊框寬度：0px
• 按鈕字體：Open Sans

間距

添加一些自定義填充值。

• 頂部填充：1vw
• 底部填充：1vw
• 左填充：4vw
• 右填充：4vw

添加第 2 行

列結構

進入下一行！ 選擇以下列結構：

背景顏色

尚未添加任何模塊，打開行設置。 將背景顏色更改為白色。

• 背景顏色：#ffffff

漿紗

移至設計選項卡並增加最大寬度。

• 最大寬度：100%

間距

接下來添加一些自定義填充值。

• 頂部填充：3vw
• 底部填充：8vw
• 左填充：7vw
• 右填充：7vw

邊界

我們將繼續在行的左下角和右上角添加“20vw”。 我們還將使用以下設置添加頂部邊框：

• 頂部邊框寬度：1.2vw
• 頂部邊框顏色：#00dcff

盒子陰影

我們還添加了一個微妙的框陰影以在頁面上創建深度。

• 框陰影模糊強度：120px

Z索引

為了確保該行出現在圖像模塊的頂部，我們將在可見性設置中增加行 Z 索引。

• Z指數：10

將 Blurb 模塊添加到第 1 列

添加內容

完成行設置後，您可以將 Blurb 模塊添加到行的第一列。 輸入您選擇的一些內容。

選擇圖標

接下來選擇您選擇的圖標。

圖標設置

移至設計選項卡並更改圖標設置。

• 圖標顏色：#000000
• 圖標位置：頂部
• 使用圖標字體大小：是
• 圖標字體大小：5vw

標題文字設置

也修改標題設置。

• 標題字體：蒙特塞拉特
• 標題字體粗細：粗體
• 標題文本對齊：居中
• 標題文字顏色：#000000
• 標題文字大小：1.1vw（桌面）、2.5vw（平板電腦）、3vw（手機）
• 標題字母間距：-1px

正文設置

隨著正文文本設置。

• 正文字體：Open Sans
• 正文對齊方式：居中
• 正文大小：0.8vw（桌面）、1.6vw（平板電腦）、2vw（手機）
• 機身線高：1.5vw（台式機），3vw（平板電腦和手機）

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

完成第 1 列中的 Blurb 模塊後，您可以將其克隆兩次並將重複項放置在該行的其餘兩列中。

更改內容

確保您更改了兩個重複項的內容，就大功告成了！

預覽

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

最後的想法

在這篇文章中，我們向您展示瞭如何利用 Divi 的內置行邊框發揮創意，以創建一個令人驚嘆的英雄部分，您可以將其用於下一個 Divi 項目。 我們從頭開始重新創建了一個漂亮的示例，您還可以免費下載 JSON 文件。 如果您有任何問題或建議，請務必在下方評論區留言！

如果您渴望了解有關 Divi 的更多信息並獲得更多 Divi 免費贈品，請確保訂閱我們的電子郵件時事通訊和 YouTube 頻道，這樣您將永遠是第一批了解此免費內容並從中受益的人之一。