如何使用轉換後的運動形狀作為 Divi 的背景

已發表: 2020-05-07

Divi 的新滾動效果可讓您輕鬆地將您的網頁設計體驗提升到一個新的水平。當然，您可以將其直接應用於您的部分中的元素，但您也可以選擇向底層元素添加運動。尋求底層方法可以讓您在進行背景運動的同時保持內容靜態。在本教程中，我們將使用轉換後的運動形狀作為我們的基礎元素來創建動畫部分。我們將處理兩個不同的例子，但可能性確實是無窮無盡的。您也可以免費下載 JSON 文件！

讓我們開始吧。

預覽

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

示例#1

桌面

變換的運動形狀

移動的

變換的運動形狀

示例#2

桌面

變換的運動形狀

移動的

變換的運動形狀

免費下載轉換後的運動形狀佈局

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

下載文件

免費下載

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

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

一般步驟

添加新部分

漸變背景

首先向您正在處理的頁面添加一個新部分。打開部分設置並應用漸變背景。

顏色 1：#ffffff
顏色 2：#97c6fc
漸變類型：線性
梯度方向：306deg
起始位置：50%
結束位置：50%

變換的運動形狀

間距

轉到該部分的設計選項卡並使用一些自定義邊距和填充值。

左邊距：4%
右邊距：4%
頂部填充：11%
底部填充：11%

變換的運動形狀

盒子陰影

我們也使用了一個微妙的盒子陰影。

框陰影模糊強度：80px
陰影顏色：rgba(0,0,0,0.1)
框陰影位置：外陰影

變換的運動形狀

能見度

我們將通過將溢出設置為隱藏來完成部分設置。這將確保當我們添加轉換後的運動形狀時，它們不會超出部分容器。

水平溢出：隱藏
垂直溢出：隱藏

變換的運動形狀

添加新行

列結構

繼續使用以下列結構向您的部分添加新行：

變換的運動形狀

漿紗

在不添加任何模塊的情況下，打開行設置並在大小設置中更改最大寬度。

最大寬度：1580px

變換的運動形狀

第 1 列間距

我們也在第一列的間距設置中添加了一些頂部填充。

頂部填充：9%

變換的運動形狀

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

添加 H2 內容

完成行設置後，就可以添加模塊了，從第 1 列中的文本模塊開始。添加一些您選擇的 H2 內容。

變換的運動形狀

H2 文本設置

轉到模塊的設計選項卡並相應地更改 H2 文本設置：

標題 2 字體：Abril Fatface
標題 2 文本顏色：#7206a0
標題 2 文字大小：80 像素（桌面）、65 像素（平板電腦）、50 像素（手機）

變換的運動形狀

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

文字設置

在上一個文本模塊的正下方添加另一個文本模塊，其中包含您選擇的一些描述內容。

變換的運動形狀

文字設置

更改模塊的文本設置如下：

文字字體：Open Sans
文字顏色：#7206a0
文本行高：2em

變換的運動形狀

將按鈕模塊添加到第 1 列

添加副本

我們在第 1 列中需要的最後一個模塊是按鈕模塊。輸入您選擇的一些副本。

變換的運動形狀

按鈕設置

然後，轉到設計選項卡並相應地設置按鈕樣式：

為按鈕使用自定義樣式：是
按鈕文字大小：20px
按鈕文字顏色：#ffffff
按鈕背景顏色：#077bff
按鈕邊框寬度：0px

變換的運動形狀

按鈕字體：Abril Fatface

變換的運動形狀

間距

我們也添加了一些自定義填充值。

頂部填充：20px
底部填充：20px
左填充：50px
右填充：50px

變換的運動形狀

將圖像模塊添加到第 2 列

上傳圖片

在行的第二列中，我們唯一需要的模塊是圖像模塊。上傳您選擇的插圖。如果您想使用我們在本教程中使用的確切版本，您可以在本文開頭的下載文件夾中找到它。

變換的運動形狀

結盟

接下來轉到模塊的設計選項卡並更改圖像對齊方式。

圖像對齊：右

變換的運動形狀

漿紗

通過修改不同屏幕尺寸的寬度來完成模塊設置。

寬度：100%（桌面），50%（平板電腦和手機）

變換的運動形狀

重新創建示例 #1

將文本模塊添加到第 1 列的頂部

一旦所有常規模塊就位，就該添加轉換後的運動形狀了！我們將通過在第一列的頂部添加一個新的文本模塊來重新創建第一個示例。將內容框留空。

變換的運動形狀

漸變背景

接下來為模塊添加漸變背景。

顏色 1：rgba(255,255,255,0)
顏色 2：#00fff6
漸變類型：線性
梯度方向：306deg
起始位置：54%
結束位置：54%

變換的運動形狀

漿紗

也修改大小設置。

寬度：165%
高度：270%

變換的運動形狀

間距

然後，轉到間距設置並使用一些自定義間距值。

下邊距：1vw（桌面）、2vw（平板電腦）、3vw（手機）
頂部填充：29%
底部填充：29%

變換的運動形狀

變換旋轉

我們接下來要旋轉模塊。

左：270度

變換的運動形狀

變換歪斜

我們還將應用變換偏斜值。

底部：16度
右：16度

變換的運動形狀

位置

然後，轉到高級選項卡並按如下方式修改位置設置：

位置：絕對
位置：左上角
垂直偏移：-50%
水平偏移：-50%

變換的運動形狀

垂直運動滾動效果

接下來，我們將添加滾動效果，從一些垂直運動開始。

啟用垂直運動：是
起始偏移：4
中間偏移：0（50%）
結束偏移：-4

變換的運動形狀

水平運動滾動效果

我們還將通過添加一些水平運動來完成模塊設置！

啟用水平運動：是
起始偏移：4
中間偏移：0（50%）
結束偏移：-4%

變換的運動形狀