在 Divi 中創建具有視差背景圖像轉換的全屏佈局

創建具有全屏部分的網頁是通過跨越瀏覽器的整個寬度和高度的平滑過渡和乾淨的部分佈局來改善用戶體驗的好方法。 通常，這適用於一次展示一個部分的產品或服務，允許用戶在向下滾動頁面時輕鬆地專注於每個部分。 這種類型的設計也非常適合與內容相關的背景圖像，並提供漂亮的設計口音。 如果您想獲得一點創意，可以在背景圖像中添加一些視差功能，以便在從一個全屏部分滾動到另一個部分時創建一些非常獨特的過渡。

在本教程中，我將向您展示如何在 Divi 中向全屏頁面佈局添加一些視差背景圖像過渡。 這個過程很簡單，你可以用它創造一些強大的結果。

搶先看

看看我們將一起構建的一些設計。

入門

訂閱我們的 YouTube 頻道

對於本教程，您只需要 Divi 和一組用於不同產品圖像和背景圖像的圖像。 我正在使用我們果汁店佈局包中的圖像。 您可以在包含此佈局包的博客文章底部下載帶有這些圖像的 zip 文件。 只需單擊“下載完整分辨率圖像資產”按鈕。

準備你的新頁面

準備好圖像後。 創建一個新頁面並為您​​的頁面命名。 然後部署 Divi Builder 並選擇“從頭開始構建”。 然後單擊按鈕在前端構建。

現在你可以開始了！

基本理念

這個概念背後的基本思想涉及堆疊多個全寬部分，每個部分都有一個全寬頭模塊。 每個標題模塊都有一個自定義寬度，可以在顯示部分背景時向左、居中或向右對齊。 然後每個部分都給出一個具有一定視差方法的背景圖像。 當您向下滾動頁面時，這會創建不同的背景圖像過渡效果。

這是如何做到的。

創建全角標題部分

首先，您需要創建一個新的全角部分，然後向該部分添加一個全角頭模塊。

使用以下內容更新全角標題設置：

作品名稱：《番茄汁》
按鈕 #1 鏈接文本：“參見食譜”
內容：“您的內容在這裡。 內聯或在模塊內容設置中編輯或刪除此文本。”
標誌圖片：[見截圖]（圖片為 240 像素 x 300 像素）

現在繼續更新您的標題設計，如下所示：

背景顏色：rgba(255,255,255,0.92)

全屏顯示：是

顯示向下滾動按鈕：是
圖標：見截圖
向下滾動圖標顏色：#222222

文字顏色：深色

標題標題級別：H2
標題字體：Raleway
標題文字大小：50px

正文字體：Lato
正文文字大小：16px
正文字母間距：1px

按鈕一文本大小：16px
按鈕 fOne 文本顏色：#ffffff
按鈕一背景顏色：#222222
按鈕一邊框半徑：50px
按鈕一個字母間距：2px
按鈕一字體樣式：TT

寬度：45%（桌面）、60%（平板電腦）、100%（智能手機）

保存設置。

這裡的主要關鍵設計元素是“製作全屏”選項和“寬度：45%”。 這將允許該部分始終跨越瀏覽器窗口的整個寬度和高度。 自定義寬度會縮小標題模塊以顯示我們接下來要添加的部分背景。

添加欄目背景

現在我們已經設計了我們的頭模塊，我們可以添加我們的部分背景圖像。 轉到全角部分設置並添加背景圖像。 確保它足夠大以跨越瀏覽器窗口的整個寬度和高度。 然後選擇使用 CSS 視差方法。

複製部分

由於每個部分都將顯示新內容，因此我們需要將全角部分複制三遍，以便您的頁面上總共有四個部分，每個部分都有一個標題模塊。

使用具有 CSS 視差的相同部分背景圖像創建靜態背景圖像

現在我們有四個相同的部分，我們可以使用新的徽標圖像和標題更新全角標題內容，以便更好地了解設計。 但是，如果我們對所有四個部分使用 CSS 視差保持相同的背景圖像，結果是靜態背景圖像在您滾動到不同的全屏部分時保持原位。 由於我們在每個標題上都使用了向下滾動按鈕，因此用戶可以選擇單擊箭頭以清晰地滾動到每個新部分。

檢查結果。

在 CSS 視差轉換中使用不同的背景圖像

為每個部分使用不同的背景圖像（帶有 CSS 視差）將在您滾動時改變設計的感覺。 由於我們已經為四部分背景圖像啟用了 CSS 視差，因此我們需要做的就是將每個圖像更改為不同的內容。 在這種情況下，我只是添加產品的大版本作為每個部分的背景圖像。

一旦您為四個部分中的每一個都設置了不同的背景圖像（使用 CSS 視差），請查看結果。

使用具有真實視差轉換的不同背景圖像

如果你想改變背景圖像的過渡效果，你可以將所有四個部分背景圖像的視差方法從 CSS 更改為 True Parallax。

打開部分設置之一併將 CSS 方法更改為“True Parallax”。

然後，您需要對其餘三個部分執行相同的操作。 或者您可以簡單地右鍵單擊視差方法選項並選擇“擴展視差方法”到整個頁面的所有全角標題模塊。

完成後，檢查背景圖像過渡效果。

探索不同的模塊對齊方式

更改全角標題模塊的對齊方式輕而易舉。 由於我們的全角標題模塊具有 45% 的自定義寬度，因此您可以輕鬆地將模塊對齊方式調整為左、中或右以獲得不同的佈局。 我特別喜歡靜態背景的居中對齊。

要使模塊居中，請打開 fullwidth header 設置並將Module Alignment更新為Centered 。

要將模塊與頁面右側對齊，只需將模塊對齊方式更新為右對齊即可。

一旦你確定了對齊方式，你可以簡單地將“模塊對齊”樣式擴展到整個頁面的其餘標題模塊。

這是一個帶有靜態背景的居中對齊示例（每個具有 CSS 視差的相同背景圖像）。

這是使用 CSS 視差方法對不同背景圖像進行居中對齊的示例。

以下是使用真實視差方法對不同背景圖像進行居中對齊的示例。

這是使用 css 和真實視差的組合與不同背景圖像右對齊的示例。

最後的想法

當與全屏部分和自定義標題模塊結合使用時，這些背景圖像過渡確實看起來很棒。 功能簡潔，設計微妙而獨特。 如果有的話，這是為您的內容創建靜態背景的一種快速簡便的方法。 隨意使用背景漸變、字體和圖像探索更高級的設計！

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

乾杯!