如何使用 Divi 創建拆分混合模式標題

混合模式可以幫助您更加關注您正在處理的設計的美感，這已經不是什麼秘密了。 過去，我們介紹了混合模式提示和技巧，可幫助您創建一些獨特而華麗的設計。 現在，由於列更新已經出來，您可以使用這些混合模式做一些額外的事情。 其中之一是創建一個拆分混合模式標題。 在這篇文章中，我們將向您展示如何通過組合模塊和列混合模式、列背景顏色和負邊距來獲得驚人的結果。 您也可以免費下載 JSON 文件！

讓我們開始吧。

預覽

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

免費下載拆分混合模式英雄部分

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

下載文件

免費下載

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

下載

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

訂閱我們的 YouTube 頻道

讓我們開始重建吧！

添加新部分

間距

向您正在處理的頁面添加一個新的常規部分，並刪除所有默認的頂部和底部填充。

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

盒子陰影

轉到框陰影選項並添加一個微妙的框陰影。

• 框陰影模糊強度：70px
• 陰影顏色：rgba(0,0,0,0.07)

添加新行

列結構

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

漸變背景

尚未添加任何模塊，打開行設置並應用漸變背景。 在本文的下一步中，我們將使用混合模式將漸變背景與背景圖像合併。

• 顏色 1：#00cbff
• 顏色 2：#bf35ff
• 梯度方向：96度

背景圖片

將背景圖像添加到該行並將其與以下背景圖像設置結合使用：

• 背景圖片尺寸：封面
• 背景圖片位置：中心
• 背景圖像重複：不重複
• 背景圖像混合：屏幕

漿紗

接下來轉到大小設置並允許行佔據部分容器的整個寬度。

• 使用自定義裝訂線寬度：是
• 天溝寬度：1
• 均衡柱高：是
• 寬度：100%
• 最大寬度：100%

間距

刪除下一行的所有默認頂部和底部填充。 這將確保我們稍後在本文中添加的第 2 列背景顏色接觸行和節容器的頂部和底部邊框。

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

展示

為了確保兩列在較小的屏幕尺寸上彼此相鄰，我們將向行的主要元素添加一行 CSS 代碼。

display: flex;

第 2 列設置

背景顏色

完成常規行設置後，繼續打開第二列的設置。 首先添加白色背景色。

• 背景顏色：#FFFFFF

過濾器

移至設計選項卡並為整列添加混合模式。

• 混合模式：屏幕

將分頻器模塊添加到第 1 列

能見度

是時候開始添加模塊了！ 我們在第一列中唯一需要的模塊是 Divider 模塊。 此模塊將幫助我們在第一列中創建空間，而無需顯示模塊。 確保分隔符的“顯示分隔符”選項被禁用。

• 顯示分隔線：否

間距

轉到間距設置並添加一些底部邊距以在第一列中創建空間。

• 底邊距：50vw

將文本模塊 #1 添加到第 2 列

添加 H1 標題

進入第二列！ 在這裡，我們將從標題文本模塊開始。 輸入您選擇的一些 H1 內容。

H1 文本設置

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

• 標題字體： Poppins
• 標題字體粗細：粗體
• 標題文字顏色：#FFFFFF
• 標題文字大小：12vw
• 標題字母間距：-0.2vw

間距

我們還在模塊周圍創建了一些空間，並通過應用一些自定義邊距值將其推到左側。 負左邊距在創建分割混合模式中起著重要作用。 它允許副本的一部分出現在不包含任何背景顏色的第一列下方。

• 最高利潤率：18vw
• 底邊距：2vw
• 左邊距：-27.3vw

過濾器

現在，在下一步中，魔法將會發生！ 我們結合了模塊和列混合模式，以允許行背景顯示出來。 確保為文本模塊選擇以下混合模式：

• 混合模式：差異

將文本模塊 #2 添加到第 2 列

添加內容

進入第二個模塊！ 添加一些您選擇的內容。

文字設置

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

• 文字字體： Poppins
• 文本對齊：對齊
• 文字顏色：#000000
• 文字大小：0.8vw（桌面）、1.5vw（平板電腦）、2.3vw（手機）
• 文本行高：2.5em（桌面和平板電腦），2.2em（手機）

間距

接下來添加一些自定義邊距值。

• 底邊距：1vw
• 左邊距：5vw
• 右邊距：14vw（桌面）、4vw（平板電腦）、5vw（手機）

將分隔模塊添加到第 2 列

能見度

進入下一個模塊，它是一個分隔模塊。 確保啟用了“顯示分隔線”選項。

• 顯示分隔線：是

線

轉到設計選項卡並相應地更改線條設置：

• 線條顏色：#FFFFFF
• 線型：實心
• 線路位置：頂部

漿紗

還要修改分隔線的大小設置。

• 分頻器重量：0.7vw
• 寬度：9%
• 高度：0px

間距

並添加一些自定義間距值。

• 最高邊距：2vw（台式機），5vw（平板電腦和手機）
• 下邊距：3vw（台式機），6vw（平板電腦和手機）
• 左邊距：5vw

過濾器

最後但並非最不重要的一點是，應用混合模式以允許行背景圖像和漸變顯示出來。

• 混合模式：差異

將按鈕模塊添加到第 2 列

添加副本

進入下一個也是最後一個模塊，即按鈕模塊。 輸入您選擇的一些副本。

結盟

移至設計選項卡並確保按鈕對齊設置為左對齊。

• 按鈕對齊：左

按鈕設置

還要修改按鈕設置。

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

間距

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

• 下邊距：10vw（台式機），15vw（平板電腦和手機）
• 左邊距：5vw
• 頂部填充：1vw
• 底部填充：1vw
• 左填充：3vw
• 右填充：3vw

預覽

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

最後的想法

在這篇文章中，我們向您展示瞭如何使用 Divi 的新列選項來創建令人驚嘆的拆分混合模式標題。 本教程僅展示了 Divi 的內置選項的多功能性，以及每次 Divi 更新時，第三方設計軟件如何變得不必要。 如果您有任何問題或建議，請務必在下方評論區留言！

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