如何使用 Divi 的滾動效果逐步閃現流程的步驟

公司通常通過提供流程步驟的有用說明來向訪問者介紹他們的服務。 例如，網頁設計機構可能會展示他們的網頁開發過程，或者麵包店可能會展示他們製作完美紙杯蛋糕的步驟。

借助 Divi，我們可以使用內置的滾動效果將“流程的步驟”提升到一個完全不同的水平。 在本教程中，我們將向您展示一種簡單的方法，當用戶向下滾動頁面時，逐步將步驟閃現到流程中。 這將給設計一個很好的交互提升，創造性地強調預期的信息。

搶先看

免費下載佈局

要了解本教程中的設計，您首先需要使用下面的按鈕下載它。 要訪問下載，您需要使用下面的表格訂閱我們的 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
• 最大寬度：80%

到目前為止足夠簡單。 現在讓我們開始添加一些內容。

向每列添加內容（步驟）

由於此設計具有滾動效果，可將步驟閃爍到流程中，因此我們的每一列都將包含其中一個步驟。 第 1 列將包含說明第 1 步的內容。第 2 列將包含第 2 步的內容。依此類推。

將文本模塊添加到第 1 列

將新的文本模塊添加到第 1 列。

文本模塊內容和設計

然後更新文本內容如下：

打開設計選項卡並更新以下設置：

• 文字字體：Lato
• 文字字體粗細：粗體
• 文字文字顏色：#fc6d71
• 標題 2 字體：Oswald
• 標題 2 字體粗細：輕
• 標題 2 文字大小：32px
• 標題 2 字母間距：1px
• 標題 2 行高：1.3em
• 邊距：0px 底部
• 填充：頂部 10%，底部 10%
• 邊框寬度：1px
• 邊框顏色：rgba(166,166,166,0.16)

將圖像模塊添加到第 1 列

文本模塊就位後，在第 1 列中的文本模塊下方添加一個圖像模塊。

然後按如下方式更新圖像邊距：

複製和粘貼第 1 列的內容

為了加快設計過程，我們可以使用多選來選擇第 1 列中的兩個模塊，然後將它們粘貼到其餘四列中的每一列中。

更新重複模塊的內容

複製模塊到位後，返回並更新文本內容和圖像以反映流程中的四個步驟中的每一個。

完成後，您的設計應如下所示。

為每一列添加滾動效果

我們現在準備添加滾動效果以在用戶向下滾動頁面時閃爍過程的每個步驟。 我們不會為每個模塊添加滾動效果，而是將滾動效果添加到每一列，以便將效果應用於內容中的所有模塊。

為了創建閃爍的滾動效果，我們將為每一列使用淡入和淡出滾動效果。 這個想法是通過從 0% 不透明度開始，繼續到 100% 不透明度，然後回到 0% 來開始效果。

第 1 列滾動效果

在行設置中，打開第 1 列的設置並添加以下滾動效果：

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

• 啟用淡入淡出：是
• 起始不透明度：0%（在 20% 視口處）
• 中等不透明度：100%（在 25%-45% 視口處）
• 結束不透明度：0%（在 50% 視口處）

第 2 列滾動效果

打開第 2 列的設置並添加以下滾動效果：

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

• 啟用淡入淡出：是
• 起始不透明度：0%（在 35% 視口處）
• 中等不透明度：100%（在 40%-60% 視口處）
• 結束不透明度：0%（在 65% 視口處）

第 3 列滾動效果

第 4 列滾動效果

添加標題

最後，我們可以在佈局中添加一個標題。 為此，請在當前行下方添加一個新的單列行。

然後將文本模塊添加到具有以下內容的行：

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

• 文本對齊：拉托
• 標題 2 字體粗細：輕
• 標題 2 字體樣式：TT
• 標題 2 文本顏色：#fc6d71
• 標題 2 文字大小：70 像素（桌面）、40 像素（平板電腦）、24 像素（手機）
• 標題 2 字母間距：0.5em

最後結果

要在實時頁面上查看結果，您需要在該部分的上方和下方添加一些額外的空間，以查看從頭到尾的滾動效果。 一種簡單的方法是為該部分添加頂部和底部邊距。

這是結果。

最後的想法

說明流程的步驟不必局限於靜態圖像或圖形。 借助 Divi 的滾動效果，您可以在用戶向下滾動頁面時逐步將每一步閃爍到視圖中，從而使插圖栩栩如生。 而且，由於滾動效果添加到每一列，您可以輕鬆更改每列中的模塊/內容，而不會中斷功能。 希望這將是一種有用的技術，可以添加到您的設計工具箱中。

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

乾杯!