如何使用 Divi 的滾動效果創建信封動畫

已發表: 2020-02-27

每次出現新的 Divi 功能時，我們都會嘗試分享一些很酷且有用的教程，這些教程將幫助您跳出框框思考並利用 Divi 發揮創意。今天的教程正是這樣做的。我們將向您展示如何使用 Divi 的滾動效果創建響應式包絡動畫。例如，這是強調號召性用語塊的好方法，但您也可以將其用於其他目的。您也可以免費下載 JSON 文件！

讓我們開始吧。

預覽

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

桌面

信封動畫

移動的

信封動畫

訂閱我們的 YouTube 頻道

免費下載信封動畫佈局

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

下載文件

免費下載

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

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

重新創建元素結構

將新部分添加到頁面中間或底部

背景顏色

首先在頁面中間或底部的某處添加一個新部分。打開部分設置並將背景顏色更改為白色。

背景顏色：#FFFFFF

信封動畫

間距

接下來修改間距設置。

頂部填充：5vw
底部填充：0px

信封動畫

溢出

並隱藏部分溢出。

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

信封動畫

添加第 1 行

列結構

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

信封動畫

背景顏色

尚未添加任何模塊，打開行設置並更改背景顏色。

背景顏色：#FFFFFF

信封動畫

漿紗

接下來移動到行的設計選項卡並按如下方式更改大小設置：

使用自定義裝訂線寬度：是
天溝寬度：1
寬度：90%
最大寬度：100%

信封動畫

間距

然後，在不同的屏幕尺寸中添加一些自定義填充值。

頂部填充：14vw（台式機）、11vw（平板電腦和手機）
底部填充：14vw（台式機），11vw（平板電腦和手機）
左填充：20vw（台式機），10vw（平板電腦和手機）
右填充：20vw（台式機），10vw（平板電腦和手機）

信封動畫

邊界

也添加一些邊界半徑。

所有角落：20px

信封動畫

盒子陰影

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

框陰影垂直位置：38px
框陰影模糊強度：80px
陰影顏色：rgba(0,0,0,0.08)

信封動畫

Z索引

通過增加高級選項卡中的 z 索引來完成行設置。

Z指數：11

信封動畫

將文本模塊 #1 添加到列

添加 H2 內容

是時候添加模塊了，從第一個文本模塊開始。輸入您選擇的一些 H2 含量。

信封動畫

H2 文本設置

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

標題 2 字體：Poppins
標題 2 文字大小：2vw（桌面）、4vw（平板電腦）、5vw（手機）

信封動畫

將文本模塊 #2 添加到列

添加內容

在上一個文本模塊的正下方添加另一個文本模塊，並插入一些您選擇的描述內容。

信封動畫

文字設置

轉到模塊的設計選項卡並更改文本設置。

文字字體：Open Sans
文字大小：1vw（桌面）、2vw（平板電腦）、3vw（手機）
文本行高：2.6em

信封動畫

間距

也可以在不同的屏幕尺寸上添加一些自定義的頂部和底部值。

頂部填充：2vw（桌面）、4vw（平板電腦）、5vw（手機）
底部填充：2vw（桌面）、4vw（平板電腦）、5vw（手機）

信封動畫

將按鈕模塊添加到列

添加副本

我們將放置在此行中的下一個也是最後一個模塊是按鈕模塊。添加一些您選擇的副本。

信封動畫

按鈕設置

然後，相應地設置按鈕樣式：

為按鈕使用自定義樣式：是
按鈕文字大小：1vw（桌面）、2vw（平板電腦）、3vw（手機）
按鈕文字顏色：#ffffff
按鈕背景顏色：#0f33ff
按鈕邊框寬度：0px

信封動畫

按鈕邊框半徑：100px
按鈕字體： Poppins

信封動畫

間距

並通過在不同屏幕尺寸上添加一些自定義填充值來完成模塊的設置。

頂部填充：1vw（桌面）、2vw（平板電腦）、3vw（手機）
底部填充：1vw（桌面）、2vw（平板電腦）、3vw（手機）
左填充：2vw（桌面）、4vw（平板電腦）、6vw（手機）
右填充：2vw（桌面）、4vw（平板電腦）、6vw（手機）

信封動畫

添加第 2 行

列結構

現在我們已經有了號召性用語行，是時候開始創建信封形狀了。為此，請使用以下列結構添加新行：

信封動畫

漿紗

通過如下更改大小設置，允許行佔據整個部分的寬度：

使用自定義裝訂線寬度：是
天溝寬度：1
寬度：100%
最大寬度：100%

信封動畫

間距

也刪除所有默認的頂部和底部填充。

頂部填充：0px
底部填充：0px

信封動畫

展示

為了確保列在較小的屏幕尺寸上彼此相鄰，我們將向行的主要元素添加一行 CSS 代碼。

display: flex;

信封動畫

將圖像模塊添加到第 1 列

將圖像框留空

將圖像模塊添加到第 1 列並將圖像框留空。

信封動畫

漸變背景

相反，我們使用漸變背景。

顏色 1：rgba(255,255,255,0)
顏色 2：#e8e8e8
漸變類型：線性
梯度方向：150度
起始位置：50%
結束位置：50%

信封動畫

間距

相應地更改模塊的填充值：

頂部填充：15vw
底部填充：15vw

信封動畫

在第 1 列中克隆圖像模塊並在第 2 列中放置重複項

完成第 1 列中的圖像模塊後，您可以克隆整個模塊並將副本放置在第 2 列中。

信封動畫

更改漸變背景

更改漸變背景如下：

顏色 1：rgba(255,255,255,0)
顏色 2：#efefef
漸變類型：線性
梯度方向：210度
起始位置：50%
結束位置：50%

信封動畫

添加第 3 行

列結構

要創建信封的底部，我們需要具有以下列結構的另一行：

信封動畫

漿紗

打開行設置並更改大小設置如下：

使用自定義裝訂線寬度：是
天溝寬度：1
寬度：100%
最大寬度：100%

信封動畫

間距

接下來刪除所有默認的頂部和底部填充。

頂部填充：0px
底部填充：0px

信封動畫

展示

並通過向行的主要元素添加一行 CSS 代碼來允許兩列彼此相鄰。

display: flex;

信封動畫

Z索引

通過增加高級選項卡中的 z 索引來完成行設置。

Z指數：12

信封動畫