如何使用 Divi 的帖子內容模塊和部分分隔符來混合您的標題和正文

到目前為止，我們都已經習慣了 Divi 的內置分區分隔器。 它們有助於為我們構建的網站增添額外的觸感。 它們還可以作為兩個不同部分之間的平滑過渡，但使用 Divi 的 Theme Builder，創建該過渡的方法略有不同。 在這篇文章中，我們將指導您完成到達那裡必須採取的步驟。 您也可以免費下載模板 JSON 文件！

讓我們開始吧。

預覽

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

桌面

移動的

免費下載分區分隔頁模板

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

下載文件

免費下載

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

下載

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

訂閱我們的 YouTube 頻道

1.轉到Divi Theme Builder並添加新模板

轉到 Divi 主題生成器

首先轉到Divi Theme Builder。

為頁面添加新模板

在那裡，通過單擊加號圖標創建一個新模板。

如果您希望混合效果應用於所有頁面，請選擇“所有頁面”。 您也可以在其他類型的模板上使用相同的效果，但您必須在每個模板中​​單獨包含頂部分隔符。 創建新模板後，開始構建自定義標頭。

2. 構建自定義標題

部分設置

漸變背景

在模板編輯器中，您會注意到一個部分。 打開該部分並為其添加漸變背景。

• 顏色 1：#d13232
• 顏色 2：#fc6a3c

間距

也向該部分添加一些自定義的頂部和底部填充。

• 頂部填充：1vw（桌面），2vw（平板電腦和手機）
• 底部填充：1vw（台式機），2vw（平板電腦和手機）

Z索引

為了確保您的標題位於所有內容的頂部，我們將增加可見性設置中的 z 索引。

• Z指數：99999

添加新行

列結構

繼續使用以下列結構向您的部分添加新行：

漿紗

在不添加任何模塊的情況下，打開行設置並修改大小設置如下：

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

間距

也刪除所有頂部和底部填充。

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

主要元素

最後但並非最不重要的一點是，通過向行的主要元素添加兩行 CSS 代碼，將列內容居中，並允許列在較小的屏幕尺寸上彼此相鄰。

display: flex;
align-items: center;

將圖像模塊添加到第 1 列

上傳標誌

完成所有部分和行設置後，就可以添加模塊了，從第 1 列中的圖像模塊開始。上傳具有透明背景的徽標。

結盟

然後，轉到模塊的設計選項卡並更改圖像對齊方式。

• 圖像對齊：居中

漿紗

也可以跨不同屏幕尺寸修改模塊的寬度。

• 寬度：6vw（桌面）、13vw（平板電腦）、17vw（手機）

將菜單模塊添加到第 2 列

選擇菜單

在第二列中，我們需要一個菜單模塊。 選擇您選擇的菜單。

刪除背景顏色

繼續刪除模塊的背景色。

佈局

轉到設計選項卡並更改佈局。

• 樣式：左對齊
• 下拉菜單方向：向下

菜單文字

接下來，相應地設置菜單文本的樣式：

• 菜單字體：Oswald
• 菜單字體粗細：輕
• 菜單字體樣式：大寫
• 菜單文本顏色：#ffffff（桌面）、#202332（平板電腦和手機）
• 菜單文字大小：0.8vw（桌面）、2vw（平板電腦）、2.5vw（手機）
• 菜單字母間距：0.1vw

下拉式菜單

也在下拉菜單設置中更改下拉菜單行顏色。

• 下拉菜單行顏色：#ffffff

圖標

並通過使用白色漢堡菜單圖標顏色完成模塊的設置。

• 漢堡菜單圖標顏色：#ffffff

將按鈕模塊添加到第 3 列

添加副本

進入最後一欄！ 在那裡，我們唯一需要的模塊是按鈕模塊。 添加一些您選擇的副本。

結盟

轉到模塊的設計選項卡並更改按鈕對齊方式。

• 按鈕對齊：居中

按鈕設置

繼續在按鈕設置中設置按鈕樣式。

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

• 按鈕邊框半徑：100px
• 按鈕字母間距：2px
• 按鈕字體：Open Sans
• 按鈕字體粗細：粗體
• 按鈕字體樣式：大寫

間距

並通過在不同的屏幕尺寸上添加一些自定義填充來完成模塊的設置。

• 頂部填充：0.8vw（桌面）、1.6vw（平板電腦）、2.2vw（手機）
• 底部填充：0.8vw（台式機）、1.6vw（平板電腦）、2.2vw（手機）
• 左填充：1.5vw（桌面）、2.5vw（平板電腦）、3.5vw（手機）
• 右填充：1.5vw（桌面）、2.5vw（平板電腦）、3.5vw（手機）

3. 建立自定義車身並添加頂部分隔線

完成模板的自定義標題後，繼續並開始構建自定義正文。

部分設置

頂部分隔線

您會再次注意到頁面上的一個部分。 打開該部分並為其添加頂部分隔線。

• 分隔線樣式：在列表中查找
• 分隔線顏色：#fc6a3c
• 分頻器高度：6vw
• 分隔線水平重複：15x
• 分隔線翻轉：垂直
• 分隔線安排：在部分內容的頂部

間距

轉到該部分的設計選項卡並刪除所有默認的頂部和底部填充。

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

添加新行

列結構

繼續使用以下列結構向您的部分添加新行：

漿紗

打開行設置並更改大小設置如下：

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

間距

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

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

將帖子內容模塊添加到列

現在，要顯示所有頁面內容，您需要向行中添加一個發佈內容模塊。 此模塊表示您使用 Divi 在頁面本身內部構建的佈局。 如果您將此過渡添加到產品頁面，例如，涉及動態內容的模板，則會採用不同的方法。 唯一要記住的重要事情是您必須在模板主體的第一部分添加一個頂部分隔線。 確保分隔線的顏色與用於全局標題背景的顏色相同。

3. 保存構建器更改並查看結果

完成模板正文後，您可以保存更改並在您的網站上查看結果！

預覽

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

桌面

移動的

最後的想法

在這篇文章中，我們向您展示瞭如何使用 Divi 的部分分隔符和帖子內容模塊混合模板的標題和正文。 分隔線過渡立即適用於您的所有頁面。 您也可以免費下載 JSON 文件！ 如果您有任何問題或建議，請隨時在下面的評論部分發表評論。

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