如何使用 Divi 創建雙層背景滾動效果

如果您正在尋找一種讓您的網站脫穎而出的方法，您可能想學習如何創建雙層背景。 創建雙層背景將有助於通過運動使您的背景圖像栩栩如生。 在今天的教程中，我們將向您展示如何使用 Divi 創建雙層背景設計。 本教程包含三個部分：

1. 在 Adob​​e Photoshop 中準備兩個圖像文件
2. 在 Divi 中創建設計
3. 應用滾動效果為背景設置動畫

您還可以免費下載 JSON 和圖像文件！

讓我們開始吧。

預覽

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

桌面

移動的

免費下載佈局

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

下載文件

免費下載

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

下載

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

1. 在 Photoshop 中創建圖像文件

選擇背景乾淨的產品圖片並在 Photoshop 中打開

在本教程的第一部分，我們將創建我們將在整個 Divi 教程中使用的圖像文件。 要創建這些，我們將使用 Adob​​e Photoshop，但也可以隨意使用您選擇的任何其他圖像編輯軟件。 如果您使用的圖像具有以下特徵，則雙層背景圖像效果將發揮最佳效果：

1. 清晰地聚焦在圖像內的物體上
2. 乾淨的背景

下圖就是一個完美的例子。 您可以在本文下載區域共享的壓縮文件夾中找到此圖像文件。

複製圖層

在 Photoshop 中打開圖像後，克隆一次原始圖層。 我們將處理複製層。

隱藏原始圖層

為確保在我們向下移動教程時看到結果，請隱藏原始圖層。

從圖像中的對象選擇創建 PNG

在板上使用快速選擇工具

本教程總共需要兩個圖像文件：

1. 對象的 PNG，在這種情況下，是盤子
2. 沒有對象的背景的 JPEG

我們將對象與其背景分開，因此我們可以在 Divi 環境中單獨操作它們。

要開始選擇對象，請選擇工具欄中的“快速選擇工具”並嘗試覆蓋盡可能多的對象。

選擇 + 蒙版選擇

您會注意到對象選擇仍然不夠好。 您可以在右鍵單擊選擇時使用“選擇和遮罩”選項來微調選擇的外觀。 到達那里後，您可以調整不透明度、平滑度等。

從選擇創建圖層蒙版

雖然我們已經創建了一個平滑的選擇，但對象內部仍有一些部分尚未選擇。 我們將通過單擊您可以在下面的打印屏幕中看到的圖層蒙版按鈕手動將這些部分添加到我們的選擇中：

使用畫筆微調蒙版內的選區

創建圖層蒙版後，您可以開始使用畫筆修改圖層蒙版。 確保選擇了圖層蒙版。

