如何為您的下一個 Divi 項目創建充滿活力的部分標題

我們知道你們中的大多數人一直在尋找新的方法來使您創建的網站獨一無二。 使用 Divi，有很多方法可以讓您的網站從其他網站中脫穎而出。 今天，我們將向您展示如何僅使用 Divi 的內置選項創建令人驚嘆的部分標題。 如果您想創建令人驚嘆的設計、保持整體頁面結構並保持導航無縫，這種方法非常有用。

讓我們開始吧！

預覽

在我們深入學習本教程之前，讓我們先看看我們的目標是在不同的屏幕尺寸上實現的結果：

讓我們開始創作吧！

添加新的常規部分

間距

首先打開一個新頁面，切換到 Visual Builder 並添加您的第一部分。 在不添加任何行或模塊的情況下，打開部分設置並添加一些填充：

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

添加新行

列結構

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

背景顏色

接下來打開行設置並為整行添加背景顏色：

• 背景顏色：#f9f9f9

第 1 列漸變背景

然後，為您的第一列添加微妙的漸變背景。 這將有助於在列之間創建部分標題的重疊。

• 顏色 1：#0031c4
• 顏色 2：#00aeff
• 第 1 列梯度方向：125deg

漿紗

還要更改行的間距，以確保它佔據屏幕的整個寬度。

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

間距

最後，根據不同的屏幕尺寸更改間距設置：

• 頂部填充：0px
• 底部填充：0px
• 第 2 列頂部填充：200px
• 第 2 列底部填充：200px
• 第 2 列左填充：350 像素（桌面）、50 像素（平板電腦和手機）
• 第 2 列右填充：50px

將章節標題文本模塊添加到第 1 列

H2 文本設置

現在所有行設置都已就位，我們可以開始添加模塊。 我們將從第一列​​開始。 在這裡，我們唯一需要的模塊是文本模塊。 在內容框中添加 H2 內容後，繼續更改 H2 文本設置：

• 標題 2 字體粗細：超粗體
• 標題 2 字體樣式：大寫
• 標題 2 文本對齊：居中
• 標題 2 文本顏色：#ffffff
• 標題 2 文字大小：150px
• 標題 2 行高：1.25em
• 標題 2 文字陰影垂直長度：-0.55em
• 標題 2 文本陰影顏色：rgba(0,255,255,0.25)

間距

在台式機、平板電腦和手機上，列之間的重疊是不同的。 為了創建重疊，我們將對文本模塊的間距設置進行一些更改：

• 上邊距：325px（桌面），150px（平板和手機）
• 下邊距：325px、-120px（平板電腦）、-110px（手機）
• 右邊距：-100%（桌面），0px（平板和手機）

篩選

最後但並非最不重要的一點是，我們將使用混合模式為顯示的文本創建顏色差異。

• 混合模式：疊加

將標題文本模塊添加到第 2 列

H3 文本設置

讓我們繼續第二列。 在那裡，我們需要的第一個模塊是標題文本模塊。 添加 H3 內容後，更改 H3 文本設置：

• 標題 3 字體粗細：半粗體
• 標題 3 文本顏色：#00aeff
• 標題 3 文字大小：60px
• 標題 3 字母間距：-3px

間距

接下來通過添加底部邊距來創建一些空間：

• 下邊距：50px

將分隔模塊添加到第 2 列

分隔線顏色

我們需要的第二個模塊是分頻器模塊。 打開顏色設置並更改顏色以匹配設計的調色板：

• 分隔線顏色：#00ffff

漿紗

然後，修改大小設置：

• 高度：56px
• 寬度：75%

將描述文本模塊添加到第 2 列

文字設置

繼續使用以下文本設置添加描述文本模塊：

• 文字大小：17px
• 文本行高：1.3em
• 文本方向：對齊

漿紗

接下來更改大小設置：

• 尺寸：70%（桌面），100%（平板和手機）

間距

還使用底部邊距在此模塊下方添加一些空間：

• 下邊距：50px

將按鈕模塊添加到第 2 列

按鈕設置

本專欄中我們需要的最後一個模塊是按鈕模塊。 添加 CTA 後，更改按鈕設置：

• 為按鈕使用自定義樣式：是
• 按鈕文字大小：17px
• 按鈕文字顏色：#ffffff
• 按鈕背景顏色：#00aeff
• 按鈕邊框寬度：0px
• 按鈕邊框半徑：100px
• 按鈕字母間距：-1px
• 字體粗細：超粗
• 字體樣式：大寫

間距

為了給按鈕一個更乾淨的外觀和感覺，我們還將添加一些填充：

• 頂部填充：10px
• 底部填充：10px
• 左填充：30px
• 右填充：30px

盒子陰影

最後但並非最不重要的是，我們將使用一個微妙的框陰影為我們的部分添加一點深度：

• 框陰影模糊強度：54px
• 框陰影擴散強度：-8px
• 陰影顏色：rgba(0,0,0,0.3)

克隆部分

更改所有副本

要創建第二部分，我們只需克隆我們已經創建的部分，然後更改所有副本。

更改行背景顏色

對於這個新部分，我們將使用另一個調色板。 首先更改行的背景顏色。

• 背景顏色：#efefef

更改第 1 列漸變背景

然後，也選擇另一個漸變背景。

• 顏色 1：#5f00a8
• 顏色 2：#9000ff

更改部分標題陰影顏色

我們也將文本陰影顏色與我們的新調色板相匹配：

• 標題 2 文本陰影顏色：rgba(255,0,255,0.24)

更改章節標題間距設置

根據您使用的副本的長度，您需要使用負的右邊距。

• 右邊距：-110%（桌面）

更改標題文本模塊文本顏色

然後，更改第 2 列中標題文本模塊的文本顏色。

• 標題 3 文本顏色：#9000ff

更改分隔線顏色

同樣，使分隔線顏色與設計相匹配。

• 顏色：#ff00ff

更改按鈕背景顏色

最後，您需要更改按鈕模塊的背景顏色。

• 按鈕背景顏色：#9000ff

預覽

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

最後的想法

有很多方法可以讓您的網頁設計從其他網站中脫穎而出。 在這篇文章中，我們向您展示瞭如何僅使用 Divi 的內置選項創建令人驚嘆的部分標題和一般部分。 我們將列漸變背景與文本模塊重疊、文本陰影和混合模式相結合，以創建令人驚嘆的最終結果。 如果您有任何問題或建議，請務必在下方評論區留言！