如何在 Divi 元素之間創建無縫背景設計過渡

在 Divi 元素之間創建無縫背景設計過渡是提升 Divi 網站設計的好方法。 這個想法是創建匹配的背景設計（用於一行和一個部分），它們共享與瀏覽器寬度相關的相同大小和位置（使用 vw 長度單位）。 這允許您以創造性的方式在行和部分之間無縫轉換背景漸變、圖案和蒙版。 例如，您可以將圖案或蒙版過渡到不同的顏色，而不會失去設計的整體對齊和對稱方面。

在本教程中，我們將使用 Divi 的內置背景設計選項在 Divi 部分和行之間創建無縫背景設計過渡。 這種設計的應用性和多功能性是無限的，將Divi的背景設計選項提升到一個全新的水平！

讓我們開始吧。

搶先看

下面是我們將在本教程中構建的設計的快速瀏覽。

這裡還有一些示例設計，只需對背景蒙版和圖案進行一些簡單的更改即可。

免費下載佈局

要掌握本教程中的設計，您首先需要使用下面的按鈕下載它。 要訪問下載，您需要使用下面的表格訂閱我們的 Divi Daily 電子郵件列表。 作為新訂閱者，您將在每週一收到更多 Divi 福利和免費的 Divi Layout 包！ 如果您已經在列表中，只需在下面輸入您的電子郵件地址，然後單擊下載。 您不會被“重新訂閱”或收到額外的電子郵件。

下載文件

免費下載

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

下載

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

要將部分佈局導入 Divi 庫，請執行以下操作：

1. 導航到 Divi 庫。
2. 單擊頁面頂部的導入按鈕。
3. 在可移植性彈出窗口中，選擇導入選項卡
4. 從您的計算機中選擇下載文件（確保先解壓縮文件並使用 JSON 文件）。
5. 然後單擊導入按鈕。

完成後，部分佈局將在 Divi Builder 中可用。

讓我們進入教程，好嗎？

你需要什麼開始

要開始，您需要執行以下操作：

1. 如果您還沒有，請安裝並激活 Divi 主題。
2. 在 WordPress 中創建一個新頁面，並使用 Divi Builder 在前端（可視化構建器）編輯頁面。
3. 選擇“從頭開始構建”選項。

之後，您將有一個空白畫布開始在 Divi 中進行設計。

在 Divi 部分和行之間創建無縫背景設計過渡

第 1 部分：創建標題作為模擬內容

在我們開始設計我們的背景之前，我們需要添加一個標題作為模擬內容。 首先，將單列行添加到頁面的默認部分。

然後將一個文本模塊添加到該行。

在正文內容中添加 H1 標題。

在設計選項卡下，根據需要更新標題文本設計。 對於這個設計，它有助於為標題文本的大小添加一個 VW 長度單位，以便它可以與設計的其餘部分一起流暢地縮放。

2. 設計部分背景

將 VW 填充添加到該部分

模擬標題到位後，打開部分設置並更新間距，如下所示：

• 填充：15vw 頂部，15vw 底部

將背景漸變添加到部分

現在我們有更多的空間可以使用，我們準備將我們的背景設計添加到該部分。 在漸變選項卡下，添加以下漸變色標：

• 漸變停止 1：#4f0f75（在 0% 處）
• 漸變停止 2：#2843c9（25%）
• 梯度停止 3：#4ae2e0（50%）
• 漸變停止 4：#3881ff（75%）
• 漸變停止 5：#4f0f75（100%）

向部分添加背景圖案

在 Pattern 選項卡下，更新以下內容：

• 圖案：斜條紋
• 圖案顏色：rgba(79,15,117,0.23)
• 圖案變換：旋轉
• 圖案尺寸：自定義尺寸
• 圖案寬度：7vw
• 圖案高度：5vw
• 圖案重複原點：中心

注意：確保使用 VW 長度單位作為圖案寬度和高度。 並且，還要確保將重複原點設置為“中心”。 這將使背景圖案與我們稍後將添加到行中的背景圖案保持在同一位置。

向部分添加背景蒙版

在 Mask 選項卡下，添加以下內容：

• 背景蒙版：圖層 Blob
• 蒙版顏色：rgba(0,0,0,0.7)
• 面罩尺寸：100vw
• 面罩位置：中心

注意：就像使用模式一樣，我們必須使用 VW 長度單位為掩碼指定大小。 我們還必須給面具一個中心位置。

3. 設計行背景

將部分背景複製並粘貼到行背景

要加快設計行背景的過程，請複制該部分的背景設置。

然後將背景粘貼到現有行。

此時，您已經可以看到背景圖案和遮罩是如何無縫過渡到行背景的。 看起來該行具有透明背景，但它實際上是在具有相同大小和位置的部分中使用的相同圖案和蒙版。

使用 VW 調整行的大小和填充

接下來，我們需要使用 VW 長度單位為我們的行提供自定義寬度。 更新以下內容：

• 寬度：75vw
• 最大寬度：75vw
• 填充：頂部 10vw，底部 10vw，左側 10vw，右側 10vw

VW 長度單位的間距和尺寸概述

到目前為止，我們一直在使用 VW 長度單位在佈局中添加間距和位置值。 這是當前使用的值的快速說明。

到目前為止，我們在模式和蒙版的行背景和部分背景之間實現了無縫過渡。 接下來，我們將更新行的背景漸變，使其也是無縫的。

調整行上的漸變停止

接下來，我們需要調整行背景上的漸變色標，以便無縫過渡到部分背景漸變。 在漸變選項卡下，我們將保留從剖面背景繼承的三個中間漸變停止點）並刪除第一個和最後一個漸變停止點。 然後將第一個停靠點定位在 0%，將第三個停靠點定位在 100%。 完成後，您應該具有以下漸變。

• 漸變停止 1：#2843c9（0%）
• 梯度停止 2：#4ae2e0（50%）
• 漸變停止 3：#3881ff（100%）

將框陰影添加到行

為了給設計增加一點高度並強調背景的無縫過渡，我們可以在行中添加一個盒子陰影。

• 盒子陰影：見截圖
• 盒子陰影垂直位置：0px
• 盒子陰影模糊強度：4vw
• 盒子陰影顏色：rgba(0,0,0,0.5)

調整行背景圖案顏色

現在我們已經將所有背景元素都放在了適當的位置，我們可以開始調整顏色以獲得更具創意的設計。 在該行的模式選項下，更新以下內容：

• 圖案顏色：rgba(255,255,255,0.23)

調整行背景蒙版顏色

我們還可以更新行的遮罩顏色以真正使設計流行！ 在掩碼選項卡下，更新以下內容：

• 面具顏色：#ffffff
• 蒙版變換：反轉

最後結果

讓我們看看最終結果。

更多可能性

這裡還有一些示例設計，只需對背景蒙版和圖案進行一些簡單的更改即可。

最後的想法

在 Divi 中創建無縫背景設計過渡的關鍵是明智地使用這些大眾長度單位。 首先，我們需要創建一個隨瀏覽器視口寬度（從頁面居中位置開始）縮放的部分背景設計。 完成後，我們可以連續使用相同的背景設計。 之後，我們只需對漸變和顏色進行一些調整，即可獲得令人驚嘆的設計。 希望這項技術能為未來的項目增加另一種有用的設計技能

我期待在評論中收到您的來信。

乾杯!