• 使用黑色畫筆 (#000) 將移除部分圖層蒙版
• 使用白色畫筆 (#fff) 將添加圖層蒙版的背面部分

使用硬度不太高的刷子，因此您不必非常精確。

帶彩色層的雙重檢查面具

您始終可以通過在其下方放置一個彩色圖層來仔細檢查圖層蒙版​​。 如果你錯過了一個地方，彩色圖層會更容易洩露。

將 PNG 選區另存為單獨的圖像文件

創建新文件

現在您有了對象的 PNG 選擇，您可以克隆整個圖層，這樣您就可以隨時返回到它。 在下一部分中，我們將使用複製圖層創建沒有對象的背景圖像。

我們對象的大小遠小於初始文件大小，因此我們將為我們的對象創建一個新文件並將其帶過來。

在新文件中適合選擇

將圖層及其圖層蒙版複製粘貼到您創建的新文件中。

導出為 Web

並將其導出為 PNG 格式的網頁。

壓縮圖像文件

具有透明背景的 PNG 往往具有更大的文件大小，因此建議您使用您選擇的工具壓縮文件。

刪除原始圖像中的對象

選擇圖層蒙版

回到最初的 Photoshop 文件！ 在那裡，我們將創建沒有對象的背景圖像。 我們使用文件中的頂層來做到這一點。 首先，確保選擇了圖層蒙版。

反轉蒙版

然後，轉到該圖層的屬性並單擊“反轉”。

應用圖層蒙版

您現在會注意到對像在初始層內是透明的。 我們將通過右鍵單擊並選擇“應用圖層蒙版”將圖層蒙版應用於我們的圖層。

使用克隆工具填充空白空間

我們中間還有一個洞，我們需要把它填滿。 這就是克隆工具派上用場的地方。 選擇您選擇的畫筆大小並填充圖像。 你不需要非常精確，在 Divi 教程中，我們將把對象放在它上面。

保存沒有對象的圖像

導出為 Web

完成不含對象的背景圖像後，您可以將其保存為 70% 質量的 JPEG 文件。

壓縮圖像文件

確保也壓縮此圖像。

2.在Divi中構建雙層背景效果

添加新部分

上傳背景圖片

一旦您擁有兩個圖像文件，就可以切換到 Divi！ 打開一個新頁面並添加一個新部分。 上傳您在本教程的第一部分中創建的背景圖片。

間距

轉到該部分的設計選項卡並應用一些自定義間距值。 我們添加的底部邊距將幫助我們看到效果是否到位。 通常，此餘量將被設計中的下一部分替換。

• 底邊距：100vh
• 頂部填充：
  • 桌面：100px
  • 平板電腦和手機：50px
• 底部填充：
  • 桌面：100px
  • 平板電腦：600px
  • 電話：500px

添加第 1 行

列結構

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

漿紗

還沒有添加模塊，打開行設置並更改寬度和最大寬度。 這些設置將允許行始終接觸節容器的左側和右側。 這樣，我們可以確保 PNG 和背景圖像在所有屏幕尺寸上具有相同的平衡。

• 寬度：100%
• 最大寬度：100%

間距

接下來轉到行的間距設置並刪除所有默認的頂部和底部填充。

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

位置

然後，重新定位整行。

• 位置：絕對
• 地點：
  • 桌面：中心
  • 平板電腦和手機：中央底部
• 垂直偏移：
  • 桌面： /
  • 平板電腦和手機：30vh

將圖像模塊添加到行

上傳PNG圖片

完成行設置後，將圖像模塊添加到該行並上傳您在本教程的第一部分中創建的 PNG 文件。

結盟

移至設計選項卡並更改圖像對齊方式。

• 圖像對齊：居中

漿紗

接下來更改大小設置。

• 寬度：
  • 台式機：36%
  • 平板電腦和手機：60%

添加第 2 行

列結構

然後，使用以下列結構向該部分添加另一行：

背景顏色

打開行設置並更改背景顏色。

• 背景顏色：#ffffff

漿紗

接下來修改大小設置。

• 寬度：90%
• 最大寬度：550px
• 行對齊：
  • 桌面：左
  • 平板電腦和手機：中心

間距

然後，應用一些自定義填充值。

• 頂部填充：11%
• 底部填充：11%
• 左填充：5%
• 右填充：5%

水平偏移

我們也在位置設置中添加了一些水平偏移。

• 水平偏移：
  • 台式機：5%
  • 平板電腦和手機：0%

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

添加 H2 內容

是時候添加模塊了，從包含一些 H2 內容的第一個文本模塊開始。

H2 文本設置

H2 文本的樣式如下：

• 標題 2 字體：Kumbh Sans
• 標題 2 文字大小：
  • 桌面：90px
  • 平板電腦：60px
  • 電話：45px

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

添加說明內容

在上一個文本模塊的正下方添加另一個文本模塊，並插入一些您選擇的描述內容。

文字設置

相應地更改模塊的文本設置：

• 文字字體：Kumbh Sans
• 文本行高：2em

將按鈕模塊添加到第 1 列

添加副本

本專欄中我們需要的最後一個模塊是按鈕模塊。 添加一些您選擇的副本。

按鈕設置

相應地設置按鈕樣式：

• 為按鈕使用自定義樣式：是
• 按鈕文字大小：20px
• 按鈕文字顏色：#6b6443
• 按鈕邊框寬度：0px
• 按鈕邊框半徑：0px

• 按鈕字體：Kumbh Sans
• 按鈕字體粗細：粗體
• 顯示按鈕圖標：是
• 按鈕圖標位置：左
• 僅在懸停按鈕時顯示圖標：否

盒子陰影

還包括一個框陰影。

• 框陰影水平位置：0px
• 框陰影垂直位置：2px
• 陰影顏色：#6b6443

3. 添加滾動效果

圖像垂直運動

在本教程的最後一部分，我們將重點介紹向包含 PNG 圖像文件的圖像模塊添加滾動效果。 打開模塊的設置，導航到高級選項卡並應用以下垂直運動設置：

• 啟用垂直運動：是
• 起始偏移：
  • 桌面：0
  • 平板電腦和手機：4（0%）
• 中間偏移：
  • 桌面：0
  • 平板電腦和手機：0（97%）
• 結束偏移：
  • 桌面：0
  • 平板電腦和手機：-2（100%）

圖像水平運動

我們正在使用以下水平運動設置完成我們的設計：

• 啟用水平運動：是
• 起始偏移：
  • 桌面：0（在 0% 時）
  • 平板和手機：0
• 中間偏移：
  • 桌面：0（65%）
  • 平板電腦和手機：0（97%）
• 結束偏移：
  • 桌面：-10（100%）
  • 平板和手機：0

預覽

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

桌面

移動的

最後的想法

在這篇文章中，我們向您展示瞭如何創建雙層背景，並使用 Divi 的內置滾動效果為其設置動畫。 在教程的第一部分，我們已經在 Adob​​e Photoshop 中準備了圖像文件。 在本教程的第二部分，我們專注於使用 Divi 中的圖像文件來創建響應式設計。 您也可以免費下載 JSON 文件！ 如果您有任何問題或建議，請隨時在下面的評論部分發表評論。

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