如何在 Divi 中的滾動上創建移動圖像陰影

已發表: 2020-08-05

在網頁設計領域，我們通常將陰影視為可以在 Photoshop 中添加的內容或 CSS 屬性（如 box-shadow 或 text-shadow）。但是有了 Divi，我們可以跳出框框（或框陰影）思考。只需對 Divi 的內置濾鏡和滾動效果選項進行一些調整，我們就可以將任何圖像轉換為逼真的陰影。

在本教程中，我們將向您展示如何在 Divi 中滾動時創建移動圖像陰影。訣竅是找到一個具有獨特形狀的 PNG 圖像，這樣，一旦圖像被轉換，它將保持形狀並看起來像圖像的真實陰影。圖像/陰影準備好後，我們可以添加一些滾動效果來在用戶滾動時移動陰影。這種不尋常（但又熟悉）的效果將添加令人驚嘆的設計元素，為您的網站帶來新的活力。

讓我們開始吧！

搶先看

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

免費下載佈局

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

下載文件

免費下載

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

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

要將部分佈局導入您的 Divi 庫，請導航到 Divi 庫。

單擊導入按鈕。

在可移植性彈出窗口中，選擇導入選項卡並從您的計算機中選擇下載文件。

然後點擊導入按鈕。

分區通知框

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

讓我們進入教程，好嗎？

你需要什麼開始

擴展角標籤

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

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

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

第 1 部分：設計剖面佈局

在第一部分中，我們將設計一個快速的部分佈局來補充運動圖像陰影滾動效果。

添加兩列行

首先，在常規部分添加一個兩列的行。

divi 運動圖像陰影

添加文本模塊

在左欄中，添加一個新的文本模塊。這將作為我們的模擬文本內容。

divi 運動圖像陰影

文字內容

然後將以下 HTML 粘貼到正文內容中：

<h2>Our Wedding</h2>
<p>Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.</p>

divi 運動圖像陰影