如何在 Divi 中創建用於吸引應用程序插圖的擴展層滾動效果

在您的網站上展示任何應用程序或產品不必僅限於靜態圖像或圖形。 借助 Divi 的滾動效果，您可以通過添加吸引訪問者的微妙而有效的動畫，使應用插圖栩栩如生。 在本教程中，我們將發現一種在 Divi 中創建擴展層滾動效果的簡單方法。 所需要的只是具有相同尺寸的三張圖像（或屏幕截圖）以及 Divi builder 的所有內置魔法。

讓我們開始吧。

搶先看

免費下載佈局

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

下載文件

免費下載

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

下載

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

要將佈局導入您的頁面，只需提取 zip 文件並將 JSON 文件拖到 Divi Builder 中。

讓我們進入教程，好嗎？

你需要什麼開始

首先，您需要執行以下操作：

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

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

在 Divi 中為引人入勝的應用程序插圖創建擴展層滾動效果

添加行

讓我們從添加 2 列（二分之一）的行開始。

向節添加臨時邊距

為了以後能夠預覽滾動效果，請按如下所示為該部分添加一些頂部和底部邊距：

• 邊距：80vh 頂部，80vh 底部

添加 3 個圖像作為圖層

我們將創建三個圖像作為應用程序插圖的三層。 這個想法是使用三個相同大小/尺寸的應用程序功能圖像（或屏幕截圖），以便圖像完美地相互疊加。 然後我們將使用 Divi 滾動效果移動三個圖層。

讓我們從第一張圖片開始。

創建圖像 1

將圖像模塊添加到左列。

然後將第一張圖片上傳到模塊。 請記住確保所有三個圖像都具有相同的尺寸。 這是 500 像素 x 1050 像素。

圖 1 設置

打開圖像模塊設置並更新以下內容：

寬度和邊距

• 寬度：300px（桌面和平板電腦），150px（手機）
• 模塊對齊方式：左
• 邊距：0px 底部

邊界

• 圓角：40px
• 邊框寬度：15px
• 邊框顏色：#ffffff

盒子陰影

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

創建圖像 2

要創建圖像 2，請複製圖像 1。

然後使用相同尺寸（500 像素 x 1050 像素）的新圖像更新重複的圖像模塊。

圖 2 設置

然後通過更新以下內容取出邊框：

邊界

• 邊框寬度：0px

我們不需要此圖像的邊框，但我們確實需要用填充替換邊框間距以確保圖像無縫堆疊。

填充

• 填充：頂部 15 像素，底部 15 像素，左側 15 像素，右側 15 像素

位置

然後將圖像 2 的位置更新為絕對。 這將使圖像完美地重疊圖像 1。

• 位置：絕對

有關更多信息，請查看我們關於如何在 Divi 中使用絕對位置的完整帖子。

滾動效果

現在是時候添加滾動效果，在向下滾動頁面時移動我們的圖層（圖 2）。

更新滾動效果如下：

在垂直運動選項卡下...

• 啟用垂直運動：是
• 起始偏移：0（在 0% 視口處）
• 中間偏移：0（在 0% 視口處）
• 結束偏移：-1（在 100% 視口處）

在水平運動選項卡下...

• 啟用水平運動：是
• 起始偏移：0（在 0% 視口處）
• 中間偏移：1（在 50% 視口處）
• 結束偏移：-1.5（在 100% 視口處）

在淡入淡出選項卡下...

• 啟用淡入淡出：是
• 起始不透明度：0%（在 0% 視口處）
• 中等不透明度：100%（在 10%-15% 視口處）
• 結束不透明度：70%（在 30% 視口處）

創建圖像 3

將所有滾動效果添加到圖像 2 後，我們就可以創建圖像 3。

打開構建器底部的設置菜單，然後選擇圖層按鈕以部署圖層彈出窗口。 然後在第 1 列內復製圖像模塊 2 以創建圖像 3。為此使用圖層功能很有幫助，因為很難選擇重疊的模塊。

現在打開復製圖像（圖像 3）的設置並上傳新圖像。 確保保持相同的尺寸（500 像素 x 1050 像素）。

圖 3 滾動效果

在高級選項卡下，更新圖像 3 的滾動效果選項。

在垂直運動選項卡下，更新垂直運動偏移如下：

• 結束偏移：-2（在 100% 視口處）

在Horizo​​ntal Motion選項卡下，按如下方式更新 Horizo​​ntal Motion：

• 中間偏移：2（在 50% 視口處）
• 結束偏移：3（在 100% 視口處）

在淡入和淡出選項卡下，更新淡入和淡出設置如下：

• 起始不透明度：5%（在 0% 視口處）
• 中等不透明度：100%（在 30%-40% 視口處）
• 結束不透明度：100%（在 50% 視口處）

結果

查看到目前為止的結果。

將變換傾斜添加到第 1 列

這是一個很好看的效果，但我們將傾斜列以創建更多的 3D 效果。

打開第 1 列的設置並添加如下變換傾斜：

變換傾斜（X 和 Y 軸）：8deg

這將在擴展層上創建一個很好的 3d 效果。

就是這樣！

可選：將 CTA 添加到第 2 列

現在我們可以使用一些免費的滾動效果將任何標題和按鈕（或任何 CTA）添加到右列。 查看上面此佈局的免費下載，以在此插圖中獲得相同的 CTA。

最後結果

這是最終結果。

這是它在平板電腦和手機上的堆疊方式。

使用 Divi 佈局包中的圖像

本教程中使用的圖像是來自 Shutterstock 的模擬圖像，並且在我們的滾動效果演示頁面上也有展示。

要更改設計以滿足您自己的需要，您可以使用我們免費佈局包中的圖像或創建您自己的屏幕截圖。 這是使用移動應用佈局包中的圖像的示例設計。 我還添加了一個漸變背景來補充用於擴展層的淺色圖像。

幾分鐘後，我們就有了完全不同的設計！

最後的想法

擴展層滾動效果是展示應用程序或產品的優雅解決方案，無需求助於更複雜的 CSS 技術或照片編輯。 而且，您可以使用相同的技術來說明任何事情。 我喜歡使用 Divi 中的一個簡單選項為您自己切換圖像並傾斜整個圖像/圖層集合是多麼容易。 希望這會給您一些靈感，使您能夠創造出令人驚嘆的 Divi 設計。

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

乾杯!